NAS-132790 / 25.04 / Fix IxSimpleChanges (#11124)

src/app/directives/has-access/has-access.directive.ts

@@ -23,8 +23,8 @@ export class HasAccessDirective {
 
     if (!hasAccess) {
       this.wrapperContainer = this.viewContainerRef.createComponent(MissingAccessWrapperComponent);
-      this.wrapperContainer.instance.template = this.templateRef;
-      this.wrapperContainer.instance.class = this.elementClass;
+      this.wrapperContainer.setInput('template', this.templateRef);
+      this.wrapperContainer.setInput('class', this.elementClass);
     } else {
       this.viewContainerRef.createEmbeddedView(this.templateRef);
     }

src/app/directives/has-access/missing-access-wrapper.component.html

@@ -1,9 +1,9 @@
 <span
   matTooltipPosition="above"
-  [disableFocusableElements]="!!template"
-  [class]="['role-missing', class]"
+  [disableFocusableElements]="!!template()"
+  [class]="['role-missing', class()]"
   [matTooltip]="'Missing permissions for this action' | translate"
 >
-  <ng-container *ngTemplateOutlet="template"></ng-container>
+  <ng-container *ngTemplateOutlet="template()"></ng-container>
   <ix-icon name="mdi-lock" class="role-missing-icon"></ix-icon>
 </span>

src/app/directives/has-access/missing-access-wrapper.component.ts

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
-  ChangeDetectionStrategy, Component, Input, TemplateRef,
+  ChangeDetectionStrategy, Component, input, TemplateRef,
 } from '@angular/core';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,6 +22,6 @@ import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
   ],
 })
 export class MissingAccessWrapperComponent {
-  @Input() template: TemplateRef<HTMLElement>;
-  @Input() class: string;
+  readonly template = input<TemplateRef<HTMLElement>>();
+  readonly class = input<string>();
 }

src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.spec.ts

