mirror of
https://github.com/bitwarden/browser
synced 2026-02-25 09:03:28 +00:00
radio button improvements
This commit is contained in:
@@ -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<unknown>(undefined);
|
||||
readonly value = input<unknown>();
|
||||
readonly disabled = input(false);
|
||||
|
||||
constructor(private groupComponent: RadioGroupComponent) {}
|
||||
|
||||
@@ -177,15 +177,15 @@ export const Disabled: Story = {
|
||||
<bit-radio-group formControlName="radio" aria-label="Example radio group">
|
||||
<bit-label>Group of radio buttons</bit-label>
|
||||
|
||||
<bit-radio-button id="radio-first" [value]="0" [disabled]="true">
|
||||
<bit-radio-button [value]="0" [disabled]="true">
|
||||
<bit-label>First</bit-label>
|
||||
</bit-radio-button>
|
||||
|
||||
<bit-radio-button id="radio-second" [value]="1" [disabled]="true">
|
||||
<bit-radio-button [value]="1" [disabled]="true">
|
||||
<bit-label>Second</bit-label>
|
||||
</bit-radio-button>
|
||||
|
||||
<bit-radio-button id="radio-third" [value]="2" [disabled]="true">
|
||||
<bit-radio-button [value]="2" [disabled]="true">
|
||||
<bit-label>Third</bit-label>
|
||||
</bit-radio-button>
|
||||
</bit-radio-group>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user