refactor: @input() transform option of @angular/[email protected] instead of @angular/cdk coerce functions (partial)

Author: xidedix

projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -8,14 +9,14 @@ import {
   HostBinding,
   Input,
   NgZone,
+  numberAttribute,
   OnChanges,
   OnDestroy,
   Output,
   Renderer2,
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
 
 import merge from 'lodash-es/merge';
 
@@ -36,53 +37,22 @@ let nextId = 0;
 })
 export class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {
 
-  static ngAcceptInputType_height: NumberInput;
-  static ngAcceptInputType_width: NumberInput;
-  static ngAcceptInputType_redraw: BooleanInput;
-
   @Input() customTooltips = true;
   @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];
 
   @HostBinding('style.height.px')
-  @Input()
-  set height(value: number | undefined) {
-    this._height = coerceNumberProperty(value);
-  }
-
-  get height() {
-    return this._height;
-  }
-
-  private _height: number | undefined;
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) height?: string | number;
 
   @Input() id = `c-chartjs-${nextId++}`;
   @Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];
   @Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];
 
-  @Input()
-  set redraw(value: boolean) {
-    this._redraw = coerceBooleanProperty(value);
-  }
-
-  get redraw(): boolean {
-    return this._redraw;
-  }
-
-  private _redraw = false;
+  @Input({ transform: booleanAttribute }) redraw: string | boolean = false;
 
   @Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;
 
   @HostBinding('style.width.px')
-  @Input()
-  set width(value: number | undefined) {
-    this._width = coerceNumberProperty(value);
-  }
-
-  get width() {
-    return this._width;
-  }
-
-  private _width: number | undefined;
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) width?: string | number;
 
   @Input() wrapper = true;
 

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  booleanAttribute,
   Component,
   ContentChildren,
   HostBinding,
@@ -9,7 +10,6 @@ import {
   QueryList
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 import { CollapseDirective } from '../../collapse';
 import { TemplateIdDirective } from '../../shared';
@@ -32,45 +32,35 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
     private accordionService: AccordionService
   ) { }
 
-  static ngAcceptInputType_visible: BooleanInput;
-  contentId = `accordion-item-${nextId++}`;
-  itemContext = { $implicit: this.visible };
-  templates: any = {};
-  @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
-
-  private _visible: boolean = false;
-
-  get visible() {
-    return this._visible;
-  }
-
   /**
    * Toggle an accordion item programmatically
    * @type boolean
    * @default false
    */
-  @Input()
-  set visible(value: boolean) {
-    this._visible = coerceBooleanProperty(value);
-  }
-
-  get open() {
-    return this.visible;
-  }
+  @Input({ transform: booleanAttribute }) visible: string | boolean = false;
 
   @Input()
   set open(value: boolean) {
     console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.');
     this.visible = value || this.visible;
   }
 
+  get open() {
+    return <boolean>this.visible;
+  }
+
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'accordion-item': true
     };
   }
 
+  contentId = `accordion-item-${nextId++}`;
+  itemContext = { $implicit: <boolean>this.visible };
+  templates: any = {};
+  @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
+
   ngOnInit(): void {
     this.accordionService.addItem(this);
   }

projects/coreui-angular/src/lib/button/button-close.directive.ts

@@ -1,5 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
 import { ButtonDirective } from './button.directive';
 
 @Directive({
@@ -8,19 +7,11 @@ import { ButtonDirective } from './button.directive';
 })
 export class ButtonCloseDirective extends ButtonDirective {
 
-  static ngAcceptInputType_white: BooleanInput;
-  private _white = false;
   /**
    * Change the default color to white.
    * @type boolean
    */
-  @Input()
-  get white(): boolean {
-    return this._white;
-  }
-  set white(value: boolean) {
-    this._white = coerceBooleanProperty(value);
-  }
+  @Input({ transform: booleanAttribute }) white: string | boolean = false;
 
   @HostBinding('class')
   override get hostClasses(): any {
@@ -30,7 +21,7 @@ export class ButtonCloseDirective extends ButtonDirective {
       'btn-close-white': this.white,
       [`btn-${this.size}`]: !!this.size,
       disabled: this.disabled,
-      active: this.active,
+      active: this.active
     };
   }
 }

