add persistent callout in settings for non-premium users

libs/angular/src/vault/components/spotlight/spotlight.component.html

@@ -3,20 +3,20 @@
 >
   <div class="tw-flex tw-justify-between tw-items-start tw-flex-grow">
     <div>
-      <h2 bitTypography="h4" class="tw-font-semibold !tw-mb-1">{{ title }}</h2>
+      <h2 bitTypography="h4" class="tw-font-semibold !tw-mb-1">{{ title() }}</h2>
       <p
-        *ngIf="subtitle"
+        *ngIf="subtitle()"
         class="tw-text-main tw-mb-0"
         bitTypography="body2"
-        [innerHTML]="subtitle"
+        [innerHTML]="subtitle()"
       ></p>
-      <ng-content *ngIf="!subtitle"></ng-content>
+      <ng-content *ngIf="!subtitle()"></ng-content>
     </div>
     <button
       type="button"
       bitIconButton="bwi-close"
       size="small"
-      *ngIf="!persistent"
+      *ngIf="!persistent()"
       (click)="handleDismiss()"
       class="-tw-me-2"
       [label]="'close' | i18n"
@@ -28,10 +28,10 @@
     bitButton
     type="button"
     buttonType="primary"
-    *ngIf="buttonText"
+    *ngIf="buttonText()"
     (click)="handleButtonClick($event)"
   >
-    {{ buttonText }}
-    <i *ngIf="buttonIcon" [ngClass]="buttonIcon" class="bwi tw-ml-1" aria-hidden="true"></i>
+    {{ buttonText() }}
+    <i *ngIf="buttonIcon()" [ngClass]="buttonIcon()" class="bwi tw-ml-1" aria-hidden="true"></i>
   </button>
 </div>

libs/angular/src/vault/components/spotlight/spotlight.component.ts

@@ -1,43 +1,28 @@
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
 
 import { ButtonModule, IconButtonModule, TypographyModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "bit-spotlight",
   templateUrl: "spotlight.component.html",
   imports: [ButtonModule, CommonModule, IconButtonModule, I18nPipe, TypographyModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SpotlightComponent {
   // The title of the component
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) title: string | null = null;
+  readonly title = input<string | null>(null);
   // The subtitle of the component
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() subtitle?: string | null = null;
+  readonly subtitle = input<string | null>(null);
   // The text to display on the button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() buttonText?: string;
+  readonly buttonText = input<string | null>(null);
   // Wheter the component can be dismissed, if true, the component will not show a close button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() persistent = false;
+  readonly persistent = input(false);
   // Optional icon to display on the button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() buttonIcon: string | null = null;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onDismiss = new EventEmitter<void>();
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onButtonClick = new EventEmitter();
+  readonly buttonIcon = input<string | null>(null);
+  readonly onDismiss = output<void>();
+  readonly onButtonClick = output<MouseEvent>();
 
   handleButtonClick(event: MouseEvent): void {
     this.onButtonClick.emit(event);