@bravobit/bb-foundation 0.32.1 → 0.40.0

package/fesm2022/bravobit-bb-foundation-elements.mjs

@@ -1,120 +1,65 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, Directive, Optional, Host, Input, InjectionToken, EventEmitter, forwardRef, ViewChild, Output, Self, Inject, ContentChild, Pipe, HostBinding, LOCALE_ID, NgModule } from '@angular/core';
-import { trigger, transition, style, animate } from '@angular/animations';
-import * as i8 from 'rxjs';
-import { BehaviorSubject, fromEvent, merge, EMPTY, combineLatest, of, Subscription } from 'rxjs';
-import * as i1 from '@angular/common';
-import { formatDate, CommonModule } from '@angular/common';
-import * as i1$1 from '@bravobit/bb-foundation';
-import { mixinDisabled, mixinLoad, mixinGrouped, mixinFocused, mixinReadonly, mixinRequired, mixinError, mixinHideErrors } from '@bravobit/bb-foundation';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, Validators, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { map, startWith, distinctUntilChanged, shareReplay, tap, delay } from 'rxjs/operators';
-import * as i2$1 from '@bravobit/bb-foundation/utils';
-import { UtilsModule } from '@bravobit/bb-foundation/utils';
+import * as i0 from '@angular/core';
+import { Directive, Optional, Self, InjectionToken, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Output, booleanAttribute, ContentChild, Host, HostBinding, numberAttribute, HostListener, Pipe, LOCALE_ID, inject, forwardRef, ViewChild, makeEnvironmentProviders, NgModule } from '@angular/core';
+import * as i2$1 from 'rxjs';
+import { fromEvent, merge, EMPTY, BehaviorSubject, combineLatest, of, Subscription } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@bravobit/bb-foundation/localize';
-import { LOCALIZE_ID, LocalizeModule } from '@bravobit/bb-foundation/localize';
-import * as i1$3 from '@angular/cdk/platform';
+import { BbLocalize, Localize, BbLocalizeTemplate, BbLocalizeString, LOCALIZE_ID } from '@bravobit/bb-foundation/localize';
+import { AsyncPipe, formatDate, NgTemplateOutlet } from '@angular/common';
+import { BbTemplate } from '@bravobit/bb-foundation/utils';
+import * as i1$1 from '@bravobit/bb-foundation';
+import { parseDate } from '@bravobit/bb-foundation';
+import * as i2 from '@angular/cdk/platform';
 import * as i3 from '@angular/platform-browser';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { trigger, transition, style, animate } from '@angular/animations';
 