projects/coreui-angular/src/lib/button/button.directive.ts

@@ -1,5 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import {  coerceBooleanProperty,   BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
 
 import { ButtonType, Colors, Shapes } from '../coreui.types';
 
@@ -10,24 +9,11 @@ import { ButtonType, Colors, Shapes } from '../coreui.types';
 })
 export class ButtonDirective {
 
-  constructor() {}
-
-  static ngAcceptInputType_active: BooleanInput;
-  private _active = false;
-  static ngAcceptInputType_disabled: BooleanInput;
-  private _disabled = false;
-
   /**
    * Toggle the active state for the component. [docs]
    * @type boolean
    */
-  @Input()
-  get active(): boolean {
-    return this._active;
-  }
-  set active(value: boolean) {
-    this._active = coerceBooleanProperty(value);
-  }
+  @Input({ transform: booleanAttribute }) active: string | boolean = false;
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
@@ -38,29 +24,27 @@ export class ButtonDirective {
    * Toggle the disabled state for the component.
    * @type boolean
    */
-  @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: boolean) {
-    this._disabled = coerceBooleanProperty(value);
-  }
+  @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
+
   /**
    * Select the shape of the component.
    * @type { 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string }
    */
   @Input() shape?: Shapes;
+
   /**
    * Size the component small or large.
    * @type {'sm' | 'lg'}
    */
   @Input() size?: 'sm' | 'lg' | '' = '';
+
   /**
    * Specifies the type of button. Always specify the type attribute for the `<button>` element.
    * Different browsers may use different default types for the `<button>` element.
    */
   @HostBinding('attr.type')
   @Input() type: ButtonType = 'button';
+
   /**
    * Set the button variant to an outlined button or a ghost button.
    * @type {'ghost' | 'outline'}
@@ -82,17 +66,17 @@ export class ButtonDirective {
   }
 
   @HostBinding('attr.aria-disabled')
-  get ariaDisabled () {
+  get ariaDisabled() {
     return this.disabled || null;
   };
 
   @HostBinding('attr.aria-pressed')
   get isActive(): boolean | null {
-    return this.active || null;
+    return <boolean>this.active || null;
   }
 
   @HostBinding('attr.disabled')
-  get attrDisabled () {
+  get attrDisabled() {
     return this.disabled ? '' : null;
   };
 

projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts

@@ -1,6 +1,5 @@
-import { Directive, ElementRef, HostBinding, Input, OnDestroy, OnInit, } from '@angular/core';
+import { booleanAttribute, Directive, ElementRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DropdownService } from '../dropdown.service';
 
 @Directive({
@@ -9,7 +8,6 @@ import { DropdownService } from '../dropdown.service';
   standalone: true
 })
 export class DropdownMenuDirective implements OnInit, OnDestroy {
-  static ngAcceptInputType_dark: BooleanInput;
 
   constructor(
     public elementRef: ElementRef,
@@ -29,15 +27,9 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
 
   /**
    * Sets a darker color scheme to match a dark navbar.
+   * @type boolean
    */
-  @Input()
-  get dark(): boolean {
-    return this._dark;
-  }
-  set dark(value: boolean) {
-    this._dark = coerceBooleanProperty(value);
-  }
-  private _dark = false;
+  @Input({ transform: booleanAttribute }) dark: string | boolean = false;
 
   private dropdownStateSubscription!: Subscription;
 
@@ -47,7 +39,7 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
       'dropdown-menu': true,
       'dropdown-menu-dark': this.dark,
       [`dropdown-menu-${this.alignment}`]: !!this.alignment,
-      show: this.visible,
+      show: this.visible
     };
   }
 
@@ -56,7 +48,7 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
     // workaround for popper position calculate (see also: dropdown.component)
     return {
       visibility: this.visible ? null : '',
-      display: this.visible ? null : '',
+      display: this.visible ? null : ''
     };
   }