input migration

SchweizerischeBundesbahnen · Dec 23, 2024 · 901862a · 901862a
1 parent b66fb0f
commit 901862a
Show file tree

Hide file tree

Showing 30 changed files with 170 additions and 220 deletions.
diff --git a/projects/scion/components.internal/accordion/src/accordion-item.directive.ts b/projects/scion/components.internal/accordion/src/accordion-item.directive.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {Directive, Input, TemplateRef} from '@angular/core';
+import {Directive, input, TemplateRef} from '@angular/core';
 
 /**
  * Use this directive to model an accordion item for {SciAccordionComponent}.
@@ -37,26 +37,22 @@ export class SciAccordionItemDirective {
   /**
    * Optional key to identify this item and is used as key for the {TrackBy} function.
    */
-  @Input()
-  public key?: string | undefined;
+  public readonly key = input<string>();
 
   /**
    * Provide template(s) to be rendered as actions of this list item.
    */
-  @Input({required: true})
-  public panel!: TemplateRef<void>;
+  public readonly panel = input.required<TemplateRef<void>>();
 
   /**
    * Indicates whether to expand this item.
    */
-  @Input()
-  public expanded?: boolean | undefined;
+  public readonly expanded = input<boolean>();
 
   /**
    * Specifies CSS class(es) added to the <section> and <wb-view> elements, e.g. used for e2e testing.
    */
-  @Input()
-  public cssClass?: string | string[] | undefined | null;
+  public readonly cssClass = input<string | string[] | null>();
 
   constructor(public readonly template: TemplateRef<void>) {
   }

diff --git a/projects/scion/components.internal/accordion/src/accordion.component.html b/projects/scion/components.internal/accordion/src/accordion.component.html
@@ -1,10 +1,10 @@
-<div cdkAccordion [multi]="multi" class="accordion">
+<div cdkAccordion [multi]="multi()" class="accordion">
   @for (item of items; track trackByFn($index, item)) {
     <section class="accordion-item e2e-accordion-item"
              [class.e2e-expanded]="cdkAccordionItem.expanded"
-             [ngClass]="item.cssClass"
+             [ngClass]="item.cssClass()"
              cdkAccordionItem #cdkAccordionItem="cdkAccordionItem"
-             [expanded]="item.expanded ?? false">
+             [expanded]="item.expanded() ?? false">
       <button (click)="onToggle(cdkAccordionItem)" class="e2e-accordion-item-header">
         <ng-container *ngTemplateOutlet="item.template"></ng-container>
         <span class="e2e-toggle"
@@ -16,7 +16,7 @@
       </button>
       @if (cdkAccordionItem.expanded) {
         <section @enter>
-          <ng-container *ngTemplateOutlet="item.panel"></ng-container>
+          <ng-container *ngTemplateOutlet="item.panel()"></ng-container>
         </section>
       }
     </section>

diff --git a/projects/scion/components.internal/accordion/src/accordion.component.ts b/projects/scion/components.internal/accordion/src/accordion.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, SkipSelf, TrackByFunction, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, input, OnDestroy, OnInit, QueryList, SkipSelf, TrackByFunction, ViewChild} from '@angular/core';
 import {animate, AnimationMetadata, style, transition, trigger} from '@angular/animations';
 import {SciAccordionItemDirective} from './accordion-item.directive';
 import {CdkAccordion, CdkAccordionItem, CdkAccordionModule} from '@angular/cdk/accordion';
