Vault - Prefer signal & change detection (#16947)

libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts

@@ -47,6 +47,8 @@ export type AddEditFolderDialogData = {
   editFolderConfig?: { folder: FolderView };
 };
 
+// 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: "vault-add-edit-folder-dialog",
   templateUrl: "./add-edit-folder-dialog.component.html",
@@ -62,7 +64,11 @@ export type AddEditFolderDialogData = {
   ],
 })
 export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild(BitSubmitDirective) private bitSubmit?: BitSubmitDirective;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("submitBtn") private submitBtn?: ButtonComponent;
 
   folder: FolderView = new FolderView();

libs/vault/src/components/assign-collections.component.ts

@@ -96,6 +96,8 @@ export type CollectionAssignmentResult = UnionOfValues<typeof CollectionAssignme
 
 const MY_VAULT_ID = "MyVault";
 
+// 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: "assign-collections",
   templateUrl: "assign-collections.component.html",
@@ -112,19 +114,29 @@ const MY_VAULT_ID = "MyVault";
   ],
 })
 export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewInit {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild(BitSubmitDirective)
   private bitSubmit: BitSubmitDirective;
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() params: CollectionAssignmentParams;
 
   /**
    * Submit button instance that will be disabled or marked as loading when the form is submitting.
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() submitBtn?: ButtonComponent;
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output()
   editableItemCountChange = new EventEmitter<number>();
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() onCollectionAssign = new EventEmitter<CollectionAssignmentResult>();
 
   formGroup = this.formBuilder.group({

libs/vault/src/components/can-delete-cipher.directive.ts

@@ -13,6 +13,8 @@ import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cip
 export class CanDeleteCipherDirective implements OnDestroy {
   private destroy$ = new Subject<void>();
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input("appCanDeleteCipher") set cipher(cipher: CipherView) {
     this.viewContainer.clear();
 

libs/vault/src/components/carousel/carousel-button/carousel-button.component.ts

@@ -7,6 +7,8 @@ import { IconModule } from "@bitwarden/components";
 
 import { VaultCarouselSlideComponent } from "../carousel-slide/carousel-slide.component";
 
+// 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: "vault-carousel-button",
   templateUrl: "carousel-button.component.html",
@@ -14,15 +16,23 @@ import { VaultCarouselSlideComponent } from "../carousel-slide/carousel-slide.co
 })
 export class VaultCarouselButtonComponent implements FocusableOption {
   /** Slide component that is associated with the individual button */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) slide!: VaultCarouselSlideComponent;
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("btn", { static: true }) button!: ElementRef<HTMLButtonElement>;
   protected CarouselIcon = CarouselIcon;
 
   /** When set to true the button is shown in an active state. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) isActive!: boolean;
 
   /** Emits when the button is clicked. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() onClick = new EventEmitter<void>();
 
   /** Focuses the underlying button element. */

libs/vault/src/components/carousel/carousel-content/carousel-content.component.spec.ts

@@ -5,6 +5,8 @@ import { By } from "@angular/platform-browser";
 
 import { VaultCarouselContentComponent } from "./carousel-content.component";
 
+// 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: "app-test-template-ref",
   imports: [VaultCarouselContentComponent],
