diff --git a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts b/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts index 2b91a28122c..589b880b206 100644 --- a/apps/browser/src/dirt/phishing-detection/pages/phishing-warning.component.ts +++ b/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); diff --git a/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts b/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts index 96c597113a5..9b972fd0f3e 100644 --- a/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts +++ b/apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.spec.ts @@ -61,6 +61,8 @@ class MockPopupPageComponent { template: ``, 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(undefined); } diff --git a/apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts b/apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts index b314c48fecd..546a352111e 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/assign-collections/assign-collections.component.ts +++ b/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; diff --git a/apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts b/apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts index 2125af289a2..44a033137de 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.ts +++ b/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 diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts index 2139b6d9a4f..8fa48dc5d79 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts +++ b/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 diff --git a/apps/web/src/app/billing/organizations/adjust-subscription.component.ts b/apps/web/src/app/billing/organizations/adjust-subscription.component.ts index 7ee5891e8a9..255e1ef544c 100644 --- a/apps/web/src/app/billing/organizations/adjust-subscription.component.ts +++ b/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 diff --git a/apps/web/src/app/billing/trial-initiation/vertical-stepper/vertical-step.component.ts b/apps/web/src/app/billing/trial-initiation/vertical-stepper/vertical-step.component.ts index efd0f68e5d1..f79bb5a4451 100644 --- a/apps/web/src/app/billing/trial-initiation/vertical-stepper/vertical-step.component.ts +++ b/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 diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts index ccc68cf5db9..88c98f01e6c 100644 --- a/apps/web/src/app/layouts/header/web-header.stories.ts +++ b/apps/web/src/app/layouts/header/web-header.stories.ts @@ -53,7 +53,7 @@ class MockStateService { template: ``, 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: ``, imports: [CommonModule, AvatarModule], }) -class MockDynamicAvatar implements Partial { +class MockDynamicAvatarComponent implements Partial { 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 }, { diff --git a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts b/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts index c2d6c87d865..82eb1180961 100644 --- a/apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts +++ b/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 diff --git a/apps/web/src/app/vault/individual-vault/add-edit-v2.component.ts b/apps/web/src/app/vault/individual-vault/add-edit-v2.component.ts index 41c922cf4fe..5277d4a0aea 100644 --- a/apps/web/src/app/vault/individual-vault/add-edit-v2.component.ts +++ b/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; diff --git a/eslint.config.mjs b/eslint.config.mjs index bfa8b6ec079..df98b3af424 100644 --- a/eslint.config.mjs +++ b/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, diff --git a/libs/components/src/button/button.component.spec.ts b/libs/components/src/button/button.component.spec.ts index 745be014a0c..4eb92227d22 100644 --- a/libs/components/src/button/button.component.spec.ts +++ b/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; - let testAppComponent: TestApp; + let fixture: ComponentFixture; + 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; diff --git a/libs/components/src/chip-select/chip-select.component.spec.ts b/libs/components/src/chip-select/chip-select.component.spec.ts index 2485a5bca7e..3c2f71ef8d7 100644 --- a/libs/components/src/chip-select/chip-select.component.spec.ts +++ b/libs/components/src/chip-select/chip-select.component.spec.ts @@ -27,7 +27,7 @@ const mockI18nService = { describe("ChipSelectComponent", () => { let component: ChipSelectComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; const testOptions: ChipSelectOption[] = [ { 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[]>([ { label: "Option 1", value: "opt1", icon: "bwi-folder" }, { label: "Option 2", value: "opt2" }, diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts index e0f8b343040..bf6c6fb2aad 100644 --- a/libs/components/src/chip-select/chip-select.component.ts +++ b/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 implements ControlValueAccessor { private readonly cdr = inject(ChangeDetectorRef); readonly menu = viewChild(MenuComponent); - readonly menuItems = viewChildren(MenuItemDirective); + readonly menuItems = viewChildren(MenuItemComponent); readonly chipSelectButton = viewChild>("chipSelectButton"); readonly menuTrigger = viewChild(MenuTriggerForDirective); diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts index 9bcb704a7fd..0921e9a9def 100644 --- a/libs/components/src/dialog/dialog.service.stories.ts +++ b/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, diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts index b682b9f772a..7e03ad60ca2 100644 --- a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts +++ b/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, diff --git a/libs/components/src/form-control/form-control.module.ts b/libs/components/src/form-control/form-control.module.ts index df168d8e98f..2646f36ecd3 100644 --- a/libs/components/src/form-control/form-control.module.ts +++ b/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 {} diff --git a/libs/components/src/form-control/label.component.ts b/libs/components/src/form-control/label.component.ts index 57f9e338bb6..95133cae99f 100644 --- a/libs/components/src/form-control/label.component.ts +++ b/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, @Optional() private parentFormControl: FormControlComponent, diff --git a/libs/components/src/form-field/error-summary.component.ts b/libs/components/src/form-field/error-summary.component.ts index cf26fd1e21f..cbcd172399a 100644 --- a/libs/components/src/form-field/error-summary.component.ts +++ b/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(); get errorCount(): number { diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts index ccfdcec4132..3d49a58b1fc 100644 --- a/libs/components/src/form-field/form-field.component.ts +++ b/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>("prefixContainer"); readonly suffixContainer = viewChild>("suffixContainer"); diff --git a/libs/components/src/form-field/form-field.module.ts b/libs/components/src/form-field/form-field.module.ts index 88d7ffcc78b..c7529c14fb7 100644 --- a/libs/components/src/form-field/form-field.module.ts +++ b/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, diff --git a/libs/components/src/menu/index.ts b/libs/components/src/menu/index.ts index 52c48d2fb8e..69b71b8ee24 100644 --- a/libs/components/src/menu/index.ts +++ b/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"; diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.component.ts similarity index 96% rename from libs/components/src/menu/menu-item.directive.ts rename to libs/components/src/menu/menu-item.component.ts index e19e208f7b0..149fc3ca297 100644 --- a/libs/components/src/menu/menu-item.directive.ts +++ b/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", diff --git a/libs/components/src/menu/menu.component.spec.ts b/libs/components/src/menu/menu.component.spec.ts index 59ad7c6dbc8..5ec614afade 100644 --- a/libs/components/src/menu/menu.component.spec.ts +++ b/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; + let fixture: ComponentFixture; 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 {} diff --git a/libs/components/src/menu/menu.component.ts b/libs/components/src/menu/menu.component.ts index f32a790ef69..fc7a4673fea 100644 --- a/libs/components/src/menu/menu.component.ts +++ b/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(); - readonly menuItems = contentChildren(MenuItemDirective, { descendants: true }); - keyManager?: FocusKeyManager; + readonly menuItems = contentChildren(MenuItemComponent, { descendants: true }); + keyManager?: FocusKeyManager; readonly ariaRole = input<"menu" | "dialog">("menu"); diff --git a/libs/components/src/menu/menu.module.ts b/libs/components/src/menu/menu.module.ts index 117460df559..a9a5e64dd9f 100644 --- a/libs/components/src/menu/menu.module.ts +++ b/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 {} diff --git a/libs/components/src/radio-button/radio-group.component.spec.ts b/libs/components/src/radio-button/radio-group.component.spec.ts index 94cc7bc25cb..8d70dde9a56 100644 --- a/libs/components/src/radio-button/radio-group.component.spec.ts +++ b/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; - let testAppComponent: TestApp; + let fixture: ComponentFixture; + 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; } diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts index dd44623b313..7a1288b71e5 100644 --- a/libs/components/src/radio-button/radio-group.component.ts +++ b/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) { diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts index 8f49415e0dd..0a9581fb375 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts +++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts @@ -134,7 +134,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module"; `, }) -export class KitchenSinkForm { +export class KitchenSinkFormComponent { constructor( public dialogService: DialogService, public formBuilder: FormBuilder, diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts index f96217ffb63..0819ae3f06b 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts +++ b/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"; `, }) -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: ` Kitchen Sink test zone @@ -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 = [ diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts index d8d2e20f9ae..69602100eae 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts +++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts @@ -57,4 +57,4 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module"; `, }) -export class KitchenSinkTable {} +export class KitchenSinkTableComponent {} diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts index 18846ce2831..f914c49cca5 100644 --- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts +++ b/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 = [ diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts index a0bcbbffe04..c25eb778d11 100644 --- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts +++ b/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({ diff --git a/libs/components/src/switch/switch.component.spec.ts b/libs/components/src/switch/switch.component.spec.ts index 10574c8084e..6a53316a1b4 100644 --- a/libs/components/src/switch/switch.component.spec.ts +++ b/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: `
@@ -77,7 +77,7 @@ describe("SwitchComponent", () => { selector: "test-selected-host", template: `Element`, standalone: true, - imports: [SwitchComponent, BitLabel], + imports: [SwitchComponent, BitLabelComponent], }) class TestSelectedHostComponent { checked = false; diff --git a/libs/components/src/switch/switch.component.ts b/libs/components/src/switch/switch.component.ts index 456fe5671b1..30e1ac59d48 100644 --- a/libs/components/src/switch/switch.component.ts +++ b/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); - private readonly label = contentChild.required(BitLabel); + private readonly label = contentChild.required(BitLabelComponent); /** * Model signal for selected state binding when used outside of a form diff --git a/libs/components/src/toggle-group/toggle-group.component.spec.ts b/libs/components/src/toggle-group/toggle-group.component.spec.ts index 832741ae79c..3a9d35b862b 100644 --- a/libs/components/src/toggle-group/toggle-group.component.spec.ts +++ b/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; - let testAppComponent: TestApp; + let fixture: ComponentFixture; + let testAppComponent: TestAppComponent; let buttonElements: ToggleComponent[]; 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; } diff --git a/libs/vault/src/components/copy-cipher-field.directive.spec.ts b/libs/vault/src/components/copy-cipher-field.directive.spec.ts index a3650c68c9b..e20fccd053f 100644 --- a/libs/vault/src/components/copy-cipher-field.directive.spec.ts +++ b/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); }); }); diff --git a/libs/vault/src/components/copy-cipher-field.directive.ts b/libs/vault/src/components/copy-cipher-field.directive.ts index 7e8ca334f9e..b4b1941273f 100644 --- a/libs/vault/src/components/copy-cipher-field.directive.ts +++ b/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; } }