@@ -66,12 +66,12 @@ export class SciAccordionComponent implements OnInit, OnDestroy {
 
   @HostBinding('class.bubble')
   public get isBubbleVariant(): boolean {
-    return this.variant === 'bubble';
+    return this.variant() === 'bubble';
   }
 
   @HostBinding('class.solid')
   public get isSolidVariant(): boolean {
-    return this.variant === 'solid';
+    return this.variant() === 'solid';
   }
 
   @HostBinding('class.filled')
@@ -83,14 +83,12 @@ export class SciAccordionComponent implements OnInit, OnDestroy {
   /**
    * Whether the accordion should allow multiple expanded accordion items simultaneously.
    */
-  @Input()
-  public multi? = false;
+  public readonly multi = input<boolean>(false);
 
   /**
    * Specifies the style of the accordion.
    */
-  @Input()
-  public variant?: 'solid' | 'bubble' = 'bubble';
+  public readonly variant = input<'solid' | 'bubble'>('bubble');
 
   /**
    * Workaround for setting the filled state on initialization:
@@ -104,7 +102,7 @@ export class SciAccordionComponent implements OnInit, OnDestroy {
   }
 
   public trackByFn: TrackByFunction<SciAccordionItemDirective> = (index: number, item: SciAccordionItemDirective): any => {
-    return item.key ?? item;
+    return item.key() ?? item;
   };
 
   public onToggle(item: CdkAccordionItem): void {

diff --git a/projects/scion/components.internal/checkbox/src/checkbox.component.ts b/projects/scion/components.internal/checkbox/src/checkbox.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input} from '@angular/core';
+import {booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, forwardRef, input} from '@angular/core';
 import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms';
 import {noop} from 'rxjs';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -31,24 +31,25 @@ import {UUID} from '@scion/toolkit/uuid';
 })
 export class SciCheckboxComponent implements ControlValueAccessor {
 
+  public readonly disabled = input(false, {transform: booleanAttribute});
+
   private _cvaChangeFn: (value: unknown) => void = noop;
   private _cvaTouchedFn: () => void = noop;
 
   protected formControl = new FormControl<boolean>(false, {nonNullable: true});
   protected id = UUID.randomUUID();
 
-  @Input()
-  public set disabled(disabled: boolean | string | undefined | null) {
-    coerceBooleanProperty(disabled) ? this.formControl.disable() : this.formControl.enable();
-  }
-
   constructor(private _cd: ChangeDetectorRef) {
     this.formControl.valueChanges
       .pipe(takeUntilDestroyed())
       .subscribe(checked => {
         this._cvaChangeFn(checked);
         this._cvaTouchedFn();
       });
+
+    effect(() => {
+      this.disabled() ? this.formControl.disable() : this.formControl.enable();
+    });
   }
 
   public get isChecked(): boolean {
@@ -73,7 +74,7 @@ export class SciCheckboxComponent implements ControlValueAccessor {
    * Method implemented as part of `ControlValueAccessor` to work with Angular forms API
    */
   public setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    isDisabled ? this.formControl.disable() : this.formControl.enable();
     this._cd.markForCheck();
   }
 

diff --git a/projects/scion/components.internal/filter-field/src/filter-field.component.html b/projects/scion/components.internal/filter-field/src/filter-field.component.html
@@ -2,8 +2,8 @@
        [attr.id]="id"
        autocomplete="off"
        [formControl]="formControl"
-       [tabindex]="tabindex ?? 0"
-       [placeholder]="placeholder ?? ''">
+       [tabindex]="tabindex() ?? 0"
+       [placeholder]="placeholder() ?? ''">
 <button class="clear" tabindex="-1" (click)="onClear()" sciMaterialIcon>
   clear
 </button>

diff --git a/projects/scion/components.internal/filter-field/src/filter-field.component.ts b/projects/scion/components.internal/filter-field/src/filter-field.component.ts
@@ -8,11 +8,10 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, inject, Input, OnDestroy, Output, ViewChild} from '@angular/core';
+import {booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, inject, input, OnDestroy, Output, ViewChild} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {takeUntil} from 'rxjs/operators';
 import {noop, Subject} from 'rxjs';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {UUID} from '@scion/toolkit/uuid';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
@@ -40,32 +39,23 @@ export class SciFilterFieldComponent implements ControlValueAccessor, OnDestroy
   private readonly _cd = inject(ChangeDetectorRef);
   private readonly _formBuilder = inject(NonNullableFormBuilder);
 