@@ -17,6 +19,8 @@ import { VaultCarouselContentComponent } from "./carousel-content.component";
 })
 class TestTemplateRefComponent implements OnInit {
   // Test template content by creating a wrapping component and then pass a portal to the carousel content component.
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("template", { static: true }) template!: TemplateRef<any>;
   portal!: TemplatePortal;
 

libs/vault/src/components/carousel/carousel-content/carousel-content.component.ts

@@ -1,6 +1,8 @@
 import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal";
 import { Component, Input } from "@angular/core";
 
+// 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: "vault-carousel-content",
   templateUrl: "carousel-content.component.html",
@@ -8,5 +10,7 @@ import { Component, Input } from "@angular/core";
 })
 export class VaultCarouselContentComponent {
   /** Content to be displayed for the carousel. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) content!: TemplatePortal;
 }

libs/vault/src/components/carousel/carousel-slide/carousel-slide.component.spec.ts

@@ -5,6 +5,8 @@ import { By } from "@angular/platform-browser";
 
 import { VaultCarouselSlideComponent } from "./carousel-slide.component";
 
+// 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: "app-test-carousel-slide",
   imports: [VaultCarouselSlideComponent],

libs/vault/src/components/carousel/carousel-slide/carousel-slide.component.ts

@@ -11,6 +11,8 @@ import {
   ViewContainerRef,
 } from "@angular/core";
 
+// 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: "vault-carousel-slide",
   templateUrl: "./carousel-slide.component.html",
@@ -18,7 +20,11 @@ import {
 })
 export class VaultCarouselSlideComponent implements OnInit {
   /** `aria-label` that is assigned to the carousel toggle. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) label!: string;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ transform: booleanAttribute }) disablePadding = false;
 
   /**
@@ -29,8 +35,12 @@ export class VaultCarouselSlideComponent implements OnInit {
    *
    * @remarks See note 4 of https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ transform: coerceBooleanProperty }) noFocusableChildren?: true;
 
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild(TemplateRef, { static: true }) implicitContent!: TemplateRef<unknown>;
 
   private _contentPortal: TemplatePortal | null = null;

libs/vault/src/components/carousel/carousel.component.spec.ts

@@ -7,6 +7,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { VaultCarouselSlideComponent } from "./carousel-slide/carousel-slide.component";
 import { VaultCarouselComponent } from "./carousel.component";
 
+// 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: "app-test-carousel-slide",
   imports: [VaultCarouselComponent, VaultCarouselSlideComponent],

libs/vault/src/components/carousel/carousel.component.ts

@@ -28,6 +28,8 @@ import { VaultCarouselButtonComponent } from "./carousel-button/carousel-button.
 import { VaultCarouselContentComponent } from "./carousel-content/carousel-content.component";
 import { VaultCarouselSlideComponent } from "./carousel-slide/carousel-slide.component";
 
+// 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: "vault-carousel",
   templateUrl: "./carousel.component.html",
@@ -50,30 +52,46 @@ export class VaultCarouselComponent implements AfterViewInit {
    * @remarks
    * The label should not include the word "carousel", `aria-roledescription="carousel"` is already included.
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) label = "";
 
   /**
    * Emits the index of the newly selected slide.
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() slideChange = new EventEmitter<number>();
 
   /** All slides within the carousel. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ContentChildren(VaultCarouselSlideComponent) slides!: QueryList<VaultCarouselSlideComponent>;
 
   /** All buttons that control the carousel */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChildren(VaultCarouselButtonComponent)
   carouselButtons!: QueryList<VaultCarouselButtonComponent>;
 
   /** Wrapping container for the carousel content and buttons */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("container") carouselContainer!: ElementRef<HTMLElement>;
 
   /** Container for the carousel buttons */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("carouselButtonWrapper") carouselButtonWrapper!: ElementRef<HTMLDivElement>;
 
   /** Temporary container containing `tempSlideOutlet` */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("tempSlideContainer") tempSlideContainer!: ElementRef<HTMLDivElement>;
 
   /** Outlet to temporary render each slide within */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild(CdkPortalOutlet) tempSlideOutlet!: CdkPortalOutlet;
 
   /** The currently selected index of the carousel. */

libs/vault/src/components/copy-cipher-field.directive.ts

@@ -30,13 +30,18 @@ import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
   selector: "[appCopyField]",
 })
 export class CopyCipherFieldDirective implements OnChanges {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({
     alias: "appCopyField",
     required: true,
   })
   action!: Exclude<CopyAction, "hiddenField">;
 
-  @Input({ required: true }) cipher!: CipherViewLike;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input({ required: true })
+  cipher!: CipherViewLike;
 
   constructor(
     private copyCipherFieldService: CopyCipherFieldService,

libs/vault/src/components/dark-image-source.directive.ts

@@ -40,7 +40,7 @@ export class DarkImageSourceDirective implements OnInit {
   /**
    * The image source to use when the dark theme is applied.
    */
-  darkImgSrc = input.required<string>({ alias: "appDarkImgSrc" });
+  readonly darkImgSrc = input.required<string>({ alias: "appDarkImgSrc" });
 
   @HostBinding("attr.src") src: string | undefined;
 

libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts

@@ -19,6 +19,8 @@ export type DecryptionFailureDialogParams = {
   cipherIds: CipherId[];
 };
 
+// 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: "vault-decryption-failure-dialog",
   templateUrl: "./decryption-failure-dialog.component.html",

libs/vault/src/components/download-attachment/download-attachment.component.ts

@@ -17,6 +17,8 @@ import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.v
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { AsyncActionsModule, IconButtonModule, ToastService } from "@bitwarden/components";
 
+// 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: "app-download-attachment",
   templateUrl: "./download-attachment.component.html",
@@ -24,18 +26,28 @@ import { AsyncActionsModule, IconButtonModule, ToastService } from "@bitwarden/c
 })
 export class DownloadAttachmentComponent {
   /** Attachment to download */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) attachment: AttachmentView;
 
   /** The cipher associated with the attachment */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) cipher: CipherView;
 
   // When in view mode, we will want to check for the master password reprompt
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() checkPwReprompt?: boolean = false;
 
   // Required for fetching attachment data when viewed from cipher via emergency access
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() emergencyAccessId?: EmergencyAccessId;
 
   /** When owners/admins can mange all items and when accessing from the admin console, use the admin endpoint */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() admin?: boolean = false;
 
   constructor(

libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts

@@ -9,15 +9,25 @@ import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-ite
 import { ButtonModule, MenuModule } 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: "vault-new-cipher-menu",
   templateUrl: "new-cipher-menu.component.html",
   imports: [ButtonModule, CommonModule, MenuModule, I18nPipe, JslibModule],
 })
 export class NewCipherMenuComponent {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   canCreateCipher = input(false);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   canCreateFolder = input(false);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   canCreateCollection = input(false);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   canCreateSshKey = input(false);
   folderAdded = output();
   collectionAdded = output();

libs/vault/src/components/org-icon.directive.ts

@@ -8,7 +8,11 @@ export type OrgIconSize = "default" | "small" | "large";
   selector: "[appOrgIcon]",
 })
 export class OrgIconDirective {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) tierType!: ProductTierType;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() size?: OrgIconSize = "default";
 
   constructor(

libs/vault/src/components/password-history-view/password-history-view.component.ts

@@ -8,6 +8,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordHistoryView } from "@bitwarden/common/vault/models/view/password-history.view";
 import { ItemModule, ColorPasswordModule, IconButtonModule } from "@bitwarden/components";
 
