Eliminate standalone in libs/components (#19142)

* Eliminate last standalone in libs/components

* Fix annon layout

libs/components/src/anon-layout/anon-layout-wrapper.stories.ts

@@ -1,4 +1,4 @@
-import { importProvidersFrom, Component } from "@angular/core";
+import { importProvidersFrom, Component, ChangeDetectionStrategy, signal } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import {
   Meta,
@@ -31,7 +31,6 @@ export default {
 } as Meta;
 
 const decorators = (options: {
-  components: any[];
   routes: Routes;
   applicationVersion?: string;
   clientType?: ClientType;
@@ -56,7 +55,6 @@ const decorators = (options: {
       },
     ),
     moduleMetadata({
-      declarations: options.components,
       imports: [RouterModule, ButtonModule],
       providers: [
         {
@@ -103,39 +101,31 @@ type Story = StoryObj<AnonLayoutWrapperComponent>;
 
 // Default Example
 
-// 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-default-primary-outlet-example-component",
   template: "<p>Primary Outlet Example: <br> your primary component goes here</p>",
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefaultPrimaryOutletExampleComponent {}
 
-// 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-default-secondary-outlet-example-component",
   template: "<p>Secondary Outlet Example: <br> your secondary component goes here</p>",
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefaultSecondaryOutletExampleComponent {}
 
-// 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-default-env-selector-outlet-example-component",
   template: "<p>Env Selector Outlet Example: <br> your env selector component goes here</p>",
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefaultEnvSelectorOutletExampleComponent {}
 
-// 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-header-actions-outlet-example-component",
   template: "<p>Header Actions Outlet Example: <br> your header actions component goes here</p>",
-  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefaultHeaderActionsOutletExampleComponent {}
 
@@ -145,11 +135,6 @@ export const DefaultContentExample: Story = {
     template: "<router-outlet></router-outlet>",
   }),
   decorators: decorators({
-    components: [
-      DefaultPrimaryOutletExampleComponent,
-      DefaultSecondaryOutletExampleComponent,
-      DefaultEnvSelectorOutletExampleComponent,
-    ],
     routes: [
       {
         path: "**",
@@ -212,28 +197,27 @@ const changedData: AnonLayoutWrapperData = {
   pageIcon: RegistrationCheckEmailIcon,
 };
 
-// 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-dynamic-content-example-component",
   template: `
     <button type="button" bitButton buttonType="primary" (click)="toggleData()">Toggle Data</button>
   `,
-  standalone: false,
+  imports: [ButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DynamicContentExampleComponent {
-  initialData = true;
+  private readonly initialData = signal(true);
 
   constructor(private anonLayoutWrapperDataService: AnonLayoutWrapperDataService) {}
 
   toggleData() {
-    if (this.initialData) {
+    if (this.initialData()) {
       this.anonLayoutWrapperDataService.setAnonLayoutWrapperData(changedData);
     } else {
       this.anonLayoutWrapperDataService.setAnonLayoutWrapperData(initialData);
     }
 
-    this.initialData = !this.initialData;
+    this.initialData.update((v) => !v);
   }
 }
 
@@ -243,7 +227,6 @@ export const DynamicContentExample: Story = {
     template: "<router-outlet></router-outlet>",
   }),
   decorators: decorators({
-    components: [DynamicContentExampleComponent],
     routes: [
       {
         path: "**",

libs/components/src/header/header.component.ts

@@ -7,7 +7,6 @@ import { TypographyDirective } from "../typography/typography.directive";
   templateUrl: "./header.component.html",
   imports: [TypographyDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
 })
 export class HeaderComponent {
   /**

libs/components/src/icon/icon.component.ts

@@ -10,7 +10,6 @@ import { BitwardenIcon } from "../shared/icon";
 
 @Component({
   selector: "bit-icon",
-  standalone: true,
   host: {
     "[class]": "classList()",
     "[attr.aria-hidden]": "ariaLabel() ? null : true",

libs/components/src/landing-layout/landing-card.component.ts

@@ -26,7 +26,6 @@ import { BaseCardComponent } from "../card";
 @Component({
   selector: "bit-landing-card",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [BaseCardComponent],
   templateUrl: "./landing-card.component.html",
 })

libs/components/src/layout/scroll-layout.directive.ts

@@ -28,7 +28,6 @@ export class ScrollLayoutService {
  **/
 @Directive({
   selector: "[bitScrollLayoutHost]",
-  standalone: true,
   host: {
     class: "cdk-virtual-scrollable",
   },
@@ -55,7 +54,6 @@ export class ScrollLayoutHostDirective implements OnDestroy {
  */
 @Directive({
   selector: "[bitScrollLayout]",
-  standalone: true,
   providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: ScrollLayoutDirective }],
 })
 export class ScrollLayoutDirective extends CdkVirtualScrollable implements OnInit {

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

@@ -53,7 +53,6 @@ const CONTEXT_MENU_POSITIONS: ConnectedPosition[] = [
 @Directive({
   selector: "[bitMenuTriggerFor]",
   exportAs: "menuTrigger",
-  standalone: true,
   host: { "[attr.role]": "this.role()" },
 })
 export class MenuTriggerForDirective implements OnDestroy {

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

@@ -15,7 +15,6 @@ import { PopoverComponent } from "./popover.component";
  * - tick(0) flushes microtasks, useful for Angular effects that run synchronously
  */
 @Component({
-  standalone: true,
   template: `
     <button
       type="button"

libs/components/src/resize-observer/resize-observer.directive.ts

@@ -2,7 +2,6 @@ import { Directive, ElementRef, EventEmitter, Output, OnDestroy } from "@angular
 
 @Directive({
   selector: "[resizeObserver]",
-  standalone: true,
 })
 export class ResizeObserverDirective implements OnDestroy {
   private observer = new ResizeObserver((entries) => {

libs/components/src/spinner/spinner.component.ts

@@ -8,7 +8,6 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 @Component({
   selector: "bit-spinner",
   templateUrl: "spinner.component.html",
-  standalone: true,
   imports: [CommonModule],
 })
 export class SpinnerComponent {

libs/components/src/stepper/step.component.ts

@@ -7,7 +7,6 @@ import { Component, input } from "@angular/core";
   selector: "bit-step",
   templateUrl: "step.component.html",
   providers: [{ provide: CdkStep, useExisting: StepComponent }],
-  standalone: true,
 })
 export class StepComponent extends CdkStep {
   readonly subLabel = input();

libs/components/src/stepper/stepper.component.ts

@@ -19,7 +19,6 @@ import { StepComponent } from "./step.component";
   templateUrl: "stepper.component.html",
   providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
   imports: [CommonModule, ResizeObserverDirective, TypographyModule],
-  standalone: true,
 })
 export class StepperComponent extends CdkStepper {
   // Need to reimplement the constructor to fix an invalidFactoryDep error in Storybook

libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts

@@ -11,7 +11,6 @@ import { TableDataSource, TableModule } from "../../../table";
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "dialog-virtual-scroll-block",
-  standalone: true,
   imports: [
     DialogModule,
     IconButtonModule,

libs/components/src/svg/svg.mdx

@@ -91,7 +91,6 @@ import { SvgModule } from "@bitwarden/components";
 
        @Component({
          selector: "app-example",
-         standalone: true,
          imports: [SvgModule],
          templateUrl: "./example.component.html",
        })

libs/components/src/switch/switch.component.spec.ts

@@ -76,7 +76,6 @@ describe("SwitchComponent", () => {
     @Component({
       selector: "test-selected-host",
       template: `<bit-switch [selected]="checked"><bit-label>Element</bit-label></bit-switch>`,
-      standalone: true,
       imports: [SwitchComponent, BitLabelComponent],
     })
     class TestSelectedHostComponent {

libs/components/src/tooltip/tooltip.spec.ts

@@ -15,7 +15,6 @@ import { TooltipDirective, TOOLTIP_DELAY_MS } from "./tooltip.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({
-  standalone: true,
   imports: [TooltipDirective],
   template: ` <button [bitTooltip]="tooltipText" type="button">Hover or focus me</button> `,
 })