mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-21 11:35:34 +01:00
[CL-442] Fix toggle group display in extension and add fullWidth input to main (#10803)
This commit is contained in:
parent
7f537efa46
commit
f44b7b361d
@ -1,4 +1,11 @@
|
||||
import { Component, EventEmitter, HostBinding, Input, Output } from "@angular/core";
|
||||
import {
|
||||
booleanAttribute,
|
||||
Component,
|
||||
EventEmitter,
|
||||
HostBinding,
|
||||
Input,
|
||||
Output,
|
||||
} from "@angular/core";
|
||||
|
||||
let nextId = 0;
|
||||
|
||||
@ -11,11 +18,15 @@ export class ToggleGroupComponent<TValue = unknown> {
|
||||
private id = nextId++;
|
||||
name = `bit-toggle-group-${this.id}`;
|
||||
|
||||
@Input({ transform: booleanAttribute }) fullWidth?: boolean;
|
||||
@Input() selected?: TValue;
|
||||
@Output() selectedChange = new EventEmitter<TValue>();
|
||||
|
||||
@HostBinding("attr.role") role = "radiogroup";
|
||||
@HostBinding("class") classList = ["tw-flex"];
|
||||
@HostBinding("class")
|
||||
get classList() {
|
||||
return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-grow"] : []);
|
||||
}
|
||||
|
||||
onInputInteraction(value: TValue) {
|
||||
this.selected = value;
|
||||
|
@ -33,7 +33,10 @@ export class ToggleComponent<TValue> {
|
||||
|
||||
get labelClasses() {
|
||||
return [
|
||||
"tw-w-full",
|
||||
"tw-justify-center",
|
||||
"!tw-font-semibold",
|
||||
"tw-inline-block",
|
||||
"tw-transition",
|
||||
"tw-text-center",
|
||||
"tw-border-text-muted",
|
||||
|
Loading…
Reference in New Issue
Block a user