[PM-28231] Enable component-class-suffix (#17384)

* Enable component-class-suffix

* Rename file

apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts

@@ -47,6 +47,8 @@ import {
     TypographyModule,
   ],
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class PhishingWarning {
   private activatedRoute = inject(ActivatedRoute);
   private messageSender = inject(MessageSender);

apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts

@@ -61,6 +61,8 @@ class MockPopupPageComponent {
   template: `<ng-content></ng-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 class MockAppIcon {
   readonly cipher = input<CipherView | undefined>(undefined);
 }

apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts

@@ -49,6 +49,8 @@ import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-p
     PopOutComponent,
   ],
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class AssignCollections {
   /** Params needed to populate the assign collections component */
   params: CollectionAssignmentParams;

apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts

@@ -30,6 +30,8 @@ const blockedURISettingsRoute = "/blocked-domains";
   selector: "blocked-injection-banner",
   templateUrl: "blocked-injection-banner.component.html",
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class BlockedInjectionBanner implements OnInit {
   /**
    * Flag indicating that the banner should be shown

apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts

@@ -24,6 +24,8 @@ import {
   selector: "vault-cipher-form-generator",
   template: "",
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 class MockCipherFormGenerator {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals

apps/web/src/app/billing/organizations/adjust-subscription.component.ts

@@ -23,6 +23,8 @@ import { ToastService } from "@bitwarden/components";
   templateUrl: "adjust-subscription.component.html",
   standalone: false,
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class AdjustSubscription implements OnInit, OnDestroy {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals

apps/web/src/app/billing/trial-initiation/vertical-stepper/vertical-step.component.ts

@@ -9,6 +9,8 @@ import { Component, Input } from "@angular/core";
   providers: [{ provide: CdkStep, useExisting: VerticalStep }],
   standalone: false,
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class VerticalStep extends CdkStep {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -53,7 +53,7 @@ class MockStateService {
   template: `<button type="button" bitIconButton="bwi-filter" label="Switch products"></button>`,
   standalone: false,
 })
-class MockProductSwitcher {}
+class MockProductSwitcherComponent {}
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -62,7 +62,7 @@ class MockProductSwitcher {}
   template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
   imports: [CommonModule, AvatarModule],
 })
-class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
+class MockDynamicAvatarComponent implements Partial<DynamicAvatarComponent> {
   protected name$ = combineLatest([
     this.stateService.accounts$,
     this.stateService.activeAccount$,
@@ -100,9 +100,9 @@ export default {
         TabsModule,
         TypographyModule,
         NavigationModule,
-        MockDynamicAvatar,
+        MockDynamicAvatarComponent,
       ],
-      declarations: [WebHeaderComponent, MockProductSwitcher],
+      declarations: [WebHeaderComponent, MockProductSwitcherComponent],
       providers: [
         { provide: StateService, useClass: MockStateService },
         {

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts

@@ -22,6 +22,8 @@ import {
   selector: "vault-cipher-form-generator",
   template: "",
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 class MockCipherFormGenerator {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals

apps/web/src/app/vault/individual-vault/add-edit-v2.component.ts

@@ -78,6 +78,8 @@ export interface AddEditCipherDialogCloseResult {
   ],
   providers: [{ provide: CipherFormGenerationService, useClass: WebCipherFormGenerationService }],
 })
+// FIXME(https://bitwarden.atlassian.net/browse/PM-28231): Use Component suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class AddEditComponentV2 implements OnInit {
   config: CipherFormConfig;
   headerText: string;

eslint.config.mjs

@@ -61,7 +61,7 @@ export default tseslint.config(
       "rxjs/no-exposed-subjects": ["error", { allowProtected: true }],
 
       // TODO: Enable these.
-      "@angular-eslint/component-class-suffix": 0,
+      "@angular-eslint/component-class-suffix": "error",
       "@angular-eslint/contextual-lifecycle": "error",
       "@angular-eslint/directive-class-suffix": 0,
       "@angular-eslint/no-empty-lifecycle-method": 0,

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

@@ -5,19 +5,19 @@ import { By } from "@angular/platform-browser";
 import { ButtonModule } from "./index";
 
 describe("Button", () => {
-  let fixture: ComponentFixture<TestApp>;
-  let testAppComponent: TestApp;
+  let fixture: ComponentFixture<TestAppComponent>;
+  let testAppComponent: TestAppComponent;
   let buttonDebugElement: DebugElement;
   let disabledButtonDebugElement: DebugElement;
   let linkDebugElement: DebugElement;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [TestApp],
+      imports: [TestAppComponent],
     });
 
     await TestBed.compileComponents();
-    fixture = TestBed.createComponent(TestApp);
+    fixture = TestBed.createComponent(TestAppComponent);
     testAppComponent = fixture.debugElement.componentInstance;
     buttonDebugElement = fixture.debugElement.query(By.css("button"));
     disabledButtonDebugElement = fixture.debugElement.query(By.css("button#disabled"));
@@ -86,7 +86,7 @@ describe("Button", () => {
   `,
   imports: [ButtonModule],
 })
-class TestApp {
+class TestAppComponent {
   buttonType?: string;
   block?: boolean;
   disabled?: boolean;

libs/components/src/chip-select/chip-select.component.spec.ts

@@ -27,7 +27,7 @@ const mockI18nService = {
 
 describe("ChipSelectComponent", () => {
   let component: ChipSelectComponent<string>;
-  let fixture: ComponentFixture<TestApp>;
+  let fixture: ComponentFixture<TestAppComponent>;
 
   const testOptions: ChipSelectOption<string>[] = [
     { label: "Option 1", value: "opt1", icon: "bwi-folder" },
@@ -58,11 +58,11 @@ describe("ChipSelectComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TestApp, NoopAnimationsModule],
+      imports: [TestAppComponent, NoopAnimationsModule],
       providers: [{ provide: I18nService, useValue: mockI18nService }],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TestApp);
+    fixture = TestBed.createComponent(TestAppComponent);
     fixture.detectChanges();
 
     component = fixture.debugElement.query(By.directive(ChipSelectComponent)).componentInstance;
@@ -468,7 +468,7 @@ describe("ChipSelectComponent", () => {
   imports: [ChipSelectComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-class TestApp {
+class TestAppComponent {
   readonly options = signal<ChipSelectOption<string>[]>([
     { label: "Option 1", value: "opt1", icon: "bwi-folder" },
     { label: "Option 2", value: "opt2" },

libs/components/src/chip-select/chip-select.component.ts

@@ -20,7 +20,7 @@ import { compareValues } from "@bitwarden/common/platform/misc/compare-values";
 
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
-import { MenuComponent, MenuItemDirective, MenuModule, MenuTriggerForDirective } from "../menu";
+import { MenuComponent, MenuItemComponent, MenuModule, MenuTriggerForDirective } from "../menu";
 import { Option } from "../select/option";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
@@ -51,7 +51,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
   private readonly cdr = inject(ChangeDetectorRef);
 
   readonly menu = viewChild(MenuComponent);
-  readonly menuItems = viewChildren(MenuItemDirective);
+  readonly menuItems = viewChildren(MenuItemComponent);
   readonly chipSelectButton = viewChild<ElementRef<HTMLButtonElement>>("chipSelectButton");
   readonly menuTrigger = viewChild(MenuTriggerForDirective);
 

libs/components/src/dialog/dialog.service.stories.ts

@@ -47,7 +47,7 @@ class StoryDialogComponent {
   }
 
   openDialogNonDismissable() {
-    this.dialogService.open(NonDismissableContent, {
+    this.dialogService.open(NonDismissableContentComponent, {
       data: {
         animal: "panda",
       },
@@ -117,7 +117,7 @@ class StoryDialogContentComponent {
   `,
   imports: [DialogModule, ButtonModule],
 })
-class NonDismissableContent {
+class NonDismissableContentComponent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -33,7 +33,7 @@ class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
 
   openSimpleDialog() {
-    this.dialogService.open(SimpleDialogContent, {
+    this.dialogService.open(SimpleDialogContentComponent, {
       data: {
         animal: "panda",
       },
@@ -42,7 +42,7 @@ class StoryDialogComponent {
   }
 
   openNonDismissableWithPrimaryButtonDialog() {
-    this.dialogService.open(NonDismissableWithPrimaryButtonContent, {
+    this.dialogService.open(NonDismissableWithPrimaryButtonContentComponent, {
       data: {
         animal: "panda",
       },
@@ -52,7 +52,7 @@ class StoryDialogComponent {
   }
 
   openNonDismissableWithNoButtonsDialog() {
-    this.dialogService.open(NonDismissableWithNoButtonsContent, {
+    this.dialogService.open(NonDismissableWithNoButtonsContentComponent, {
       data: {
         animal: "panda",
       },
@@ -83,7 +83,7 @@ class StoryDialogComponent {
   `,
   imports: [ButtonModule, DialogModule],
 })
-class SimpleDialogContent {
+class SimpleDialogContentComponent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,
@@ -114,7 +114,7 @@ class SimpleDialogContent {
   `,
   imports: [ButtonModule, DialogModule],
 })
-class NonDismissableWithPrimaryButtonContent {
+class NonDismissableWithPrimaryButtonContentComponent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,
@@ -140,7 +140,7 @@ class NonDismissableWithPrimaryButtonContent {
   `,
   imports: [ButtonModule, DialogModule],
 })
-class NonDismissableWithNoButtonsContent {
+class NonDismissableWithNoButtonsContentComponent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,

libs/components/src/form-control/form-control.module.ts

@@ -2,10 +2,10 @@ import { NgModule } from "@angular/core";
 
 import { FormControlComponent } from "./form-control.component";
 import { BitHintComponent } from "./hint.component";
-import { BitLabel } from "./label.component";
+import { BitLabelComponent } from "./label.component";
 
 @NgModule({
-  imports: [BitLabel, FormControlComponent, BitHintComponent],
-  exports: [FormControlComponent, BitLabel, BitHintComponent],
+  imports: [BitLabelComponent, FormControlComponent, BitHintComponent],
+  exports: [FormControlComponent, BitLabelComponent, BitHintComponent],
 })
 export class FormControlModule {}

libs/components/src/form-control/label.component.ts

@@ -17,7 +17,7 @@ let nextId = 0;
     "[id]": "id()",
   },
 })
-export class BitLabel {
+export class BitLabelComponent {
   constructor(
     private elementRef: ElementRef<HTMLInputElement>,
     @Optional() private parentFormControl: FormControlComponent,

libs/components/src/form-field/error-summary.component.ts

@@ -16,7 +16,7 @@ import { I18nPipe } from "@bitwarden/ui-common";
   },
   imports: [I18nPipe],
 })
-export class BitErrorSummary {
+export class BitErrorSummaryComponent {
   readonly formGroup = input<UntypedFormGroup>();
 
   get errorCount(): number {

libs/components/src/form-field/form-field.component.ts

@@ -16,7 +16,7 @@ import {
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { BitHintComponent } from "../form-control/hint.component";
-import { BitLabel } from "../form-control/label.component";
+import { BitLabelComponent } from "../form-control/label.component";
 import { inputBorderClasses } from "../input/input.directive";
 
 import { BitErrorComponent } from "./error.component";
@@ -32,7 +32,7 @@ import { BitFormFieldControl } from "./form-field-control";
 export class BitFormFieldComponent implements AfterContentChecked {
   readonly input = contentChild.required(BitFormFieldControl);
   readonly hint = contentChild(BitHintComponent);
-  readonly label = contentChild(BitLabel);
+  readonly label = contentChild(BitLabelComponent);
 
   readonly prefixContainer = viewChild<ElementRef<HTMLDivElement>>("prefixContainer");
   readonly suffixContainer = viewChild<ElementRef<HTMLDivElement>>("suffixContainer");

libs/components/src/form-field/form-field.module.ts

@@ -4,7 +4,7 @@ import { FormControlModule } from "../form-control";
 import { InputModule } from "../input/input.module";
 import { MultiSelectModule } from "../multi-select/multi-select.module";
 
-import { BitErrorSummary } from "./error-summary.component";
+import { BitErrorSummaryComponent } from "./error-summary.component";
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldComponent } from "./form-field.component";
 import { BitPasswordInputToggleDirective } from "./password-input-toggle.directive";
@@ -18,7 +18,7 @@ import { BitSuffixDirective } from "./suffix.directive";
     MultiSelectModule,
 
     BitErrorComponent,
-    BitErrorSummary,
+    BitErrorSummaryComponent,
     BitFormFieldComponent,
     BitPasswordInputToggleDirective,
     BitPrefixDirective,
@@ -30,7 +30,7 @@ import { BitSuffixDirective } from "./suffix.directive";
     MultiSelectModule,
 
     BitErrorComponent,
-    BitErrorSummary,
+    BitErrorSummaryComponent,
     BitFormFieldComponent,
     BitPasswordInputToggleDirective,
     BitPrefixDirective,

libs/components/src/menu/index.ts

@@ -1,5 +1,5 @@
 export * from "./menu.module";
 export * from "./menu.component";
 export * from "./menu-trigger-for.directive";
-export * from "./menu-item.directive";
+export * from "./menu-item.component";
 export * from "./menu-divider.component";

libs/components/src/menu/menu-item.component.ts

@@ -10,7 +10,7 @@ import { Component, ElementRef, HostBinding, Input } from "@angular/core";
   templateUrl: "menu-item.component.html",
   imports: [NgClass],
 })
-export class MenuItemDirective implements FocusableOption {
+export class MenuItemComponent implements FocusableOption {
   @HostBinding("class") classList = [
     "tw-block",
     "tw-w-full",

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

@@ -7,7 +7,7 @@ import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
 import { MenuModule } from "./index";
 
 describe("Menu", () => {
-  let fixture: ComponentFixture<TestApp>;
+  let fixture: ComponentFixture<TestAppComponent>;
   const getMenuTriggerDirective = () => {
     const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective));
     return buttonDebugElement.injector.get(MenuTriggerForDirective);
@@ -18,12 +18,12 @@ describe("Menu", () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [TestApp],
+      imports: [TestAppComponent],
     });
 
     await TestBed.compileComponents();
 
-    fixture = TestBed.createComponent(TestApp);
+    fixture = TestBed.createComponent(TestAppComponent);
     fixture.detectChanges();
   });
 
@@ -82,4 +82,4 @@ describe("Menu", () => {
   `,
   imports: [MenuModule],
 })
-class TestApp {}
+class TestAppComponent {}

libs/components/src/menu/menu.component.ts

@@ -10,7 +10,7 @@ import {
   contentChildren,
 } from "@angular/core";
 
-import { MenuItemDirective } from "./menu-item.directive";
+import { MenuItemComponent } from "./menu-item.component";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -25,8 +25,8 @@ export class MenuComponent implements AfterContentInit {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() closed = new EventEmitter<void>();
-  readonly menuItems = contentChildren(MenuItemDirective, { descendants: true });
-  keyManager?: FocusKeyManager<MenuItemDirective>;
+  readonly menuItems = contentChildren(MenuItemComponent, { descendants: true });
+  keyManager?: FocusKeyManager<MenuItemComponent>;
 
   readonly ariaRole = input<"menu" | "dialog">("menu");
 

libs/components/src/menu/menu.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 
 import { MenuDividerComponent } from "./menu-divider.component";
-import { MenuItemDirective } from "./menu-item.directive";
+import { MenuItemComponent } from "./menu-item.component";
 import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
 import { MenuComponent } from "./menu.component";
 
 @NgModule({
-  imports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
-  exports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
+  imports: [MenuComponent, MenuTriggerForDirective, MenuItemComponent, MenuDividerComponent],
+  exports: [MenuComponent, MenuTriggerForDirective, MenuItemComponent, MenuDividerComponent],
 })
 export class MenuModule {}

libs/components/src/radio-button/radio-group.component.spec.ts

@@ -11,19 +11,19 @@ import { RadioButtonComponent } from "./radio-button.component";
 import { RadioButtonModule } from "./radio-button.module";
 
 describe("RadioGroupComponent", () => {
-  let fixture: ComponentFixture<TestApp>;
-  let testAppComponent: TestApp;
+  let fixture: ComponentFixture<TestAppComponent>;
+  let testAppComponent: TestAppComponent;
   let buttonElements: RadioButtonComponent[];
   let radioButtons: HTMLInputElement[];
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [TestApp],
+      imports: [TestAppComponent],
       providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
     });
 
     await TestBed.compileComponents();
-    fixture = TestBed.createComponent(TestApp);
+    fixture = TestBed.createComponent(TestAppComponent);
     fixture.detectChanges();
     testAppComponent = fixture.debugElement.componentInstance;
     buttonElements = fixture.debugElement
@@ -76,6 +76,6 @@ describe("RadioGroupComponent", () => {
   `,
   imports: [FormsModule, RadioButtonModule],
 })
-class TestApp {
+class TestAppComponent {
   selected?: string;
 }

libs/components/src/radio-button/radio-group.component.ts

@@ -4,7 +4,7 @@ import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
-import { BitLabel } from "../form-control/label.component";
+import { BitLabelComponent } from "../form-control/label.component";
 
 let nextId = 0;
 
@@ -32,7 +32,7 @@ export class RadioGroupComponent implements ControlValueAccessor {
   readonly id = input(`bit-radio-group-${nextId++}`);
   @HostBinding("class") classList = ["tw-block", "tw-mb-4"];
 
-  protected readonly label = contentChild(BitLabel);
+  protected readonly label = contentChild(BitLabelComponent);
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {
     if (ngControl != null) {

libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts

@@ -134,7 +134,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
     </form>
   `,
 })
-export class KitchenSinkForm {
+export class KitchenSinkFormComponent {
   constructor(
     public dialogService: DialogService,
     public formBuilder: FormBuilder,

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -4,9 +4,9 @@ import { Component, signal } from "@angular/core";
 import { DialogService } from "../../../dialog";
 import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
 
-import { KitchenSinkForm } from "./kitchen-sink-form.component";
-import { KitchenSinkTable } from "./kitchen-sink-table.component";
-import { KitchenSinkToggleList } from "./kitchen-sink-toggle-list.component";
+import { KitchenSinkFormComponent } from "./kitchen-sink-form.component";
+import { KitchenSinkTableComponent } from "./kitchen-sink-table.component";
+import { KitchenSinkToggleListComponent } from "./kitchen-sink-toggle-list.component";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -83,7 +83,7 @@ import { KitchenSinkToggleList } from "./kitchen-sink-toggle-list.component";
     </bit-dialog>
   `,
 })
-class KitchenSinkDialog {
+class KitchenSinkDialogComponent {
   constructor(public dialogRef: DialogRef) {}
 }
 
@@ -91,7 +91,12 @@ class KitchenSinkDialog {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "bit-tab-main",
-  imports: [KitchenSinkSharedModule, KitchenSinkTable, KitchenSinkToggleList, KitchenSinkForm],
+  imports: [
+    KitchenSinkSharedModule,
+    KitchenSinkTableComponent,
+    KitchenSinkToggleListComponent,
+    KitchenSinkFormComponent,
+  ],
   template: `
     <bit-banner bannerType="info"> Kitchen Sink test zone </bit-banner>
 
@@ -182,11 +187,11 @@ export class KitchenSinkMainComponent {
   protected readonly drawerOpen = signal(false);
 
   openDialog() {
-    this.dialogService.open(KitchenSinkDialog);
+    this.dialogService.open(KitchenSinkDialogComponent);
   }
 
   openDrawer() {
-    this.dialogService.openDrawer(KitchenSinkDialog);
+    this.dialogService.openDrawer(KitchenSinkDialogComponent);
   }
 
   navItems = [

libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts

@@ -57,4 +57,4 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
     </bit-table>
   `,
 })
-export class KitchenSinkTable {}
+export class KitchenSinkTableComponent {}

libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts

@@ -28,7 +28,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
     }
   `,
 })
-export class KitchenSinkToggleList {
+export class KitchenSinkToggleListComponent {
   selectedToggle: "all" | "large" | "small" = "all";
 
   companyList = [

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -19,10 +19,10 @@ import { I18nMockService } from "../../utils/i18n-mock.service";
 import { positionFixedWrapperDecorator } from "../storybook-decorators";
 
 import { DialogVirtualScrollBlockComponent } from "./components/dialog-virtual-scroll-block.component";
-import { KitchenSinkForm } from "./components/kitchen-sink-form.component";
+import { KitchenSinkFormComponent } from "./components/kitchen-sink-form.component";
 import { KitchenSinkMainComponent } from "./components/kitchen-sink-main.component";
-import { KitchenSinkTable } from "./components/kitchen-sink-table.component";
-import { KitchenSinkToggleList } from "./components/kitchen-sink-toggle-list.component";
+import { KitchenSinkTableComponent } from "./components/kitchen-sink-table.component";
+import { KitchenSinkToggleListComponent } from "./components/kitchen-sink-toggle-list.component";
 import { KitchenSinkSharedModule } from "./kitchen-sink-shared.module";
 
 export default {
@@ -33,10 +33,10 @@ export default {
     moduleMetadata({
       imports: [
         KitchenSinkSharedModule,
-        KitchenSinkForm,
+        KitchenSinkFormComponent,
         KitchenSinkMainComponent,
-        KitchenSinkTable,
-        KitchenSinkToggleList,
+        KitchenSinkTableComponent,
+        KitchenSinkToggleListComponent,
       ],
     }),
     applicationConfig({

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

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 
-import { BitLabel } from "../form-control/label.component";
+import { BitLabelComponent } from "../form-control/label.component";
 
 import { SwitchComponent } from "./switch.component";
 
@@ -16,7 +16,7 @@ describe("SwitchComponent", () => {
   // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
   @Component({
     selector: "test-host",
-    imports: [FormsModule, BitLabel, ReactiveFormsModule, SwitchComponent],
+    imports: [FormsModule, BitLabelComponent, ReactiveFormsModule, SwitchComponent],
     template: `
       <form [formGroup]="formObj">
         <bit-switch formControlName="switch">
@@ -77,7 +77,7 @@ describe("SwitchComponent", () => {
       selector: "test-selected-host",
       template: `<bit-switch [selected]="checked"><bit-label>Element</bit-label></bit-switch>`,
       standalone: true,
-      imports: [SwitchComponent, BitLabel],
+      imports: [SwitchComponent, BitLabelComponent],
     })
     class TestSelectedHostComponent {
       checked = false;

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

@@ -14,7 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { AriaDisableDirective } from "../a11y";
 import { FormControlModule } from "../form-control/form-control.module";
 import { BitHintComponent } from "../form-control/hint.component";
-import { BitLabel } from "../form-control/label.component";
+import { BitLabelComponent } from "../form-control/label.component";
 
 let nextId = 0;
 
@@ -43,7 +43,7 @@ let nextId = 0;
 })
 export class SwitchComponent implements ControlValueAccessor, AfterViewInit {
   private el = inject(ElementRef<HTMLButtonElement>);
-  private readonly label = contentChild.required(BitLabel);
+  private readonly label = contentChild.required(BitLabelComponent);
 
   /**
    * Model signal for selected state binding when used outside of a form

libs/components/src/toggle-group/toggle-group.component.spec.ts

@@ -6,18 +6,18 @@ import { ToggleGroupModule } from "./toggle-group.module";
 import { ToggleComponent } from "./toggle.component";
 
 describe("Button", () => {
-  let fixture: ComponentFixture<TestApp>;
-  let testAppComponent: TestApp;
+  let fixture: ComponentFixture<TestAppComponent>;
+  let testAppComponent: TestAppComponent;
   let buttonElements: ToggleComponent<unknown>[];
   let radioButtons: HTMLInputElement[];
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [TestApp],
+      imports: [TestAppComponent],
     });
 
     await TestBed.compileComponents();
-    fixture = TestBed.createComponent(TestApp);
+    fixture = TestBed.createComponent(TestAppComponent);
     testAppComponent = fixture.debugElement.componentInstance;
     buttonElements = fixture.debugElement
       .queryAll(By.css("bit-toggle"))
@@ -66,6 +66,6 @@ describe("Button", () => {
   `,
   imports: [ToggleGroupModule],
 })
-class TestApp {
+class TestAppComponent {
   selected?: string;
 }

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

@@ -5,7 +5,7 @@ import { Account, AccountService } from "@bitwarden/common/auth/abstractions/acc
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { BitIconButtonComponent, MenuItemDirective } from "@bitwarden/components";
+import { BitIconButtonComponent, MenuItemComponent } from "@bitwarden/components";
 import { CopyCipherFieldService } from "@bitwarden/vault";
 
 import { CopyCipherFieldDirective } from "./copy-cipher-field.directive";
@@ -83,7 +83,7 @@ describe("CopyCipherFieldDirective", () => {
     });
 
     it("updates menuItemDirective disabled state", async () => {
-      const menuItemDirective = {
+      const menuItemComponent = {
         disabled: false,
       };
 
@@ -91,14 +91,14 @@ describe("CopyCipherFieldDirective", () => {
         copyFieldService as unknown as CopyCipherFieldService,
         mockAccountService,
         mockCipherService,
-        menuItemDirective as unknown as MenuItemDirective,
+        menuItemComponent as unknown as MenuItemComponent,
       );
 
       copyCipherFieldDirective.action = "totp";
 
       await copyCipherFieldDirective.ngOnChanges();
 
-      expect(menuItemDirective.disabled).toBe(true);
+      expect(menuItemComponent.disabled).toBe(true);
     });
   });
 

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

@@ -10,7 +10,7 @@ import {
   CipherViewLike,
   CipherViewLikeUtils,
 } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
-import { MenuItemDirective, BitIconButtonComponent } from "@bitwarden/components";
+import { MenuItemComponent, BitIconButtonComponent } from "@bitwarden/components";
 import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
 
 /**
@@ -47,7 +47,7 @@ export class CopyCipherFieldDirective implements OnChanges {
     private copyCipherFieldService: CopyCipherFieldService,
     private accountService: AccountService,
     private cipherService: CipherService,
-    @Optional() private menuItemDirective?: MenuItemDirective,
+    @Optional() private menuItemComponent?: MenuItemComponent,
     @Optional() private iconButtonComponent?: BitIconButtonComponent,
   ) {}
 
@@ -60,7 +60,7 @@ export class CopyCipherFieldDirective implements OnChanges {
    */
   @HostBinding("class.tw-hidden")
   private get hidden() {
-    return this.disabled && this.menuItemDirective;
+    return this.disabled && this.menuItemComponent;
   }
 
   @HostListener("click")
@@ -87,8 +87,8 @@ export class CopyCipherFieldDirective implements OnChanges {
     }
 
     // If the directive is used on a menu item, update the menu item to prevent keyboard navigation
-    if (this.menuItemDirective) {
-      this.menuItemDirective.disabled = this.disabled ?? false;
+    if (this.menuItemComponent) {
+      this.menuItemComponent.disabled = this.disabled ?? false;
     }
   }