@bravobit/bb-foundation 0.23.5 → 0.23.6

package/fesm2015/bravobit-bb-foundation-controls.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, forwardRef, ViewChild, Output, NgModule, Directive, Optional, Self, HostBinding, InjectionToken, Inject, ContentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, forwardRef, ViewChild, Output, NgModule, Directive, InjectionToken, Optional, Inject, HostBinding, HostListener, Self, ContentChild } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@bravobit/bb-foundation/utils';
+import * as i2$1 from '@bravobit/bb-foundation/utils';
 import { UtilsModule } from '@bravobit/bb-foundation/utils';
-import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { startWith, map, distinctUntilChanged, pairwise, switchMap, delay, debounceTime } from 'rxjs/operators';
-import { Subscription, fromEvent, merge, of, BehaviorSubject } from 'rxjs';
+import * as i2$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
+import { BehaviorSubject, Subscription, fromEvent, merge, of } from 'rxjs';
+import { map, startWith, distinctUntilChanged, pairwise, switchMap, delay } from 'rxjs/operators';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$1 from '@bravobit/bb-foundation/localize';
+import * as i1 from '@bravobit/bb-foundation/localize';
 
 class BbiCheckboxGroup {
     constructor(_changeDetectorRef) {
@@ -22,7 +22,9 @@ class BbiCheckboxGroup {
         this._inline = false;
     }
     // Grouped.
-    get grouped() { return this._grouped; }
+    get grouped() {
+        return this._grouped;
+    }
     set grouped(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.grouped) {
@@ -31,7 +33,9 @@ class BbiCheckboxGroup {
         }
     }
     // Required.
-    get required() { return this._required; }
+    get required() {
+        return this._required;
+    }
     set required(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.required) {
@@ -40,7 +44,9 @@ class BbiCheckboxGroup {
         }
     }
     // Inline.
-    get inline() { return this._inline; }
+    get inline() {
+        return this._inline;
+    }
     set inline(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.inline) {
@@ -49,9 +55,9 @@ class BbiCheckboxGroup {
         }
     }
 }
-BbiCheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BbiCheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BbiCheckboxGroup, selector: "bbi-checkbox-group", inputs: { label: "label", grouped: "grouped", required: "required", inline: "inline" }, host: { properties: { "class.grouped": "grouped", "class.required": "required", "class.inline": "inline" }, classAttribute: "bbi-checkbox-group" }, ngImport: i0, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-checkbox-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-checkbox-group-items\">\n    <ng-content select=\"bbi-checkbox\"></ng-content>\n</div>\n", styles: [".bbi-checkbox-group{display:block}.bbi-checkbox-group.grouped{margin-bottom:var(--checkbox-group-grouping, 20px)}.bbi-checkbox-group.required>.bbi-checkbox-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-checkbox-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--checkbox-group-label-color, #525252);font-size:var(--checkbox-group-label-font-size, 14px);margin-bottom:var(--checkbox-group-label-offset, 4px);line-height:var(--checkbox-group-label-line-height, 1.33);font-weight:var(--checkbox-group-label-font-weight, 400)}.bbi-checkbox-group-items{display:flex;flex-direction:column}.bbi-checkbox-group-items:not(:empty){margin-bottom:-var(--checkbox-group-item-spacing-vertical,4px)}.bbi-checkbox-group-items>*{margin-bottom:var(--checkbox-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-checkbox-group.inline>.bbi-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bbi-checkbox-group.inline>.bbi-checkbox-group-items>*:not(:last-child){margin-right:var(--checkbox-group-item-spacing-horizontal, 10px)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiCheckboxGroup, decorators: [{
+BbiCheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiCheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiCheckboxGroup, selector: "bbi-checkbox-group", inputs: { label: "label", grouped: "grouped", required: "required", inline: "inline" }, host: { properties: { "class.grouped": "grouped", "class.required": "required", "class.inline": "inline" }, classAttribute: "bbi-checkbox-group" }, ngImport: i0, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-checkbox-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-checkbox-group-items\">\n    <ng-content select=\"bbi-checkbox\"></ng-content>\n</div>\n", styles: [".bbi-checkbox-group{display:block}.bbi-checkbox-group.grouped{margin-bottom:var(--checkbox-group-grouping, 20px)}.bbi-checkbox-group.required>.bbi-checkbox-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-checkbox-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--checkbox-group-label-color, #525252);font-size:var(--checkbox-group-label-font-size, 14px);margin-bottom:var(--checkbox-group-label-offset, 4px);line-height:var(--checkbox-group-label-line-height, 1.33);font-weight:var(--checkbox-group-label-font-weight, 400)}.bbi-checkbox-group-items{display:flex;flex-direction:column}.bbi-checkbox-group-items:not(:empty){margin-bottom:-var(--checkbox-group-item-spacing-vertical,4px)}.bbi-checkbox-group-items>*{margin-bottom:var(--checkbox-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-checkbox-group.inline>.bbi-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bbi-checkbox-group.inline>.bbi-checkbox-group-items>*:not(:last-child){margin-right:var(--checkbox-group-item-spacing-horizontal, 10px)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiCheckboxGroup, decorators: [{
             type: Component,
             args: [{ selector: 'bbi-checkbox-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bbi-checkbox-group',
@@ -69,13 +75,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 type: Input
             }] } });
 
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class BbiCheckbox {
     constructor(_renderer, _changeDetectorRef) {
         this._renderer = _renderer;
         this._changeDetectorRef = _changeDetectorRef;
         // Readonly data.
-        this.labelId = `bbi-checkbox-${nextUniqueId$1++}`;
+        this.labelId = `bbi-checkbox-${nextUniqueId$2++}`;
         // Outputs.
         this.checkedChange = new EventEmitter();
         this.indeterminateChange = new EventEmitter();
@@ -90,7 +96,9 @@ class BbiCheckbox {
         this.onTouched = () => ({});
     }
     // Checked.
-    get checked() { return this._checked; }
+    get checked() {
+        return this._checked;
+    }
     set checked(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.checked) {
@@ -99,7 +107,9 @@ class BbiCheckbox {
         }
     }
     // Disabled.
-    get disabled() { return this._disabled; }
+    get disabled() {
+        return this._disabled;
+    }
     set disabled(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.disabled) {
@@ -108,7 +118,9 @@ class BbiCheckbox {
         }
     }
     // Grouped.
-    get grouped() { return this._grouped; }
+    get grouped() {
+        return this._grouped;
+    }
     set grouped(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.grouped) {
@@ -117,13 +129,17 @@ class BbiCheckbox {
         }
     }
     // Indeterminate.
-    get indeterminate() { return this._indeterminate; }
+    get indeterminate() {
+        return this._indeterminate;
+    }
     set indeterminate(value) {
         this._indeterminate = coerceBooleanProperty(value);
         this.syncField('indeterminate', this._indeterminate);
     }
     // Required.
-    get required() { return this._required; }
+    get required() {
+        return this._required;
+    }
     set required(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.required) {
@@ -132,7 +148,9 @@ class BbiCheckbox {
         }
     }
     // Hide text.
-    get hideText() { return this._hideText; }
+    get hideText() {
+        return this._hideText;
+    }
     set hideText(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.hideText) {
@@ -197,11 +215,11 @@ class BbiCheckbox {
         this._renderer.setProperty(element, field, value);
     }
 }
-BbiCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiCheckbox, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BbiCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BbiCheckbox, selector: "bbi-checkbox", inputs: { checked: "checked", disabled: "disabled", grouped: "grouped", indeterminate: "indeterminate", required: "required", hideText: "hideText" }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.grouped": "grouped", "class.indeterminate": "indeterminate", "class.required": "required" }, classAttribute: "bbi-checkbox" }, providers: [
+BbiCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiCheckbox, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiCheckbox, selector: "bbi-checkbox", inputs: { checked: "checked", disabled: "disabled", grouped: "grouped", indeterminate: "indeterminate", required: "required", hideText: "hideText" }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.grouped": "grouped", "class.indeterminate": "indeterminate", "class.required": "required" }, classAttribute: "bbi-checkbox" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true }
-    ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span *ngIf=\"!hideText\"\n          class=\"bbi-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox.grouped{margin-bottom:var(--checkbox-grouping, 20px)}.bbi-checkbox.required>.bbi-checkbox-label>.bbi-checkbox-text:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5;margin-left:3px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{background-color:var(--checkbox-colors-accent, var(--accent-color, #1565c0));border:var(--checkbox-border-thickness, 1px) solid var(--checkbox-colors-accent, var(--accent-color, #1565c0))}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{left:calc(var(--checkbox-size, 20px) / 4);width:calc(var(--checkbox-size, 20px) / 2);transform:scale(1) rotate(0);border-left:0 solid var(--checkbox-check-color, white);border-bottom:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:var(--checkbox-outline-color, var(--accent-color, #1565c0))}.bbi-checkbox-input:disabled+.bbi-checkbox-label{cursor:not-allowed;color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label>.bbi-checkbox-text{color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;font-family:inherit;vertical-align:initial;min-height:var(--checkbox-size, 20px);padding-left:var(--checkbox-size, 20px)}.bbi-checkbox-label:before{left:0;content:\"\";position:absolute;width:var(--checkbox-size, 20px);height:var(--checkbox-size, 20px);background-color:initial;border-radius:var(--checkbox-border-radius, 4px);outline-offset:var(--checkbox-outline-offset, 1px);outline:var(--checkbox-outline-thickness, 2px) solid transparent;border:var(--checkbox-border-thickness, 1px) solid var(--checkbox-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{opacity:0;content:\"\";background:none;position:absolute;transform-origin:center;width:var(--checkbox-check-size, 12px);transform:scale(.85) rotate(-60deg);height:calc(var(--checkbox-check-size, 12px) / 2);top:calc(50% - var(--checkbox-check-size, 12px) / 2 * .75);left:calc((var(--checkbox-size, 20px) - var(--checkbox-check-size, 12px)) / 2);border-left:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white);border-bottom:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{color:var(--checkbox-label-color, #111111);padding-left:var(--checkbox-label-offset, 6px);font-size:var(--checkbox-label-font-size, 16px);font-weight:var(--checkbox-label-font-weight, 400);line-height:var(--checkbox-label-line-height, 1.28)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiCheckbox, decorators: [{
+    ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span *ngIf=\"!hideText\"\n          class=\"bbi-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox.grouped{margin-bottom:var(--checkbox-grouping, 20px)}.bbi-checkbox.required>.bbi-checkbox-label>.bbi-checkbox-text:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5;margin-left:3px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{background-color:var(--checkbox-colors-accent, var(--accent-color, #1565c0));border:var(--checkbox-border-thickness, 1px) solid var(--checkbox-colors-accent, var(--accent-color, #1565c0))}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{left:calc(var(--checkbox-size, 20px) / 4);width:calc(var(--checkbox-size, 20px) / 2);transform:scale(1) rotate(0);border-left:0 solid var(--checkbox-check-color, white);border-bottom:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:var(--checkbox-outline-color, var(--accent-color, #1565c0))}.bbi-checkbox-input:disabled+.bbi-checkbox-label{cursor:not-allowed;color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label>.bbi-checkbox-text{color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:var(--checkbox-colors-disabled, #c6c6c6)}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;font-family:inherit;vertical-align:initial;min-height:var(--checkbox-size, 20px);padding-left:var(--checkbox-size, 20px)}.bbi-checkbox-label:before{left:0;content:\"\";position:absolute;width:var(--checkbox-size, 20px);height:var(--checkbox-size, 20px);background-color:initial;border-radius:var(--checkbox-border-radius, 4px);outline-offset:var(--checkbox-outline-offset, 1px);outline:var(--checkbox-outline-thickness, 2px) solid transparent;border:var(--checkbox-border-thickness, 1px) solid var(--checkbox-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{opacity:0;content:\"\";background:none;position:absolute;transform-origin:center;width:var(--checkbox-check-size, 12px);transform:scale(.85) rotate(-60deg);height:calc(var(--checkbox-check-size, 12px) / 2);top:calc(50% - var(--checkbox-check-size, 12px) / 2 * .75);left:calc((var(--checkbox-size, 20px) - var(--checkbox-check-size, 12px)) / 2);border-left:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white);border-bottom:var(--checkbox-check-thickness, 2px) solid var(--checkbox-check-color, white);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{color:var(--checkbox-label-color, #111111);padding-left:var(--checkbox-label-offset, 6px);font-size:var(--checkbox-label-font-size, 16px);font-weight:var(--checkbox-label-font-weight, 400);line-height:var(--checkbox-label-line-height, 1.28)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'bbi-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true }
@@ -234,10 +252,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class CheckboxModule {
 }
-CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: CheckboxModule, declarations: [BbiCheckbox, BbiCheckboxGroup], imports: [CommonModule, UtilsModule], exports: [BbiCheckbox, BbiCheckboxGroup] });
-CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CheckboxModule, imports: [CommonModule, UtilsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CheckboxModule, decorators: [{
+CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: CheckboxModule, declarations: [BbiCheckbox, BbiCheckboxGroup], imports: [CommonModule, UtilsModule], exports: [BbiCheckbox, BbiCheckboxGroup] });
+CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: CheckboxModule, imports: [CommonModule, UtilsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, UtilsModule],
@@ -246,38 +264,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 }]
         }] });
 
