pigui/pireon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migra NgModules a componentes standalone

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-27 21:34:48 +02:00
parent 771d83c0aa
commit c84de249bf
173 changed files with 1229 additions and 2176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
libs/ui/src/index.ts
View File

@@ -51,11 +51,10 @@ export * from './lib/ui/panel';
export * from './lib/ui/progress'; export * from './lib/ui/progress';
export * from './lib/ui/select'; export * from './lib/ui/select';
// ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent // ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
export { PiSharedUISlideToggleModule } from './lib/ui/slide-toggle';
export * from './lib/ui/slider'; export * from './lib/ui/slider';
export * from './lib/ui/spinner'; export * from './lib/ui/spinner';
export * from './lib/ui/tab'; export * from './lib/ui/tab';
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective // ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
export { PiBaseTextViewerComponent, PiSharedUITextModule, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text'; export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
export * from './lib/ui/tooltip'; export * from './lib/ui/tooltip';
export * from './lib/ui/wrapper'; export * from './lib/ui/wrapper';

56
libs/ui/src/lib/ui/accordion/accordion.module.ts
View File

@@ -1,56 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
import { PiAccordionComponent } from './accordion/accordion.component';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { PiSharedUIIconModule } from '../icon';
import { PiSharedUITextModule } from '../text';
import {
PiAccordionFooterDirective,
PiAccordionHeaderDirective,
PiAccordionItemContentDirective,
PiAccordionItemDirective,
PiAccordionItemHeaderDirective,
PiAccordionSummaryContentDirective,
} from './directives/accordion-content.directive';
import { PiSharedUtilColorModule } from '../../util/color';
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIChipModule } from '../chip';
const MATERIAL_MODULES = [CdkAccordionModule];
@NgModule({
imports: [
CommonModule,
PiSharedUIButtonModule,
PiSharedUIChipModule,
PiSharedUIIconModule,
PiSharedUITextModule,
PiSharedUITextModule,
PiSharedUtilColorModule,
TranslatePipe, TranslateDirective,
MATERIAL_MODULES,
],
declarations: [
PiAccordionComponent,
PiAccordionItemHeaderDirective,
PiAccordionItemContentDirective,
PiAccordionItemDirective,
PiAccordionSummaryContentDirective,
PiAccordionHeaderDirective,
PiAccordionFooterDirective,
],
exports: [
PiAccordionComponent,
PiAccordionItemHeaderDirective,
PiAccordionItemContentDirective,
PiAccordionItemDirective,
PiAccordionSummaryContentDirective,
PiAccordionHeaderDirective,
PiAccordionFooterDirective,
],
})
export class PiSharedUIAccordionModule {}

29
libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts
View File

