[CL-50] Form controls (checkbox and radio) (#4066)

* [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

libs/components/src/form-control/form-control.abstraction.ts

@@ -0,0 +1,6 @@
+export abstract class BitFormControlAbstraction {
+  disabled: boolean;
+  required: boolean;
+  hasError: boolean;
+  error: [string, any];
+}

libs/components/src/form-control/form-control.component.html

@@ -0,0 +1,13 @@
+<label [class]="labelClasses">
+  <ng-content></ng-content>
+  <span [class]="labelContentClasses">
+    <ng-content select="bit-label"></ng-content>
+    <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
+  </span>
+</label>
+<div>
+  <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
+</div>
+<div *ngIf="hasError" class="tw-mt-1 tw-text-danger">
+  <i class="bwi bwi-error"></i> {{ displayError }}
+</div>

libs/components/src/form-control/form-control.component.ts

@@ -0,0 +1,68 @@
+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;
+    }
+  }
+}

libs/components/src/form-control/form-control.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../shared";
+
+import { FormControlComponent } from "./form-control.component";
+import { BitHintComponent } from "./hint.component";
+import { BitLabel } from "./label.directive";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [FormControlComponent, BitLabel, BitHintComponent],
+  exports: [FormControlComponent, BitLabel, BitHintComponent],
+})
+export class FormControlModule {}

libs/components/src/form-control/hint.component.ts

@@ -0,0 +1,14 @@
+import { Directive, HostBinding } from "@angular/core";
+
+// Increments for each instance of this component
+let nextId = 0;
+
+@Directive({
+  selector: "bit-hint",
+  host: {
+    class: "tw-text-muted tw-inline-block tw-mt-1",
+  },
+})
+export class BitHintComponent {
+  @HostBinding() id = `bit-hint-${nextId++}`;
+}

libs/components/src/form-control/index.ts

@@ -0,0 +1,3 @@
+export * from "./form-control.module";
+export * from "./form-control.abstraction";
+export * from "./form-control.component";

libs/components/src/form-control/label.directive.ts

@@ -0,0 +1,6 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "bit-label",
+})
+export class BitLabel {}