refactor(tabs): use @input() transform

Author: xidedix

projects/coreui-angular/src/lib/tabs/tab-content-ref.directive.ts

@@ -1,14 +1,15 @@
 import {
+  booleanAttribute,
   ChangeDetectorRef,
   Directive,
   HostBinding,
   HostListener,
   Input,
+  numberAttribute,
   OnChanges,
   OnDestroy,
   SimpleChanges
 } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
 
 import { TabService } from './tab.service';
@@ -26,7 +27,6 @@ export class TabContentRefDirective implements OnChanges, OnDestroy {
     this.subscribeTabService();
   }
 
-  static ngAcceptInputType_disabled: BooleanInput;
   private tabServiceSubscription!: Subscription;
 
   /**
@@ -38,10 +38,11 @@ export class TabContentRefDirective implements OnChanges, OnDestroy {
   /**
    * Set active state of tab content
    * @type boolean
+   * @default false
    */
-  @Input()
+  @Input({ transform: booleanAttribute })
   set active(value: boolean) {
-    const newValue = coerceBooleanProperty(value);
+    const newValue = value;
     if (this._active !== newValue) {
       this._active = newValue;
       this.changeDetectorRef.detectChanges();
@@ -58,9 +59,9 @@ export class TabContentRefDirective implements OnChanges, OnDestroy {
    * Set disabled state of tab content
    * @type boolean
    */
-  @Input()
+  @Input({ transform: booleanAttribute })
   set disabled(value: boolean) {
-    this._disabled = coerceBooleanProperty(value);
+    this._disabled = value;
   }
 
   get disabled(): boolean {
@@ -73,7 +74,7 @@ export class TabContentRefDirective implements OnChanges, OnDestroy {
    * c-tab-pane index respectively
    * @type number
    */
-  @Input() tabPaneIdx = -1;
+  @Input({ transform: numberAttribute }) tabPaneIdx = -1;
 
   @HostBinding('class')
   get hostClasses() {

projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts

@@ -8,21 +8,21 @@ import {
   EventEmitter,
   HostBinding,
   Input,
+  numberAttribute,
   OnChanges,
   OnDestroy,
   Output,
   QueryList,
   SimpleChanges
 } from '@angular/core';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
 
 import { TabPaneComponent } from '../tab-pane/tab-pane.component';
 import { TabService } from '../tab.service';
 
 @Component({
   selector: 'c-tab-content',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./tab-content.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'cTabContent',
@@ -34,19 +34,21 @@ export class TabContentComponent implements AfterContentChecked, AfterContentIni
    * Set active tabPane index
    * @type number
    */
-  @Input()
+  @Input({ transform: numberAttribute })
   set activeTabPaneIdx(value: number) {
-    const newValue = coerceNumberProperty(value);
+    const newValue = value;
     if (this._activeTabPaneIdx != newValue) {
       this._activeTabPaneIdx = newValue;
       this.activeTabPaneIdxChange.emit(newValue);
       this.changeDetectorRef.markForCheck();
       this.changeDetectorRef.detectChanges();
     }
   };
+
   get activeTabPaneIdx() {
     return this._activeTabPaneIdx;
   }
+
   private _activeTabPaneIdx = -1;
 
   /**
@@ -76,7 +78,7 @@ export class TabContentComponent implements AfterContentChecked, AfterContentIni
   ngAfterContentChecked(): void {
     this.panes?.forEach((tabPane, index) => {
       tabPane.tabContent = this;
-        tabPane.tabPaneIdx = index;
+      tabPane.tabPaneIdx = index;
     });
     this.refreshTabPaneActive(this.activeTabPaneIdx);
     this.tabService.setActiveTabIdx({ tabContent: this, activeIdx: this.activeTabPaneIdx });

projects/coreui-angular/src/lib/tabs/tab-pane/tab-pane.component.ts

@@ -1,14 +1,12 @@
-import { ChangeDetectorRef, Component, HostBinding, OnDestroy } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectorRef, Component, HostBinding, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { TabContentComponent } from '../tab-content/tab-content.component';
 import { ITabContentState, TabService } from '../tab.service';
 
 @Component({
   selector: 'c-tab-pane',
-  template: `
-    <ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./tab-pane.component.scss'],
   exportAs: 'cTabPane',
   standalone: true
@@ -27,7 +25,7 @@ export class TabPaneComponent implements OnDestroy {
   private tabServiceSubscription!: Subscription;
 
   set active(value: boolean) {
-    const newValue = coerceBooleanProperty(value);
+    const newValue = booleanAttribute(value);
     if (this._active !== newValue) {
       this._active = newValue;
       this.changeDetectorRef.markForCheck();