@@ -13,14 +13,31 @@ import {
SimpleChanges, SimpleChanges,
} from '@angular/core'; } from '@angular/core';
import { padding, styleType, textColor } from '../../../styles'; import { padding, styleType, textColor } from '../../../styles';
import { PiAccordionItemDirective } from '../directives/accordion-content.directive'; import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { PiDynamicColorDirective } from '../../../util/color/directives/colors.directive';
import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component';
import { PiChipStatusComponent } from '../../chip/chip-status/chip-status.component';
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-accordion',
selector: 'pi-accordion', templateUrl: './accordion.component.html',
templateUrl: './accordion.component.html', styleUrls: ['../styles/accordion.component.scss'],
styleUrls: ['../styles/accordion.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
NgFor,
PiDynamicColorDirective,
PiTextViewerComponent,
NgTemplateOutlet,
PiChipStatusComponent,
PiIconButtonComponent,
PiIconComponent,
TranslatePipe,
],
}) })
export class PiAccordionComponent implements OnChanges, AfterContentInit { export class PiAccordionComponent implements OnChanges, AfterContentInit {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

30
libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts
View File

@@ -13,10 +13,7 @@ import { status } from '../../../util/status';
* If it is needed it must be used as a Header for the whole accordion. * If it is needed it must be used as a Header for the whole accordion.
*/ */
@Directive({ @Directive({ selector: 'pi-accordion-header', })
standalone: false,
selector: 'pi-accordion-header',
})
export class PiAccordionHeaderDirective { export class PiAccordionHeaderDirective {
@HostBinding('class') className = 'pi-accordion-header'; @HostBinding('class') className = 'pi-accordion-header';
} }
@@ -26,27 +23,18 @@ export class PiAccordionHeaderDirective {
*/ */
// Accordion Item Header Content // Accordion Item Header Content
@Directive({ @Directive({ selector: '[pi-accordion-item-header-content]', })
standalone: false,
selector: '[pi-accordion-item-header-content]',
})
export class PiAccordionItemHeaderDirective { export class PiAccordionItemHeaderDirective {
constructor(public templateRef: TemplateRef<Element>) {} constructor(public templateRef: TemplateRef<Element>) {}
} }
// Accordion Item Summary Content // Accordion Item Summary Content
@Directive({ @Directive({ selector: '[pi-accordion-item-summary-content]', })
standalone: false,
selector: '[pi-accordion-item-summary-content]',
})
export class PiAccordionSummaryContentDirective { export class PiAccordionSummaryContentDirective {
constructor(public templateRef: TemplateRef<Element>) {} constructor(public templateRef: TemplateRef<Element>) {}
} }
// Accordion Item Expandable Content // Accordion Item Expandable Content
@Directive({ @Directive({ selector: '[pi-accordion-item-expandable-content]', })
standalone: false,
selector: '[pi-accordion-item-expandable-content]',
})
export class PiAccordionItemContentDirective { export class PiAccordionItemContentDirective {
constructor(public templateRef: TemplateRef<Element>) {} constructor(public templateRef: TemplateRef<Element>) {}
} }
@@ -55,18 +43,12 @@ export class PiAccordionItemContentDirective {
* The accordion footer is a separated content of the accordion items group. * The accordion footer is a separated content of the accordion items group.
* If it is needed it must be used as a Footer for the whole accordion. * If it is needed it must be used as a Footer for the whole accordion.
*/ */
@Directive({ @Directive({ selector: 'pi-accordion-footer', })
standalone: false,
selector: 'pi-accordion-footer',
})
export class PiAccordionFooterDirective { export class PiAccordionFooterDirective {
@HostBinding('class') className = 'pi-accordion-footer'; @HostBinding('class') className = 'pi-accordion-footer';
} }
@Directive({ @Directive({ selector: 'pi-accordion-item', })
standalone: false,
selector: 'pi-accordion-item',
})
export class PiAccordionItemDirective { export class PiAccordionItemDirective {
@Input() title = ''; @Input() title = '';
@Input() subtitle = ''; @Input() subtitle = '';

2
libs/ui/src/lib/ui/accordion/index.ts
View File

@@ -1,4 +1,4 @@
export * from './accordion.module';
export * from './accordion/accordion.component'; export * from './accordion/accordion.component';

17
libs/ui/src/lib/ui/banner/banner.module.ts
View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiBannerComponent } from './banner/banner.component';
// Shared
import { PiSharedUITextModule } from '../text';
import { PiSharedUIWrapperModule } from '../wrapper';
import { PiSharedUtilColorModule } from '../../util/color';
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIImageModule } from '../image';
@NgModule({
imports: [CommonModule, PiSharedUITextModule, PiSharedUIWrapperModule, PiSharedUtilColorModule, PiSharedUIButtonModule, PiSharedUIImageModule],
declarations: [PiBannerComponent],
exports: [PiBannerComponent],
})
export class PiSharedUIBannerModule {}

19
libs/ui/src/lib/ui/banner/banner/banner.component.ts
View File

@@ -1,10 +1,19 @@
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core'; import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { PiBackgroundImageDirective } from '../../image/background-image.directive';
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
import { NgIf } from '@angular/common';
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
@Component({ @Component({
standalone: false, selector: 'pi-banner',
selector: 'pi-banner', templateUrl: './banner.component.html',
templateUrl: './banner.component.html', styleUrls: ['./banner.component.scss'],
styleUrls: ['./banner.component.scss'], imports: [
PiBackgroundImageDirective,
PiTextWeightBoldDirective,
NgIf,
PiIconButtonComponent,
],
}) })
export class PiBannerComponent { export class PiBannerComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/banner/index.ts
View File

@@ -1,3 +1,3 @@
export * from './banner.module';
export * from './banner/banner.component'; export * from './banner/banner.component';

13
libs/ui/src/lib/ui/button/action-button/action-button.component.ts
View File

@@ -1,13 +1,14 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { buttonSize, mode } from '../../../styles'; import { buttonSize, mode } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
@Component({ @Component({
standalone: false, selector: 'pi-action-button',
selector: 'pi-action-button', templateUrl: './action-button.component.html',
templateUrl: './action-button.component.html', styleUrls: ['./action-button.component.scss'],
styleUrls: ['./action-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf],
}) })
export class PiActionButtonComponent extends PiBaseButtonComponent { export class PiActionButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

45
libs/ui/src/lib/ui/button/button.directive.ts
View File

@@ -2,10 +2,7 @@ import { Directive, HostBinding, Input } from '@angular/core';
import { buttonSize } from '../../styles'; import { buttonSize } from '../../styles';
// Style // Style
@Directive({ @Directive({ selector: '[pi-ghost]', })
standalone: false,
selector: '[pi-ghost]',
})
export class PiGhostButtonDirective { export class PiGhostButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
const hasPaddingClass = this.hasPadding ? '' : 'pi-button__trimmed'; const hasPaddingClass = this.hasPadding ? '' : 'pi-button__trimmed';
@@ -14,20 +11,14 @@ export class PiGhostButtonDirective {
@Input() hasPadding = true; @Input() hasPadding = true;
} }
@Directive({ @Directive({ selector: '[pi-outline]', })
standalone: false,
selector: '[pi-outline]',
})
export class PiOutlineButtonDirective { export class PiOutlineButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__appearance--outline'; return 'pi-button pi-button__appearance--outline';
} }
} }
@Directive({ @Directive({ selector: '[pi-button-size]', })
standalone: false,
selector: '[pi-button-size]',
})
export class PiButtonSizeDirective { export class PiButtonSizeDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return this.sizeClass; return this.sizeClass;
@@ -41,10 +32,7 @@ export class PiButtonSizeDirective {
} }
// Size // Size
@Directive({ @Directive({ selector: '[xx-small]', })
standalone: false,
selector: '[xx-small]',
})
export class PiXXSmallButtonDirective { export class PiXXSmallButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__xx-small'; return 'pi-button pi-button__xx-small';
@@ -52,50 +40,35 @@ export class PiXXSmallButtonDirective {
} }
// Size // Size
@Directive({ @Directive({ selector: '[x-small]', })
standalone: false,
selector: '[x-small]',
})
export class PiXSmallButtonDirective { export class PiXSmallButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__x-small'; return 'pi-button pi-button__x-small';
} }
} }
@Directive({ @Directive({ selector: '[small]', })
standalone: false,
selector: '[small]',
})
export class PiSmallButtonDirective { export class PiSmallButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__small'; return 'pi-button pi-button__small';
} }
} }
@Directive({ @Directive({ selector: '[medium]', })
standalone: false,
selector: '[medium]',
})
export class PiMediumButtonDirective { export class PiMediumButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__medium'; return 'pi-button pi-button__medium';
} }
} }
@Directive({ @Directive({ selector: '[large]', })
standalone: false,
selector: '[large]',
})
export class PiLargeButtonDirective { export class PiLargeButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__large'; return 'pi-button pi-button__large';
} }
} }
@Directive({ @Directive({ selector: '[w100]', })
standalone: false,
selector: '[w100]',
})
export class PiW100ButtonDirective { export class PiW100ButtonDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
return 'pi-button pi-button__w100'; return 'pi-button pi-button__w100';

13
libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts
View File

@@ -7,14 +7,15 @@ import {
Output, Output,
} from '@angular/core'; } from '@angular/core';
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-chevron-button',
selector: 'pi-chevron-button', templateUrl: './chevron-button.component.html',
templateUrl: './chevron-button.component.html', styleUrls: ['./chevron-button.component.scss'],
styleUrls: ['./chevron-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon],
}) })
export class PiChevronButtonComponent extends PiBaseButtonComponent { export class PiChevronButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

13
libs/ui/src/lib/ui/button/close-button/close-button.component.ts
View File

@@ -7,14 +7,15 @@ import {
Output, Output,
} from '@angular/core'; } from '@angular/core';
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-close-button',
selector: 'pi-close-button', templateUrl: './close-button.component.html',
templateUrl: './close-button.component.html', styleUrls: ['./close-button.component.scss'],
styleUrls: ['./close-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe],
}) })
export class PiCloseButtonComponent extends PiBaseButtonComponent { export class PiCloseButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

13
libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts
View File

@@ -1,13 +1,14 @@
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Output } from '@angular/core'; import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Output } from '@angular/core';
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-hamburger',
selector: 'pi-hamburger', templateUrl: './hamburger.component.html',
templateUrl: './hamburger.component.html', styleUrls: ['./hamburger.component.scss'],
styleUrls: ['./hamburger.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe],
}) })
export class PiHamburgerComponent extends PiBaseButtonComponent { export class PiHamburgerComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

14
libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts
View File

@@ -7,14 +7,16 @@ import {
ViewChild, ViewChild,
} from '@angular/core'; } from '@angular/core';
import { buttonSize, mode } from '../../../styles'; import { buttonSize, mode } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-icon-button',
selector: 'pi-icon-button', templateUrl: './icon-button.component.html',
templateUrl: './icon-button.component.html', styleUrls: ['./icon-button.component.scss'],
styleUrls: ['./icon-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiIconButtonComponent extends PiBaseButtonComponent { export class PiIconButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/button/index.ts
View File

@@ -10,7 +10,7 @@ export * from './switch-button/switch-button.component';
export * from './toggle-button/toggle-button.component'; export * from './toggle-button/toggle-button.component';
// Export button's module // Export button's module
export * from './ui-button.module';
// Export button's directive // Export button's directive
export * from './button.directive'; export * from './button.directive';

14
libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts
View File

@@ -1,12 +1,14 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-radio-button',
selector: 'pi-radio-button', templateUrl: './radio-button.component.html',
templateUrl: './radio-button.component.html', styleUrls: ['./radio-button.component.scss'],
styleUrls: ['./radio-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiRadioButtonComponent extends PiBaseButtonComponent { export class PiRadioButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

14
libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts
View File

@@ -7,14 +7,16 @@ import {
Output, Output,
} from '@angular/core'; } from '@angular/core';
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { NgTemplateOutlet } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-switch-button',
selector: 'pi-switch-button', templateUrl: './switch-button.component.html',
templateUrl: './switch-button.component.html', styleUrls: ['./switch-button.component.scss'],
styleUrls: ['./switch-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MatIcon],
}) })
export class PiSwitchButtonComponent extends PiBaseButtonComponent { export class PiSwitchButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

20
libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts
View File

@@ -1,33 +1,21 @@
import { Directive, HostBinding } from '@angular/core'; import { Directive, HostBinding } from '@angular/core';
@Directive({ @Directive({ selector: 'pi-prefix-left', })
standalone: false,
selector: 'pi-prefix-left',
})
export class PiSwitchButtonPrefixLeftDirective { export class PiSwitchButtonPrefixLeftDirective {
@HostBinding('class') className = 'pi-switch-button__prefix--left'; @HostBinding('class') className = 'pi-switch-button__prefix--left';
} }
@Directive({ @Directive({ selector: 'pi-suffix-left', })
standalone: false,
selector: 'pi-suffix-left',
})
export class PiSwitchButtonSuffixLeftDirective { export class PiSwitchButtonSuffixLeftDirective {
@HostBinding('class') className = 'pi-switch-button__suffix--left'; @HostBinding('class') className = 'pi-switch-button__suffix--left';
} }
@Directive({ @Directive({ selector: 'pi-prefix-right', })
standalone: false,
selector: 'pi-prefix-right',
})
export class PiSwitchButtonPrefixRightDirective { export class PiSwitchButtonPrefixRightDirective {
@HostBinding('class') className = 'pi-switch-button__prefix--right'; @HostBinding('class') className = 'pi-switch-button__prefix--right';
} }
@Directive({ @Directive({ selector: 'pi-suffix-right', })
standalone: false,
selector: 'pi-suffix-right',
})
export class PiSwitchButtonSuffixRightDirective { export class PiSwitchButtonSuffixRightDirective {
@HostBinding('class') className = 'pi-switch-button__suffix--right'; @HostBinding('class') className = 'pi-switch-button__suffix--right';
} }

14
libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts
View File

@@ -1,13 +1,15 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { buttonSize } from '../../../styles'; import { buttonSize } from '../../../styles';
import { PiBaseButtonComponent } from '../base-button.component'; import { PiBaseButtonComponent } from '../base-button.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-toggle-button',
selector: 'pi-toggle-button', templateUrl: './toggle-button.component.html',
templateUrl: './toggle-button.component.html', styleUrls: ['./toggle-button.component.scss'],
styleUrls: ['./toggle-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiToggleButtonComponent extends PiBaseButtonComponent { export class PiToggleButtonComponent extends PiBaseButtonComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

88
libs/ui/src/lib/ui/button/ui-button.module.ts
View File

@@ -1,88 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
import { MatIconModule } from '@angular/material/icon';
import {
PiButtonSizeDirective,
PiGhostButtonDirective,
PiLargeButtonDirective,
PiMediumButtonDirective,
PiOutlineButtonDirective,
PiSmallButtonDirective,
PiW100ButtonDirective,
PiXSmallButtonDirective,
PiXXSmallButtonDirective,
} from './button.directive';
import { PiCloseButtonComponent } from './close-button/close-button.component';
import { PiHamburgerComponent } from './hamburger/hamburger.component';
import { PiIconButtonComponent } from './icon-button/icon-button.component';
import { PiSharedUIIconModule } from '../icon';
import { PiChevronButtonComponent } from './chevron-button/chevron-button.component';
import { PiSwitchButtonComponent } from './switch-button/switch-button.component';
import { PiToggleButtonComponent } from './toggle-button/toggle-button.component';
import { PiRadioButtonComponent } from './radio-button/radio-button.component';
import { PiActionButtonComponent } from './action-button/action-button.component';
import {
PiSwitchButtonPrefixLeftDirective,
PiSwitchButtonSuffixLeftDirective,
PiSwitchButtonPrefixRightDirective,
PiSwitchButtonSuffixRightDirective,
} from './switch-button/switch-button.directive';
@NgModule({
imports: [CommonModule, TranslatePipe, TranslateDirective, PiSharedUIIconModule, MatIconModule],
declarations: [
PiActionButtonComponent,
PiChevronButtonComponent,
PiCloseButtonComponent,
PiGhostButtonDirective,
PiButtonSizeDirective,
PiHamburgerComponent,
PiIconButtonComponent,
PiLargeButtonDirective,
PiMediumButtonDirective,
PiOutlineButtonDirective,
PiRadioButtonComponent,
PiSmallButtonDirective,
PiSwitchButtonComponent,
PiToggleButtonComponent,
PiW100ButtonDirective,
PiXSmallButtonDirective,
PiXXSmallButtonDirective,
PiRadioButtonComponent,
PiSwitchButtonPrefixLeftDirective,
PiSwitchButtonSuffixLeftDirective,
PiSwitchButtonPrefixRightDirective,
PiSwitchButtonSuffixRightDirective,
],
exports: [
PiActionButtonComponent,
PiChevronButtonComponent,
PiCloseButtonComponent,
PiButtonSizeDirective,
PiCloseButtonComponent,
PiGhostButtonDirective,
PiHamburgerComponent,
PiIconButtonComponent,
PiLargeButtonDirective,
PiMediumButtonDirective,
PiOutlineButtonDirective,
PiRadioButtonComponent,
PiSmallButtonDirective,
PiSwitchButtonComponent,
PiToggleButtonComponent,
PiW100ButtonDirective,
PiXSmallButtonDirective,
PiXXSmallButtonDirective,
PiRadioButtonComponent,
PiSwitchButtonSuffixLeftDirective,
PiSwitchButtonPrefixLeftDirective,
PiSwitchButtonPrefixRightDirective,
PiSwitchButtonSuffixRightDirective,
],
})
export class PiSharedUIButtonModule {}

12
libs/ui/src/lib/ui/card/card/card.component.ts
View File

@@ -2,13 +2,15 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
// Components // Components
import { PiBaseCardComponent } from '../base-card.component'; import { PiBaseCardComponent } from '../base-card.component';
import { NgIf } from '@angular/common';
import { PiIconComponent } from '../../icon/icon/icon.component';
@Component({ @Component({
standalone: false, selector: 'pi-card',
selector: 'pi-card', templateUrl: './card.component.html',
templateUrl: './card.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, PiIconComponent],
}) })
export class PiCardComponent extends PiBaseCardComponent { export class PiCardComponent extends PiBaseCardComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

29
libs/ui/src/lib/ui/card/directives/card.directive.ts
View File

@@ -1,42 +1,29 @@
import { Directive, HostBinding, Input } from '@angular/core'; import { Directive, HostBinding, Input } from '@angular/core';
@Directive({ @Directive({
standalone: false, selector: 'pi-card-top-content',
selector: 'pi-card-top-content', host: {
host: { class: 'pi-card-content pi-card-content__top',
class: 'pi-card-content pi-card-content__top', },
},
}) })
export class PiCardTopContentDirective {} export class PiCardTopContentDirective {}
@Directive({ @Directive({ selector: 'pi-card-center-content', })
standalone: false,
selector: 'pi-card-center-content',
})
export class PiCardCenterContentDirective { export class PiCardCenterContentDirective {
@HostBinding('class') className = 'pi-card-content pi-card-content__center'; @HostBinding('class') className = 'pi-card-content pi-card-content__center';
} }
@Directive({ @Directive({ selector: 'pi-card-bottom-content', })
standalone: false,
selector: 'pi-card-bottom-content',
})
export class PiCardBottomContentDirective { export class PiCardBottomContentDirective {
@HostBinding('class') className = 'pi-card-content pi-card-content__bottom'; @HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
} }
@Directive({ @Directive({ selector: 'pi-card-left-content', })
standalone: false,
selector: 'pi-card-left-content',
})
export class PiCardLeftContentDirective { export class PiCardLeftContentDirective {
@HostBinding('class') className = 'pi-card-content pi-card-content__left'; @HostBinding('class') className = 'pi-card-content pi-card-content__left';
} }
@Directive({ @Directive({ selector: 'pi-card-right-content', })
standalone: false,
selector: 'pi-card-right-content',
})
export class PiCardRightContentDirective { export class PiCardRightContentDirective {
@HostBinding('class') className = 'pi-card-content pi-card-content__right'; @HostBinding('class') className = 'pi-card-content pi-card-content__right';
} }

2
libs/ui/src/lib/ui/card/index.ts
View File

@@ -1,4 +1,4 @@
export * from './ui-card.module';
export * from './card/card.component'; export * from './card/card.component';

32
libs/ui/src/lib/ui/card/ui-card.module.ts
View File

@@ -1,32 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { PiSharedUIIconModule } from '../icon';
import { PiCardComponent } from './card/card.component';
import {
PiCardBottomContentDirective,
PiCardCenterContentDirective,
PiCardLeftContentDirective,
PiCardRightContentDirective,
PiCardTopContentDirective,
} from './directives/card.directive';
@NgModule({
imports: [CommonModule, PiSharedUIIconModule],
declarations: [
PiCardComponent,
PiCardTopContentDirective,
PiCardCenterContentDirective,
PiCardBottomContentDirective,
PiCardLeftContentDirective,
PiCardRightContentDirective,
],
exports: [
PiCardComponent,
PiCardTopContentDirective,
PiCardCenterContentDirective,
PiCardBottomContentDirective,
PiCardLeftContentDirective,
PiCardRightContentDirective,
],
})
export class PiSharedUICardModule {}

5
libs/ui/src/lib/ui/carousel/carousel.directive.ts
View File

@@ -1,9 +1,8 @@
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ @Directive({
standalone: false, selector: '[pi-carousel-item]',
selector: '[pi-carousel-item]', host: { class: 'pi-carousel pi-carousel__item' },
host: { class: 'pi-carousel pi-carousel__item' },
}) })
export class PiCarouselItemDirective { export class PiCarouselItemDirective {
constructor(public templateRef: TemplateRef<Element>, public viewContainerRef: ViewContainerRef) {} constructor(public templateRef: TemplateRef<Element>, public viewContainerRef: ViewContainerRef) {}

19
libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts
View File

@@ -24,14 +24,21 @@ import {
import { ComponentFamilyClass, justify, theming } from '../../../styles'; import { ComponentFamilyClass, justify, theming } from '../../../styles';
import { Device, DeviceConfigsFacade } from '../../../util/device-configs'; import { Device, DeviceConfigsFacade } from '../../../util/device-configs';
import { PiCarouselItemDirective } from '../carousel.directive'; import { PiCarouselItemDirective } from '../carousel.directive';
import { Subject, combineLatest, skip, takeUntil } from 'rxjs'; import { Subject, combineLatest, skip, takeUntil } from 'rxjs';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
@Component({ @Component({
standalone: false, selector: 'pi-carousel',
selector: 'pi-carousel', templateUrl: './carousel.component.html',
templateUrl: './carousel.component.html', styleUrls: ['./carousel.component.scss'],
styleUrls: ['./carousel.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
PiIconButtonComponent,
NgFor,
NgTemplateOutlet,
],
}) })
export class PiCarouselComponent export class PiCarouselComponent
implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy

2
libs/ui/src/lib/ui/carousel/index.ts
View File

@@ -1,4 +1,4 @@
export * from './ui-carousel.module';
export * from './carousel/carousel.component'; export * from './carousel/carousel.component';

15
libs/ui/src/lib/ui/carousel/ui-carousel.module.ts
View File

@@ -1,15 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiCarouselComponent } from './carousel/carousel.component';
import { PiCarouselItemDirective } from './carousel.directive';
import { PiSharedUIButtonModule } from '../button';
@NgModule({
imports: [
CommonModule,
PiSharedUIButtonModule,
],
declarations: [PiCarouselComponent, PiCarouselItemDirective],
exports: [PiCarouselComponent, PiCarouselItemDirective],
})
export class PiSharedUICarouselModule {}

14
libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts
View File

@@ -6,14 +6,16 @@ import {
Input, Input,
Output Output
} from '@angular/core'; } from '@angular/core';
import { Dataset } from '../../../util/models'; import { Dataset } from '../../../util/models';
import { NgFor } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-chart-legend',
selector: 'pi-chart-legend', templateUrl: './chart-legend.component.html',
templateUrl: './chart-legend.component.html', styleUrls: ['./chart-legend.component.scss'],
styleUrls: ['./chart-legend.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, TranslatePipe],
}) })
export class PiChartLegendComponent { export class PiChartLegendComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

15
libs/ui/src/lib/ui/chart/chart.module.ts
View File

@@ -1,15 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiChartComponent } from './chart/chart.component';
import { PiChartLegendComponent } from './chart-legend/chart-legend.component';
import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
@NgModule({
imports: [
CommonModule,
TranslatePipe, TranslateDirective,
],
declarations: [PiChartComponent, PiChartLegendComponent],
exports: [PiChartComponent, PiChartLegendComponent],
})
export class PiSharedUIChartModule {}