-class BbiFormControlInput {
-    constructor(_elementRef, _formControl, _changeDetectorRef, _ngControl) {
-        var _a, _b;
-        this._elementRef = _elementRef;
-        this._formControl = _formControl;
+class BbiToggleGroup {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        // Inputs.
+        this.label = null;
+        this._grouped = false;
+        this._required = false;
+        this._inline = false;
+    }
+    // Grouped.
+    get grouped() { return this._grouped; }
+    set grouped(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.grouped) {
+            this._grouped = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Required.
+    get required() { return this._required; }
+    set required(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.required) {
+            this._required = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Inline.
+    get inline() { return this._inline; }
+    set inline(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.inline) {
+            this._inline = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+}
+BbiToggleGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiToggleGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiToggleGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiToggleGroup, selector: "bbi-toggle-group", inputs: { label: "label", grouped: "grouped", required: "required", inline: "inline" }, host: { properties: { "class.grouped": "grouped", "class.required": "required", "class.inline": "inline" }, classAttribute: "bbi-toggle-group" }, ngImport: i0, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-toggle-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-toggle-group-items\">\n    <ng-content select=\"bbi-toggle\"></ng-content>\n</div>\n", styles: [".bbi-toggle-group{display:block}.bbi-toggle-group.grouped{margin-bottom:var(--toggle-group-grouping, 20px)}.bbi-toggle-group.required>.bbi-toggle-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-toggle-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--toggle-group-label-color, #525252);font-size:var(--toggle-group-label-font-size, 14px);margin-bottom:var(--toggle-group-label-offset, 4px);line-height:var(--toggle-group-label-line-height, 1.33);font-weight:var(--toggle-group-label-font-weight, 400)}.bbi-toggle-group-items{display:flex;flex-direction:column}.bbi-toggle-group-items:not(:empty){margin-bottom:-var(--toggle-group-item-spacing-vertical,4px)}.bbi-toggle-group-items>*{margin-bottom:var(--toggle-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-toggle-group.inline>.bbi-toggle-group-items{flex-wrap:wrap;flex-direction:row}.bbi-toggle-group.inline>.bbi-toggle-group-items>*:not(:last-child){margin-right:var(--toggle-group-item-spacing-horizontal, 10px)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiToggleGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbi-toggle-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bbi-toggle-group',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required',
+                        '[class.inline]': 'inline'
+                    }, preserveWhitespaces: false, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-toggle-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-toggle-group-items\">\n    <ng-content select=\"bbi-toggle\"></ng-content>\n</div>\n", styles: [".bbi-toggle-group{display:block}.bbi-toggle-group.grouped{margin-bottom:var(--toggle-group-grouping, 20px)}.bbi-toggle-group.required>.bbi-toggle-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-toggle-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--toggle-group-label-color, #525252);font-size:var(--toggle-group-label-font-size, 14px);margin-bottom:var(--toggle-group-label-offset, 4px);line-height:var(--toggle-group-label-line-height, 1.33);font-weight:var(--toggle-group-label-font-weight, 400)}.bbi-toggle-group-items{display:flex;flex-direction:column}.bbi-toggle-group-items:not(:empty){margin-bottom:-var(--toggle-group-item-spacing-vertical,4px)}.bbi-toggle-group-items>*{margin-bottom:var(--toggle-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-toggle-group.inline>.bbi-toggle-group-items{flex-wrap:wrap;flex-direction:row}.bbi-toggle-group.inline>.bbi-toggle-group-items>*:not(:last-child){margin-right:var(--toggle-group-item-spacing-horizontal, 10px)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], grouped: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
+let nextUniqueId$1 = 0;
+class BbiToggle {
+    constructor(_renderer, _changeDetectorRef) {
+        this._renderer = _renderer;
         this._changeDetectorRef = _changeDetectorRef;
-        this._ngControl = _ngControl;
         // Readonly data.
-        this.labelId = (_b = (_a = this._formControl) === null || _a === void 0 ? void 0 : _a.labelId) !== null && _b !== void 0 ? _b : null;
-        // State.
-        this.errors = null;
-        this.focused = false;
-        // Subscriptions.
-        this._subscription = new Subscription();
+        this.labelId = `bbi-toggle-${nextUniqueId$1++}`;
+        // Outputs.
+        this.checkedChange = new EventEmitter();
+        this._checked = false;
         this._disabled = false;
-        this._readonly = false;
+        this._grouped = false;
         this._required = false;
+        this._hideText = false;
+        // Methods.
+        this.onChange = () => ({});
+        this.onTouched = () => ({});
     }
-    ngOnInit() {
-        this.handleControlDisabledStatus();
-        this.handleControlErrorStatus();
-        this.handleFocusedState();
+    // Checked.
+    get checked() {
+        return this._checked;
     }
-    ngOnDestroy() {
-        var _a;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    set checked(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.checked) {
+            this._checked = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
     }
-    get control() {
-        var _a;
-        return (_a = this._ngControl) !== null && _a !== void 0 ? _a : null;
+    // Disabled.
+    get disabled() {
+        return this._disabled;
     }
-    get disabled() { return this._disabled; }
     set disabled(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.disabled) {
@@ -285,19 +361,19 @@ class BbiFormControlInput {
             this._changeDetectorRef.markForCheck();
         }
     }
-    get readonly() { return this._readonly; }
-    set readonly(value) {
+    // Grouped.
+    get grouped() {
+        return this._grouped;
+    }
+    set grouped(value) {
         const newValue = coerceBooleanProperty(value);
-        if (newValue !== this.readonly) {
-            this._readonly = newValue;
+        if (newValue !== this.grouped) {
+            this._grouped = newValue;
             this._changeDetectorRef.markForCheck();
         }
     }
+    // Required.
     get required() {
-        var _a, _b;
-        if (this._ngControl) {
-            return (_b = (_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.hasValidator(Validators.required);
-        }
         return this._required;
     }
     set required(value) {
@@ -307,67 +383,129 @@ class BbiFormControlInput {
             this._changeDetectorRef.markForCheck();
         }
     }
-    handleControlErrorStatus() {
-        if (!this._ngControl) {
-            return;
-        }
-        const errors$ = this._ngControl.statusChanges.pipe(startWith(this._ngControl.status), map(() => { var _a, _b; return (_b = (_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : null; }));
-        const subscription = errors$.subscribe(errors => {
-            this.errors = errors;
+    // Hide text.
+    get hideText() {
+        return this._hideText;
+    }
+    set hideText(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.hideText) {
+            this._hideText = newValue;
             this._changeDetectorRef.markForCheck();
-        });
-        this._subscription.add(subscription);
+        }
     }
-    handleControlDisabledStatus() {
-        if (!this._ngControl) {
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(newValue) {
+        this.checked = !!newValue;
+    }
+    toggle() {
+        this.checked = !this.checked;
+    }
+    onClickEvent(event) {
+        event.stopPropagation();
+        if (this.disabled) {
             return;
         }
-        const disabled$ = this._ngControl.statusChanges.pipe(startWith(this._ngControl.status), map(status => status === 'DISABLED'), distinctUntilChanged());
-        const subscription = disabled$.subscribe(disabled => {
-            this.disabled = disabled;
-        });
-        this._subscription.add(subscription);
+        this.toggle();
+        // Emit our custom change event if the native input emitted one.
+        // It is important to only emit it, if the native input triggered one, because
+        // we don't want to trigger a change event, when the `checked` variable changes for example.
+        this.emitChangeEvent();
     }
-    handleFocusedState() {
-        const focus$ = fromEvent(this._elementRef.nativeElement, 'focus').pipe(map(() => true));
-        const blur$ = fromEvent(this._elementRef.nativeElement, 'blur').pipe(map(() => false));
-        const focused$ = merge(focus$, blur$).pipe(startWith(false), pairwise(), switchMap(([oldValue, currentValue]) => {
-            if (oldValue && !currentValue) {
-                return of(currentValue).pipe(delay(100));
-            }
-            return of(currentValue);
-        }), distinctUntilChanged());
-        const subscription = focused$.subscribe(focused => this.focused = focused);
-        this._subscription.add(subscription);
+    onChangeEvent(event) {
+        // We always have to stop propagation on the change event.
+        // Otherwise the change event, from the input element, will bubble up and
+        // emit its event object to the `change` output.
+        event.stopPropagation();
+    }
+    emitChangeEvent() {
+        var _a;
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.checked);
+        this.checkedChange.emit(this.checked);
+        this.syncField('checked', this.checked);
+    }
+    syncField(field, value) {
+        var _a;
+        const element = (_a = this.inputElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!element) {
+            return;
+        }
+        this._renderer.setProperty(element, field, value);
     }
 }
-BbiFormControlInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControlInput, deps: [{ token: i0.ElementRef }, { token: BbiFormControl }, { token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-BbiFormControlInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BbiFormControlInput, selector: "input[bbiFormControlInput]", inputs: { disabled: "disabled", readonly: "readonly", required: "required" }, host: { properties: { "attr.id": "this.labelId", "required": "this.required" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControlInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[bbiFormControlInput]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: BbiFormControl }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Self
-                    }] }];
-    }, propDecorators: { labelId: [{
-                type: HostBinding,
-                args: ['attr.id']
+BbiToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiToggle, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiToggle, selector: "bbi-toggle", inputs: { checked: "checked", disabled: "disabled", grouped: "grouped", required: "required", hideText: "hideText" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.grouped": "grouped", "class.required": "required" }, classAttribute: "bbi-toggle" }, providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiToggle), multi: true }
+    ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-toggle-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-toggle-label\">\n    <div class=\"bbi-toggle-switch\"></div>\n    <span *ngIf=\"!hideText\"\n          class=\"bbi-toggle-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-toggle{display:block}.bbi-toggle.grouped{margin-bottom:var(--toggle-grouping, 20px)}.bbi-toggle-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-toggle-switch{display:block;position:relative;width:var(--toggle-width, 40px);height:var(--toggle-height, 20px);min-width:var(--toggle-width, 40px);min-height:var(--toggle-height, 20px);outline-offset:var(--toggle-outline-offset, 1px);border-radius:calc(var(--toggle-height, 20px) / 2);background-color:var(--toggle-colors-background, #aeaeae);outline:var(--toggle-outline-thickness, 2px) solid transparent;transition:background-color 70ms cubic-bezier(.2,0,1,.9)}.bbi-toggle-switch:before{content:\"\";position:absolute;border-radius:50%;top:calc(.125 * var(--toggle-height, 20px));width:calc(.75 * var(--toggle-height, 20px));height:calc(.75 * var(--toggle-height, 20px));left:calc(.125 * var(--toggle-height, 20px));background-color:var(--toggle-colors-indicator, #ffffff);transition:transform 70ms cubic-bezier(.2,0,1,.9)}.bbi-toggle-input:checked+.bbi-toggle-label>.bbi-toggle-switch{background-color:var(--toggle-colors-accent, var(--accent-color, #1565c0))}.bbi-toggle-input:checked+.bbi-toggle-label>.bbi-toggle-switch:before{transform:translate(calc(var(--toggle-width, 40px) - .75 * var(--toggle-height, 20px) - .125 * var(--toggle-height, 20px) * 2))}.bbi-toggle-input:focus+.bbi-toggle-label>.bbi-toggle-switch{outline-color:var(--toggle-outline-color, var(--accent-color, #1565c0))}.bbi-toggle-input:disabled+.bbi-toggle-label{cursor:not-allowed}.bbi-toggle-input:disabled+.bbi-toggle-label>.bbi-toggle-text{color:var(--toggle-colors-disabled, #c6c6c6)}.bbi-toggle-label{display:flex;cursor:pointer;align-items:center}.bbi-toggle-text{color:var(--toggle-label-color, #111111);padding-left:var(--toggle-label-offset, 6px);font-size:var(--toggle-label-font-size, 16px);font-weight:var(--toggle-label-font-weight, 400);line-height:var(--toggle-label-line-height, 1.28)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbi-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiToggle), multi: true }
+                    ], host: {
+                        'class': 'bbi-toggle',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required'
+                    }, preserveWhitespaces: false, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-toggle-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-toggle-label\">\n    <div class=\"bbi-toggle-switch\"></div>\n    <span *ngIf=\"!hideText\"\n          class=\"bbi-toggle-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-toggle{display:block}.bbi-toggle.grouped{margin-bottom:var(--toggle-grouping, 20px)}.bbi-toggle-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-toggle-switch{display:block;position:relative;width:var(--toggle-width, 40px);height:var(--toggle-height, 20px);min-width:var(--toggle-width, 40px);min-height:var(--toggle-height, 20px);outline-offset:var(--toggle-outline-offset, 1px);border-radius:calc(var(--toggle-height, 20px) / 2);background-color:var(--toggle-colors-background, #aeaeae);outline:var(--toggle-outline-thickness, 2px) solid transparent;transition:background-color 70ms cubic-bezier(.2,0,1,.9)}.bbi-toggle-switch:before{content:\"\";position:absolute;border-radius:50%;top:calc(.125 * var(--toggle-height, 20px));width:calc(.75 * var(--toggle-height, 20px));height:calc(.75 * var(--toggle-height, 20px));left:calc(.125 * var(--toggle-height, 20px));background-color:var(--toggle-colors-indicator, #ffffff);transition:transform 70ms cubic-bezier(.2,0,1,.9)}.bbi-toggle-input:checked+.bbi-toggle-label>.bbi-toggle-switch{background-color:var(--toggle-colors-accent, var(--accent-color, #1565c0))}.bbi-toggle-input:checked+.bbi-toggle-label>.bbi-toggle-switch:before{transform:translate(calc(var(--toggle-width, 40px) - .75 * var(--toggle-height, 20px) - .125 * var(--toggle-height, 20px) * 2))}.bbi-toggle-input:focus+.bbi-toggle-label>.bbi-toggle-switch{outline-color:var(--toggle-outline-color, var(--accent-color, #1565c0))}.bbi-toggle-input:disabled+.bbi-toggle-label{cursor:not-allowed}.bbi-toggle-input:disabled+.bbi-toggle-label>.bbi-toggle-text{color:var(--toggle-colors-disabled, #c6c6c6)}.bbi-toggle-label{display:flex;cursor:pointer;align-items:center}.bbi-toggle-text{color:var(--toggle-label-color, #111111);padding-left:var(--toggle-label-offset, 6px);font-size:var(--toggle-label-font-size, 16px);font-weight:var(--toggle-label-font-weight, 400);line-height:var(--toggle-label-line-height, 1.28)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputElementRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], checkedChange: [{
+                type: Output
+            }], checked: [{
+                type: Input
             }], disabled: [{
                 type: Input
-            }], readonly: [{
+            }], grouped: [{
                 type: Input
             }], required: [{
-                type: HostBinding,
-                args: ['required']
-            }, {
+                type: Input
+            }], hideText: [{
                 type: Input
             }] } });
 
+class ToggleModule {
+}
+ToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: ToggleModule, declarations: [BbiToggle, BbiToggleGroup], imports: [CommonModule, UtilsModule], exports: [BbiToggle, BbiToggleGroup] });
+ToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ToggleModule, imports: [CommonModule, UtilsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, UtilsModule],
+                    declarations: [BbiToggle, BbiToggleGroup],
+                    exports: [BbiToggle, BbiToggleGroup]
+                }]
+        }] });
+
+function shouldShowErrors(mode, control, submitted, focused, readonly) {
+    var _a, _b;
+    if (mode === 'hidden' || readonly || (control === null || control === void 0 ? void 0 : control.disabled)) {
+        return false;
+    }
+    // When submitted always show the errors.
+    if (submitted && !focused) {
+        return true;
+    }
+    // We want to show changes even when the user is focused.
+    if (mode === 'changes') {
+        return (_a = control === null || control === void 0 ? void 0 : control.dirty) !== null && _a !== void 0 ? _a : false;
+    }
+    // On blur show the error.
+    if (mode === 'blur' && !focused) {
+        return (_b = control === null || control === void 0 ? void 0 : control.touched) !== null && _b !== void 0 ? _b : false;
+    }
+    // Must not show the errors.
+    return false;
+}
+
 class BbiControlErrorSubmit {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
@@ -402,9 +540,9 @@ class BbiControlErrorSubmit {
         this._subscription.add(subscription);
     }
 }
-BbiControlErrorSubmit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiControlErrorSubmit, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BbiControlErrorSubmit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BbiControlErrorSubmit, selector: "form", exportAs: ["bbiControlErrorSubmit"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiControlErrorSubmit, decorators: [{
+BbiControlErrorSubmit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiControlErrorSubmit, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BbiControlErrorSubmit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: BbiControlErrorSubmit, selector: "form", exportAs: ["bbiControlErrorSubmit"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiControlErrorSubmit, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form',
@@ -468,13 +606,13 @@ class BbiControlError {
             : data === null || data === void 0 ? void 0 : data.token;
     }
 }
-BbiControlError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiControlError, deps: [{ token: i1$1.Localize, optional: true }, { token: BBI_CONTROL_ERRORS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-BbiControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BbiControlError, selector: "bbi-control-error", inputs: { errors: "errors" }, host: { properties: { "@errorAnimation": "this.animation" }, classAttribute: "bbi-control-error" }, ngImport: i0, template: "{{ error ?? '...' }}\n", styles: [".bbi-control-error{color:var(--control-error-color, var(--error-color, #bd322a));display:block;margin-top:var(--control-error-spacing, 4px);font-size:var(--control-error-font-size, 13px);font-weight:var(--control-error-font-weight, 400);line-height:var(--control-error-line-height, 1.5)}\n"], animations: [controlErrorAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiControlError, decorators: [{
+BbiControlError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiControlError, deps: [{ token: i1.Localize, optional: true }, { token: BBI_CONTROL_ERRORS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+BbiControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiControlError, selector: "bbi-control-error", inputs: { errors: "errors" }, host: { properties: { "@errorAnimation": "this.animation" }, classAttribute: "bbi-control-error" }, ngImport: i0, template: "{{ error ?? '...' }}\n", styles: [".bbi-control-error{color:var(--control-error-color, var(--error-color, #bd322a));display:block;margin-top:var(--control-error-spacing, 4px);font-size:var(--control-error-font-size, 13px);font-weight:var(--control-error-font-weight, 400);line-height:var(--control-error-line-height, 1.5)}\n"], animations: [controlErrorAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiControlError, decorators: [{
             type: Component,
             args: [{ selector: 'bbi-control-error', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bbi-control-error' }, preserveWhitespaces: false, animations: [controlErrorAnimation], template: "{{ error ?? '...' }}\n", styles: [".bbi-control-error{color:var(--control-error-color, var(--error-color, #bd322a));display:block;margin-top:var(--control-error-spacing, 4px);font-size:var(--control-error-font-size, 13px);font-weight:var(--control-error-font-weight, 400);line-height:var(--control-error-line-height, 1.5)}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$1.Localize, decorators: [{
+        return [{ type: i1.Localize, decorators: [{
                         type: Optional
                     }] }, { type: undefined, decorators: [{
                         type: Optional
@@ -489,24 +627,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 type: Input
             }] } });
 
-let nextUniqueId = 0;
-class BbiFormControl {
-    constructor(_changeDetectorRef, _errorSubmit) {
+class BbiRadioGroup {
+    constructor(_injector, _changeDetectorRef, _errorSubmit) {
+        this._injector = _injector;
         this._changeDetectorRef = _changeDetectorRef;
         this._errorSubmit = _errorSubmit;
-        // Readonly data.
-        this.labelId = `bbi-form-control-${nextUniqueId++}`;
         // Inputs.
         this.label = null;
-        this.hint = null;
         this.errorMode = 'blur';
+        // Outputs.
+        this.valueChange = new EventEmitter();
         // State.
         this.validationErrors$ = new BehaviorSubject(null);
-        this.errors$ = this.validationErrors$.pipe(debounceTime(5), distinctUntilChanged());
+        this._value = null;
+        this._disabled = false;
         this._grouped = false;
-    }
+        this._readonly = false;
+        this._required = false;
+        this._inline = false;
+        // Methods.
+        this.onChange = () => ({});
+        this.onTouched = () => ({});
+    }
+    // Value.
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    // Disabled.
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.disabled) {
+            this._disabled = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
     // Grouped.
-    get grouped() { return this._grouped; }
+    get grouped() {
+        return this._grouped;
+    }
     set grouped(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this.grouped) {
@@ -514,10 +679,45 @@ class BbiFormControl {
             this._changeDetectorRef.markForCheck();
         }
     }
+    // Readonly.
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.grouped) {
+            this._readonly = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Required.
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.required) {
+            this._required = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Inline.
+    get inline() {
+        return this._inline;
+    }
+    set inline(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.inline) {
+            this._inline = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
     ngDoCheck() {
         var _a, _b;
-        const hasErrors = this.showErrors();
-        const errors = (_b = (_a = this.formControlInput) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : null;
+        const control = this._injector.get(NgControl);
+        const submitted = (_a = this._errorSubmit) === null || _a === void 0 ? void 0 : _a.submitted;
+        const hasErrors = shouldShowErrors(this.errorMode, control, submitted, false, this.readonly);
+        const errors = (_b = control === null || control === void 0 ? void 0 : control.errors) !== null && _b !== void 0 ? _b : null;
         const newValue = hasErrors ? errors : null;
         const equal = JSON.stringify(newValue) === JSON.stringify(this.validationErrors$.getValue());
         if (equal) {
@@ -525,32 +725,337 @@ class BbiFormControl {
         }
         this.validationErrors$.next(newValue);
     }
-    showErrors() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        // When the error mode is none we don't want to show
-        if (this.errorMode === 'hidden' || ((_a = this.formControlInput) === null || _a === void 0 ? void 0 : _a.readonly)) {
-            return false;
+    select(value) {
+        var _a, _b;
+        if (this.value === value || this.disabled || this.readonly) {
+            return;
         }
-        // When submitted always show the errors.
-        const focused = (_b = this.formControlInput) === null || _b === void 0 ? void 0 : _b.focused;
-        if (((_c = this._errorSubmit) === null || _c === void 0 ? void 0 : _c.submitted) && !focused) {
-            return true;
+        this.value = value;
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
+        this.valueChange.emit(this.value);
+        (_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(newValue) {
+        this.value = newValue;
+    }
+}
+BbiRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiRadioGroup, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: BbiControlErrorSubmit, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+BbiRadioGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiRadioGroup, selector: "bbi-radio-group", inputs: { label: "label", errorMode: "errorMode", value: "value", disabled: "disabled", grouped: "grouped", readonly: "readonly", required: "required", inline: "inline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled", "class.readonly": "readonly", "class.grouped": "grouped", "class.required": "required", "class.inline": "inline", "class.error": "validationErrors$?.getValue()" }, classAttribute: "bbi-radio-group" }, providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiRadioGroup), multi: true }
+    ], ngImport: i0, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-radio-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-radio-group-items\">\n    <ng-content select=\"bbi-radio-button\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"validationErrors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n", styles: [".bbi-radio-group{display:block}.bbi-radio-group.grouped{margin-bottom:var(--radio-group-grouping, 20px)}.bbi-radio-group.readonly{pointer-events:none}.bbi-radio-group.error>.bbi-radio-group-label{color:var(--radio-group-error, var(--error-color, #bd322a))}.bbi-radio-group.required>.bbi-radio-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-radio-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--radio-group-label-color, #525252);font-size:var(--radio-group-label-font-size, 14px);margin-bottom:var(--radio-group-label-offset, 4px);line-height:var(--radio-group-label-line-height, 1.33);font-weight:var(--radio-group-label-font-weight, 400)}.bbi-radio-group-items{display:flex;flex-direction:column}.bbi-radio-group-items:not(:empty){margin-bottom:-var(--radio-group-item-spacing-vertical,4px)}.bbi-radio-group-items>*{margin-bottom:var(--radio-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-radio-group.inline>.bbi-radio-group-items{flex-wrap:wrap;flex-direction:row}.bbi-radio-group.inline>.bbi-radio-group-items>*:not(:last-child){margin-right:var(--radio-group-item-spacing-horizontal, 10px)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BbiControlError, selector: "bbi-control-error", inputs: ["errors"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbi-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiRadioGroup), multi: true }
+                    ], host: {
+                        'class': 'bbi-radio-group',
+                        '[class.disabled]': 'disabled',
+                        '[class.readonly]': 'readonly',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required',
+                        '[class.inline]': 'inline',
+                        '[class.error]': 'validationErrors$?.getValue()'
+                    }, preserveWhitespaces: false, template: "<label *ngIf=\"label as labelContent\"\n       class=\"bbi-radio-group-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-radio-group-items\">\n    <ng-content select=\"bbi-radio-button\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"validationErrors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n", styles: [".bbi-radio-group{display:block}.bbi-radio-group.grouped{margin-bottom:var(--radio-group-grouping, 20px)}.bbi-radio-group.readonly{pointer-events:none}.bbi-radio-group.error>.bbi-radio-group-label{color:var(--radio-group-error, var(--error-color, #bd322a))}.bbi-radio-group.required>.bbi-radio-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-radio-group-label{border:0;padding:0;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--radio-group-label-color, #525252);font-size:var(--radio-group-label-font-size, 14px);margin-bottom:var(--radio-group-label-offset, 4px);line-height:var(--radio-group-label-line-height, 1.33);font-weight:var(--radio-group-label-font-weight, 400)}.bbi-radio-group-items{display:flex;flex-direction:column}.bbi-radio-group-items:not(:empty){margin-bottom:-var(--radio-group-item-spacing-vertical,4px)}.bbi-radio-group-items>*{margin-bottom:var(--radio-group-item-spacing-vertical, 4px)}@media only screen and (min-width: 768px){.bbi-radio-group.inline>.bbi-radio-group-items{flex-wrap:wrap;flex-direction:row}.bbi-radio-group.inline>.bbi-radio-group-items>*:not(:last-child){margin-right:var(--radio-group-item-spacing-horizontal, 10px)}}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: BbiControlErrorSubmit, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], errorMode: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], grouped: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
+class BbiRadioButton {
+    constructor(_radioGroup, _changeDetectorRef) {
+        this._radioGroup = _radioGroup;
+        this._changeDetectorRef = _changeDetectorRef;
+        // Inputs.
+        this.value = null;
+        this._disabled = false;
+        this._hideText = false;
+    }
+    // Disabled.
+    get disabled() {
+        var _a;
+        return ((_a = this._radioGroup) === null || _a === void 0 ? void 0 : _a.disabled) || this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.disabled) {
+            this._disabled = newValue;
+            this._changeDetectorRef.markForCheck();
         }
-        // We want to show changes even when the user is focused.
-        if (this.errorMode === 'changes') {
-            return (_f = (_e = (_d = this.formControlInput) === null || _d === void 0 ? void 0 : _d.control) === null || _e === void 0 ? void 0 : _e.dirty) !== null && _f !== void 0 ? _f : false;
+    }
+    // Hide text.
+    get hideText() {
+        return this._hideText;
+    }
+    set hideText(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.hideText) {
+            this._hideText = newValue;
+            this._changeDetectorRef.markForCheck();
         }
-        // On blur show the error.
-        if (this.errorMode === 'blur' && !focused) {
-            return (_j = (_h = (_g = this.formControlInput) === null || _g === void 0 ? void 0 : _g.control) === null || _h === void 0 ? void 0 : _h.touched) !== null && _j !== void 0 ? _j : false;
+    }
+    onClick() {
+        if (this.disabled) {
+            return;
         }
-        // Must not show the errors.
-        return false;
+        this._radioGroup.select(this.value);
+    }
+    onSpacePressed() {
+        return this.onClick();
+    }
+    get selected() {
+        var _a;
+        return ((_a = this._radioGroup) === null || _a === void 0 ? void 0 : _a.value) === this.value;
     }
 }
-BbiFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BbiControlErrorSubmit, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-BbiFormControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BbiFormControl, selector: "bbi-form-control", inputs: { label: "label", hint: "hint", errorMode: "errorMode", grouped: "grouped" }, host: { properties: { "class.grouped": "grouped", "class.disabled": "formControlInput?.disabled", "class.required": "formControlInput?.required", "class.readonly": "formControlInput?.readonly", "class.focused": "formControlInput?.focused", "class.error": "validationErrors$?.getValue()" }, classAttribute: "bbi-form-control" }, queries: [{ propertyName: "formControlInput", first: true, predicate: BbiFormControlInput, descendants: true }], ngImport: i0, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bbi-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-form-control-container\">\n    <ng-content select=\"[bbi-form-control-addon=prefix]\"></ng-content>\n    <ng-content select=\"input[bbiFormControlInput]\"></ng-content>\n    <ng-content select=\"[bbi-form-control-addon=suffix]\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"errors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n\n<div *ngIf=\"hint as hintContent\"\n     class=\"bbi-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n</div>\n", styles: [".bbi-form-control{display:block}.bbi-form-control.grouped{margin-bottom:var(--form-control-grouping, 20px)}.bbi-form-control.disabled{pointer-events:none;opacity:var(--form-control-disabled-opacity, .25)}.bbi-form-control.disabled>.bbi-form-control-container{color:var(--form-control-disabled-color, #111111);background:var(--form-control-disabled-background, white);border-radius:var(--form-control-disabled-border-radius, 6px);border:var(--form-control-disabled-border-width, 1px) var(--form-control-disabled-border-style, solid) var(--form-control-disabled-border-color, #212121)}.bbi-form-control.required:not([data-required-visually-hidden])>.bbi-form-control-label:after{content:\"*\";color:#bd322a;font-size:14px;vertical-align:text-top}.bbi-form-control:not(.readonly).focused>.bbi-form-control-container{color:var(--form-control-focused-color, #111111);box-shadow:var(--form-control-focused-shadow, 0 0 0 3px rgba(0, 123, 255, .2));background:var(--form-control-focused-background, white);border-radius:var(--form-control-focused-border-radius, 6px);border:var(--form-control-focused-border-width, 1px) var(--form-control-focused-border-style, solid) var(--form-control-focused-border-color, #212121)}.bbi-form-control:not(.readonly).error>.bbi-form-control-label{color:var(--form-control-error-color, var(--error-color, #bd322a))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container{color:var(--form-control-error-color, var(--error-color, #bd322a));border-color:var(--form-control-error-color, var(--error-color, #bd322a));background:var(--form-control-error-background, rgba(189, 50, 42, .1))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container>input::placeholder{color:var(--form-control-error-placeholder-color, rgba(189, 50, 42, .4))}.bbi-form-control-label{color:#525252;display:block;font-size:14px;font-weight:400;margin-bottom:4px}.bbi-form-control-container{display:flex;align-items:center;color:var(--form-control-color, #111111);border-radius:var(--form-control-border-radius, 6px);background-color:var(--form-control-background, white);border:var(--form-control-border-width, 1px) var(--form-control-border-style, solid) var(--form-control-border-color, rgba(67, 90, 111, .3))}.bbi-form-control-container>input{width:100%;border:none;height:40px;color:inherit;padding:0 10px;background-color:transparent}.bbi-form-control-container>input::placeholder{color:#d2d2d2}.bbi-form-control-hint{display:block;color:#525252;font-size:13px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BbiControlError, selector: "bbi-control-error", inputs: ["errors"] }, { kind: "directive", type: i2.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControl, decorators: [{
+BbiRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiRadioButton, deps: [{ token: BbiRadioGroup }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiRadioButton, selector: "bbi-radio-button", inputs: { value: "value", disabled: "disabled", hideText: "hideText" }, host: { listeners: { "click": "onClick()", "keydown.space": "onSpacePressed()" }, properties: { "class.disabled": "disabled", "tabindex": "disabled ? -1 : 0", "class.selected": "this.selected" }, classAttribute: "bbi-radio-button" }, ngImport: i0, template: "<div class=\"bbi-radio-button-indicator\"></div>\n<span *ngIf=\"!hideText\"\n      class=\"bbi-radio-button-text\"><ng-content></ng-content></span>\n", styles: [".bbi-radio-button{display:flex;cursor:pointer;align-items:center}.bbi-radio-button:not(.disabled):focus>.bbi-radio-button-indicator{outline-color:var(--radio-button-outline-color, var(--accent-color, #1565c0))}.bbi-radio-button.disabled{-webkit-user-select:none;user-select:none;cursor:not-allowed}.bbi-radio-button.disabled>.bbi-radio-button-indicator{border-color:var(--radio-button-colors-disabled, #c6c6c6)}.bbi-radio-button.disabled>.bbi-radio-button-text{color:var(--radio-button-colors-disabled, #c6c6c6)}.bbi-radio-button.selected>.bbi-radio-button-indicator{border-color:var(--radio-button-colors-accent, var(--accent-color, #1565c0))}.bbi-radio-button.selected>.bbi-radio-button-indicator:after{opacity:1;transform:none}.bbi-radio-button-indicator{display:flex;align-items:center;justify-content:center;width:var(--radio-button-size, 20px);height:var(--radio-button-size, 20px);min-width:var(--radio-button-size, 20px);min-height:var(--radio-button-size, 20px);border-radius:var(--radio-button-border-radius, 50%);outline-offset:var(--radio-button-outline-offset, 1px);outline:var(--radio-button-outline-thickness, 2px) solid transparent;border:var(--radio-button-border-thickness, 1px) solid var(--radio-button-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-radio-button-indicator:after{opacity:0;content:\"\";display:block;transform:scale(0);width:calc(var(--radio-button-size, 20px) / 2);height:calc(var(--radio-button-size, 20px) / 2);border-radius:var(--radio-button-border-radius, 50%);background-color:var(--radio-button-colors-accent, var(--accent-color, #1565c0));transition:transform .1s cubic-bezier(0,0,.2,1)}.bbi-radio-button-text{color:var(--radio-button-label-color, #111111);padding-left:var(--radio-button-label-offset, 6px);font-size:var(--radio-button-label-font-size, 16px);font-weight:var(--radio-button-label-font-weight, 400);line-height:var(--radio-button-label-line-height, 1.28)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiRadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbi-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bbi-radio-button',
+                        '[class.disabled]': 'disabled',
+                        '[tabindex]': 'disabled ? -1 : 0'
+                    }, preserveWhitespaces: false, template: "<div class=\"bbi-radio-button-indicator\"></div>\n<span *ngIf=\"!hideText\"\n      class=\"bbi-radio-button-text\"><ng-content></ng-content></span>\n", styles: [".bbi-radio-button{display:flex;cursor:pointer;align-items:center}.bbi-radio-button:not(.disabled):focus>.bbi-radio-button-indicator{outline-color:var(--radio-button-outline-color, var(--accent-color, #1565c0))}.bbi-radio-button.disabled{-webkit-user-select:none;user-select:none;cursor:not-allowed}.bbi-radio-button.disabled>.bbi-radio-button-indicator{border-color:var(--radio-button-colors-disabled, #c6c6c6)}.bbi-radio-button.disabled>.bbi-radio-button-text{color:var(--radio-button-colors-disabled, #c6c6c6)}.bbi-radio-button.selected>.bbi-radio-button-indicator{border-color:var(--radio-button-colors-accent, var(--accent-color, #1565c0))}.bbi-radio-button.selected>.bbi-radio-button-indicator:after{opacity:1;transform:none}.bbi-radio-button-indicator{display:flex;align-items:center;justify-content:center;width:var(--radio-button-size, 20px);height:var(--radio-button-size, 20px);min-width:var(--radio-button-size, 20px);min-height:var(--radio-button-size, 20px);border-radius:var(--radio-button-border-radius, 50%);outline-offset:var(--radio-button-outline-offset, 1px);outline:var(--radio-button-outline-thickness, 2px) solid transparent;border:var(--radio-button-border-thickness, 1px) solid var(--radio-button-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-radio-button-indicator:after{opacity:0;content:\"\";display:block;transform:scale(0);width:calc(var(--radio-button-size, 20px) / 2);height:calc(var(--radio-button-size, 20px) / 2);border-radius:var(--radio-button-border-radius, 50%);background-color:var(--radio-button-colors-accent, var(--accent-color, #1565c0));transition:transform .1s cubic-bezier(0,0,.2,1)}.bbi-radio-button-text{color:var(--radio-button-label-color, #111111);padding-left:var(--radio-button-label-offset, 6px);font-size:var(--radio-button-label-font-size, 16px);font-weight:var(--radio-button-label-font-weight, 400);line-height:var(--radio-button-label-line-height, 1.28)}\n"] }]
+        }], ctorParameters: function () { return [{ type: BbiRadioGroup }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hideText: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onSpacePressed: [{
+                type: HostListener,
+                args: ['keydown.space']
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }] } });
+
+class ControlErrorModule {
+}
+ControlErrorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ControlErrorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: ControlErrorModule, declarations: [BbiControlError, BbiControlErrorSubmit], imports: [CommonModule], exports: [BbiControlError, BbiControlErrorSubmit] });
+ControlErrorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlErrorModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlErrorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [BbiControlError, BbiControlErrorSubmit],
+                    exports: [BbiControlError, BbiControlErrorSubmit]
+                }]
+        }] });
+
+class RadioModule {
+}
+RadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: RadioModule, declarations: [BbiRadioGroup, BbiRadioButton], imports: [CommonModule, ControlErrorModule, UtilsModule], exports: [BbiRadioGroup, BbiRadioButton] });
+RadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: RadioModule, imports: [CommonModule, ControlErrorModule, UtilsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: RadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ControlErrorModule, UtilsModule],
+                    declarations: [BbiRadioGroup, BbiRadioButton],
+                    exports: [BbiRadioGroup, BbiRadioButton]
+                }]
+        }] });
+
+class BbiFormControlInput {
+    constructor(_elementRef, _formControl, _changeDetectorRef, _ngControl) {
+        var _a, _b;
+        this._elementRef = _elementRef;
+        this._formControl = _formControl;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._ngControl = _ngControl;
+        // Readonly data.
+        this.labelId = (_b = (_a = this._formControl) === null || _a === void 0 ? void 0 : _a.labelId) !== null && _b !== void 0 ? _b : null;
+        // State.
+        this.errors = null;
+        this.focused = false;
+        // Subscriptions.
+        this._subscription = new Subscription();
+        this._disabled = false;
+        this._readonly = false;
+        this._required = false;
+    }
+    ngOnInit() {
+        this.handleControlDisabledStatus();
+        this.handleControlErrorStatus();
+        this.handleFocusedState();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    get control() {
+        var _a;
+        return (_a = this._ngControl) !== null && _a !== void 0 ? _a : null;
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.disabled) {
+            this._disabled = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    get readonly() { return this._readonly; }
+    set readonly(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.readonly) {
+            this._readonly = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    get required() {
+        var _a, _b;
+        if (this._ngControl) {
+            return (_b = (_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.hasValidator(Validators.required);
+        }
+        return this._required;
+    }
+    set required(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.required) {
+            this._required = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    handleControlErrorStatus() {
+        if (!this._ngControl) {
+            return;
+        }
+        const errors$ = this._ngControl.statusChanges.pipe(startWith(this._ngControl.status), map(() => { var _a, _b; return (_b = (_a = this._ngControl) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : null; }));
+        const subscription = errors$.subscribe(errors => {
+            this.errors = errors;
+            this._changeDetectorRef.markForCheck();
+        });
+        this._subscription.add(subscription);
+    }
+    handleControlDisabledStatus() {
+        if (!this._ngControl) {
+            return;
+        }
+        const disabled$ = this._ngControl.statusChanges.pipe(startWith(this._ngControl.status), map(status => status === 'DISABLED'), distinctUntilChanged());
+        const subscription = disabled$.subscribe(disabled => {
+            this.disabled = disabled;
+        });
+        this._subscription.add(subscription);
+    }
+    handleFocusedState() {
+        const focus$ = fromEvent(this._elementRef.nativeElement, 'focus').pipe(map(() => true));
+        const blur$ = fromEvent(this._elementRef.nativeElement, 'blur').pipe(map(() => false));
+        const focused$ = merge(focus$, blur$).pipe(startWith(false), pairwise(), switchMap(([oldValue, currentValue]) => {
+            if (oldValue && !currentValue) {
+                return of(currentValue).pipe(delay(100));
+            }
+            return of(currentValue);
+        }), distinctUntilChanged());
+        const subscription = focused$.subscribe(focused => this.focused = focused);
+        this._subscription.add(subscription);
+    }
+}
+BbiFormControlInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControlInput, deps: [{ token: i0.ElementRef }, { token: BbiFormControl }, { token: i0.ChangeDetectorRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+BbiFormControlInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: BbiFormControlInput, selector: "input[bbiFormControlInput]", inputs: { disabled: "disabled", readonly: "readonly", required: "required" }, host: { properties: { "attr.id": "this.labelId", "required": "this.required" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControlInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[bbiFormControlInput]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: BbiFormControl }, { type: i0.ChangeDetectorRef }, { type: i2$2.NgControl, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }];
+    }, propDecorators: { labelId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: HostBinding,
+                args: ['required']
+            }, {
+                type: Input
+            }] } });
+
+let nextUniqueId = 0;
+class BbiFormControl {
+    constructor(_changeDetectorRef, _errorSubmit) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._errorSubmit = _errorSubmit;
+        // Readonly data.
+        this.labelId = `bbi-form-control-${nextUniqueId++}`;
+        // Inputs.
+        this.label = null;
+        this.hint = null;
+        this.errorMode = 'blur';
+        // State.
+        this.validationErrors$ = new BehaviorSubject(null);
+        this._grouped = false;
+    }
+    // Grouped.
+    get grouped() {
+        return this._grouped;
+    }
+    set grouped(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.grouped) {
+            this._grouped = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    ngDoCheck() {
+        var _a, _b, _c, _d, _e, _f;
+        const control = (_a = this.formControlInput) === null || _a === void 0 ? void 0 : _a.control;
+        const submitted = (_b = this._errorSubmit) === null || _b === void 0 ? void 0 : _b.submitted;
+        const focused = (_c = this.formControlInput) === null || _c === void 0 ? void 0 : _c.focused;
+        const readonly = (_d = this.formControlInput) === null || _d === void 0 ? void 0 : _d.readonly;
+        const hasErrors = shouldShowErrors(this.errorMode, control, submitted, focused, readonly);
+        const errors = (_f = (_e = this.formControlInput) === null || _e === void 0 ? void 0 : _e.errors) !== null && _f !== void 0 ? _f : null;
+        const newValue = hasErrors ? errors : null;
+        const equal = JSON.stringify(newValue) === JSON.stringify(this.validationErrors$.getValue());
+        if (equal) {
+            return;
+        }
+        this.validationErrors$.next(newValue);
+    }
+}
+BbiFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControl, deps: [{ token: i0.ChangeDetectorRef }, { token: BbiControlErrorSubmit, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+BbiFormControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiFormControl, selector: "bbi-form-control", inputs: { label: "label", hint: "hint", errorMode: "errorMode", grouped: "grouped" }, host: { properties: { "class.grouped": "grouped", "class.disabled": "formControlInput?.disabled", "class.required": "formControlInput?.required", "class.readonly": "formControlInput?.readonly", "class.focused": "formControlInput?.focused", "class.error": "validationErrors$?.getValue()" }, classAttribute: "bbi-form-control" }, queries: [{ propertyName: "formControlInput", first: true, predicate: BbiFormControlInput, descendants: true }], ngImport: i0, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bbi-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-form-control-container\">\n    <ng-content select=\"[bbi-form-control-addon=prefix]\"></ng-content>\n    <ng-content select=\"input[bbiFormControlInput]\"></ng-content>\n    <ng-content select=\"[bbi-form-control-addon=suffix]\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"validationErrors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n\n<div *ngIf=\"hint as hintContent\"\n     class=\"bbi-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n</div>\n", styles: [".bbi-form-control{display:block}.bbi-form-control.grouped{margin-bottom:var(--form-control-grouping, 20px)}.bbi-form-control.disabled{pointer-events:none;opacity:var(--form-control-disabled-opacity, .25)}.bbi-form-control.disabled>.bbi-form-control-container{color:var(--form-control-disabled-color, #111111);background:var(--form-control-disabled-background, white);border-radius:var(--form-control-disabled-border-radius, 6px);border:var(--form-control-disabled-border-width, 1px) var(--form-control-disabled-border-style, solid) var(--form-control-disabled-border-color, #212121)}.bbi-form-control.required:not([data-required-visually-hidden])>.bbi-form-control-label:after{content:\"*\";color:#bd322a;font-size:14px;vertical-align:text-top}.bbi-form-control:not(.readonly).focused>.bbi-form-control-container{color:var(--form-control-focused-color, #111111);box-shadow:var(--form-control-focused-shadow, 0 0 0 3px rgba(0, 123, 255, .2));background:var(--form-control-focused-background, white);border-radius:var(--form-control-focused-border-radius, 6px);border:var(--form-control-focused-border-width, 1px) var(--form-control-focused-border-style, solid) var(--form-control-focused-border-color, #212121)}.bbi-form-control:not(.readonly).error>.bbi-form-control-label{color:var(--form-control-error-color, var(--error-color, #bd322a))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container{color:var(--form-control-error-color, var(--error-color, #bd322a));border-color:var(--form-control-error-color, var(--error-color, #bd322a));background:var(--form-control-error-background, rgba(189, 50, 42, .1))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container>input::placeholder{color:var(--form-control-error-placeholder-color, rgba(189, 50, 42, .4))}.bbi-form-control-label{color:#525252;display:block;font-size:14px;font-weight:400;margin-bottom:4px}.bbi-form-control-container{display:flex;align-items:center;color:var(--form-control-color, #111111);border-radius:var(--form-control-border-radius, 6px);background-color:var(--form-control-background, white);border:var(--form-control-border-width, 1px) var(--form-control-border-style, solid) var(--form-control-border-color, rgba(67, 90, 111, .3))}.bbi-form-control-container>input{width:100%;border:none;height:40px;color:inherit;padding:0 10px;background-color:transparent}.bbi-form-control-container>input::placeholder{color:#d2d2d2}.bbi-form-control-hint{display:block;color:#525252;font-size:13px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BbiControlError, selector: "bbi-control-error", inputs: ["errors"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControl, decorators: [{
             type: Component,
             args: [{ selector: 'bbi-form-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bbi-form-control',
@@ -560,7 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         '[class.readonly]': 'formControlInput?.readonly',
                         '[class.focused]': 'formControlInput?.focused',
                         '[class.error]': 'validationErrors$?.getValue()'
-                    }, preserveWhitespaces: false, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bbi-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-form-control-container\">\n    <ng-content select=\"[bbi-form-control-addon=prefix]\"></ng-content>\n    <ng-content select=\"input[bbiFormControlInput]\"></ng-content>\n    <ng-content select=\"[bbi-form-control-addon=suffix]\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"errors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n\n<div *ngIf=\"hint as hintContent\"\n     class=\"bbi-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n</div>\n", styles: [".bbi-form-control{display:block}.bbi-form-control.grouped{margin-bottom:var(--form-control-grouping, 20px)}.bbi-form-control.disabled{pointer-events:none;opacity:var(--form-control-disabled-opacity, .25)}.bbi-form-control.disabled>.bbi-form-control-container{color:var(--form-control-disabled-color, #111111);background:var(--form-control-disabled-background, white);border-radius:var(--form-control-disabled-border-radius, 6px);border:var(--form-control-disabled-border-width, 1px) var(--form-control-disabled-border-style, solid) var(--form-control-disabled-border-color, #212121)}.bbi-form-control.required:not([data-required-visually-hidden])>.bbi-form-control-label:after{content:\"*\";color:#bd322a;font-size:14px;vertical-align:text-top}.bbi-form-control:not(.readonly).focused>.bbi-form-control-container{color:var(--form-control-focused-color, #111111);box-shadow:var(--form-control-focused-shadow, 0 0 0 3px rgba(0, 123, 255, .2));background:var(--form-control-focused-background, white);border-radius:var(--form-control-focused-border-radius, 6px);border:var(--form-control-focused-border-width, 1px) var(--form-control-focused-border-style, solid) var(--form-control-focused-border-color, #212121)}.bbi-form-control:not(.readonly).error>.bbi-form-control-label{color:var(--form-control-error-color, var(--error-color, #bd322a))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container{color:var(--form-control-error-color, var(--error-color, #bd322a));border-color:var(--form-control-error-color, var(--error-color, #bd322a));background:var(--form-control-error-background, rgba(189, 50, 42, .1))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container>input::placeholder{color:var(--form-control-error-placeholder-color, rgba(189, 50, 42, .4))}.bbi-form-control-label{color:#525252;display:block;font-size:14px;font-weight:400;margin-bottom:4px}.bbi-form-control-container{display:flex;align-items:center;color:var(--form-control-color, #111111);border-radius:var(--form-control-border-radius, 6px);background-color:var(--form-control-background, white);border:var(--form-control-border-width, 1px) var(--form-control-border-style, solid) var(--form-control-border-color, rgba(67, 90, 111, .3))}.bbi-form-control-container>input{width:100%;border:none;height:40px;color:inherit;padding:0 10px;background-color:transparent}.bbi-form-control-container>input::placeholder{color:#d2d2d2}.bbi-form-control-hint{display:block;color:#525252;font-size:13px;margin-top:4px}\n"] }]
+                    }, preserveWhitespaces: false, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bbi-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n</label>\n\n<div class=\"bbi-form-control-container\">\n    <ng-content select=\"[bbi-form-control-addon=prefix]\"></ng-content>\n    <ng-content select=\"input[bbiFormControlInput]\"></ng-content>\n    <ng-content select=\"[bbi-form-control-addon=suffix]\"></ng-content>\n</div>\n\n<bbi-control-error *ngIf=\"validationErrors$ | async as errors\"\n                   [errors]=\"errors\">\n</bbi-control-error>\n\n<div *ngIf=\"hint as hintContent\"\n     class=\"bbi-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n</div>\n", styles: [".bbi-form-control{display:block}.bbi-form-control.grouped{margin-bottom:var(--form-control-grouping, 20px)}.bbi-form-control.disabled{pointer-events:none;opacity:var(--form-control-disabled-opacity, .25)}.bbi-form-control.disabled>.bbi-form-control-container{color:var(--form-control-disabled-color, #111111);background:var(--form-control-disabled-background, white);border-radius:var(--form-control-disabled-border-radius, 6px);border:var(--form-control-disabled-border-width, 1px) var(--form-control-disabled-border-style, solid) var(--form-control-disabled-border-color, #212121)}.bbi-form-control.required:not([data-required-visually-hidden])>.bbi-form-control-label:after{content:\"*\";color:#bd322a;font-size:14px;vertical-align:text-top}.bbi-form-control:not(.readonly).focused>.bbi-form-control-container{color:var(--form-control-focused-color, #111111);box-shadow:var(--form-control-focused-shadow, 0 0 0 3px rgba(0, 123, 255, .2));background:var(--form-control-focused-background, white);border-radius:var(--form-control-focused-border-radius, 6px);border:var(--form-control-focused-border-width, 1px) var(--form-control-focused-border-style, solid) var(--form-control-focused-border-color, #212121)}.bbi-form-control:not(.readonly).error>.bbi-form-control-label{color:var(--form-control-error-color, var(--error-color, #bd322a))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container{color:var(--form-control-error-color, var(--error-color, #bd322a));border-color:var(--form-control-error-color, var(--error-color, #bd322a));background:var(--form-control-error-background, rgba(189, 50, 42, .1))}.bbi-form-control:not(.readonly).error>.bbi-form-control-container>input::placeholder{color:var(--form-control-error-placeholder-color, rgba(189, 50, 42, .4))}.bbi-form-control-label{color:#525252;display:block;font-size:14px;font-weight:400;margin-bottom:4px}.bbi-form-control-container{display:flex;align-items:center;color:var(--form-control-color, #111111);border-radius:var(--form-control-border-radius, 6px);background-color:var(--form-control-background, white);border:var(--form-control-border-width, 1px) var(--form-control-border-style, solid) var(--form-control-border-color, rgba(67, 90, 111, .3))}.bbi-form-control-container>input{width:100%;border:none;height:40px;color:inherit;padding:0 10px;background-color:transparent}.bbi-form-control-container>input::placeholder{color:#d2d2d2}.bbi-form-control-hint{display:block;color:#525252;font-size:13px;margin-top:4px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: BbiControlErrorSubmit, decorators: [{
                         type: Optional
@@ -584,9 +1089,9 @@ class BbiFormControlAddon {
         this.type = null;
     }
 }
-BbiFormControlAddon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControlAddon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbiFormControlAddon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BbiFormControlAddon, selector: "[bbi-form-control-addon]", inputs: { type: ["bbi-form-control-addon", "type"] }, host: { properties: { "class.prefix": "type === 'prefix'", "class.suffix": "type === 'suffix'" }, classAttribute: "bbi-form-control-addon" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bbi-form-control-addon{margin:0 10px;color:inherit;display:block}.bbi-form-control-addon.suffix{margin-left:0}.bbi-form-control-addon.prefix{margin-right:0}a.bbi-form-control-addon,button.bbi-form-control-addon{width:32px;height:32px;border:none;display:flex;-webkit-appearance:none;appearance:none;margin-right:4px;border-radius:6px;align-items:center;text-decoration:none;justify-content:center;background-color:transparent}a.bbi-form-control-addon,a.bbi-form-control-addon:visited,button.bbi-form-control-addon,button.bbi-form-control-addon:visited{color:inherit}a.bbi-form-control-addon:hover,button.bbi-form-control-addon:hover{background-color:#1565c014}a.bbi-form-control-addon:focus,button.bbi-form-control-addon:focus{background-color:#1565c01f}a.bbi-form-control-addon:active,button.bbi-form-control-addon:active{background-color:#1565c029}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BbiFormControlAddon, decorators: [{
+BbiFormControlAddon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControlAddon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbiFormControlAddon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BbiFormControlAddon, selector: "[bbi-form-control-addon]", inputs: { type: ["bbi-form-control-addon", "type"] }, host: { properties: { "class.prefix": "type === 'prefix'", "class.suffix": "type === 'suffix'" }, classAttribute: "bbi-form-control-addon" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bbi-form-control-addon{margin:0 10px;color:inherit;display:block}.bbi-form-control-addon.suffix{margin-left:0}.bbi-form-control-addon.prefix{margin-right:0}a.bbi-form-control-addon,button.bbi-form-control-addon{width:32px;height:32px;border:none;display:flex;-webkit-appearance:none;appearance:none;margin-right:4px;border-radius:6px;align-items:center;text-decoration:none;justify-content:center;background-color:transparent}a.bbi-form-control-addon,a.bbi-form-control-addon:visited,button.bbi-form-control-addon,button.bbi-form-control-addon:visited{color:inherit}a.bbi-form-control-addon:hover,button.bbi-form-control-addon:hover{background-color:#1565c014}a.bbi-form-control-addon:focus,button.bbi-form-control-addon:focus{background-color:#1565c01f}a.bbi-form-control-addon:active,button.bbi-form-control-addon:active{background-color:#1565c029}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BbiFormControlAddon, decorators: [{
             type: Component,
             args: [{ selector: '[bbi-form-control-addon]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bbi-form-control-addon',
@@ -598,30 +1103,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 args: ['bbi-form-control-addon']
             }] } });
 
-class ControlErrorModule {
-}
-ControlErrorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ControlErrorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: ControlErrorModule, declarations: [BbiControlError, BbiControlErrorSubmit], imports: [CommonModule], exports: [BbiControlError, BbiControlErrorSubmit] });
-ControlErrorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlErrorModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlErrorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [BbiControlError, BbiControlErrorSubmit],
-                    exports: [BbiControlError, BbiControlErrorSubmit]
-                }]
-        }] });
-
 class FormControlModule {
 }
-FormControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: FormControlModule, declarations: [BbiFormControl,
+FormControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FormControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: FormControlModule, declarations: [BbiFormControl,
         BbiFormControlInput,
         BbiFormControlAddon], imports: [CommonModule, ControlErrorModule, UtilsModule], exports: [BbiFormControl,
         BbiFormControlInput,
         BbiFormControlAddon] });
-FormControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormControlModule, imports: [CommonModule, ControlErrorModule, UtilsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormControlModule, decorators: [{
+FormControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FormControlModule, imports: [CommonModule, ControlErrorModule, UtilsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FormControlModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ControlErrorModule, UtilsModule],
@@ -674,38 +1165,45 @@ class ControlsModule {
                     provide: BBI_CONTROL_ERRORS,
                     useValue: Object.assign(Object.assign({}, controlErrorDefaults), ((_a = config === null || config === void 0 ? void 0 : config.errors) !== null && _a !== void 0 ? _a : {})),
                     multi: true
-                },
-                {
-                    provide: null,
-                    useFactory: () => '',
-                    multi: true
                 }
             ]
         };
     }
 }
-ControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: ControlsModule, imports: [FormControlModule,
+ControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: ControlsModule, imports: [FormControlModule,
         CheckboxModule,
+        RadioModule,
+        ToggleModule,
         ControlErrorModule], exports: [FormControlModule,
         CheckboxModule,
+        RadioModule,
+        ToggleModule,
         ControlErrorModule] });
-ControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlsModule, imports: [FormControlModule,
+ControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlsModule, imports: [FormControlModule,
         CheckboxModule,
+        RadioModule,
+        ToggleModule,
         ControlErrorModule, FormControlModule,
         CheckboxModule,
+        RadioModule,
+        ToggleModule,
         ControlErrorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ControlsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ControlsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         FormControlModule,
                         CheckboxModule,
+                        RadioModule,
+                        ToggleModule,
                         ControlErrorModule
                     ],
                     exports: [
                         FormControlModule,
                         CheckboxModule,
+                        RadioModule,
+                        ToggleModule,
                         ControlErrorModule
                     ]
                 }]
@@ -715,5 +1213,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BBI_CONTROL_ERRORS, BbiCheckbox, BbiCheckboxGroup, BbiControlError, BbiControlErrorSubmit, BbiFormControl, BbiFormControlAddon, BbiFormControlInput, CheckboxModule, ControlErrorModule, ControlsModule, FormControlModule, controlErrorDefaults };
+export { BBI_CONTROL_ERRORS, BbiCheckbox, BbiCheckboxGroup, BbiControlError, BbiControlErrorSubmit, BbiFormControl, BbiFormControlAddon, BbiFormControlInput, BbiRadioButton, BbiRadioGroup, BbiToggle, BbiToggleGroup, CheckboxModule, ControlErrorModule, ControlsModule, FormControlModule, RadioModule, ToggleModule, controlErrorDefaults, shouldShowErrors };
 //# sourceMappingURL=bravobit-bb-foundation-controls.mjs.map