-  private _destroy$ = new Subject<void>();
-  private _cvaChangeFn: (value: any) => void = noop;
-  private _cvaTouchedFn: () => void = noop;
-  public id = UUID.randomUUID();
-
   /**
    * Sets focus order in sequential keyboard navigation.
    * If not specified, the focus order is according to the position in the document (tabindex=0).
    */
-  @Input()
-  public tabindex?: number | undefined;
+  public readonly tabindex = input<number>();
 
   /**
    * Specifies the hint displayed when this field is empty.
    */
-  @Input()
-  public placeholder?: string | undefined;
+  public readonly placeholder = input<string>();
 
-  @Input()
-  public set disabled(disabled: boolean | string | undefined | null) {
-    coerceBooleanProperty(disabled) ? this.formControl.disable() : this.formControl.enable();
-  }
+  public readonly disabled = input(false, {transform: booleanAttribute});
 
-  public get disabled(): boolean {
-    return this.formControl.disabled;
-  }
+  private _destroy$ = new Subject<void>();
+  private _cvaChangeFn: (value: any) => void = noop;
+  private _cvaTouchedFn: () => void = noop;
+  public id = UUID.randomUUID();
 
   /**
    * Emits on filter change.
@@ -102,6 +92,10 @@ export class SciFilterFieldComponent implements ControlValueAccessor, OnDestroy
           this._cvaTouchedFn(); // triggers form field validation and signals a blur event
         }
       });
+
+    effect(() => {
+      this.disabled() ? this.formControl.disable() : this.formControl.enable();
+    });
   }
 
   @HostListener('focus')
@@ -157,7 +151,7 @@ export class SciFilterFieldComponent implements ControlValueAccessor, OnDestroy
    * @docs-private
    */
   public setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    isDisabled ? this.formControl.disable() : this.formControl.enable();
     this._cd.markForCheck();
   }
 

diff --git a/projects/scion/components.internal/form-field/src/form-field.component.html b/projects/scion/components.internal/form-field/src/form-field.component.html
@@ -1,4 +1,4 @@
-<label (mousedown)="onLabelClick($event)" [for]="id">{{label}}:</label>
+<label (mousedown)="onLabelClick($event)" [for]="id">{{label()}}:</label>
 <div class="content" [attr.id]="id">
   <ng-content></ng-content>
 </div>
diff --git a/projects/scion/components.internal/form-field/src/form-field.component.ts b/projects/scion/components.internal/form-field/src/form-field.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {Component, ElementRef, HostBinding, Input, OnDestroy} from '@angular/core';
+import {Component, ElementRef, HostBinding, input, OnDestroy} from '@angular/core';
 import {ConfigurableFocusTrap, ConfigurableFocusTrapFactory} from '@angular/cdk/a11y';
 import {UUID} from '@scion/toolkit/uuid';
 
