From 5236eb19714bd97bf0eaeaf2a1cc20b8fc5160be Mon Sep 17 00:00:00 2001 From: Vicki League Date: Wed, 25 Jun 2025 17:49:47 -0400 Subject: [PATCH] rest of the components getting consistency updates --- .../src/a11y/a11y-title.directive.ts | 33 ++++++++----------- .../async-actions/form-button.directive.ts | 4 +-- .../components/src/avatar/avatar.component.ts | 8 ++--- .../src/badge-list/badge-list.component.ts | 2 +- .../components/src/button/button.component.ts | 4 +-- .../src/copy-click/copy-click.directive.ts | 2 +- .../src/disclosure/disclosure.component.ts | 2 +- .../form-control/form-control.component.ts | 6 ++-- libs/components/src/icon/icon.component.ts | 2 +- libs/components/src/menu/menu.component.ts | 2 +- .../src/navigation/nav-base.component.ts | 8 ++--- .../popover/popover-trigger-for.directive.ts | 2 +- .../src/progress/progress.component.ts | 2 +- .../components/src/search/search.component.ts | 4 +-- .../src/stepper/stepper.component.ts | 2 +- .../src/typography/typography.directive.ts | 2 +- 16 files changed, 39 insertions(+), 46 deletions(-) diff --git a/libs/components/src/a11y/a11y-title.directive.ts b/libs/components/src/a11y/a11y-title.directive.ts index 58f7834f35b..16b7c7ce384 100644 --- a/libs/components/src/a11y/a11y-title.directive.ts +++ b/libs/components/src/a11y/a11y-title.directive.ts @@ -1,39 +1,32 @@ // FIXME: Update this file to be type safe and remove this and next line // @ts-strict-ignore -import { Directive, ElementRef, Input, OnInit, Renderer2 } from "@angular/core"; +import { Directive, ElementRef, input, OnInit } from "@angular/core"; @Directive({ selector: "[appA11yTitle]", + host: { + "[attr.title]": "this.getTitleAttr()", + "[attr.aria-label]": "this.getAriaLabelAttr()", + }, }) export class A11yTitleDirective implements OnInit { - // TODO: Skipped for migration because: - // Accessor inputs cannot be migrated as they are too complex. - @Input() set appA11yTitle(title: string) { - this.title = title; - this.setAttributes(); - } + appA11yTitle = input(); - private title: string; private originalTitle: string | null; private originalAriaLabel: string | null; - constructor( - private el: ElementRef, - private renderer: Renderer2, - ) {} + constructor(private el: ElementRef) {} ngOnInit() { this.originalTitle = this.el.nativeElement.getAttribute("title"); this.originalAriaLabel = this.el.nativeElement.getAttribute("aria-label"); - this.setAttributes(); } - private setAttributes() { - if (this.originalTitle === null) { - this.renderer.setAttribute(this.el.nativeElement, "title", this.title); - } - if (this.originalAriaLabel === null) { - this.renderer.setAttribute(this.el.nativeElement, "aria-label", this.title); - } + getTitleAttr() { + return this.originalTitle ?? this.appA11yTitle(); + } + + getAriaLabelAttr() { + return this.originalAriaLabel ?? this.appA11yTitle(); } } diff --git a/libs/components/src/async-actions/form-button.directive.ts b/libs/components/src/async-actions/form-button.directive.ts index 3bde0e27570..2bbd8fa87b6 100644 --- a/libs/components/src/async-actions/form-button.directive.ts +++ b/libs/components/src/async-actions/form-button.directive.ts @@ -29,8 +29,8 @@ import { BitSubmitDirective } from "./bit-submit.directive"; export class BitFormButtonDirective implements OnDestroy { private destroy$ = new Subject(); - readonly type = input(undefined); - readonly disabled = input(undefined); + readonly type = input(); + readonly disabled = input(); constructor( buttonComponent: ButtonLikeAbstraction, diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts index 1b47cf288e2..7c41d4e59a0 100644 --- a/libs/components/src/avatar/avatar.component.ts +++ b/libs/components/src/avatar/avatar.component.ts @@ -31,10 +31,10 @@ const SizeClasses: Record = { }) export class AvatarComponent implements OnChanges { readonly border = input(false); - readonly color = input(undefined); - readonly id = input(undefined); - readonly text = input(undefined); - readonly title = input(undefined); + readonly color = input(); + readonly id = input(); + readonly text = input(); + readonly title = input(); readonly size = input("default"); private svgCharCount = 2; diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index a16123b9ba5..b9d9a666261 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -21,7 +21,7 @@ export class BadgeListComponent implements OnChanges { readonly items = input([]); readonly truncate = input(true); - maxItems = input(undefined, { transform: transformMaxItems }); + readonly maxItems = input(undefined, { transform: transformMaxItems }); ngOnChanges() { const maxItems = this.maxItems(); diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts index f61caa8313c..16336b272c8 100644 --- a/libs/components/src/button/button.component.ts +++ b/libs/components/src/button/button.component.ts @@ -107,9 +107,9 @@ export class ButtonComponent implements ButtonLikeAbstraction { readonly buttonType = input("secondary"); - size = input("default"); + readonly size = input("default"); - block = input(false, { transform: booleanAttribute }); + readonly block = input(false, { transform: booleanAttribute }); loading = model(false); diff --git a/libs/components/src/copy-click/copy-click.directive.ts b/libs/components/src/copy-click/copy-click.directive.ts index 5284387dccf..6b30a66c511 100644 --- a/libs/components/src/copy-click/copy-click.directive.ts +++ b/libs/components/src/copy-click/copy-click.directive.ts @@ -57,7 +57,7 @@ export class CopyClickDirective { * * ``` */ - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // Accessor inputs cannot be migrated as they are too complex. @Input() set showToast(value: ToastVariant | "") { // When the `showToast` is set without a value, an empty string will be passed diff --git a/libs/components/src/disclosure/disclosure.component.ts b/libs/components/src/disclosure/disclosure.component.ts index cc316711aae..7d26815d817 100644 --- a/libs/components/src/disclosure/disclosure.component.ts +++ b/libs/components/src/disclosure/disclosure.component.ts @@ -48,7 +48,7 @@ export class DisclosureComponent { /** * Optionally init the disclosure in its opened state */ - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // Accessor inputs cannot be migrated as they are too complex. @Input({ transform: booleanAttribute }) set open(isOpen: boolean) { this._open = isOpen; diff --git a/libs/components/src/form-control/form-control.component.ts b/libs/components/src/form-control/form-control.component.ts index 2153d8dfc83..6c4a3ebfc90 100644 --- a/libs/components/src/form-control/form-control.component.ts +++ b/libs/components/src/form-control/form-control.component.ts @@ -16,11 +16,11 @@ import { BitFormControlAbstraction } from "./form-control.abstraction"; imports: [NgClass, TypographyDirective, I18nPipe], }) export class FormControlComponent { - readonly label = input(undefined); + readonly label = input(); - inline = input(false, { transform: booleanAttribute }); + readonly inline = input(false, { transform: booleanAttribute }); - disableMargin = input(false, { transform: booleanAttribute }); + readonly disableMargin = input(false, { transform: booleanAttribute }); @ContentChild(BitFormControlAbstraction) protected formControl: BitFormControlAbstraction; diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts index 8fba51f872b..dc3710921a4 100644 --- a/libs/components/src/icon/icon.component.ts +++ b/libs/components/src/icon/icon.component.ts @@ -15,7 +15,7 @@ import { Icon, isIcon } from "./icon"; export class BitIconComponent { innerHtml: SafeHtml | null = null; - icon = input(); + readonly icon = input(); readonly ariaLabel = input(undefined); diff --git a/libs/components/src/menu/menu.component.ts b/libs/components/src/menu/menu.component.ts index 238052201f0..0a76d59a09c 100644 --- a/libs/components/src/menu/menu.component.ts +++ b/libs/components/src/menu/menu.component.ts @@ -30,7 +30,7 @@ export class MenuComponent implements AfterContentInit { readonly ariaRole = input<"menu" | "dialog">("menu"); - readonly ariaLabel = input(undefined); + readonly ariaLabel = input(); ngAfterContentInit() { if (this.ariaRole() === "menu") { diff --git a/libs/components/src/navigation/nav-base.component.ts b/libs/components/src/navigation/nav-base.component.ts index cffc41d6b36..1130fd91fc5 100644 --- a/libs/components/src/navigation/nav-base.component.ts +++ b/libs/components/src/navigation/nav-base.component.ts @@ -11,12 +11,12 @@ export abstract class NavBaseComponent { /** * Text to display in main content */ - readonly text = input(undefined); + readonly text = input(); /** * `aria-label` for main content */ - readonly ariaLabel = input(undefined); + readonly ariaLabel = input(); /** * Optional icon, e.g. `"bwi-collection-shared"` @@ -34,14 +34,14 @@ export abstract class NavBaseComponent { * * See: {@link https://github.com/angular/angular/issues/24482} */ - readonly route = input(undefined); + readonly route = input(); /** * Passed to internal `routerLink` * * See {@link RouterLink.relativeTo} */ - readonly relativeTo = input(undefined); + readonly relativeTo = input(); /** * Passed to internal `routerLink` diff --git a/libs/components/src/popover/popover-trigger-for.directive.ts b/libs/components/src/popover/popover-trigger-for.directive.ts index 94002e9ad5f..4bb031ee47c 100644 --- a/libs/components/src/popover/popover-trigger-for.directive.ts +++ b/libs/components/src/popover/popover-trigger-for.directive.ts @@ -29,7 +29,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit { readonly popover = input(undefined, { alias: "bitPopoverTriggerFor" }); - readonly position = input(undefined); + readonly position = input(); private overlayRef: OverlayRef; private closedEventsSub: Subscription; diff --git a/libs/components/src/progress/progress.component.ts b/libs/components/src/progress/progress.component.ts index 6d3868f6f6f..cd1d55ac9eb 100644 --- a/libs/components/src/progress/progress.component.ts +++ b/libs/components/src/progress/progress.component.ts @@ -30,7 +30,7 @@ export class ProgressComponent { readonly bgColor = input("primary"); readonly showText = input(true); readonly size = input("default"); - readonly text = input(undefined); + readonly text = input(); get displayText() { return this.showText() && this.size() !== "small"; diff --git a/libs/components/src/search/search.component.ts b/libs/components/src/search/search.component.ts index 7534163e38d..fa7a38dd510 100644 --- a/libs/components/src/search/search.component.ts +++ b/libs/components/src/search/search.component.ts @@ -44,8 +44,8 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement { protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const); disabled = model(); - readonly placeholder = input(undefined); - readonly autocomplete = input(undefined); + readonly placeholder = input(); + readonly autocomplete = input(); getFocusTarget() { return this.input?.nativeElement; diff --git a/libs/components/src/stepper/stepper.component.ts b/libs/components/src/stepper/stepper.component.ts index eb00575982f..befd4b40cf3 100644 --- a/libs/components/src/stepper/stepper.component.ts +++ b/libs/components/src/stepper/stepper.component.ts @@ -42,7 +42,7 @@ export class StepperComponent extends CdkStepper { private initialOrientation: StepperOrientation | undefined = undefined; // overriding CdkStepper orientation input so we can default to vertical - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // Accessor inputs cannot be migrated as they are too complex. @Input() override get orientation() { diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts index 3605a1ff7f7..08084beba5c 100644 --- a/libs/components/src/typography/typography.directive.ts +++ b/libs/components/src/typography/typography.directive.ts @@ -34,7 +34,7 @@ const margins: Record = { export class TypographyDirective { readonly bitTypography = input(undefined); - noMargin = input(false, { transform: booleanAttribute }); + readonly noMargin = input(false, { transform: booleanAttribute }); @HostBinding("class") get classList() { return styles[this.bitTypography()].concat(