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

* Enable component-class-suffix

* Rename file

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;
 }