13
libs/ui/src/lib/ui/chart/chart/chart.component.ts
View File

@@ -24,7 +24,8 @@ import {
Title, Title,
Tooltip, Tooltip,
} from 'chart.js'; } from 'chart.js';
import { datasetConfig, scalesConfig, tooltipConfig } from '../chart.configs'; import { datasetConfig, scalesConfig, tooltipConfig } from '../chart.configs';
import { PiChartLegendComponent } from '../chart-legend/chart-legend.component';
function registerChartComponents() { function registerChartComponents() {
Chart.register(CategoryScale); Chart.register(CategoryScale);
@@ -41,11 +42,11 @@ function registerChartComponents() {
registerChartComponents(); registerChartComponents();
@Component({ @Component({
standalone: false, selector: 'pi-chart',
selector: 'pi-chart', templateUrl: './chart.component.html',
templateUrl: './chart.component.html', styleUrls: ['./chart.component.scss'],
styleUrls: ['./chart.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [PiChartLegendComponent],
}) })
export class PiChartComponent implements OnInit, AfterViewInit { export class PiChartComponent implements OnInit, AfterViewInit {
@Input() type: 'line' | 'bar' = 'line'; @Input() type: 'line' | 'bar' = 'line';

2
libs/ui/src/lib/ui/chart/index.ts
View File

@@ -1,4 +1,4 @@
export * from './chart.module';
export * from './chart/chart.component'; export * from './chart/chart.component';

14
libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts
View File

@@ -8,14 +8,16 @@ import {
} from '@angular/core'; } from '@angular/core';
import { ComponentFamilyClass, mode, styleType } from '../../../styles'; import { ComponentFamilyClass, mode, styleType } from '../../../styles';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { chipColor } from '../entities/chip.model'; import { chipColor } from '../entities/chip.model';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-chip-action',
selector: 'pi-chip-action', templateUrl: './chip-action.component.html',
templateUrl: './chip-action.component.html', styleUrls: ['./chip-action.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip-action.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiChipActionComponent extends PiBaseChipComponent { export class PiChipActionComponent extends PiBaseChipComponent {
@HostBinding('class') get actionClasses(): string { @HostBinding('class') get actionClasses(): string {

13
libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts
View File

@@ -10,14 +10,15 @@ import { ComponentFamilyClass, theming } from '../../../styles';
import { Date } from '../../../util/models'; import { Date } from '../../../util/models';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import _ from 'lodash'; import _ from 'lodash';
import { NgIf } from '@angular/common';
@Component({ @Component({
standalone: false, selector: 'pi-chip-date',
selector: 'pi-chip-date', templateUrl: './chip-date.component.html',
templateUrl: './chip-date.component.html', styleUrls: ['./chip-date.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip-date.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf],
}) })
export class PiChipDateComponent extends PiBaseChipComponent { export class PiChipDateComponent extends PiBaseChipComponent {
@HostBinding('class') get dateClasses(): string { @HostBinding('class') get dateClasses(): string {

14
libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts
View File

@@ -2,14 +2,16 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
// Shared // Shared
import { status } from '../../../util/status'; import { status } from '../../../util/status';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-chip-status',
selector: 'pi-chip-status', templateUrl: './chip-status.component.html',
templateUrl: './chip-status.component.html', styleUrls: ['./chip-status.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip-status.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiChipStatusComponent extends PiBaseChipComponent { export class PiChipStatusComponent extends PiBaseChipComponent {
@HostBinding('class') get statusClasses(): string { @HostBinding('class') get statusClasses(): string {

14
libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts
View File

@@ -9,14 +9,16 @@ import {
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { chipThemingColor } from '../entities/chip.model'; import { chipThemingColor } from '../entities/chip.model';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-chip-time',
selector: 'pi-chip-time', templateUrl: './chip-time.component.html',
templateUrl: './chip-time.component.html', styleUrls: ['./chip-time.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip-time.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiChipTimeComponent extends PiBaseChipComponent { export class PiChipTimeComponent extends PiBaseChipComponent {
@HostBinding('class') get dateClasses(): string { @HostBinding('class') get dateClasses(): string {

13
libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts
View File

@@ -1,13 +1,14 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { unit } from '../../../util/models'; import { unit } from '../../../util/models';
import { NgIf } from '@angular/common';
@Component({ @Component({
standalone: false, selector: 'pi-chip-value',
selector: 'pi-chip-value', templateUrl: './chip-value.component.html',
templateUrl: './chip-value.component.html', styleUrls: ['./chip-value.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip-value.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf],
}) })
export class PiChipValueComponent extends PiBaseChipComponent { export class PiChipValueComponent extends PiBaseChipComponent {
@HostBinding('class') get valueClasses(): string { @HostBinding('class') get valueClasses(): string {

14
libs/ui/src/lib/ui/chip/chip/chip.component.ts
View File

@@ -1,13 +1,15 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { theming } from '../../../styles'; import { theming } from '../../../styles';
import { PiBaseChipComponent } from '../base-chip.component'; import { PiBaseChipComponent } from '../base-chip.component';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-chip',
selector: 'pi-chip', templateUrl: './chip.component.html',
templateUrl: './chip.component.html', styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'],
styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiChipComponent extends PiBaseChipComponent { export class PiChipComponent extends PiBaseChipComponent {
@HostBinding('class') get chipClasses(): string { @HostBinding('class') get chipClasses(): string {

2
libs/ui/src/lib/ui/chip/index.ts
View File

@@ -1,4 +1,4 @@
export * from './ui-chip.module';
export * from './chip/chip.component'; export * from './chip/chip.component';
export * from './chip-action/chip-action.component'; export * from './chip-action/chip-action.component';

14
libs/ui/src/lib/ui/chip/tile/tile.component.ts
View File

@@ -1,12 +1,14 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { ComponentFamilyClass, theming } from '../../../styles'; import { ComponentFamilyClass, theming } from '../../../styles';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-tile',
selector: 'pi-tile', templateUrl: './tile.component.html',
templateUrl: './tile.component.html', styleUrls: ['./tile.component.scss'],
styleUrls: ['./tile.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiTileComponent { export class PiTileComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

41
libs/ui/src/lib/ui/chip/ui-chip.module.ts
View File

@@ -1,41 +0,0 @@
// Angular
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
// Components
import { PiChipComponent } from './chip/chip.component';
import { PiChipStatusComponent } from './chip-status/chip-status.component';
import { PiTileComponent } from './tile/tile.component';
import { PiChipValueComponent } from './chip-value/chip-value.component';
import { PiChipDateComponent } from './chip-date/chip-date.component';
import { PiChipTimeComponent } from './chip-time/chip-time.component';
import { PiChipActionComponent } from './chip-action/chip-action.component';
import { PiSharedUtilAffixModule } from '../../util/affix';
import { PiSharedUtilValueModule } from '../../util/value';
const MATERIAL_IMPORTS = [MatIconModule];
@NgModule({
imports: [CommonModule, MATERIAL_IMPORTS, PiSharedUtilAffixModule, PiSharedUtilValueModule],
declarations: [
PiChipComponent,
PiChipActionComponent,
PiChipDateComponent,
PiChipStatusComponent,
PiChipValueComponent,
PiChipTimeComponent,
PiTileComponent,
],
exports: [
PiChipComponent,
PiChipActionComponent,
PiChipDateComponent,
PiChipStatusComponent,
PiChipValueComponent,
PiChipTimeComponent,
PiTileComponent,
],
})
export class PiSharedUIChipModule {}

17
libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts
View File

@@ -13,13 +13,20 @@ import {
} from '@angular/core'; } from '@angular/core';
import { justify } from '../../../styles'; import { justify } from '../../../styles';
import { ListMode } from '../../../util/list-configs'; import { ListMode } from '../../../util/list-configs';
import { cardType, columnsNumber, rowsNumber } from '../entities/data-grid.model'; import { cardType, columnsNumber, rowsNumber } from '../entities/data-grid.model';
import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
import { PiGridItemDirective } from '../directives/grid-item.directive';
@Component({ @Component({
standalone: false, selector: 'pi-data-grid',
selector: 'pi-data-grid', templateUrl: './data-grid.component.html',
templateUrl: './data-grid.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
PiGridItemDirective,
NgTemplateOutlet,
NgFor,
],
}) })
export class PiDataGridComponent<T> { export class PiDataGridComponent<T> {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

5
libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts
View File

@@ -1,10 +1,7 @@
import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';
import { itemType } from '../entities/data-grid.model'; import { itemType } from '../entities/data-grid.model';
@Directive({ @Directive({ selector: '[pi-cell]', })
standalone: false,
selector: '[pi-cell]',
})
export class PiCellDirective implements AfterViewInit { export class PiCellDirective implements AfterViewInit {
@HostBinding(`class`) get cellType(): string | undefined { @HostBinding(`class`) get cellType(): string | undefined {
const textAlignClass = this.textAlign !== 'left' && `pi-cell__text-align--${this.textAlign}`; const textAlignClass = this.textAlign !== 'left' && `pi-cell__text-align--${this.textAlign}`;

5
libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts
View File

@@ -1,10 +1,7 @@
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core'; import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
import { columnsNumber } from '../entities/data-grid.model'; import { columnsNumber } from '../entities/data-grid.model';
@Directive({ @Directive({ selector: '[pi-grid-item]', })
standalone: false,
selector: '[pi-grid-item]',
})
export class PiGridItemDirective { export class PiGridItemDirective {
@HostBinding(`class`) get gridItemType(): string { @HostBinding(`class`) get gridItemType(): string {
const isExpandableClass = this.isExpandable ? 'is-expandable' : ''; const isExpandableClass = this.isExpandable ? 'is-expandable' : '';

2
libs/ui/src/lib/ui/data-grid/index.ts
View File

@@ -1,4 +1,4 @@
export * from './shared-ui-data-grid.module';
export * from './data-grid/data-grid.component'; export * from './data-grid/data-grid.component';

13
libs/ui/src/lib/ui/data-grid/shared-ui-data-grid.module.ts
View File

@@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiDataGridComponent } from './data-grid/data-grid.component';
import { PiCellDirective } from './directives/cell.directive';
import { PiGridItemDirective } from './directives/grid-item.directive';
@NgModule({
imports: [CommonModule],
declarations: [PiDataGridComponent, PiCellDirective, PiGridItemDirective],
exports: [PiDataGridComponent, PiCellDirective, PiGridItemDirective],
})
export class PiSharedUIDataGridModule {}

9
libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts
View File

@@ -11,11 +11,10 @@ import {
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
@Component({ @Component({
standalone: false, selector: 'pi-base-data-table',
selector: 'pi-base-data-table', templateUrl: './base-data-table.component.html',
templateUrl: './base-data-table.component.html', styleUrls: ['./base-data-table.component.scss'],
styleUrls: ['./base-data-table.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class PiBaseDataTableComponent implements OnInit { export class PiBaseDataTableComponent implements OnInit {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

19
libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts
View File

@@ -1,12 +1,19 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action'; export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action';
@Component({ @Component({
standalone: false, selector: 'pi-cell-type',
selector: 'pi-cell-type', templateUrl: './cell-type.component.html',
templateUrl: './cell-type.component.html', styleUrls: ['./cell-type.component.scss'],
styleUrls: ['./cell-type.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgSwitch,
NgSwitchCase,
NgTemplateOutlet,
PiBaseDataTableComponent,
],
}) })
export class PiCellTypeComponent { export class PiCellTypeComponent {
@HostBinding('class') className = 'pi-cell-type'; @HostBinding('class') className = 'pi-cell-type';

13
libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts
View File

@@ -19,13 +19,14 @@ import {
} from '../../../util/device-configs'; } from '../../../util/device-configs';
// RxJS // RxJS
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
import { NgFor, NgTemplateOutlet } from '@angular/common';
@Component({ @Component({
standalone: false, selector: 'pi-data-table-item',
selector: 'pi-data-table-item', templateUrl: './data-table-item.component.html',
templateUrl: './data-table-item.component.html', styleUrls: ['./data-table-item.component.scss'],
styleUrls: ['./data-table-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, NgTemplateOutlet],
}) })
export class PiDataTableItemComponent implements AfterViewInit { export class PiDataTableItemComponent implements AfterViewInit {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/data-table/index.ts
View File

@@ -1,4 +1,4 @@
export * from './ui-data-table.module';
export * from './base-data-table/base-data-table.component'; export * from './base-data-table/base-data-table.component';
export * from './cell-type/cell-type.component'; export * from './cell-type/cell-type.component';

14
libs/ui/src/lib/ui/data-table/ui-data-table.module.ts
View File

@@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Components
import { PiBaseDataTableComponent } from './base-data-table/base-data-table.component';
import { PiCellTypeComponent } from './cell-type/cell-type.component';
import { PiDataTableItemComponent } from './data-table-item/data-table-item.component';
@NgModule({
imports: [CommonModule],
declarations: [PiBaseDataTableComponent, PiDataTableItemComponent, PiCellTypeComponent],
exports: [PiBaseDataTableComponent, PiDataTableItemComponent, PiCellTypeComponent],
})
export class PiSharedUIDataTableModule {}

14
libs/ui/src/lib/ui/divider/divider/divider.component.ts
View File

@@ -1,14 +1,16 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
// Shared // Shared
import { alignment, gap, iconSize, textColor } from '../../../styles'; import { alignment, gap, iconSize, textColor } from '../../../styles';
import { NgIf } from '@angular/common';
import { PiIconComponent } from '../../icon/icon/icon.component';
@Component({ @Component({
standalone: false, selector: 'pi-divider',
selector: 'pi-divider', templateUrl: './divider.component.html',
templateUrl: './divider.component.html', styleUrls: ['./divider.component.scss'],
styleUrls: ['./divider.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, PiIconComponent],
}) })
export class PiDividerComponent { export class PiDividerComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/divider/index.ts
View File

@@ -1,3 +1,3 @@
export * from './ui-divider.module';
export * from './divider/divider.component'; export * from './divider/divider.component';

16
libs/ui/src/lib/ui/divider/ui-divider.module.ts
View File

@@ -1,16 +0,0 @@
// Angular
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Component
import { PiDividerComponent } from './divider/divider.component';
// Shared
import { PiSharedUIIconModule } from '../icon';
@NgModule({
imports: [CommonModule, PiSharedUIIconModule],
declarations: [PiDividerComponent],
exports: [PiDividerComponent],
})
export class PiSharedUIDividerModule {}

2
libs/ui/src/lib/ui/error-status-code/index.ts
View File

@@ -1,3 +1,3 @@
export * from './ui-error-status-code.module';
export * from './not-found/not-found.component'; export * from './not-found/not-found.component';

28
libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts
View File

@@ -1,12 +1,28 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { LayoutTypeClass } from '../../../styles'; import { LayoutTypeClass } from '../../../styles';
import { PiMainWrapper } from '../../wrapper/main/main.wrapper';
import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component';
import { PiTextXLargeDirective, PiTextMediumDirective } from '../../text/directives/text-sizes.directive';
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-not-found',
selector: 'pi-not-found', templateUrl: './not-found.component.html',
templateUrl: './not-found.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
PiMainWrapper,
PiHeadlineComponent,
PiHeadlineLabelContentDirective,
PiTextXLargeDirective,
PiTextWeightBoldDirective,
PiHeadlineDescriptionContentDirective,
PiTextMediumDirective,
forwardRef(() => PiNotFoundComponent),
TranslatePipe
],
}) })
export class PiNotFoundComponent { export class PiNotFoundComponent {
@HostBinding('class') className = LayoutTypeClass.VerticallyCentered; @HostBinding('class') className = LayoutTypeClass.VerticallyCentered;

22
libs/ui/src/lib/ui/error-status-code/ui-error-status-code.module.ts
View File

@@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiNotFoundComponent } from './not-found/not-found.component';
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIImageModule } from '../image';
import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
import { PiSharedUIWrapperModule } from '../wrapper';
import { PiSharedUITextModule } from '../text';
@NgModule({
imports: [
CommonModule,
PiSharedUIButtonModule,
PiSharedUIImageModule,
PiSharedUITextModule,
PiSharedUIWrapperModule,
TranslatePipe, TranslateDirective
],
declarations: [PiNotFoundComponent],
exports: [PiNotFoundComponent],
})
export class PiSharedUIErrorStatusCodeModule {}

3
libs/ui/src/lib/ui/form-field/base-form-field.component.ts
View File

@@ -3,8 +3,7 @@ import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ComponentFamilyClass } from '../../styles'; import { ComponentFamilyClass } from '../../styles';
import { PiFormControl } from '../../util/form-control'; import { PiFormControl } from '../../util/form-control';
@Component({ @Component({
standalone: false,
template: '', template: '',
providers: [ providers: [
{ {

49
libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts
View File

@@ -1,22 +1,41 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { NgxCurrencyInputMode } from 'ngx-currency'; import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
import { NgIf, NgFor } from '@angular/common';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-currency-field',
selector: 'pi-currency-field', templateUrl: './currency-field.component.html',
templateUrl: './currency-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiCurrencyFieldComponent,
useExisting: PiCurrencyFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatSuffix,
NgIf,
MatInput,
NgxCurrencyDirective,
ReactiveFormsModule,
PiAutofocusDirective,
MatError,
NgFor,
forwardRef(() => PiCurrencyFieldComponent),
TranslatePipe
],
}) })
export class PiCurrencyFieldComponent extends PiBaseFormFieldComponent { export class PiCurrencyFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = `pi-form-field__currency`; @HostBinding('class') className = `pi-form-field__currency`;

5
libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts
View File

@@ -1,10 +1,7 @@
import { Directive, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { Directive, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { MatInput } from '@angular/material/input'; import { MatInput } from '@angular/material/input';
@Directive({ @Directive({ selector: '[pi-autofocus]', })
standalone: false,
selector: '[pi-autofocus]',
})
export class PiAutofocusDirective implements OnInit, OnChanges { export class PiAutofocusDirective implements OnInit, OnChanges {
@Input() isAutofocusSelected: boolean; @Input() isAutofocusSelected: boolean;

5
libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts
View File

@@ -1,9 +1,6 @@
import { Directive, HostBinding, Input } from '@angular/core'; import { Directive, HostBinding, Input } from '@angular/core';
@Directive({ @Directive({ selector: '[pi-checkbox-grid]', })
standalone: false,
selector: '[pi-checkbox-grid]',
})
export class PiCheckboxGridDirective { export class PiCheckboxGridDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
const columnClass = const columnClass =

5
libs/ui/src/lib/ui/form-field/directives/label.directive.ts
View File

@@ -1,9 +1,6 @@
import { Directive, ElementRef, HostBinding, Input, OnInit, Renderer2 } from '@angular/core'; import { Directive, ElementRef, HostBinding, Input, OnInit, Renderer2 } from '@angular/core';
@Directive({ @Directive({ selector: 'pi-label', })
standalone: false,
selector: 'pi-label',
})
export class PiLabelDirective implements OnInit { export class PiLabelDirective implements OnInit {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
const validationClass = this.isRequired ? 'is-required' : ''; const validationClass = this.isRequired ? 'is-required' : '';

5
libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts
View File

@@ -2,10 +2,7 @@ import { Directive, HostBinding, Input } from '@angular/core';
import { justify } from '../../../styles'; import { justify } from '../../../styles';
// Flex // Flex
@Directive({ @Directive({ selector: '[pi-radio-grid]', })
standalone: false,
selector: '[pi-radio-grid]',
})
export class PiRadioGridDirective { export class PiRadioGridDirective {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
const typeClass = this.type && `pi-radio-grid__type--${this.type}`; const typeClass = this.type && `pi-radio-grid__type--${this.type}`;

46
libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts
View File

@@ -1,19 +1,39 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-email-field',
selector: 'pi-email-field', templateUrl: './email-field.component.html',
templateUrl: './email-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiEmailFieldComponent,
useExisting: PiEmailFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatSuffix,
PiIconComponent,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiEmailFieldComponent extends PiBaseFormFieldComponent { export class PiEmailFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = `pi-form-field__email`; @HostBinding('class') className = `pi-form-field__email`;

45
libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts
View File

@@ -1,21 +1,38 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { iconSize } from '../../../styles'; import { iconSize } from '../../../styles';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-icon-field',
selector: 'pi-icon-field', templateUrl: './icon-field.component.html',
templateUrl: './icon-field.component.html', styleUrls: ['./icon-field.component.scss'],
styleUrls: ['./icon-field.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiIconFieldComponent,
useExisting: PiIconFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
PiIconComponent,
MatFormField,
MatLabel,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
TranslatePipe,
],
}) })
export class PiIconFieldComponent extends PiBaseFormFieldComponent { export class PiIconFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') get componentClasses(): string { @HostBinding('class') get componentClasses(): string {

50
libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts
View File

@@ -1,20 +1,44 @@
import { ChangeDetectionStrategy, Component, HostBinding, Injectable, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Injectable, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { unit } from '../../../util/models'; import { unit } from '../../../util/models';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field';
import { PiPrefixDirective, PiSuffixDirective } from '../../../util/affix/affix.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-incremental-number-field',
selector: 'pi-incremental-number-field', templateUrl: './incremental-number-field.component.html',
templateUrl: './incremental-number-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiIncrementalNumberFieldComponent,
useExisting: PiIncrementalNumberFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
PiPrefixDirective,
MatPrefix,
NgIf,
PiIconComponent,
PiSuffixDirective,
MatSuffix,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
@Injectable() @Injectable()
export class PiIncrementalNumberFieldComponent extends PiBaseFormFieldComponent { export class PiIncrementalNumberFieldComponent extends PiBaseFormFieldComponent {

29
libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts
View File

@@ -1,12 +1,29 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { FormGroup, FormGroupDirective } from '@angular/forms'; import { FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
import { unit } from '../../../util/models'; import { unit } from '../../../util/models';
import { PiLabelDirective } from '../directives/label.directive';
import { PiIncrementalNumberFieldComponent } from '../incremental-number-field/incremental-number-field.component';
import { PiDividerComponent } from '../../divider/divider/divider.component';
import { NgIf, NgFor } from '@angular/common';
import { MatError } from '@angular/material/form-field';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-incremental-range-field',
selector: 'pi-incremental-range-field', templateUrl: './incremental-range-field.component.html',
templateUrl: './incremental-range-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
ReactiveFormsModule,
PiLabelDirective,
PiIncrementalNumberFieldComponent,
PiDividerComponent,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiIncrementalRangeFieldComponent { export class PiIncrementalRangeFieldComponent {
@HostBinding('class') className = @HostBinding('class') className =

2
libs/ui/src/lib/ui/form-field/index.ts
View File

@@ -15,7 +15,7 @@ export * from './email-field/email-field.component';
export * from './password-field/password-field.component'; export * from './password-field/password-field.component';
export * from './icon-field/icon-field.component'; export * from './icon-field/icon-field.component';
export * from './ui-form-field.module';
export * from './phone-field/phone-field.component'; export * from './phone-field/phone-field.component';

45
libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts
View File

@@ -1,19 +1,38 @@
import { ChangeDetectionStrategy, Component, HostBinding, Injectable } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Injectable } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-number-field',
selector: 'pi-number-field', templateUrl: './number-field.component.html',
templateUrl: './number-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiNumberFieldComponent,
useExisting: PiNumberFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatPrefix,
MatSuffix,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
@Injectable() @Injectable()

48
libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts
View File

@@ -1,19 +1,41 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
import { PiSuffixDirective } from '../../../util/affix/affix.directive';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-password-field',
selector: 'pi-password-field', templateUrl: './password-field.component.html',
templateUrl: './password-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiPasswordFieldComponent,
useExisting: PiPasswordFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
PiSuffixDirective,
MatSuffix,
PiIconComponent,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiPasswordFieldComponent extends PiBaseFormFieldComponent { export class PiPasswordFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = `pi-form-field__password`; @HostBinding('class') className = `pi-form-field__password`;

46
libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts
View File

@@ -1,19 +1,39 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-phone-field',
selector: 'pi-phone-field', templateUrl: './phone-field.component.html',
templateUrl: './phone-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiPhoneFieldComponent,
useExisting: PiPhoneFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatSuffix,
PiIconComponent,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiPhoneFieldComponent extends PiBaseFormFieldComponent { export class PiPhoneFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = `pi-form-field__phone`; @HostBinding('class') className = `pi-form-field__phone`;

34
libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts
View File

@@ -8,23 +8,29 @@ import {
Output, Output,
ViewChild, ViewChild,
} from '@angular/core'; } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { OnInit } from '@angular/core'; import { OnInit } from '@angular/core';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { NgIf } from '@angular/common';
@Component({ @Component({
standalone: false, selector: 'pi-search-field',
selector: 'pi-search-field', templateUrl: './search-field.component.html',
templateUrl: './search-field.component.html', styleUrls: ['./search-field.component.scss'],
styleUrls: ['./search-field.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiSearchFieldComponent,
useExisting: PiSearchFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
PiIconComponent,
ReactiveFormsModule,
NgIf,
],
}) })
export class PiSearchFieldComponent extends PiBaseFormFieldComponent implements OnInit { export class PiSearchFieldComponent extends PiBaseFormFieldComponent implements OnInit {
@HostBinding('class') override get classes(): string { @HostBinding('class') override get classes(): string {

26
libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts
View File

@@ -1,20 +1,20 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
@Component({ @Component({
standalone: false, selector: 'pi-slide-toggle',
selector: 'pi-slide-toggle', templateUrl: './slide-toggle.component.html',
templateUrl: './slide-toggle.component.html', styleUrls: ['./slide-toggle.component.scss'],
styleUrls: ['./slide-toggle.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiSlideToggleComponent,
useExisting: PiSlideToggleComponent, multi: true,
multi: true, },
}, ],
], imports: [ReactiveFormsModule],
}) })
export class PiSlideToggleComponent extends PiBaseFormFieldComponent implements OnInit { export class PiSlideToggleComponent extends PiBaseFormFieldComponent implements OnInit {
@HostBinding('class') override get classes(): string { @HostBinding('class') override get classes(): string {

44
libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts
View File

@@ -1,19 +1,37 @@
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-text-field',
selector: 'pi-text-field', templateUrl: './text-field.component.html',
templateUrl: './text-field.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiTextFieldComponent,
useExisting: PiTextFieldComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatSuffix,
MatInput,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiTextFieldComponent extends PiBaseFormFieldComponent { export class PiTextFieldComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = `pi-form-field__text`; @HostBinding('class') className = `pi-form-field__text`;

45
libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts
View File

@@ -1,19 +1,38 @@
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiBaseFormFieldComponent } from '../base-form-field.component';
import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { PiAutofocusDirective } from '../directives/autofocus.directive';
import { NgIf, NgFor } from '@angular/common';
import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-textarea',
selector: 'pi-textarea', templateUrl: './textarea.component.html',
templateUrl: './textarea.component.html', changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, providers: [
providers: [ {
{ provide: NG_VALUE_ACCESSOR,
provide: NG_VALUE_ACCESSOR, useExisting: PiTextareaComponent,
useExisting: PiTextareaComponent, multi: true,
multi: true, },
}, ],
], imports: [
MatFormField,
MatLabel,
MatInput,
CdkTextareaAutosize,
ReactiveFormsModule,
PiAutofocusDirective,
NgIf,
MatError,
NgFor,
PiCurrencyFieldComponent,
TranslatePipe,
],
}) })
export class PiTextareaComponent extends PiBaseFormFieldComponent { export class PiTextareaComponent extends PiBaseFormFieldComponent {
@HostBinding('class') className = 'pi-form-field__textarea'; @HostBinding('class') className = 'pi-form-field__textarea';

113
libs/ui/src/lib/ui/form-field/ui-form-field.module.ts
View File

@@ -1,113 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// CDK
import { OverlayModule } from '@angular/cdk/overlay';
// Material
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
import { MatIconModule } from '@angular/material/icon';
// Ngx Currency
import { NgxCurrencyDirective } from 'ngx-currency';
// Shared
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIIconModule } from '../icon';
import { PiSharedUITooltipModule } from '../tooltip';
import { PiSharedUIWrapperModule } from '../wrapper';
// Components
import { PiCurrencyFieldComponent } from './currency-field/currency-field.component';
import { PiEmailFieldComponent } from './email-field/email-field.component';
import { PiIconFieldComponent } from './icon-field/icon-field.component';
import { PiIncrementalNumberFieldComponent } from './incremental-number-field/incremental-number-field.component';
import { PiNumberFieldComponent } from './number-field/number-field.component';
import { PiPasswordFieldComponent } from './password-field/password-field.component';
import { PiPhoneFieldComponent } from './phone-field/phone-field.component';
import { PiSearchFieldComponent } from './search-field/search-field.component';
import { PiTextFieldComponent } from './text-field/text-field.component';
import { PiTextareaComponent } from './textarea/textarea.component';
import { PiSharedUtilPipesModule } from '../../util/pipes';
import { PiCheckboxGridDirective } from './directives/checkbox-grid.directive';
import { PiLabelDirective } from './directives/label.directive';
import { PiRadioGridDirective } from './directives/radio-grid.directive';
import { PiSharedUIDividerModule } from '../divider';
import { PiSharedUtilAffixModule } from '../../util/affix';
import { PiSharedUtilColorModule } from '../../util/color';
import { PiSharedUtilStatusModule } from '../../util/status';
import { PiAutofocusDirective } from './directives/autofocus.directive';
import { PiIncrementalRangeFieldComponent } from './incremental-range-field/incremental-range-field.component';
import { PiSlideToggleComponent } from './slide-toggle/slide-toggle.component';
const MATERIAL_IMPORTS = [
MatFormFieldModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSelectModule,
MatIconModule,
];
@NgModule({
imports: [
CommonModule,
PiSharedUIButtonModule,
PiSharedUIDividerModule,
PiSharedUIIconModule,
PiSharedUITooltipModule,
PiSharedUIWrapperModule,
PiSharedUtilAffixModule,
PiSharedUtilColorModule,
PiSharedUtilPipesModule,
PiSharedUtilStatusModule,
FormsModule,
MATERIAL_IMPORTS,
NgxCurrencyDirective,
OverlayModule,
ReactiveFormsModule,
TranslatePipe, TranslateDirective,
],
declarations: [
PiAutofocusDirective,
PiCheckboxGridDirective,
PiCurrencyFieldComponent,
PiEmailFieldComponent,
PiIconFieldComponent,
PiIncrementalNumberFieldComponent,
PiIncrementalRangeFieldComponent,
PiLabelDirective,
PiNumberFieldComponent,
PiPasswordFieldComponent,
PiPhoneFieldComponent,
PiRadioGridDirective,
PiSearchFieldComponent,
PiSlideToggleComponent,
PiTextareaComponent,
PiTextFieldComponent,
],
exports: [
PiAutofocusDirective,
PiCheckboxGridDirective,
PiCurrencyFieldComponent,
PiEmailFieldComponent,
PiIconFieldComponent,
PiIncrementalNumberFieldComponent,
PiIncrementalRangeFieldComponent,
PiLabelDirective,
PiNumberFieldComponent,
PiPasswordFieldComponent,
PiPhoneFieldComponent,
PiRadioGridDirective,
PiSearchFieldComponent,
PiSlideToggleComponent,
PiTextareaComponent,
PiTextFieldComponent,
],
})
export class PiSharedUIFormFieldModule {}

14
libs/ui/src/lib/ui/icon/icon/icon.component.ts
View File

@@ -7,14 +7,16 @@ import {
ComponentFamilyClass, ComponentFamilyClass,
iconSize, iconSize,
styleType, styleType,
} from '../../../styles'; } from '../../../styles';
import { NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
@Component({ @Component({
standalone: false, selector: 'pi-icon',
selector: 'pi-icon', templateUrl: './icon.component.html',
templateUrl: './icon.component.html', styleUrls: ['./icon.component.scss'],
styleUrls: ['./icon.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon],
}) })
export class PiIconComponent { export class PiIconComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/icon/index.ts
View File

@@ -1,3 +1,3 @@
export * from './ui-icon.module';
export * from './icon/icon.component'; export * from './icon/icon.component';

12
libs/ui/src/lib/ui/icon/ui-icon.module.ts
View File

@@ -1,12 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiIconComponent } from './icon/icon.component';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
declarations: [PiIconComponent],
imports: [CommonModule, MatIconModule],
exports: [PiIconComponent],
})
export class PiSharedUIIconModule {}

5
libs/ui/src/lib/ui/image/background-image.directive.ts
View File

@@ -16,10 +16,7 @@ import { Device, DeviceConfigsFacade } from '../../util/device-configs';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@Directive({ @Directive({ selector: '[pi-background-image]', })
standalone: false,
selector: '[pi-background-image]',
})
export class PiBackgroundImageDirective implements AfterViewInit, OnDestroy { export class PiBackgroundImageDirective implements AfterViewInit, OnDestroy {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {
const animationClass = this.animation && `pi-background-image__animation--${this.animation}`; const animationClass = this.animation && `pi-background-image__animation--${this.animation}`;

24
libs/ui/src/lib/ui/image/headline/headline.component.ts
View File

@@ -13,28 +13,28 @@ import {
ComponentFamilyClass, ComponentFamilyClass,
flexDirection, flexDirection,
gap, gap,
} from '../../../styles'; } from '../../../styles';
import { NgIf } from '@angular/common';
import { SanitizerAltImagePipe } from '../../../util/pipes/pipes';
@Directive({ @Directive({
standalone: false, selector: 'pi-headline-label-content',
selector: 'pi-headline-label-content', host: { class: 'pi-headline-content pi-headline-content__label' },
host: { class: 'pi-headline-content pi-headline-content__label' },
}) })
export class PiHeadlineLabelContentDirective {} export class PiHeadlineLabelContentDirective {}
@Directive({ @Directive({
standalone: false, selector: 'pi-headline-description-content',
selector: 'pi-headline-description-content', host: { class: 'pi-headline-content pi-headline-content__description' },
host: { class: 'pi-headline-content pi-headline-content__description' },
}) })
export class PiHeadlineDescriptionContentDirective {} export class PiHeadlineDescriptionContentDirective {}
@Component({ @Component({
standalone: false, selector: 'pi-headline',
selector: 'pi-headline', templateUrl: './headline.component.html',
templateUrl: './headline.component.html', styleUrls: ['./headline.component.scss'],
styleUrls: ['./headline.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, SanitizerAltImagePipe],
}) })
export class PiHeadlineComponent { export class PiHeadlineComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/image/index.ts
View File

@@ -1,4 +1,4 @@
export * from './ui-image.module';
export * from './background-image.directive'; export * from './background-image.directive';

30
libs/ui/src/lib/ui/image/ui-image.module.ts
View File

@@ -1,30 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Shared
import { PiSharedUtilPipesModule } from '../../util/pipes';
// Components
import {
PiHeadlineComponent,
PiHeadlineDescriptionContentDirective,
PiHeadlineLabelContentDirective,
} from './headline/headline.component';
import { PiBackgroundImageDirective } from './background-image.directive';
@NgModule({
imports: [CommonModule, PiSharedUtilPipesModule],
declarations: [
PiHeadlineComponent,
PiHeadlineDescriptionContentDirective,
PiHeadlineLabelContentDirective,
PiBackgroundImageDirective,
],
exports: [
PiHeadlineComponent,
PiHeadlineDescriptionContentDirective,
PiHeadlineLabelContentDirective,
PiBackgroundImageDirective,
],
})
export class PiSharedUIImageModule {}

2
libs/ui/src/lib/ui/list-item/index.ts
View File

@@ -1,3 +1,3 @@
export * from './ui-list-item.module';
export * from './list-item/list-item.component'; export * from './list-item/list-item.component';

29
libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts
View File

@@ -11,39 +11,34 @@ import {
} from '../../../styles'; } from '../../../styles';
@Directive({ @Directive({
standalone: false, selector: 'pi-list-item-left-icon',
selector: 'pi-list-item-left-icon', host: { class: 'pi-list-item-icon pi-list-item-icon__left' },
host: { class: 'pi-list-item-icon pi-list-item-icon__left' },
}) })
export class PiListItemLeftIconDirective {} export class PiListItemLeftIconDirective {}
@Directive({ @Directive({
standalone: false, selector: 'pi-list-item-left-content',
selector: 'pi-list-item-left-content', host: { class: 'pi-list-item-content pi-list-item-content__left' },
host: { class: 'pi-list-item-content pi-list-item-content__left' },
}) })
export class PiListItemLeftContentDirective {} export class PiListItemLeftContentDirective {}
@Directive({ @Directive({
standalone: false, selector: 'pi-list-item-right-content',
selector: 'pi-list-item-right-content', host: { class: 'pi-list-item-content pi-list-item-content__right' },
host: { class: 'pi-list-item-content pi-list-item-content__right' },
}) })
export class PiListItemRightContentDirective {} export class PiListItemRightContentDirective {}
@Directive({ @Directive({
standalone: false, selector: 'pi-list-item-right-icon',
selector: 'pi-list-item-right-icon', host: { class: 'pi-list-item-icon pi-list-item-icon__right' },
host: { class: 'pi-list-item-icon pi-list-item-icon__right' },
}) })
export class PiListItemRightIconDirective {} export class PiListItemRightIconDirective {}
@Component({ @Component({
standalone: false, selector: 'pi-list-item',
selector: 'pi-list-item', templateUrl: './list-item.component.html',
templateUrl: './list-item.component.html', styleUrls: ['./list-item.component.scss'],
styleUrls: ['./list-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class PiListItemComponent { export class PiListItemComponent {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

28
libs/ui/src/lib/ui/list-item/ui-list-item.module.ts
View File

@@ -1,28 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
PiListItemComponent,
PiListItemLeftIconDirective,
PiListItemLeftContentDirective,
PiListItemRightContentDirective,
PiListItemRightIconDirective,
} from './list-item/list-item.component';
@NgModule({
imports: [CommonModule],
declarations: [
PiListItemComponent,
PiListItemLeftIconDirective,
PiListItemLeftContentDirective,
PiListItemRightContentDirective,
PiListItemRightIconDirective,
],
exports: [
PiListItemComponent,
PiListItemLeftIconDirective,
PiListItemLeftContentDirective,
PiListItemRightContentDirective,
PiListItemRightIconDirective,
],
})
export class PiSharedUIListItemModule {}

2
libs/ui/src/lib/ui/modal/index.ts
View File

@@ -1,6 +1,6 @@
export * from './modal/modal.component'; export * from './modal/modal.component';
export * from './ui-modal.module';
export * from './entities/modal.model'; export * from './entities/modal.model';

32
libs/ui/src/lib/ui/modal/modal/modal.component.ts
View File

@@ -5,14 +5,34 @@ import {
DialogModalData, DialogModalData,
ModalStyleType, ModalStyleType,
ModalType, ModalType,
} from '../entities/modal.model'; } from '../entities/modal.model';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
import { PiTextLargeDirective } from '../../text/directives/text-sizes.directive';
import { PiColorPrimaryDirective } from '../../../util/color/directives/colors.directive';
import { PiCloseButtonComponent } from '../../button/close-button/close-button.component';
import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component';
import { PiActionWrapper } from '../../wrapper/action/action.wrapper';
import { PiGhostButtonDirective } from '../../button/button.directive';
@Component({ @Component({
standalone: false, selector: 'pi-modal',
selector: 'pi-modal', templateUrl: './modal.component.html',
templateUrl: './modal.component.html', styleUrls: ['./modal.component.scss'],
styleUrls: ['./modal.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
PiTextWeightBoldDirective,
PiTextLargeDirective,
PiColorPrimaryDirective,
PiCloseButtonComponent,
NgTemplateOutlet,
PiHeadlineComponent,
PiHeadlineLabelContentDirective,
PiHeadlineDescriptionContentDirective,
PiActionWrapper,
PiGhostButtonDirective,
],
}) })
export class PiModalComponent { export class PiModalComponent {
@HostBinding('class') @HostBinding('class')

30
libs/ui/src/lib/ui/modal/ui-modal.module.ts
View File

@@ -1,30 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiModalComponent } from './modal/modal.component';
// Material
import { MatDialogModule } from '@angular/material/dialog';
// Shared
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIImageModule } from '../image';
import { PiSharedUITextModule } from '../text';
import { PiSharedUIWrapperModule } from '../wrapper';
import { PiSharedUtilColorModule } from '../../util/color';
const MATERIAL_IMPORTS = [MatDialogModule];
@NgModule({
imports: [
CommonModule,
PiSharedUIButtonModule,
PiSharedUIImageModule,
PiSharedUITextModule,
PiSharedUIWrapperModule,
PiSharedUtilColorModule,
MATERIAL_IMPORTS,
],
declarations: [PiModalComponent],
exports: [PiModalComponent],
})
export class PiSharedUIModalModule {}

2
libs/ui/src/lib/ui/note/index.ts
View File

@@ -1,3 +1,3 @@
export * from './ui-note.module';
export * from './note/note.component'; export * from './note/note.component';

30
libs/ui/src/lib/ui/note/note/note.component.ts
View File

@@ -10,28 +10,34 @@ import { NoteDataService } from '../infrastructure/note-data.service';
import { NoteStatus } from '../entities/note.model'; import { NoteStatus } from '../entities/note.model';
import { status } from '../../../util/status'; import { status } from '../../../util/status';
import { gap, alignment } from '../../../styles'; import { gap, alignment } from '../../../styles';
import { MatIcon } from '@angular/material/icon';
import { NgIf } from '@angular/common';
import { PiTextSmallDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
@Directive({ @Directive({
standalone: false, selector: 'pi-note-label-content',
selector: 'pi-note-label-content', host: { class: 'pi-note-content pi-note-content__label' },
host: { class: 'pi-note-content pi-note-content__label' },
}) })
export class PiNoteLabelContentDirective {} export class PiNoteLabelContentDirective {}
@Directive({ @Directive({
standalone: false, selector: 'pi-note-action-content',
selector: 'pi-note-action-content', host: { class: 'pi-note-content pi-note-content__action' },
host: { class: 'pi-note-content pi-note-content__action' },
}) })
export class PiNoteActionContentDirective {} export class PiNoteActionContentDirective {}
@Component({ @Component({
standalone: false, selector: 'pi-note',
selector: 'pi-note', templateUrl: './note.component.html',
templateUrl: './note.component.html', styleUrls: ['./note.component.scss'],
styleUrls: ['./note.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
MatIcon,
NgIf,
PiTextSmallDirective,
PiTextXSmallDirective,
],
}) })
export class PiNoteComponent implements OnInit { export class PiNoteComponent implements OnInit {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

20
libs/ui/src/lib/ui/note/ui-note.module.ts
View File

@@ -1,20 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { PiSharedUITextModule } from '../text';
import { PiSharedUtilColorModule } from '../../util/color';
import {
PiNoteActionContentDirective,
PiNoteComponent,
PiNoteLabelContentDirective,
} from './note/note.component';
@NgModule({
imports: [CommonModule, MatIconModule, PiSharedUITextModule, PiSharedUtilColorModule],
declarations: [PiNoteComponent, PiNoteLabelContentDirective, PiNoteActionContentDirective],
exports: [PiNoteComponent, PiNoteLabelContentDirective, PiNoteActionContentDirective],
})
export class PiSharedUINoteModule {}

2
libs/ui/src/lib/ui/notification/index.ts
View File

@@ -13,7 +13,7 @@ export * from './state/notification.effects';
export * from './utils'; export * from './utils';
// Module // Module
export * from './shared-ui-notification.module';
// Components // Components
export * from './snack-bar/snack-bar.component'; export * from './snack-bar/snack-bar.component';

23
libs/ui/src/lib/ui/notification/shared-ui-notification.module.ts
View File

@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIIconModule } from '../icon';
import { PiSharedUITextModule } from '../text';
import { PiSnackBarComponent } from './snack-bar/snack-bar.component';
@NgModule({
imports: [
CommonModule,
MatSnackBarModule,
PiSharedUIButtonModule,
PiSharedUIIconModule,
PiSharedUITextModule,
],
declarations: [PiSnackBarComponent],
exports: [PiSnackBarComponent],
})
export class PiSharedUINotificationModule {}

36
libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts
View File

@@ -1,20 +1,28 @@
import { import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, Optional, forwardRef } from '@angular/core';
ChangeDetectionStrategy,
Component,
HostBinding,
Inject,
Input,
Optional,
} from '@angular/core';
import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import { styleType } from '../../../styles'; import { styleType } from '../../../styles';
import { NgIf } from '@angular/common';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { PiMediumButtonDirective, PiGhostButtonDirective } from '../../button/button.directive';
import { PiTextWeightMediumDirective } from '../../text/directives/text-weights.directive';
import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
@Component({ @Component({
standalone: false, selector: 'pi-snack-bar',
selector: 'pi-snack-bar', templateUrl: './snack-bar.component.html',
templateUrl: './snack-bar.component.html', styleUrls: ['./snack-bar.component.scss'],
styleUrls: ['./snack-bar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
PiIconComponent,
PiMediumButtonDirective,
PiTextWeightMediumDirective,
PiTextMediumDirective,
PiTextXSmallDirective,
PiGhostButtonDirective,
forwardRef(() => PiSnackBarComponent)
],
}) })
export class PiSnackBarComponent { export class PiSnackBarComponent {
@HostBinding('class') className = 'pi-snackbar'; @HostBinding('class') className = 'pi-snackbar';

2
libs/ui/src/lib/ui/paginator/index.ts
View File

@@ -1,3 +1,3 @@
export * from './shared-ui-paginator.module';
export * from './paginator/paginator.component'; export * from './paginator/paginator.component';

30
libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts
View File

@@ -1,19 +1,21 @@
import { import { ChangeDetectionStrategy, EventEmitter, Component, Output, Input, OnInit, HostBinding, forwardRef } from '@angular/core';
ChangeDetectionStrategy, import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
EventEmitter, import { NgIf, NgFor } from '@angular/common';
Component, import { PiIconComponent } from '../../icon/icon/icon.component';
Output,
Input,
OnInit,
HostBinding,
} from '@angular/core';
@Component({ @Component({
standalone: false, selector: 'pi-paginator',
selector: 'pi-paginator', templateUrl: './paginator.component.html',
templateUrl: './paginator.component.html', styleUrls: ['./paginator.component.scss'],
styleUrls: ['./paginator.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
PiIconButtonComponent,
NgIf,
NgFor,
PiIconComponent,
forwardRef(() => PiPaginatorComponent)
],
}) })
export class PiPaginatorComponent implements OnInit { export class PiPaginatorComponent implements OnInit {
@HostBinding('class') className = 'pi-paginator'; @HostBinding('class') className = 'pi-paginator';

13
libs/ui/src/lib/ui/paginator/shared-ui-paginator.module.ts
View File

@@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PiPaginatorComponent } from './paginator/paginator.component';
import { PiSharedUIButtonModule } from '../button';
import { PiSharedUIIconModule } from '../icon';
@NgModule({
imports: [CommonModule, PiSharedUIButtonModule, PiSharedUIIconModule],
declarations: [PiPaginatorComponent],
exports: [PiPaginatorComponent],
})
export class PiSharedUIPaginatorModule {}

37
libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts
View File

@@ -11,16 +11,39 @@ import {
SimpleChanges, SimpleChanges,
TemplateRef, TemplateRef,
} from '@angular/core'; } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ComponentFamilyClass } from '../../../styles'; import { ComponentFamilyClass } from '../../../styles';
import { PiBasePanelComponent } from '../base-panel.component'; import { PiBasePanelComponent } from '../base-panel.component';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
import { PiTextWeightMediumDirective, PiTextWeightLightDirective } from '../../text/directives/text-weights.directive';
import { PiMediumButtonDirective } from '../../button/button.directive';
import { PiColorGreyDirective } from '../../../util/color/directives/colors.directive';
import { PiDividerComponent } from '../../divider/divider/divider.component';
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
import { PiIconComponent } from '../../icon/icon/icon.component';
import { TranslatePipe } from '@ngx-translate/core';
@Component({ @Component({
standalone: false, selector: 'pi-expansion-panel',
selector: 'pi-expansion-panel', templateUrl: './expansion-panel.component.html',
templateUrl: './expansion-panel.component.html', styleUrls: ['./expansion-panel.component.scss'],
styleUrls: ['./expansion-panel.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
ReactiveFormsModule,
PiTextMediumDirective,
PiTextWeightMediumDirective,
PiMediumButtonDirective,
PiColorGreyDirective,
PiTextWeightLightDirective,
PiTextXSmallDirective,
PiDividerComponent,
PiIconButtonComponent,
NgTemplateOutlet,
PiIconComponent,
TranslatePipe,
],
}) })
export class PiExpansionPanelComponent extends PiBasePanelComponent implements OnInit, OnChanges { export class PiExpansionPanelComponent extends PiBasePanelComponent implements OnInit, OnChanges {
@HostBinding('class') get classes(): string { @HostBinding('class') get classes(): string {

2
libs/ui/src/lib/ui/panel/index.ts
View File

@@ -5,4 +5,4 @@ export * from './panel.directive';
export * from './base-panel.component'; export * from './base-panel.component';
export * from './ui-panel.module';

Some files were not shown because too many files have changed in this diff Show More