mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 00:33:44 +00:00
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import {
|
|
booleanAttribute,
|
|
Component,
|
|
EventEmitter,
|
|
HostBinding,
|
|
Output,
|
|
input,
|
|
model,
|
|
} from "@angular/core";
|
|
|
|
let nextId = 0;
|
|
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
|
|
@Component({
|
|
selector: "bit-toggle-group",
|
|
templateUrl: "./toggle-group.component.html",
|
|
})
|
|
export class ToggleGroupComponent<TValue = unknown> {
|
|
private id = nextId++;
|
|
name = `bit-toggle-group-${this.id}`;
|
|
|
|
readonly fullWidth = input<boolean, unknown>(undefined, { transform: booleanAttribute });
|
|
readonly selected = model<TValue>();
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
|
|
// eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
|
|
@Output() selectedChange = new EventEmitter<TValue>();
|
|
|
|
@HostBinding("attr.role") role = "radiogroup";
|
|
@HostBinding("class")
|
|
get classList() {
|
|
return ["tw-flex"].concat(this.fullWidth() ? ["tw-w-full", "[&>*]:tw-flex-1"] : []);
|
|
}
|
|
|
|
onInputInteraction(value: TValue) {
|
|
this.selected.set(value);
|
|
this.selectedChange.emit(value);
|
|
}
|
|
}
|