UIF - Prefer signal & change detection (#16940)

libs/components/src/tabs/shared/tab-header.component.ts

@@ -3,6 +3,8 @@ import { Component } from "@angular/core";
 /**
  * Component used for styling the tab header/background for both content and navigation tabs
  */
+// 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-tab-header",
   host: {

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -13,6 +13,8 @@ export class TabListItemDirective implements FocusableOption {
   // TODO: Skipped for signal migration because:
   //  This input overrides a field from a superclass, while the superclass field
   //  is not migrated.
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() disabled = false;
 
   @HostBinding("attr.disabled")

libs/components/src/tabs/tab-group/tab-body.component.ts

@@ -1,6 +1,8 @@
 import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal";
 import { Component, effect, HostBinding, 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: "bit-tab-body",
   templateUrl: "tab-body.component.html",

libs/components/src/tabs/tab-group/tab-group.component.ts

@@ -27,6 +27,8 @@ import { TabComponent } from "./tab.component";
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
 
+// 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-tab-group",
   templateUrl: "./tab-group.component.html",
@@ -57,14 +59,16 @@ export class TabGroupComponent implements AfterContentChecked, AfterViewInit {
   readonly preserveContent = input(false);
 
   /** Error if no `TabComponent` is supplied. (`contentChildren`, used to query for all the tabs, doesn't support `required`) */
-  private _tab = contentChild.required(TabComponent);
+  private readonly _tab = contentChild.required(TabComponent);
 
-  protected tabs = contentChildren(TabComponent);
+  protected readonly tabs = contentChildren(TabComponent);
   readonly tabLabels = viewChildren(TabListItemDirective);
 
   /** The index of the active tab. */
   // TODO: Skipped for signal migration because:
   //  Accessor inputs cannot be migrated as they are too complex.
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   get selectedIndex(): number | null {
     return this._selectedIndex;
@@ -75,9 +79,13 @@ export class TabGroupComponent implements AfterContentChecked, AfterViewInit {
   private _selectedIndex: number | null = null;
 
   /** Output to enable support for two-way binding on `[(selectedIndex)]` */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() readonly selectedIndexChange: EventEmitter<number> = new EventEmitter<number>();
 
   /** Event emitted when the tab selection has changed. */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() readonly selectedTabChange: EventEmitter<BitTabChangeEvent> =
     new EventEmitter<BitTabChangeEvent>();
 

libs/components/src/tabs/tab-group/tab.component.ts

@@ -11,6 +11,8 @@ import {
 
 import { TabLabelDirective } from "./tab-label.directive";
 
+// 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-tab",
   templateUrl: "./tab.component.html",
@@ -33,6 +35,8 @@ export class TabComponent implements OnInit {
   readonly contentTabIndex = input<number | undefined>();
 
   readonly implicitContent = viewChild.required(TemplateRef);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @ContentChild(TabLabelDirective) templateLabel?: TabLabelDirective;
 
   private _contentPortal: TemplatePortal | null = null;

libs/components/src/tabs/tab-nav-bar/tab-link.component.ts

@@ -16,6 +16,8 @@ import { TabListItemDirective } from "../shared/tab-list-item.directive";
 
 import { TabNavBarComponent } from "./tab-nav-bar.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: "bit-tab-link",
   templateUrl: "tab-link.component.html",
@@ -38,6 +40,8 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit {
   // TODO: Skipped for signal migration because:
   //  This input overrides a field from a superclass, while the superclass field
   //  is not migrated.
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() disabled = false;
 
   @HostListener("keydown", ["$event"]) onKeyDown(event: KeyboardEvent) {

libs/components/src/tabs/tab-nav-bar/tab-nav-bar.component.ts

@@ -6,6 +6,8 @@ import { TabListContainerDirective } from "../shared/tab-list-container.directiv
 
 import { TabLinkComponent } from "./tab-link.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: "bit-tab-nav-bar",
   templateUrl: "tab-nav-bar.component.html",

libs/components/src/tabs/tabs.stories.ts

@@ -12,30 +12,40 @@ import { I18nMockService } from "../utils";
 import { TabGroupComponent } from "./tab-group/tab-group.component";
 import { TabsModule } from "./tabs.module";
 
+// 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-tab-active-dummy",
   template: "Router - Active selected",
 })
 class ActiveDummyComponent {}
 
+// 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-tab-item-2-dummy",
   template: "Router - Item 2 selected",
 })
 class ItemTwoDummyComponent {}
 
+// 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-tab-item-3-dummy",
   template: "Router - Item 3 selected",
 })
 class ItemThreeDummyComponent {}
 
+// 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-tab-disabled-dummy",
   template: "Router - Disabled selected",
 })
 class DisabledDummyComponent {}
 
+// 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-tab-item-with-child-counter-dummy",
   template: "Router - Item With Child Counter selected",