[PM-15847] libs/components strict migration (#15738)

This PR migrates `libs/components` to use strict TypeScript.

- Remove `@ts-strict-ignore` from each file in `libs/components` and resolved any new compilation errors
- Converted ViewChild and ContentChild decorators to use the new signal-based queries using the [Angular signal queries migration](https://angular.dev/reference/migrations/signal-queries)
  - Made view/content children `required` where appropriate, eliminating the need for additional null checking. This helped simplify the strict migration.

---

Co-authored-by: Vicki League <vleague@bitwarden.com>

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

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { NgClass } from "@angular/common";
 import { Component, HostBinding, OnInit, input } from "@angular/core";
@@ -26,7 +24,7 @@ export class SortableComponent implements OnInit {
   /**
    * Mark the column as sortable and specify the key to sort by
    */
-  readonly bitSortable = input<string>();
+  readonly bitSortable = input.required<string>();
 
   readonly default = input(false, {
     transform: (value: SortDirection | boolean | "") => {
@@ -63,7 +61,7 @@ export class SortableComponent implements OnInit {
     if (!this.isActive) {
       return undefined;
     }
-    return this.sort.direction === "asc" ? "ascending" : "descending";
+    return this.sort?.direction === "asc" ? "ascending" : "descending";
   }
 
   protected setActive() {

libs/components/src/table/table-data-source.ts

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { _isNumberValue } from "@angular/cdk/coercion";
 import { DataSource } from "@angular/cdk/collections";
 import { BehaviorSubject, combineLatest, map, Observable, Subscription } from "rxjs";
@@ -19,7 +17,7 @@ export type FilterFn<T> = (data: T) => boolean;
 export class TableDataSource<T> extends DataSource<T> {
   private readonly _data: BehaviorSubject<T[]>;
   private readonly _sort: BehaviorSubject<Sort>;
-  private readonly _filter = new BehaviorSubject<string | FilterFn<T>>(null);
+  private readonly _filter = new BehaviorSubject<string | FilterFn<T>>(() => true);
   private readonly _renderData = new BehaviorSubject<T[]>([]);
   private _renderChangesSubscription: Subscription | null = null;
 
@@ -29,12 +27,12 @@ export class TableDataSource<T> extends DataSource<T> {
    * For example, a 'selectAll()' function would likely want to select the set of filtered data
    * shown to the user rather than all the data.
    */
-  filteredData: T[];
+  filteredData?: T[];
 
   constructor() {
     super();
-    this._data = new BehaviorSubject([]);
-    this._sort = new BehaviorSubject({ direction: "asc" });
+    this._data = new BehaviorSubject([] as T[]);
+    this._sort = new BehaviorSubject<Sort>({ direction: "asc" } as Sort);
   }
 
   get data() {

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

@@ -13,7 +13,9 @@
     </thead>
     <tbody>
       <tr *cdkVirtualFor="let r of rows$; trackBy: trackBy(); templateCacheSize: 0" bitRow>
-        <ng-container *ngTemplateOutlet="rowDef.template; context: { $implicit: r }"></ng-container>
+        <ng-container
+          *ngTemplateOutlet="rowDef().template; context: { $implicit: r }"
+        ></ng-container>
       </tr>
     </tbody>
   </table>

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

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import {
   CdkVirtualScrollViewport,
   CdkFixedSizeVirtualScroll,
@@ -9,7 +7,6 @@ import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   Component,
-  ContentChild,
   OnDestroy,
   TemplateRef,
   Directive,
@@ -18,6 +15,7 @@ import {
   ElementRef,
   TrackByFunction,
   input,
+  contentChild,
 } from "@angular/core";
 
 import { ScrollLayoutDirective } from "../layout";
@@ -69,7 +67,7 @@ export class TableScrollComponent
   /** Optional trackBy function. */
   readonly trackBy = input<TrackByFunction<any> | undefined>();
 
-  @ContentChild(BitRowDef) protected rowDef: BitRowDef;
+  protected readonly rowDef = contentChild(BitRowDef);
 
   /**
    * Height of the thead element (in pixels).
@@ -81,7 +79,7 @@ export class TableScrollComponent
   /**
    * Observer for table header, applies padding on resize.
    */
-  private headerObserver: ResizeObserver;
+  private headerObserver?: ResizeObserver;
 
   constructor(
     private zone: NgZone,

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

@@ -6,7 +6,7 @@
   </thead>
   <tbody>
     <ng-container
-      *ngTemplateOutlet="templateVariable.template; context: { $implicit: rows$ }"
+      *ngTemplateOutlet="templateVariable().template; context: { $implicit: rows$ }"
     ></ng-container>
   </tbody>
 </table>

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

@@ -1,15 +1,13 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { isDataSource } from "@angular/cdk/collections";
 import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   Component,
-  ContentChild,
   Directive,
   OnDestroy,
   TemplateRef,
   input,
+  contentChild,
 } from "@angular/core";
 import { Observable } from "rxjs";
 
@@ -32,9 +30,9 @@ export class TableComponent implements OnDestroy, AfterContentChecked {
   readonly dataSource = input<TableDataSource<any>>();
   readonly layout = input<"auto" | "fixed">("auto");
 
-  @ContentChild(TableBodyDirective) templateVariable: TableBodyDirective;
+  readonly templateVariable = contentChild(TableBodyDirective);
 
-  protected rows$: Observable<any[]>;
+  protected rows$?: Observable<any[]>;
 
   private _initialized = false;