[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/menu/menu-trigger-for.directive.ts

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { hasModifierKey } from "@angular/cdk/keycodes";
 import { Overlay, OverlayConfig, OverlayRef } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
@@ -31,9 +29,9 @@ export class MenuTriggerForDirective implements OnDestroy {
 
   readonly role = input("button");
 
-  readonly menu = input<MenuComponent>(undefined, { alias: "bitMenuTriggerFor" });
+  readonly menu = input.required<MenuComponent>({ alias: "bitMenuTriggerFor" });
 
-  private overlayRef: OverlayRef;
+  private overlayRef: OverlayRef | null = null;
   private defaultMenuConfig: OverlayConfig = {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
@@ -52,8 +50,8 @@ export class MenuTriggerForDirective implements OnDestroy {
       .withFlexibleDimensions(false)
       .withPush(true),
   };
-  private closedEventsSub: Subscription;
-  private keyDownEventsSub: Subscription;
+  private closedEventsSub: Subscription | null = null;
+  private keyDownEventsSub: Subscription | null = null;
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,
@@ -78,28 +76,30 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.isOpen = true;
     this.overlayRef = this.overlay.create(this.defaultMenuConfig);
 
-    const templatePortal = new TemplatePortal(menu.templateRef, this.viewContainerRef);
+    const templatePortal = new TemplatePortal(menu.templateRef(), this.viewContainerRef);
     this.overlayRef.attach(templatePortal);
 
-    this.closedEventsSub = this.getClosedEvents().subscribe((event: KeyboardEvent | undefined) => {
-      // Closing the menu is handled in this.destroyMenu, so we want to prevent the escape key
-      // from doing its normal default action, which would otherwise cause a parent component
-      // (like a dialog) or extension window to close
-      if (event?.key === "Escape" && !hasModifierKey(event)) {
-        event.preventDefault();
-      }
+    this.closedEventsSub =
+      this.getClosedEvents()?.subscribe((event: KeyboardEvent | undefined) => {
+        // Closing the menu is handled in this.destroyMenu, so we want to prevent the escape key
+        // from doing its normal default action, which would otherwise cause a parent component
+        // (like a dialog) or extension window to close
+        if (event?.key === "Escape" && !hasModifierKey(event)) {
+          event.preventDefault();
+        }
+
+        if (event?.key && ["Tab", "Escape"].includes(event.key)) {
+          // Required to ensure tab order resumes correctly
+          this.elementRef.nativeElement.focus();
+        }
+        this.destroyMenu();
+      }) ?? null;
 
-      if (["Tab", "Escape"].includes(event?.key)) {
-        // Required to ensure tab order resumes correctly
-        this.elementRef.nativeElement.focus();
-      }
-      this.destroyMenu();
-    });
     if (menu.keyManager) {
       menu.keyManager.setFirstItemActive();
       this.keyDownEventsSub = this.overlayRef
         .keydownEvents()
-        .subscribe((event: KeyboardEvent) => this.menu().keyManager.onKeydown(event));
+        .subscribe((event: KeyboardEvent) => this.menu().keyManager?.onKeydown(event));
     }
   }
 
@@ -113,7 +113,10 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.menu().closed.emit();
   }
 
-  private getClosedEvents(): Observable<any> {
+  private getClosedEvents(): Observable<any> | null {
+    if (!this.overlayRef) {
+      return null;
+    }
     const detachments = this.overlayRef.detachments();
     const escKey = this.overlayRef.keydownEvents().pipe(
       filter((event: KeyboardEvent) => {

libs/components/src/menu/menu.component.ts

@@ -1,16 +1,13 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { FocusKeyManager, CdkTrapFocus } from "@angular/cdk/a11y";
 import {
   Component,
   Output,
   TemplateRef,
-  ViewChild,
   EventEmitter,
-  ContentChildren,
-  QueryList,
   AfterContentInit,
   input,
+  viewChild,
+  contentChildren,
 } from "@angular/core";
 
 import { MenuItemDirective } from "./menu-item.directive";
@@ -22,10 +19,9 @@ import { MenuItemDirective } from "./menu-item.directive";
   imports: [CdkTrapFocus],
 })
 export class MenuComponent implements AfterContentInit {
-  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+  readonly templateRef = viewChild.required(TemplateRef);
   @Output() closed = new EventEmitter<void>();
-  @ContentChildren(MenuItemDirective, { descendants: true })
-  menuItems: QueryList<MenuItemDirective>;
+  readonly menuItems = contentChildren(MenuItemDirective, { descendants: true });
   keyManager?: FocusKeyManager<MenuItemDirective>;
 
   readonly ariaRole = input<"menu" | "dialog">("menu");
@@ -34,9 +30,9 @@ export class MenuComponent implements AfterContentInit {
 
   ngAfterContentInit() {
     if (this.ariaRole() === "menu") {
-      this.keyManager = new FocusKeyManager(this.menuItems)
+      this.keyManager = new FocusKeyManager(this.menuItems())
         .withWrap()
-        .skipPredicate((item) => item.disabled);
+        .skipPredicate((item) => !!item.disabled);
     }
   }
 }

libs/components/src/menu/menu.stories.ts

@@ -46,7 +46,7 @@ export const OpenMenu: Story = {
 
       <div class="tw-h-40">
         <div class="cdk-overlay-pane bit-menu-panel">
-          <ng-container *ngTemplateOutlet="myMenu.templateRef"></ng-container>
+          <ng-container *ngTemplateOutlet="myMenu.templateRef()"></ng-container>
         </div>
       </div>
       `,