mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 16:23:44 +00:00
d17d188534
* [CL-50] feat: scaffold checkbox component * [CL-50] feat: implement control value accessor for checbox * [CL-50] feat: add form-field support to checkbox * [CL-50] feat: implement non-selected checkbox styling * [CL-50] feat: implement checkbox checked styles * [CL-50] feat: improve checkbox form-field compat * [CL-50] fix: checkbox border hover wrong color * [CL-50] feat: use svg instead of bwi font * [CL-50] feat: scaffold radio button * [EC-50] feat: implement radio logic * [CL-50] feat: add radio group tests * [CL-50] feat: add radio-button tests * [CL-50] feat: implement radio button styles * [CL-50] fix: checkbox style tweaks * [CL-50] feat: smooth radio button selection transition * [CL-50] chore: various fixes and cleanups * [CL-50] feat: add form field support * [EC-50] feat-wip: simplify checkbox styling * [EC-50] feat: extract checkbox into separate component * [CL-50] feat: add standalone form control component * [CL-50] feat: remove unnecessary checkbox-control It wasn't really doing anything, might as well use form control directly * [CL-50] chore: create separate folder with form examples * [CL-50] feat: switch to common bit-label * [CL-50] feat: let radio group act as form control * [CL-50] chore: restore form-field component * [CL-50] feat: add support for hint and error * [CL-50] fix: storybook build issue * [CL-50] fix: radio group label wrong text color * [CL-50] fix: translation * [CL-50] fix: put hint and errors outside label * [CL-50] feat: * [CL-50] feat: add custom checkbox example story * [CL-50] chore: remove 1 from full example name * [CL-50] chore: clean up unused icon * [CL-50] chore: clean up unused tailwind plugin * [CL-50] fix: ring offset color in custom example * [CL-50] chore: clean up unused icon * [CL-50] chore: add design link * [CL-50] chore: remove unused import * [CL-50] fix: pr review comments * [CL-50] fix: improve id handling
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
|
import { Component, ContentChild, HostBinding, Input } from "@angular/core";
|
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
|
|
import { BitFormControlAbstraction } from "./form-control.abstraction";
|
|
|
|
@Component({
|
|
selector: "bit-form-control",
|
|
templateUrl: "form-control.component.html",
|
|
})
|
|
export class FormControlComponent {
|
|
@Input() label: string;
|
|
|
|
private _inline: boolean;
|
|
@Input() get inline() {
|
|
return this._inline;
|
|
}
|
|
set inline(value: boolean | string | null) {
|
|
this._inline = coerceBooleanProperty(value);
|
|
}
|
|
|
|
@ContentChild(BitFormControlAbstraction) protected formControl: BitFormControlAbstraction;
|
|
|
|
@HostBinding("class") get classes() {
|
|
return ["tw-mb-6"].concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"]);
|
|
}
|
|
|
|
constructor(private i18nService: I18nService) {}
|
|
|
|
protected get labelClasses() {
|
|
return ["tw-transition", "tw-select-none", "tw-mb-0"].concat(
|
|
this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer"
|
|
);
|
|
}
|
|
|
|
protected get labelContentClasses() {
|
|
return ["tw-font-semibold"].concat(
|
|
this.formControl.disabled ? "tw-text-muted" : "tw-text-main"
|
|
);
|
|
}
|
|
|
|
get required() {
|
|
return this.formControl.required;
|
|
}
|
|
|
|
get hasError() {
|
|
return this.formControl.hasError;
|
|
}
|
|
|
|
get error() {
|
|
return this.formControl.error;
|
|
}
|
|
|
|
get displayError() {
|
|
switch (this.error[0]) {
|
|
case "required":
|
|
return this.i18nService.t("inputRequired");
|
|
default:
|
|
// Attempt to show a custom error message.
|
|
if (this.error[1]?.message) {
|
|
return this.error[1]?.message;
|
|
}
|
|
|
|
return this.error;
|
|
}
|
|
}
|
|
}
|