@bravobit/bb-foundation 0.42.4 → 0.42.7

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

@@ -105,10 +105,10 @@ class BbInputMask {
     }
     // Required so that the template type checker can infer the type of the coerced inputs.
     static ngAcceptInputType_bbInputMask;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbInputMask, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbInputMask, isStandalone: true, selector: "input[bbInputMask],input[bbCurrencyMask],input[bbDateMask]", inputs: { mask: ["bbInputMask", "mask"] }, host: { listeners: { "input": "onInput($event.target.value)", "blur": "onTouched($event.target.value)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbInputMask, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbInputMask, isStandalone: true, selector: "input[bbInputMask],input[bbCurrencyMask],input[bbDateMask]", inputs: { mask: ["bbInputMask", "mask"] }, host: { listeners: { "input": "onInput($event.target.value)", "blur": "onTouched($event.target.value)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbInputMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbInputMask, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[bbInputMask],input[bbCurrencyMask],input[bbDateMask]',
@@ -216,10 +216,10 @@ class Masking {
                 return ['yyyy', 'MM', 'dd'];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Masking, deps: [{ token: i1$1.Localize, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Masking, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Masking, deps: [{ token: i1$1.Localize, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Masking, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Masking, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Masking, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -246,10 +246,10 @@ class BbCurrencyMask {
     // Required so that the template type checker can infer the type of the coerced inputs.
     static ngAcceptInputType_bbCurrencyMask;
     static ngAcceptInputType_bbCurrencyMaskOptions;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbCurrencyMask, deps: [{ token: Masking }, { token: BbInputMask, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbCurrencyMask, isStandalone: true, selector: "input[bbCurrencyMask]", inputs: { currencyCode: ["bbCurrencyMask", "currencyCode"], options: ["bbCurrencyMaskOptions", "options"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbCurrencyMask, deps: [{ token: Masking }, { token: BbInputMask, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbCurrencyMask, isStandalone: true, selector: "input[bbCurrencyMask]", inputs: { currencyCode: ["bbCurrencyMask", "currencyCode"], options: ["bbCurrencyMaskOptions", "options"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbCurrencyMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbCurrencyMask, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[bbCurrencyMask]',
@@ -283,10 +283,10 @@ class BbDateMask {
     // Required so that the template type checker can infer the type of the coerced inputs.
     static ngAcceptInputType_bbDateMask;
     static ngAcceptInputType_bbDateMaskSeparator;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbDateMask, deps: [{ token: Masking }, { token: BbInputMask, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbDateMask, isStandalone: true, selector: "input[bbDateMask]", inputs: { format: ["bbDateMask", "format"], separator: ["bbDateMaskSeparator", "separator"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbDateMask, deps: [{ token: Masking }, { token: BbInputMask, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbDateMask, isStandalone: true, selector: "input[bbDateMask]", inputs: { format: ["bbDateMask", "format"], separator: ["bbDateMaskSeparator", "separator"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbDateMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbDateMask, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[bbDateMask]',
@@ -303,15 +303,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }] } });
 
 class MaskingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MaskingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MaskingModule, imports: [BbInputMask,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MaskingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MaskingModule, imports: [BbInputMask,
             BbCurrencyMask,
             BbDateMask], exports: [BbInputMask,
             BbCurrencyMask,
             BbDateMask] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MaskingModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MaskingModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MaskingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MaskingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -127,10 +127,10 @@ class BbNotificationsItem {
         }
         return window.setTimeout(method, timeout);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbNotificationsItem, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BbNotificationsItem, isStandalone: true, selector: "bb-notifications-item", inputs: { notification: "notification", dismissButtonText: "dismissButtonText" }, host: { attributes: { "role": "alert" }, properties: { "class": "this.getClass" } }, viewQueries: [{ propertyName: "progressElementRef", first: true, predicate: ["progress"], descendants: true }], ngImport: i0, template: "<div class=\"notification-content-wrapper\">\n    <!--\n        The icon for the notification.\n\n        The icon is reflected by the type of the\n        notification. Same goes for the color and\n        background-color.\n    -->\n    <div [style.color]=\"notification?.color\"\n         [style.background-color]=\"notification?.backgroundColor\"\n         class=\"notification-icon-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 16 19.5\"\n             class=\"notification-icon\">\n            <path\n                d=\"M8 19.5c1.1 0 2-.9 2-2H6c0 1.1.9 2 2 2zM14 13.5v-5c0-3.1-1.6-5.6-4.5-6.3v-.7C9.5.7 8.8 0 8 0S6.5.7 6.5 1.5v.7C3.6 2.9 2 5.4 2 8.5v5l-2 2v1h16v-1l-2-2z\">\n            </path>\n        </svg>\n\n        <!--\n            The circular progress for the notification.\n\n            The progress is only visible when a timeout is\n            set. The progress adapts to the time remaining\n            for the notification.\n        -->\n        @if (notification?.timeout > 0) {\n            <svg class=\"notification-progress-ring\"\n                 viewBox=\"0 0 40 40\"\n                 role=\"progressbar\">\n                <circle #progress\n                        [attr.stroke-dasharray]=\"progressStrokeArray\"\n                        [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n                        [style.stroke]=\"notification?.color\"\n                        class=\"notification-progress-circle\"\n                        stroke-width=\"2\"\n                        fill=\"transparent\"\n                        r=\"19\"\n                        cx=\"20\"\n                        cy=\"20\">\n                </circle>\n            </svg>\n        }\n    </div>\n\n    <!--\n        The content for the notification.\n\n        This displays a string or a template based\n        on the given parameter by the user.\n    -->\n    <div class=\"notification-content\">\n        @if (isContentString) {\n            @switch (notification?.localize) {\n                @case (true) {\n                    {{ $any(notification?.content) | bbLocalize:{data: notification?.data} }}\n                }\n                @default {\n                    {{ notification?.content }}\n                }\n            }\n        } @else {\n            <ng-container *ngTemplateOutlet=\"$any(notification?.content)\"></ng-container>\n        }\n    </div>\n</div>\n\n<!--\n    The actions of the notification.\n\n    All actions are displayed here and are\n    based on the actions array the user provided.\n-->\n@if (notification?.actions?.length > 0 || notification?.dismiss) {\n    <div class=\"notification-actions\">\n        @for (action of notification?.actions; track $index) {\n            <button [class.destructive]=\"action?.type === 'cancel'\"\n                    (click)=\"callActionAndDestroy(notification, action)\"\n                    type=\"button\"\n                    class=\"notification-actions-button\">\n                <span class=\"notification-actions-button-highlight\">\n                    @if (notification?.localize) {\n                        {{ action?.title | bbLocalize:{data: notification?.data} }}\n                    } @else {\n                        {{ action?.title }}\n                    }\n                </span>\n            </button>\n        }\n        @if (notification?.dismiss) {\n            <button (click)=\"notification?.destroy()\"\n                    class=\"notification-actions-button destructive\"\n                    type=\"button\">\n                <span\n                    class=\"notification-actions-button-highlight\">{{ notification?.dismissText || dismissButtonText }}</span>\n            </button>\n        }\n    </div>\n}\n", styles: [".bb-notifications-item{display:flex;border-radius:.25rem;flex-direction:column;background-color:#fff;border:1px solid #d6dbe0}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{display:flex;padding:1.5rem;align-items:center}.notification-icon-wrapper{width:2.5rem;display:flex;height:2.5rem;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:.75rem;fill:currentColor}.notification-content{flex:1;line-height:1.5;font-weight:500;font-size:.875rem;margin-left:1.5rem;color:#000000d9}.notification-content i{font-style:italic}.notification-content,.notification-actions-button{font-family:inherit}.notification-actions{display:flex;margin:0 1.5rem;-webkit-user-select:none;user-select:none;border-top:1px solid #f3f5f6}.notification-actions-button{flex:1;border:none;color:#22a5f7;cursor:pointer;font-weight:500;text-align:center;font-size:.875rem;padding:.75rem .125rem;background-color:transparent}.notification-actions-button:hover>.notification-actions-button-highlight,.notification-actions-button:focus>.notification-actions-button-highlight{background-color:#22a5f71a}.notification-actions-button:active>.notification-actions-button-highlight{background-color:#22a5f733}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:hover>.notification-actions-button-highlight,.notification-actions-button.destructive:focus>.notification-actions-button-highlight{background-color:#f556561a}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:#f5565633}.notification-actions-button-highlight{display:inline-flex;border-radius:.75rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(0,0,.2,1)}.notification-progress-ring{inset:0;width:100%;height:100%;position:absolute}.notification-progress-circle{transform:rotate(-90deg);transform-origin:50% 50%;stroke:#657385}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbNotificationsItem, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: BbNotificationsItem, isStandalone: true, selector: "bb-notifications-item", inputs: { notification: "notification", dismissButtonText: "dismissButtonText" }, host: { attributes: { "role": "alert" }, properties: { "class": "this.getClass" } }, viewQueries: [{ propertyName: "progressElementRef", first: true, predicate: ["progress"], descendants: true }], ngImport: i0, template: "<div class=\"notification-content-wrapper\">\n    <!--\n        The icon for the notification.\n\n        The icon is reflected by the type of the\n        notification. Same goes for the color and\n        background-color.\n    -->\n    <div [style.color]=\"notification?.color\"\n         [style.background-color]=\"notification?.backgroundColor\"\n         class=\"notification-icon-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 16 19.5\"\n             class=\"notification-icon\">\n            <path\n                d=\"M8 19.5c1.1 0 2-.9 2-2H6c0 1.1.9 2 2 2zM14 13.5v-5c0-3.1-1.6-5.6-4.5-6.3v-.7C9.5.7 8.8 0 8 0S6.5.7 6.5 1.5v.7C3.6 2.9 2 5.4 2 8.5v5l-2 2v1h16v-1l-2-2z\">\n            </path>\n        </svg>\n\n        <!--\n            The circular progress for the notification.\n\n            The progress is only visible when a timeout is\n            set. The progress adapts to the time remaining\n            for the notification.\n        -->\n        @if (notification?.timeout > 0) {\n            <svg class=\"notification-progress-ring\"\n                 viewBox=\"0 0 40 40\"\n                 role=\"progressbar\">\n                <circle #progress\n                        [attr.stroke-dasharray]=\"progressStrokeArray\"\n                        [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n                        [style.stroke]=\"notification?.color\"\n                        class=\"notification-progress-circle\"\n                        stroke-width=\"2\"\n                        fill=\"transparent\"\n                        r=\"19\"\n                        cx=\"20\"\n                        cy=\"20\">\n                </circle>\n            </svg>\n        }\n    </div>\n\n    <!--\n        The content for the notification.\n\n        This displays a string or a template based\n        on the given parameter by the user.\n    -->\n    <div class=\"notification-content\">\n        @if (isContentString) {\n            @switch (notification?.localize) {\n                @case (true) {\n                    {{ $any(notification?.content) | bbLocalize:{data: notification?.data} }}\n                }\n                @default {\n                    {{ notification?.content }}\n                }\n            }\n        } @else {\n            <ng-container *ngTemplateOutlet=\"$any(notification?.content)\"></ng-container>\n        }\n    </div>\n</div>\n\n<!--\n    The actions of the notification.\n\n    All actions are displayed here and are\n    based on the actions array the user provided.\n-->\n@if (notification?.actions?.length > 0 || notification?.dismiss) {\n    <div class=\"notification-actions\">\n        @for (action of notification?.actions; track $index) {\n            <button [class.destructive]=\"action?.type === 'cancel'\"\n                    (click)=\"callActionAndDestroy(notification, action)\"\n                    type=\"button\"\n                    class=\"notification-actions-button\">\n                <span class=\"notification-actions-button-highlight\">\n                    @if (notification?.localize) {\n                        {{ action?.title | bbLocalize:{data: notification?.data} }}\n                    } @else {\n                        {{ action?.title }}\n                    }\n                </span>\n            </button>\n        }\n        @if (notification?.dismiss) {\n            <button (click)=\"notification?.destroy()\"\n                    class=\"notification-actions-button destructive\"\n                    type=\"button\">\n                <span\n                    class=\"notification-actions-button-highlight\">{{ notification?.dismissText || dismissButtonText }}</span>\n            </button>\n        }\n    </div>\n}\n", styles: [".bb-notifications-item{display:flex;border-radius:.25rem;flex-direction:column;background-color:#fff;border:1px solid #d6dbe0}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{display:flex;padding:1.5rem;align-items:center}.notification-icon-wrapper{width:2.5rem;display:flex;height:2.5rem;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:.75rem;fill:currentColor}.notification-content{flex:1;line-height:1.5;font-weight:500;font-size:.875rem;margin-left:1.5rem;color:#000000d9}.notification-content i{font-style:italic}.notification-content,.notification-actions-button{font-family:inherit}.notification-actions{display:flex;margin:0 1.5rem;-webkit-user-select:none;user-select:none;border-top:1px solid #f3f5f6}.notification-actions-button{flex:1;border:none;color:#22a5f7;cursor:pointer;font-weight:500;text-align:center;font-size:.875rem;padding:.75rem .125rem;background-color:transparent}.notification-actions-button:hover>.notification-actions-button-highlight,.notification-actions-button:focus>.notification-actions-button-highlight{background-color:#22a5f71a}.notification-actions-button:active>.notification-actions-button-highlight{background-color:#22a5f733}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:hover>.notification-actions-button-highlight,.notification-actions-button.destructive:focus>.notification-actions-button-highlight{background-color:#f556561a}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:#f5565633}.notification-actions-button-highlight{display:inline-flex;border-radius:.75rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(0,0,.2,1)}.notification-progress-ring{inset:0;width:100%;height:100%;position:absolute}.notification-progress-circle{transform:rotate(-90deg);transform-origin:50% 50%;stroke:#657385}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbNotificationsItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbNotificationsItem, decorators: [{
             type: Component,
             args: [{ selector: 'bb-notifications-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'role': 'alert' }, preserveWhitespaces: false, standalone: true, imports: [NgTemplateOutlet, BbLocalize], template: "<div class=\"notification-content-wrapper\">\n    <!--\n        The icon for the notification.\n\n        The icon is reflected by the type of the\n        notification. Same goes for the color and\n        background-color.\n    -->\n    <div [style.color]=\"notification?.color\"\n         [style.background-color]=\"notification?.backgroundColor\"\n         class=\"notification-icon-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 16 19.5\"\n             class=\"notification-icon\">\n            <path\n                d=\"M8 19.5c1.1 0 2-.9 2-2H6c0 1.1.9 2 2 2zM14 13.5v-5c0-3.1-1.6-5.6-4.5-6.3v-.7C9.5.7 8.8 0 8 0S6.5.7 6.5 1.5v.7C3.6 2.9 2 5.4 2 8.5v5l-2 2v1h16v-1l-2-2z\">\n            </path>\n        </svg>\n\n        <!--\n            The circular progress for the notification.\n\n            The progress is only visible when a timeout is\n            set. The progress adapts to the time remaining\n            for the notification.\n        -->\n        @if (notification?.timeout > 0) {\n            <svg class=\"notification-progress-ring\"\n                 viewBox=\"0 0 40 40\"\n                 role=\"progressbar\">\n                <circle #progress\n                        [attr.stroke-dasharray]=\"progressStrokeArray\"\n                        [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n                        [style.stroke]=\"notification?.color\"\n                        class=\"notification-progress-circle\"\n                        stroke-width=\"2\"\n                        fill=\"transparent\"\n                        r=\"19\"\n                        cx=\"20\"\n                        cy=\"20\">\n                </circle>\n            </svg>\n        }\n    </div>\n\n    <!--\n        The content for the notification.\n\n        This displays a string or a template based\n        on the given parameter by the user.\n    -->\n    <div class=\"notification-content\">\n        @if (isContentString) {\n            @switch (notification?.localize) {\n                @case (true) {\n                    {{ $any(notification?.content) | bbLocalize:{data: notification?.data} }}\n                }\n                @default {\n                    {{ notification?.content }}\n                }\n            }\n        } @else {\n            <ng-container *ngTemplateOutlet=\"$any(notification?.content)\"></ng-container>\n        }\n    </div>\n</div>\n\n<!--\n    The actions of the notification.\n\n    All actions are displayed here and are\n    based on the actions array the user provided.\n-->\n@if (notification?.actions?.length > 0 || notification?.dismiss) {\n    <div class=\"notification-actions\">\n        @for (action of notification?.actions; track $index) {\n            <button [class.destructive]=\"action?.type === 'cancel'\"\n                    (click)=\"callActionAndDestroy(notification, action)\"\n                    type=\"button\"\n                    class=\"notification-actions-button\">\n                <span class=\"notification-actions-button-highlight\">\n                    @if (notification?.localize) {\n                        {{ action?.title | bbLocalize:{data: notification?.data} }}\n                    } @else {\n                        {{ action?.title }}\n                    }\n                </span>\n            </button>\n        }\n        @if (notification?.dismiss) {\n            <button (click)=\"notification?.destroy()\"\n                    class=\"notification-actions-button destructive\"\n                    type=\"button\">\n                <span\n                    class=\"notification-actions-button-highlight\">{{ notification?.dismissText || dismissButtonText }}</span>\n            </button>\n        }\n    </div>\n}\n", styles: [".bb-notifications-item{display:flex;border-radius:.25rem;flex-direction:column;background-color:#fff;border:1px solid #d6dbe0}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{display:flex;padding:1.5rem;align-items:center}.notification-icon-wrapper{width:2.5rem;display:flex;height:2.5rem;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:.75rem;fill:currentColor}.notification-content{flex:1;line-height:1.5;font-weight:500;font-size:.875rem;margin-left:1.5rem;color:#000000d9}.notification-content i{font-style:italic}.notification-content,.notification-actions-button{font-family:inherit}.notification-actions{display:flex;margin:0 1.5rem;-webkit-user-select:none;user-select:none;border-top:1px solid #f3f5f6}.notification-actions-button{flex:1;border:none;color:#22a5f7;cursor:pointer;font-weight:500;text-align:center;font-size:.875rem;padding:.75rem .125rem;background-color:transparent}.notification-actions-button:hover>.notification-actions-button-highlight,.notification-actions-button:focus>.notification-actions-button-highlight{background-color:#22a5f71a}.notification-actions-button:active>.notification-actions-button-highlight{background-color:#22a5f733}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:hover>.notification-actions-button-highlight,.notification-actions-button.destructive:focus>.notification-actions-button-highlight{background-color:#f556561a}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:#f5565633}.notification-actions-button-highlight{display:inline-flex;border-radius:.75rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(0,0,.2,1)}.notification-progress-ring{inset:0;width:100%;height:100%;position:absolute}.notification-progress-circle{transform:rotate(-90deg);transform-origin:50% 50%;stroke:#657385}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ChangeDetectorRef }], propDecorators: { notification: [{
@@ -197,10 +197,10 @@ class BbNotificationsList {
         const [y, x] = (this.data.position ?? '').split('|');
         return { vertical: y ?? null, horizontal: x ?? null };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbNotificationsList, deps: [{ token: NotificationsData }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BbNotificationsList, isStandalone: true, selector: "bb-notifications-list", host: { attributes: { "role": "list" }, properties: { "style.justify-content": "this.horizontalPosition", "style.align-items": "this.verticalPosition" }, classAttribute: "bb-notifications-list" }, ngImport: i0, template: "<!--\n    The notifications list.\n\n    The list provides the animation effect for the\n    incoming notifications.\n-->\n@if (data?.data | async; as notifications) {\n    <div [@notificationListAnimation]=\"{value: notifications?.length, params: animation}\"\n         class=\"notifications-list-wrapper\">\n        <!--\n            The loop for the notifications.\n\n            All notifications will be displayed here. They\n            are wrapped within a wrapper which separates them.\n        -->\n        @for (notification of notifications; track notification?.id) {\n            <div class=\"notifications-item-wrapper\">\n                <bb-notifications-item [notification]=\"notification\"\n                                       [dismissButtonText]=\"data?.dismissText\">\n                </bb-notifications-item>\n            </div>\n        }\n    </div>\n}\n", styles: [".bb-notifications-list{inset:0;z-index:1100;display:flex;position:fixed;padding:.75rem;pointer-events:none}.notifications-list-wrapper{width:100%;display:block;max-width:25rem;position:relative}.notifications-item-wrapper{padding:0;margin:0 0 .75rem;pointer-events:all}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: BbNotificationsItem, selector: "bb-notifications-item", inputs: ["notification", "dismissButtonText"] }], animations: [notificationAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbNotificationsList, deps: [{ token: NotificationsData }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: BbNotificationsList, isStandalone: true, selector: "bb-notifications-list", host: { attributes: { "role": "list" }, properties: { "style.justify-content": "this.horizontalPosition", "style.align-items": "this.verticalPosition" }, classAttribute: "bb-notifications-list" }, ngImport: i0, template: "<!--\n    The notifications list.\n\n    The list provides the animation effect for the\n    incoming notifications.\n-->\n@if (data?.data | async; as notifications) {\n    <div [@notificationListAnimation]=\"{value: notifications?.length, params: animation}\"\n         class=\"notifications-list-wrapper\">\n        <!--\n            The loop for the notifications.\n\n            All notifications will be displayed here. They\n            are wrapped within a wrapper which separates them.\n        -->\n        @for (notification of notifications; track notification?.id) {\n            <div class=\"notifications-item-wrapper\">\n                <bb-notifications-item [notification]=\"notification\"\n                                       [dismissButtonText]=\"data?.dismissText\">\n                </bb-notifications-item>\n            </div>\n        }\n    </div>\n}\n", styles: [".bb-notifications-list{inset:0;z-index:1100;display:flex;position:fixed;padding:.75rem;pointer-events:none}.notifications-list-wrapper{width:100%;display:block;max-width:25rem;position:relative}.notifications-item-wrapper{padding:0;margin:0 0 .75rem;pointer-events:all}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: BbNotificationsItem, selector: "bb-notifications-item", inputs: ["notification", "dismissButtonText"] }], animations: [notificationAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbNotificationsList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbNotificationsList, decorators: [{
             type: Component,
             args: [{ selector: 'bb-notifications-list', animations: [notificationAnimation], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bb-notifications-list',
@@ -349,10 +349,10 @@ class Notifications {
             ? defaultValue
             : property;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Notifications, deps: [{ token: i1.Platform }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: i2.Localize, optional: true }, { token: NOTIFICATIONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Notifications, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Notifications, deps: [{ token: i1.Platform }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: i2.Localize, optional: true }, { token: NOTIFICATIONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Notifications, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Notifications, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Notifications, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -381,11 +381,11 @@ class NotificationsModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: NotificationsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NotificationsModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: NotificationsModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NotificationsModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NotificationsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NotificationsModule, decorators: [{
             type: NgModule
         }] });
 

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

@@ -120,10 +120,10 @@ class Permissions {
         });
         this._subscription.add(subscription);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Permissions, deps: [{ token: PermissionsHandler }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Permissions, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Permissions, deps: [{ token: PermissionsHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Permissions, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: Permissions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: Permissions, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -203,10 +203,10 @@ class BbPermission {
     static ngAcceptInputType_bbPermission;
     static ngAcceptInputType_bbPermissionElse;
     static ngAcceptInputType_bbPermissionMode;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbPermission, deps: [{ token: Permissions }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbPermission, isStandalone: true, selector: "[bbPermission]", inputs: { bbPermission: "bbPermission", bbPermissionElse: "bbPermissionElse", bbPermissionMode: "bbPermissionMode" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbPermission, deps: [{ token: Permissions }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbPermission, isStandalone: true, selector: "[bbPermission]", inputs: { bbPermission: "bbPermission", bbPermissionElse: "bbPermissionElse", bbPermissionMode: "bbPermissionMode" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbPermission, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbPermission, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bbPermission]',
@@ -272,11 +272,11 @@ class PermissionsModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PermissionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: PermissionsModule, imports: [BbPermission], exports: [BbPermission] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PermissionsModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PermissionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: PermissionsModule, imports: [BbPermission], exports: [BbPermission] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PermissionsModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PermissionsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PermissionsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BbPermission],

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

@@ -73,10 +73,10 @@ class RecaptchaLoader {
             .map(item => `${item?.key}=${item?.value}`)
             .join('&');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaLoader, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaLoader, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaLoader, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -242,8 +242,8 @@ class RecaptchaComponent {
         const newSrc = src.replace(/hl=(.*?)&/, `hl=${locale}&`);
         this._renderer.setAttribute(frame, 'src', newSrc);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaComponent, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: RecaptchaLoader }, { token: LOCALIZE_ID }, { token: RECAPTCHA_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: RecaptchaComponent, isStandalone: true, selector: "bb-recaptcha", inputs: { id: "id", siteKey: "siteKey", tabIndex: "tabIndex", type: "type", size: "size", theme: "theme", badge: "badge", errorMode: "errorMode", grouped: ["grouped", "grouped", booleanAttribute] }, outputs: { resolved: "resolved", error: "error" }, host: { properties: { "class.grouped": "grouped", "attr.id": "this.id" }, classAttribute: "bb-recaptcha" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaComponent, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: RecaptchaLoader }, { token: LOCALIZE_ID }, { token: RECAPTCHA_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: RecaptchaComponent, isStandalone: true, selector: "bb-recaptcha", inputs: { id: "id", siteKey: "siteKey", tabIndex: "tabIndex", type: "type", size: "size", theme: "theme", badge: "badge", errorMode: "errorMode", grouped: ["grouped", "grouped", booleanAttribute] }, outputs: { resolved: "resolved", error: "error" }, host: { properties: { "class.grouped": "grouped", "attr.id": "this.id" }, classAttribute: "bb-recaptcha" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RecaptchaComponent),
@@ -251,7 +251,7 @@ class RecaptchaComponent {
             }
         ], exportAs: ["bbRecaptcha"], ngImport: i0, template: "", styles: [".bb-recaptcha{display:block}.bb-recaptcha.grouped{margin-bottom:1.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bb-recaptcha', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'bbRecaptcha', providers: [
                         {
@@ -315,11 +315,11 @@ class RecaptchaModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaModule, imports: [RecaptchaComponent], exports: [RecaptchaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaModule, imports: [RecaptchaComponent], exports: [RecaptchaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RecaptchaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RecaptchaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RecaptchaComponent],

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

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
 import { Directive, EventEmitter, booleanAttribute, forwardRef, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, ViewChild, Input, Output, makeEnvironmentProviders, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { NgSelectComponent, NgOptionTemplateDirective, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgOptgroupTemplateDirective, SELECTION_MODEL_FACTORY, DefaultSelectionModelFactory } from '@ng-select/ng-select';
+import * as i1 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@ng-select/ng-select';
-import { NgSelectComponent, NgSelectModule, SELECTION_MODEL_FACTORY, DefaultSelectionModelFactory } from '@ng-select/ng-select';
 import { BbFormError } from '@bravobit/bb-foundation/elements';
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { observableAttribute } from '@bravobit/bb-foundation';
@@ -16,10 +15,10 @@ class BbSelectOptionGroup {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectOptionGroup, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbSelectOptionGroup, isStandalone: true, selector: "ng-template[bbSelectOptionGroup]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectOptionGroup, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbSelectOptionGroup, isStandalone: true, selector: "ng-template[bbSelectOptionGroup]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectOptionGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bbSelectOptionGroup]',
@@ -32,10 +31,10 @@ class BbSelectMultiLabel {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectMultiLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbSelectMultiLabel, isStandalone: true, selector: "ng-template[bbSelectMultiLabel]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectMultiLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbSelectMultiLabel, isStandalone: true, selector: "ng-template[bbSelectMultiLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectMultiLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectMultiLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bbSelectMultiLabel]',
@@ -48,10 +47,10 @@ class BbSelectOption {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectOption, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbSelectOption, isStandalone: true, selector: "ng-template[bbSelectOption]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectOption, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbSelectOption, isStandalone: true, selector: "ng-template[bbSelectOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectOption, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bbSelectOption]',
@@ -64,10 +63,10 @@ class BbSelectLabel {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BbSelectLabel, isStandalone: true, selector: "ng-template[bbSelectLabel]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: BbSelectLabel, isStandalone: true, selector: "ng-template[bbSelectLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelectLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelectLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bbSelectLabel]',
@@ -114,7 +113,7 @@ class BbSelect {
     isOpen = null;
     clearSearchOnAdd = null;
     addTag = false;
-    appendTo = 'body';
+    appendTo = null;
     get value() {
         return this.control.value;
     }
@@ -159,14 +158,14 @@ class BbSelect {
             .subscribe(value => this.onChangeCallback?.(value));
         this._subscription.add(subscription);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BbSelect, isStandalone: true, selector: "bb-select", inputs: { label: "label", hint: "hint", data: ["data", "data", observableAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], loading: ["loading", "loading", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], hideArrow: ["hideArrow", "hideArrow", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", typeahead: "typeahead", trackByFn: "trackByFn", groupBy: "groupBy", isOpen: "isOpen", clearSearchOnAdd: "clearSearchOnAdd", addTag: "addTag", appendTo: "appendTo", value: "value" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onChange: "onChange" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error", "class.hide-arrow": "hideArrow" }, classAttribute: "bb-select" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: BbSelect, isStandalone: true, selector: "bb-select", inputs: { label: "label", hint: "hint", data: ["data", "data", observableAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], loading: ["loading", "loading", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], hideArrow: ["hideArrow", "hideArrow", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", typeahead: "typeahead", trackByFn: "trackByFn", groupBy: "groupBy", isOpen: "isOpen", clearSearchOnAdd: "clearSearchOnAdd", addTag: "addTag", appendTo: "appendTo", value: "value" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onChange: "onChange" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error", "class.hide-arrow": "hideArrow" }, classAttribute: "bb-select" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BbSelect),
                 multi: true
-            }], queries: [{ propertyName: "optionTemplate", first: true, predicate: BbSelectOption, descendants: true, read: TemplateRef }, { propertyName: "optionGroupTemplate", first: true, predicate: BbSelectOptionGroup, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: BbSelectLabel, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: BbSelectMultiLabel, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: NgSelectComponent, descendants: true, static: true }], ngImport: i0, template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-select-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<ng-select [formControl]=\"control\"\n           [notFoundText]=\"'select.not_found_text' | bbLocalize\"\n           [clearAllText]=\"'select.clear_all_text' | bbLocalize\"\n           [loadingText]=\"'select.loading_text' | bbLocalize\"\n           [typeToSearchText]=\"'select.type_to_search_text' | bbLocalize\"\n           [addTagText]=\"'select.add_tag_text' | bbLocalize\"\n           [virtualScroll]=\"virtualScroll\"\n           [items]=\"data | async\"\n           [multiple]=\"multiple\"\n           [loading]=\"loading\"\n           [labelForId]=\"labelId\"\n           [searchable]=\"searchable\"\n           [placeholder]=\"placeholder\"\n           [clearable]=\"clearable\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [trackByFn]=\"trackByFn\"\n           [typeahead]=\"typeahead\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [groupBy]=\"groupBy\"\n           [isOpen]=\"isOpen\"\n           [addTag]=\"addTag\"\n           [inputAttrs]=\"{autocorrect: 'off', autocapitalize: 'none', spellcheck: 'false', autocomplete: 'off'}\"\n           [appendTo]=\"appendTo\"\n           (blur)=\"onBlur?.emit($event)\"\n           (change)=\"onChange?.emit($event)\">\n    @if (optionTemplate) {\n        <ng-template ng-option-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (labelTemplate) {\n        <ng-template ng-label-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (multiLabelTemplate) {\n        <ng-template ng-multi-label-tmp\n                     let-items=\"items\"\n                     let-clear=\"clear\">\n            <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context: {items: items, clear: clear}\"></ng-container>\n        </ng-template>\n    }\n    @if (optionGroupTemplate) {\n        <ng-template ng-optgroup-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionGroupTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n</ng-select>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-select-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-select{color:#2d3c4d;display:block;font-size:1rem}.bb-select.grouped{margin-bottom:1rem}.bb-select.required>.bb-select-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-select.error>.bb-select-label{color:#c23934}.bb-select.error>.ng-select>.ng-select-container,.bb-select.error>.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-select.error>.ng-select>.ng-select-container{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3}.bb-select.error>.ng-select>.ng-select-container>.ng-value-container>.ng-placeholder{color:#ea7b7b}.bb-select.hide-arrow .ng-arrow-wrapper{width:0;opacity:0;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-select-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-select-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-.125rem;border-width:0 .3125rem .3125rem;border-color:transparent transparent #808993}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #212327}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--select-box-shadow);border-color:#757e8a}.ng-select.ng-select-disabled>.ng-select-container{color:gray;background-color:#e6e6e6}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{align-items:center;transition-duration:.25s;min-height:2.5rem;color:#111;background-color:#fff;border:1px solid hsl(213,8%,74%);border-radius:.5rem;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.5rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#d1d1d1}.ng-select.ng-select-single .ng-select-container{height:2.5rem}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;top:50%;padding-right:3.125rem;transform:translateY(-50%);padding-left:.5rem}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{border-radius:.25rem;background-color:#f9f9f9;border:1px solid #d3d6d9}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:.3125rem;padding-left:.4375rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{line-height:1.6;margin-right:.3125rem;border-radius:.125rem;margin-bottom:.3125rem;color:#111;font-size:1rem;background-color:#ebf5ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:.3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:.0625rem .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 .1875rem .1875rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#111}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:.1875rem;padding-bottom:.3125rem}.ng-select .ng-clear-wrapper{color:#808993}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:.3125rem .3125rem 0 0}.ng-select .ng-arrow-wrapper{width:1.5625rem;padding-right:.3125rem}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#50565e}.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:.3125rem .3125rem .15625rem;border-color:#808993 transparent transparent}.ng-dropdown-panel{left:0;box-shadow:0 1px #0000000f;background-color:#fff;border:1px solid hsl(213,8%,74%)}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:-1px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-color:#d3d6d9}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.ng-dropdown-panel.ng-select-right{top:0;left:100%;margin-bottom:-1px;border-top-right-radius:.5rem;border-bottom-left-radius:.5rem;border-bottom-color:#d3d6d9;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:.5rem}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:-1px;border-top-color:#d3d6d9;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-left{top:0;left:-100%;margin-bottom:-1px;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border-bottom-color:#d3d6d9;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:.5rem}.ng-dropdown-panel .ng-dropdown-header{padding:.3125rem .4375rem;border-bottom:1px solid hsl(213,8%,74%)}.ng-dropdown-panel .ng-dropdown-footer{padding:.3125rem .4375rem;border-top:1px solid hsl(213,8%,74%)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;padding:.5rem .625rem;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{font-weight:500;background-color:#ebf5ff;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:1rem;font-weight:400;padding:.5rem .625rem;color:#000000de;background-color:#fff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#111;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:500}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:#111;background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#aaa}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:1.375rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:.3125rem}\n"], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            }], queries: [{ propertyName: "optionTemplate", first: true, predicate: BbSelectOption, descendants: true, read: TemplateRef }, { propertyName: "optionGroupTemplate", first: true, predicate: BbSelectOptionGroup, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: BbSelectLabel, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: BbSelectMultiLabel, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: NgSelectComponent, descendants: true, static: true }], ngImport: i0, template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-select-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<ng-select [formControl]=\"control\"\n           [notFoundText]=\"'select.not_found_text' | bbLocalize\"\n           [clearAllText]=\"'select.clear_all_text' | bbLocalize\"\n           [loadingText]=\"'select.loading_text' | bbLocalize\"\n           [typeToSearchText]=\"'select.type_to_search_text' | bbLocalize\"\n           [addTagText]=\"'select.add_tag_text' | bbLocalize\"\n           [virtualScroll]=\"virtualScroll\"\n           [items]=\"data | async\"\n           [multiple]=\"multiple\"\n           [loading]=\"loading\"\n           [labelForId]=\"labelId\"\n           [searchable]=\"searchable\"\n           [placeholder]=\"placeholder\"\n           [clearable]=\"clearable\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [trackByFn]=\"trackByFn\"\n           [typeahead]=\"typeahead\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [groupBy]=\"groupBy\"\n           [isOpen]=\"isOpen\"\n           [addTag]=\"addTag\"\n           [inputAttrs]=\"{autocorrect: 'off', autocapitalize: 'none', spellcheck: 'false', autocomplete: 'off'}\"\n           [appendTo]=\"appendTo\"\n           (blur)=\"onBlur?.emit($event)\"\n           (change)=\"onChange?.emit($event)\">\n    @if (optionTemplate) {\n        <ng-template ng-option-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (labelTemplate) {\n        <ng-template ng-label-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (multiLabelTemplate) {\n        <ng-template ng-multi-label-tmp\n                     let-items=\"items\"\n                     let-clear=\"clear\">\n            <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context: {items: items, clear: clear}\"></ng-container>\n        </ng-template>\n    }\n    @if (optionGroupTemplate) {\n        <ng-template ng-optgroup-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionGroupTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n</ng-select>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-select-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-select{color:#2d3c4d;display:block;font-size:1rem}.bb-select.grouped{margin-bottom:1.5rem}.bb-select.required>.bb-select-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-select.error>.bb-select-label{color:#c23934}.bb-select.error>.ng-select>.ng-select-container,.bb-select.error>.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-select.error>.ng-select>.ng-select-container{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3}.bb-select.error>.ng-select>.ng-select-container>.ng-value-container>.ng-placeholder{color:#ea7b7b}.bb-select.hide-arrow .ng-arrow-wrapper{width:0;opacity:0;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-select-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-select-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.ng-select.ng-select-opened>.ng-select-container{background:var(--bb-select-background-color)}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:var(--bb-select-box-shadow)}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-.125rem;border-width:0 .3125rem .3125rem;border-color:transparent transparent var(--bb-select-border-color)}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#757e8a;box-shadow:var(--bb-select-focus-box-shadow)}.ng-select.ng-select-disabled>.ng-select-container{color:gray;background-color:#e6e6e6}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{align-items:center;transition-duration:.25s;min-height:2.625rem;color:#111;background-color:var(--bb-select-background-color);box-shadow:var(--bb-select-box-shadow);border:1px solid var(--bb-select-border-color);border-radius:var(--bb-select-border-radius);transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.5rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#d1d1d1}.ng-select.ng-select-single .ng-select-container{height:2.625rem}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;top:50%;padding-right:3.125rem;transform:translateY(-50%);padding-left:.5rem}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{border-radius:.25rem;border:1px solid var(--bb-select-border-color);background-color:#f9f9f9}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:.3125rem;padding-left:.4375rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{line-height:1.6;margin-right:.3125rem;border-radius:.125rem;margin-bottom:.3125rem;color:#111;font-size:1rem;background-color:#ebf5ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:.3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:.0625rem .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 .1875rem .1875rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#111}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:.1875rem;padding-bottom:.3125rem}.ng-select .ng-clear-wrapper{color:var(--bb-select-border-color)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:.3125rem .3125rem 0 0}.ng-select .ng-arrow-wrapper{width:1.5625rem;padding-right:.3125rem}.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:.3125rem .3125rem .15625rem;border-color:var(--bb-select-border-color) transparent transparent}.ng-dropdown-panel{left:0;overflow:hidden;box-shadow:0 1px #0000000f;background-color:var(--bb-select-background-color);border:1px solid var(--bb-select-border-color)}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-left-radius:var(--bb-select-border-radius);border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:var(--bb-select-border-radius);border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-right{top:0;left:100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-right-radius:var(--bb-select-border-radius);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:-1px;border-top-color:var(--bb-select-border-color);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-left{top:0;left:-100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-left-radius:var(--bb-select-border-radius);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:var(--bb-select-border-radius)}.ng-dropdown-panel .ng-dropdown-header{padding:.3125rem .4375rem;border-bottom:1px solid var(--bb-select-border-color)}.ng-dropdown-panel .ng-dropdown-footer{padding:.3125rem .4375rem;border-top:1px solid var(--bb-select-border-color)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;padding:.5rem .625rem;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{font-weight:500;background-color:#ebf5ff;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:1rem;font-weight:400;padding:.5rem .625rem;color:#000000de;background-color:var(--bb-select-background-color)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#111;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:500}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:#111;background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#aaa}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:1.375rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:.3125rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BbSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BbSelect, decorators: [{
             type: Component,
             args: [{ selector: 'bb-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -180,14 +179,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         '[class.error]': 'error',
                         '[class.hide-arrow]': 'hideArrow'
                     }, preserveWhitespaces: false, standalone: true, imports: [
-                        NgSelectModule,
                         ReactiveFormsModule,
                         AsyncPipe,
                         NgTemplateOutlet,
                         BbTemplate,
                         BbFormError,
-                        BbLocalize
-                    ], template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-select-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<ng-select [formControl]=\"control\"\n           [notFoundText]=\"'select.not_found_text' | bbLocalize\"\n           [clearAllText]=\"'select.clear_all_text' | bbLocalize\"\n           [loadingText]=\"'select.loading_text' | bbLocalize\"\n           [typeToSearchText]=\"'select.type_to_search_text' | bbLocalize\"\n           [addTagText]=\"'select.add_tag_text' | bbLocalize\"\n           [virtualScroll]=\"virtualScroll\"\n           [items]=\"data | async\"\n           [multiple]=\"multiple\"\n           [loading]=\"loading\"\n           [labelForId]=\"labelId\"\n           [searchable]=\"searchable\"\n           [placeholder]=\"placeholder\"\n           [clearable]=\"clearable\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [trackByFn]=\"trackByFn\"\n           [typeahead]=\"typeahead\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [groupBy]=\"groupBy\"\n           [isOpen]=\"isOpen\"\n           [addTag]=\"addTag\"\n           [inputAttrs]=\"{autocorrect: 'off', autocapitalize: 'none', spellcheck: 'false', autocomplete: 'off'}\"\n           [appendTo]=\"appendTo\"\n           (blur)=\"onBlur?.emit($event)\"\n           (change)=\"onChange?.emit($event)\">\n    @if (optionTemplate) {\n        <ng-template ng-option-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (labelTemplate) {\n        <ng-template ng-label-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (multiLabelTemplate) {\n        <ng-template ng-multi-label-tmp\n                     let-items=\"items\"\n                     let-clear=\"clear\">\n            <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context: {items: items, clear: clear}\"></ng-container>\n        </ng-template>\n    }\n    @if (optionGroupTemplate) {\n        <ng-template ng-optgroup-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionGroupTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n</ng-select>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-select-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-select{color:#2d3c4d;display:block;font-size:1rem}.bb-select.grouped{margin-bottom:1rem}.bb-select.required>.bb-select-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-select.error>.bb-select-label{color:#c23934}.bb-select.error>.ng-select>.ng-select-container,.bb-select.error>.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-select.error>.ng-select>.ng-select-container{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3}.bb-select.error>.ng-select>.ng-select-container>.ng-value-container>.ng-placeholder{color:#ea7b7b}.bb-select.hide-arrow .ng-arrow-wrapper{width:0;opacity:0;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-select-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-select-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-.125rem;border-width:0 .3125rem .3125rem;border-color:transparent transparent #808993}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #212327}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--select-box-shadow);border-color:#757e8a}.ng-select.ng-select-disabled>.ng-select-container{color:gray;background-color:#e6e6e6}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{align-items:center;transition-duration:.25s;min-height:2.5rem;color:#111;background-color:#fff;border:1px solid hsl(213,8%,74%);border-radius:.5rem;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.5rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#d1d1d1}.ng-select.ng-select-single .ng-select-container{height:2.5rem}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;top:50%;padding-right:3.125rem;transform:translateY(-50%);padding-left:.5rem}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{border-radius:.25rem;background-color:#f9f9f9;border:1px solid #d3d6d9}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:.3125rem;padding-left:.4375rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{line-height:1.6;margin-right:.3125rem;border-radius:.125rem;margin-bottom:.3125rem;color:#111;font-size:1rem;background-color:#ebf5ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:.3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:.0625rem .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 .1875rem .1875rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#111}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:.1875rem;padding-bottom:.3125rem}.ng-select .ng-clear-wrapper{color:#808993}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:.3125rem .3125rem 0 0}.ng-select .ng-arrow-wrapper{width:1.5625rem;padding-right:.3125rem}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#50565e}.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:.3125rem .3125rem .15625rem;border-color:#808993 transparent transparent}.ng-dropdown-panel{left:0;box-shadow:0 1px #0000000f;background-color:#fff;border:1px solid hsl(213,8%,74%)}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:-1px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-color:#d3d6d9}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.ng-dropdown-panel.ng-select-right{top:0;left:100%;margin-bottom:-1px;border-top-right-radius:.5rem;border-bottom-left-radius:.5rem;border-bottom-color:#d3d6d9;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:.5rem}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:-1px;border-top-color:#d3d6d9;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-left{top:0;left:-100%;margin-bottom:-1px;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border-bottom-color:#d3d6d9;border-bottom-right-radius:.5rem}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:.5rem}.ng-dropdown-panel .ng-dropdown-header{padding:.3125rem .4375rem;border-bottom:1px solid hsl(213,8%,74%)}.ng-dropdown-panel .ng-dropdown-footer{padding:.3125rem .4375rem;border-top:1px solid hsl(213,8%,74%)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;padding:.5rem .625rem;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{font-weight:500;background-color:#ebf5ff;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:1rem;font-weight:400;padding:.5rem .625rem;color:#000000de;background-color:#fff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#111;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:500}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:#111;background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#aaa}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:1.375rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:.3125rem}\n"] }]
+                        BbLocalize,
+                        NgSelectComponent,
+                        NgOptionTemplateDirective,
+                        NgLabelTemplateDirective,
+                        NgMultiLabelTemplateDirective,
+                        NgOptgroupTemplateDirective
+                    ], template: "<!-- Label of the form control. -->\n@if (label; as labelContent) {\n    <label [attr.for]=\"labelId\"\n           class=\"bb-select-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<ng-select [formControl]=\"control\"\n           [notFoundText]=\"'select.not_found_text' | bbLocalize\"\n           [clearAllText]=\"'select.clear_all_text' | bbLocalize\"\n           [loadingText]=\"'select.loading_text' | bbLocalize\"\n           [typeToSearchText]=\"'select.type_to_search_text' | bbLocalize\"\n           [addTagText]=\"'select.add_tag_text' | bbLocalize\"\n           [virtualScroll]=\"virtualScroll\"\n           [items]=\"data | async\"\n           [multiple]=\"multiple\"\n           [loading]=\"loading\"\n           [labelForId]=\"labelId\"\n           [searchable]=\"searchable\"\n           [placeholder]=\"placeholder\"\n           [clearable]=\"clearable\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [trackByFn]=\"trackByFn\"\n           [typeahead]=\"typeahead\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [groupBy]=\"groupBy\"\n           [isOpen]=\"isOpen\"\n           [addTag]=\"addTag\"\n           [inputAttrs]=\"{autocorrect: 'off', autocapitalize: 'none', spellcheck: 'false', autocomplete: 'off'}\"\n           [appendTo]=\"appendTo\"\n           (blur)=\"onBlur?.emit($event)\"\n           (change)=\"onChange?.emit($event)\">\n    @if (optionTemplate) {\n        <ng-template ng-option-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (labelTemplate) {\n        <ng-template ng-label-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n    @if (multiLabelTemplate) {\n        <ng-template ng-multi-label-tmp\n                     let-items=\"items\"\n                     let-clear=\"clear\">\n            <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context: {items: items, clear: clear}\"></ng-container>\n        </ng-template>\n    }\n    @if (optionGroupTemplate) {\n        <ng-template ng-optgroup-tmp\n                     let-item=\"item\"\n                     let-item$=\"item$\"\n                     let-index=\"index\">\n            <ng-container\n                *ngTemplateOutlet=\"optionGroupTemplate; context: {item: item, item$: item$, index: index}\"></ng-container>\n        </ng-template>\n    }\n</ng-select>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The form control hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-select-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-select{color:#2d3c4d;display:block;font-size:1rem}.bb-select.grouped{margin-bottom:1.5rem}.bb-select.required>.bb-select-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-select.error>.bb-select-label{color:#c23934}.bb-select.error>.ng-select>.ng-select-container,.bb-select.error>.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:0 .375rem .375rem -.375rem #0000001a,0 0 0 .1875rem #f8d3d3}.bb-select.error>.ng-select>.ng-select-container{border:1px solid hsl(0,73%,30%);background-color:#f8d3d3}.bb-select.error>.ng-select>.ng-select-container>.ng-value-container>.ng-placeholder{color:#ea7b7b}.bb-select.hide-arrow .ng-arrow-wrapper{width:0;opacity:0;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-select-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-select-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.ng-select.ng-select-opened>.ng-select-container{background:var(--bb-select-background-color)}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:var(--bb-select-box-shadow)}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-.125rem;border-width:0 .3125rem .3125rem;border-color:transparent transparent var(--bb-select-border-color)}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#757e8a;box-shadow:var(--bb-select-focus-box-shadow)}.ng-select.ng-select-disabled>.ng-select-container{color:gray;background-color:#e6e6e6}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{align-items:center;transition-duration:.25s;min-height:2.625rem;color:#111;background-color:var(--bb-select-background-color);box-shadow:var(--bb-select-box-shadow);border:1px solid var(--bb-select-border-color);border-radius:var(--bb-select-border-radius);transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.5rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#d1d1d1}.ng-select.ng-select-single .ng-select-container{height:2.625rem}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;top:50%;padding-right:3.125rem;transform:translateY(-50%);padding-left:.5rem}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{border-radius:.25rem;border:1px solid var(--bb-select-border-color);background-color:#f9f9f9}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:.3125rem;padding-left:.4375rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{line-height:1.6;margin-right:.3125rem;border-radius:.125rem;margin-bottom:.3125rem;color:#111;font-size:1rem;background-color:#ebf5ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:.3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:.0625rem .3125rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 .1875rem .1875rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#111}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:.1875rem;padding-bottom:.3125rem}.ng-select .ng-clear-wrapper{color:var(--bb-select-border-color)}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:.3125rem .3125rem 0 0}.ng-select .ng-arrow-wrapper{width:1.5625rem;padding-right:.3125rem}.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:.3125rem .3125rem .15625rem;border-color:var(--bb-select-border-color) transparent transparent}.ng-dropdown-panel{left:0;overflow:hidden;box-shadow:0 1px #0000000f;background-color:var(--bb-select-background-color);border:1px solid var(--bb-select-border-color)}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-left-radius:var(--bb-select-border-radius);border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:var(--bb-select-border-radius);border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-right{top:0;left:100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-right-radius:var(--bb-select-border-radius);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:-1px;border-top-color:var(--bb-select-border-color);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-left{top:0;left:-100%;margin-bottom:-1px;border-bottom-color:var(--bb-select-border-color);border-top-left-radius:var(--bb-select-border-radius);border-bottom-left-radius:var(--bb-select-border-radius);border-bottom-right-radius:var(--bb-select-border-radius)}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:var(--bb-select-border-radius)}.ng-dropdown-panel .ng-dropdown-header{padding:.3125rem .4375rem;border-bottom:1px solid var(--bb-select-border-color)}.ng-dropdown-panel .ng-dropdown-footer{padding:.3125rem .4375rem;border-top:1px solid var(--bb-select-border-color)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;padding:.5rem .625rem;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{font-weight:500;background-color:#ebf5ff;color:#0000008a}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:1rem;font-weight:400;padding:.5rem .625rem;color:#000000de;background-color:var(--bb-select-background-color)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#111;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:500}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:#111;background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#aaa}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:1.375rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:.3125rem}\n"] }]
         }], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [BbSelectOption, { read: TemplateRef }]
@@ -289,8 +292,8 @@ function provideSelectConfig() {
 }
 
 class SelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: SelectModule, imports: [BbSelect,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SelectModule, imports: [BbSelect,
             BbSelectLabel,
             BbSelectOption,
             BbSelectOptionGroup,
@@ -299,11 +302,11 @@ class SelectModule {
             BbSelectOption,
             BbSelectOptionGroup,
             BbSelectMultiLabel] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectModule, providers: [
             provideSelectConfig()
         ], imports: [BbSelect] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [