rest of the components getting consistency updates

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<string>();
 
-  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();
   }
 }

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<void>();
 
-  readonly type = input<string>(undefined);
-  readonly disabled = input<boolean>(undefined);
+  readonly type = input<string>();
+  readonly disabled = input<boolean>();
 
   constructor(
     buttonComponent: ButtonLikeAbstraction,

libs/components/src/avatar/avatar.component.ts

@@ -31,10 +31,10 @@ const SizeClasses: Record<SizeTypes, string[]> = {
 })
 export class AvatarComponent implements OnChanges {
   readonly border = input(false);
-  readonly color = input<string>(undefined);
-  readonly id = input<string>(undefined);
-  readonly text = input<string>(undefined);
-  readonly title = input<string>(undefined);
+  readonly color = input<string>();
+  readonly id = input<string>();
+  readonly text = input<string>();
+  readonly title = input<string>();
   readonly size = input<SizeTypes>("default");
 
   private svgCharCount = 2;

libs/components/src/badge-list/badge-list.component.ts

@@ -21,7 +21,7 @@ export class BadgeListComponent implements OnChanges {
   readonly items = input<string[]>([]);
   readonly truncate = input(true);
 
-  maxItems = input(undefined, { transform: transformMaxItems });
+  readonly maxItems = input(undefined, { transform: transformMaxItems });
 
   ngOnChanges() {
     const maxItems = this.maxItems();

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

@@ -107,9 +107,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
 
   readonly buttonType = input<ButtonType>("secondary");
 
-  size = input<ButtonSize>("default");
+  readonly size = input<ButtonSize>("default");
 
-  block = input(false, { transform: booleanAttribute });
+  readonly block = input(false, { transform: booleanAttribute });
 
   loading = model<boolean>(false);
 

libs/components/src/copy-click/copy-click.directive.ts

@@ -57,7 +57,7 @@ export class CopyClickDirective {
    *  <app-component [appCopyClick]="value to copy" showToast="info"/></app-component>
    * ```
    */
-  // 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

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;

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<string>(undefined);
+  readonly label = input<string>();
 
-  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;
 

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<Icon>();
+  readonly icon = input<Icon>();
 
   readonly ariaLabel = input<string | undefined>(undefined);
 

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<string>(undefined);
+  readonly ariaLabel = input<string>();
 
   ngAfterContentInit() {
     if (this.ariaRole() === "menu") {

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<string>(undefined);
+  readonly text = input<string>();
 
   /**
    * `aria-label` for main content
    */
-  readonly ariaLabel = input<string>(undefined);
+  readonly ariaLabel = input<string>();
 
   /**
    * 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<RouterLink["routerLink"]>(undefined);
+  readonly route = input<RouterLink["routerLink"]>();
 
   /**
    * Passed to internal `routerLink`
    *
    * See {@link RouterLink.relativeTo}
    */
-  readonly relativeTo = input<RouterLink["relativeTo"]>(undefined);
+  readonly relativeTo = input<RouterLink["relativeTo"]>();
 
   /**
    * Passed to internal `routerLink`

libs/components/src/popover/popover-trigger-for.directive.ts

@@ -29,7 +29,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
 
   readonly popover = input<PopoverComponent>(undefined, { alias: "bitPopoverTriggerFor" });
 
-  readonly position = input<string>(undefined);
+  readonly position = input<string>();
 
   private overlayRef: OverlayRef;
   private closedEventsSub: Subscription;

libs/components/src/progress/progress.component.ts

@@ -30,7 +30,7 @@ export class ProgressComponent {
   readonly bgColor = input<BackgroundType>("primary");
   readonly showText = input(true);
   readonly size = input<ProgressSizeType>("default");
-  readonly text = input<string>(undefined);
+  readonly text = input<string>();
 
   get displayText() {
     return this.showText() && this.size() !== "small";

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<boolean>();
-  readonly placeholder = input<string>(undefined);
-  readonly autocomplete = input<string>(undefined);
+  readonly placeholder = input<string>();
+  readonly autocomplete = input<string>();
 
   getFocusTarget() {
     return this.input?.nativeElement;

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() {

libs/components/src/typography/typography.directive.ts

@@ -34,7 +34,7 @@ const margins: Record<TypographyType, string[]> = {
 export class TypographyDirective {
   readonly bitTypography = input<TypographyType>(undefined);
 
-  noMargin = input(false, { transform: booleanAttribute });
+  readonly noMargin = input(false, { transform: booleanAttribute });
 
   @HostBinding("class") get classList() {
     return styles[this.bitTypography()].concat(