From 6811ea4c0b67329af8c39dcb8ee7a494ca140f78 Mon Sep 17 00:00:00 2001 From: Vicki League Date: Wed, 16 Jul 2025 08:39:37 -0400 Subject: [PATCH 1/7] [CL-707] Migrate CL codebase to signals (#15340) --- .../popup/layout/popup-back.directive.ts | 2 +- .../navigation-switcher.component.spec.ts | 2 +- .../vault-banners.component.spec.ts | 2 +- .../src/a11y/a11y-title.directive.ts | 2 + .../anon-layout/anon-layout.component.html | 22 ++--- .../src/anon-layout/anon-layout.component.ts | 39 +++++---- .../src/anon-layout/anon-layout.stories.ts | 19 +---- .../src/async-actions/bit-action.directive.ts | 8 +- .../src/async-actions/bit-submit.directive.ts | 10 +-- .../async-actions/form-button.directive.ts | 15 ++-- .../src/async-actions/standalone.stories.ts | 1 - .../components/src/avatar/avatar.component.ts | 31 +++---- .../src/badge-list/badge-list.component.html | 6 +- .../src/badge-list/badge-list.component.ts | 36 ++++----- .../components/src/badge/badge.component.html | 2 +- libs/components/src/badge/badge.component.ts | 23 +++--- .../src/banner/banner.component.html | 8 +- .../src/banner/banner.component.spec.ts | 6 +- .../components/src/banner/banner.component.ts | 19 ++--- .../src/breadcrumbs/breadcrumb.component.html | 2 +- .../src/breadcrumbs/breadcrumb.component.ts | 14 ++-- .../breadcrumbs/breadcrumbs.component.html | 33 ++++---- .../src/breadcrumbs/breadcrumbs.component.ts | 11 ++- .../components/src/button/button.component.ts | 26 ++---- .../src/callout/callout.component.html | 4 +- .../src/callout/callout.component.spec.ts | 24 +++--- .../src/callout/callout.component.ts | 32 ++++---- .../components/src/callout/callout.stories.ts | 15 ++++ .../src/checkbox/checkbox.component.ts | 4 + .../src/checkbox/checkbox.stories.ts | 2 +- .../chip-select/chip-select.component.html | 4 +- .../src/chip-select/chip-select.component.ts | 18 +++-- .../src/copy-click/copy-click.directive.ts | 26 ++++-- .../src/dialog/dialog/dialog.component.html | 26 +++--- .../src/dialog/dialog/dialog.component.ts | 26 ++---- .../directives/dialog-close.directive.ts | 6 +- .../dialog-title-container.directive.ts | 4 +- .../disclosure-trigger-for.directive.ts | 10 +-- .../src/disclosure/disclosure.component.ts | 2 + .../form-control/form-control.component.ts | 25 ++---- .../src/form-control/label.component.ts | 18 +++-- .../src/form-field/error-summary.component.ts | 7 +- .../src/form-field/error.component.ts | 23 +++--- .../src/form-field/form-field-control.ts | 9 ++- .../src/form-field/form-field.component.ts | 10 ++- .../src/form-field/form-field.stories.ts | 15 ++-- .../password-input-toggle.directive.ts | 23 +++--- .../form-field/password-input-toggle.spec.ts | 18 ++--- .../src/form-field/prefix.directive.ts | 11 +-- .../src/form-field/suffix.directive.ts | 11 +-- .../icon-button/icon-button.component.html | 2 +- .../src/icon-button/icon-button.component.ts | 22 ++--- libs/components/src/icon/icon.component.ts | 28 ++++--- .../src/icon/icon.components.spec.ts | 6 +- .../src/input/autofocus.directive.ts | 18 +++-- libs/components/src/input/autofocus.mdx | 21 +++++ .../components/src/input/autofocus.stories.ts | 26 ++++++ libs/components/src/input/input.directive.ts | 28 ++++--- .../src/item/item-content.component.html | 8 +- .../src/item/item-content.component.ts | 4 +- libs/components/src/link/link.directive.ts | 17 +--- .../src/menu/menu-item.directive.ts | 3 + .../src/menu/menu-trigger-for.directive.ts | 35 ++++---- libs/components/src/menu/menu.component.html | 6 +- libs/components/src/menu/menu.component.ts | 8 +- .../multi-select/multi-select.component.html | 6 +- .../multi-select/multi-select.component.ts | 33 +++++--- .../src/navigation/nav-base.component.ts | 18 ++--- .../src/navigation/nav-group.component.html | 24 +++--- .../src/navigation/nav-group.component.ts | 23 +++--- .../src/navigation/nav-item.component.html | 18 ++--- .../src/navigation/nav-item.component.ts | 6 +- .../src/navigation/nav-logo.component.html | 8 +- .../src/navigation/nav-logo.component.ts | 11 +-- .../src/navigation/side-nav.component.html | 2 +- .../src/navigation/side-nav.component.ts | 4 +- .../src/no-items/no-items.component.html | 2 +- .../src/no-items/no-items.component.ts | 4 +- .../popover/popover-trigger-for.directive.ts | 35 ++++---- .../src/popover/popover.component.html | 2 +- .../src/popover/popover.component.ts | 4 +- .../src/progress/progress.component.html | 4 +- .../src/progress/progress.component.ts | 22 ++--- .../radio-button/radio-button.component.html | 4 +- .../radio-button.component.spec.ts | 81 +++++++++---------- .../radio-button/radio-button.component.ts | 19 +++-- .../src/radio-button/radio-button.stories.ts | 6 +- .../src/radio-button/radio-group.component.ts | 11 ++- .../src/radio-button/radio-input.component.ts | 11 ++- .../src/search/search.component.html | 6 +- .../components/src/search/search.component.ts | 10 +-- .../src/section/section.component.ts | 6 +- .../components/src/select/option.component.ts | 18 ++--- libs/components/src/select/option.ts | 4 + .../src/select/select.component.html | 6 +- .../src/select/select.component.spec.ts | 8 +- .../components/src/select/select.component.ts | 53 +++++++----- .../src/shared/data-to-signal-type.ts | 5 ++ .../src/stepper/stepper.component.ts | 2 + libs/components/src/table/row.directive.ts | 6 +- .../src/table/sortable.component.ts | 43 +++++----- .../src/table/table-scroll.component.html | 4 +- .../src/table/table-scroll.component.ts | 6 +- libs/components/src/table/table.component.ts | 18 +++-- .../tabs/shared/tab-list-item.directive.ts | 11 ++- .../src/tabs/tab-group/tab-body.component.ts | 34 ++++---- .../tabs/tab-group/tab-group.component.html | 10 +-- .../src/tabs/tab-group/tab-group.component.ts | 7 +- .../src/tabs/tab-group/tab.component.ts | 8 +- .../tabs/tab-nav-bar/tab-link.component.html | 2 +- .../tabs/tab-nav-bar/tab-link.component.ts | 15 +++- .../tab-nav-bar/tab-nav-bar.component.html | 2 +- .../tabs/tab-nav-bar/tab-nav-bar.component.ts | 4 +- libs/components/src/tabs/tabs.stories.ts | 8 +- .../components/src/toast/toast.component.html | 8 +- libs/components/src/toast/toast.component.ts | 18 ++--- libs/components/src/toast/toast.service.ts | 5 +- libs/components/src/toast/toast.stories.ts | 9 ++- .../toggle-group/toggle-group.component.ts | 11 +-- .../src/toggle-group/toggle.component.spec.ts | 71 +++++++--------- .../src/toggle-group/toggle.component.ts | 8 +- .../src/typography/typography.directive.ts | 15 ++-- .../item-details-section.component.spec.ts | 6 +- .../login-credentials-view.component.spec.ts | 4 +- 124 files changed, 944 insertions(+), 809 deletions(-) create mode 100644 libs/components/src/input/autofocus.mdx create mode 100644 libs/components/src/input/autofocus.stories.ts create mode 100644 libs/components/src/shared/data-to-signal-type.ts diff --git a/apps/browser/src/platform/popup/layout/popup-back.directive.ts b/apps/browser/src/platform/popup/layout/popup-back.directive.ts index 919cee71ba2..ce8ebff5ec5 100644 --- a/apps/browser/src/platform/popup/layout/popup-back.directive.ts +++ b/apps/browser/src/platform/popup/layout/popup-back.directive.ts @@ -20,6 +20,6 @@ export class PopupBackBrowserDirective extends BitActionDirective { super(buttonComponent, validationService, logService); // override `bitAction` input; the parent handles the rest - this.handler = () => this.router.back(); + this.handler.set(() => this.router.back()); } } diff --git a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts index 6e21c6c142a..d1b82bc114d 100644 --- a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts +++ b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts @@ -195,7 +195,7 @@ describe("NavigationProductSwitcherComponent", () => { const navItem = fixture.debugElement.query(By.directive(NavItemComponent)); - expect(navItem.componentInstance.forceActiveStyles).toBe(true); + expect(navItem.componentInstance.forceActiveStyles()).toBe(true); }); }); diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts index 197b6426468..9bcc3fcac1c 100644 --- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts +++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts @@ -112,7 +112,7 @@ describe("VaultBannersComponent", () => { fixture.detectChanges(); const banner = fixture.debugElement.query(By.directive(BannerComponent)); - expect(banner.componentInstance.bannerType).toBe("premium"); + expect(banner.componentInstance.bannerType()).toBe("premium"); }); it("dismisses premium banner", async () => { diff --git a/libs/components/src/a11y/a11y-title.directive.ts b/libs/components/src/a11y/a11y-title.directive.ts index f5f016b93c0..80486ab9bcf 100644 --- a/libs/components/src/a11y/a11y-title.directive.ts +++ b/libs/components/src/a11y/a11y-title.directive.ts @@ -6,6 +6,8 @@ import { Directive, ElementRef, Input, OnInit, Renderer2 } from "@angular/core"; selector: "[appA11yTitle]", }) export class A11yTitleDirective implements OnInit { + // TODO: Skipped for signal migration because: + // Accessor inputs cannot be migrated as they are too complex. @Input() set appA11yTitle(title: string) { this.title = title; this.setAttributes(); diff --git a/libs/components/src/anon-layout/anon-layout.component.html b/libs/components/src/anon-layout/anon-layout.component.html index 4dfde5e7ef3..e56c14165e4 100644 --- a/libs/components/src/anon-layout/anon-layout.component.html +++ b/libs/components/src/anon-layout/anon-layout.component.html @@ -6,7 +6,7 @@ }" > @@ -14,29 +14,29 @@
-
- +
+
- +

- {{ title }} + {{ title() }}

- {{ title }} + {{ title() }}

-
{{ subtitle }}
+
{{ subtitle() }}
- @if (hideCardWrapper) { + @if (hideCardWrapper()) {
@@ -50,11 +50,11 @@
-