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

libs/components/src/popover/popover-trigger-for.directive.ts

@@ -6,11 +6,11 @@ import {
   AfterViewInit,
   Directive,
   ElementRef,
-  HostBinding,
   HostListener,
-  Input,
   OnDestroy,
   ViewContainerRef,
+  input,
+  model,
 } from "@angular/core";
 import { Observable, Subscription, filter, mergeWith } from "rxjs";
 
@@ -20,27 +20,26 @@ import { PopoverComponent } from "./popover.component";
 @Directive({
   selector: "[bitPopoverTriggerFor]",
   exportAs: "popoverTrigger",
+  host: {
+    "[attr.aria-expanded]": "this.popoverOpen()",
+  },
 })
 export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
-  @Input()
-  @HostBinding("attr.aria-expanded")
-  popoverOpen = false;
+  readonly popoverOpen = model(false);
 
-  @Input("bitPopoverTriggerFor")
-  popover: PopoverComponent;
+  readonly popover = input<PopoverComponent>(undefined, { alias: "bitPopoverTriggerFor" });
 
-  @Input("position")
-  position: string;
+  readonly position = input<string>();
 
   private overlayRef: OverlayRef;
   private closedEventsSub: Subscription;
 
   get positions() {
-    if (!this.position) {
+    if (!this.position()) {
       return defaultPositions;
     }
 
-    const preferredPosition = defaultPositions.find((position) => position.id === this.position);
+    const preferredPosition = defaultPositions.find((position) => position.id === this.position());
 
     if (preferredPosition) {
       return [preferredPosition, ...defaultPositions];
@@ -72,7 +71,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
 
   @HostListener("click")
   togglePopover() {
-    if (this.popoverOpen) {
+    if (this.popoverOpen()) {
       this.closePopover();
     } else {
       this.openPopover();
@@ -80,10 +79,10 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
   }
 
   private openPopover() {
-    this.popoverOpen = true;
+    this.popoverOpen.set(true);
     this.overlayRef = this.overlay.create(this.defaultPopoverConfig);
 
-    const templatePortal = new TemplatePortal(this.popover.templateRef, this.viewContainerRef);
+    const templatePortal = new TemplatePortal(this.popover().templateRef, this.viewContainerRef);
 
     this.overlayRef.attach(templatePortal);
     this.closedEventsSub = this.getClosedEvents().subscribe(() => {
@@ -97,17 +96,17 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
       .keydownEvents()
       .pipe(filter((event: KeyboardEvent) => event.key === "Escape"));
     const backdrop = this.overlayRef.backdropClick();
-    const popoverClosed = this.popover.closed;
+    const popoverClosed = this.popover().closed;
 
     return detachments.pipe(mergeWith(escKey, backdrop, popoverClosed));
   }
 
   private destroyPopover() {
-    if (this.overlayRef == null || !this.popoverOpen) {
+    if (this.overlayRef == null || !this.popoverOpen()) {
       return;
     }
 
-    this.popoverOpen = false;
+    this.popoverOpen.set(false);
     this.disposeAll();
   }
 
@@ -117,7 +116,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (this.popoverOpen) {
+    if (this.popoverOpen()) {
       this.openPopover();
     }
   }

libs/components/src/popover/popover.component.html

@@ -6,7 +6,7 @@
       >
         <div class="tw-mb-1 tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
           <h2 bitTypography="h5" class="tw-mt-1 tw-font-semibold">
-            {{ title }}
+            {{ title() }}
           </h2>
           <button
             type="button"

libs/components/src/popover/popover.component.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { A11yModule } from "@angular/cdk/a11y";
-import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
+import { Component, EventEmitter, Output, TemplateRef, ViewChild, input } from "@angular/core";
 
 import { IconButtonModule } from "../icon-button/icon-button.module";
 import { SharedModule } from "../shared/shared.module";
@@ -15,6 +15,6 @@ import { TypographyModule } from "../typography";
 })
 export class PopoverComponent {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
-  @Input() title = "";
+  readonly title = input("");
   @Output() closed = new EventEmitter();
 }