diff --git a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html index 6de5faf..61133e6 100644 --- a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html +++ b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html @@ -1,7 +1,7 @@ - +
- + @@ -78,7 +78,7 @@
-
diff --git a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts index 048d9b0..b511fb3 100644 --- a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts +++ b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, Optional, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, Optional, forwardRef, input } from '@angular/core'; import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; import { styleType } from '../../../styles'; import { NgIf } from '@angular/common'; @@ -37,7 +37,7 @@ export class PiSnackBarComponent { @Input() message: string; - @Input() text: string; + readonly text = input(); @Input() icon: string; @Input() type: 'success' | 'error' | 'info' = 'success'; @Input() dismissible = false; diff --git a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html index ec2d559..14c3098 100644 --- a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html +++ b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html @@ -22,7 +22,7 @@
@@ -33,7 +33,7 @@ density="200" size="x-small" (execute)="paginateNext()" - [disabled]="currentPage === totalPages || isDisabled" + [disabled]="currentPage === totalPages() || isDisabled()" > Next @@ -56,7 +56,7 @@ diff --git a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts index cad8947..9f41a3a 100644 --- a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts +++ b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, EventEmitter, Component, Output, Input, OnInit, HostBinding, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit, HostBinding, forwardRef, input, output } from '@angular/core'; import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; import { NgIf, NgFor } from '@angular/common'; import { PiIconComponent } from '../../icon/icon/icon.component'; @@ -20,11 +20,11 @@ import { PiIconComponent } from '../../icon/icon/icon.component'; export class PiPaginatorComponent implements OnInit { @HostBinding('class') className = 'pi-paginator'; @Input() currentPage = 1; - @Input() pageSize!: number; - @Input() totalPages!: number; - @Input() isDisabled!: boolean; + readonly pageSize = input.required(); + readonly totalPages = input.required(); + readonly isDisabled = input.required(); - @Output() changePage = new EventEmitter(); + readonly changePage = output(); firstPages!: number[]; @@ -35,7 +35,7 @@ export class PiPaginatorComponent implements OnInit { } get pages() { - return [...new Array(this.totalPages).keys()].map((el) => el + 1); + return [...new Array(this.totalPages()).keys()].map((el) => el + 1); } // get firstPages() { @@ -51,11 +51,11 @@ export class PiPaginatorComponent implements OnInit { // keys(o: object): string[]; get lastPages() { - return [...new Array(this.totalPages).keys()].slice(-3).map((el) => el + 1); + return [...new Array(this.totalPages()).keys()].slice(-3).map((el) => el + 1); } protected initFirstPages(): void { - this.firstPages = [...new Array(this.totalPages).slice(0, 3).keys()].map((el) => el + 1); + this.firstPages = [...new Array(this.totalPages()).slice(0, 3).keys()].map((el) => el + 1); } protected paginateBack(): void { @@ -71,7 +71,7 @@ export class PiPaginatorComponent implements OnInit { } protected paginateNext(): void { - if (this.currentPage < this.totalPages) { + if (this.currentPage < this.totalPages()) { const updatedCurrentPage = this.currentPage + 1; if (this.firstPages.indexOf(this.currentPage) >= 2) { this.firstPagesRange = this.firstPagesRange + 3; @@ -83,7 +83,7 @@ export class PiPaginatorComponent implements OnInit { } protected paginateTo(selectedPage: number): void { - if (this.isDisabled && selectedPage > this.currentPage) { + if (this.isDisabled() && selectedPage > this.currentPage) { return; } else { this.currentPage = selectedPage; @@ -98,7 +98,7 @@ export class PiPaginatorComponent implements OnInit { } protected movePages(): void { - if (!this.isDisabled) { + if (!this.isDisabled()) { this.firstPagesRange = this.firstPagesRange + 3; this.firstPages = this.incrementPaginatorRangeBy(3); this.currentPage = this.firstPages[0]; @@ -107,13 +107,13 @@ export class PiPaginatorComponent implements OnInit { } private incrementPaginatorRangeBy(range: number): Array { - return [...new Array(this.totalPages).keys()] + return [...new Array(this.totalPages()).keys()] .slice(this.firstPagesRange, this.firstPagesRange + range) .map((el) => el + 1); } private decrementPaginatorRangeBy(range: number): Array { - return [...new Array(this.totalPages).keys()] + return [...new Array(this.totalPages()).keys()] .slice(this.firstPagesRange - range, this.firstPagesRange) .map((el) => el + 1); } diff --git a/libs/ui/src/lib/ui/panel/base-panel.component.ts b/libs/ui/src/lib/ui/panel/base-panel.component.ts index 0a36a58..2a5b74c 100644 --- a/libs/ui/src/lib/ui/panel/base-panel.component.ts +++ b/libs/ui/src/lib/ui/panel/base-panel.component.ts @@ -1,5 +1,5 @@ // Angular -import { Directive, Input, OnInit } from '@angular/core'; +import { Directive, OnInit, input } from '@angular/core'; import { alignment, borderRadius, @@ -14,25 +14,25 @@ import { status } from '../../util/status'; @Directive() export abstract class PiBasePanelComponent implements OnInit { - @Input() alignment: alignment = 'center'; - @Input() borderRadius: borderRadius = 'large'; - @Input() color: styleType = 'white'; - @Input() flexDirection: flexDirection = 'column'; - @Input() isStroked = false; - @Input() hasShadow = false; - @Input() justify: justify = 'center'; - @Input() width: 'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'two-thirds' | undefined; + readonly alignment = input('center'); + readonly borderRadius = input('large'); + readonly color = input('white'); + readonly flexDirection = input('column'); + readonly isStroked = input(false); + readonly hasShadow = input(false); + readonly justify = input('center'); + readonly width = input<'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'two-thirds'>(); // TODO: remove on the advisor dashboard refactor - @Input() height!: 'small' | 'medium' | 'large' | 'x-large' | undefined; - @Input() outline!: styleType; - @Input() padding: padding = 'l'; - @Input() grid: 'half' | 'quarter' | 'reverse-quarter'; - @Input() gap: gap = 'l'; - @Input() mode: 'dark' | 'light' = 'dark'; - @Input() innerPadding!: padding; - @Input() opacity: opacity; + readonly height = input.required<'small' | 'medium' | 'large' | 'x-large' | undefined>(); + readonly outline = input.required(); + readonly padding = input('l'); + readonly grid = input<'half' | 'quarter' | 'reverse-quarter'>(); + readonly gap = input('l'); + readonly mode = input<'dark' | 'light'>('dark'); + readonly innerPadding = input.required(); + readonly opacity = input(); - @Input() status!: status | ''; + readonly status = input.required(); ngOnInit(): void { this.alignmentClass; @@ -51,72 +51,86 @@ export abstract class PiBasePanelComponent implements OnInit { } protected get widthClass(): string | undefined { - return this.width && `pi-panel__width--${this.width}`; + const width = this.width(); + return width && `pi-panel__width--${width}`; } protected get alignmentClass(): string { - return this.alignment && `pi-panel__align--${this.alignment}`; + const alignmentValue = this.alignment(); + return alignmentValue && `pi-panel__align--${alignmentValue}`; } protected get justifyClass(): string { - return this.justify && `pi-panel__justify--${this.justify}`; + const justifyValue = this.justify(); + return justifyValue && `pi-panel__justify--${justifyValue}`; } protected get flexDirectionClass(): string { - return this.flexDirection && `pi-panel__flex-direction--${this.flexDirection}`; + const flexDirectionValue = this.flexDirection(); + return flexDirectionValue && `pi-panel__flex-direction--${flexDirectionValue}`; } protected get borderRadiusClass(): string { - return this.borderRadius && `pi-panel__border-radius--${this.borderRadius}`; + const borderRadiusValue = this.borderRadius(); + return borderRadiusValue && `pi-panel__border-radius--${borderRadiusValue}`; } protected get colorClass(): string { - return `pi-color__${this.color}`; + return `pi-color__${this.color()}`; } protected get hasShadowClass(): string | boolean { - return this.hasShadow && 'has-shadow'; + return this.hasShadow() && 'has-shadow'; } protected get heightClass(): string | undefined { - return this.height && `pi-panel__height--${this.height}`; + const height = this.height(); + return height && `pi-panel__height--${height}`; } protected get outlineClass(): string { - return this.outline && `is-stroked pi-panel__border-color--${this.outline}`; + const outline = this.outline(); + return outline && `is-stroked pi-panel__border-color--${outline}`; } protected get paddingClass(): string { - return this.padding ? `pi-panel__padding--${this.padding}` : ''; + const paddingValue = this.padding(); + return paddingValue ? `pi-panel__padding--${paddingValue}` : ''; } protected get gridClass(): string { - return this.grid && `pi-panel__grid--${this.grid}`; + const grid = this.grid(); + return grid && `pi-panel__grid--${grid}`; } protected get isStrokedClass(): string { - return this.isStroked ? 'is-stroked' : ''; + return this.isStroked() ? 'is-stroked' : ''; } protected get gapClass(): string { - return this.gap && `pi-panel__gap--${this.gap}`; + const gapValue = this.gap(); + return gapValue && `pi-panel__gap--${gapValue}`; } protected get statusClass(): string { - return this.status && `is-${this.status}`; + const statusValue = this.status(); + return statusValue && `is-${statusValue}`; } protected get modeClass(): string { - return this.mode && `pi-color__mode--${this.mode}`; + const mode = this.mode(); + return mode && `pi-color__mode--${mode}`; } protected get innerPaddingClass(): string { - return this.innerPadding - ? `pi-panel__inner-padding pi-panel__inner-padding--${this.innerPadding}` + const innerPadding = this.innerPadding(); + return innerPadding + ? `pi-panel__inner-padding pi-panel__inner-padding--${innerPadding}` : ''; } protected get opacityClass(): string { - return this.opacity ? `pi-color__opacity--${this.opacity}` : ''; + const opacityValue = this.opacity(); + return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; } } diff --git a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html index 6f0f321..fcfb5e8 100644 --- a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html +++ b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html @@ -1,9 +1,9 @@ - -
+ +
-

{{ title }}

+

{{ title() }}

{{ subtitle }}

- +
('default'); - @Input() isSmallDevice!: boolean; + readonly isSmallDevice = input.required(); - @Input() disableContentTranslation: boolean = false; + readonly disableContentTranslation = input(false); - @Input() hideTabs: boolean = false; + readonly hideTabs = input(false); // Justify content to the tab elments - @Input() justify: 'flex-start' | 'flex-end' | 'center' = 'center'; + readonly justify = input<'flex-start' | 'flex-end' | 'center'>('center'); - @Output() tabChange: EventEmitter = new EventEmitter(); + readonly tabChange = output(); @ContentChildren(PiTabContentDirective, { descendants: true }) tabContentItems!: QueryList; - @ContentChildren(PiTabElementDirective, { descendants: true }) - tabElementItems!: QueryList; + readonly tabElementItems = contentChildren(PiTabElementDirective, { descendants: true }); - @ViewChild('tabWrapper', { read: ElementRef, static: false }) - tabWrapperElementRef!: ElementRef; + readonly tabWrapperElementRef = viewChild.required('tabWrapper', { read: ElementRef }); currentContent: number; currentTabElement: number = 0; @@ -100,7 +100,7 @@ export class PiTabComponent implements AfterViewInit, AfterViewChecked, OnDestro } get tabWrapperNativeElement(): HTMLElement { - return this.tabWrapperElementRef?.nativeElement; + return this.tabWrapperElementRef()?.nativeElement; } get isTabWrapperOverflowing(): boolean { @@ -131,11 +131,11 @@ export class PiTabComponent implements AfterViewInit, AfterViewChecked, OnDestro onTabChange(index: number): void { this.tabChange.emit(index); this.currentContent = index; - if (this.isSmallDevice) { + if (this.isSmallDevice()) { this.currentTabElement = index; this.handleTabWrapperScrollOnMobile(); } - if (!this.disableContentTranslation) this.handleTabContentDisplay(); + if (!this.disableContentTranslation()) this.handleTabContentDisplay(); } getTabContentClass(index: number): string { @@ -186,14 +186,15 @@ export class PiTabComponent implements AfterViewInit, AfterViewChecked, OnDestro } private updateIsTabWrapperScrolledToStart(): void { - this.isTabWrapperScrolledToStart = this.tabWrapperElementRef?.nativeElement?.scrollLeft === 0; + this.isTabWrapperScrolledToStart = this.tabWrapperElementRef()?.nativeElement?.scrollLeft === 0; } private updateIsTabWrapperScrolledToEnd(): void { + const tabWrapperElementRef = this.tabWrapperElementRef(); this.isTabWrapperScrolledToEnd = - this.tabWrapperElementRef?.nativeElement?.scrollWidth - - this.tabWrapperElementRef?.nativeElement?.scrollLeft === - this.tabWrapperElementRef?.nativeElement?.clientWidth; + tabWrapperElementRef?.nativeElement?.scrollWidth - + tabWrapperElementRef?.nativeElement?.scrollLeft === + tabWrapperElementRef?.nativeElement?.clientWidth; } private updateTabWrapperScrollState = (): void => { diff --git a/libs/ui/src/lib/ui/text/base-text-viewer.component.ts b/libs/ui/src/lib/ui/text/base-text-viewer.component.ts index b0c3c47..02afeea 100644 --- a/libs/ui/src/lib/ui/text/base-text-viewer.component.ts +++ b/libs/ui/src/lib/ui/text/base-text-viewer.component.ts @@ -1,5 +1,5 @@ // Angular -import { Directive, HostBinding, Input, OnInit } from '@angular/core'; +import { Directive, HostBinding, Input, OnInit, input } from '@angular/core'; // Style definitions import { @@ -38,19 +38,19 @@ export abstract class PiBaseTextViewerComponent implements OnInit { this.hasValueClass, ].join(' '); } - @Input() alignment: alignment = 'center'; - @Input() borderType: borderType; - @Input() color: textColor; - @Input() flexDirection: flexDirection = 'row'; - @Input() fontSize: fontSize = 's'; - @Input() justify: justify = 'flex-start'; - @Input() fontWeight: fontWeight = '300'; - @Input() fontStyle: fontStyle = 'normal'; + readonly alignment = input('center'); + readonly borderType = input(); + readonly color = input(); + readonly flexDirection = input('row'); + readonly fontSize = input('s'); + readonly justify = input('flex-start'); + readonly fontWeight = input('300'); + readonly fontStyle = input('normal'); @Input() icon: string; - @Input() iconSize: iconSize = 'medium'; - @Input() iconColor: styleType; - @Input() iconAppearance: 'stroke' | 'fill-stroke' | 'fill' | 'default' | 'custom' = 'default'; - @Input() isDisabled = false; + readonly iconSize = input('medium'); + readonly iconColor = input(); + readonly iconAppearance = input<'stroke' | 'fill-stroke' | 'fill' | 'default' | 'custom'>('default'); + readonly isDisabled = input(false); // Content @Input() label!: string | unknown; @@ -74,35 +74,43 @@ export abstract class PiBaseTextViewerComponent implements OnInit { } protected get alignmentClass(): string { - return this.alignment && `pi-text-viewer__align--${this.alignment}`; + const alignmentValue = this.alignment(); + return alignmentValue && `pi-text-viewer__align--${alignmentValue}`; } protected get borderTypeClass(): string | undefined { - return this.borderType && `pi-text-viewer__border--${this.borderType}`; + const borderTypeValue = this.borderType(); + return borderTypeValue && `pi-text-viewer__border--${borderTypeValue}`; } protected get colorClass(): string | undefined { - return this.color && `pi-color__${this.color}`; + const color = this.color(); + return color && `pi-color__${color}`; } protected get flexDirectionClass(): string | undefined { - return this.flexDirection && `pi-text-viewer__flex-direction--${this.flexDirection}`; + const flexDirectionValue = this.flexDirection(); + return flexDirectionValue && `pi-text-viewer__flex-direction--${flexDirectionValue}`; } protected get fontSizeClass(): string | undefined { - return this.fontSize && `pi-text-viewer__font-size--${this.fontSize}`; + const fontSizeValue = this.fontSize(); + return fontSizeValue && `pi-text-viewer__font-size--${fontSizeValue}`; } protected get fontWeightClass(): string | undefined { - return this.fontWeight && `pi-text-viewer__font-weight--${this.fontWeight}`; + const fontWeightValue = this.fontWeight(); + return fontWeightValue && `pi-text-viewer__font-weight--${fontWeightValue}`; } protected get justifyClass(): string | undefined { - return this.justify && `pi-text-viewer__justify--${this.justify}`; + const justifyValue = this.justify(); + return justifyValue && `pi-text-viewer__justify--${justifyValue}`; } protected get fontStyleClass(): string | undefined { - return this.fontStyle && `pi-text-viewer__font-style--${this.fontStyle}`; + const fontStyleValue = this.fontStyle(); + return fontStyleValue && `pi-text-viewer__font-style--${fontStyleValue}`; } protected get hasIconClass(): string | boolean { @@ -118,20 +126,23 @@ export abstract class PiBaseTextViewerComponent implements OnInit { } protected get iconSizeClass(): string | undefined { - return this.iconSize && `pi-text-viewer__icon-size--${this.iconSize}`; + const iconSizeValue = this.iconSize(); + return iconSizeValue && `pi-text-viewer__icon-size--${iconSizeValue}`; } protected get iconColorClass(): string | undefined { - return this.iconColor - ? `pi-text-viewer__icon-color--${this.iconColor}` + const iconColor = this.iconColor(); + return iconColor + ? `pi-text-viewer__icon-color--${iconColor}` : 'pi-text-viewer__icon-color--black'; } protected get iconAppearanceClass(): string | undefined { - return this.iconAppearance && `pi-text-viewer__icon-appearance--${this.iconAppearance}`; + const iconAppearance = this.iconAppearance(); + return iconAppearance && `pi-text-viewer__icon-appearance--${iconAppearance}`; } protected get isDisabledClass(): string | boolean { - return this.isDisabled ? 'is-disabled' : ''; + return this.isDisabled() ? 'is-disabled' : ''; } } diff --git a/libs/ui/src/lib/ui/text/directives/text-color.directive.ts b/libs/ui/src/lib/ui/text/directives/text-color.directive.ts index 8fe9216..2711b03 100644 --- a/libs/ui/src/lib/ui/text/directives/text-color.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-color.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostBinding, Input } from '@angular/core'; +import { Directive, HostBinding, input } from '@angular/core'; import { styleType } from '../../../styles'; // Condition color @@ -6,18 +6,18 @@ import { styleType } from '../../../styles'; export class PiTextColorDirective { // Blue @HostBinding('class.pi-color__primary') get isPrimary(): boolean { - return this.color === 'primary'; + return this.color() === 'primary'; } // Yellow @HostBinding('class.pi-color__accent') get isAccent(): boolean { - return this.color === 'accent'; + return this.color() === 'accent'; } // Red @HostBinding('class.pi-color__warn') get isWarn(): boolean { - return this.color === 'warn'; + return this.color() === 'warn'; } - @Input() color: styleType; + readonly color = input(); } diff --git a/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts b/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts index 18e1c21..bde46ba 100644 --- a/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostBinding, Input } from '@angular/core'; +import { Directive, HostBinding, input } from '@angular/core'; @Directive({ selector: '[pi-text-size]', }) export class PiTextSizeDirective { @@ -6,18 +6,11 @@ export class PiTextSizeDirective { return this.sizeClass; } - @Input() size!: - | 'xx-small' - | 'x-small' - | 'small' - | 'medium' - | 'large' - | 'x-large' - | 'xx-large' - | 'xxx-large'; + readonly size = input.required<'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large'>(); protected get sizeClass(): string { - return !!this.size && `pi-text pi-text__size--${this.size}`; + const size = this.size(); + return !!size && `pi-text pi-text__size--${size}`; } } diff --git a/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts b/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts index 6f99de4..443d1c5 100644 --- a/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Directive, HostBinding, Input, OnChanges, SimpleChanges, input } from '@angular/core'; @Directive({ selector: '[pi-text-centered]', }) export class PiTextCenteredDirective { @@ -30,10 +30,10 @@ export class PiDisabledDirective implements OnChanges { @Directive({ selector: '[pi-covered]', }) export class PiTextCoveredDirective { @HostBinding('class') get classes(): string { - return this.isCovered ? 'pi-text pi-text__is-covered' : ''; + return this.isCovered() ? 'pi-text pi-text__is-covered' : ''; } - @Input() isCovered: boolean; + readonly isCovered = input(); } @Directive({ selector: '[pi-letter-spacing]', }) diff --git a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html index b5030d4..b63d427 100644 --- a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html +++ b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html @@ -1,9 +1,9 @@
- {{ isLongText ? (text | slice : 0 : characterLimit) : text + {{ isLongText ? (text() | slice : 0 : characterLimit()) : text() }}... -
{{ text | slice : characterLimit : text?.length }}
+
{{ text() | slice : characterLimit() : text()?.length }}