@@ -38,7 +38,7 @@ describe('WarnAboutUnsavedChangesDirective', () => {
   });
 
   it('should emit close event if there are no unsaved changes', () => {
-    spectator.component.formGroup.markAsPristine();
+    spectator.component.formGroup().markAsPristine();
 
     spectator.detectChanges();
 

src/app/directives/warn-about-unsaved-changes/warn-about-unsaved-changes.directive.ts

@@ -1,5 +1,6 @@
 import {
-  Directive, Input, OnInit, HostListener,
+  Directive, OnInit, HostListener,
+  input,
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -15,7 +16,7 @@ import { SlideInRef } from 'app/modules/slide-ins/slide-in-ref';
   standalone: true,
 })
 export class WarnAboutUnsavedChangesDirective<T> implements OnInit {
-  @Input() formGroup: FormGroup;
+  readonly formGroup = input<FormGroup>();
 
   private formSubmitted = false;
 
@@ -36,7 +37,7 @@ export class WarnAboutUnsavedChangesDirective<T> implements OnInit {
   }
 
   closeWithConfirmation(response?: T): Observable<boolean> {
-    if (this.formGroup.pristine || (this.formSubmitted && !this.formGroup.invalid) || response) {
+    if (this.formGroup().pristine || (this.formSubmitted && !this.formGroup().invalid) || response) {
       this.emitClose(response);
       return of(true);
     }
@@ -52,8 +53,8 @@ export class WarnAboutUnsavedChangesDirective<T> implements OnInit {
   }
 
   private trackFormChanges(): void {
-    this.formGroup.valueChanges.pipe(
-      filter(() => !this.formGroup.pristine && this.formSubmitted),
+    this.formGroup().valueChanges.pipe(
+      filter(() => !this.formGroup().pristine && this.formSubmitted),
       tap(() => this.formSubmitted = false),
       untilDestroyed(this),
     ).subscribe();

src/app/interfaces/simple-changes.interface.ts

@@ -1,10 +1,11 @@
-import { SimpleChange } from '@angular/core';
-import { Overwrite } from 'utility-types';
+import { Signal, SimpleChange } from '@angular/core';
 
-export type IxSimpleChange<T> = Overwrite<SimpleChange, {
-  previousValue: T;
-  currentValue: T;
-}>;
+type UnwrapSignal<T> = T extends Signal<infer U> ? U : T;
+
+export type IxSimpleChange<T> = Omit<SimpleChange, 'previousValue' | 'currentValue'> & {
+  previousValue: UnwrapSignal<T>;
+  currentValue: UnwrapSignal<T>;
+};
 
 export type IxSimpleChanges<T> = {
   [K in keyof T]: IxSimpleChange<T[K]>;

src/app/modules/charts/view-chart-gauge/view-chart-gauge.component.ts

@@ -1,6 +1,6 @@
 import { NgClass } from '@angular/common';
 import {
-  Component, AfterViewInit, Input, OnChanges, ChangeDetectionStrategy,
+  Component, AfterViewInit, OnChanges, ChangeDetectionStrategy, input,
 } from '@angular/core';
 import { UUID } from 'angular2-uuid';
 import * as d3 from 'd3';
@@ -30,6 +30,8 @@ export interface GaugeConfig {
   imports: [NgClass],
 })
 export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
+  readonly config = input.required<GaugeConfig>();
+
   subtitle = '';
   chartType = 'gauge';
   chartClass = 'view-chart-gauge';
@@ -40,8 +42,6 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
   units = '%'; // default unit type
   diameter = 120; // default diameter
 
-  @Input() config: GaugeConfig;
-
   ngOnChanges(changes: IxSimpleChanges<this>): void {
     if (changes.config) {
       if (changes.config.currentValue && changes.config.currentValue.subtitle) {
@@ -60,7 +60,7 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
 
   ngAfterViewInit(): void {
     this.render();
-    this.update(this.config.data[1]);
+    this.update(this.config().data[1]);
   }
 
   get data(): GaugeData {
@@ -72,14 +72,14 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
   }
 
   render(): void {
-    const lineWidth = this.config.diameter / 10; // 10 percent of diameter
+    const lineWidth = this.config().diameter / 10; // 10 percent of diameter
     this.arc = d3.arc()
-      .innerRadius(this.config.diameter / 2 - lineWidth) // 80
-      .outerRadius(this.config.diameter / 2) // 90
+      .innerRadius(this.config().diameter / 2 - lineWidth) // 80
+      .outerRadius(this.config().diameter / 2) // 90
       .startAngle(0);
 
-    const width = this.config.diameter;
-    const height = this.config.diameter;
+    const width = this.config().diameter;
+    const height = this.config().diameter;
     const svg = d3.select('#gauge-' + this.chartId).append('svg')
       .attr('width', width)
       .attr('height', height);
@@ -99,7 +99,7 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
 
     // Value as text
     text.style('fill', 'var(--fg2)')
-      .style('font-size', this.config.fontSize.toString() + 'px')
+      .style('font-size', this.config().fontSize.toString() + 'px')
       .style('font-weight', 500)
       .attr('text-anchor', 'middle')
       .attr('alignment-baseline', 'central');
@@ -112,7 +112,7 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
     }
     // Subtitle as text
     subtext.style('fill', 'var(--fg2)')
-      .style('font-size', `${this.config.fontSize / 2}px`)
+      .style('font-size', `${this.config().fontSize / 2}px`)
       .style('font-weight', 400)
       .attr('text-anchor', 'middle')
       .attr('alignment-baseline', 'central');
@@ -154,7 +154,7 @@ export class ViewChartGaugeComponent implements AfterViewInit, OnChanges {
         .attrTween('d', this.load(this.percentToAngle(Number(value))));
 
       d3.select('#gauge-' + this.chartId + ' text#text-value')
-        .text(String(value) + this.config.units);
+        .text(String(value) + this.config().units);
     }
   }
 

src/app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.component.html

@@ -1,18 +1,18 @@
-@if (label || tooltip) {
+@if (label() || tooltip()) {
   <ix-label
-    [label]="label"
-    [tooltip]="tooltip"
-    [required]="required"
+    [label]="label()"
+    [tooltip]="tooltip()"
+    [required]="required()"
   ></ix-label>
 }
 
 <div
   ixRegisteredControl
   class="checkbox-list"
-  [class.inline]="inlineFields"
-  [attr.aria-label]="label"
+  [class.inline]="inlineFields()"
+  [attr.aria-label]="label()"
 >
-  @for (option of options | async; track option) {
+  @for (option of options() | async; track option) {
     <mat-checkbox
       class="checkbox"
       color="primary"
@@ -29,4 +29,4 @@
   }
 </div>
 
-<ix-errors [control]="controlDirective.control" [label]="label"></ix-errors>
+<ix-errors [control]="controlDirective.control" [label]="label()"></ix-errors>

src/app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, input,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
 import { Option } from 'app/interfaces/option.interface';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
+import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 
 @UntilDestroy()
@@ -26,16 +27,16 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     AsyncPipe,
     TranslateModule,
     TestDirective,
+    RegisteredControlDirective,
   ],
 })
 export class IxCheckboxListComponent implements ControlValueAccessor {
-  @Input() label: string;
-  @Input() hint: string;
-  @Input() tooltip: string;
-  @Input() required: boolean;
-  @Input() options: Observable<Option[]>;
-  @Input() inlineFields: boolean;
-  @Input() inlineFieldFlex: string;
+  readonly label = input<string>();
+  readonly tooltip = input<string>();
+  readonly required = input<boolean>();
+  readonly options = input<Observable<Option[]>>();
+  readonly inlineFields = input<boolean>();
+  readonly inlineFieldFlex = input<string>();
 
   isDisabled = false;
   value: (string | number)[];
@@ -48,12 +49,12 @@ export class IxCheckboxListComponent implements ControlValueAccessor {
   }
 
   get fieldFlex(): string {
-    if (!this.inlineFields) {
+    if (!this.inlineFields()) {
       return '100%';
     }
 
-    if (this.inlineFields && this.inlineFieldFlex) {
-      return this.inlineFieldFlex;
+    if (this.inlineFields() && this.inlineFieldFlex()) {
+      return this.inlineFieldFlex();
     }
 
     return '50%';

src/app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component.html

@@ -2,33 +2,33 @@
   ixRegisteredControl
   color="primary"
   [checked]="value"
-  [required]="required"
+  [required]="required()"
   [disabled]="isDisabled"
   [ixTest]="controlDirective.name"
-  [attr.aria-label]="label"
+  [attr.aria-label]="label()"
   (change)="onCheckboxChanged($event)"
   (blur)="onTouch()"
 >
-  {{ label }}
-  @if (required) {
+  {{ label() }}
+  @if (required()) {
     <span class="required">*</span>
   }
 </mat-checkbox>
 
-@if (tooltip) {
+@if (tooltip()) {
   <ix-tooltip
     class="tooltip"
-    [header]="label"
-    [message]="tooltip"
+    [header]="label()"
+    [message]="tooltip()"
   ></ix-tooltip>
 }
 
-@if (warning) {
-  <ix-warning [message]="warning"></ix-warning>
+@if (warning()) {
+  <ix-warning [message]="warning()"></ix-warning>
 }
 
-<ix-errors [control]="controlDirective.control" [label]="label"></ix-errors>
+<ix-errors [control]="controlDirective.control" [label]="label()"></ix-errors>
 
-@if (hint) {
-  <mat-hint>{{ hint }}</mat-hint>
+@if (hint()) {
+  <mat-hint>{{ hint() }}</mat-hint>
 }

src/app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, input,
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
@@ -9,6 +9,7 @@ import { MatHint } from '@angular/material/form-field';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { WarningComponent } from 'app/modules/forms/ix-forms/components/warning/warning.component';
+import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 
@@ -26,14 +27,15 @@ import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
     IxErrorsComponent,
     MatHint,
     TestDirective,
+    RegisteredControlDirective,
   ],
 })
 export class IxCheckboxComponent implements ControlValueAccessor {
-  @Input() label: string;
-  @Input() hint: string;
-  @Input() tooltip: string;
-  @Input() warning: string;
-  @Input() required: boolean;
+  readonly label = input<string>();
+  readonly hint = input<string>();
+  readonly tooltip = input<string>();
+  readonly warning = input<string>();
+  readonly required = input<boolean>();
 
   isDisabled = false;
   value: boolean;