[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/radio-button/radio-button.component.ts

@@ -0,0 +1,40 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+import { RadioGroupComponent } from "./radio-group.component";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-radio-button",
+  templateUrl: "radio-button.component.html",
+})
+export class RadioButtonComponent {
+  @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
+  @Input() value: unknown;
+
+  constructor(private groupComponent: RadioGroupComponent) {}
+
+  get inputId() {
+    return `${this.id}-input`;
+  }
+
+  get name() {
+    return this.groupComponent.name;
+  }
+
+  get selected() {
+    return this.groupComponent.selected === this.value;
+  }
+
+  get disabled() {
+    return this.groupComponent.disabled;
+  }
+
+  protected onInputChange() {
+    this.groupComponent.onInputChange(this.value);
+  }
+
+  protected onBlur() {
+    this.groupComponent.onBlur();
+  }
+}