-class BbDropdown {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        // State.
-        this.visible$ = new BehaviorSubject(false);
+class BbFormSubmit {
+    constructor(_host, _formDirective) {
+        this._host = _host;
+        this._formDirective = _formDirective;
     }
-    toggle() {
-        return this.visible$.next(!this.visible$.getValue());
+    ngOnInit() {
+        // Submit changes.
+        const regularSubmitChanges$ = fromEvent(this.nativeElement, 'submit').pipe(map(() => true));
+        // Reactive form submit changes.
+        const reactiveSubmitChanges$ = this.reactiveSubmitChanges();
+        // Reset changes.
+        const resetChanges$ = fromEvent(this.nativeElement, 'reset').pipe(map(() => false));
+        // Listen to the submit status.
+        this.submitStatus$ = merge(regularSubmitChanges$, reactiveSubmitChanges$, resetChanges$).pipe(startWith(false), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
     }
-    close() {
-        return this.visible$.next(false);
+    submit() {
+        this._formDirective?.ngSubmit?.emit();
     }
-    onDocumentClick(target) {
-        if (!target) {
-            return;
-        }
-        if (this._elementRef?.nativeElement?.contains(target)) {
-            return;
-        }
-        return this.close();
+    reset() {
+        return this.nativeElement?.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbDropdown, selector: "bb-dropdown", host: { listeners: { "document:click": "onDocumentClick($event.target)" }, classAttribute: "bb-dropdown" }, ngImport: i0, template: "<button (click)=\"toggle()\"\n        [class.opened]=\"visible$ | async\"\n        type=\"button\">\n    <ng-content></ng-content>\n</button>\n\n<div *ngIf=\"visible$ | async\"\n     [@dropdownMenuAnimation]=\"true\"\n     class=\"bb-dropdown-menu\"\n     role=\"list\">\n    <ng-content select=\"[bbDropdownItem], hr\"></ng-content>\n</div>\n", styles: [".bb-dropdown{position:relative;display:inline-block}.bb-dropdown.right>.bb-dropdown-menu{right:0;left:auto;transform-origin:top right}.bb-dropdown-menu{left:0;top:100%;padding:0;z-index:10;display:block;margin:10px 0 0;border-radius:4px;position:absolute;list-style-type:none;background-color:#fff;border:1px solid #cccccc;transform-origin:top left;box-shadow:0 0 6px #0000001a}.bb-dropdown-menu:after{width:0;top:-5px;height:0;right:5px;content:\"\";position:absolute;border-style:solid;border-width:0 10px 5px 10px;border-color:transparent transparent #d9d9d9 transparent}.bb-dropdown-menu>hr{margin:0;height:1px;border:none;background-color:#ccc}.bb-dropdown-item{width:100%;border:none;line-height:1;display:block;cursor:pointer;text-align:left;font-weight:500;-webkit-user-select:none;user-select:none;padding:12px 20px;white-space:nowrap;text-decoration:none;color:#676767!important;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-dropdown-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.bb-dropdown-item:hover{background-color:#f6f6f6}.bb-dropdown-item:focus{box-shadow:0 0 0 3px #dce0e980}.bb-dropdown-item:active{background-color:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
-            trigger('dropdownMenuAnimation', [
-                transition(':enter', [
-                    // 1. Set the initial state.
-                    style({ opacity: 0, transform: 'scale(0.9)' }),
-                    // 2. Start the animation to show the item.
-                    animate('80ms cubic-bezier(0, 0, .2, 1)', style({ opacity: 1, transform: 'scale(1)' }))
-                ]),
-                transition(':leave', [
-                    // 1. Set the initial state.
-                    style({ opacity: 1, transform: 'scale(1)' }),
-                    // 2. Start the animation to hide the item.
-                    animate('80ms cubic-bezier(0, 0, .2, 1)', style({ opacity: 0, transform: 'scale(0.9)' }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDropdown, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dropdown' }, preserveWhitespaces: false, animations: [
-                        trigger('dropdownMenuAnimation', [
-                            transition(':enter', [
-                                // 1. Set the initial state.
-                                style({ opacity: 0, transform: 'scale(0.9)' }),
-                                // 2. Start the animation to show the item.
-                                animate('80ms cubic-bezier(0, 0, .2, 1)', style({ opacity: 1, transform: 'scale(1)' }))
-                            ]),
-                            transition(':leave', [
-                                // 1. Set the initial state.
-                                style({ opacity: 1, transform: 'scale(1)' }),
-                                // 2. Start the animation to hide the item.
-                                animate('80ms cubic-bezier(0, 0, .2, 1)', style({ opacity: 0, transform: 'scale(0.9)' }))
-                            ])
-                        ])
-                    ], template: "<button (click)=\"toggle()\"\n        [class.opened]=\"visible$ | async\"\n        type=\"button\">\n    <ng-content></ng-content>\n</button>\n\n<div *ngIf=\"visible$ | async\"\n     [@dropdownMenuAnimation]=\"true\"\n     class=\"bb-dropdown-menu\"\n     role=\"list\">\n    <ng-content select=\"[bbDropdownItem], hr\"></ng-content>\n</div>\n", styles: [".bb-dropdown{position:relative;display:inline-block}.bb-dropdown.right>.bb-dropdown-menu{right:0;left:auto;transform-origin:top right}.bb-dropdown-menu{left:0;top:100%;padding:0;z-index:10;display:block;margin:10px 0 0;border-radius:4px;position:absolute;list-style-type:none;background-color:#fff;border:1px solid #cccccc;transform-origin:top left;box-shadow:0 0 6px #0000001a}.bb-dropdown-menu:after{width:0;top:-5px;height:0;right:5px;content:\"\";position:absolute;border-style:solid;border-width:0 10px 5px 10px;border-color:transparent transparent #d9d9d9 transparent}.bb-dropdown-menu>hr{margin:0;height:1px;border:none;background-color:#ccc}.bb-dropdown-item{width:100%;border:none;line-height:1;display:block;cursor:pointer;text-align:left;font-weight:500;-webkit-user-select:none;user-select:none;padding:12px 20px;white-space:nowrap;text-decoration:none;color:#676767!important;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-dropdown-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.bb-dropdown-item:hover{background-color:#f6f6f6}.bb-dropdown-item:focus{box-shadow:0 0 0 3px #dce0e980}.bb-dropdown-item:active{background-color:#f0f0f0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }] } });
-class BbDropdownItem {
-    constructor(_parent) {
-        this._parent = _parent;
-        // Inputs.
-        this.closeOnClick = true;
+    get nativeElement() {
+        return this._host?.nativeElement;
     }
-    onClick() {
-        if (!this.closeOnClick) {
-            return;
+    reactiveSubmitChanges() {
+        if (!this._formDirective) {
+            return EMPTY;
         }
-        this._parent?.close();
+        return this._formDirective.ngSubmit.pipe(map(() => true));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDropdownItem, deps: [{ token: BbDropdown, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbDropdownItem, selector: "[bbDropdownItem]", inputs: { closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()" }, classAttribute: "bb-dropdown-item" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormSubmit, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbFormSubmit, isStandalone: true, selector: "form", exportAs: ["bbForm"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormSubmit, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbDropdownItem]',
-                    host: {
-                        'class': 'bb-dropdown-item'
-                    }
+                    selector: 'form',
+                    exportAs: 'bbForm',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: BbDropdown, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FormGroupDirective, decorators: [{
                     type: Optional
                 }, {
-                    type: Host
-                }] }], propDecorators: { closeOnClick: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-const ELEMENTS_ICONS = new InjectionToken('elements_icons');
-const ELEMENTS_ERRORS = new InjectionToken('elements_errors');
+                    type: Self
+                }] }] });
 
 class BbFormSubmitter {
     constructor() {
@@ -127,298 +72,98 @@ class BbFormSubmitter {
     reset() {
         this.submitted$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormSubmitter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbFormSubmitter, selector: "[bbFormSubmitter]", exportAs: ["bbFormSubmitter"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormSubmitter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbFormSubmitter, isStandalone: true, selector: "[bbFormSubmitter]", exportAs: ["bbFormSubmitter"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormSubmitter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormSubmitter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bbFormSubmitter]',
-                    exportAs: 'bbFormSubmitter'
+                    exportAs: 'bbFormSubmitter',
+                    standalone: true
                 }]
         }] });
 
-class BbSpinnerBase {
-}
-const BbSpinnerMixinBase = mixinDisabled(BbSpinnerBase);
-class BbSpinner extends BbSpinnerMixinBase {
-    constructor() {
-        super(...arguments);
-        // Inputs.
-        this.color = '#303f9f';
-        this.alt = 'Loading...';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbSpinner, selector: "bb-spinner", inputs: { color: "color", alt: "alt", disabled: "disabled" }, host: { classAttribute: "bb-spinner" }, usesInheritance: true, ngImport: i0, template: "<!--\n    The spinner element.\n\n    This element contains a circle with a 25% bar that spins\n    indefinitely. The border color can be set via the \"color\"\n    property.\n-->\n<div class=\"bb-spinner-container\">\n    <div [style.border-left-color]=\"color\"\n         [class.disabled]=\"disabled\"\n         class=\"bb-spinner-loader\"\n         aria-live=\"assertive\"\n         role=\"alert\">\n        {{ alt }}\n    </div>\n    <ng-content select=\"img\"></ng-content>\n</div>\n\n<!--\n    The content of the spinner.\n\n    This element contains the content of the spinner. The user\n    can set the content inside the tag.\n-->\n<span class=\"bb-spinner-content\">\n    <ng-content></ng-content>\n</span>\n", styles: [".bb-spinner{color:#565656;padding:20px 0;text-align:center;align-items:center;display:inline-flex;flex-direction:column;justify-content:center}.bb-spinner.block{display:flex}.bb-spinner.inverse .bb-spinner-loader{border-color:#ffffff26}.bb-spinner.inverse .bb-spinner-content{color:#ffffff80}.bb-spinner.small .bb-spinner-loader,.bb-spinner.small .bb-spinner-loader:after{width:20px;height:20px;min-width:20px;min-height:20px}.bb-spinner.small .bb-spinner-loader{border-width:2px}.bb-spinner.small .bb-spinner-content{font-size:12px}.bb-spinner.medium .bb-spinner-loader,.bb-spinner.medium .bb-spinner-loader:after{width:60px;height:60px;min-width:60px;min-height:60px}.bb-spinner.medium .bb-spinner-loader{border-width:4px}.bb-spinner.medium .bb-spinner-content{font-size:16px}.bb-spinner.large .bb-spinner-loader,.bb-spinner.large .bb-spinner-loader:after{width:100px;height:100px;min-width:100px;min-height:100px}.bb-spinner.large .bb-spinner-loader{border-width:6px}.bb-spinner.large .bb-spinner-content{font-size:20px}.bb-spinner.horizontal{text-align:left;flex-direction:row}.bb-spinner.horizontal .bb-spinner-content:not(:empty){margin-left:10px;margin-top:0}.bb-spinner.vertical{text-align:center;flex-direction:column}.bb-spinner.vertical .bb-spinner-content:not(:empty){margin-left:0;margin-top:10px}.bb-spinner-container{display:flex;position:relative}.bb-spinner-container>img{top:20%;left:20%;width:60%;height:60%;position:absolute}.bb-spinner-loader{margin:0;padding:0;overflow:hidden;text-indent:100%;color:transparent;position:relative;display:inline-block;vertical-align:middle;border:4px solid #f2f4f6;animation:1s linear infinite spin}.bb-spinner-loader,.bb-spinner-loader:after{width:60px;height:60px;min-width:60px;min-height:60px;border-radius:50%}.bb-spinner-loader.disabled{cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none;animation-play-state:paused}.bb-spinner-content:not(:empty){font-size:16px;margin-top:10px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSpinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-spinner' }, inputs: ['color', 'alt', 'disabled'], preserveWhitespaces: false, template: "<!--\n    The spinner element.\n\n    This element contains a circle with a 25% bar that spins\n    indefinitely. The border color can be set via the \"color\"\n    property.\n-->\n<div class=\"bb-spinner-container\">\n    <div [style.border-left-color]=\"color\"\n         [class.disabled]=\"disabled\"\n         class=\"bb-spinner-loader\"\n         aria-live=\"assertive\"\n         role=\"alert\">\n        {{ alt }}\n    </div>\n    <ng-content select=\"img\"></ng-content>\n</div>\n\n<!--\n    The content of the spinner.\n\n    This element contains the content of the spinner. The user\n    can set the content inside the tag.\n-->\n<span class=\"bb-spinner-content\">\n    <ng-content></ng-content>\n</span>\n", styles: [".bb-spinner{color:#565656;padding:20px 0;text-align:center;align-items:center;display:inline-flex;flex-direction:column;justify-content:center}.bb-spinner.block{display:flex}.bb-spinner.inverse .bb-spinner-loader{border-color:#ffffff26}.bb-spinner.inverse .bb-spinner-content{color:#ffffff80}.bb-spinner.small .bb-spinner-loader,.bb-spinner.small .bb-spinner-loader:after{width:20px;height:20px;min-width:20px;min-height:20px}.bb-spinner.small .bb-spinner-loader{border-width:2px}.bb-spinner.small .bb-spinner-content{font-size:12px}.bb-spinner.medium .bb-spinner-loader,.bb-spinner.medium .bb-spinner-loader:after{width:60px;height:60px;min-width:60px;min-height:60px}.bb-spinner.medium .bb-spinner-loader{border-width:4px}.bb-spinner.medium .bb-spinner-content{font-size:16px}.bb-spinner.large .bb-spinner-loader,.bb-spinner.large .bb-spinner-loader:after{width:100px;height:100px;min-width:100px;min-height:100px}.bb-spinner.large .bb-spinner-loader{border-width:6px}.bb-spinner.large .bb-spinner-content{font-size:20px}.bb-spinner.horizontal{text-align:left;flex-direction:row}.bb-spinner.horizontal .bb-spinner-content:not(:empty){margin-left:10px;margin-top:0}.bb-spinner.vertical{text-align:center;flex-direction:column}.bb-spinner.vertical .bb-spinner-content:not(:empty){margin-left:0;margin-top:10px}.bb-spinner-container{display:flex;position:relative}.bb-spinner-container>img{top:20%;left:20%;width:60%;height:60%;position:absolute}.bb-spinner-loader{margin:0;padding:0;overflow:hidden;text-indent:100%;color:transparent;position:relative;display:inline-block;vertical-align:middle;border:4px solid #f2f4f6;animation:1s linear infinite spin}.bb-spinner-loader,.bb-spinner-loader:after{width:60px;height:60px;min-width:60px;min-height:60px;border-radius:50%}.bb-spinner-loader.disabled{cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none;animation-play-state:paused}.bb-spinner-content:not(:empty){font-size:16px;margin-top:10px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }] } });
-
-class BbButtonBase {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-const BbButtonMixinBase = mixinDisabled(mixinLoad(BbButtonBase));
-class BbButton extends BbButtonMixinBase {
-    get nativeElement() {
-        return this._elementRef.nativeElement;
-    }
-    constructor(_elementRef) {
-        super(_elementRef);
-    }
-    focus() {
-        this.nativeElement && this.nativeElement.focus();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbButton, selector: "button[bb-button]", inputs: { disabled: "disabled", loading: "loading" }, host: { properties: { "class.loading": "loading", "attr.disabled": "disabled || loading || null" }, classAttribute: "bb-button" }, exportAs: ["bbButton"], usesInheritance: true, ngImport: i0, template: "<bb-spinner [class.visible]=\"loading\"\n            class=\"bb-button-spinner small\">\n</bb-spinner>\n\n<ng-content></ng-content>\n", styles: [".bb-button{height:38px;padding:0 8px;cursor:pointer;font-size:16px;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;border-radius:4px;text-align:center;align-items:center;display:inline-flex;text-decoration:none;justify-content:center;background-color:#fff;color:#2d3c4d!important;border:1px solid #d4d8e1;transition-duration:.2s;box-shadow:0 6px 6px -6px #0000001a;transition-timing-function:cubic-bezier(0,0,.2,1);transition-property:padding-left,background-color,box-shadow}.bb-button:hover{background-color:#fcfcfb}.bb-button:focus,.bb-button:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #dce0e980}.bb-button.full{width:100%}.bb-button.full.loading{padding-left:42px}.bb-button.primary{border-color:#2f2b85;color:#fff!important;background-color:#5b53ff}.bb-button.primary:hover{background-color:#564ee6}.bb-button.primary:focus,.bb-button.primary:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #5b53ff80}.bb-button.destructive{border-color:#8f2020;color:#fff!important;background-color:#d32f2f}.bb-button.destructive:hover{background-color:#c32929}.bb-button.destructive:focus,.bb-button.destructive:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #d32f2f80}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{opacity:.4;cursor:default;box-shadow:none}.bb-button-spinner{width:0;opacity:0;overflow:hidden;visibility:hidden;padding:0!important;transition:width .2s cubic-bezier(0,0,.2,1),opacity .1s cubic-bezier(0,0,.2,1)}.bb-button-spinner.visible{opacity:1;width:20px;margin-right:8px;visibility:visible}.bb-button.loading.full>.bb-button-spinner{left:8px;margin-right:0;position:absolute}\n"], dependencies: [{ kind: "component", type: BbSpinner, selector: "bb-spinner", inputs: ["color", "alt", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[bb-button]', exportAs: 'bbButton', host: {
-                        'class': 'bb-button',
-                        '[class.loading]': 'loading',
-                        '[attr.disabled]': 'disabled || loading || null'
-                    }, inputs: ['disabled', 'loading'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<bb-spinner [class.visible]=\"loading\"\n            class=\"bb-button-spinner small\">\n</bb-spinner>\n\n<ng-content></ng-content>\n", styles: [".bb-button{height:38px;padding:0 8px;cursor:pointer;font-size:16px;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;border-radius:4px;text-align:center;align-items:center;display:inline-flex;text-decoration:none;justify-content:center;background-color:#fff;color:#2d3c4d!important;border:1px solid #d4d8e1;transition-duration:.2s;box-shadow:0 6px 6px -6px #0000001a;transition-timing-function:cubic-bezier(0,0,.2,1);transition-property:padding-left,background-color,box-shadow}.bb-button:hover{background-color:#fcfcfb}.bb-button:focus,.bb-button:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #dce0e980}.bb-button.full{width:100%}.bb-button.full.loading{padding-left:42px}.bb-button.primary{border-color:#2f2b85;color:#fff!important;background-color:#5b53ff}.bb-button.primary:hover{background-color:#564ee6}.bb-button.primary:focus,.bb-button.primary:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #5b53ff80}.bb-button.destructive{border-color:#8f2020;color:#fff!important;background-color:#d32f2f}.bb-button.destructive:hover{background-color:#c32929}.bb-button.destructive:focus,.bb-button.destructive:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #d32f2f80}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{opacity:.4;cursor:default;box-shadow:none}.bb-button-spinner{width:0;opacity:0;overflow:hidden;visibility:hidden;padding:0!important;transition:width .2s cubic-bezier(0,0,.2,1),opacity .1s cubic-bezier(0,0,.2,1)}.bb-button-spinner.visible{opacity:1;width:20px;margin-right:8px;visibility:visible}.bb-button.loading.full>.bb-button-spinner{left:8px;margin-right:0;position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-class BbAnchor extends BbButton {
-    constructor(_elementRef) {
-        super(_elementRef);
-    }
-    stopDisabledEvents(event) {
-        // If the button is not disabled (and not loading) let all events pass.
-        if (!this.disabled && !this.loading) {
-            return;
-        }
-        // If the button is disabled and/or loading stop
-        // the event from bubbling up.
-        event.preventDefault();
-        event.stopImmediatePropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbAnchor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbAnchor, selector: "a[bb-button]", inputs: { disabled: "disabled", loading: "loading", tabIndex: "tabIndex" }, host: { listeners: { "click": "stopDisabledEvents($event)" }, properties: { "attr.tabindex": "(disabled || loading) ? -1 : (tabIndex || 0)", "attr.disabled": "disabled || loading || null", "attr.aria-disabled": "(disabled || loading).toString()" }, classAttribute: "bb-button" }, exportAs: ["bbButton", "bbAnchor"], usesInheritance: true, ngImport: i0, template: "<bb-spinner [class.visible]=\"loading\"\n            class=\"bb-button-spinner small\">\n</bb-spinner>\n\n<ng-content></ng-content>\n", styles: [".bb-button{height:38px;padding:0 8px;cursor:pointer;font-size:16px;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;border-radius:4px;text-align:center;align-items:center;display:inline-flex;text-decoration:none;justify-content:center;background-color:#fff;color:#2d3c4d!important;border:1px solid #d4d8e1;transition-duration:.2s;box-shadow:0 6px 6px -6px #0000001a;transition-timing-function:cubic-bezier(0,0,.2,1);transition-property:padding-left,background-color,box-shadow}.bb-button:hover{background-color:#fcfcfb}.bb-button:focus,.bb-button:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #dce0e980}.bb-button.full{width:100%}.bb-button.full.loading{padding-left:42px}.bb-button.primary{border-color:#2f2b85;color:#fff!important;background-color:#5b53ff}.bb-button.primary:hover{background-color:#564ee6}.bb-button.primary:focus,.bb-button.primary:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #5b53ff80}.bb-button.destructive{border-color:#8f2020;color:#fff!important;background-color:#d32f2f}.bb-button.destructive:hover{background-color:#c32929}.bb-button.destructive:focus,.bb-button.destructive:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #d32f2f80}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{opacity:.4;cursor:default;box-shadow:none}.bb-button-spinner{width:0;opacity:0;overflow:hidden;visibility:hidden;padding:0!important;transition:width .2s cubic-bezier(0,0,.2,1),opacity .1s cubic-bezier(0,0,.2,1)}.bb-button-spinner.visible{opacity:1;width:20px;margin-right:8px;visibility:visible}.bb-button.loading.full>.bb-button-spinner{left:8px;margin-right:0;position:absolute}\n"], dependencies: [{ kind: "component", type: BbSpinner, selector: "bb-spinner", inputs: ["color", "alt", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbAnchor, decorators: [{
-            type: Component,
-            args: [{ selector: 'a[bb-button]', exportAs: 'bbButton, bbAnchor', host: {
-                        'class': 'bb-button',
-                        '[attr.tabindex]': '(disabled || loading) ? -1 : (tabIndex || 0)',
-                        '[attr.disabled]': 'disabled || loading || null',
-                        '[attr.aria-disabled]': '(disabled || loading).toString()',
-                        '(click)': 'stopDisabledEvents($event)'
-                    }, inputs: ['disabled', 'loading'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<bb-spinner [class.visible]=\"loading\"\n            class=\"bb-button-spinner small\">\n</bb-spinner>\n\n<ng-content></ng-content>\n", styles: [".bb-button{height:38px;padding:0 8px;cursor:pointer;font-size:16px;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;border-radius:4px;text-align:center;align-items:center;display:inline-flex;text-decoration:none;justify-content:center;background-color:#fff;color:#2d3c4d!important;border:1px solid #d4d8e1;transition-duration:.2s;box-shadow:0 6px 6px -6px #0000001a;transition-timing-function:cubic-bezier(0,0,.2,1);transition-property:padding-left,background-color,box-shadow}.bb-button:hover{background-color:#fcfcfb}.bb-button:focus,.bb-button:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #dce0e980}.bb-button.full{width:100%}.bb-button.full.loading{padding-left:42px}.bb-button.primary{border-color:#2f2b85;color:#fff!important;background-color:#5b53ff}.bb-button.primary:hover{background-color:#564ee6}.bb-button.primary:focus,.bb-button.primary:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #5b53ff80}.bb-button.destructive{border-color:#8f2020;color:#fff!important;background-color:#d32f2f}.bb-button.destructive:hover{background-color:#c32929}.bb-button.destructive:focus,.bb-button.destructive:active{box-shadow:0 6px 6px -6px #0000001a,0 0 0 3px #d32f2f80}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{opacity:.4;cursor:default;box-shadow:none}.bb-button-spinner{width:0;opacity:0;overflow:hidden;visibility:hidden;padding:0!important;transition:width .2s cubic-bezier(0,0,.2,1),opacity .1s cubic-bezier(0,0,.2,1)}.bb-button-spinner.visible{opacity:1;width:20px;margin-right:8px;visibility:visible}.bb-button.loading.full>.bb-button-spinner{left:8px;margin-right:0;position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabIndex: [{
-                type: Input
-            }] } });
+const ELEMENTS_ICONS = new InjectionToken('elements_icons');
+const ELEMENTS_ERRORS = new InjectionToken('elements_errors');
 
-class BbImagePickerBase {
-}
-const BbImagePickerMixinBase = mixinDisabled(mixinGrouped(BbImagePickerBase));
-class BbImagePicker extends BbImagePickerMixinBase {
-    constructor(_converter) {
-        super();
-        this._converter = _converter;
-        // Inputs.
-        this.label = null;
-        this.placeholder = null;
-        this.styleDimensions = null;
-        this.cropDimensions = null;
-        // Form.
-        this._value$ = new BehaviorSubject(null);
-        this.valueChange = new EventEmitter();
-        this.onTouchedCallback = () => {
-        };
-        this.onChangeCallback = () => {
-        };
-    }
-    get value() {
-        return this._value$.getValue();
-    }
-    set value(value) {
-        this._value$.next(value);
-        this.valueChange.emit(value);
+class BbExtraErrorControls {
+    constructor() {
+        // State.
+        this.changes = new BehaviorSubject(null);
+        // Subscriptions.
+        this._subscription = null;
     }
-    get image() {
-        return this._value$.pipe(map(value => value || this.placeholder), map(value => value ? `url(${value})` : null));
+    set extraControls(controls) {
+        this.handle(controls);
     }
-    async onFileChange(event) {
-        // Grab the file from the event.
-        const file = event.target.files[0];
-        // Check if the file exists.
-        if (!file || this.disabled) {
-            return;
-        }
-        try {
-            this.value = await this._converter.toDataUri(file, this.cropDimensions);
-        }
-        catch (error) {
-            this.value = null;
-        }
-        this.onChangeCallback(this.value);
-        if (this.fileInput && this.fileInput.nativeElement) {
-            this.fileInput.nativeElement.value = '';
-        }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
     }
-    openFilePicker() {
-        if (this.disabled) {
+    handle(controls) {
+        this._subscription?.unsubscribe();
+        if (controls.length <= 0) {
             return;
         }
-        // Execute a click on the file input.
-        this.fileInput
-            && this.fileInput.nativeElement
-            && this.fileInput.nativeElement.click
-            && this.fileInput.nativeElement.click();
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(method) {
-        this.onChangeCallback = method;
-    }
-    registerOnTouched(method) {
-        this.onTouchedCallback = method;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbImagePicker, deps: [{ token: i1$1.ImageConverter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbImagePicker, selector: "bb-image-picker", inputs: { grouped: "grouped", disabled: "disabled", label: "label", placeholder: "placeholder", styleDimensions: "styleDimensions", cropDimensions: "cropDimensions", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled", "class.grouped": "grouped" }, classAttribute: "bb-image-picker" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbImagePicker), multi: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- The input that can open the file picker. -->\n<input #fileInput\n       (change)=\"onFileChange($event)\"\n       class=\"bb-image-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       accept=\"image/*\">\n\n<span [style.width]=\"styleDimensions?.width || '100%'\"\n      [style.height]=\"styleDimensions?.height || '215px'\"\n      [style.background-image]=\"image | async\"\n      class=\"bb-image-input-image\">\n    </span>\n\n<button *ngIf=\"label as labelText\"\n        (click)=\"openFilePicker()\"\n        bb-button\n        class=\"bb-image-input-button\"\n        type=\"button\">\n    {{ labelText }}\n</button>\n", styles: [".bb-image-picker{display:flex;align-items:center;flex-direction:column}.bb-image-picker.circle>.bb-image-input-image{border-radius:50%}.bb-image-picker.grouped{margin-bottom:20px}.bb-image-picker.disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-image-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-image-input-image{display:flex;cursor:default;position:relative;border-radius:4px;align-items:center;justify-content:center;background:#0003 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) center center/cover no-repeat}.bb-image-input-button{margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbImagePicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-image-picker',
-                        '[class.disabled]': 'disabled',
-                        '[class.grouped]': 'grouped'
-                    }, inputs: ['grouped', 'disabled'], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbImagePicker), multi: true }], preserveWhitespaces: false, template: "<!-- The input that can open the file picker. -->\n<input #fileInput\n       (change)=\"onFileChange($event)\"\n       class=\"bb-image-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       accept=\"image/*\">\n\n<span [style.width]=\"styleDimensions?.width || '100%'\"\n      [style.height]=\"styleDimensions?.height || '215px'\"\n      [style.background-image]=\"image | async\"\n      class=\"bb-image-input-image\">\n    </span>\n\n<button *ngIf=\"label as labelText\"\n        (click)=\"openFilePicker()\"\n        bb-button\n        class=\"bb-image-input-button\"\n        type=\"button\">\n    {{ labelText }}\n</button>\n", styles: [".bb-image-picker{display:flex;align-items:center;flex-direction:column}.bb-image-picker.circle>.bb-image-input-image{border-radius:50%}.bb-image-picker.grouped{margin-bottom:20px}.bb-image-picker.disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-image-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-image-input-image{display:flex;cursor:default;position:relative;border-radius:4px;align-items:center;justify-content:center;background:#0003 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) center center/cover no-repeat}.bb-image-input-button{margin-top:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ImageConverter }], propDecorators: { fileInput: [{
-                type: ViewChild,
-                args: ['fileInput', { static: true }]
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], styleDimensions: [{
-                type: Input
-            }], cropDimensions: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class BbFormSubmit {
-    constructor(_host, _formDirective) {
-        this._host = _host;
-        this._formDirective = _formDirective;
-    }
-    ngOnInit() {
-        // Submit changes.
-        const regularSubmitChanges$ = fromEvent(this.nativeElement, 'submit').pipe(map(() => true));
-        // Reactive form submit changes.
-        const reactiveSubmitChanges$ = this.reactiveSubmitChanges();
-        // Reset changes.
-        const resetChanges$ = fromEvent(this.nativeElement, 'reset').pipe(map(() => false));
-        // Listen to the submit status.
-        this.submitStatus$ = merge(regularSubmitChanges$, reactiveSubmitChanges$, resetChanges$).pipe(startWith(false), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
-    }
-    submit() {
-        this._formDirective?.ngSubmit?.emit();
-    }
-    reset() {
-        return this.nativeElement?.reset();
-    }
-    get nativeElement() {
-        return this._host?.nativeElement;
-    }
-    reactiveSubmitChanges() {
-        if (!this._formDirective) {
-            return EMPTY;
-        }
-        return this._formDirective.ngSubmit.pipe(map(() => true));
+        const validationErrors$ = controls.map(control => {
+            return control.valueChanges.pipe(map(_ => control?.errors));
+        });
+        const errors$ = combineLatest(validationErrors$).pipe(map(validationErrors => validationErrors.find(error => !!error)), distinctUntilChanged());
+        this._subscription = errors$
+            .subscribe(errors => this.changes.next(errors ?? null));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormSubmit, deps: [{ token: i0.ElementRef }, { token: i2.FormGroupDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbFormSubmit, selector: "form", exportAs: ["bbForm"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbExtraErrorControls, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbExtraErrorControls, isStandalone: true, selector: "[bbExtraErrorControls]", inputs: { extraControls: ["bbExtraErrorControls", "extraControls"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormSubmit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbExtraErrorControls, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'form',
-                    exportAs: 'bbForm'
+                    selector: '[bbExtraErrorControls]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }] });
+        }], propDecorators: { extraControls: [{
+                type: Input,
+                args: [{ alias: 'bbExtraErrorControls' }]
+            }] } });
 
 class BbFormError {
-    // Inputs.
-    set control(value) {
-        this._ngControl = value;
-    }
-    get control() {
-        return this._ngControl;
-    }
-    constructor(_form, _control, _formSubmitter, _errors) {
+    constructor(_form, _ngControl, _formSubmitter, _extraErrorControls, _errors) {
         this._form = _form;
-        this._control = _control;
+        this._ngControl = _ngControl;
         this._formSubmitter = _formSubmitter;
+        this._extraErrorControls = _extraErrorControls;
         this._errors = _errors;
+        // Readonly data.
+        this.errorsMap = this._errors.reduce((previous, current) => ({ ...previous, ...current }), {});
+        // Inputs.
+        this.control = null;
         // Outputs.
         this.errorChange = new EventEmitter();
-        // Subscriptions.
-        this._ngControl = null;
     }
     ngOnInit() {
-        // Set the control if it was not set before.
+        this.setControl();
+        this.setError();
+    }
+    setControl() {
         if (!this.control) {
-            this.control = this._control;
+            this.control = this._ngControl;
         }
-        // Listen for the submit changes
+    }
+    setError() {
         const submitStatus$ = this.submitStatusChanges();
-        // An observable that emits error changes.
-        const errorChanges$ = this.statusChanges().pipe(map(() => this.getError(this.control.errors)), distinctUntilChanged(), map(error => typeof error === 'string' ? { token: error } : error));
-        // Whenever the user submitted the form we want to
-        // listen for any error changes.
-        this.error$ = combineLatest([submitStatus$, errorChanges$]).pipe(map(([submitted, error]) => {
-            // If not submitted return null.
-            if (!submitted) {
-                return null;
-            }
-            // Return the error if submitted.
-            return error;
-        }), tap(value => this.errorChange.emit(value)));
+        const errorChanges$ = this.getErrors().pipe(map(errors => this.formatError(errors)), distinctUntilChanged(), map(error => typeof error === 'string' ? { token: error } : error));
+        this.error$ = combineLatest([submitStatus$, errorChanges$]).pipe(map(([submitted, error]) => submitted ? error : null), tap(value => this.errorChange.emit(value)));
     }
-    getError(errors) {
-        // Validate the errors exist.
-        if (!errors) {
-            return null;
-        }
-        // Get the first error in the errors.
-        const [errorName] = Object.keys(errors);
-        const error = errors[errorName];
-        // Validate the error exists.
+    formatError(errors) {
+        const [errorName] = Object.keys(errors ?? {});
+        const error = errors?.[errorName];
         if (!error) {
             return null;
         }
-        // Map the arrays into a object so we can
-        // access the functions by a key-lookup.
-        const errorFunctions = this._errors.reduce((previous, current) => ({ ...previous, ...current }), {});
-        // Get the error function.
-        const errorFunction = errorFunctions[errorName] || errorFunctions['unknown'];
-        // Validate the error function exists.
+        const errorFunction = this.errorsMap?.[errorName] ?? this.errorsMap?.['unknown'];
         if (!errorFunction) {
             return null;
         }
-        // Return the parsed error.
         return errorFunction(error);
     }
     submitStatusChanges() {
@@ -438,29 +183,25 @@ class BbFormError {
         }
         return this._formSubmitter.submitted$.pipe(distinctUntilChanged());
     }
-    statusChanges() {
-        if (!this.control) {
-            return EMPTY;
-        }
-        if (!this.control.statusChanges) {
-            return EMPTY;
-        }
-        return this.control.statusChanges.pipe(startWith(this.control.status), delay(0));
+    getErrors() {
+        const error$ = (this.control?.statusChanges ?? of(null)).pipe(startWith(this.control?.status), map(_ => this.control?.errors ?? null), delay(0));
+        const extraError$ = this._extraErrorControls?.changes?.asObservable() ?? of(null);
+        return combineLatest([error$, extraError$]).pipe(map(([error, extraError]) => error ?? extraError ?? null), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormError, deps: [{ token: BbFormSubmit, optional: true }, { token: i2.NgControl, optional: true }, { token: BbFormSubmitter, optional: true }, { token: ELEMENTS_ERRORS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbFormError, selector: "bb-form-error", inputs: { control: "control" }, outputs: { errorChange: "errorChange" }, host: { classAttribute: "bb-form-error" }, ngImport: i0, template: "<ng-container *ngIf=\"error$ | async as error\">\n    <p *ngIf=\"error?.token | bbLocalize:{optional: true, data: error?.data} as message\"\n       class=\"bb-form-error-message\">\n        {{ message }}\n    </p>\n</ng-container>", styles: [".bb-form-error{display:block}.bb-form-error-message{color:#c23934;display:block;font-size:13px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormError, deps: [{ token: BbFormSubmit, optional: true }, { token: i1.NgControl, optional: true }, { token: BbFormSubmitter, optional: true }, { token: BbExtraErrorControls, optional: true }, { token: ELEMENTS_ERRORS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbFormError, isStandalone: true, selector: "bb-form-error", inputs: { control: "control" }, outputs: { errorChange: "errorChange" }, host: { classAttribute: "bb-form-error" }, ngImport: i0, template: "@if (error$ | async; as error) {\n    @if (error?.token | bbLocalize:{optional: true, data: error?.data}; as message) {\n        <p class=\"bb-form-error-message\">{{ message }}</p>\n    }\n}\n", styles: [".bb-form-error{display:block}.bb-form-error-message{color:#c23934;display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormError, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-form-error', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-form-error'
-                    }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"error$ | async as error\">\n    <p *ngIf=\"error?.token | bbLocalize:{optional: true, data: error?.data} as message\"\n       class=\"bb-form-error-message\">\n        {{ message }}\n    </p>\n</ng-container>", styles: [".bb-form-error{display:block}.bb-form-error-message{color:#c23934;display:block;font-size:13px;margin-top:4px}\n"] }]
+            args: [{ selector: 'bb-form-error', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-form-error' }, preserveWhitespaces: false, standalone: true, imports: [AsyncPipe, BbLocalize], template: "@if (error$ | async; as error) {\n    @if (error?.token | bbLocalize:{optional: true, data: error?.data}; as message) {\n        <p class=\"bb-form-error-message\">{{ message }}</p>\n    }\n}\n", styles: [".bb-form-error{display:block}.bb-form-error-message{color:#c23934;display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem}\n"] }]
         }], ctorParameters: () => [{ type: BbFormSubmit, decorators: [{
                     type: Optional
-                }] }, { type: i2.NgControl, decorators: [{
+                }] }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: BbFormSubmitter, decorators: [{
                     type: Optional
+                }] }, { type: BbExtraErrorControls, decorators: [{
+                    type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -472,39 +213,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Output
             }] } });
 
-let nextUniqueId$2 = 0;
-class BbFormControlBase {
-}
-const BbFormControlMixinBase = mixinDisabled(mixinFocused(mixinReadonly(mixinGrouped(mixinRequired(mixinError(mixinHideErrors(BbFormControlBase)))))));
-class BbFormControl extends BbFormControlMixinBase {
+let nextUniqueId$3 = 0;
+class BbFormControl {
     constructor() {
-        super(...arguments);
+        // Readonly data.
+        this.labelId = `bb-form-control-${nextUniqueId$3++}`;
         // Inputs.
         this.label = null;
         this.hint = null;
-        // Data.
-        this.arrow = false;
-        // Data.
-        this.labelId = `bb-form-control-${nextUniqueId$2++}`;
+        this.grouped = false;
+        this.hideErrors = false;
+        // State.
+        this.error = false;
     }
     onErrorChange(error) {
         this.error = !!error;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbFormControl, selector: "bb-form-control", inputs: { grouped: "grouped", hideErrors: "hideErrors", label: "label", hint: "hint" }, host: { properties: { "class.readonly": "readonly", "class.required": "required", "class.disabled": "disabled", "class.focused": "focused", "class.grouped": "grouped", "class.arrow": "arrow", "class.error": "error" }, classAttribute: "bb-form-control" }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bb-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The input with the addons. -->\n<div class=\"bb-form-control-container\">\n    <ng-content select=\"[bbPrefix]\"></ng-content>\n    <ng-content select=\"[bbInput]\"></ng-content>\n    <ng-content select=\"[bbSuffix]\"></ng-content>\n</div>\n\n<!-- The error component. -->\n<bb-form-error *ngIf=\"!hideErrors\"\n               [control]=\"ngControl\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The form control hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n", styles: [".bb-form-control{color:#2d3c4d;display:block}.bb-form-control>.bb-form-control-container>*.bb-prefix,.bb-form-control>.bb-form-control-container>*.bb-suffix{margin:0 8px;color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.grouped{margin-bottom:20px}.bb-form-control.small{max-width:240px}.bb-form-control.medium{max-width:480px}.bb-form-control.large{max-width:720px}.bb-form-control.required>.bb-form-control-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-form-control.disabled>.bb-form-control-container{cursor:default;pointer-events:none;background-color:#cccccca3}.bb-form-control.disabled>.bb-form-control-container>input,.bb-form-control.disabled>.bb-form-control-container>textarea,.bb-form-control.disabled>.bb-form-control-container>select{color:#aaa}.bb-form-control.readonly>.bb-form-control-container{cursor:default;border:1px dotted #bdc4c9}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container{background-color:#fff;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #007bff33}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.error>.bb-form-control-label{color:#c23934}.bb-form-control.error>.bb-form-control-hint{display:none}.bb-form-control.error>.bb-form-control-container{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-form-control.error>.bb-form-control-container>*.bb-prefix,.bb-form-control.error>.bb-form-control-container>.bb-suffix{color:#c23934}.bb-form-control.error>.bb-form-control-container>input::placeholder,.bb-form-control.error>.bb-form-control-container>textarea::placeholder{color:#c2393466!important}.bb-form-control.arrow>.bb-form-control-container:after{top:0;right:0;bottom:0;width:20px;content:\"\";height:36px;display:flex;min-width:20px;position:absolute;pointer-events:none;background-repeat:no-repeat;background-position:calc(100% - 8px) center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAGCAYAAAAYLBS/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAWUlEQVQYlY3QsQ2DMAAEwMMTsAkrZInvWY3WXiIjJJtkA1OBRCIRf/nSffFTrXXGE4uxbCXJBw+8R0CStcAg3JKsUI7mDzzBBd3AC4Cp9/4z21o7znl9A9gBAf4fpjLTwkUAAAAASUVORK5CYII=)}.bb-form-control-container{width:100%;display:flex;overflow:hidden;position:relative;border-radius:3px;align-items:center;border:1px solid #b6bbc1;background-color:#fff8ff;transition-duration:.25s;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a}.bb-form-control-container>input::placeholder,.bb-form-control-container>textarea::placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input,.bb-form-control-container>textarea,.bb-form-control-container>select{margin:0;width:100%;border:none;color:#3d464d;font-size:16px;appearance:none;background-color:transparent}.bb-form-control-container>input,.bb-form-control-container>select{height:36px;padding:0 8px}.bb-form-control-container>select{padding-right:28px}.bb-form-control-container>select>::-ms-expand{display:none}.bb-form-control-container>input::-ms-clear,.bb-form-control-container>input::-ms-reveal{width:0;height:0;display:none}.bb-form-control-container>input::-webkit-search-decoration,.bb-form-control-container>input::-webkit-search-cancel-button,.bb-form-control-container>input::-webkit-search-results-button,.bb-form-control-container>input::-webkit-search-results-decoration{display:none}.bb-form-control-container>textarea{resize:none;padding:8px}.bb-form-control-label{color:#000;display:block;position:relative;margin-bottom:4px;transition:color 30ms cubic-bezier(0,0,.2,1)}.bb-form-control-error,.bb-form-control-hint{display:block;font-size:13px;margin-top:4px}.bb-form-control-error{color:#c23934}.bb-form-control-hint{color:#738694}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbFormControl, isStandalone: true, selector: "bb-form-control", inputs: { label: "label", hint: "hint", grouped: ["grouped", "grouped", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute] }, host: { properties: { "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-form-control" }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-form-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<!-- The input with the addons. -->\n<div class=\"bb-form-control-container\">\n    <ng-content select=\"[bbPrefix]\"></ng-content>\n    <ng-content select=\"[bbInput]\"></ng-content>\n    <ng-content select=\"[bbSuffix]\"></ng-content>\n</div>\n\n<!-- The error component. -->\n@if (!hideErrors) {\n    <bb-form-error [control]=\"ngControl\"\n                   (errorChange)=\"onErrorChange($event)\">\n    </bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-form-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-form-control{color:#111;display:block}.bb-form-control>.bb-form-control-container>*.bb-prefix,.bb-form-control>.bb-form-control-container>*.bb-suffix{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control>.bb-form-control-container>*.bb-prefix{margin-left:.5rem}.bb-form-control>.bb-form-control-container>*.bb-suffix{margin-right:.5rem}.bb-form-control.grouped{margin-bottom:1.5rem}.bb-form-control.small{max-width:15rem}.bb-form-control.medium{max-width:30rem}.bb-form-control.large{max-width:45rem}.bb-form-control:has(input:required,textarea:required,select:required)>.bb-form-control-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,textarea:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){border-color:#757e8a;box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-form-control-box-shadow)}.bb-form-control-container:has(input:not(:disabled):read-only,textarea:not(:disabled):read-only){cursor:default;border-style:dotted;border-color:#bdc4c9}.bb-form-control-container:has(input:disabled,textarea:disabled,select:disabled){cursor:default;pointer-events:none;color:gray;background-color:#e6e6e6}.bb-form-control.error>.bb-form-control-label{color:#c23934}.bb-form-control.error>.bb-form-control-hint{display:none}.bb-form-control.error>.bb-form-control-container>*.bb-prefix,.bb-form-control.error>.bb-form-control-container>.bb-suffix{color:#b51c1c}.bb-form-control.error>.bb-form-control-container>input::placeholder,.bb-form-control.error>.bb-form-control-container>textarea::placeholder{color:#ea7b7b}.bb-form-control.error>.bb-form-control-container,.bb-form-control.error>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,textarea:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){border:1px solid hsl(0,73%,30%);background-color:#f8d3d3;box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-form-control-container:has(select):after{top:0;right:0;bottom:0;content:\"\";width:1.5rem;display:flex;height:2.5rem;min-width:1.5rem;position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:.75rem .375rem;background-position:calc(100% - .5rem) center;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 6\"%3E%3Cpath fill=\"%23D8D8D8\" fill-rule=\"evenodd\" d=\"m6 6 6-6H0z\"/%3E%3C/svg%3E')}.bb-form-control-container{width:100%;display:flex;color:#111;overflow:hidden;position:relative;align-items:center;border-radius:.5rem;background-color:#fff;transition-duration:.25s;border:1px solid hsl(213,8%,74%);transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-form-control-container>input::placeholder,.bb-form-control-container>textarea::placeholder{color:#d1d1d1;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input,.bb-form-control-container>textarea,.bb-form-control-container>select{margin:0;width:100%;border:none;color:inherit;font-size:1rem;appearance:none;background-color:transparent}.bb-form-control-container>input,.bb-form-control-container>select{height:2.5rem;padding:0 .5rem}.bb-form-control-container>select{padding-right:2rem}.bb-form-control-container>select>::-ms-expand{display:none}.bb-form-control-container>input::-ms-clear,.bb-form-control-container>input::-ms-reveal{width:0;height:0;display:none}.bb-form-control-container>input::-webkit-search-decoration,.bb-form-control-container>input::-webkit-search-cancel-button,.bb-form-control-container>input::-webkit-search-results-button,.bb-form-control-container>input::-webkit-search-results-decoration{display:none}.bb-form-control-container>textarea{resize:none;padding:.5rem}.bb-form-control-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-form-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"], dependencies: [{ kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormControl, decorators: [{
             type: Component,
             args: [{ selector: 'bb-form-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bb-form-control',
-                        '[class.readonly]': 'readonly',
-                        '[class.required]': 'required',
-                        '[class.disabled]': 'disabled',
-                        '[class.focused]': 'focused',
                         '[class.grouped]': 'grouped',
-                        '[class.arrow]': 'arrow',
                         '[class.error]': 'error'
-                    }, inputs: ['grouped', 'hideErrors'], preserveWhitespaces: false, template: "<!-- Label of the form control. -->\n<label *ngIf=\"label as labelContent\"\n       [attr.for]=\"labelId\"\n       class=\"bb-form-control-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The input with the addons. -->\n<div class=\"bb-form-control-container\">\n    <ng-content select=\"[bbPrefix]\"></ng-content>\n    <ng-content select=\"[bbInput]\"></ng-content>\n    <ng-content select=\"[bbSuffix]\"></ng-content>\n</div>\n\n<!-- The error component. -->\n<bb-form-error *ngIf=\"!hideErrors\"\n               [control]=\"ngControl\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The form control hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-form-control-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n", styles: [".bb-form-control{color:#2d3c4d;display:block}.bb-form-control>.bb-form-control-container>*.bb-prefix,.bb-form-control>.bb-form-control-container>*.bb-suffix{margin:0 8px;color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.grouped{margin-bottom:20px}.bb-form-control.small{max-width:240px}.bb-form-control.medium{max-width:480px}.bb-form-control.large{max-width:720px}.bb-form-control.required>.bb-form-control-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-form-control.disabled>.bb-form-control-container{cursor:default;pointer-events:none;background-color:#cccccca3}.bb-form-control.disabled>.bb-form-control-container>input,.bb-form-control.disabled>.bb-form-control-container>textarea,.bb-form-control.disabled>.bb-form-control-container>select{color:#aaa}.bb-form-control.readonly>.bb-form-control-container{cursor:default;border:1px dotted #bdc4c9}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container{background-color:#fff;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #007bff33}.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>input::placeholder,.bb-form-control:not(.disabled):not(.readonly).focused>.bb-form-control-container>textarea::placeholder{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control.error>.bb-form-control-label{color:#c23934}.bb-form-control.error>.bb-form-control-hint{display:none}.bb-form-control.error>.bb-form-control-container{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-form-control.error>.bb-form-control-container>*.bb-prefix,.bb-form-control.error>.bb-form-control-container>.bb-suffix{color:#c23934}.bb-form-control.error>.bb-form-control-container>input::placeholder,.bb-form-control.error>.bb-form-control-container>textarea::placeholder{color:#c2393466!important}.bb-form-control.arrow>.bb-form-control-container:after{top:0;right:0;bottom:0;width:20px;content:\"\";height:36px;display:flex;min-width:20px;position:absolute;pointer-events:none;background-repeat:no-repeat;background-position:calc(100% - 8px) center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAGCAYAAAAYLBS/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAWUlEQVQYlY3QsQ2DMAAEwMMTsAkrZInvWY3WXiIjJJtkA1OBRCIRf/nSffFTrXXGE4uxbCXJBw+8R0CStcAg3JKsUI7mDzzBBd3AC4Cp9/4z21o7znl9A9gBAf4fpjLTwkUAAAAASUVORK5CYII=)}.bb-form-control-container{width:100%;display:flex;overflow:hidden;position:relative;border-radius:3px;align-items:center;border:1px solid #b6bbc1;background-color:#fff8ff;transition-duration:.25s;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a}.bb-form-control-container>input::placeholder,.bb-form-control-container>textarea::placeholder{color:#d2d2d2;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input,.bb-form-control-container>textarea,.bb-form-control-container>select{margin:0;width:100%;border:none;color:#3d464d;font-size:16px;appearance:none;background-color:transparent}.bb-form-control-container>input,.bb-form-control-container>select{height:36px;padding:0 8px}.bb-form-control-container>select{padding-right:28px}.bb-form-control-container>select>::-ms-expand{display:none}.bb-form-control-container>input::-ms-clear,.bb-form-control-container>input::-ms-reveal{width:0;height:0;display:none}.bb-form-control-container>input::-webkit-search-decoration,.bb-form-control-container>input::-webkit-search-cancel-button,.bb-form-control-container>input::-webkit-search-results-button,.bb-form-control-container>input::-webkit-search-results-decoration{display:none}.bb-form-control-container>textarea{resize:none;padding:8px}.bb-form-control-label{color:#000;display:block;position:relative;margin-bottom:4px;transition:color 30ms cubic-bezier(0,0,.2,1)}.bb-form-control-error,.bb-form-control-hint{display:block;font-size:13px;margin-top:4px}.bb-form-control-error{color:#c23934}.bb-form-control-hint{color:#738694}\n"] }]
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbTemplate, BbFormError], template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-form-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<!-- The input with the addons. -->\n<div class=\"bb-form-control-container\">\n    <ng-content select=\"[bbPrefix]\"></ng-content>\n    <ng-content select=\"[bbInput]\"></ng-content>\n    <ng-content select=\"[bbSuffix]\"></ng-content>\n</div>\n\n<!-- The error component. -->\n@if (!hideErrors) {\n    <bb-form-error [control]=\"ngControl\"\n                   (errorChange)=\"onErrorChange($event)\">\n    </bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-form-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-form-control{color:#111;display:block}.bb-form-control>.bb-form-control-container>*.bb-prefix,.bb-form-control>.bb-form-control-container>*.bb-suffix{color:#b4b4b4;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control>.bb-form-control-container>*.bb-prefix{margin-left:.5rem}.bb-form-control>.bb-form-control-container>*.bb-suffix{margin-right:.5rem}.bb-form-control.grouped{margin-bottom:1.5rem}.bb-form-control.small{max-width:15rem}.bb-form-control.medium{max-width:30rem}.bb-form-control.large{max-width:45rem}.bb-form-control:has(input:required,textarea:required,select:required)>.bb-form-control-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,textarea:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){border-color:#757e8a;box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-form-control-box-shadow)}.bb-form-control-container:has(input:not(:disabled):read-only,textarea:not(:disabled):read-only){cursor:default;border-style:dotted;border-color:#bdc4c9}.bb-form-control-container:has(input:disabled,textarea:disabled,select:disabled){cursor:default;pointer-events:none;color:gray;background-color:#e6e6e6}.bb-form-control.error>.bb-form-control-label{color:#c23934}.bb-form-control.error>.bb-form-control-hint{display:none}.bb-form-control.error>.bb-form-control-container>*.bb-prefix,.bb-form-control.error>.bb-form-control-container>.bb-suffix{color:#b51c1c}.bb-form-control.error>.bb-form-control-container>input::placeholder,.bb-form-control.error>.bb-form-control-container>textarea::placeholder{color:#ea7b7b}.bb-form-control.error>.bb-form-control-container,.bb-form-control.error>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,textarea:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){border:1px solid hsl(0,73%,30%);background-color:#f8d3d3;box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-form-control-container:has(select):after{top:0;right:0;bottom:0;content:\"\";width:1.5rem;display:flex;height:2.5rem;min-width:1.5rem;position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:.75rem .375rem;background-position:calc(100% - .5rem) center;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 6\"%3E%3Cpath fill=\"%23D8D8D8\" fill-rule=\"evenodd\" d=\"m6 6 6-6H0z\"/%3E%3C/svg%3E')}.bb-form-control-container{width:100%;display:flex;color:#111;overflow:hidden;position:relative;align-items:center;border-radius:.5rem;background-color:#fff;transition-duration:.25s;border:1px solid hsl(213,8%,74%);transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-form-control-container>input::placeholder,.bb-form-control-container>textarea::placeholder{color:#d1d1d1;transition:color .3s cubic-bezier(0,0,.2,1)}.bb-form-control-container>input,.bb-form-control-container>textarea,.bb-form-control-container>select{margin:0;width:100%;border:none;color:inherit;font-size:1rem;appearance:none;background-color:transparent}.bb-form-control-container>input,.bb-form-control-container>select{height:2.5rem;padding:0 .5rem}.bb-form-control-container>select{padding-right:2rem}.bb-form-control-container>select>::-ms-expand{display:none}.bb-form-control-container>input::-ms-clear,.bb-form-control-container>input::-ms-reveal{width:0;height:0;display:none}.bb-form-control-container>input::-webkit-search-decoration,.bb-form-control-container>input::-webkit-search-cancel-button,.bb-form-control-container>input::-webkit-search-results-button,.bb-form-control-container>input::-webkit-search-results-decoration{display:none}.bb-form-control-container>textarea{resize:none;padding:.5rem}.bb-form-control-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-form-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"] }]
         }], propDecorators: { ngControl: [{
                 type: ContentChild,
                 args: [NgControl]
@@ -512,6 +246,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], hint: [{
                 type: Input
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideErrors: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class BbInput {
+    constructor(_elementRef, _formControl) {
+        this._elementRef = _elementRef;
+        this._formControl = _formControl;
+        this._required = false;
+    }
+    focus() {
+        return this._elementRef?.nativeElement?.focus();
+    }
+    get id() {
+        return this._formControl?.labelId ?? null;
+    }
+    get required() {
+        const hasValidator = this._formControl?.ngControl?.control?.hasValidator(Validators.required);
+        return hasValidator || this._required === true ? true : null;
+    }
+    set required(value) {
+        this._required = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbInput, deps: [{ token: i0.ElementRef }, { token: BbFormControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: BbInput, isStandalone: true, selector: "input[bbInput],textarea[bbInput],select[bbInput]", inputs: { required: ["required", "required", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.required": "this.required" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[bbInput],textarea[bbInput],select[bbInput]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: BbFormControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['attr.required']
+            }] } });
+
+class BbSuffix {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbSuffix, isStandalone: true, selector: "[bbSuffix]", host: { classAttribute: "bb-suffix" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbSuffix]',
+                    host: { 'class': 'bb-suffix' },
+                    standalone: true
+                }]
+        }] });
+class BbPrefix {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbPrefix, isStandalone: true, selector: "[bbPrefix]", host: { classAttribute: "bb-prefix" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbPrefix]',
+                    host: { 'class': 'bb-prefix' },
+                    standalone: true
+                }]
+        }] });
+
+class BbImageUpload {
+    constructor(_files, _platform, _renderer) {
+        this._files = _files;
+        this._platform = _platform;
+        this._renderer = _renderer;
+        // Inputs.
+        this.width = null;
+        this.height = null;
+        this.mode = 'aspect-fit';
+        this.type = 'png';
+        // Outputs.
+        this.onDataUri = new EventEmitter();
+        this.onFile = new EventEmitter();
+    }
+    async onClick() {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        const originalFile = await this.openFilePicker();
+        const dataUri = await this.toDataUri(originalFile);
+        const image = await this.toImage(dataUri);
+        const scaledDataUri = this.scaleImage(image);
+        this.onDataUri.emit(scaledDataUri);
+        if (this.onFile?.observed) {
+            const name = this.getFileName();
+            const file = this._files.fromDataUri(scaledDataUri, name);
+            this.onFile.emit(file);
+        }
+    }
+    openFilePicker() {
+        return new Promise(resolve => {
+            const input = this._renderer.createElement('input');
+            this._renderer.setProperty(input, 'type', 'file');
+            this._renderer.setProperty(input, 'accept', 'image/png,image/jpeg');
+            const handler = this._renderer.listen(input, 'change', event => {
+                handler();
+                const files = event?.target?.files ?? [];
+                const file = files?.[0] ?? null;
+                return resolve(file);
+            });
+            input?.click?.();
+        });
+    }
+    async toDataUri(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onerror = () => reject('error file read');
+            reader.onabort = () => reject('abort file read');
+            reader.onload = () => resolve(reader?.result);
+            reader.readAsDataURL(file);
+        });
+    }
+    toImage(src) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.src = src;
+            image.onload = () => resolve(image);
+            image.onerror = error => reject(error);
+        });
+    }
+    scaleImage(image) {
+        const imageWidth = image?.width ?? 0;
+        const imageHeight = image?.height ?? 0;
+        const canvas = this._renderer.createElement('canvas');
+        this._renderer.setProperty(canvas, 'width', this.width ?? imageWidth);
+        this._renderer.setProperty(canvas, 'height', this.height ?? imageHeight);
+        const context = canvas.getContext('2d');
+        const scaleX = canvas.width / imageWidth;
+        const scaleY = canvas.height / imageHeight;
+        const scale = this.getScaleByMode(scaleX, scaleY);
+        const scaledWidth = imageWidth * scale;
+        const scaledHeight = imageHeight * scale;
+        const offsetX = (canvas.width - scaledWidth) / 2;
+        const offsetY = (canvas.height - scaledHeight) / 2;
+        context.drawImage(image, 0, 0, imageWidth, imageHeight, offsetX, offsetY, scaledWidth, scaledHeight);
+        const type = this.getExportType();
+        return canvas.toDataURL(type);
+    }
+    getExportType() {
+        switch (this.type) {
+            case 'jpg':
+                return 'image/jpeg';
+            case 'png':
+            default:
+                return 'image/png';
+        }
+    }
+    getScaleByMode(x, y) {
+        switch (this.mode) {
+            case 'aspect-fill':
+                return Math.max(x, y);
+            case 'aspect-fit':
+            default:
+                return Math.min(x, y);
+        }
+    }
+    getFileName() {
+        switch (this.type) {
+            case 'jpg':
+                return 'image.jpg';
+            case 'png':
+                return 'image.png';
+            default:
+                return 'image';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbImageUpload, deps: [{ token: i1$1.Files }, { token: i2.Platform }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: BbImageUpload, isStandalone: true, selector: "button[bbImageUpload]", inputs: { width: ["bbImageUploadWidth", "width", numberAttribute], height: ["bbImageUploadHeight", "height", numberAttribute], mode: ["bbImageUploadMode", "mode"], type: ["bbImageUploadType", "type"] }, outputs: { onDataUri: "onDataUri", onFile: "onFile" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbImageUpload, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[bbImageUpload]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Files }, { type: i2.Platform }, { type: i0.Renderer2 }], propDecorators: { width: [{
+                type: Input,
+                args: [{ alias: 'bbImageUploadWidth', transform: numberAttribute }]
+            }], height: [{
+                type: Input,
+                args: [{ alias: 'bbImageUploadHeight', transform: numberAttribute }]
+            }], mode: [{
+                type: Input,
+                args: [{ alias: 'bbImageUploadMode' }]
+            }], type: [{
+                type: Input,
+                args: [{ alias: 'bbImageUploadType' }]
+            }], onDataUri: [{
+                type: Output
+            }], onFile: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 class BbFileSize {
@@ -530,13 +474,14 @@ class BbFileSize {
     transform(value) {
         return this.format(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFileSize, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: BbFileSize, name: "bbFileSize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFileSize, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: BbFileSize, isStandalone: true, name: "bbFileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFileSize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFileSize, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'bbFileSize'
+                    name: 'bbFileSize',
+                    standalone: true
                 }]
         }] });
 
@@ -569,467 +514,839 @@ class BbFileImage {
             return null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFileImage, deps: [{ token: i1$3.Platform }, { token: i1$1.ImageConverter }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: BbFileImage, name: "bbFileImage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFileImage, deps: [{ token: i2.Platform }, { token: i1$1.ImageConverter }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: BbFileImage, isStandalone: true, name: "bbFileImage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFileImage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFileImage, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'bbFileImage'
+                    name: 'bbFileImage',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Platform }, { type: i1$1.ImageConverter }, { type: i3.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i2.Platform }, { type: i1$1.ImageConverter }, { type: i3.DomSanitizer }] });
 
-let nextUniqueId$1 = 0;
-class BbFilePickerBase {
-}
-const BbFilePickerMixinBase$1 = mixinRequired(mixinDisabled(mixinGrouped(mixinError(mixinHideErrors(BbFilePickerBase)))));
-class BbFilePicker extends BbFilePickerMixinBase$1 {
-    constructor() {
-        super(...arguments);
-        // Inputs.
-        this.label = null;
-        this.hint = null;
-        this.accept = null;
-        this.showImages = true;
-        this.allowDragging = true;
-        // State.
-        this.labelId = `bb-file-picker-${nextUniqueId$1++}`;
-        this.hovered = false;
-        this.value$ = new BehaviorSubject({});
-        this.valueChange = new EventEmitter();
-        this.onTouchedCallback = () => {
-        };
-        this.onChangeCallback = () => {
+class BbRelativeTime {
+    constructor(_localeId, _localize) {
+        this._localeId = _localeId;
+        this._localize = _localize;
+        this.isValidDate = (date) => {
+            return typeof date === 'object' &&
+                typeof date.getTime === 'function' &&
+                !isNaN(date.getTime());
         };
-        this.saveFile = (files) => {
-            // Validate the files exist.
-            if (!files) {
-                return;
-            }
-            // Retrieve the first file.
-            const file = files[0];
-            // Validate the first file exists.
-            if (!file) {
-                return;
+        this.parseAsDate = (value) => {
+            // Add a Z after the date so
+            // it is treated as a UTC date.
+            if (typeof value === 'string' && /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}$/.test(value)) {
+                return new Date(`${value}Z`);
             }
-            // Save the file.
-            this.value = file;
+            // Return the regular parsed date.
+            return new Date(value);
         };
-        this.getFileListFromEvent = (event) => {
-            const element = event.target;
-            if (!element) {
-                return null;
-            }
-            return element.files;
+        this.isToday = (date) => {
+            const today = new Date();
+            return date?.getDate() === today?.getDate() &&
+                date?.getMonth() === today?.getMonth() &&
+                date?.getFullYear() === today?.getFullYear();
         };
-        this.preventDefault = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+        this.isYesterday = (date) => {
+            const yesterday = new Date(new Date()?.setDate(new Date()?.getDate() - 1));
+            return date?.getDate() === yesterday?.getDate() &&
+                date?.getMonth() === yesterday?.getMonth() &&
+                date?.getFullYear() === yesterday?.getFullYear();
+        };
+        this.isTomorrow = (date) => {
+            const tomorrow = new Date(new Date()?.setDate(new Date()?.getDate() + 1));
+            return date?.getDate() === tomorrow?.getDate() &&
+                date?.getMonth() === tomorrow?.getMonth() &&
+                date?.getFullYear() === tomorrow?.getFullYear();
         };
     }
-    get value() {
-        const { file } = this.value$.getValue();
-        return file;
-    }
-    set value(value) {
-        this.value$.next({ file: value });
-        this.valueChange.emit(value);
-    }
-    onDrag(event, isHovered) {
-        // Validate the input can support drag.
-        if (!this.allowDragging || this.disabled) {
-            return;
-        }
-        // Prevent the default event action
-        // and start the hovering.
-        this.preventDefault(event);
-        this.hovered = isHovered;
-    }
-    onDrop(event) {
-        // Validate the input can support drag.
-        if (!this.allowDragging || this.disabled) {
-            return;
+    transform(value) {
+        // Parse the value to a date object.
+        const date = this.parseAsDate(value);
+        // Check if the date is valid.
+        if (!this.isValidDate(date)) {
+            return value;
         }
-        // Prevent the default event action
-        // and stop the hovering.
-        this.preventDefault(event);
-        this.hovered = false;
-        // Save the file.
-        this.saveFile(event['dataTransfer'].files);
-        // Run the on change callback.
-        this.onChangeCallback(this.value);
+        // Return the formatted date.
+        return this.format(date);
     }
-    onButtonPressed(file) {
-        if (file) {
-            this.value = null;
-            this.onChangeCallback(this.value);
-            return;
+    format(date) {
+        // It happens tomorrow.
+        if (this.isTomorrow(date)) {
+            return this.formatString(date, 'times.tomorrow_at', 'shortTime');
         }
-        return this.openFilePicker();
-    }
-    openFilePicker() {
-        return this.fileInput
-            && this.fileInput.nativeElement
-            && this.fileInput.nativeElement.click
-            && this.fileInput.nativeElement.click();
-    }
-    onFileChange(event) {
-        // Validate the input is not disabled.
-        if (this.disabled) {
-            return;
+        // It happened today.
+        if (this.isToday(date)) {
+            return this.formatString(date, 'times.today_at', 'shortTime');
         }
-        // Extract the file from the event.
-        const fileList = this.getFileListFromEvent(event);
-        // Save the file.
-        this.saveFile(fileList);
-        // Run the on change callback.
-        this.onChangeCallback(this.value);
-        // Clear the file input.
-        if (this.fileInput && this.fileInput.nativeElement) {
-            this.fileInput.nativeElement.value = '';
+        // It happened yesterday.
+        if (this.isYesterday(date)) {
+            return this.formatString(date, 'times.yesterday_at', 'shortTime');
         }
+        // Just return the date.
+        return this.formatString(date);
     }
-    writeValue(value) {
-        this.value = value;
+    formatString(date, token, format) {
+        // Just return the parsed date.
+        if (!this._localize || !token || !format) {
+            return formatDate(date, 'mediumDate', this.locale);
+        }
+        // Return the translated formatting.
+        return this._localize.translate({
+            token: token,
+            data: { date: formatDate(date, format, this.locale) }
+        });
     }
-    registerOnChange(method) {
-        this.onChangeCallback = method;
+    get locale() {
+        return this._localize?.current?.locale ?? this._localeId;
     }
-    registerOnTouched(method) {
-        this.onTouchedCallback = method;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRelativeTime, deps: [{ token: LOCALE_ID }, { token: i1$2.Localize, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: BbRelativeTime, isStandalone: true, name: "bbRelativeTime" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRelativeTime, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bbRelativeTime',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1$2.Localize, decorators: [{
+                    type: Optional
+                }] }] });
+
+class BbDate {
+    constructor() {
+        // Dependencies.
+        this._localize = inject(Localize, { optional: true });
+        this._localeId = inject(LOCALE_ID);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    onErrorChange(error) {
-        this.error = !!error;
-    }
-    validate({ value }) {
-        if (value === null || value === undefined) {
+    transform(value, format) {
+        const date = parseDate(value);
+        if (date === null) {
             return null;
         }
-        const regexString = (this.accept || '*')
-            .replace(/\*/g, '.\*')
-            .replace(/,/g, '|');
-        const mimeTypeRegex = new RegExp(regexString);
-        const isNotValid = (typeof File === 'undefined') || !(value instanceof File) || !mimeTypeRegex.test(value?.type);
-        return isNotValid && {
-            invalidFileType: true
-        };
+        const locale = this._localize?.current?.locale ?? this._localeId ?? 'en-US';
+        return formatDate(date, format ?? 'mediumDate', locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFilePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbFilePicker, selector: "bb-file-picker", inputs: { disabled: "disabled", hideErrors: "hideErrors", grouped: "grouped", required: "required", label: "label", hint: "hint", accept: "accept", showImages: "showImages", allowDragging: "allowDragging", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "dragover": "onDrag($event,true)", "dragleave": "onDrag($event,false)", "drop": "onDrop($event)" }, properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.hovered": "hovered", "class.error": "error" }, classAttribute: "bb-file-picker" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => BbFilePicker),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: BbFilePicker,
-                multi: true
-            }
-        ], queries: [{ propertyName: "extraTemplate", first: true, predicate: ["extra"], descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- The label of the input. -->\n<label *ngIf=\"label as labelContent\"\n       [for]=\"labelId\"\n       class=\"bb-file-picker-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The input that can open the file picker. -->\n<input #fileInput\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-file-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\">\n\n<div *ngIf=\"value$ | async as data\"\n     class=\"bb-file-picker-wrapper\">\n    <!-- The button that accepts files. -->\n    <div class=\"bb-file-picker-container\">\n        <button [class.destructive]=\"!!data?.file\"\n                [class.standalone]=\"!allowDragging\"\n                [disabled]=\"disabled\"\n                [id]=\"labelId\"\n                (click)=\"onButtonPressed(data?.file)\"\n                type=\"button\"\n                class=\"bb-file-picker-button\">\n            <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\n            {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\n        </button>\n        <div *ngIf=\"allowDragging\"\n             class=\"bb-file-picker-zone\">\n            {{ 'file-picker.drop' | bbLocalize }}\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"!!extraTemplate\">\n        <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"showImages\">\n        <div *ngIf=\"data?.file | bbFileImage | async as image\"\n             class=\"bb-file-picker-image-container\">\n            <div class=\"bb-file-picker-image-wrapper\">\n                <div [@bbFilePickerImageAnimation]=\"true\"\n                     [style.padding-top.%]=\"image?.aspectRatio * 100\"\n                     [style.background-image]=\"image?.background\"\n                     class=\"bb-file-picker-image\">\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- Extra information of the file. -->\n    <div [class.visible]=\"!!data?.file\"\n         class=\"bb-file-picker-info\">\n        <span *ngIf=\"data?.file?.name as name\">{{ name }}</span>\n        <span *ngIf=\"data?.file?.size as size\">{{ size | bbFileSize }}</span>\n    </div>\n</div>\n\n<bb-form-error *ngIf=\"!hideErrors\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The file picker hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-file-picker-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n\n<!-- Upload icon. -->\n<ng-template #uploadIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\n              d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5a2.5 2.5 0 010-5H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"></path>\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\n    </svg>\n</ng-template>\n\n<!-- Close icon. -->\n<ng-template #closeIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    </svg>\n</ng-template>\n", styles: [".bb-file-picker{display:block}.bb-file-picker.disabled>.bb-file-picker-wrapper{cursor:default;background-color:#cccccca3}.bb-file-picker.grouped{margin-bottom:20px}.bb-file-picker.full>.bb-file-picker-wrapper{width:100%}.bb-file-picker:not(.disabled) .bb-file-picker-button{background-color:#fff}.bb-file-picker:not(.disabled):focus>.bb-file-picker-wrapper,.bb-file-picker:not(.disabled).hovered>.bb-file-picker-wrapper{box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #007bff33}.bb-file-picker.required>.bb-file-picker-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-file-picker.error>.bb-file-picker-label{color:#c23934}.bb-file-picker.error>.bb-file-picker-hint{display:none}.bb-file-picker.error>.bb-file-picker-wrapper{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-file-picker.error .bb-file-picker-button{background-color:transparent}.bb-file-picker-wrapper{max-width:100%;-webkit-user-select:none;user-select:none;border-radius:3px;display:inline-flex;flex-direction:column;border:1px solid #b6bbc1;background-color:#fff8ff;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a}.bb-file-picker-label{color:#000;display:block;position:relative;margin-bottom:4px}.bb-file-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-file-picker-container{min-height:38px;display:inline-flex}.bb-file-picker-button{margin:0;z-index:1;border:none;color:#2196f3;line-height:1;cursor:pointer;padding:0 12px;appearance:none;font-weight:500;align-items:center;white-space:nowrap;display:inline-flex;border-top-left-radius:3px;border-bottom-left-radius:3px;border-right:1px solid #b6bbc1;background-color:#ffffff80;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-button:focus{box-shadow:0 0 0 3px #007bff33}.bb-file-picker-button:disabled{cursor:default}.bb-file-picker-button.destructive{color:#f55656}.bb-file-picker-button.standalone{width:100%;border-right:none;border-top-right-radius:3px;border-bottom-right-radius:3px}.bb-file-picker-icon{margin-right:4px}.bb-file-picker-zone{flex:1;color:#848f99;font-size:14px;padding:8px 12px;line-height:18px;align-items:center;display:inline-flex;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;padding:0 12px;overflow:hidden;line-height:36px;align-items:center;display:inline-flex;background-color:#fff8ff;border-top:0 solid #b6bbc1;transition:height .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-info.visible{height:38px;border-top-width:1px}.bb-file-picker-info>span{opacity:.4;max-width:100%;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bb-file-picker-info>span:first-child{flex:1}.bb-file-picker-info>span:last-child{margin-left:12px}.bb-file-picker-image-container{overflow:hidden;border-top:1px solid #b6bbc1}.bb-file-picker-image-wrapper{width:100%;max-width:40%;margin:20px auto}.bb-file-picker-image{width:100%;display:flex;overflow:hidden;position:relative;border-radius:4px;will-change:opacity;background-size:cover;background-position:center;background-repeat:no-repeat}.bb-file-picker-hint{display:block;color:#738694;font-size:13px;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.BbLocalize, name: "bbLocalize" }, { kind: "pipe", type: BbFileSize, name: "bbFileSize" }, { kind: "pipe", type: BbFileImage, name: "bbFileImage" }], animations: [
-            trigger('bbFilePickerImageAnimation', [
-                transition(':enter', [
-                    style({ opacity: 0 }),
-                    animate('200ms', style({ opacity: 1 }))
-                ]),
-                transition(':leave', [
-                    animate('200ms', style({ opacity: 0 }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDate, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: BbDate, isStandalone: true, name: "bbDate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDate, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bbDate',
+                    standalone: true
+                }]
+        }] });
+
+class BbSpinner {
+    constructor() {
+        // Inputs.
+        this.color = 'hsla(212, 80%, 42%, 1)';
+        this.alt = 'Loading...';
+        this.disabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: BbSpinner, isStandalone: true, selector: "bb-spinner", inputs: { color: "color", alt: "alt", disabled: ["disabled", "disabled", booleanAttribute] }, host: { classAttribute: "bb-spinner" }, ngImport: i0, template: "<!--\n    The spinner element.\n\n    This element contains a circle with a 25% bar that spins\n    indefinitely. The border color can be set via the \"color\"\n    property.\n-->\n<div class=\"bb-spinner-container\">\n    <div [style.border-left-color]=\"color\"\n         [class.disabled]=\"disabled\"\n         class=\"bb-spinner-loader\"\n         aria-live=\"assertive\"\n         role=\"alert\">\n        {{ alt }}\n    </div>\n    <ng-content select=\"img\"></ng-content>\n</div>\n\n<!--\n    The content of the spinner.\n\n    This element contains the content of the spinner. The user\n    can set the content inside the tag.\n-->\n<span class=\"bb-spinner-content\">\n    <ng-content></ng-content>\n</span>\n", styles: [".bb-spinner{padding:1.5rem 0;text-align:center;align-items:center;display:inline-flex;flex-direction:column;justify-content:center;color:#666}.bb-spinner.block{display:flex}.bb-spinner.inverse .bb-spinner-loader{border-color:#fff3}.bb-spinner.inverse .bb-spinner-content{color:#fff}.bb-spinner.small .bb-spinner-loader,.bb-spinner.small .bb-spinner-loader:after{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem}.bb-spinner.small .bb-spinner-loader{border-width:.125rem}.bb-spinner.small .bb-spinner-content{font-size:.75rem}.bb-spinner.medium .bb-spinner-loader,.bb-spinner.medium .bb-spinner-loader:after{width:3rem;height:3rem;min-width:3rem;min-height:3rem}.bb-spinner.medium .bb-spinner-loader{border-width:.1875rem}.bb-spinner.medium .bb-spinner-content{font-size:.875rem}.bb-spinner.large .bb-spinner-loader,.bb-spinner.large .bb-spinner-loader:after{width:4.5rem;height:4.5rem;min-width:4.5rem;min-height:4.5rem}.bb-spinner.large .bb-spinner-loader{border-width:.25rem}.bb-spinner.large .bb-spinner-content{font-size:1rem}.bb-spinner.horizontal{text-align:left;flex-direction:row}.bb-spinner.horizontal .bb-spinner-content:not(:empty){margin-top:0;margin-left:.75rem}.bb-spinner.vertical{text-align:center;flex-direction:column}.bb-spinner.vertical .bb-spinner-content:not(:empty){margin-left:0;margin-top:.75rem}.bb-spinner-container{display:flex;position:relative}.bb-spinner-container>img{top:20%;left:20%;width:60%;height:60%;position:absolute}.bb-spinner-loader{margin:0;padding:0;overflow:hidden;text-indent:100%;color:transparent;position:relative;display:inline-block;vertical-align:middle;border:.1875rem solid #f2f4f6;animation:1s linear infinite spin}.bb-spinner-loader,.bb-spinner-loader:after{width:3rem;height:3rem;min-width:3rem;min-height:3rem;border-radius:50%}.bb-spinner-loader.disabled{cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none;animation-play-state:paused}.bb-spinner-content:not(:empty){font-weight:400;font-size:.875rem;margin-top:.75rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFilePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbSpinner, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-file-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => BbFilePicker),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: BbFilePicker,
-                            multi: true
-                        }
-                    ], host: {
-                        'class': 'bb-file-picker',
-                        '[class.required]': 'required',
-                        '[class.disabled]': 'disabled',
-                        '[class.grouped]': 'grouped',
-                        '[class.hovered]': 'hovered',
-                        '[class.error]': 'error'
-                    }, animations: [
-                        trigger('bbFilePickerImageAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0 }),
-                                animate('200ms', style({ opacity: 1 }))
-                            ]),
-                            transition(':leave', [
-                                animate('200ms', style({ opacity: 0 }))
-                            ])
-                        ])
-                    ], inputs: ['disabled', 'hideErrors', 'grouped', 'required'], preserveWhitespaces: false, template: "<!-- The label of the input. -->\n<label *ngIf=\"label as labelContent\"\n       [for]=\"labelId\"\n       class=\"bb-file-picker-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The input that can open the file picker. -->\n<input #fileInput\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-file-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\">\n\n<div *ngIf=\"value$ | async as data\"\n     class=\"bb-file-picker-wrapper\">\n    <!-- The button that accepts files. -->\n    <div class=\"bb-file-picker-container\">\n        <button [class.destructive]=\"!!data?.file\"\n                [class.standalone]=\"!allowDragging\"\n                [disabled]=\"disabled\"\n                [id]=\"labelId\"\n                (click)=\"onButtonPressed(data?.file)\"\n                type=\"button\"\n                class=\"bb-file-picker-button\">\n            <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\n            {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\n        </button>\n        <div *ngIf=\"allowDragging\"\n             class=\"bb-file-picker-zone\">\n            {{ 'file-picker.drop' | bbLocalize }}\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"!!extraTemplate\">\n        <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"showImages\">\n        <div *ngIf=\"data?.file | bbFileImage | async as image\"\n             class=\"bb-file-picker-image-container\">\n            <div class=\"bb-file-picker-image-wrapper\">\n                <div [@bbFilePickerImageAnimation]=\"true\"\n                     [style.padding-top.%]=\"image?.aspectRatio * 100\"\n                     [style.background-image]=\"image?.background\"\n                     class=\"bb-file-picker-image\">\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- Extra information of the file. -->\n    <div [class.visible]=\"!!data?.file\"\n         class=\"bb-file-picker-info\">\n        <span *ngIf=\"data?.file?.name as name\">{{ name }}</span>\n        <span *ngIf=\"data?.file?.size as size\">{{ size | bbFileSize }}</span>\n    </div>\n</div>\n\n<bb-form-error *ngIf=\"!hideErrors\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The file picker hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-file-picker-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n\n<!-- Upload icon. -->\n<ng-template #uploadIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\n              d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5a2.5 2.5 0 010-5H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"></path>\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\n    </svg>\n</ng-template>\n\n<!-- Close icon. -->\n<ng-template #closeIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"24\"\n         height=\"24\">\n        <path fill=\"currentColor\"\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    </svg>\n</ng-template>\n", styles: [".bb-file-picker{display:block}.bb-file-picker.disabled>.bb-file-picker-wrapper{cursor:default;background-color:#cccccca3}.bb-file-picker.grouped{margin-bottom:20px}.bb-file-picker.full>.bb-file-picker-wrapper{width:100%}.bb-file-picker:not(.disabled) .bb-file-picker-button{background-color:#fff}.bb-file-picker:not(.disabled):focus>.bb-file-picker-wrapper,.bb-file-picker:not(.disabled).hovered>.bb-file-picker-wrapper{box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #007bff33}.bb-file-picker.required>.bb-file-picker-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-file-picker.error>.bb-file-picker-label{color:#c23934}.bb-file-picker.error>.bb-file-picker-hint{display:none}.bb-file-picker.error>.bb-file-picker-wrapper{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-file-picker.error .bb-file-picker-button{background-color:transparent}.bb-file-picker-wrapper{max-width:100%;-webkit-user-select:none;user-select:none;border-radius:3px;display:inline-flex;flex-direction:column;border:1px solid #b6bbc1;background-color:#fff8ff;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a}.bb-file-picker-label{color:#000;display:block;position:relative;margin-bottom:4px}.bb-file-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-file-picker-container{min-height:38px;display:inline-flex}.bb-file-picker-button{margin:0;z-index:1;border:none;color:#2196f3;line-height:1;cursor:pointer;padding:0 12px;appearance:none;font-weight:500;align-items:center;white-space:nowrap;display:inline-flex;border-top-left-radius:3px;border-bottom-left-radius:3px;border-right:1px solid #b6bbc1;background-color:#ffffff80;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-button:focus{box-shadow:0 0 0 3px #007bff33}.bb-file-picker-button:disabled{cursor:default}.bb-file-picker-button.destructive{color:#f55656}.bb-file-picker-button.standalone{width:100%;border-right:none;border-top-right-radius:3px;border-bottom-right-radius:3px}.bb-file-picker-icon{margin-right:4px}.bb-file-picker-zone{flex:1;color:#848f99;font-size:14px;padding:8px 12px;line-height:18px;align-items:center;display:inline-flex;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;padding:0 12px;overflow:hidden;line-height:36px;align-items:center;display:inline-flex;background-color:#fff8ff;border-top:0 solid #b6bbc1;transition:height .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-info.visible{height:38px;border-top-width:1px}.bb-file-picker-info>span{opacity:.4;max-width:100%;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bb-file-picker-info>span:first-child{flex:1}.bb-file-picker-info>span:last-child{margin-left:12px}.bb-file-picker-image-container{overflow:hidden;border-top:1px solid #b6bbc1}.bb-file-picker-image-wrapper{width:100%;max-width:40%;margin:20px auto}.bb-file-picker-image{width:100%;display:flex;overflow:hidden;position:relative;border-radius:4px;will-change:opacity;background-size:cover;background-position:center;background-repeat:no-repeat}.bb-file-picker-hint{display:block;color:#738694;font-size:13px;margin-top:4px}\n"] }]
-        }], propDecorators: { fileInput: [{
-                type: ViewChild,
-                args: ['fileInput', { static: true }]
-            }], extraTemplate: [{
-                type: ContentChild,
-                args: ['extra']
-            }], label: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], showImages: [{
-                type: Input
-            }], allowDragging: [{
+            args: [{ selector: 'bb-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-spinner' }, preserveWhitespaces: false, standalone: true, template: "<!--\n    The spinner element.\n\n    This element contains a circle with a 25% bar that spins\n    indefinitely. The border color can be set via the \"color\"\n    property.\n-->\n<div class=\"bb-spinner-container\">\n    <div [style.border-left-color]=\"color\"\n         [class.disabled]=\"disabled\"\n         class=\"bb-spinner-loader\"\n         aria-live=\"assertive\"\n         role=\"alert\">\n        {{ alt }}\n    </div>\n    <ng-content select=\"img\"></ng-content>\n</div>\n\n<!--\n    The content of the spinner.\n\n    This element contains the content of the spinner. The user\n    can set the content inside the tag.\n-->\n<span class=\"bb-spinner-content\">\n    <ng-content></ng-content>\n</span>\n", styles: [".bb-spinner{padding:1.5rem 0;text-align:center;align-items:center;display:inline-flex;flex-direction:column;justify-content:center;color:#666}.bb-spinner.block{display:flex}.bb-spinner.inverse .bb-spinner-loader{border-color:#fff3}.bb-spinner.inverse .bb-spinner-content{color:#fff}.bb-spinner.small .bb-spinner-loader,.bb-spinner.small .bb-spinner-loader:after{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem}.bb-spinner.small .bb-spinner-loader{border-width:.125rem}.bb-spinner.small .bb-spinner-content{font-size:.75rem}.bb-spinner.medium .bb-spinner-loader,.bb-spinner.medium .bb-spinner-loader:after{width:3rem;height:3rem;min-width:3rem;min-height:3rem}.bb-spinner.medium .bb-spinner-loader{border-width:.1875rem}.bb-spinner.medium .bb-spinner-content{font-size:.875rem}.bb-spinner.large .bb-spinner-loader,.bb-spinner.large .bb-spinner-loader:after{width:4.5rem;height:4.5rem;min-width:4.5rem;min-height:4.5rem}.bb-spinner.large .bb-spinner-loader{border-width:.25rem}.bb-spinner.large .bb-spinner-content{font-size:1rem}.bb-spinner.horizontal{text-align:left;flex-direction:row}.bb-spinner.horizontal .bb-spinner-content:not(:empty){margin-top:0;margin-left:.75rem}.bb-spinner.vertical{text-align:center;flex-direction:column}.bb-spinner.vertical .bb-spinner-content:not(:empty){margin-left:0;margin-top:.75rem}.bb-spinner-container{display:flex;position:relative}.bb-spinner-container>img{top:20%;left:20%;width:60%;height:60%;position:absolute}.bb-spinner-loader{margin:0;padding:0;overflow:hidden;text-indent:100%;color:transparent;position:relative;display:inline-block;vertical-align:middle;border:.1875rem solid #f2f4f6;animation:1s linear infinite spin}.bb-spinner-loader,.bb-spinner-loader:after{width:3rem;height:3rem;min-width:3rem;min-height:3rem;border-radius:50%}.bb-spinner-loader.disabled{cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none;animation-play-state:paused}.bb-spinner-content:not(:empty){font-weight:400;font-size:.875rem;margin-top:.75rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { color: [{
                 type: Input
-            }], value: [{
+            }], alt: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], onDrag: [{
-                type: HostListener,
-                args: ['dragover', ['$event', 'true']]
-            }, {
-                type: HostListener,
-                args: ['dragleave', ['$event', 'false']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
-class BbSelect {
-    constructor(_elementRef, _ngControl, _formControl) {
-        this._elementRef = _elementRef;
-        this._ngControl = _ngControl;
-        this._formControl = _formControl;
-        this.hasArrow = true;
-        this._disabled = false;
-        this._required = false;
-    }
-    ngOnInit() {
-        // Set an arrow on the form control if
-        // it requires one.
-        this._formControl.arrow = this.hasArrow;
-    }
-    ngDoCheck() {
-        if (this._ngControl) {
-            this.disabled = this._ngControl.disabled;
-        }
-    }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
+class BbButton {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        // Inputs.
+        this.disabled = false;
+        this.loading = false;
     }
     focus() {
-        return this._elementRef?.nativeElement?.focus();
+        const element = this.elementRef?.nativeElement ?? null;
+        element?.focus?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbButton, isStandalone: true, selector: "button[bb-button]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute] }, host: { properties: { "class.loading": "loading", "attr.disabled": "disabled || loading || null" }, classAttribute: "bb-button" }, exportAs: ["bbButton"], ngImport: i0, template: "@if (loading) {\n    <bb-spinner class=\"bb-button-spinner small\"></bb-spinner>\n}\n\n<ng-content select=\"[prefix]\"></ng-content>\n<span class=\"bb-button-content\"><ng-content></ng-content></span>\n<ng-content select=\"[suffix]\"></ng-content>\n", styles: [".bb-button{height:2.5rem;cursor:pointer;font-size:1rem;max-width:100%;overflow:hidden;font-weight:400;padding:0 .5rem;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;text-align:center;align-items:center;display:inline-flex;border-radius:.5rem;text-decoration:none;text-overflow:ellipsis;justify-content:center;transition-duration:.2s;border:1px solid transparent;background-color:transparent;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.bb-button,.bb-button:visited{color:var(--bb-button-color)}.bb-button:hover{background-color:var(--bb-button-hover-background-color)}.bb-button:focus{border-color:var(--bb-button-focus-border-color);box-shadow:var(--bb-button-focus-box-shadow)}.bb-button:active{background-color:var(--bb-button-active-background-color)}.bb-button.small{height:2rem;font-size:.875rem}.bb-button.large{height:3rem;font-size:1.125rem}.bb-button.full{width:100%}.bb-button.square{padding:0;width:2.5rem;min-width:2.5rem}.bb-button.square.small{width:2rem;min-width:2rem}.bb-button.square.large{width:3rem;min-width:3rem}.bb-button>[prefix]{margin-right:.25rem}.bb-button>[suffix]{margin-left:.25rem}.bb-button.secondary{border-color:var(--bb-button-secondary-border-color)}.bb-button.secondary,.bb-button.secondary:visited{color:var(--bb-button-secondary-color)}.bb-button.secondary:hover{background-color:var(--bb-button-secondary-hover-background-color)}.bb-button.secondary:focus{box-shadow:var(--bb-button-secondary-focus-box-shadow)}.bb-button.secondary:active{background-color:var(--bb-button-secondary-active-background-color)}.bb-button.primary{border-color:var(--bb-button-primary-border-color);background-color:var(--bb-button-primary-background-color)}.bb-button.primary,.bb-button.primary:visited{color:var(--bb-button-primary-color)}.bb-button.primary:hover{background-color:var(--bb-button-primary-hover-background-color)}.bb-button.primary:focus{box-shadow:var(--bb-button-primary-focus-box-shadow)}.bb-button.primary:active{background-color:var(--bb-button-primary-active-background-color)}.bb-button.destructive{border-color:var(--bb-button-destructive-border-color);background-color:var(--bb-button-destructive-background-color)}.bb-button.destructive,.bb-button.destructive:visited{color:var(--bb-button-destructive-color)}.bb-button.destructive:hover{background-color:var(--bb-button-destructive-hover-background-color)}.bb-button.destructive:focus{box-shadow:var(--bb-button-destructive-focus-box-shadow)}.bb-button.destructive:active{background-color:var(--bb-button-destructive-active-background-color)}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{cursor:default;box-shadow:none;opacity:var(--bb-button-disabled-opacity)}.bb-button.loading>*:not(.bb-button-spinner){opacity:0}.bb-button>.bb-button-spinner{left:50%;padding:0;overflow:hidden;position:absolute;transform:translate(-50%)}.bb-button-content{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: BbSpinner, selector: "bb-spinner", inputs: ["color", "alt", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[bb-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'bbButton', host: {
+                        'class': 'bb-button',
+                        '[class.loading]': 'loading',
+                        '[attr.disabled]': 'disabled || loading || null'
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbSpinner], template: "@if (loading) {\n    <bb-spinner class=\"bb-button-spinner small\"></bb-spinner>\n}\n\n<ng-content select=\"[prefix]\"></ng-content>\n<span class=\"bb-button-content\"><ng-content></ng-content></span>\n<ng-content select=\"[suffix]\"></ng-content>\n", styles: [".bb-button{height:2.5rem;cursor:pointer;font-size:1rem;max-width:100%;overflow:hidden;font-weight:400;padding:0 .5rem;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;text-align:center;align-items:center;display:inline-flex;border-radius:.5rem;text-decoration:none;text-overflow:ellipsis;justify-content:center;transition-duration:.2s;border:1px solid transparent;background-color:transparent;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.bb-button,.bb-button:visited{color:var(--bb-button-color)}.bb-button:hover{background-color:var(--bb-button-hover-background-color)}.bb-button:focus{border-color:var(--bb-button-focus-border-color);box-shadow:var(--bb-button-focus-box-shadow)}.bb-button:active{background-color:var(--bb-button-active-background-color)}.bb-button.small{height:2rem;font-size:.875rem}.bb-button.large{height:3rem;font-size:1.125rem}.bb-button.full{width:100%}.bb-button.square{padding:0;width:2.5rem;min-width:2.5rem}.bb-button.square.small{width:2rem;min-width:2rem}.bb-button.square.large{width:3rem;min-width:3rem}.bb-button>[prefix]{margin-right:.25rem}.bb-button>[suffix]{margin-left:.25rem}.bb-button.secondary{border-color:var(--bb-button-secondary-border-color)}.bb-button.secondary,.bb-button.secondary:visited{color:var(--bb-button-secondary-color)}.bb-button.secondary:hover{background-color:var(--bb-button-secondary-hover-background-color)}.bb-button.secondary:focus{box-shadow:var(--bb-button-secondary-focus-box-shadow)}.bb-button.secondary:active{background-color:var(--bb-button-secondary-active-background-color)}.bb-button.primary{border-color:var(--bb-button-primary-border-color);background-color:var(--bb-button-primary-background-color)}.bb-button.primary,.bb-button.primary:visited{color:var(--bb-button-primary-color)}.bb-button.primary:hover{background-color:var(--bb-button-primary-hover-background-color)}.bb-button.primary:focus{box-shadow:var(--bb-button-primary-focus-box-shadow)}.bb-button.primary:active{background-color:var(--bb-button-primary-active-background-color)}.bb-button.destructive{border-color:var(--bb-button-destructive-border-color);background-color:var(--bb-button-destructive-background-color)}.bb-button.destructive,.bb-button.destructive:visited{color:var(--bb-button-destructive-color)}.bb-button.destructive:hover{background-color:var(--bb-button-destructive-hover-background-color)}.bb-button.destructive:focus{box-shadow:var(--bb-button-destructive-focus-box-shadow)}.bb-button.destructive:active{background-color:var(--bb-button-destructive-active-background-color)}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{cursor:default;box-shadow:none;opacity:var(--bb-button-disabled-opacity)}.bb-button.loading>*:not(.bb-button-spinner){opacity:0}.bb-button>.bb-button-spinner{left:50%;padding:0;overflow:hidden;position:absolute;transform:translate(-50%)}.bb-button-content{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+class BbAnchor extends BbButton {
+    constructor(elementRef) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        // Inputs.
+        this.tabIndex = null;
     }
-    setFocus(hasFocus) {
-        if (!this._formControl) {
+    stopDisabledEvents(event) {
+        // If the button is not disabled (and not loading) let all events pass.
+        if (!this.disabled && !this.loading) {
             return;
         }
-        this._formControl.focused = hasFocus;
+        // If the button is disabled and/or loading stop
+        // the event from bubbling up.
+        event.preventDefault();
+        event.stopImmediatePropagation();
     }
-    get id() {
-        return this._formControl?.labelId ?? null;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbAnchor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbAnchor, isStandalone: true, selector: "a[bb-button]", inputs: { tabIndex: "tabIndex" }, host: { listeners: { "click": "stopDisabledEvents($event)" }, properties: { "attr.tabindex": "(disabled || loading) ? -1 : (tabIndex || 0)", "attr.disabled": "disabled || loading || null", "attr.aria-disabled": "(disabled || loading).toString()" }, classAttribute: "bb-button" }, exportAs: ["bbButton", "bbAnchor"], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n    <bb-spinner class=\"bb-button-spinner small\"></bb-spinner>\n}\n\n<ng-content select=\"[prefix]\"></ng-content>\n<span class=\"bb-button-content\"><ng-content></ng-content></span>\n<ng-content select=\"[suffix]\"></ng-content>\n", styles: [".bb-button{height:2.5rem;cursor:pointer;font-size:1rem;max-width:100%;overflow:hidden;font-weight:400;padding:0 .5rem;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;text-align:center;align-items:center;display:inline-flex;border-radius:.5rem;text-decoration:none;text-overflow:ellipsis;justify-content:center;transition-duration:.2s;border:1px solid transparent;background-color:transparent;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.bb-button,.bb-button:visited{color:var(--bb-button-color)}.bb-button:hover{background-color:var(--bb-button-hover-background-color)}.bb-button:focus{border-color:var(--bb-button-focus-border-color);box-shadow:var(--bb-button-focus-box-shadow)}.bb-button:active{background-color:var(--bb-button-active-background-color)}.bb-button.small{height:2rem;font-size:.875rem}.bb-button.large{height:3rem;font-size:1.125rem}.bb-button.full{width:100%}.bb-button.square{padding:0;width:2.5rem;min-width:2.5rem}.bb-button.square.small{width:2rem;min-width:2rem}.bb-button.square.large{width:3rem;min-width:3rem}.bb-button>[prefix]{margin-right:.25rem}.bb-button>[suffix]{margin-left:.25rem}.bb-button.secondary{border-color:var(--bb-button-secondary-border-color)}.bb-button.secondary,.bb-button.secondary:visited{color:var(--bb-button-secondary-color)}.bb-button.secondary:hover{background-color:var(--bb-button-secondary-hover-background-color)}.bb-button.secondary:focus{box-shadow:var(--bb-button-secondary-focus-box-shadow)}.bb-button.secondary:active{background-color:var(--bb-button-secondary-active-background-color)}.bb-button.primary{border-color:var(--bb-button-primary-border-color);background-color:var(--bb-button-primary-background-color)}.bb-button.primary,.bb-button.primary:visited{color:var(--bb-button-primary-color)}.bb-button.primary:hover{background-color:var(--bb-button-primary-hover-background-color)}.bb-button.primary:focus{box-shadow:var(--bb-button-primary-focus-box-shadow)}.bb-button.primary:active{background-color:var(--bb-button-primary-active-background-color)}.bb-button.destructive{border-color:var(--bb-button-destructive-border-color);background-color:var(--bb-button-destructive-background-color)}.bb-button.destructive,.bb-button.destructive:visited{color:var(--bb-button-destructive-color)}.bb-button.destructive:hover{background-color:var(--bb-button-destructive-hover-background-color)}.bb-button.destructive:focus{box-shadow:var(--bb-button-destructive-focus-box-shadow)}.bb-button.destructive:active{background-color:var(--bb-button-destructive-active-background-color)}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{cursor:default;box-shadow:none;opacity:var(--bb-button-disabled-opacity)}.bb-button.loading>*:not(.bb-button-spinner){opacity:0}.bb-button>.bb-button-spinner{left:50%;padding:0;overflow:hidden;position:absolute;transform:translate(-50%)}.bb-button-content{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: BbSpinner, selector: "bb-spinner", inputs: ["color", "alt", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbAnchor, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[bb-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'bbButton, bbAnchor', host: {
+                        'class': 'bb-button',
+                        '[attr.tabindex]': '(disabled || loading) ? -1 : (tabIndex || 0)',
+                        '[attr.disabled]': 'disabled || loading || null',
+                        '[attr.aria-disabled]': '(disabled || loading).toString()'
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbSpinner], template: "@if (loading) {\n    <bb-spinner class=\"bb-button-spinner small\"></bb-spinner>\n}\n\n<ng-content select=\"[prefix]\"></ng-content>\n<span class=\"bb-button-content\"><ng-content></ng-content></span>\n<ng-content select=\"[suffix]\"></ng-content>\n", styles: [".bb-button{height:2.5rem;cursor:pointer;font-size:1rem;max-width:100%;overflow:hidden;font-weight:400;padding:0 .5rem;-webkit-user-select:none;user-select:none;position:relative;font-style:normal;text-align:center;align-items:center;display:inline-flex;border-radius:.5rem;text-decoration:none;text-overflow:ellipsis;justify-content:center;transition-duration:.2s;border:1px solid transparent;background-color:transparent;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.bb-button,.bb-button:visited{color:var(--bb-button-color)}.bb-button:hover{background-color:var(--bb-button-hover-background-color)}.bb-button:focus{border-color:var(--bb-button-focus-border-color);box-shadow:var(--bb-button-focus-box-shadow)}.bb-button:active{background-color:var(--bb-button-active-background-color)}.bb-button.small{height:2rem;font-size:.875rem}.bb-button.large{height:3rem;font-size:1.125rem}.bb-button.full{width:100%}.bb-button.square{padding:0;width:2.5rem;min-width:2.5rem}.bb-button.square.small{width:2rem;min-width:2rem}.bb-button.square.large{width:3rem;min-width:3rem}.bb-button>[prefix]{margin-right:.25rem}.bb-button>[suffix]{margin-left:.25rem}.bb-button.secondary{border-color:var(--bb-button-secondary-border-color)}.bb-button.secondary,.bb-button.secondary:visited{color:var(--bb-button-secondary-color)}.bb-button.secondary:hover{background-color:var(--bb-button-secondary-hover-background-color)}.bb-button.secondary:focus{box-shadow:var(--bb-button-secondary-focus-box-shadow)}.bb-button.secondary:active{background-color:var(--bb-button-secondary-active-background-color)}.bb-button.primary{border-color:var(--bb-button-primary-border-color);background-color:var(--bb-button-primary-background-color)}.bb-button.primary,.bb-button.primary:visited{color:var(--bb-button-primary-color)}.bb-button.primary:hover{background-color:var(--bb-button-primary-hover-background-color)}.bb-button.primary:focus{box-shadow:var(--bb-button-primary-focus-box-shadow)}.bb-button.primary:active{background-color:var(--bb-button-primary-active-background-color)}.bb-button.destructive{border-color:var(--bb-button-destructive-border-color);background-color:var(--bb-button-destructive-background-color)}.bb-button.destructive,.bb-button.destructive:visited{color:var(--bb-button-destructive-color)}.bb-button.destructive:hover{background-color:var(--bb-button-destructive-hover-background-color)}.bb-button.destructive:focus{box-shadow:var(--bb-button-destructive-focus-box-shadow)}.bb-button.destructive:active{background-color:var(--bb-button-destructive-active-background-color)}.bb-button:disabled,.bb-button:disabled:focus,.bb-button:disabled:hover,.bb-button:disabled:active,.bb-button[disabled],.bb-button[disabled]:focus,.bb-button[disabled]:hover,.bb-button[disabled]:active,.bb-button.loading,.bb-button.loading:focus,.bb-button.loading:hover,.bb-button.loading:active{cursor:default;box-shadow:none;opacity:var(--bb-button-disabled-opacity)}.bb-button.loading>*:not(.bb-button-spinner){opacity:0}.bb-button>.bb-button-spinner{left:50%;padding:0;overflow:hidden;position:absolute;transform:translate(-50%)}.bb-button-content{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabIndex: [{
+                type: Input
+            }], stopDisabledEvents: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class BbIcon {
+    set src(newValue) {
+        this.state$.next(this.convert(newValue));
+        this._src = newValue;
     }
-    get disabled() {
-        if (this._ngControl && this._ngControl.disabled !== null) {
-            return this._ngControl.disabled;
-        }
-        return this._disabled;
+    get src() {
+        return this._src;
     }
-    set disabled(newValue) {
-        this._disabled = coerceBooleanProperty(newValue);
-        if (!this._formControl) {
-            return;
+    constructor(_registry) {
+        this._registry = _registry;
+        // Data.
+        this._src = null;
+        // State.
+        this.state$ = new BehaviorSubject(null);
+        this.alt = null;
+        this.size = 1.5;
+        this.ariaHidden = true;
+        this.warn = (content) => {
+            return console && console.warn && console.warn(content);
+        };
+    }
+    convert(src) {
+        const [namespace, value] = (src || '').split(':');
+        const onError = () => {
+            this.warn(`ElementsModule: The icon with src "${src}" could not be rendered correctly; Did you put a correct src attribute?`);
+            return { type: 'unknown' };
+        };
+        if (!namespace || !value || !this._registry) {
+            return onError();
+        }
+        // Try to find a image icon.
+        const imageIcon = this.findImageIcon(namespace, value);
+        if (imageIcon) {
+            return imageIcon;
+        }
+        // Try to find a font icon.
+        const fontIcon = this.findFontIcon(namespace, value);
+        if (fontIcon) {
+            return fontIcon;
         }
-        this._formControl.disabled = this._disabled;
+        // Return the on error function.
+        return onError();
     }
-    get required() {
-        return this._required;
+    findImageIcon(namespace, value) {
+        const data = this._registry.find(item => item['namespace'] === namespace && item['name'] === value);
+        if (!data) {
+            return null;
+        }
+        return { type: data['type'], src: data['src'] };
     }
-    set required(newValue) {
-        this._required = coerceBooleanProperty(newValue);
-        if (!this._formControl) {
-            return;
+    findFontIcon(namespace, content) {
+        const data = this._registry.find(item => item['namespace'] === namespace);
+        if (!data) {
+            return null;
+        }
+        const uses = data['uses'];
+        if (uses === 'data-attribute') {
+            return { type: data['type'], className: data['className'], attribute: content };
         }
-        this._formControl.required = this._required;
+        return { type: data['type'], className: data['className'], content };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSelect, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }, { token: BbFormControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbSelect, selector: "select[bbInput]", inputs: { disabled: "disabled", required: "required" }, host: { listeners: { "focus": "setFocus(true)", "blur": "setFocus(false)" }, properties: { "disabled": "disabled", "attr.id": "this.id" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbIcon, deps: [{ token: ELEMENTS_ICONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbIcon, isStandalone: true, selector: "bb-icon", inputs: { alt: "alt", size: ["size", "size", numberAttribute], ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute], src: "src" }, host: { properties: { "attr.aria-hidden": "ariaHidden", "style.width.rem": "size", "style.height.rem": "size", "style.min-width.rem": "size", "style.min-height.rem": "size", "style.font-size.rem": "size" }, classAttribute: "bb-icon" }, ngImport: i0, template: "@if (state$ | async; as data) {\n    @switch (data?.type) {\n        @case ('font') {\n            <i [attr.data-icon]=\"data?.attribute\"\n               [class]=\"data?.className\">\n                {{ data?.content }}\n            </i>\n        }\n        @case ('image') {\n            <img [src]=\"data?.src\"\n                 [alt]=\"alt\">\n        }\n        @default {\n            <svg viewBox=\"0 0 1 1\">\n                <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"#c5c5c5\"></rect>\n            </svg>\n        }\n    }\n}\n", styles: [".bb-icon{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.bb-icon>i{font-size:inherit}.bb-icon>img,.bb-icon>svg{width:100%;height:100%;display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSelect, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'select[bbInput]',
-                    host: {
-                        '[disabled]': 'disabled',
-                        '(focus)': 'setFocus(true)',
-                        '(blur)': 'setFocus(false)'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: BbFormControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-icon',
+                        '[attr.aria-hidden]': 'ariaHidden',
+                        '[style.width.rem]': 'size',
+                        '[style.height.rem]': 'size',
+                        '[style.min-width.rem]': 'size',
+                        '[style.min-height.rem]': 'size',
+                        '[style.font-size.rem]': 'size'
+                    }, preserveWhitespaces: false, standalone: true, imports: [AsyncPipe], template: "@if (state$ | async; as data) {\n    @switch (data?.type) {\n        @case ('font') {\n            <i [attr.data-icon]=\"data?.attribute\"\n               [class]=\"data?.className\">\n                {{ data?.content }}\n            </i>\n        }\n        @case ('image') {\n            <img [src]=\"data?.src\"\n                 [alt]=\"alt\">\n        }\n        @default {\n            <svg viewBox=\"0 0 1 1\">\n                <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"#c5c5c5\"></rect>\n            </svg>\n        }\n    }\n}\n", styles: [".bb-icon{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.bb-icon>i{font-size:inherit}.bb-icon>img,.bb-icon>svg{width:100%;height:100%;display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
-                    type: Host
-                }] }], propDecorators: { id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], disabled: [{
+                    type: Inject,
+                    args: [ELEMENTS_ICONS]
+                }] }], propDecorators: { alt: [{
                 type: Input
-            }], required: [{
+            }], size: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], ariaHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], src: [{
                 type: Input
             }] } });
-class BbInput extends BbSelect {
-    constructor(_elementRef, _ngControl, _formControl) {
-        super(_elementRef, _ngControl, _formControl);
-        this._elementRef = _elementRef;
-        this._ngControl = _ngControl;
-        this._formControl = _formControl;
-        this.hasArrow = false;
-        this._readonly = false;
-    }
-    get readonly() {
-        return this._readonly;
-    }
-    set readonly(newValue) {
-        this._readonly = coerceBooleanProperty(newValue);
-        if (!this._formControl) {
-            return;
-        }
-        this._formControl.readonly = this._readonly;
+
+class BbFormGroup {
+    constructor() {
+        // Inputs.
+        this.grouped = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbInput, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }, { token: BbFormControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbInput, selector: "input[bbInput], textarea[bbInput]", inputs: { readonly: "readonly" }, host: { listeners: { "focus": "setFocus(true)", "blur": "setFocus(false)" }, properties: { "disabled": "disabled", "readonly": "readonly" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: BbFormGroup, isStandalone: true, selector: "bb-form-group", inputs: { grouped: ["grouped", "grouped", booleanAttribute] }, host: { properties: { "class.grouped": "grouped" }, classAttribute: "bb-form-group" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-form-group{width:100%;display:flex;flex-wrap:wrap;margin-top:-.75rem}.bb-form-group>*{margin-top:.75rem}.bb-form-group>*:not(:first-child){margin-left:.75rem}.bb-form-group.start{justify-content:flex-start}.bb-form-group.end{justify-content:flex-end}.bb-form-group.vertical{flex-direction:column;justify-content:normal}.bb-form-group.vertical>*{margin-left:0}.bb-form-group.vertical.start{align-items:flex-start}.bb-form-group.vertical.end{align-items:flex-end}.bb-form-group.grouped{margin-bottom:1.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[bbInput], textarea[bbInput]',
-                    host: {
-                        '[disabled]': 'disabled',
-                        '[readonly]': 'readonly',
-                        '(focus)': 'setFocus(true)',
-                        '(blur)': 'setFocus(false)'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: BbFormControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }], propDecorators: { readonly: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFormGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-form-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-form-group',
+                        '[class.grouped]': 'grouped'
+                    }, preserveWhitespaces: false, standalone: true, template: "<ng-content></ng-content>\n", styles: [".bb-form-group{width:100%;display:flex;flex-wrap:wrap;margin-top:-.75rem}.bb-form-group>*{margin-top:.75rem}.bb-form-group>*:not(:first-child){margin-left:.75rem}.bb-form-group.start{justify-content:flex-start}.bb-form-group.end{justify-content:flex-end}.bb-form-group.vertical{flex-direction:column;justify-content:normal}.bb-form-group.vertical>*{margin-left:0}.bb-form-group.vertical.start{align-items:flex-start}.bb-form-group.vertical.end{align-items:flex-end}.bb-form-group.grouped{margin-bottom:1.5rem}\n"] }]
+        }], propDecorators: { grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
-class BbDatePickerBase {
-}
-const BbFilePickerMixinBase = mixinRequired(mixinReadonly(mixinDisabled(mixinGrouped(mixinError(mixinHideErrors(BbDatePickerBase))))));
-class BbDatePicker extends BbFilePickerMixinBase {
-    set years(value) {
-        this.parseYears(value);
-    }
-    get value() {
-        return this.formToDateString(this.form?.value);
+let nextUniqueId$2 = 0;
+class BbCheckbox {
+    constructor(_renderer, _changeDetectorRef) {
+        this._renderer = _renderer;
+        this._changeDetectorRef = _changeDetectorRef;
+        // Data.
+        this.labelId = `bb-checkbox-${nextUniqueId$2++}`;
+        // Inputs.
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.grouped = false;
+        // Outputs.
+        this.checkedChange = new EventEmitter();
+        this.indeterminateChange = new EventEmitter();
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+    }
+    ngAfterViewInit() {
+        this.syncField('indeterminate', this.indeterminate);
+    }
+    toggle() {
+        this.checked = !this.checked;
+    }
+    writeValue(newValue) {
+        this.checked = newValue;
+    }
+    registerOnChange(method) {
+        this.onChangeCallback = method;
+    }
+    registerOnTouched(method) {
+        this.onTouchedCallback = method;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._changeDetectorRef.markForCheck();
+    }
+    onClickEvent(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        // When user manually click on the checkbox, `indeterminate` is set to false.
+        if (this.indeterminate) {
+            Promise.resolve().then(() => {
+                this.indeterminate = false;
+                this.indeterminateChange.emit(this.indeterminate);
+            });
+        }
+        // Toggle the value.
+        this.toggle();
+        // Emit the change event.
+        this.emitChangeEvent();
+    }
+    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() {
+        this.onChangeCallback?.(this.checked);
+        this.checkedChange.emit(this.checked);
+        this.syncField('checked', this.checked);
+    }
+    syncField(field, value) {
+        const element = this.inputElementRef?.nativeElement;
+        if (!element) {
+            return;
+        }
+        this._renderer.setProperty(element, field, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCheckbox, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: BbCheckbox, isStandalone: true, selector: "bb-checkbox", inputs: { checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute] }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.indeterminate": "indeterminate", "class.disabled": "disabled", "class.grouped": "grouped" }, classAttribute: "bb-checkbox" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbCheckbox), multi: true }
+        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       [checked]=\"checked\"\n       [disabled]=\"disabled\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouchedCallback()\"\n       class=\"bb-checkbox-input\"\n       tabindex=\"-1\"\n       type=\"checkbox\">\n\n<label [for]=\"labelId\"\n       [attr.tabindex]=\"disabled ? -1 : 0\"\n       (keyup.space)=\"onClickEvent($event)\"\n       class=\"bb-checkbox-label\">\n    <span class=\"bb-checkbox-area\">\n        <svg width=\"68%\"\n             height=\"68%\"\n             viewBox=\"0 0 12 12\">\n            <polyline [attr.points]=\"indeterminate ? '1 6 11 6' : '1.5 7 4.5 10 10.5 2'\"></polyline>\n        </svg>\n    </span>\n    <span class=\"bb-checkbox-content\">\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [".bb-checkbox{display:block}.bb-checkbox.grouped{margin-bottom:1.5rem}.bb-checkbox-input{display:none}.bb-checkbox-label{margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center}.bb-checkbox-label>span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.bb-checkbox-area{width:1.25rem;height:1.25rem;position:relative;min-width:1.25rem;min-height:1.25rem;border-radius:.25rem;vertical-align:middle;transition-duration:.2s;border:1px solid hsl(213,8%,74%);transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a;transition-property:stroke-dashoffset,box-shadow,border-color,background-color}.bb-checkbox-area>svg{top:16%;left:16%;fill:none;stroke:#fff;stroke-width:2;position:absolute;stroke-linecap:round;transition-delay:.1s;stroke-linejoin:round;stroke-dasharray:1rem;stroke-dashoffset:1rem;transition:all .3s ease;transform:translateZ(0)}.bb-checkbox-content{font-size:1rem;font-weight:400;padding-left:.5rem;color:#121212}.bb-checkbox-content>small{display:block;line-height:1.5;font-size:.8125rem;margin-top:.125rem;color:#758795}.bb-checkbox-input:not(:disabled)+.bb-checkbox-label:focus>.bb-checkbox-area{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem var(--bb-checkbox-outline-color)}.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area,.bb-checkbox.indeterminate>.bb-checkbox-label>.bb-checkbox-area{border-color:var(--bb-checkbox-border-color);background-color:var(--bb-checkbox-background-color)}.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area>svg,.bb-checkbox.indeterminate>.bb-checkbox-label>.bb-checkbox-area>svg{stroke-dashoffset:0}.bb-checkbox.disabled>.bb-checkbox-label{cursor:default;pointer-events:none}.bb-checkbox.disabled>.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area,.bb-checkbox.indeterminate.disabled>.bb-checkbox-input+.bb-checkbox-label>.bb-checkbox-area{border-color:#b7bcc2;background-color:#e6e6e6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbCheckbox), multi: true }
+                    ], host: {
+                        'class': 'bb-checkbox',
+                        '[class.indeterminate]': 'indeterminate',
+                        '[class.disabled]': 'disabled',
+                        '[class.grouped]': 'grouped'
+                    }, preserveWhitespaces: false, standalone: true, template: "<input #input\n       [id]=\"labelId\"\n       [checked]=\"checked\"\n       [disabled]=\"disabled\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouchedCallback()\"\n       class=\"bb-checkbox-input\"\n       tabindex=\"-1\"\n       type=\"checkbox\">\n\n<label [for]=\"labelId\"\n       [attr.tabindex]=\"disabled ? -1 : 0\"\n       (keyup.space)=\"onClickEvent($event)\"\n       class=\"bb-checkbox-label\">\n    <span class=\"bb-checkbox-area\">\n        <svg width=\"68%\"\n             height=\"68%\"\n             viewBox=\"0 0 12 12\">\n            <polyline [attr.points]=\"indeterminate ? '1 6 11 6' : '1.5 7 4.5 10 10.5 2'\"></polyline>\n        </svg>\n    </span>\n    <span class=\"bb-checkbox-content\">\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [".bb-checkbox{display:block}.bb-checkbox.grouped{margin-bottom:1.5rem}.bb-checkbox-input{display:none}.bb-checkbox-label{margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center}.bb-checkbox-label>span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.bb-checkbox-area{width:1.25rem;height:1.25rem;position:relative;min-width:1.25rem;min-height:1.25rem;border-radius:.25rem;vertical-align:middle;transition-duration:.2s;border:1px solid hsl(213,8%,74%);transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a;transition-property:stroke-dashoffset,box-shadow,border-color,background-color}.bb-checkbox-area>svg{top:16%;left:16%;fill:none;stroke:#fff;stroke-width:2;position:absolute;stroke-linecap:round;transition-delay:.1s;stroke-linejoin:round;stroke-dasharray:1rem;stroke-dashoffset:1rem;transition:all .3s ease;transform:translateZ(0)}.bb-checkbox-content{font-size:1rem;font-weight:400;padding-left:.5rem;color:#121212}.bb-checkbox-content>small{display:block;line-height:1.5;font-size:.8125rem;margin-top:.125rem;color:#758795}.bb-checkbox-input:not(:disabled)+.bb-checkbox-label:focus>.bb-checkbox-area{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem var(--bb-checkbox-outline-color)}.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area,.bb-checkbox.indeterminate>.bb-checkbox-label>.bb-checkbox-area{border-color:var(--bb-checkbox-border-color);background-color:var(--bb-checkbox-background-color)}.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area>svg,.bb-checkbox.indeterminate>.bb-checkbox-label>.bb-checkbox-area>svg{stroke-dashoffset:0}.bb-checkbox.disabled>.bb-checkbox-label{cursor:default;pointer-events:none}.bb-checkbox.disabled>.bb-checkbox-input:checked+.bb-checkbox-label>.bb-checkbox-area,.bb-checkbox.indeterminate.disabled>.bb-checkbox-input+.bb-checkbox-label>.bb-checkbox-area{border-color:#b7bcc2;background-color:#e6e6e6}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { inputElementRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], checkedChange: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }] } });
+
+class BbCheckboxGroup {
+    constructor() {
+        // Inputs.
+        this.label = null;
+        this.required = false;
+        this.grouped = false;
+        this.inline = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbCheckboxGroup, isStandalone: true, selector: "bb-checkbox-group", inputs: { label: "label", required: ["required", "required", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], inline: ["inline", "inline", booleanAttribute] }, host: { properties: { "class.grouped": "grouped", "class.required": "required", "class.inline": "inline" }, classAttribute: "bb-checkbox-group" }, ngImport: i0, template: "@if (label; as labelContent) {\n    <label class=\"bb-checkbox-group-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<div class=\"bb-checkbox-group-items\">\n    <ng-content select=\"bb-checkbox\"></ng-content>\n</div>\n", styles: [".bb-checkbox-group{display:block}.bb-checkbox-group.grouped{margin-bottom:1.5rem}.bb-checkbox-group.required>.bb-checkbox-group-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-checkbox-group-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-checkbox-group-items{display:flex;flex-direction:column}.bb-checkbox-group-items:not(:empty){margin-bottom:.25rem}.bb-checkbox-group-items>*{margin-bottom:.25rem}@media only screen and (min-width: 768px){.bb-checkbox-group.inline>.bb-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bb-checkbox-group.inline>.bb-checkbox-group-items>*:not(:last-child){margin-right:.75rem}}\n"], dependencies: [{ kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-checkbox-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-checkbox-group',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required',
+                        '[class.inline]': 'inline'
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbTemplate, AsyncPipe], template: "@if (label; as labelContent) {\n    <label class=\"bb-checkbox-group-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<div class=\"bb-checkbox-group-items\">\n    <ng-content select=\"bb-checkbox\"></ng-content>\n</div>\n", styles: [".bb-checkbox-group{display:block}.bb-checkbox-group.grouped{margin-bottom:1.5rem}.bb-checkbox-group.required>.bb-checkbox-group-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-checkbox-group-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-checkbox-group-items{display:flex;flex-direction:column}.bb-checkbox-group-items:not(:empty){margin-bottom:.25rem}.bb-checkbox-group-items>*{margin-bottom:.25rem}@media only screen and (min-width: 768px){.bb-checkbox-group.inline>.bb-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bb-checkbox-group.inline>.bb-checkbox-group-items>*:not(:last-child){margin-right:.75rem}}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class BbRadioGroup {
+    // Value.
+    get value() {
+        return this._value;
     }
     set value(value) {
-        this.parseDateStringInForm(value);
-        this.valueChange.emit(this.value);
+        this._value = value;
+        this._changeDetectorRef.markForCheck();
     }
-    constructor(_changeDetectorRef, _localizeId) {
-        super();
+    constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
-        this._localizeId = _localizeId;
-        // Readonly data.
-        this._yearRegex = /^(10|[1-9][0-9])\d{2}$/; // Note: 1000 - 9999
         // Inputs.
         this.label = null;
-        this.hint = null;
-        this.dayPlaceholder = 'dd';
-        this.monthPlaceholder = 'mm';
-        this.yearPlaceholder = 'yyyy';
-        this.trackByValue = (_, item) => item?.value;
-        this.years$ = new BehaviorSubject(null);
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.grouped = false;
+        this.inline = false;
+        this.hideErrors = false;
+        // Outputs.
         this.valueChange = new EventEmitter();
-        // Subscriptions.
-        this._subscription = new Subscription();
-        this.onTouchedCallback = () => {
-        };
-        this.onChangeCallback = () => {
+        this._value = null;
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+        // State.
+        this.error = false;
+    }
+    select(value) {
+        if (this.value === value || this.disabled || this.readonly) {
+            return;
+        }
+        this.value = value;
+        this.onChangeCallback?.(this.value);
+        this.valueChange.emit(this.value);
+        this.onTouchedCallback?.();
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(newValue) {
+        this.value = newValue;
+    }
+    onErrorChange(error) {
+        this.error = !!error;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRadioGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbRadioGroup, isStandalone: true, selector: "bb-radio-group", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], inline: ["inline", "inline", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled", "class.readonly": "readonly", "class.grouped": "grouped", "class.required": "required", "class.inline": "inline", "class.error": "error" }, classAttribute: "bb-radio-group" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbRadioGroup), multi: true }
+        ], ngImport: i0, template: "@if (label; as labelContent) {\n    <label class=\"bb-radio-group-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<div class=\"bb-radio-group-items\">\n    <ng-content select=\"bb-radio-button\"></ng-content>\n</div>\n\n<!-- The error component. -->\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n", styles: [".bb-radio-group{display:block}.bb-radio-group.grouped{margin-bottom:1.5rem}.bb-radio-group.readonly{pointer-events:none}.bb-radio-group.error>.bb-radio-group-label{color:#c23934}.bb-radio-group.required>.bb-radio-group-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-radio-group-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-radio-group-items{display:flex;flex-direction:column}.bb-radio-group-items:not(:empty){margin-bottom:.25rem}.bb-radio-group-items>*{margin-bottom:.25rem}@media only screen and (min-width: 768px){.bb-radio-group.inline>.bb-radio-group-items{flex-wrap:wrap;flex-direction:row}.bb-radio-group.inline>.bb-radio-group-items>*:not(:last-child){margin-right:.75rem}}\n"], dependencies: [{ kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbRadioGroup), multi: true }
+                    ], host: {
+                        'class': 'bb-radio-group',
+                        '[class.disabled]': 'disabled',
+                        '[class.readonly]': 'readonly',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required',
+                        '[class.inline]': 'inline',
+                        '[class.error]': 'error'
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbTemplate, AsyncPipe, BbFormError], template: "@if (label; as labelContent) {\n    <label class=\"bb-radio-group-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<div class=\"bb-radio-group-items\">\n    <ng-content select=\"bb-radio-button\"></ng-content>\n</div>\n\n<!-- The error component. -->\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n", styles: [".bb-radio-group{display:block}.bb-radio-group.grouped{margin-bottom:1.5rem}.bb-radio-group.readonly{pointer-events:none}.bb-radio-group.error>.bb-radio-group-label{color:#c23934}.bb-radio-group.required>.bb-radio-group-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-radio-group-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-radio-group-items{display:flex;flex-direction:column}.bb-radio-group-items:not(:empty){margin-bottom:.25rem}.bb-radio-group-items>*{margin-bottom:.25rem}@media only screen and (min-width: 768px){.bb-radio-group.inline>.bb-radio-group-items{flex-wrap:wrap;flex-direction:row}.bb-radio-group.inline>.bb-radio-group-items>*:not(:last-child){margin-right:.75rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideErrors: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+class BbRadioButton {
+    // Disabled.
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._radioGroup?.disabled || this._disabled;
+    }
+    onClick() {
+        if (this.disabled) {
+            return;
+        }
+        this._radioGroup.select(this.value);
+    }
+    onSpacePressed() {
+        return this.onClick();
+    }
+    get selected() {
+        return this._radioGroup?.value === this.value;
+    }
+    constructor(_radioGroup) {
+        this._radioGroup = _radioGroup;
+        // Inputs.
+        this.value = null;
+        this.hideText = false;
+        this._disabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRadioButton, deps: [{ token: BbRadioGroup }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbRadioButton, isStandalone: true, selector: "bb-radio-button", inputs: { value: "value", hideText: ["hideText", "hideText", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "onClick()", "keydown.space": "onSpacePressed()" }, properties: { "class.disabled": "disabled", "tabindex": "disabled ? -1 : 0", "class.selected": "this.selected" }, classAttribute: "bb-radio-button" }, ngImport: i0, template: "<div class=\"bb-radio-button-indicator\"></div>\n@if (!hideText) {\n    <span class=\"bb-radio-button-text\"><ng-content></ng-content></span>\n}\n\n", styles: [".bb-radio-button{display:flex;cursor:pointer;align-items:center}.bb-radio-button:not(.disabled):focus>.bb-radio-button-indicator{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem var(--bb-radio-outline-color)}.bb-radio-button.selected>.bb-radio-button-indicator{border-color:var(--bb-radio-border-color)}.bb-radio-button.selected>.bb-radio-button-indicator:after{opacity:1;transform:none}.bb-radio-button.disabled{-webkit-user-select:none;user-select:none}.bb-radio-button.disabled>.bb-radio-button-indicator{border-color:gray}.bb-radio-button.disabled>.bb-radio-button-indicator:after{background-color:gray}.bb-radio-button.disabled>.bb-radio-button-text{color:gray}.bb-radio-button-indicator{display:flex;width:1.25rem;height:1.25rem;min-width:1.25rem;border-radius:50%;min-height:1.25rem;align-items:center;justify-content:center;border:1px solid hsl(213,8%,74%);transition:box-shadow .25s cubic-bezier(0,0,.2,1),border-color .25s cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-radio-button-indicator:after{opacity:0;content:\"\";display:block;border-radius:50%;transform:scale(0);width:.625rem;height:.625rem;background-color:var(--bb-radio-indicator-color);transition:transform .12s cubic-bezier(0,0,.2,1),opacity .12s cubic-bezier(0,0,.2,1)}.bb-radio-button-text{color:#111;font-size:1rem;font-weight:400;padding-left:.5rem}.bb-radio-button-text>small{display:block;line-height:1.5;font-size:.8125rem;margin-top:.125rem;color:#758795}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbRadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-radio-button',
+                        '[class.disabled]': 'disabled',
+                        '[tabindex]': 'disabled ? -1 : 0'
+                    }, preserveWhitespaces: false, standalone: true, template: "<div class=\"bb-radio-button-indicator\"></div>\n@if (!hideText) {\n    <span class=\"bb-radio-button-text\"><ng-content></ng-content></span>\n}\n\n", styles: [".bb-radio-button{display:flex;cursor:pointer;align-items:center}.bb-radio-button:not(.disabled):focus>.bb-radio-button-indicator{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem var(--bb-radio-outline-color)}.bb-radio-button.selected>.bb-radio-button-indicator{border-color:var(--bb-radio-border-color)}.bb-radio-button.selected>.bb-radio-button-indicator:after{opacity:1;transform:none}.bb-radio-button.disabled{-webkit-user-select:none;user-select:none}.bb-radio-button.disabled>.bb-radio-button-indicator{border-color:gray}.bb-radio-button.disabled>.bb-radio-button-indicator:after{background-color:gray}.bb-radio-button.disabled>.bb-radio-button-text{color:gray}.bb-radio-button-indicator{display:flex;width:1.25rem;height:1.25rem;min-width:1.25rem;border-radius:50%;min-height:1.25rem;align-items:center;justify-content:center;border:1px solid hsl(213,8%,74%);transition:box-shadow .25s cubic-bezier(0,0,.2,1),border-color .25s cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-radio-button-indicator:after{opacity:0;content:\"\";display:block;border-radius:50%;transform:scale(0);width:.625rem;height:.625rem;background-color:var(--bb-radio-indicator-color);transition:transform .12s cubic-bezier(0,0,.2,1),opacity .12s cubic-bezier(0,0,.2,1)}.bb-radio-button-text{color:#111;font-size:1rem;font-weight:400;padding-left:.5rem}.bb-radio-button-text>small{display:block;line-height:1.5;font-size:.8125rem;margin-top:.125rem;color:#758795}\n"] }]
+        }], ctorParameters: () => [{ type: BbRadioGroup }], propDecorators: { value: [{
+                type: Input
+            }], hideText: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onSpacePressed: [{
+                type: HostListener,
+                args: ['keydown.space']
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }] } });
+
+class BbAvatar {
+    constructor() {
+        // Inputs.
+        this.size = 2.5;
+        // State.
+        this.state$ = new BehaviorSubject('initials');
+        // Data.
+        this._src = null;
+        this._title = null;
+        this._initials = '!';
+        this._color = 'rgb(255, 255, 255)';
+        this._backgroundColor = 'rgb(66, 66, 66)';
+        this.toRgb = (value) => {
+            const baseRed = 128;
+            const baseGreen = 128;
+            const baseBlue = 128;
+            let seed = value.charCodeAt(0) ^ value.charCodeAt(1);
+            const rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
+            const rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
+            const rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;
+            const r = Math.round((rand_1 + baseRed) / 2);
+            const g = Math.round((rand_2 + baseGreen) / 2);
+            const b = Math.round((rand_3 + baseBlue) / 2);
+            return { r, g, b };
         };
-        this.formToDateString = ({ year, month, day }) => {
-            if (this.form?.invalid) {
+        this.getInitials = (name) => {
+            // Get all the initials.
+            const names = (name ?? '').split(' ');
+            const initials = names
+                .map(name => name.charAt(0).toUpperCase())
+                .filter(name => /^[a-zA-Z]+$/.test(name));
+            // Check if there are any initials.
+            if (initials?.length <= 0) {
                 return null;
             }
-            const prefixedMonth = this.padString(`${month}`, 2, '0');
-            const prefixedDay = this.padString(`${day}`, 2, '0');
-            return [year, prefixedMonth, prefixedDay].join('-');
+            // Get the first and last initials.
+            if (initials?.length > 1) {
+                return `${initials?.[0]}${initials?.[initials?.length - 1]}`;
+            }
+            // Get only the first initial.
+            return initials?.[0];
         };
-        this.parseYearFormat = (value) => {
-            // Transform the value to a definitive string.
-            const yearString = `${value}`;
-            const currentFullYear = new Date().getFullYear();
-            // Handle default "current" syntax.
-            if (yearString === 'current') {
-                return currentFullYear;
+        this.parseColorFormat = (value) => {
+            if (!value) {
+                return null;
             }
-            // Handle "current + {amount}" syntax.
-            if (/^current\s?\+\s?\d+$/.test(yearString)) {
-                const amount = Number(yearString?.split('+')?.[1]?.trim()) ?? 0;
-                return currentFullYear + amount;
+            // Hex 3 values.
+            let match = value.match(/^#([0-9a-f]{3})$/i);
+            if (match && match[1]) {
+                const r = parseInt(match[1].charAt(0), 16) * 0x11;
+                const g = parseInt(match[1].charAt(1), 16) * 0x11;
+                const b = parseInt(match[1].charAt(2), 16) * 0x11;
+                return { r, g, b };
             }
-            // Handle "current - {amount}" syntax.
-            if (/^current\s?-\s?\d+$/.test(yearString)) {
-                const amount = Number(yearString?.split('-')?.[1]?.trim()) ?? 0;
-                return currentFullYear - amount;
+            // Hex 6 values.
+            match = value.match(/^#([0-9a-f]{6})$/i);
+            if (match && match[1]) {
+                const r = parseInt(match[1].substring(0, 2), 16);
+                const g = parseInt(match[1].substring(2, 4), 16);
+                const b = parseInt(match[1].substring(4, 6), 16);
+                return { r, g, b };
             }
-            // Handling the default number case.
-            if (/^[0-9]{4}$/.test(yearString)) {
-                return Number(yearString);
+            // Rgb values.
+            match = value.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+            if (match) {
+                const r = parseInt(match[1], 10);
+                const g = parseInt(match[2], 10);
+                const b = parseInt(match[3], 10);
+                return { r, g, b };
             }
-            // We could not parse it.
+            // Not a supported color format.
+            console?.warn?.(`BbAvatar: Unsupported tintColor "${value}" was used.`);
             return null;
         };
-        this.getDaysInMonth = (month = null, year = null) => {
-            if (this.form?.invalid || month === null || year === null) {
-                return 31;
-            }
-            const parsedYear = parseInt(year, 10);
-            return new Date(parsedYear, month, 0).getDate();
-        };
-        this.isValidDateString = (value) => {
-            return typeof value === 'string' && /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value);
-        };
-        this.padString = (value, maxLength, fillString = '0') => {
-            const count = maxLength - value.length;
-            for (let index = 0; index < count; index++) {
-                value = `${fillString}${value}`;
-            }
-            return value;
-        };
     }
-    ngOnInit() {
-        this.composeForm();
-        this.getData();
-        this.handleChanges();
+    set src(value) {
+        this._src = value;
+        if (this._src) {
+            this.state$.next('image');
+        }
+    }
+    set title(value) {
+        // Set the title and the initials.
+        this._title = value ?? '!';
+        this._initials = this.getInitials(this._title);
+        // Generate the colors based on the name.
+        const { r, g, b } = this.toRgb(this._title);
+        this.setColors(r, g, b);
+    }
+    set tintColor(value) {
+        const result = this.parseColorFormat(value);
+        if (!result) {
+            return;
+        }
+        const { r, g, b } = result;
+        this.setColors(r, g, b);
+    }
+    get src() {
+        return this._src;
+    }
+    get color() {
+        return this._color;
+    }
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+    get title() {
+        return this._title;
+    }
+    get initials() {
+        return this._initials;
+    }
+    setColors(red, green, blue) {
+        this._color = `rgb(${red},${green},${blue})`;
+        this._backgroundColor = `rgba(${red},${green},${blue}, 0.25)`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbAvatar, isStandalone: true, selector: "bb-avatar", inputs: { size: ["size", "size", numberAttribute], src: "src", title: "title", tintColor: "tintColor" }, host: { attributes: { "role": "img" }, properties: { "style.width.rem": "size", "style.min-width.rem": "size", "style.height.rem": "size", "style.min-height.rem": "size", "style.font-size.rem": "size * 0.42", "style.color": "color", "style.background-color": "backgroundColor", "attr.title": "this.title" }, classAttribute: "bb-avatar" }, ngImport: i0, template: "@switch (state$ | async) {\n    @case ('image') {\n        <img [src]=\"src\"\n             [alt]=\"initials\"\n             (error)=\"state$?.next('initials')\"\n             class=\"bb-avatar-image\">\n    }\n    @default {\n        {{ initials }}\n    }\n}\n", styles: [".bb-avatar{line-height:1;overflow:hidden;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;display:inline-flex;justify-content:center}.bb-avatar.rounded{border-radius:4px}.bb-avatar.square{border-radius:0}.bb-avatar-image{width:100%;height:100%;object-fit:cover;position:absolute}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
+                        'class': 'bb-avatar',
+                        'role': 'img',
+                        '[style.width.rem]': 'size',
+                        '[style.min-width.rem]': 'size',
+                        '[style.height.rem]': 'size',
+                        '[style.min-height.rem]': 'size',
+                        '[style.font-size.rem]': 'size * 0.42',
+                        '[style.color]': 'color',
+                        '[style.background-color]': 'backgroundColor'
+                    }, standalone: true, imports: [AsyncPipe], template: "@switch (state$ | async) {\n    @case ('image') {\n        <img [src]=\"src\"\n             [alt]=\"initials\"\n             (error)=\"state$?.next('initials')\"\n             class=\"bb-avatar-image\">\n    }\n    @default {\n        {{ initials }}\n    }\n}\n", styles: [".bb-avatar{line-height:1;overflow:hidden;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;display:inline-flex;justify-content:center}.bb-avatar.rounded{border-radius:4px}.bb-avatar.square{border-radius:0}.bb-avatar-image{width:100%;height:100%;object-fit:cover;position:absolute}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], src: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.title']
+            }], tintColor: [{
+                type: Input
+            }] } });
+
+let nextUniqueId$1 = 0;
+class BbMultiFileControl {
+    constructor(_files, _changeDetectorRef) {
+        this._files = _files;
+        this._changeDetectorRef = _changeDetectorRef;
+        // Readonly data.
+        this.labelId = `bb-multi-file-control-${nextUniqueId$1++}`;
+        // Inputs.
+        this.label = null;
+        this.hint = null;
+        this.accept = null;
+        this.grouped = false;
+        this.required = false;
+        this.disabled = false;
+        this.hideErrors = false;
+        this.items = [];
+        // Outputs.
+        this.delete = new EventEmitter();
+        // State.
+        this.value = [];
+        this.dragging = false;
+        this.error = false;
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+    }
+    get showList() {
+        return this.value?.length > 0 || this.items?.length > 0;
     }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
+    onDrag(event, isHovered) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.dragging = isHovered;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.dragging = false;
+        const files = event?.['dataTransfer'].files;
+        return this.addFiles(files);
+    }
+    downloadFile(file) {
+        return this._files.download(file, file?.name);
+    }
+    openFileDialog() {
+        const element = this.fileInput?.nativeElement;
+        element?.click();
+    }
+    onFileChange(event) {
+        if (this.disabled) {
+            return;
+        }
+        const files = event.target?.['files'];
+        this.addFiles(files);
+        this.fileInput.nativeElement.value = null;
+        this.onChangeCallback?.(this.value);
+    }
+    deleteFile(index) {
+        this.value = this.value?.filter((_, i) => i !== index) ?? [];
+        this.onChangeCallback?.(this.value);
     }
     writeValue(value) {
-        this.parseDateStringInForm(value);
+        this.value = value ?? [];
     }
     registerOnChange(method) {
         this.onChangeCallback = method;
@@ -1039,660 +1356,793 @@ class BbDatePicker extends BbFilePickerMixinBase {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this.disabled ? this.form?.disable() : this.form?.enable();
         this._changeDetectorRef.markForCheck();
     }
     onErrorChange(error) {
         this.error = !!error;
     }
     validate({ value }) {
-        if (value === null || value === undefined) {
-            return null;
+        // TODO(@Stan): file size validation + file type validation
+        return null;
+    }
+    addFiles(files) {
+        for (let index = 0; index < files?.length; index++) {
+            const file = files?.[index] ?? null;
+            if (!(this.isFile(file) || this.isBlob(file))) {
+                continue;
+            }
+            this.value.push(file);
         }
-        const data = this.parseDateString(value);
-        const date = new Date(data?.year, data?.month - 1, data?.day);
-        const maxDays = this.getDaysInMonth(data?.month, `${data?.year}`);
-        const isInvalidDate = date.toString() === 'Invalid Date';
-        const exceededMaxDays = data?.day > maxDays;
-        return (isInvalidDate || exceededMaxDays) && {
-            invalidDate: true
-        };
     }
-    handleChanges() {
-        const dateOrNull$ = this.form.valueChanges.pipe(map(value => this.formToDateString(value)), distinctUntilChanged());
-        const subscription = dateOrNull$.subscribe(() => {
-            this.valueChange.emit(this.value);
-            this.onChangeCallback(this.value);
-        });
-        this._subscription.add(subscription);
+    isFile(input) {
+        return 'File' in window && input instanceof File;
     }
-    getData() {
-        const years$ = this.years$.asObservable();
-        const months$ = this.getMonthData();
-        const days$ = this.getDayData();
-        this.data$ = combineLatest([years$, months$, days$]).pipe(map(([years, months, days]) => ({ years, months, days })), tap(data => this.verifyListData(data?.days?.length, data?.years)));
+    isBlob(input) {
+        return 'Blob' in window && input instanceof Blob;
     }
-    verifyListData(maxDays, years) {
-        const dayControl = this.form.get('day');
-        if (dayControl?.value !== null && dayControl?.value > maxDays) {
-            dayControl.patchValue(maxDays);
-        }
-        const yearControl = this.form.get('year');
-        if (years !== null && yearControl?.value !== null && this._yearRegex.test(yearControl?.value)) {
-            const selectedYear = Number(yearControl?.value);
-            const firstYear = Math.min(...years);
-            const lastYear = Math.max(...years);
-            if (selectedYear < firstYear || selectedYear > lastYear) {
-                Promise.resolve().then(() => yearControl.patchValue(null));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbMultiFileControl, deps: [{ token: i1$1.Files }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbMultiFileControl, isStandalone: true, selector: "bb-multi-file-control", inputs: { label: "label", hint: "hint", accept: "accept", grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], items: "items" }, outputs: { delete: "delete" }, host: { listeners: { "dragover": "onDrag($event,true)", "dragleave": "onDrag($event,false)", "drop": "onDrop($event)" }, properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.dragging": "dragging", "class.error": "error" }, classAttribute: "bb-multi-file-control" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbMultiFileControl), multi: true },
+            { provide: NG_VALIDATORS, useExisting: BbMultiFileControl, multi: true }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label [for]=\"labelId\"\n           class=\"bb-multi-file-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<input #fileInput\n       [id]=\"labelId\"\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-multi-file-control-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       multiple>\n\n<div class=\"bb-multi-file-control-container\">\n    @if (showList) {\n        <ul class=\"bb-multi-file-control-list\">\n            @for (item of items; track item?.id) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <a [href]=\"item?.url\"\n                       target=\"_blank\"\n                       rel=\"noopener\"\n                       class=\"bb-multi-file-control-item-content\">{{ item?.label }}</a>\n                    @if (!disabled && delete?.observed) {\n                        <button (click)=\"delete?.emit(item)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n            @for (file of value; track $index) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <button (click)=\"downloadFile(file)\"\n                            class=\"bb-multi-file-control-item-content\"\n                            type=\"button\">\n                        {{ file?.name }}\n                    </button>\n                    @if (!disabled) {\n                        <button (click)=\"deleteFile($index)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\n    } @else if (!disabled) {\n        <i class=\"bb-multi-file-control-icon attach-vertical\"></i>\n        <p [bb-localize-string]=\"'multi-file-control.choose_file_text' | bbLocalize\"\n           class=\"bb-multi-file-control-empty\">\n            <label *bbLocalizeTemplate=\"'label'\"\n                   [for]=\"labelId\">{{ 'multi-file-control.choose_file' | bbLocalize }}</label>\n        </p>\n    }\n    @if (!disabled) {\n        <button (click)=\"openFileDialog()\"\n                type=\"button\"\n                class=\"primary small bb-multi-file-control-button\"\n                bb-button>\n            <i class=\"bb-multi-file-control-icon add\" suffix></i>\n            {{ 'multi-file-control.choose_file' | bbLocalize }}\n        </button>\n    }\n</div>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-multi-file-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-multi-file-control{display:block}.bb-multi-file-control.grouped{margin-bottom:1.5rem}.bb-multi-file-control.required>.bb-multi-file-control-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-multi-file-control.dragging>.bb-multi-file-control-container{border-color:#757e8a;box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-multi-file-control-box-shadow)}.bb-multi-file-control.disabled>.bb-multi-file-control-container{cursor:default;color:gray;background-color:#e6e6e6}.bb-multi-file-control-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-multi-file-control-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-multi-file-control-container{width:100%;display:flex;color:#111;padding:.5rem;overflow:hidden;min-height:7.5rem;align-items:center;border-radius:.5rem;flex-direction:column;justify-content:center;background-color:#fff;border:1px solid hsl(213,8%,74%);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-multi-file-control-button{margin-top:.5rem}.bb-multi-file-control-list{flex:1;width:100%;overflow:hidden}.bb-multi-file-control-empty{flex:1;width:100%;color:#758795;display:block;font-weight:400;line-height:1.5;text-align:center;font-size:.875rem}.bb-multi-file-control-empty>label{cursor:pointer;display:inline;font-size:inherit;font-weight:inherit;text-decoration:underline;color:var(--bb-multi-file-control-color)}.bb-multi-file-control-item{height:2rem;display:flex;max-width:100%;overflow:hidden;align-items:center;white-space:nowrap;border-radius:.5rem;text-overflow:ellipsis;padding:0 .25rem 0 .5rem;border:1px solid hsl(213,8%,74%);background-color:#edf4fd}.bb-multi-file-control-item:not(:last-child){margin-bottom:.25rem}.bb-multi-file-control-item-content{flex:1;padding:0;border:none;max-width:100%;margin:0 .5rem;overflow:hidden;appearance:none;text-align:left;font-weight:400;font-size:.875rem;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;background-color:transparent}.bb-multi-file-control-item-content,.bb-multi-file-control-item-content:visited{color:#0a305c}.bb-multi-file-control-item-content:hover,.bb-multi-file-control-item-content:focus{text-decoration:underline}.bb-multi-file-control-item-button{padding:0;width:1.5rem;display:flex;height:1.5rem;align-items:center;border-radius:.25rem;justify-content:center;border:1px solid hsl(0,73%,25%);background-color:#b51c1c}.bb-multi-file-control-item-button:hover,.bb-multi-file-control-item-button:focus{background-color:#a81a1a}.bb-multi-file-control-item-button:active{background-color:#9a1818}.bb-multi-file-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.bb-multi-file-control-icon{width:1.25rem;height:1.25rem;display:inline-flex;background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-multi-file-control-icon.add{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-vertical{width:1.5rem;height:1.5rem;margin-bottom:.5rem;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23758795\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-horizontal{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.clear{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/%3E%3C/svg%3E')}\n"], dependencies: [{ kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbLocalizeTemplate, selector: "[bbLocalizeTemplate]", inputs: ["bbLocalizeTemplate"] }, { kind: "component", type: BbLocalizeString, selector: "[bb-localize-string]", inputs: ["substitutions", "bb-localize-string"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbMultiFileControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-multi-file-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbMultiFileControl), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: BbMultiFileControl, multi: true }
+                    ], host: {
+                        'class': 'bb-multi-file-control',
+                        '[class.required]': 'required',
+                        '[class.disabled]': 'disabled',
+                        '[class.grouped]': 'grouped',
+                        '[class.dragging]': 'dragging',
+                        '[class.error]': 'error'
+                    }, preserveWhitespaces: false, standalone: true, imports: [BbFormError, BbTemplate, BbButton, BbLocalize, BbLocalizeTemplate, BbLocalizeString], template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label [for]=\"labelId\"\n           class=\"bb-multi-file-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<input #fileInput\n       [id]=\"labelId\"\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-multi-file-control-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       multiple>\n\n<div class=\"bb-multi-file-control-container\">\n    @if (showList) {\n        <ul class=\"bb-multi-file-control-list\">\n            @for (item of items; track item?.id) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <a [href]=\"item?.url\"\n                       target=\"_blank\"\n                       rel=\"noopener\"\n                       class=\"bb-multi-file-control-item-content\">{{ item?.label }}</a>\n                    @if (!disabled && delete?.observed) {\n                        <button (click)=\"delete?.emit(item)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n            @for (file of value; track $index) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <button (click)=\"downloadFile(file)\"\n                            class=\"bb-multi-file-control-item-content\"\n                            type=\"button\">\n                        {{ file?.name }}\n                    </button>\n                    @if (!disabled) {\n                        <button (click)=\"deleteFile($index)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\n    } @else if (!disabled) {\n        <i class=\"bb-multi-file-control-icon attach-vertical\"></i>\n        <p [bb-localize-string]=\"'multi-file-control.choose_file_text' | bbLocalize\"\n           class=\"bb-multi-file-control-empty\">\n            <label *bbLocalizeTemplate=\"'label'\"\n                   [for]=\"labelId\">{{ 'multi-file-control.choose_file' | bbLocalize }}</label>\n        </p>\n    }\n    @if (!disabled) {\n        <button (click)=\"openFileDialog()\"\n                type=\"button\"\n                class=\"primary small bb-multi-file-control-button\"\n                bb-button>\n            <i class=\"bb-multi-file-control-icon add\" suffix></i>\n            {{ 'multi-file-control.choose_file' | bbLocalize }}\n        </button>\n    }\n</div>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-multi-file-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-multi-file-control{display:block}.bb-multi-file-control.grouped{margin-bottom:1.5rem}.bb-multi-file-control.required>.bb-multi-file-control-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-multi-file-control.dragging>.bb-multi-file-control-container{border-color:#757e8a;box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-multi-file-control-box-shadow)}.bb-multi-file-control.disabled>.bb-multi-file-control-container{cursor:default;color:gray;background-color:#e6e6e6}.bb-multi-file-control-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-multi-file-control-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-multi-file-control-container{width:100%;display:flex;color:#111;padding:.5rem;overflow:hidden;min-height:7.5rem;align-items:center;border-radius:.5rem;flex-direction:column;justify-content:center;background-color:#fff;border:1px solid hsl(213,8%,74%);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-multi-file-control-button{margin-top:.5rem}.bb-multi-file-control-list{flex:1;width:100%;overflow:hidden}.bb-multi-file-control-empty{flex:1;width:100%;color:#758795;display:block;font-weight:400;line-height:1.5;text-align:center;font-size:.875rem}.bb-multi-file-control-empty>label{cursor:pointer;display:inline;font-size:inherit;font-weight:inherit;text-decoration:underline;color:var(--bb-multi-file-control-color)}.bb-multi-file-control-item{height:2rem;display:flex;max-width:100%;overflow:hidden;align-items:center;white-space:nowrap;border-radius:.5rem;text-overflow:ellipsis;padding:0 .25rem 0 .5rem;border:1px solid hsl(213,8%,74%);background-color:#edf4fd}.bb-multi-file-control-item:not(:last-child){margin-bottom:.25rem}.bb-multi-file-control-item-content{flex:1;padding:0;border:none;max-width:100%;margin:0 .5rem;overflow:hidden;appearance:none;text-align:left;font-weight:400;font-size:.875rem;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;background-color:transparent}.bb-multi-file-control-item-content,.bb-multi-file-control-item-content:visited{color:#0a305c}.bb-multi-file-control-item-content:hover,.bb-multi-file-control-item-content:focus{text-decoration:underline}.bb-multi-file-control-item-button{padding:0;width:1.5rem;display:flex;height:1.5rem;align-items:center;border-radius:.25rem;justify-content:center;border:1px solid hsl(0,73%,25%);background-color:#b51c1c}.bb-multi-file-control-item-button:hover,.bb-multi-file-control-item-button:focus{background-color:#a81a1a}.bb-multi-file-control-item-button:active{background-color:#9a1818}.bb-multi-file-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.bb-multi-file-control-icon{width:1.25rem;height:1.25rem;display:inline-flex;background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-multi-file-control-icon.add{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-vertical{width:1.5rem;height:1.5rem;margin-bottom:.5rem;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23758795\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-horizontal{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.clear{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/%3E%3C/svg%3E')}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Files }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideErrors: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], items: [{
+                type: Input
+            }], delete: [{
+                type: Output
+            }], onDrag: [{
+                type: HostListener,
+                args: ['dragover', ['$event', 'true']]
+            }, {
+                type: HostListener,
+                args: ['dragleave', ['$event', 'false']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+let nextUniqueId = 0;
+class BbFilePicker {
+    constructor() {
+        // Readonly data.
+        this.labelId = `bb-file-picker-${nextUniqueId++}`;
+        // Inputs.
+        this.label = null;
+        this.hint = null;
+        this.accept = null;
+        this.showImages = true;
+        this.allowDragging = true;
+        this.grouped = false;
+        this.required = false;
+        this.disabled = false;
+        this.hideErrors = false;
+        // State.
+        this.hovered = false;
+        this.error = false;
+        this.value$ = new BehaviorSubject({});
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+        this.valueChange = new EventEmitter();
+        this.saveFile = (files) => {
+            // Validate the files exist.
+            if (!files) {
+                return;
+            }
+            // Retrieve the first file.
+            const file = files[0];
+            // Validate the first file exists.
+            if (!file) {
+                return;
+            }
+            // Save the file.
+            this.value = file;
+        };
+        this.getFileListFromEvent = (event) => {
+            const element = event.target;
+            if (!element) {
+                return null;
             }
+            return element.files;
+        };
+        this.preventDefault = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+    }
+    get value() {
+        const { file } = this.value$.getValue();
+        return file;
+    }
+    set value(value) {
+        this.value$.next({ file: value });
+        this.valueChange.emit(value);
+    }
+    onDrag(event, isHovered) {
+        // Validate the input can support drag.
+        if (!this.allowDragging || this.disabled) {
+            return;
         }
+        // Prevent the default event action
+        // and start the hovering.
+        this.preventDefault(event);
+        this.hovered = isHovered;
     }
-    getDayData() {
-        const count$ = this.form.valueChanges.pipe(startWith(this.form?.value), map(({ month, year }) => this.getDaysInMonth(month, year)), distinctUntilChanged());
-        return count$.pipe(map(count => Array(count).fill(0).map((_, index) => ({
-            label: `${index + 1}`,
-            value: index + 1
-        }))));
+    onDrop(event) {
+        // Validate the input can support drag.
+        if (!this.allowDragging || this.disabled) {
+            return;
+        }
+        // Prevent the default event action
+        // and stop the hovering.
+        this.preventDefault(event);
+        this.hovered = false;
+        // Save the file.
+        this.saveFile(event['dataTransfer'].files);
+        // Run the on change callback.
+        this.onChangeCallback(this.value);
     }
-    getMonthData() {
-        return this._localizeId.pipe(map(locale => {
-            return Array(12).fill(0).map((_, month) => {
-                const date = new Date(2000, month, 1);
-                const label = formatDate(date, 'LLLL', locale);
-                return { label, value: month + 1 };
-            });
-        }));
+    onButtonPressed(file) {
+        if (file) {
+            this.value = null;
+            this.onChangeCallback(this.value);
+            return;
+        }
+        return this.openFilePicker();
     }
-    composeForm() {
-        const { required, pattern, minLength, maxLength } = Validators;
-        const yearPattern = pattern(this._yearRegex);
-        const yearValidators = [required, yearPattern, minLength(4), maxLength(4)];
-        this.form = new FormGroup({
-            day: new FormControl(null, required),
-            month: new FormControl(null, required),
-            year: new FormControl(null, yearValidators)
-        });
+    openFilePicker() {
+        return this.fileInput
+            && this.fileInput.nativeElement
+            && this.fileInput.nativeElement.click
+            && this.fileInput.nativeElement.click();
     }
-    parseDateStringInForm(value) {
-        // If the date string was not a valid format, reset the form.
-        if (!this.isValidDateString(value)) {
-            if (value !== null) {
-                this.form?.reset({ year: null, month: null, day: null }, { emitEvent: false });
-            }
+    onFileChange(event) {
+        // Validate the input is not disabled.
+        if (this.disabled) {
             return;
         }
-        // Parse the date string and save in the form.
-        const data = this.parseDateString(value);
-        const year = data?.year !== null && data?.year !== undefined
-            ? this.padString(`${data?.year}`, 4, '0')
-            : null;
-        const formData = { ...(data ?? {}), year };
-        this.form?.patchValue(formData, { emitEvent: false });
+        // Extract the file from the event.
+        const fileList = this.getFileListFromEvent(event);
+        // Save the file.
+        this.saveFile(fileList);
+        // Run the on change callback.
+        this.onChangeCallback(this.value);
+        // Clear the file input.
+        if (this.fileInput && this.fileInput.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(method) {
+        this.onChangeCallback = method;
+    }
+    registerOnTouched(method) {
+        this.onTouchedCallback = method;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
-    parseDateString(value) {
-        if (!this.isValidDateString(value)) {
+    onErrorChange(error) {
+        this.error = !!error;
+    }
+    validate({ value }) {
+        if (value === null || value === undefined) {
             return null;
         }
-        // Parse the date string.
-        const [year, month, day] = value?.split('-');
-        return {
-            day: day ? parseInt(day, 10) : null,
-            month: month ? parseInt(month, 10) : null,
-            year: year ? parseInt(year, 10) : null
+        const regexString = (this.accept || '*')
+            .replace(/\*/g, '.\*')
+            .replace(/,/g, '|');
+        const mimeTypeRegex = new RegExp(regexString);
+        const isNotValid = (typeof File === 'undefined') || !(value instanceof File) || !mimeTypeRegex.test(value?.type);
+        return isNotValid && {
+            invalidFileType: true
         };
     }
-    parseYears(values) {
-        if (!values) {
-            return this.years$.next(null);
-        }
-        // Parse the values to years (in numbers).
-        const [first, last] = values;
-        const firstYear = this.parseYearFormat(first);
-        const lastYear = this.parseYearFormat(last);
-        // Check cases in where we cannot parse.
-        if (firstYear === null || lastYear === null) {
-            return this.years$.next(null);
-        }
-        const difference = firstYear - lastYear;
-        const absoluteDifference = Math.abs(difference) + 1;
-        // Create an array with years.
-        const years = Array(absoluteDifference)
-            .fill(0)
-            .map((_, index) => difference < 0 ? (firstYear + index) : (firstYear - index));
-        // Validate we have one or more years.
-        if (years?.length <= 0) {
-            return this.years$.next(null);
-        }
-        // Push the years.
-        return this.years$.next(years);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDatePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: LOCALIZE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbDatePicker, selector: "bb-date-picker", inputs: { required: "required", readonly: "readonly", disabled: "disabled", grouped: "grouped", hideErrors: "hideErrors", label: "label", hint: "hint", dayPlaceholder: "dayPlaceholder", monthPlaceholder: "monthPlaceholder", yearPlaceholder: "yearPlaceholder", years: "years", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.required": "required", "class.readonly": "readonly", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-date-picker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFilePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbFilePicker, isStandalone: true, selector: "bb-file-picker", inputs: { label: "label", hint: "hint", accept: "accept", showImages: "showImages", allowDragging: "allowDragging", grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "dragover": "onDrag($event,true)", "dragleave": "onDrag($event,false)", "drop": "onDrop($event)" }, properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.hovered": "hovered", "class.error": "error" }, classAttribute: "bb-file-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => BbDatePicker),
+                useExisting: forwardRef(() => BbFilePicker),
                 multi: true
             },
             {
                 provide: NG_VALIDATORS,
-                useExisting: BbDatePicker,
+                useExisting: BbFilePicker,
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<!-- Label of the date picker. -->\n<label *ngIf=\"label as labelContent\"\n       class=\"bb-date-picker-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The form containing the year/month/day fields. -->\n<form *ngIf=\"data$ | async as data\"\n      [formGroup]=\"form\"\n      class=\"bb-date-picker-container\"\n      novalidate>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select [class.has-value]=\"!!form?.get('day')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"day\">\n                <option [ngValue]=\"null\">{{ dayPlaceholder }}</option>\n                <option *ngFor=\"let day of data?.days; trackBy: trackByValue\"\n                        [ngValue]=\"day?.value\">\n                    {{ day?.label }}\n                </option>\n            </select>\n        </bb-form-control>\n    </div>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select [class.has-value]=\"!!form?.get('month')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"month\">\n                <option [ngValue]=\"null\">{{ monthPlaceholder }}</option>\n                <option *ngFor=\"let month of data?.months; trackBy: trackByValue\"\n                        [ngValue]=\"month?.value\">\n                    {{ month?.label }}\n                </option>\n            </select>\n        </bb-form-control>\n    </div>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select *ngIf=\"data?.years?.length > 0; else defaultYearInputTemplate\"\n                    [class.has-value]=\"!!form?.get('year')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"year\">\n                <option [ngValue]=\"null\">{{ yearPlaceholder }}</option>\n                <option *ngFor=\"let year of data?.years\"\n                        [value]=\"year\">\n                    {{ year }}\n                </option>\n            </select>\n\n            <ng-template #defaultYearInputTemplate>\n                <input [placeholder]=\"yearPlaceholder\"\n                       bbInput\n                       type=\"text\"\n                       inputmode=\"numeric\"\n                       minlength=\"4\"\n                       maxlength=\"4\"\n                       pattern=\"^[0-9]{4}$\"\n                       formControlName=\"year\"\n                       autocomplete=\"off\">\n            </ng-template>\n        </bb-form-control>\n    </div>\n</form>\n\n<!-- The date picker error. -->\n<bb-form-error *ngIf=\"!hideErrors\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The date picker hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-date-picker-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n", styles: [".bb-date-picker{display:block}.bb-date-picker.required>.bb-date-picker-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-date-picker.readonly{pointer-events:none}.bb-date-picker.readonly .bb-form-control-container{cursor:default;border:1px dotted #bdc4c9;background-color:#f9f9f9!important}.bb-date-picker.readonly .bb-form-control-container>select:disabled{opacity:1}.bb-date-picker.grouped{margin-bottom:20px}.bb-date-picker.error>.bb-date-picker-label{color:#c23934}.bb-date-picker.error .bb-form-control-container{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-date-picker-label{color:#000;display:block;font-size:16px;font-weight:500;margin-bottom:4px}.bb-date-picker-container{display:flex}.bb-date-picker-item{flex:1}.bb-date-picker-item>bb-form-control.focused{z-index:1;position:relative}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select>option:first-child{color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value){color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value)>option:not(:first-child){color:#000}.bb-date-picker-item:not(:first-child):not(:last-child) .bb-form-control-container{border-radius:0!important}.bb-date-picker-item:first-child .bb-form-control-container{border-right:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}.bb-date-picker-item:last-child .bb-form-control-container{border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}.bb-date-picker-hint{display:block;color:#738694;font-size:13px;margin-top:4px;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "directive", type: BbFormSubmit, selector: "form", exportAs: ["bbForm"] }, { kind: "directive", type: BbInput, selector: "input[bbInput], textarea[bbInput]", inputs: ["readonly"] }, { kind: "directive", type: BbSelect, selector: "select[bbInput]", inputs: ["disabled", "required"] }, { kind: "component", type: BbFormControl, selector: "bb-form-control", inputs: ["grouped", "hideErrors", "label", "hint"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "extraTemplate", first: true, predicate: ["extra"], descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label [for]=\"labelId\"\n           class=\"bb-file-picker-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<!-- The input that can open the file picker. -->\n<input #fileInput\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-file-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\">\n\n@if (value$ | async; as data) {\n    <div class=\"bb-file-picker-wrapper\">\n        <!-- The button that accepts files. -->\n        <div class=\"bb-file-picker-container\">\n            <button [class.destructive]=\"!!data?.file\"\n                    [class.standalone]=\"!allowDragging\"\n                    [disabled]=\"disabled\"\n                    [id]=\"labelId\"\n                    (click)=\"onButtonPressed(data?.file)\"\n                    type=\"button\"\n                    class=\"bb-file-picker-button\">\n                <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\n                {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\n            </button>\n            @if (allowDragging) {\n                <div class=\"bb-file-picker-zone\">\n                    {{ 'file-picker.drop' | bbLocalize }}\n                </div>\n            }\n        </div>\n\n        @if (!!extraTemplate) {\n            <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\n        }\n\n        @if (showImages) {\n            @if (data?.file | bbFileImage | async; as image) {\n                <div class=\"bb-file-picker-image-container\">\n                    <div class=\"bb-file-picker-image-wrapper\">\n                        <div [@bbFilePickerImageAnimation]=\"true\"\n                             [style.padding-top.%]=\"image?.aspectRatio * 100\"\n                             [style.background-image]=\"image?.background\"\n                             class=\"bb-file-picker-image\">\n                        </div>\n                    </div>\n                </div>\n            }\n        }\n\n        <!-- Extra information of the file. -->\n        <div [class.visible]=\"!!data?.file\"\n             class=\"bb-file-picker-info\">\n            @if (data?.file?.name; as name) {\n                <span>{{ name }}</span>\n            }\n            @if (data?.file?.size; as size) {\n                <span>{{ size | bbFileSize }}</span>\n            }\n        </div>\n    </div>\n}\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-file-picker-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n\n<!-- Upload icon. -->\n<ng-template #uploadIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"1.5rem\"\n         height=\"1.5rem\"\n         viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\"\n              d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5a2.5 2.5 0 010-5H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"></path>\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\n    </svg>\n</ng-template>\n\n<!-- Close icon. -->\n<ng-template #closeIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"1.5rem\"\n         height=\"1.5rem\"\n         viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\"\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    </svg>\n</ng-template>\n", styles: [".bb-file-picker{display:block}.bb-file-picker.full>.bb-file-picker-wrapper{width:100%}.bb-file-picker:not(.disabled) .bb-file-picker-button{background-color:#fff}.bb-file-picker:not(.disabled):focus>.bb-file-picker-wrapper,.bb-file-picker:not(.disabled).hovered>.bb-file-picker-wrapper{box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-file-picker-box-shadow)}.bb-file-picker.grouped{margin-bottom:1.5rem}.bb-file-picker.disabled>.bb-file-picker-wrapper{cursor:default;pointer-events:none;color:gray;background-color:#e6e6e6}.bb-file-picker.required>.bb-file-picker-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-file-picker.error>.bb-file-picker-label{color:#c23934}.bb-file-picker.error>.bb-file-picker-hint{display:none}.bb-file-picker.error>.bb-file-picker-wrapper{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3;box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-file-picker.error .bb-file-picker-button{background-color:transparent}.bb-file-picker-wrapper{max-width:100%;-webkit-user-select:none;user-select:none;display:inline-flex;border-radius:.5rem;flex-direction:column;background-color:#fff;border:1px solid hsl(213,8%,74%);transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-file-picker-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-file-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-file-picker-container{min-height:2.5rem;display:inline-flex}.bb-file-picker-button{margin:0;z-index:1;border:none;line-height:1;cursor:pointer;font-size:1rem;appearance:none;font-weight:400;padding:0 .75rem;align-items:center;white-space:nowrap;display:inline-flex;background-color:transparent;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;color:var(--bb-file-picker-color);border-right:1px solid hsl(213,8%,74%);transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-button:focus{box-shadow:var(--bb-file-picker-box-shadow)}.bb-file-picker-button:disabled{cursor:default}.bb-file-picker-button.destructive{color:#f55656}.bb-file-picker-button.standalone{width:100%;border-right:none;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.bb-file-picker-icon{margin-right:.25rem}.bb-file-picker-zone{flex:1;color:#758795;line-height:1.125;font-size:.875rem;align-items:center;display:inline-flex;padding:.5rem .75rem;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;overflow:hidden;padding:0 .75rem;align-items:center;line-height:2.5rem;display:inline-flex;border-top:0 solid #b6bbc1;background-color:transparent;transition:height .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-info.visible{height:2.5rem;border-top-width:1px}.bb-file-picker-info>span{opacity:.4;max-width:100%;overflow:hidden;font-size:.875rem;white-space:nowrap;text-overflow:ellipsis}.bb-file-picker-info>span:first-child{flex:1}.bb-file-picker-info>span:last-child{margin-left:.75rem}.bb-file-picker-image-container{overflow:hidden;border-top:1px solid hsl(213,8%,74%)}.bb-file-picker-image-wrapper{width:100%;max-width:40%;margin:1.5rem auto}.bb-file-picker-image{width:100%;display:flex;overflow:hidden;position:relative;will-change:opacity;border-radius:.5rem;background-size:cover;background-position:center;background-repeat:no-repeat}.bb-file-picker-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"], dependencies: [{ kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "pipe", type: BbFileSize, name: "bbFileSize" }, { kind: "pipe", type: BbFileImage, name: "bbFileImage" }], animations: [
+            trigger('bbFilePickerImageAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0 }),
+                    animate('200ms', style({ opacity: 1 }))
+                ]),
+                transition(':leave', [
+                    animate('200ms', style({ opacity: 0 }))
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbFilePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'bb-file-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => BbDatePicker),
+                            useExisting: forwardRef(() => BbFilePicker),
                             multi: true
                         },
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: BbDatePicker,
+                            useExisting: BbFilePicker,
                             multi: true
                         }
                     ], host: {
-                        'class': 'bb-date-picker',
+                        'class': 'bb-file-picker',
                         '[class.required]': 'required',
-                        '[class.readonly]': 'readonly',
                         '[class.disabled]': 'disabled',
                         '[class.grouped]': 'grouped',
+                        '[class.hovered]': 'hovered',
                         '[class.error]': 'error'
-                    }, inputs: ['required', 'readonly', 'disabled', 'grouped', 'hideErrors'], preserveWhitespaces: false, template: "<!-- Label of the date picker. -->\n<label *ngIf=\"label as labelContent\"\n       class=\"bb-date-picker-label\">\n    <ng-template [bbTemplate]=\"labelContent\">\n        {{ labelContent }}\n    </ng-template>\n</label>\n\n<!-- The form containing the year/month/day fields. -->\n<form *ngIf=\"data$ | async as data\"\n      [formGroup]=\"form\"\n      class=\"bb-date-picker-container\"\n      novalidate>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select [class.has-value]=\"!!form?.get('day')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"day\">\n                <option [ngValue]=\"null\">{{ dayPlaceholder }}</option>\n                <option *ngFor=\"let day of data?.days; trackBy: trackByValue\"\n                        [ngValue]=\"day?.value\">\n                    {{ day?.label }}\n                </option>\n            </select>\n        </bb-form-control>\n    </div>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select [class.has-value]=\"!!form?.get('month')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"month\">\n                <option [ngValue]=\"null\">{{ monthPlaceholder }}</option>\n                <option *ngFor=\"let month of data?.months; trackBy: trackByValue\"\n                        [ngValue]=\"month?.value\">\n                    {{ month?.label }}\n                </option>\n            </select>\n        </bb-form-control>\n    </div>\n    <div class=\"bb-date-picker-item\">\n        <bb-form-control hideErrors>\n            <select *ngIf=\"data?.years?.length > 0; else defaultYearInputTemplate\"\n                    [class.has-value]=\"!!form?.get('year')?.value\"\n                    bbInput\n                    autocomplete=\"off\"\n                    formControlName=\"year\">\n                <option [ngValue]=\"null\">{{ yearPlaceholder }}</option>\n                <option *ngFor=\"let year of data?.years\"\n                        [value]=\"year\">\n                    {{ year }}\n                </option>\n            </select>\n\n            <ng-template #defaultYearInputTemplate>\n                <input [placeholder]=\"yearPlaceholder\"\n                       bbInput\n                       type=\"text\"\n                       inputmode=\"numeric\"\n                       minlength=\"4\"\n                       maxlength=\"4\"\n                       pattern=\"^[0-9]{4}$\"\n                       formControlName=\"year\"\n                       autocomplete=\"off\">\n            </ng-template>\n        </bb-form-control>\n    </div>\n</form>\n\n<!-- The date picker error. -->\n<bb-form-error *ngIf=\"!hideErrors\"\n               (errorChange)=\"onErrorChange($event)\">\n</bb-form-error>\n\n<!-- The date picker hint. -->\n<p *ngIf=\"hint as hintContent\"\n   class=\"bb-date-picker-hint\">\n    <ng-template [bbTemplate]=\"hintContent\">\n        {{ hintContent }}\n    </ng-template>\n</p>\n", styles: [".bb-date-picker{display:block}.bb-date-picker.required>.bb-date-picker-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bb-date-picker.readonly{pointer-events:none}.bb-date-picker.readonly .bb-form-control-container{cursor:default;border:1px dotted #bdc4c9;background-color:#f9f9f9!important}.bb-date-picker.readonly .bb-form-control-container>select:disabled{opacity:1}.bb-date-picker.grouped{margin-bottom:20px}.bb-date-picker.error>.bb-date-picker-label{color:#c23934}.bb-date-picker.error .bb-form-control-container{border:1px solid #962b26;background-color:#c2393440!important;box-shadow:inset 0 3px #b7bcc233,0 6px 6px -6px #0000001a,0 0 0 3px #c2393466!important}.bb-date-picker-label{color:#000;display:block;font-size:16px;font-weight:500;margin-bottom:4px}.bb-date-picker-container{display:flex}.bb-date-picker-item{flex:1}.bb-date-picker-item>bb-form-control.focused{z-index:1;position:relative}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select>option:first-child{color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value){color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value)>option:not(:first-child){color:#000}.bb-date-picker-item:not(:first-child):not(:last-child) .bb-form-control-container{border-radius:0!important}.bb-date-picker-item:first-child .bb-form-control-container{border-right:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}.bb-date-picker-item:last-child .bb-form-control-container{border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}.bb-date-picker-hint{display:block;color:#738694;font-size:13px;margin-top:4px;pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i8.Observable, decorators: [{
-                    type: Inject,
-                    args: [LOCALIZE_ID]
-                }] }], propDecorators: { label: [{
+                    }, animations: [
+                        trigger('bbFilePickerImageAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0 }),
+                                animate('200ms', style({ opacity: 1 }))
+                            ]),
+                            transition(':leave', [
+                                animate('200ms', style({ opacity: 0 }))
+                            ])
+                        ])
+                    ], preserveWhitespaces: false, imports: [BbTemplate, AsyncPipe, NgTemplateOutlet, BbLocalize, BbFormError, BbFileSize, BbFileImage], standalone: true, template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label [for]=\"labelId\"\n           class=\"bb-file-picker-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<!-- The input that can open the file picker. -->\n<input #fileInput\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-file-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\">\n\n@if (value$ | async; as data) {\n    <div class=\"bb-file-picker-wrapper\">\n        <!-- The button that accepts files. -->\n        <div class=\"bb-file-picker-container\">\n            <button [class.destructive]=\"!!data?.file\"\n                    [class.standalone]=\"!allowDragging\"\n                    [disabled]=\"disabled\"\n                    [id]=\"labelId\"\n                    (click)=\"onButtonPressed(data?.file)\"\n                    type=\"button\"\n                    class=\"bb-file-picker-button\">\n                <ng-container *ngTemplateOutlet=\"data?.file ? closeIcon : uploadIcon\"></ng-container>\n                {{ (data?.file ? 'file-picker.remove' : 'file-picker.choose') | bbLocalize }}\n            </button>\n            @if (allowDragging) {\n                <div class=\"bb-file-picker-zone\">\n                    {{ 'file-picker.drop' | bbLocalize }}\n                </div>\n            }\n        </div>\n\n        @if (!!extraTemplate) {\n            <ng-container *ngTemplateOutlet=\"extraTemplate; context: {$implicit: data?.file}\"></ng-container>\n        }\n\n        @if (showImages) {\n            @if (data?.file | bbFileImage | async; as image) {\n                <div class=\"bb-file-picker-image-container\">\n                    <div class=\"bb-file-picker-image-wrapper\">\n                        <div [@bbFilePickerImageAnimation]=\"true\"\n                             [style.padding-top.%]=\"image?.aspectRatio * 100\"\n                             [style.background-image]=\"image?.background\"\n                             class=\"bb-file-picker-image\">\n                        </div>\n                    </div>\n                </div>\n            }\n        }\n\n        <!-- Extra information of the file. -->\n        <div [class.visible]=\"!!data?.file\"\n             class=\"bb-file-picker-info\">\n            @if (data?.file?.name; as name) {\n                <span>{{ name }}</span>\n            }\n            @if (data?.file?.size; as size) {\n                <span>{{ size | bbFileSize }}</span>\n            }\n        </div>\n    </div>\n}\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-file-picker-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n\n<!-- Upload icon. -->\n<ng-template #uploadIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"1.5rem\"\n         height=\"1.5rem\"\n         viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\"\n              d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5a2.5 2.5 0 010-5H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"></path>\n        <path fill=\"none\" d=\"M0 0h24v24H0V0z\"></path>\n    </svg>\n</ng-template>\n\n<!-- Close icon. -->\n<ng-template #closeIcon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"bb-file-picker-icon\"\n         width=\"1.5rem\"\n         height=\"1.5rem\"\n         viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\"\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n    </svg>\n</ng-template>\n", styles: [".bb-file-picker{display:block}.bb-file-picker.full>.bb-file-picker-wrapper{width:100%}.bb-file-picker:not(.disabled) .bb-file-picker-button{background-color:#fff}.bb-file-picker:not(.disabled):focus>.bb-file-picker-wrapper,.bb-file-picker:not(.disabled).hovered>.bb-file-picker-wrapper{box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-file-picker-box-shadow)}.bb-file-picker.grouped{margin-bottom:1.5rem}.bb-file-picker.disabled>.bb-file-picker-wrapper{cursor:default;pointer-events:none;color:gray;background-color:#e6e6e6}.bb-file-picker.required>.bb-file-picker-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-file-picker.error>.bb-file-picker-label{color:#c23934}.bb-file-picker.error>.bb-file-picker-hint{display:none}.bb-file-picker.error>.bb-file-picker-wrapper{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3;box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-file-picker.error .bb-file-picker-button{background-color:transparent}.bb-file-picker-wrapper{max-width:100%;-webkit-user-select:none;user-select:none;display:inline-flex;border-radius:.5rem;flex-direction:column;background-color:#fff;border:1px solid hsl(213,8%,74%);transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-file-picker-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-file-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-file-picker-container{min-height:2.5rem;display:inline-flex}.bb-file-picker-button{margin:0;z-index:1;border:none;line-height:1;cursor:pointer;font-size:1rem;appearance:none;font-weight:400;padding:0 .75rem;align-items:center;white-space:nowrap;display:inline-flex;background-color:transparent;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;color:var(--bb-file-picker-color);border-right:1px solid hsl(213,8%,74%);transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-button:focus{box-shadow:var(--bb-file-picker-box-shadow)}.bb-file-picker-button:disabled{cursor:default}.bb-file-picker-button.destructive{color:#f55656}.bb-file-picker-button.standalone{width:100%;border-right:none;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.bb-file-picker-icon{margin-right:.25rem}.bb-file-picker-zone{flex:1;color:#758795;line-height:1.125;font-size:.875rem;align-items:center;display:inline-flex;padding:.5rem .75rem;justify-content:center}.bb-file-picker-info{height:0;color:#848f99;overflow:hidden;padding:0 .75rem;align-items:center;line-height:2.5rem;display:inline-flex;border-top:0 solid #b6bbc1;background-color:transparent;transition:height .2s cubic-bezier(0,0,.2,1)}.bb-file-picker-info.visible{height:2.5rem;border-top-width:1px}.bb-file-picker-info>span{opacity:.4;max-width:100%;overflow:hidden;font-size:.875rem;white-space:nowrap;text-overflow:ellipsis}.bb-file-picker-info>span:first-child{flex:1}.bb-file-picker-info>span:last-child{margin-left:.75rem}.bb-file-picker-image-container{overflow:hidden;border-top:1px solid hsl(213,8%,74%)}.bb-file-picker-image-wrapper{width:100%;max-width:40%;margin:1.5rem auto}.bb-file-picker-image{width:100%;display:flex;overflow:hidden;position:relative;will-change:opacity;border-radius:.5rem;background-size:cover;background-position:center;background-repeat:no-repeat}.bb-file-picker-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"] }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], extraTemplate: [{
+                type: ContentChild,
+                args: ['extra']
+            }], label: [{
                 type: Input
             }], hint: [{
                 type: Input
-            }], dayPlaceholder: [{
-                type: Input
-            }], monthPlaceholder: [{
+            }], accept: [{
                 type: Input
-            }], yearPlaceholder: [{
+            }], showImages: [{
                 type: Input
-            }], years: [{
+            }], allowDragging: [{
                 type: Input
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideErrors: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], onDrag: [{
+                type: HostListener,
+                args: ['dragover', ['$event', 'true']]
+            }, {
+                type: HostListener,
+                args: ['dragleave', ['$event', 'false']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
             }] } });
 
-class BbSuffix {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbSuffix, selector: "[bbSuffix]", host: { classAttribute: "bb-suffix" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbSuffix, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbSuffix]',
-                    host: {
-                        'class': 'bb-suffix'
-                    }
-                }]
-        }] });
-class BbPrefix {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbPrefix, selector: "[bbPrefix]", host: { classAttribute: "bb-prefix" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbPrefix, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bbPrefix]',
-                    host: {
-                        'class': 'bb-prefix'
-                    }
-                }]
-        }] });
-
-class BbFormGroupBase {
-}
-const BbFormGroupMixinBase = mixinGrouped(BbFormGroupBase);
-class BbFormGroup extends BbFormGroupMixinBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbFormGroup, selector: "bb-form-group", inputs: { grouped: "grouped" }, host: { properties: { "class.grouped": "grouped" }, classAttribute: "bb-form-group" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-form-group{width:100%;display:flex;flex-wrap:wrap;margin-top:-10px}.bb-form-group>*{margin-top:10px}.bb-form-group>*:not(:first-child){margin-left:10px}.bb-form-group.start{justify-content:flex-start}.bb-form-group.end{justify-content:flex-end}.bb-form-group.vertical{flex-direction:column;justify-content:normal}.bb-form-group.vertical>*{margin-left:0}.bb-form-group.vertical.start{align-items:flex-start}.bb-form-group.vertical.end{align-items:flex-end}.bb-form-group.grouped{margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbFormGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-form-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-form-group',
-                        '[class.grouped]': 'grouped'
-                    }, inputs: ['grouped'], preserveWhitespaces: false, template: "<ng-content></ng-content>\n", styles: [".bb-form-group{width:100%;display:flex;flex-wrap:wrap;margin-top:-10px}.bb-form-group>*{margin-top:10px}.bb-form-group>*:not(:first-child){margin-left:10px}.bb-form-group.start{justify-content:flex-start}.bb-form-group.end{justify-content:flex-end}.bb-form-group.vertical{flex-direction:column;justify-content:normal}.bb-form-group.vertical>*{margin-left:0}.bb-form-group.vertical.start{align-items:flex-start}.bb-form-group.vertical.end{align-items:flex-end}.bb-form-group.grouped{margin-bottom:20px}\n"] }]
-        }] });
-
-class BbRelativeTime {
-    constructor(_localeId, _localize) {
-        this._localeId = _localeId;
-        this._localize = _localize;
-        this.isValidDate = (date) => {
-            return typeof date === 'object' &&
-                typeof date.getTime === 'function' &&
-                !isNaN(date.getTime());
-        };
-        this.parseAsDate = (value) => {
-            // Add a Z after the date so
-            // it is treated as a UTC date.
-            if (typeof value === 'string' && /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}$/.test(value)) {
-                return new Date(`${value}Z`);
-            }
-            // Return the regular parsed date.
-            return new Date(value);
-        };
-        this.isToday = (date) => {
-            const today = new Date();
-            return date?.getDate() === today?.getDate() &&
-                date?.getMonth() === today?.getMonth() &&
-                date?.getFullYear() === today?.getFullYear();
-        };
-        this.isYesterday = (date) => {
-            const yesterday = new Date(new Date()?.setDate(new Date()?.getDate() - 1));
-            return date?.getDate() === yesterday?.getDate() &&
-                date?.getMonth() === yesterday?.getMonth() &&
-                date?.getFullYear() === yesterday?.getFullYear();
-        };
-        this.isTomorrow = (date) => {
-            const tomorrow = new Date(new Date()?.setDate(new Date()?.getDate() + 1));
-            return date?.getDate() === tomorrow?.getDate() &&
-                date?.getMonth() === tomorrow?.getMonth() &&
-                date?.getFullYear() === tomorrow?.getFullYear();
-        };
+class BbImagePicker {
+    constructor(_converter) {
+        this._converter = _converter;
+        // Inputs.
+        this.label = null;
+        this.placeholder = null;
+        this.styleDimensions = null;
+        this.cropDimensions = null;
+        this.disabled = false;
+        this.grouped = false;
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+        // Form.
+        this._value$ = new BehaviorSubject(null);
+        this.valueChange = new EventEmitter();
     }
-    transform(value) {
-        // Parse the value to a date object.
-        const date = this.parseAsDate(value);
-        // Check if the date is valid.
-        if (!this.isValidDate(date)) {
-            return value;
-        }
-        // Return the formatted date.
-        return this.format(date);
+    get value() {
+        return this._value$.getValue();
     }
-    format(date) {
-        // It happens tomorrow.
-        if (this.isTomorrow(date)) {
-            return this.formatString(date, 'times.tomorrow_at', 'shortTime');
+    set value(value) {
+        this._value$.next(value);
+        this.valueChange.emit(value);
+    }
+    get image() {
+        return this._value$.pipe(map(value => value || this.placeholder), map(value => value ? `url(${value})` : null));
+    }
+    async onFileChange(event) {
+        // Grab the file from the event.
+        const file = event.target.files[0];
+        // Check if the file exists.
+        if (!file || this.disabled) {
+            return;
         }
-        // It happened today.
-        if (this.isToday(date)) {
-            return this.formatString(date, 'times.today_at', 'shortTime');
+        try {
+            this.value = await this._converter.toDataUri(file, this.cropDimensions);
         }
-        // It happened yesterday.
-        if (this.isYesterday(date)) {
-            return this.formatString(date, 'times.yesterday_at', 'shortTime');
+        catch {
+            this.value = null;
         }
-        // Just return the date.
-        return this.formatString(date);
-    }
-    formatString(date, token, format) {
-        // Just return the parsed date.
-        if (!this._localize || !token || !format) {
-            return formatDate(date, 'mediumDate', this.locale);
+        this.onChangeCallback(this.value);
+        if (this.fileInput && this.fileInput.nativeElement) {
+            this.fileInput.nativeElement.value = '';
         }
-        // Return the translated formatting.
-        return this._localize.translate({
-            token: token,
-            data: { date: formatDate(date, format, this.locale) }
-        });
     }
-    get locale() {
-        return this._localize?.current?.locale ?? this._localeId;
+    openFilePicker() {
+        if (this.disabled) {
+            return;
+        }
+        // Execute a click on the file input.
+        this.fileInput
+            && this.fileInput.nativeElement
+            && this.fileInput.nativeElement.click
+            && this.fileInput.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbRelativeTime, deps: [{ token: LOCALE_ID }, { token: i1$2.Localize, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: BbRelativeTime, name: "bbRelativeTime" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbRelativeTime, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'bbRelativeTime'
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i1$2.Localize, decorators: [{
-                    type: Optional
-                }] }] });
-
-let nextUniqueId = 0;
-class BbCheckboxBase {
-}
-const BbCheckboxMixinBase = mixinDisabled(mixinGrouped(BbCheckboxBase));
-class BbCheckbox extends BbCheckboxMixinBase {
-    get checked() {
-        return this._checked;
-    }
-    set checked(value) {
-        this._checked = coerceBooleanProperty(value);
-        this._changeDetection.markForCheck();
-    }
-    constructor(_changeDetection) {
-        super();
-        this._changeDetection = _changeDetection;
-        // Data.
-        this.labelId = `bb-checkbox-${nextUniqueId++}`;
-        this._checked = false;
-        // Methods.
-        this.onChange = () => {
-        };
-        this.onTouched = () => {
-        };
+    writeValue(value) {
+        this.value = value;
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    registerOnChange(method) {
+        this.onChangeCallback = method;
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    registerOnTouched(method) {
+        this.onTouchedCallback = method;
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this._changeDetection.markForCheck();
-    }
-    writeValue(newValue) {
-        this.checked = newValue;
-    }
-    onInteractionEvent(event) {
-        // Stop the propagation to prevent it from bubbling up.
-        event.stopPropagation();
-    }
-    onInputClick(event) {
-        // Stop the propagation to prevent it from bubbling up.
-        event.stopPropagation();
-        // Toggle the value.
-        this.checked = !this.checked;
-        // Emit the change event.
-        this.onChange && this.onChange(this.checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCheckbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbCheckbox, selector: "bb-checkbox", inputs: { grouped: "grouped", disabled: "disabled", tabIndex: "tabIndex", checked: "checked" }, host: { properties: { "class.grouped": "grouped" }, classAttribute: "bb-checkbox" }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbCheckbox), multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<input [id]=\"labelId\"\n       [checked]=\"checked\"\n       [disabled]=\"disabled\"\n       (change)=\"onInteractionEvent($event)\"\n       (click)=\"onInputClick($event)\"\n       class=\"bb-checkbox-input\"\n       tabindex=\"-1\"\n       type=\"checkbox\">\n\n<label [for]=\"labelId\"\n       [attr.tabindex]=\"disabled ? -1 : (tabIndex || 0)\"\n       (keyup.space)=\"onInputClick($event)\"\n       class=\"bb-checkbox-label\">\n    <span>\n        <svg width=\"12px\"\n             height=\"10px\"\n             viewbox=\"0 0 12 10\">\n            <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </svg>\n    </span>\n    <span>\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [".bb-checkbox{display:block}.bb-checkbox+.bb-checkbox{margin-top:5px}.bb-checkbox.grouped{margin-bottom:20px}.bb-checkbox-input{display:none}.bb-checkbox-label{margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none}.bb-checkbox-label>span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.bb-checkbox-label>span:first-child{width:18px;height:18px;min-width:18px;min-height:18px;position:relative;border-radius:3px;vertical-align:middle;border:1px solid #bdc4c9;transition:all .2s ease}.bb-checkbox-label>span:last-child{padding-left:8px}.bb-checkbox-label>span:first-child>svg{top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;position:absolute;stroke-linecap:round;transition-delay:.1s;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transform:translateZ(0)}.bb-checkbox-input:not(:disabled):not(:checked)+.bb-checkbox-label:focus>span:first-child{box-shadow:0 0 0 3px #decdcd80}.bb-checkbox-input:not(:disabled):checked+.bb-checkbox-label:focus>span:first-child{box-shadow:0 0 0 3px #5b53ff80}.bb-checkbox-input:checked+.bb-checkbox-label>span:first-child{border-color:#5b53ff;background-color:#5b53ff}.bb-checkbox-input:checked+.bb-checkbox-label>span:first-child>svg{stroke-dashoffset:0}.bb-checkbox-input:disabled+.bb-checkbox-label{cursor:default;pointer-events:none}.bb-checkbox-input:disabled:checked+.bb-checkbox-label>span:first-child{border-color:#cccccca3;background-color:#cccccca3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbImagePicker, deps: [{ token: i1$1.ImageConverter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbImagePicker, isStandalone: true, selector: "bb-image-picker", inputs: { label: "label", placeholder: "placeholder", styleDimensions: "styleDimensions", cropDimensions: "cropDimensions", disabled: ["disabled", "disabled", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled", "class.grouped": "grouped" }, classAttribute: "bb-image-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BbImagePicker),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<!-- The input that can open the file picker. -->\n<input #fileInput\n       (change)=\"onFileChange($event)\"\n       class=\"bb-image-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       accept=\"image/*\">\n\n<span [style.width]=\"styleDimensions?.width || '100%'\"\n      [style.height]=\"styleDimensions?.height || '215px'\"\n      [style.background-image]=\"image | async\"\n      class=\"bb-image-input-image\">\n    </span>\n\n@if (label; as labelText) {\n    <button (click)=\"openFilePicker()\"\n            bb-button\n            class=\"bb-image-input-button\"\n            type=\"button\">\n        {{ labelText }}\n    </button>\n}\n", styles: [".bb-image-picker{display:flex;align-items:center;flex-direction:column}.bb-image-picker.circle>.bb-image-input-image{border-radius:50%}.bb-image-picker.grouped{margin-bottom:1.5rem}.bb-image-picker.disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-image-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-image-input-image{display:flex;cursor:default;position:relative;align-items:center;border-radius:.25rem;justify-content:center;background:#0003 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) center center/cover no-repeat}.bb-image-input-button{margin-top:.75rem}\n"], dependencies: [{ kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbImagePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbCheckbox), multi: true }
-                    ], host: {
-                        'class': 'bb-checkbox',
+            args: [{ selector: 'bb-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-image-picker',
+                        '[class.disabled]': 'disabled',
                         '[class.grouped]': 'grouped'
-                    }, inputs: ['grouped', 'disabled'], preserveWhitespaces: false, template: "<input [id]=\"labelId\"\n       [checked]=\"checked\"\n       [disabled]=\"disabled\"\n       (change)=\"onInteractionEvent($event)\"\n       (click)=\"onInputClick($event)\"\n       class=\"bb-checkbox-input\"\n       tabindex=\"-1\"\n       type=\"checkbox\">\n\n<label [for]=\"labelId\"\n       [attr.tabindex]=\"disabled ? -1 : (tabIndex || 0)\"\n       (keyup.space)=\"onInputClick($event)\"\n       class=\"bb-checkbox-label\">\n    <span>\n        <svg width=\"12px\"\n             height=\"10px\"\n             viewbox=\"0 0 12 10\">\n            <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </svg>\n    </span>\n    <span>\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [".bb-checkbox{display:block}.bb-checkbox+.bb-checkbox{margin-top:5px}.bb-checkbox.grouped{margin-bottom:20px}.bb-checkbox-input{display:none}.bb-checkbox-label{margin:0;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none}.bb-checkbox-label>span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.bb-checkbox-label>span:first-child{width:18px;height:18px;min-width:18px;min-height:18px;position:relative;border-radius:3px;vertical-align:middle;border:1px solid #bdc4c9;transition:all .2s ease}.bb-checkbox-label>span:last-child{padding-left:8px}.bb-checkbox-label>span:first-child>svg{top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;position:absolute;stroke-linecap:round;transition-delay:.1s;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transform:translateZ(0)}.bb-checkbox-input:not(:disabled):not(:checked)+.bb-checkbox-label:focus>span:first-child{box-shadow:0 0 0 3px #decdcd80}.bb-checkbox-input:not(:disabled):checked+.bb-checkbox-label:focus>span:first-child{box-shadow:0 0 0 3px #5b53ff80}.bb-checkbox-input:checked+.bb-checkbox-label>span:first-child{border-color:#5b53ff;background-color:#5b53ff}.bb-checkbox-input:checked+.bb-checkbox-label>span:first-child>svg{stroke-dashoffset:0}.bb-checkbox-input:disabled+.bb-checkbox-label{cursor:default;pointer-events:none}.bb-checkbox-input:disabled:checked+.bb-checkbox-label>span:first-child{border-color:#cccccca3;background-color:#cccccca3}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabIndex: [{
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BbImagePicker),
+                            multi: true
+                        }
+                    ], preserveWhitespaces: false, standalone: true, imports: [BbButton, AsyncPipe], template: "<!-- The input that can open the file picker. -->\n<input #fileInput\n       (change)=\"onFileChange($event)\"\n       class=\"bb-image-picker-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       accept=\"image/*\">\n\n<span [style.width]=\"styleDimensions?.width || '100%'\"\n      [style.height]=\"styleDimensions?.height || '215px'\"\n      [style.background-image]=\"image | async\"\n      class=\"bb-image-input-image\">\n    </span>\n\n@if (label; as labelText) {\n    <button (click)=\"openFilePicker()\"\n            bb-button\n            class=\"bb-image-input-button\"\n            type=\"button\">\n        {{ labelText }}\n    </button>\n}\n", styles: [".bb-image-picker{display:flex;align-items:center;flex-direction:column}.bb-image-picker.circle>.bb-image-input-image{border-radius:50%}.bb-image-picker.grouped{margin-bottom:1.5rem}.bb-image-picker.disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-image-picker-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-image-input-image{display:flex;cursor:default;position:relative;align-items:center;border-radius:.25rem;justify-content:center;background:#0003 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) center center/cover no-repeat}.bb-image-input-button{margin-top:.75rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ImageConverter }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], label: [{
                 type: Input
-            }], checked: [{
+            }], placeholder: [{
+                type: Input
+            }], styleDimensions: [{
+                type: Input
+            }], cropDimensions: [{
                 type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
-class BbAvatar {
-    constructor() {
+class BbDatePicker {
+    set disabled(value) {
+        this._disabled = value;
+        this._disabled ? this.form?.disable() : this.form?.enable();
+        this._changeDetectorRef.markForCheck();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set years(value) {
+        this.parseYears(value);
+    }
+    get value() {
+        return this.formToDateString(this.form?.value);
+    }
+    set value(value) {
+        this.parseDateStringInForm(value);
+        this.valueChange.emit(this.value);
+    }
+    constructor(_changeDetectorRef, _localizeId) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._localizeId = _localizeId;
+        // Readonly data.
+        this._yearRegex = /^(10|[1-9][0-9])\d{2}$/; // Note: 1000 - 9999
         // Inputs.
-        this.size = 40;
+        this.label = null;
+        this.hint = null;
+        this.dayPlaceholder = 'dd';
+        this.monthPlaceholder = 'mm';
+        this.yearPlaceholder = 'yyyy';
+        this.required = false;
+        this.grouped = false;
+        this.readonly = false;
+        this.hideErrors = false;
+        this.years$ = new BehaviorSubject(null);
+        this.valueChange = new EventEmitter();
         // State.
-        this.state$ = new BehaviorSubject('initials');
-        // Data.
-        this._src = null;
-        this._title = null;
-        this._initials = '!';
-        this._color = 'rgb(255, 255, 255)';
-        this._backgroundColor = 'rgb(66, 66, 66)';
-        this.toRgb = (value) => {
-            const baseRed = 128;
-            const baseGreen = 128;
-            const baseBlue = 128;
-            let seed = value.charCodeAt(0) ^ value.charCodeAt(1);
-            const rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
-            const rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
-            const rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;
-            const r = Math.round((rand_1 + baseRed) / 2);
-            const g = Math.round((rand_2 + baseGreen) / 2);
-            const b = Math.round((rand_3 + baseBlue) / 2);
-            return { r, g, b };
-        };
-        this.getInitials = (name) => {
-            // Get all the initials.
-            const names = (name ?? '').split(' ');
-            const initials = names
-                .map(name => name.charAt(0).toUpperCase())
-                .filter(name => /^[a-zA-Z]+$/.test(name));
-            // Check if there are any initials.
-            if (initials?.length <= 0) {
+        this.error = false;
+        this._disabled = false;
+        // Callbacks.
+        this.onTouchedCallback = () => ({});
+        this.onChangeCallback = () => ({});
+        // Subscriptions.
+        this._subscription = new Subscription();
+        this.formToDateString = ({ year, month, day }) => {
+            if (this.form?.invalid) {
                 return null;
             }
-            // Get the first and last initials.
-            if (initials?.length > 1) {
-                return `${initials?.[0]}${initials?.[initials?.length - 1]}`;
-            }
-            // Get only the first initial.
-            return initials?.[0];
+            const prefixedMonth = this.padString(`${month}`, 2, '0');
+            const prefixedDay = this.padString(`${day}`, 2, '0');
+            return [year, prefixedMonth, prefixedDay].join('-');
         };
-        this.parseColorFormat = (value) => {
-            if (!value) {
-                return null;
+        this.parseYearFormat = (value) => {
+            // Transform the value to a definitive string.
+            const yearString = `${value}`;
+            const currentFullYear = new Date().getFullYear();
+            // Handle default "current" syntax.
+            if (yearString === 'current') {
+                return currentFullYear;
             }
-            // Hex 3 values.
-            let match = value.match(/^#([0-9a-f]{3})$/i);
-            if (match && match[1]) {
-                const r = parseInt(match[1].charAt(0), 16) * 0x11;
-                const g = parseInt(match[1].charAt(1), 16) * 0x11;
-                const b = parseInt(match[1].charAt(2), 16) * 0x11;
-                return { r, g, b };
+            // Handle "current + {amount}" syntax.
+            if (/^current\s?\+\s?\d+$/.test(yearString)) {
+                const amount = Number(yearString?.split('+')?.[1]?.trim()) ?? 0;
+                return currentFullYear + amount;
             }
-            // Hex 6 values.
-            match = value.match(/^#([0-9a-f]{6})$/i);
-            if (match && match[1]) {
-                const r = parseInt(match[1].substring(0, 2), 16);
-                const g = parseInt(match[1].substring(2, 4), 16);
-                const b = parseInt(match[1].substring(4, 6), 16);
-                return { r, g, b };
+            // Handle "current - {amount}" syntax.
+            if (/^current\s?-\s?\d+$/.test(yearString)) {
+                const amount = Number(yearString?.split('-')?.[1]?.trim()) ?? 0;
+                return currentFullYear - amount;
             }
-            // Rgb values.
-            match = value.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-            if (match) {
-                const r = parseInt(match[1], 10);
-                const g = parseInt(match[2], 10);
-                const b = parseInt(match[3], 10);
-                return { r, g, b };
+            // Handling the default number case.
+            if (/^[0-9]{4}$/.test(yearString)) {
+                return Number(yearString);
             }
-            // Not a supported color format.
-            console?.warn?.(`BbAvatar: Unsupported tintColor "${value}" was used.`);
+            // We could not parse it.
             return null;
         };
+        this.getDaysInMonth = (month = null, year = null) => {
+            if (this.form?.invalid || month === null || year === null) {
+                return 31;
+            }
+            const parsedYear = parseInt(year, 10);
+            return new Date(parsedYear, month, 0).getDate();
+        };
+        this.isValidDateString = (value) => {
+            return typeof value === 'string' && /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value);
+        };
+        this.padString = (value, maxLength, fillString = '0') => {
+            const count = maxLength - value.length;
+            for (let index = 0; index < count; index++) {
+                value = `${fillString}${value}`;
+            }
+            return value;
+        };
     }
-    set src(value) {
-        this._src = value;
-        if (this._src) {
-            this.state$.next('image');
-        }
-    }
-    set title(value) {
-        // Set the title and the initials.
-        this._title = value ?? '!';
-        this._initials = this.getInitials(this._title);
-        // Generate the colors based on the name.
-        const { r, g, b } = this.toRgb(this._title);
-        this.setColors(r, g, b);
-    }
-    set tintColor(value) {
-        const result = this.parseColorFormat(value);
-        if (!result) {
-            return;
-        }
-        const { r, g, b } = result;
-        this.setColors(r, g, b);
+    ngOnInit() {
+        this.composeForm();
+        this.getData();
+        this.handleChanges();
     }
-    get src() {
-        return this._src;
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
     }
-    get color() {
-        return this._color;
+    writeValue(value) {
+        this.parseDateStringInForm(value);
     }
-    get backgroundColor() {
-        return this._backgroundColor;
+    registerOnChange(method) {
+        this.onChangeCallback = method;
     }
-    get title() {
-        return this._title;
+    registerOnTouched(method) {
+        this.onTouchedCallback = method;
     }
-    get initials() {
-        return this._initials;
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
-    setColors(red, green, blue) {
-        this._color = `rgb(${red},${green},${blue})`;
-        this._backgroundColor = `rgba(${red},${green},${blue}, 0.25)`;
+    onErrorChange(error) {
+        this.error = !!error;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbAvatar, selector: "bb-avatar", inputs: { size: "size", src: "src", title: "title", tintColor: "tintColor" }, host: { attributes: { "role": "img" }, properties: { "style.width.px": "size", "style.min-width.px": "size", "style.height.px": "size", "style.min-height.px": "size", "style.font-size.px": "size * 0.42", "style.color": "color", "style.background-color": "backgroundColor", "attr.title": "this.title" }, classAttribute: "bb-avatar" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"state$ | async\">\n    <!-- Image. -->\n    <ng-container *ngSwitchCase=\"'image'\">\n        <img [src]=\"src\"\n             [alt]=\"initials\"\n             (error)=\"state$?.next('initials')\"\n             class=\"bb-avatar-image\">\n    </ng-container>\n\n    <!-- Default initials fallback. -->\n    <ng-container *ngSwitchDefault>\n        {{ initials }}\n    </ng-container>\n</ng-container>\n", styles: [".bb-avatar{line-height:1;overflow:hidden;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;display:inline-flex;justify-content:center}.bb-avatar.rounded{border-radius:4px}.bb-avatar.square{border-radius:0}.bb-avatar-image{width:100%;height:100%;object-fit:cover;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbAvatar, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
-                        'class': 'bb-avatar',
-                        'role': 'img',
-                        '[style.width.px]': 'size',
-                        '[style.min-width.px]': 'size',
-                        '[style.height.px]': 'size',
-                        '[style.min-height.px]': 'size',
-                        '[style.font-size.px]': 'size * 0.42',
-                        '[style.color]': 'color',
-                        '[style.background-color]': 'backgroundColor'
-                    }, template: "<ng-container [ngSwitch]=\"state$ | async\">\n    <!-- Image. -->\n    <ng-container *ngSwitchCase=\"'image'\">\n        <img [src]=\"src\"\n             [alt]=\"initials\"\n             (error)=\"state$?.next('initials')\"\n             class=\"bb-avatar-image\">\n    </ng-container>\n\n    <!-- Default initials fallback. -->\n    <ng-container *ngSwitchDefault>\n        {{ initials }}\n    </ng-container>\n</ng-container>\n", styles: [".bb-avatar{line-height:1;overflow:hidden;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;display:inline-flex;justify-content:center}.bb-avatar.rounded{border-radius:4px}.bb-avatar.square{border-radius:0}.bb-avatar-image{width:100%;height:100%;object-fit:cover;position:absolute}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.title']
-            }], tintColor: [{
-                type: Input
-            }] } });
-
-class BbIcon {
-    set src(newValue) {
-        this.state$.next(this.convert(newValue));
-        this._src = newValue;
+    validate({ value }) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const data = this.parseDateString(value);
+        const date = new Date(data?.year, data?.month - 1, data?.day);
+        const maxDays = this.getDaysInMonth(data?.month, `${data?.year}`);
+        const isInvalidDate = date.toString() === 'Invalid Date';
+        const exceededMaxDays = data?.day > maxDays;
+        return (isInvalidDate || exceededMaxDays) && {
+            invalidDate: true
+        };
     }
-    get src() {
-        return this._src;
+    handleChanges() {
+        const dateOrNull$ = this.form.valueChanges.pipe(map(value => this.formToDateString(value)), distinctUntilChanged());
+        const subscription = dateOrNull$.subscribe(() => {
+            this.valueChange.emit(this.value);
+            this.onChangeCallback(this.value);
+        });
+        this._subscription.add(subscription);
     }
-    set ariaHidden(newValue) {
-        this._ariaHidden = coerceBooleanProperty(newValue);
+    getData() {
+        const years$ = this.years$.asObservable();
+        const months$ = this.getMonthData();
+        const days$ = this.getDayData();
+        this.data$ = combineLatest([years$, months$, days$]).pipe(map(([years, months, days]) => ({ years, months, days })), tap(data => this.verifyListData(data?.days?.length, data?.years)));
     }
-    get ariaHidden() {
-        return this._ariaHidden;
+    verifyListData(maxDays, years) {
+        const dayControl = this.form.get('day');
+        if (dayControl?.value !== null && dayControl?.value > maxDays) {
+            dayControl.patchValue(maxDays);
+        }
+        const yearControl = this.form.get('year');
+        if (years !== null && yearControl?.value !== null && this._yearRegex.test(yearControl?.value)) {
+            const selectedYear = Number(yearControl?.value);
+            const firstYear = Math.min(...years);
+            const lastYear = Math.max(...years);
+            if (selectedYear < firstYear || selectedYear > lastYear) {
+                Promise.resolve().then(() => yearControl.patchValue(null));
+            }
+        }
     }
-    constructor(_registry) {
-        this._registry = _registry;
-        // Data.
-        this._src = null;
-        // State.
-        this.state$ = new BehaviorSubject(null);
-        this.alt = null;
-        this.size = 24;
-        this._ariaHidden = true;
-        this.warn = (content) => {
-            return console && console.warn && console.warn(content);
-        };
+    getDayData() {
+        const count$ = this.form.valueChanges.pipe(startWith(this.form?.value), map(({ month, year }) => this.getDaysInMonth(month, year)), distinctUntilChanged());
+        return count$.pipe(map(count => Array(count).fill(0).map((_, index) => ({
+            label: `${index + 1}`,
+            value: index + 1
+        }))));
     }
-    convert(src) {
-        const [namespace, value] = (src || '').split(':');
-        const onError = () => {
-            this.warn(`ElementsModule: The icon with src "${src}" could not be rendered correctly; Did you put a correct src attribute?`);
-            return { type: 'unknown' };
-        };
-        if (!namespace || !value || !this._registry) {
-            return onError();
-        }
-        // Try to find a image icon.
-        const imageIcon = this.findImageIcon(namespace, value);
-        if (imageIcon) {
-            return imageIcon;
+    getMonthData() {
+        return this._localizeId.pipe(map(locale => {
+            return Array(12).fill(0).map((_, month) => {
+                const date = new Date(2000, month, 1);
+                const label = formatDate(date, 'LLLL', locale);
+                return { label, value: month + 1 };
+            });
+        }));
+    }
+    composeForm() {
+        const { required, pattern, minLength, maxLength } = Validators;
+        const yearPattern = pattern(this._yearRegex);
+        const yearValidators = [required, yearPattern, minLength(4), maxLength(4)];
+        this.form = new FormGroup({
+            day: new FormControl(null, required),
+            month: new FormControl(null, required),
+            year: new FormControl(null, yearValidators)
+        });
+        if (this.disabled) {
+            this.form?.disable();
         }
-        // Try to find a font icon.
-        const fontIcon = this.findFontIcon(namespace, value);
-        if (fontIcon) {
-            return fontIcon;
+    }
+    parseDateStringInForm(value) {
+        // If the date string was not a valid format, reset the form.
+        if (!this.isValidDateString(value)) {
+            if (value !== null) {
+                this.form?.reset({ year: null, month: null, day: null }, { emitEvent: false });
+            }
+            return;
         }
-        // Return the on error function.
-        return onError();
+        // Parse the date string and save in the form.
+        const data = this.parseDateString(value);
+        const year = data?.year !== null && data?.year !== undefined
+            ? this.padString(`${data?.year}`, 4, '0')
+            : null;
+        const formData = { ...(data ?? {}), year };
+        this.form?.patchValue(formData, { emitEvent: false });
     }
-    findImageIcon(namespace, value) {
-        const data = this._registry.find(item => item['namespace'] === namespace && item['name'] === value);
-        if (!data) {
+    parseDateString(value) {
+        if (!this.isValidDateString(value)) {
             return null;
         }
-        return { type: data['type'], src: data['src'] };
+        // Parse the date string.
+        const [year, month, day] = value?.split('-');
+        return {
+            day: day ? parseInt(day, 10) : null,
+            month: month ? parseInt(month, 10) : null,
+            year: year ? parseInt(year, 10) : null
+        };
     }
-    findFontIcon(namespace, content) {
-        const data = this._registry.find(item => item['namespace'] === namespace);
-        if (!data) {
-            return null;
+    parseYears(values) {
+        if (!values) {
+            return this.years$.next(null);
         }
-        const uses = data['uses'];
-        if (uses === 'data-attribute') {
-            return { type: data['type'], className: data['className'], attribute: content };
+        // Parse the values to years (in numbers).
+        const [first, last] = values;
+        const firstYear = this.parseYearFormat(first);
+        const lastYear = this.parseYearFormat(last);
+        // Check cases in where we cannot parse.
+        if (firstYear === null || lastYear === null) {
+            return this.years$.next(null);
         }
-        return { type: data['type'], className: data['className'], content };
+        const difference = firstYear - lastYear;
+        const absoluteDifference = Math.abs(difference) + 1;
+        // Create an array with years.
+        const years = Array(absoluteDifference)
+            .fill(0)
+            .map((_, index) => difference < 0 ? (firstYear + index) : (firstYear - index));
+        // Validate we have one or more years.
+        if (years?.length <= 0) {
+            return this.years$.next(null);
+        }
+        // Push the years.
+        return this.years$.next(years);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbIcon, deps: [{ token: ELEMENTS_ICONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbIcon, selector: "bb-icon", inputs: { alt: "alt", size: "size", src: "src", ariaHidden: "ariaHidden" }, host: { properties: { "attr.aria-hidden": "ariaHidden", "style.width.px": "size", "style.height.px": "size", "style.min-width.px": "size", "style.min-height.px": "size", "style.font-size.px": "size" }, classAttribute: "bb-icon" }, ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as data\"\n              [ngSwitch]=\"data?.type\">\n    <i *ngSwitchCase=\"'font'\"\n       [attr.data-icon]=\"data?.attribute\"\n       [class]=\"data?.className\">\n        {{ data?.content }}\n    </i>\n    <img *ngSwitchCase=\"'image'\"\n         [src]=\"data?.src\"\n         [alt]=\"alt\">\n    <svg *ngSwitchCase=\"'unknown'\"\n         viewBox=\"0 0 1 1\">\n        <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"#c5c5c5\"></rect>\n    </svg>\n</ng-container>\n", styles: [".bb-icon{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.bb-icon>i{font-size:inherit}.bb-icon>img,.bb-icon>svg{width:100%;height:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDatePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: LOCALIZE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbDatePicker, isStandalone: true, selector: "bb-date-picker", inputs: { label: "label", hint: "hint", dayPlaceholder: "dayPlaceholder", monthPlaceholder: "monthPlaceholder", yearPlaceholder: "yearPlaceholder", required: ["required", "required", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], years: "years", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.required": "required", "class.readonly": "readonly", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-date-picker" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbDatePicker), multi: true },
+            { provide: NG_VALIDATORS, useExisting: BbDatePicker, multi: true }
+        ], ngImport: i0, template: "<!-- Label of the date picker. -->\n@if (label; as labelContent) {\n    <label class=\"bb-date-picker-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n@if (data$ | async; as data) {\n    <!-- The form containing the year/month/day fields. -->\n    <div [formGroup]=\"form\"\n         class=\"bb-date-picker-container\">\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                <select [class.has-value]=\"!!form?.get('day')?.value\"\n                        bbInput\n                        autocomplete=\"off\"\n                        formControlName=\"day\">\n                    <option [ngValue]=\"null\">{{ dayPlaceholder }}</option>\n                    @for (day of data?.days; track day?.value) {\n                        <option [ngValue]=\"day?.value\">{{ day?.label }}</option>\n                    }\n                </select>\n            </bb-form-control>\n        </div>\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                <select [class.has-value]=\"!!form?.get('month')?.value\"\n                        bbInput\n                        autocomplete=\"off\"\n                        formControlName=\"month\">\n                    <option [ngValue]=\"null\">{{ monthPlaceholder }}</option>\n                    @for (month of data?.months; track month?.value) {\n                        <option [ngValue]=\"month?.value\">{{ month?.label }}</option>\n                    }\n                </select>\n            </bb-form-control>\n        </div>\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                @if (data?.years?.length > 0) {\n                    <select [class.has-value]=\"!!form?.get('year')?.value\"\n                            bbInput\n                            autocomplete=\"off\"\n                            formControlName=\"year\">\n                        <option [ngValue]=\"null\">{{ yearPlaceholder }}</option>\n                        @for (year of data?.years; track year) {\n                            <option [ngValue]=\"year\">{{ year }}</option>\n                        }\n                    </select>\n                } @else {\n                    <input [placeholder]=\"yearPlaceholder\"\n                           bbInput\n                           type=\"text\"\n                           inputmode=\"numeric\"\n                           minlength=\"4\"\n                           maxlength=\"4\"\n                           pattern=\"^[0-9]{4}$\"\n                           formControlName=\"year\"\n                           autocomplete=\"off\">\n                }\n            </bb-form-control>\n        </div>\n    </div>\n}\n\n<!-- The date picker error. -->\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n<!-- The date picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-date-picker-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-date-picker{display:block}.bb-date-picker.required>.bb-date-picker-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-date-picker.readonly{pointer-events:none}.bb-date-picker.readonly>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container{cursor:default;border-style:dotted;border-color:#bdc4c9}.bb-date-picker.readonly>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:disabled{opacity:1}.bb-date-picker.grouped{margin-bottom:1.5rem}.bb-date-picker.error>.bb-date-picker-label{color:#c23934}.bb-date-picker.error>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container{border-color:#841515;background-color:#f8d3d3}.bb-date-picker.error>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-date-picker-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-date-picker-container{display:flex}.bb-date-picker-item{flex:1}.bb-date-picker-item>.bb-form-control>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){z-index:1;position:relative}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select>option:first-child{color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value){color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value)>option:not(:first-child){color:#111}.bb-date-picker-item:not(:first-child):not(:last-child){margin:0 -1px}.bb-date-picker-item:not(:first-child):not(:last-child)>.bb-form-control>.bb-form-control-container{border-radius:0}.bb-date-picker-item:first-child>.bb-form-control>.bb-form-control-container{border-top-right-radius:0;border-bottom-right-radius:0}.bb-date-picker-item:last-child>.bb-form-control>.bb-form-control-container{border-top-left-radius:0;border-bottom-left-radius:0}.bb-date-picker-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"], dependencies: [{ kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: BbFormControl, selector: "bb-form-control", inputs: ["label", "hint", "grouped", "hideErrors"] }, { kind: "directive", type: BbInput, selector: "input[bbInput],textarea[bbInput],select[bbInput]", inputs: ["required"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-icon',
-                        '[attr.aria-hidden]': 'ariaHidden',
-                        '[style.width.px]': 'size',
-                        '[style.height.px]': 'size',
-                        '[style.min-width.px]': 'size',
-                        '[style.min-height.px]': 'size',
-                        '[style.font-size.px]': 'size'
-                    }, preserveWhitespaces: false, template: "<ng-container *ngIf=\"state$ | async as data\"\n              [ngSwitch]=\"data?.type\">\n    <i *ngSwitchCase=\"'font'\"\n       [attr.data-icon]=\"data?.attribute\"\n       [class]=\"data?.className\">\n        {{ data?.content }}\n    </i>\n    <img *ngSwitchCase=\"'image'\"\n         [src]=\"data?.src\"\n         [alt]=\"alt\">\n    <svg *ngSwitchCase=\"'unknown'\"\n         viewBox=\"0 0 1 1\">\n        <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"#c5c5c5\"></rect>\n    </svg>\n</ng-container>\n", styles: [".bb-icon{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.bb-icon>i{font-size:inherit}.bb-icon>img,.bb-icon>svg{width:100%;height:100%;display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
+            args: [{ selector: 'bb-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbDatePicker), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: BbDatePicker, multi: true }
+                    ], host: {
+                        'class': 'bb-date-picker',
+                        '[class.required]': 'required',
+                        '[class.readonly]': 'readonly',
+                        '[class.disabled]': 'disabled',
+                        '[class.grouped]': 'grouped',
+                        '[class.error]': 'error'
+                    }, preserveWhitespaces: false, imports: [
+                        BbTemplate,
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        BbFormControl,
+                        BbInput,
+                        BbFormError
+                    ], standalone: true, template: "<!-- Label of the date picker. -->\n@if (label; as labelContent) {\n    <label class=\"bb-date-picker-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n@if (data$ | async; as data) {\n    <!-- The form containing the year/month/day fields. -->\n    <div [formGroup]=\"form\"\n         class=\"bb-date-picker-container\">\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                <select [class.has-value]=\"!!form?.get('day')?.value\"\n                        bbInput\n                        autocomplete=\"off\"\n                        formControlName=\"day\">\n                    <option [ngValue]=\"null\">{{ dayPlaceholder }}</option>\n                    @for (day of data?.days; track day?.value) {\n                        <option [ngValue]=\"day?.value\">{{ day?.label }}</option>\n                    }\n                </select>\n            </bb-form-control>\n        </div>\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                <select [class.has-value]=\"!!form?.get('month')?.value\"\n                        bbInput\n                        autocomplete=\"off\"\n                        formControlName=\"month\">\n                    <option [ngValue]=\"null\">{{ monthPlaceholder }}</option>\n                    @for (month of data?.months; track month?.value) {\n                        <option [ngValue]=\"month?.value\">{{ month?.label }}</option>\n                    }\n                </select>\n            </bb-form-control>\n        </div>\n        <div class=\"bb-date-picker-item\">\n            <bb-form-control hideErrors>\n                @if (data?.years?.length > 0) {\n                    <select [class.has-value]=\"!!form?.get('year')?.value\"\n                            bbInput\n                            autocomplete=\"off\"\n                            formControlName=\"year\">\n                        <option [ngValue]=\"null\">{{ yearPlaceholder }}</option>\n                        @for (year of data?.years; track year) {\n                            <option [ngValue]=\"year\">{{ year }}</option>\n                        }\n                    </select>\n                } @else {\n                    <input [placeholder]=\"yearPlaceholder\"\n                           bbInput\n                           type=\"text\"\n                           inputmode=\"numeric\"\n                           minlength=\"4\"\n                           maxlength=\"4\"\n                           pattern=\"^[0-9]{4}$\"\n                           formControlName=\"year\"\n                           autocomplete=\"off\">\n                }\n            </bb-form-control>\n        </div>\n    </div>\n}\n\n<!-- The date picker error. -->\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n<!-- The date picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-date-picker-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-date-picker{display:block}.bb-date-picker.required>.bb-date-picker-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-date-picker.readonly{pointer-events:none}.bb-date-picker.readonly>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container{cursor:default;border-style:dotted;border-color:#bdc4c9}.bb-date-picker.readonly>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:disabled{opacity:1}.bb-date-picker.grouped{margin-bottom:1.5rem}.bb-date-picker.error>.bb-date-picker-label{color:#c23934}.bb-date-picker.error>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container{border-color:#841515;background-color:#f8d3d3}.bb-date-picker.error>.bb-date-picker-container>.bb-date-picker-item>.bb-form-control>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-date-picker-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color, #525252);font-weight:var(--bb-form-label-font-weight, 400);font-size:var(--bb-form-label-font-size, .875rem)}.bb-date-picker-container{display:flex}.bb-date-picker-item{flex:1}.bb-date-picker-item>.bb-form-control>.bb-form-control-container:has(input:not(:disabled):not(:read-only):focus,select:not(:disabled):focus){z-index:1;position:relative}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select>option:first-child{color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value){color:#d2d2d2}.bb-date-picker-item>.bb-form-control>.bb-form-control-container>select:not(.has-value)>option:not(:first-child){color:#111}.bb-date-picker-item:not(:first-child):not(:last-child){margin:0 -1px}.bb-date-picker-item:not(:first-child):not(:last-child)>.bb-form-control>.bb-form-control-container{border-radius:0}.bb-date-picker-item:first-child>.bb-form-control>.bb-form-control-container{border-top-right-radius:0;border-bottom-right-radius:0}.bb-date-picker-item:last-child>.bb-form-control>.bb-form-control-container{border-top-left-radius:0;border-bottom-left-radius:0}.bb-date-picker-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.Observable, decorators: [{
                     type: Inject,
-                    args: [ELEMENTS_ICONS]
-                }] }], propDecorators: { alt: [{
+                    args: [LOCALIZE_ID]
+                }] }], propDecorators: { label: [{
                 type: Input
-            }], size: [{
+            }], hint: [{
                 type: Input
-            }], src: [{
+            }], dayPlaceholder: [{
                 type: Input
-            }], ariaHidden: [{
+            }], monthPlaceholder: [{
+                type: Input
+            }], yearPlaceholder: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideErrors: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], years: [{
+                type: Input
+            }], value: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
-class BbTag {
-    constructor() {
-        // Outputs.
-        this.onClose = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbTag, selector: "bb-tag", outputs: { onClose: "onClose" }, host: { classAttribute: "bb-tag" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<button *ngIf=\"onClose?.observed\"\n        (click)=\"onClose.emit()\"\n        type=\"button\">\n    Close\n</button>", styles: [".bb-tag{cursor:default;padding:0 7px;font-size:12px;list-style:none;line-height:20px;border-radius:4px;white-space:nowrap;display:inline-block;color:#000000a6;border:1px solid #d9d9d9;background-color:#fafafa;font-variant:tabular-nums;font-feature-settings:\"tnum\"}.bb-tag:not(:last-child){margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+function provideElementsConfig() {
+    return makeEnvironmentProviders([
+        { provide: ELEMENTS_ERRORS, useFactory: getErrors, multi: true },
+        ELEMENTS_MATERIAL_ICON
+    ]);
+}
+const ELEMENTS_MATERIAL_ICON = {
+    provide: ELEMENTS_ICONS,
+    useValue: { namespace: 'material', className: 'material-icons', uses: 'content', type: 'font' },
+    multi: true
+};
+function getErrors() {
+    const data = {
+        unknown: () => 'form-control-errors.unknown',
+        required: () => 'form-control-errors.required',
+        pattern: () => 'form-control-errors.pattern',
+        email: () => 'form-control-errors.email',
+        emailTaken: () => 'form-control-errors.emailTaken',
+        passwordMatch: () => 'form-control-errors.passwordMatch',
+        confirm: () => 'form-control-errors.confirm',
+        fullNumber: () => 'form-control-errors.fullNumber',
+        min: ({ min }) => ({ token: 'form-control-errors.min', data: { min } }),
+        max: ({ max }) => ({ token: 'form-control-errors.max', data: { max } }),
+        maxFileSize: ({ maxSize }) => ({ token: 'form-control-errors.maxFileSize', data: { maxSize } }),
+        minDate: ({ date }) => ({ token: 'form-control-errors.minDate', data: { date } }),
+        maxDate: ({ date }) => ({ token: 'form-control-errors.maxDate', data: { date } }),
+        invalidDate: () => 'form-control-errors.invalidDate',
+        invalidFileType: () => 'form-control-errors.invalidFileType',
+        minlength: ({ requiredLength, actualLength }) => ({
+            token: 'form-control-errors.minlength',
+            data: { requiredLength, actualLength }
+        }),
+        maxlength: ({ requiredLength, actualLength }) => ({
+            token: 'form-control-errors.maxlength',
+            data: { requiredLength, actualLength }
+        })
+    };
+    return data;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbTag, decorators: [{
-            type: Component,
-            args: [{ selector: 'bb-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-tag' }, template: "<ng-content></ng-content>\n\n<button *ngIf=\"onClose?.observed\"\n        (click)=\"onClose.emit()\"\n        type=\"button\">\n    Close\n</button>", styles: [".bb-tag{cursor:default;padding:0 7px;font-size:12px;list-style:none;line-height:20px;border-radius:4px;white-space:nowrap;display:inline-block;color:#000000a6;border:1px solid #d9d9d9;background-color:#fafafa;font-variant:tabular-nums;font-feature-settings:\"tnum\"}.bb-tag:not(:last-child){margin-right:8px}\n"] }]
-        }], propDecorators: { onClose: [{
-                type: Output
-            }] } });
 
-const DECLARATIONS_EXPORTS = [
+const IMPORTS_EXPORTS = [
     // Directives.
     BbFormError,
     BbFormSubmit,
     BbFormSubmitter,
     BbInput,
-    BbSelect,
     BbPrefix,
     BbSuffix,
+    BbImageUpload,
+    BbExtraErrorControls,
     // Pipes.
     BbFileSize,
     BbFileImage,
     BbRelativeTime,
+    BbDate,
     // Components.
     BbButton,
     BbAnchor,
@@ -1701,10 +2151,11 @@ const DECLARATIONS_EXPORTS = [
     BbFormControl,
     BbFormGroup,
     BbCheckbox,
-    BbDropdown,
-    BbDropdownItem,
-    BbTag,
+    BbCheckboxGroup,
+    BbRadioGroup,
+    BbRadioButton,
     BbAvatar,
+    BbMultiFileControl,
     BbFilePicker,
     BbImagePicker,
     BbDatePicker
@@ -1714,25 +2165,26 @@ class ElementsModule {
         return {
             ngModule: ElementsModule,
             providers: [
-                { provide: ELEMENTS_ERRORS, useFactory: getErrors, multi: true },
-                ELEMENTS_MATERIAL_ICON
+                provideElementsConfig()
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: ElementsModule, declarations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: ElementsModule, imports: [
             // Directives.
             BbFormError,
             BbFormSubmit,
             BbFormSubmitter,
             BbInput,
-            BbSelect,
             BbPrefix,
             BbSuffix,
+            BbImageUpload,
+            BbExtraErrorControls,
             // Pipes.
             BbFileSize,
             BbFileImage,
             BbRelativeTime,
+            BbDate,
             // Components.
             BbButton,
             BbAnchor,
@@ -1741,28 +2193,28 @@ class ElementsModule {
             BbFormControl,
             BbFormGroup,
             BbCheckbox,
-            BbDropdown,
-            BbDropdownItem,
-            BbTag,
+            BbCheckboxGroup,
+            BbRadioGroup,
+            BbRadioButton,
             BbAvatar,
+            BbMultiFileControl,
             BbFilePicker,
             BbImagePicker,
-            BbDatePicker], imports: [CommonModule,
-            ReactiveFormsModule,
-            LocalizeModule,
-            UtilsModule], exports: [
+            BbDatePicker], exports: [
             // Directives.
             BbFormError,
             BbFormSubmit,
             BbFormSubmitter,
             BbInput,
-            BbSelect,
             BbPrefix,
             BbSuffix,
+            BbImageUpload,
+            BbExtraErrorControls,
             // Pipes.
             BbFileSize,
             BbFileImage,
             BbRelativeTime,
+            BbDate,
             // Components.
             BbButton,
             BbAnchor,
@@ -1771,68 +2223,28 @@ class ElementsModule {
             BbFormControl,
             BbFormGroup,
             BbCheckbox,
-            BbDropdown,
-            BbDropdownItem,
-            BbTag,
+            BbCheckboxGroup,
+            BbRadioGroup,
+            BbRadioButton,
             BbAvatar,
+            BbMultiFileControl,
             BbFilePicker,
             BbImagePicker,
-            BbDatePicker, UtilsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ElementsModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            LocalizeModule,
-            UtilsModule, UtilsModule] }); }
+            BbDatePicker] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ElementsModule, imports: [BbMultiFileControl,
+            BbDatePicker] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ElementsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ElementsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        LocalizeModule,
-                        UtilsModule
-                    ],
-                    declarations: [...DECLARATIONS_EXPORTS],
-                    exports: [...DECLARATIONS_EXPORTS, UtilsModule]
+                    imports: [...IMPORTS_EXPORTS],
+                    exports: [...IMPORTS_EXPORTS]
                 }]
         }] });
-const ELEMENTS_MATERIAL_ICON = {
-    provide: ELEMENTS_ICONS,
-    useValue: { namespace: 'material', className: 'material-icons', uses: 'content', type: 'font' },
-    multi: true
-};
-function getErrors() {
-    const data = {
-        unknown: () => 'form-control-errors.unknown',
-        required: () => 'form-control-errors.required',
-        pattern: () => 'form-control-errors.pattern',
-        email: () => 'form-control-errors.email',
-        emailTaken: () => 'form-control-errors.emailTaken',
-        passwordMatch: () => 'form-control-errors.passwordMatch',
-        confirm: () => 'form-control-errors.confirm',
-        fullNumber: () => 'form-control-errors.fullNumber',
-        min: ({ min }) => ({ token: 'form-control-errors.min', data: { min } }),
-        max: ({ max }) => ({ token: 'form-control-errors.max', data: { max } }),
-        maxFileSize: ({ maxSize }) => ({ token: 'form-control-errors.maxFileSize', data: { maxSize } }),
-        minDate: ({ date }) => ({ token: 'form-control-errors.minDate', data: { date } }),
-        maxDate: ({ date }) => ({ token: 'form-control-errors.maxDate', data: { date } }),
-        invalidDate: () => 'form-control-errors.invalidDate',
-        invalidFileType: () => 'form-control-errors.invalidFileType',
-        minlength: ({ requiredLength, actualLength }) => ({
-            token: 'form-control-errors.minlength',
-            data: { requiredLength, actualLength }
-        }),
-        maxlength: ({ requiredLength, actualLength }) => ({
-            token: 'form-control-errors.maxlength',
-            data: { requiredLength, actualLength }
-        })
-    };
-    return data;
-}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BbAnchor, BbAvatar, BbButton, BbCheckbox, BbDatePicker, BbDropdown, BbDropdownItem, BbFileImage, BbFilePicker, BbFileSize, BbFormControl, BbFormError, BbFormGroup, BbFormSubmit, BbFormSubmitter, BbIcon, BbImagePicker, BbInput, BbPrefix, BbRelativeTime, BbSelect, BbSpinner, BbSuffix, BbTag, ELEMENTS_ERRORS, ELEMENTS_ICONS, ELEMENTS_MATERIAL_ICON, ElementsModule, getErrors };
+export { BbAnchor, BbAvatar, BbButton, BbCheckbox, BbCheckboxGroup, BbDate, BbDatePicker, BbExtraErrorControls, BbFileImage, BbFilePicker, BbFileSize, BbFormControl, BbFormError, BbFormGroup, BbFormSubmit, BbFormSubmitter, BbIcon, BbImagePicker, BbImageUpload, BbInput, BbMultiFileControl, BbPrefix, BbRadioButton, BbRadioGroup, BbRelativeTime, BbSpinner, BbSuffix, ELEMENTS_ERRORS, ELEMENTS_ICONS, ELEMENTS_MATERIAL_ICON, ElementsModule, getErrors, provideElementsConfig };
 //# sourceMappingURL=bravobit-bb-foundation-elements.mjs.map