diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts index f314eea534c..4f217efa0b8 100644 --- a/libs/components/src/radio-button/radio-button.component.ts +++ b/libs/components/src/radio-button/radio-button.component.ts @@ -21,7 +21,7 @@ export class RadioButtonComponent { return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1", "[&_bit-hint]:tw-mt-0"]; } - readonly value = input(undefined); + readonly value = input(); readonly disabled = input(false); constructor(private groupComponent: RadioGroupComponent) {} diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts index f5d7f6732f5..b364115ae74 100644 --- a/libs/components/src/radio-button/radio-button.stories.ts +++ b/libs/components/src/radio-button/radio-button.stories.ts @@ -177,15 +177,15 @@ export const Disabled: Story = { Group of radio buttons - + First - + Second - + Third diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts index a76e4a77291..00735c1acfc 100644 --- a/libs/components/src/radio-button/radio-group.component.ts +++ b/libs/components/src/radio-button/radio-group.component.ts @@ -1,7 +1,7 @@ // FIXME: Update this file to be type safe and remove this and next line // @ts-strict-ignore import { NgTemplateOutlet } from "@angular/common"; -import { Component, ContentChild, HostBinding, Input, Optional, Self, input } from "@angular/core"; +import { Component, ContentChild, HostBinding, Optional, Self, input } from "@angular/core"; import { ControlValueAccessor, NgControl, Validators } from "@angular/forms"; import { I18nPipe } from "@bitwarden/ui-common"; @@ -14,6 +14,9 @@ let nextId = 0; selector: "bit-radio-group", templateUrl: "radio-group.component.html", imports: [NgTemplateOutlet, I18nPipe], + host: { + "[id]": "id()", + }, }) export class RadioGroupComponent implements ControlValueAccessor { selected: unknown; @@ -26,10 +29,7 @@ export class RadioGroupComponent implements ControlValueAccessor { readonly block = input(false); @HostBinding("attr.role") role = "radiogroup"; - // TODO: Skipped for migration because: - // This input is used in combination with `@HostBinding` and migrating would - // break. - @HostBinding("attr.id") @Input() id = `bit-radio-group-${nextId++}`; + readonly id = input(`bit-radio-group-${nextId++}`); @HostBinding("class") classList = ["tw-block", "tw-mb-4"]; @ContentChild(BitLabel) protected label: BitLabel; diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts index b36a0e7b00d..02fe8244569 100644 --- a/libs/components/src/radio-button/radio-input.component.ts +++ b/libs/components/src/radio-button/radio-input.component.ts @@ -16,7 +16,7 @@ let nextId = 0; }, }) export class RadioInputComponent implements BitFormControlAbstraction { - id = input(`bit-radio-input-${nextId++}`); + readonly id = input(`bit-radio-input-${nextId++}`); @HostBinding("class") protected inputClasses = [ @@ -77,7 +77,7 @@ export class RadioInputComponent implements BitFormControlAbstraction { constructor(@Optional() @Self() private ngControl?: NgControl) {} - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // Accessor inputs cannot be migrated as they are too complex. @HostBinding() @Input() @@ -89,7 +89,7 @@ export class RadioInputComponent implements BitFormControlAbstraction { } private _disabled: boolean; - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // Accessor inputs cannot be migrated as they are too complex. @Input() get required() {