+// 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: "vault-password-history-view",
   templateUrl: "./password-history-view.component.html",
@@ -17,6 +19,8 @@ export class PasswordHistoryViewComponent implements OnInit {
   /**
    * Optional cipher view. When included `cipherId` is ignored.
    */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) cipher: CipherView;
 
   /** The password history for the cipher. */

libs/vault/src/components/password-history/password-history.component.ts

@@ -26,6 +26,8 @@ export interface ViewPasswordHistoryDialogParams {
 /**
  * A dialog component that displays the password history for a cipher.
  */
+// 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: "app-vault-password-history",
   templateUrl: "password-history.component.html",

libs/vault/src/components/password-reprompt.component.ts

@@ -22,6 +22,8 @@ import { KeyService } from "@bitwarden/key-management";
  * Used to verify the user's Master Password for the "Master Password Re-prompt" feature only.
  * See UserVerificationComponent for any other situation where you need to verify the user's identity.
  */
+// 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: "vault-password-reprompt",
   imports: [

libs/vault/src/components/permit-cipher-details-popover/permit-cipher-details-popover.component.ts

@@ -4,6 +4,8 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { LinkModule, PopoverModule } from "@bitwarden/components";
 
+// 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: "vault-permit-cipher-details-popover",
   templateUrl: "./permit-cipher-details-popover.component.html",

libs/vault/src/components/totp-countdown/totp-countdown.component.ts

@@ -15,13 +15,19 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { TotpInfo } from "@bitwarden/common/vault/services/totp.service";
 import { TypographyModule } from "@bitwarden/components";
 
+// 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: "[bitTotpCountdown]",
   templateUrl: "totp-countdown.component.html",
   imports: [CommonModule, TypographyModule],
 })
 export class BitTotpCountdownComponent implements OnInit, OnChanges {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) cipher!: CipherView;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() sendCopyCode = new EventEmitter();
 
   /**