[CL-707] Migrate CL codebase to signals (#15340)

libs/components/src/table/row.directive.ts

@@ -1,13 +1,13 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, input } from "@angular/core";
 
 @Directive({
   selector: "tr[bitRow]",
 })
 export class RowDirective {
-  @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "middle";
+  readonly alignContent = input<"top" | "middle" | "bottom" | "baseline">("middle");
 
   get alignmentClass(): string {
-    switch (this.alignContent) {
+    switch (this.alignContent()) {
       case "top":
         return "tw-align-top";
       case "middle":

libs/components/src/table/sortable.component.ts

@@ -2,7 +2,7 @@
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { NgClass } from "@angular/common";
-import { Component, HostBinding, Input, OnInit } from "@angular/core";
+import { Component, HostBinding, OnInit, input } from "@angular/core";
 
 import type { SortDirection, SortFn } from "./table-data-source";
 import { TableComponent } from "./table.component";
@@ -26,19 +26,17 @@ export class SortableComponent implements OnInit {
   /**
    * Mark the column as sortable and specify the key to sort by
    */
-  @Input() bitSortable: string;
+  readonly bitSortable = input<string>();
 
-  private _default: SortDirection | boolean = false;
-  /**
-   * Mark the column as the default sort column
-   */
-  @Input() set default(value: SortDirection | boolean | "") {
-    if (value === "desc" || value === "asc") {
-      this._default = value;
-    } else {
-      this._default = coerceBooleanProperty(value) ? "asc" : false;
-    }
-  }
+  readonly default = input(false, {
+    transform: (value: SortDirection | boolean | "") => {
+      if (value === "desc" || value === "asc") {
+        return value as SortDirection;
+      } else {
+        return coerceBooleanProperty(value) ? ("asc" as SortDirection) : false;
+      }
+    },
+  });
 
   /**
    * Custom sorting function
@@ -51,12 +49,12 @@ export class SortableComponent implements OnInit {
    *  return direction === 'asc' ? result : -result;
    * }
    */
-  @Input() fn: SortFn;
+  readonly fn = input<SortFn>();
 
   constructor(private table: TableComponent) {}
 
   ngOnInit(): void {
-    if (this._default && !this.isActive) {
+    if (this.default() && !this.isActive) {
       this.setActive();
     }
   }
@@ -69,28 +67,29 @@ export class SortableComponent implements OnInit {
   }
 
   protected setActive() {
-    if (this.table.dataSource) {
-      const defaultDirection = this._default === "desc" ? "desc" : "asc";
+    const dataSource = this.table.dataSource();
+    if (dataSource) {
+      const defaultDirection = this.default() === "desc" ? "desc" : "asc";
       const direction = this.isActive
         ? this.direction === "asc"
           ? "desc"
           : "asc"
         : defaultDirection;
 
-      this.table.dataSource.sort = {
-        column: this.bitSortable,
+      dataSource.sort = {
+        column: this.bitSortable(),
         direction: direction,
-        fn: this.fn,
+        fn: this.fn(),
       };
     }
   }
 
   private get sort() {
-    return this.table.dataSource?.sort;
+    return this.table.dataSource()?.sort;
   }
 
   get isActive() {
-    return this.sort?.column === this.bitSortable;
+    return this.sort?.column === this.bitSortable();
   }
 
   get direction() {

libs/components/src/table/table-scroll.component.html

@@ -1,6 +1,6 @@
 <cdk-virtual-scroll-viewport
   bitScrollLayout
-  [itemSize]="rowSize"
+  [itemSize]="rowSize()"
   [ngStyle]="{ paddingBottom: headerHeight + 'px' }"
 >
   <table [ngClass]="tableClass">
@@ -12,7 +12,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *cdkVirtualFor="let r of rows$; trackBy: trackBy; templateCacheSize: 0" bitRow>
+      <tr *cdkVirtualFor="let r of rows$; trackBy: trackBy(); templateCacheSize: 0" bitRow>
         <ng-container *ngTemplateOutlet="rowDef.template; context: { $implicit: r }"></ng-container>
       </tr>
     </tbody>

libs/components/src/table/table-scroll.component.ts

@@ -10,7 +10,6 @@ import {
   AfterContentChecked,
   Component,
   ContentChild,
-  Input,
   OnDestroy,
   TemplateRef,
   Directive,
@@ -18,6 +17,7 @@ import {
   AfterViewInit,
   ElementRef,
   TrackByFunction,
+  input,
 } from "@angular/core";
 
 import { ScrollLayoutDirective } from "../layout";
@@ -64,10 +64,10 @@ export class TableScrollComponent
   implements AfterContentChecked, AfterViewInit, OnDestroy
 {
   /** The size of the rows in the list (in pixels). */
-  @Input({ required: true }) rowSize: number;
+  readonly rowSize = input.required<number>();
 
   /** Optional trackBy function. */
-  @Input() trackBy: TrackByFunction<any> | undefined;
+  readonly trackBy = input<TrackByFunction<any> | undefined>();
 
   @ContentChild(BitRowDef) protected rowDef: BitRowDef;
 

libs/components/src/table/table.component.ts

@@ -7,9 +7,9 @@ import {
   Component,
   ContentChild,
   Directive,
-  Input,
   OnDestroy,
   TemplateRef,
+  input,
 } from "@angular/core";
 import { Observable } from "rxjs";
 
@@ -29,8 +29,8 @@ export class TableBodyDirective {
   imports: [CommonModule],
 })
 export class TableComponent implements OnDestroy, AfterContentChecked {
-  @Input() dataSource: TableDataSource<any>;
-  @Input() layout: "auto" | "fixed" = "auto";
+  readonly dataSource = input<TableDataSource<any>>();
+  readonly layout = input<"auto" | "fixed">("auto");
 
   @ContentChild(TableBodyDirective) templateVariable: TableBodyDirective;
 
@@ -45,22 +45,24 @@ export class TableComponent implements OnDestroy, AfterContentChecked {
       "tw-text-main",
       "tw-border-collapse",
       "tw-text-start",
-      this.layout === "auto" ? "tw-table-auto" : "tw-table-fixed",
+      this.layout() === "auto" ? "tw-table-auto" : "tw-table-fixed",
     ];
   }
 
   ngAfterContentChecked(): void {
-    if (!this._initialized && isDataSource(this.dataSource)) {
+    const dataSource = this.dataSource();
+    if (!this._initialized && isDataSource(dataSource)) {
       this._initialized = true;
 
-      const dataStream = this.dataSource.connect();
+      const dataStream = dataSource.connect();
       this.rows$ = dataStream;
     }
   }
 
   ngOnDestroy(): void {
-    if (isDataSource(this.dataSource)) {
-      this.dataSource.disconnect();
+    const dataSource = this.dataSource();
+    if (isDataSource(dataSource)) {
+      dataSource.disconnect();
     }
   }
 }