@@ -19,21 +19,19 @@ import {UUID} from '@scion/toolkit/uuid';
 })
 export class SciFormFieldComponent implements OnDestroy {
 
-  private _focusTrap: ConfigurableFocusTrap;
-
   public readonly id = UUID.randomUUID();
 
-  @Input()
-  public direction: 'row' | 'column' = 'row';
+  public readonly direction = input<'row' | 'column'>('row');
+
+  public readonly label = input.required<string>();
+
+  private _focusTrap: ConfigurableFocusTrap;
 
   @HostBinding('class.column-direction')
   public get isColumnDirection(): boolean {
-    return this.direction === 'column';
+    return this.direction() === 'column';
   }
 
-  @Input({required: true})
-  public label!: string;
-
   constructor(host: ElementRef<HTMLElement>, focusTrapFactory: ConfigurableFocusTrapFactory) {
     this._focusTrap = focusTrapFactory.create(host.nativeElement);
     this._focusTrap.enabled = false;

diff --git a/projects/scion/components.internal/key-value-field/src/key-value-field.component.html b/projects/scion/components.internal/key-value-field/src/key-value-field.component.html
@@ -1,18 +1,18 @@
 <header>
-  @if (title) {
-    <h2>{{title}}</h2>
+  @if (title()) {
+    <h2>{{title()}}</h2>
   }
   <!-- add button -->
-  @if (addable) {
+  @if (addable()) {
     <button (click)="onAdd()" class="e2e-add" type="button" title="Add entry" sciMaterialIcon>add</button>
   }
   <!-- remove button -->
-  @if (removable) {
+  @if (removable()) {
     <button (click)="onClear()" class="e2e-clear" type="button" title="Clear all entries" sciMaterialIcon>clear</button>
   }
 </header>
 
-@for (keyValueGroup of keyValueFormArray.controls; track keyValueGroup; let i = $index) {
+@for (keyValueGroup of keyValueFormArray().controls; track keyValueGroup; let i = $index) {
   <!-- key -->
   @if (keyValueGroup.controls.key.disabled) {
     <!-- readonly -->
@@ -24,7 +24,7 @@ <h2>{{title}}</h2>
   <!-- value -->
   <input [formControl]="keyValueGroup.controls.value" [attr.id]="id + '_' + i" class="e2e-value">
   <!-- 'remove' button -->
-  @if (removable) {
+  @if (removable()) {
     <button class="e2e-remove" type="button" (click)="onRemove(i)" title="remove entry" sciMaterialIcon>remove</button>
   }
 }
diff --git a/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts b/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import {Component, ElementRef, HostBinding, Input} from '@angular/core';
+import {Component, ElementRef, HostBinding, input} from '@angular/core';
 import {FormArray, FormControl, FormGroup, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {Dictionary, Maps} from '@scion/toolkit/util';
 import {UUID} from '@scion/toolkit/uuid';
@@ -30,19 +30,15 @@ export class SciKeyValueFieldComponent {
 
   public readonly id = UUID.randomUUID();
 
-  @Input()
-  public title?: string | undefined;
+  public readonly title = input<string>();
 
-  @Input({required: true})
-  public keyValueFormArray!: FormArray<FormGroup<KeyValueEntry>>;
+  public readonly keyValueFormArray = input.required<FormArray<FormGroup<KeyValueEntry>>>();
 
-  @Input()
   @HostBinding('class.removable')
-  public removable = false;
+  public readonly removable = input(false);
 
-  @Input()
   @HostBinding('class.addable')
-  public addable = false;
+  public readonly addable = input(false);
 
   @HostBinding('attr.tabindex')
   public tabindex = -1;
@@ -51,22 +47,22 @@ export class SciKeyValueFieldComponent {
   }
 
   public onRemove(index: number): void {
-    this.keyValueFormArray.removeAt(index);
+    this.keyValueFormArray().removeAt(index);
 
     // Focus the component to not lose the focus when the remove button is removed from the DOM.
     // Otherwise, if used in a popup, the popup would be closed because no element is focused anymore.
     this._host.nativeElement.focus({preventScroll: true});
   }
 
   public onAdd(): void {
-    this.keyValueFormArray.push(this._formBuilder.group({
+    this.keyValueFormArray().push(this._formBuilder.group({
       key: this._formBuilder.control(''),
       value: this._formBuilder.control(''),
     }));
   }
 
   public onClear(): void {
-    this.keyValueFormArray.clear();
+    this.keyValueFormArray().clear();
   }
 
   /**

diff --git a/projects/scion/components.internal/key-value/src/key-value.component.html b/projects/scion/components.internal/key-value/src/key-value.component.html
@@ -1,4 +1,4 @@
-@for (property of flattenedProperties | keyvalue:keyCompareFn; track property) {
+@for (property of flattenedProperties() | keyvalue:keyCompareFn; track property) {
   <span class="key"><span class="e2e-key">{{property.key}}</span>:</span>
   <span class="value e2e-value">{{property.value}}</span>
 }