mirror of
https://github.com/bitwarden/clients.git
synced 2026-06-19 21:02:50 +08:00
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { HostBinding, Component, Input } from "@angular/core";
|
|
|
|
import { ToggleGroupComponent } from "./toggle-group.component";
|
|
|
|
let nextId = 0;
|
|
|
|
@Component({
|
|
selector: "bit-toggle",
|
|
templateUrl: "./toggle.component.html",
|
|
preserveWhitespaces: false,
|
|
})
|
|
export class ToggleComponent {
|
|
id = nextId++;
|
|
|
|
@Input() value?: string;
|
|
|
|
constructor(private groupComponent: ToggleGroupComponent) {}
|
|
|
|
@HostBinding("tabIndex") tabIndex = "-1";
|
|
@HostBinding("class") classList = ["tw-group"];
|
|
|
|
get name() {
|
|
return this.groupComponent.name;
|
|
}
|
|
|
|
get selected() {
|
|
return this.groupComponent.selected === this.value;
|
|
}
|
|
|
|
get inputClasses() {
|
|
return ["tw-peer", "tw-appearance-none", "tw-outline-none"];
|
|
}
|
|
|
|
get labelClasses() {
|
|
return [
|
|
"!tw-font-semibold",
|
|
"tw-transition",
|
|
"tw-text-center",
|
|
"tw-border-text-muted",
|
|
"!tw-text-muted",
|
|
"tw-border-solid",
|
|
"tw-border-y",
|
|
"tw-border-r",
|
|
"tw-border-l-0",
|
|
"tw-cursor-pointer",
|
|
"group-first-of-type:tw-border-l",
|
|
"group-first-of-type:tw-rounded-l",
|
|
"group-last-of-type:tw-rounded-r",
|
|
|
|
"peer-focus:tw-outline-none",
|
|
"peer-focus:tw-ring",
|
|
"peer-focus:tw-ring-offset-2",
|
|
"peer-focus:tw-ring-primary-500",
|
|
"peer-focus:tw-z-10",
|
|
"peer-focus:tw-bg-primary-500",
|
|
"peer-focus:tw-border-primary-500",
|
|
"peer-focus:!tw-text-contrast",
|
|
|
|
"hover:tw-no-underline",
|
|
"hover:tw-bg-text-muted",
|
|
"hover:tw-border-text-muted",
|
|
"hover:!tw-text-contrast",
|
|
|
|
"peer-checked:tw-bg-primary-500",
|
|
"peer-checked:tw-border-primary-500",
|
|
"peer-checked:!tw-text-contrast",
|
|
"tw-py-1.5",
|
|
"tw-px-3",
|
|
|
|
// Fix for badge being pushed slightly lower when inside a button.
|
|
// Insipired by bootstrap, which does the same.
|
|
"[&>[bitBadge]]:tw-relative",
|
|
"[&>[bitBadge]]:tw--top-px",
|
|
];
|
|
}
|
|
|
|
onInputInteraction() {
|
|
this.groupComponent.onInputInteraction(this.value);
|
|
}
|
|
}
|