refactor: migra decoradores a signals (input/output/viewChild/contentChild)

libs/ui/src/lib/util/affix/affix.directive.ts

@@ -1,21 +1,22 @@
-import { Directive, ElementRef, HostBinding, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core';
 import { unit } from '../models';
 
 @Directive()
 export abstract class PiBaseAffixDirective implements OnInit {
   @HostBinding('class') get classes(): string {
-    return ['pi-affix', `pi-affix__appearance--${this.appearance}`].join(' ');
+    return ['pi-affix', `pi-affix__appearance--${this.appearance()}`].join(' ');
   }
 
-  @Input() unit: unit | string | undefined;
-  @Input() appearance: 'ghost' | 'fill' = 'ghost';
+  readonly unit = input<unit | string>();
+  readonly appearance = input<'ghost' | 'fill'>('ghost');
 
   constructor(private renderer: Renderer2, private el: ElementRef) {}
 
   ngOnInit() {
-    if (this.unit) {
+    const unitValue = this.unit();
+    if (unitValue) {
       const span = this.renderer.createElement('span');
-      const text = this.renderer.createText(this.unit);
+      const text = this.renderer.createText(unitValue);
 
       this.renderer.appendChild(span, text);
       this.renderer.appendChild(this.el.nativeElement, span);

libs/ui/src/lib/util/color/directives/colors.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input, OnInit } from '@angular/core';
+import { Directive, HostBinding, OnInit, input } from '@angular/core';
 import { density, mode, opacity, styleType } from '../../../styles';
 
 @Directive()
@@ -6,18 +6,20 @@ export abstract class PiBaseColor implements OnInit {
   @HostBinding('class') get commonClasses(): string {
     return [this.densityClass, this.modeClass].join(' ');
   }
-  @Input() density: density = '';
-  @Input() opacity: opacity = '100';
-  @Input() mode: mode = 'dark';
+  readonly density = input<density>('');
+  readonly opacity = input<opacity>('100');
+  readonly mode = input<mode>('dark');
 
   ngOnInit(): void {
     this.densityClass;
   }
   protected get densityClass(): string {
-    return !!this.density ? `pi-color__density--${this.density}` : '';
+    const densityValue = this.density();
+    return !!densityValue ? `pi-color__density--${densityValue}` : '';
   }
   protected get modeClass(): string {
-    return this.mode && `pi-color__mode--${this.mode}`;
+    const modeValue = this.mode();
+    return modeValue && `pi-color__mode--${modeValue}`;
   }
 }
 
@@ -27,10 +29,11 @@ export class PiDynamicColorDirective extends PiBaseColor {
     return this.colorClass;
   }
 
-  @Input() color!: styleType;
+  readonly color = input.required<styleType>();
 
   protected get colorClass(): string {
-    return !!this.color && `pi-color__${this.color}`;
+    const color = this.color();
+    return !!color && `pi-color__${color}`;
   }
 }
 

libs/ui/src/lib/util/menu/base.menu.component.ts

@@ -1,5 +1,5 @@
 // Angular
-import { ContentChild, Directive, HostBinding, Input, TemplateRef } from '@angular/core';
+import { Directive, HostBinding, Input, TemplateRef, input, contentChild } from '@angular/core';
 
 // Style definitions
 import { MenuEntry, MenuItemText } from './entities/menu-entry.model';
@@ -10,8 +10,7 @@ export abstract class PiBaseMenuComponent {
 
   isMouseOver = false;
 
-  @Input()
-  label: string;
+  readonly label = input<string>();
 
   _menuItems: Array<MenuEntry> = [];
 
@@ -27,26 +26,22 @@ export abstract class PiBaseMenuComponent {
   /**
    * Parent Menu
    */
-  @ContentChild('parentMenuTemplate', { static: false })
-  parentMenuTemplateRef: TemplateRef<unknown> | undefined;
+  readonly parentMenuTemplateRef = contentChild<TemplateRef<unknown>>('parentMenuTemplate');
 
   /**
    * Children Menu (Level 1)
    */
-  @ContentChild('childMenuTemplate', { static: false })
-  childMenuTemplateRef: TemplateRef<unknown> | undefined;
+  readonly childMenuTemplateRef = contentChild<TemplateRef<unknown>>('childMenuTemplate');
 
   /**
    * Additional Children Menu (Level 1)
    */
-  @ContentChild('childAsideMenuTemplate', { static: false })
-  childAsideMenuTemplateRef: TemplateRef<unknown> | undefined;
+  readonly childAsideMenuTemplateRef = contentChild<TemplateRef<unknown>>('childAsideMenuTemplate');
 
   /**
    * Additional Children Menu (Level 1)
    */
-  @ContentChild('asideMenuTemplate', { static: false })
-  asideMenuTemplateRef: TemplateRef<unknown> | undefined;
+  readonly asideMenuTemplateRef = contentChild<TemplateRef<unknown>>('asideMenuTemplate');
 
   trackByFn(index: number, item: MenuEntry): MenuItemText | string | undefined {
     return item.label;

libs/ui/src/lib/util/menu/directives/menu-entry.directive.ts

@@ -1,12 +1,13 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, HostBinding, input } from '@angular/core';
 import { MenuEntryContext } from '../entities/menu-entry.model';
 
 @Directive({ selector: '[pi-menu-entry]', })
 export class PiMenuEntryDirective {
   @HostBinding('class') get classes(): string {
-    const contextClass = this.context && `pi-menu-entry__context--${this.context}`;
+    const context = this.context();
+    const contextClass = context && `pi-menu-entry__context--${context}`;
     return ['pi-menu-entry', contextClass].join(' ');
   }
 
-  @Input() context: MenuEntryContext = 'parent-menu';
+  readonly context = input<MenuEntryContext>('parent-menu');
 }

libs/ui/src/lib/util/value/directives/value.directive.ts

@@ -1,15 +1,15 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, HostBinding, input } from '@angular/core';
 
 @Directive({ selector: '[pi-value]', })
 export class PiValueDirective {
   @HostBinding('class') get classes(): string | boolean {
-    return ['pi-value', this.value > 0 ? 'is-positive' : 'is-negative'].join(' ');
+    return ['pi-value', this.value() > 0 ? 'is-positive' : 'is-negative'].join(' ');
   }
 
-  @Input() value!: number;
+  readonly value = input.required<number>();
 
   checkValue(): string {
-    if (this.value > 0) {
+    if (this.value() > 0) {
       return 'is-positive';
     } else {
       return 'is-negative';