ngx-bsl 0.0.4 → 0.0.6

package/fesm2022/ngx-bsl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, input, inject, computed, output, contentChildren, ElementRef, signal, forwardRef, HostListener, Pipe, viewChild, afterNextRender, model, Renderer2, DOCUMENT, Directive } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, input, inject, computed, output, contentChildren, ElementRef, signal, forwardRef, HostListener, Pipe, viewChild, afterNextRender, model, Renderer2, DOCUMENT, Directive } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -17,20 +17,20 @@ class IdGenerator {
     @typescript-eslint/no-extraneous-class
 */
 class IconCheckComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconCheckComponent, isStandalone: true, selector: "ngx-bsl-icon-check", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCheckComponent, isStandalone: true, selector: "ngx-bsl-icon-check", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconCheckComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCheckComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-check', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 class ListBoxOptionComponent {
@@ -41,13 +41,13 @@ class ListBoxOptionComponent {
         const id = this.optionIdGenerator.nextId();
         return `${this.id()}-${id}`;
     }, ...(ngDevMode ? [{ debugName: "listBoxOptionId" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: ListBoxOptionComponent, isStandalone: true, selector: "ngx-bsl-list-box-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.id": "listBoxOptionId()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ListBoxOptionComponent, isStandalone: true, selector: "ngx-bsl-list-box-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.id": "listBoxOptionId()" } }, ngImport: i0, template: `
         <ng-content></ng-content>
         <ngx-bsl-icon-check></ngx-bsl-icon-check>
     `, isInline: true, styles: [":host{position:relative;padding:.375rem 1.25rem .375rem .5rem;border-radius:4px;font:var(--bsl-font-sm);color:var(--bsl-textColor);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host:hover,:host.visual-focus{background-color:var(--bsl-list-box-backgroundColor-hover)}:host[aria-selected=true] ngx-bsl-icon-check{display:inline;visibility:visible}:host ngx-bsl-icon-check{display:none;visibility:hidden;position:absolute;right:0;color:var(--bsl-textColor)}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-list-box-option', imports: [
                         IconCheckComponent,
@@ -203,8 +203,8 @@ class ListBoxComponent {
     writeValue(value) {
         this.value = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: ListBoxComponent, isStandalone: true, selector: "ngx-bsl-list-box", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, exposeAriaActiveDescendant: { classPropertyName: "exposeAriaActiveDescendant", publicName: "exposeAriaActiveDescendant", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, initialFocusedOptionIndex: { classPropertyName: "initialFocusedOptionIndex", publicName: "initialFocusedOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOption: "selectOption" }, host: { attributes: { "role": "listbox" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-activedescendant": "exposeAriaActiveDescendant() ? null : ariaActiveDescendant()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: ListBoxComponent, isStandalone: true, selector: "ngx-bsl-list-box", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, exposeAriaActiveDescendant: { classPropertyName: "exposeAriaActiveDescendant", publicName: "exposeAriaActiveDescendant", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, initialFocusedOptionIndex: { classPropertyName: "initialFocusedOptionIndex", publicName: "initialFocusedOptionIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOption: "selectOption" }, host: { attributes: { "role": "listbox" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-activedescendant": "exposeAriaActiveDescendant() ? null : ariaActiveDescendant()" } }, providers: [
             IdGenerator,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -213,7 +213,7 @@ class ListBoxComponent {
             },
         ], queries: [{ propertyName: "listBoxOptions", predicate: (ListBoxOptionComponent), isSignal: true }, { propertyName: "listBoxOptionRefs", predicate: ListBoxOptionComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;padding:4px;border:1px solid var(--bsl-list-box-borderColor);border-radius:6px;background-color:var(--bsl-list-box-backgroundColor);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-list-box', imports: [], template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         IdGenerator,
@@ -256,10 +256,10 @@ class ListBoxOptionValueConverterPipe {
         }
         throw new Error('Cannot parse the value');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxOptionValueConverterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ListBoxOptionValueConverterPipe, isStandalone: true, name: "listBoxOptionValueConverter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionValueConverterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionValueConverterPipe, isStandalone: true, name: "listBoxOptionValueConverter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxOptionValueConverterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionValueConverterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'listBoxOptionValueConverter' }]
         }] });
@@ -336,16 +336,16 @@ class ComboboxComponent {
     writeValue(value) {
         this.value = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ComboboxComponent, isStandalone: true, selector: "ngx-bsl-combobox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmSelection: "confirmSelection" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ComboboxComponent, isStandalone: true, selector: "ngx-bsl-combobox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmSelection: "confirmSelection" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ComboboxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n    type=\"text\"\n    role=\"combobox\"\n    #comboboxInput\n    cdkOverlayOrigin\n    [value]=\"value | listBoxOptionValueConverter : bindLabel()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (input)=\"onInputChange($any($event))\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\"\n>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"comboboxInput\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"comboboxInput.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option; let index = $index) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }] });
+        ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n    type=\"text\"\n    role=\"combobox\"\n    #comboboxInput\n    cdkOverlayOrigin\n    [value]=\"value | listBoxOptionValueConverter : bindLabel()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (input)=\"onInputChange($any($event))\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\"\n>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"comboboxInput\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"comboboxInput.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option; let index = $index) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-combobox', imports: [
                         CdkOverlayOrigin,
@@ -390,8 +390,8 @@ class CheckboxComponent {
         this.checked.set(!this.checked());
         this.onChange(this.checked());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CheckboxComponent, isStandalone: true, selector: "ngx-bsl-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "click": "onSelect()", "keyup.enter": "onSelect()", "keyup.space": "onSelect()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: CheckboxComponent, isStandalone: true, selector: "ngx-bsl-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "click": "onSelect()", "keyup.enter": "onSelect()", "keyup.space": "onSelect()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -399,7 +399,7 @@ class CheckboxComponent {
             },
         ], ngImport: i0, template: "<span role=\"checkbox\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-labelledby]=\"id() + '-label'\"\n      [id]=\"id()\"\n      [tabindex]=\"disabled() ? -1 : 0\"\n      class=\"checkbox\">\n    @if (checked()) {\n        <ngx-bsl-icon-check></ngx-bsl-icon-check>\n    }\n</span>\n\n<span [id]=\"id() + '-label'\">\n    <ng-content></ng-content>\n</span>\n", styles: [":host{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm)}.checkbox{width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;background-color:var(--bsl-checkbox-backgroundColor);border:1px solid var(--bsl-checkbox-borderColor);border-radius:4px;color:var(--bsl-checkbox-textColor)}.checkbox:focus-visible{outline-offset:2px}.checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-checkbox', imports: [
                         IconCheckComponent,
@@ -432,16 +432,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconXMarkComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconXMarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconXMarkComponent, isStandalone: true, selector: "ngx-bsl-icon-x-mark", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconXMarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconXMarkComponent, isStandalone: true, selector: "ngx-bsl-icon-x-mark", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
         <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20_20)" id="object-0" transform="matrix(0.5, 0, 0, 0.5, 0, 0)">
                 <path fill="currentColor" stroke="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0.490426 0.490426C1.14433 -0.163475 2.20451 -0.163475 2.85841 0.490426L24 21.632L45.1416 0.490426C45.7955 -0.163475 46.8557 -0.163475 47.5096 0.490426C48.1635 1.14433 48.1635 2.20451 47.5096 2.85841L26.368 24L47.5096 45.1416C48.1635 45.7955 48.1635 46.8557 47.5096 47.5096C46.8557 48.1635 45.7955 48.1635 45.1416 47.5096L24 26.368L2.85841 47.5096C2.20451 48.1635 1.14433 48.1635 0.490426 47.5096C-0.163475 46.8557 -0.163475 45.7955 0.490426 45.1416L21.632 24L0.490426 2.85841C-0.163475 2.20451 -0.163475 1.14433 0.490426 0.490426Z"></path>
             </g>
         </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconXMarkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconXMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-x-mark', imports: [], template: `
         <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -449,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 <path fill="currentColor" stroke="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0.490426 0.490426C1.14433 -0.163475 2.20451 -0.163475 2.85841 0.490426L24 21.632L45.1416 0.490426C45.7955 -0.163475 46.8557 -0.163475 47.5096 0.490426C48.1635 1.14433 48.1635 2.20451 47.5096 2.85841L26.368 24L47.5096 45.1416C48.1635 45.7955 48.1635 46.8557 47.5096 47.5096C46.8557 48.1635 45.7955 48.1635 45.1416 47.5096L24 26.368L2.85841 47.5096C2.20451 48.1635 1.14433 48.1635 0.490426 47.5096C-0.163475 46.8557 -0.163475 45.7955 0.490426 45.1416L21.632 24L0.490426 2.85841C-0.163475 2.20451 -0.163475 1.14433 0.490426 0.490426Z"></path>
             </g>
         </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 class DrawerComponent {
@@ -472,10 +472,10 @@ class DrawerComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DrawerComponent, isStandalone: true, selector: "ngx-bsl-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "attr.aria-label": "title()", "class.closed": "isClosed()" } }, ngImport: i0, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"drawer-container\">\n    <header>\n        <button class=\"button-icon\"\n                (click)=\"close()\">\n            <ngx-bsl-icon-x-mark></ngx-bsl-icon-x-mark>\n        </button>\n        @if (title()) {\n            <h2 class=\"text-ellipsis\">{{ title() }}</h2>\n        }\n    </header>\n    <div class=\"drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{position:fixed;left:0;right:0;bottom:0;max-height:95vh;height:100%;transform:translateY(0);transition:transform .15s cubic-bezier(0,0,.2,1)}:host.closed{transform:translateY(100%)}.drawer-container{height:100%;padding:24px;display:flex;flex-direction:column;background-color:var(--bsl-backgroundColor);border:1px solid var(--bsl-borderColor-emphasis);border-top-left-radius:1rem;border-top-right-radius:1rem}header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.drawer-content{overflow-y:auto;height:100%}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconXMarkComponent, selector: "ngx-bsl-icon-x-mark" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DrawerComponent, isStandalone: true, selector: "ngx-bsl-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "attr.aria-label": "title()", "class.closed": "isClosed()" } }, ngImport: i0, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"drawer-container\">\n    <header>\n        <button class=\"button-icon\"\n                (click)=\"close()\">\n            <ngx-bsl-icon-x-mark></ngx-bsl-icon-x-mark>\n        </button>\n        @if (title()) {\n            <h2 class=\"text-ellipsis\">{{ title() }}</h2>\n        }\n    </header>\n    <div class=\"drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{position:fixed;left:0;right:0;bottom:0;max-height:95vh;height:100%;transform:translateY(0);transition:transform .15s cubic-bezier(0,0,.2,1)}:host.closed{transform:translateY(100%)}.drawer-container{height:100%;padding:24px;display:flex;flex-direction:column;background-color:var(--bsl-backgroundColor);border:1px solid var(--bsl-borderColor-emphasis);border-top-left-radius:1rem;border-top-right-radius:1rem}header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.drawer-content{overflow-y:auto;height:100%}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconXMarkComponent, selector: "ngx-bsl-icon-x-mark" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-drawer', imports: [
                         CdkTrapFocus,
@@ -491,15 +491,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
 class ListBoxGroupComponent {
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ListBoxGroupComponent, isStandalone: true, selector: "ngx-bsl-list-box-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ListBoxGroupComponent, isStandalone: true, selector: "ngx-bsl-list-box-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (title()) {
             <div class="group-title">{{ title() }}</div>
         }
         <ng-content></ng-content>
   `, isInline: true, styles: [".group-title{padding:.375rem .5rem;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted);font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-list-box-group', imports: [], template: `
         @if (title()) {
@@ -511,10 +511,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 class ListBoxSeparatorComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ListBoxSeparatorComponent, isStandalone: true, selector: "ngx-bsl-list-box-separator", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;background-color:var(--bsl-list-box-borderColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ListBoxSeparatorComponent, isStandalone: true, selector: "ngx-bsl-list-box-separator", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;background-color:var(--bsl-list-box-borderColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListBoxSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxSeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-list-box-separator', imports: [], template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:1px;background-color:var(--bsl-list-box-borderColor)}\n"] }]
         }] });
@@ -524,20 +524,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconChevronDownComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconChevronDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconChevronDownComponent, isStandalone: true, selector: "ngx-bsl-icon-chevron-down", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconChevronDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconChevronDownComponent, isStandalone: true, selector: "ngx-bsl-icon-chevron-down", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8 L12 16 L20 8"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconChevronDownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconChevronDownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-chevron-down', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8 L12 16 L20 8"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -545,17 +545,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconCompanyComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconCompanyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconCompanyComponent, isStandalone: true, selector: "ngx-bsl-icon-company", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCompanyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCompanyComponent, isStandalone: true, selector: "ngx-bsl-icon-company", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <rect width="32" height="32" stroke="none" fill="#000000" opacity="0" transform="matrix(1, 0, 0, 1, 4.440892098500626e-16, 4.440892098500626e-16)"/>
           <g transform="matrix(2.6666669845581055, 0, 0, 2.6666669845581055, 16, 16)">
               <path style="stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: currentColor; fill-rule: nonzero; opacity: 1; stroke-width: 0px;" transform=" translate(-8, -8)" d="M 7.5 2 C 7.223869061895771 2.0000276089526747 7.000027608952674 2.223869061895771 7 2.5000000000000004 L 7 4 L 3.5 4 C 3.2238690618957704 4.000027608952675 3.0000276089526743 4.223869061895771 3 4.5 L 3 8 L 2.5 8 C 2.2238690618957704 8.000027608952674 2.0000276089526743 8.22386906189577 2 8.5 L 2 14 L 3 14 L 3 9 L 7 9 L 7 14 L 8 14 L 8 3 L 13 3 L 13 14 L 14 14 L 14 2.5 C 13.999972391047326 2.2238690618957704 13.77613093810423 2.0000276089526747 13.5 2 L 7.5 2 z M 9 4 L 9 5 L 10 5 L 10 4 L 9 4 z M 11 4 L 11 5 L 12 5 L 12 4 L 11 4 z M 4 5 L 7 5 L 7 8 L 4 8 L 4 5 z M 5 6 L 5 7 L 6 7 L 6 6 L 5 6 z M 9 6 L 9 7 L 10 7 L 10 6 L 9 6 z M 11 6 L 11 7 L 12 7 L 12 6 L 11 6 z M 9 8 L 9 9 L 10 9 L 10 8 L 9 8 z M 11 8 L 11 9 L 12 9 L 12 8 L 11 8 z M 4 10 L 4 11 L 6 11 L 6 10 L 4 10 z M 9 10 L 9 11 L 10 11 L 10 10 L 9 10 z M 11 10 L 11 11 L 12 11 L 12 10 L 11 10 z M 4 12 L 4 13 L 6 13 L 6 12 L 4 12 z M 9 12 L 9 13 L 10 13 L 10 12 L 9 12 z M 11 12 L 11 13 L 12 13 L 12 12 L 11 12 z" stroke-linecap="round"/>
           </g>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconCompanyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCompanyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-company', imports: [], template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
@@ -564,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <path style="stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: currentColor; fill-rule: nonzero; opacity: 1; stroke-width: 0px;" transform=" translate(-8, -8)" d="M 7.5 2 C 7.223869061895771 2.0000276089526747 7.000027608952674 2.223869061895771 7 2.5000000000000004 L 7 4 L 3.5 4 C 3.2238690618957704 4.000027608952675 3.0000276089526743 4.223869061895771 3 4.5 L 3 8 L 2.5 8 C 2.2238690618957704 8.000027608952674 2.0000276089526743 8.22386906189577 2 8.5 L 2 14 L 3 14 L 3 9 L 7 9 L 7 14 L 8 14 L 8 3 L 13 3 L 13 14 L 14 14 L 14 2.5 C 13.999972391047326 2.2238690618957704 13.77613093810423 2.0000276089526747 13.5 2 L 7.5 2 z M 9 4 L 9 5 L 10 5 L 10 4 L 9 4 z M 11 4 L 11 5 L 12 5 L 12 4 L 11 4 z M 4 5 L 7 5 L 7 8 L 4 8 L 4 5 z M 5 6 L 5 7 L 6 7 L 6 6 L 5 6 z M 9 6 L 9 7 L 10 7 L 10 6 L 9 6 z M 11 6 L 11 7 L 12 7 L 12 6 L 11 6 z M 9 8 L 9 9 L 10 9 L 10 8 L 9 8 z M 11 8 L 11 9 L 12 9 L 12 8 L 11 8 z M 4 10 L 4 11 L 6 11 L 6 10 L 4 10 z M 9 10 L 9 11 L 10 11 L 10 10 L 9 10 z M 11 10 L 11 11 L 12 11 L 12 10 L 11 10 z M 4 12 L 4 13 L 6 13 L 6 12 L 4 12 z M 9 12 L 9 13 L 10 13 L 10 12 L 9 12 z M 11 12 L 11 13 L 12 13 L 12 12 L 11 12 z" stroke-linecap="round"/>
           </g>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -572,17 +572,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconLanguageComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconLanguageComponent, isStandalone: true, selector: "ngx-bsl-icon-language", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLanguageComponent, isStandalone: true, selector: "ngx-bsl-icon-language", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <ellipse style="stroke: currentColor; fill: none; stroke-width: 1.5;" cx="16" cy="16" rx="12" ry="12"/>
           <ellipse style="stroke: currentColor; fill: none; stroke-width: 1.5;" cx="16" cy="16" rx="4.854" ry="11.903"/>
           <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 12px;" d="M 5.16 11.977 L 26.844 11.977"/>
           <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 20px;" d="M 5.16 20 L 26.844 20"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconLanguageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-language', imports: [], template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
@@ -591,7 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 12px;" d="M 5.16 11.977 L 26.844 11.977"/>
           <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 20px;" d="M 5.16 20 L 26.844 20"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -599,20 +599,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconLocationComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconLocationComponent, isStandalone: true, selector: "ngx-bsl-icon-location", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLocationComponent, isStandalone: true, selector: "ngx-bsl-icon-location", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12 0 C 7.583 0 4 3.583 4 8 C 4 12.418 8.666 18.668 12 24 C 15.332 18.668 20 12.418 20 8 C 20 3.583 16.418 0 12 0 Z M 12 12.668 C 10.159 12.668 8.666 11.174 8.666 9.334 C 8.666 7.491 10.159 6 12 6 C 13.841 6 15.332 7.491 15.332 9.334 C 15.332 11.174 13.841 12.668 12 12.668 Z" style="stroke-width: 0px;"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconLocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-location', imports: [], template: `
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12 0 C 7.583 0 4 3.583 4 8 C 4 12.418 8.666 18.668 12 24 C 15.332 18.668 20 12.418 20 8 C 20 3.583 16.418 0 12 0 Z M 12 12.668 C 10.159 12.668 8.666 11.174 8.666 9.334 C 8.666 7.491 10.159 6 12 6 C 13.841 6 15.332 7.491 15.332 9.334 C 15.332 11.174 13.841 12.668 12 12.668 Z" style="stroke-width: 0px;"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -620,20 +620,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconMoonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconMoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconMoonComponent, isStandalone: true, selector: "ngx-bsl-icon-moon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconMoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconMoonComponent, isStandalone: true, selector: "ngx-bsl-icon-moon", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <path style="stroke: currentColor; stroke-width: 1.5; fill: none;" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-0.7071068286895752, 0.7071068286895752, -0.7071068286895752, -0.7071068286895752, 934.2892456054688, -207.70388793945312)" d="M 801.408 479.913 A 12 12 0 1 1 801.408 502.087 A 11.598 11.598 0 0 0 801.408 479.913 Z"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconMoonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconMoonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-moon', imports: [], template: `
       <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <path style="stroke: currentColor; stroke-width: 1.5; fill: none;" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-0.7071068286895752, 0.7071068286895752, -0.7071068286895752, -0.7071068286895752, 934.2892456054688, -207.70388793945312)" d="M 801.408 479.913 A 12 12 0 1 1 801.408 502.087 A 11.598 11.598 0 0 0 801.408 479.913 Z"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -641,8 +641,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconSunComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconSunComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconSunComponent, isStandalone: true, selector: "ngx-bsl-icon-sun", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconSunComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconSunComponent, isStandalone: true, selector: "ngx-bsl-icon-sun", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M16 22.6667C19.6819 22.6667 22.6667 19.6819 22.6667 16C22.6667 12.3181 19.6819 9.33334 16 9.33334C12.3181 9.33334 9.33333 12.3181 9.33333 16C9.33333 19.6819 12.3181 22.6667 16 22.6667Z" stroke="currentColor" stroke-width="2"/>
           <path d="M16 2.66666V5.33332" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -654,9 +654,9 @@ class IconSunComponent {
           <path d="M8.59245 23.4076L5.62948 26.3705" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           <path d="M26.3704 26.3697L23.4077 23.4068" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconSunComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconSunComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-sun', imports: [], template: `
       <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -670,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           <path d="M8.59245 23.4076L5.62948 26.3705" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           <path d="M26.3704 26.3697L23.4077 23.4068" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -678,20 +678,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconArrowLeftComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconArrowLeftComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
           <path fill="currentColor" d="M 16.453 0.282 C 16.536 0.195 16.636 0.124 16.744 0.075 C 16.853 0.025 16.971 0 17.091 0 C 17.211 0 17.331 0.025 17.439 0.075 C 17.547 0.124 17.647 0.195 17.731 0.282 C 17.902 0.469 17.997 0.714 17.997 0.975 C 17.997 1.23 17.902 1.48 17.731 1.662 L 8.166 11.995 L 17.731 22.333 C 17.817 22.425 17.883 22.536 17.931 22.657 C 17.979 22.777 18.003 22.905 18 23.032 C 17.997 23.161 17.971 23.293 17.922 23.413 C 17.874 23.532 17.803 23.641 17.715 23.728 C 17.631 23.815 17.535 23.883 17.425 23.928 C 17.314 23.976 17.199 24 17.079 24 C 16.962 23.995 16.849 23.968 16.741 23.92 C 16.633 23.871 16.533 23.8 16.453 23.713 L 6.279 12.718 C 6.102 12.525 6 12.267 6 11.995 C 6 11.727 6.102 11.467 6.279 11.274 L 16.453 0.282 Z"></path>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowLeftComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-arrow-left', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
           <path fill="currentColor" d="M 16.453 0.282 C 16.536 0.195 16.636 0.124 16.744 0.075 C 16.853 0.025 16.971 0 17.091 0 C 17.211 0 17.331 0.025 17.439 0.075 C 17.547 0.124 17.647 0.195 17.731 0.282 C 17.902 0.469 17.997 0.714 17.997 0.975 C 17.997 1.23 17.902 1.48 17.731 1.662 L 8.166 11.995 L 17.731 22.333 C 17.817 22.425 17.883 22.536 17.931 22.657 C 17.979 22.777 18.003 22.905 18 23.032 C 17.997 23.161 17.971 23.293 17.922 23.413 C 17.874 23.532 17.803 23.641 17.715 23.728 C 17.631 23.815 17.535 23.883 17.425 23.928 C 17.314 23.976 17.199 24 17.079 24 C 16.962 23.995 16.849 23.968 16.741 23.92 C 16.633 23.871 16.533 23.8 16.453 23.713 L 6.279 12.718 C 6.102 12.525 6 12.267 6 11.995 C 6 11.727 6.102 11.467 6.279 11.274 L 16.453 0.282 Z"></path>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -699,20 +699,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconArrowRightComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconArrowRightComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 7.547 0.284 C 7.464 0.194 7.364 0.123 7.255 0.074 C 7.145 0.025 7.026 0 6.907 0 C 6.788 0 6.67 0.025 6.56 0.074 C 6.45 0.123 6.35 0.194 6.267 0.284 C 6.096 0.469 6.001 0.716 6.001 0.974 C 6.001 1.231 6.096 1.479 6.267 1.663 L 15.834 11.998 L 6.267 22.334 C 6.181 22.427 6.113 22.537 6.067 22.657 C 6.021 22.778 5.999 22.907 6 23.036 C 6.001 23.166 6.027 23.294 6.076 23.414 C 6.124 23.533 6.195 23.641 6.283 23.732 C 6.367 23.818 6.466 23.886 6.575 23.932 C 6.684 23.978 6.801 24.001 6.918 24 C 7.036 23.998 7.152 23.972 7.26 23.923 C 7.368 23.875 7.465 23.804 7.547 23.715 L 17.721 12.719 C 17.9 12.526 18 12.267 18 11.998 C 18 11.728 17.9 11.469 17.721 11.276 L 7.547 0.284 Z"></path>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowRightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-arrow-right', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 7.547 0.284 C 7.464 0.194 7.364 0.123 7.255 0.074 C 7.145 0.025 7.026 0 6.907 0 C 6.788 0 6.67 0.025 6.56 0.074 C 6.45 0.123 6.35 0.194 6.267 0.284 C 6.096 0.469 6.001 0.716 6.001 0.974 C 6.001 1.231 6.096 1.479 6.267 1.663 L 15.834 11.998 L 6.267 22.334 C 6.181 22.427 6.113 22.537 6.067 22.657 C 6.021 22.778 5.999 22.907 6 23.036 C 6.001 23.166 6.027 23.294 6.076 23.414 C 6.124 23.533 6.195 23.641 6.283 23.732 C 6.367 23.818 6.466 23.886 6.575 23.932 C 6.684 23.978 6.801 24.001 6.918 24 C 7.036 23.998 7.152 23.972 7.26 23.923 C 7.368 23.875 7.465 23.804 7.547 23.715 L 17.721 12.719 C 17.9 12.526 18 12.267 18 11.998 C 18 11.728 17.9 11.469 17.721 11.276 L 7.547 0.284 Z"></path>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -720,20 +720,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconArrowLeftDoubleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowLeftDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconArrowLeftDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left-double", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left-double", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12.529 0.284 C 12.614 0.194 12.714 0.123 12.825 0.074 C 12.936 0.025 13.055 0 13.175 0 C 13.295 0 13.414 0.025 13.524 0.074 C 13.636 0.123 13.736 0.194 13.82 0.284 C 13.992 0.469 14.087 0.716 14.087 0.974 C 14.087 1.232 13.992 1.479 13.82 1.664 L 4.181 11.998 L 13.82 22.334 C 13.906 22.427 13.975 22.537 14.021 22.657 C 14.067 22.778 14.089 22.907 14.088 23.037 C 14.087 23.166 14.061 23.295 14.013 23.414 C 13.963 23.533 13.893 23.641 13.803 23.732 C 13.719 23.818 13.619 23.887 13.509 23.933 C 13.399 23.979 13.282 24.001 13.163 24 C 13.045 23.998 12.928 23.972 12.82 23.924 C 12.711 23.875 12.613 23.804 12.529 23.715 L 2.281 12.72 C 2.101 12.526 2 12.268 2 11.998 C 2 11.728 2.101 11.469 2.281 11.276 L 12.529 0.284 Z M 20.441 0.284 C 20.525 0.194 20.625 0.123 20.736 0.074 C 20.847 0.025 20.966 0 21.086 0 C 21.206 0 21.325 0.025 21.436 0.074 C 21.546 0.123 21.647 0.194 21.729 0.284 C 21.903 0.469 21.999 0.716 21.999 0.974 C 21.999 1.232 21.903 1.479 21.729 1.664 L 12.093 11.998 L 21.729 22.334 C 21.818 22.427 21.886 22.537 21.933 22.657 C 21.978 22.778 22.001 22.907 22 23.037 C 21.999 23.166 21.973 23.295 21.923 23.414 C 21.875 23.533 21.804 23.641 21.715 23.732 C 21.629 23.818 21.529 23.887 21.42 23.933 C 21.309 23.979 21.194 24.001 21.075 24 C 20.957 23.998 20.84 23.972 20.729 23.924 C 20.622 23.875 20.524 23.804 20.441 23.715 L 10.193 12.72 C 10.013 12.526 9.912 12.268 9.912 11.998 C 9.912 11.728 10.013 11.469 10.193 11.276 L 20.441 0.284 Z"></path>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowLeftDoubleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftDoubleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-arrow-left-double', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12.529 0.284 C 12.614 0.194 12.714 0.123 12.825 0.074 C 12.936 0.025 13.055 0 13.175 0 C 13.295 0 13.414 0.025 13.524 0.074 C 13.636 0.123 13.736 0.194 13.82 0.284 C 13.992 0.469 14.087 0.716 14.087 0.974 C 14.087 1.232 13.992 1.479 13.82 1.664 L 4.181 11.998 L 13.82 22.334 C 13.906 22.427 13.975 22.537 14.021 22.657 C 14.067 22.778 14.089 22.907 14.088 23.037 C 14.087 23.166 14.061 23.295 14.013 23.414 C 13.963 23.533 13.893 23.641 13.803 23.732 C 13.719 23.818 13.619 23.887 13.509 23.933 C 13.399 23.979 13.282 24.001 13.163 24 C 13.045 23.998 12.928 23.972 12.82 23.924 C 12.711 23.875 12.613 23.804 12.529 23.715 L 2.281 12.72 C 2.101 12.526 2 12.268 2 11.998 C 2 11.728 2.101 11.469 2.281 11.276 L 12.529 0.284 Z M 20.441 0.284 C 20.525 0.194 20.625 0.123 20.736 0.074 C 20.847 0.025 20.966 0 21.086 0 C 21.206 0 21.325 0.025 21.436 0.074 C 21.546 0.123 21.647 0.194 21.729 0.284 C 21.903 0.469 21.999 0.716 21.999 0.974 C 21.999 1.232 21.903 1.479 21.729 1.664 L 12.093 11.998 L 21.729 22.334 C 21.818 22.427 21.886 22.537 21.933 22.657 C 21.978 22.778 22.001 22.907 22 23.037 C 21.999 23.166 21.973 23.295 21.923 23.414 C 21.875 23.533 21.804 23.641 21.715 23.732 C 21.629 23.818 21.529 23.887 21.42 23.933 C 21.309 23.979 21.194 24.001 21.075 24 C 20.957 23.998 20.84 23.972 20.729 23.924 C 20.622 23.875 20.524 23.804 20.441 23.715 L 10.193 12.72 C 10.013 12.526 9.912 12.268 9.912 11.998 C 9.912 11.728 10.013 11.469 10.193 11.276 L 20.441 0.284 Z"></path>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 /*
@@ -741,20 +741,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     @typescript-eslint/no-extraneous-class
 */
 class IconArrowRightDoubleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowRightDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconArrowRightDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right-double", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right-double", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12.523 0.284 C 12.448 0.194 12.358 0.123 12.257 0.074 C 12.158 0.025 12.051 0 11.943 0 C 11.835 0 11.728 0.025 11.628 0.074 C 11.528 0.123 11.438 0.194 11.362 0.284 C 11.208 0.469 11.121 0.716 11.121 0.974 C 11.121 1.232 11.208 1.479 11.362 1.664 L 20.037 11.998 L 11.362 22.334 C 11.284 22.427 11.223 22.537 11.181 22.657 C 11.139 22.778 11.119 22.907 11.12 23.037 C 11.121 23.166 11.145 23.295 11.189 23.414 C 11.233 23.533 11.297 23.641 11.376 23.732 C 11.453 23.818 11.543 23.887 11.641 23.933 C 11.741 23.979 11.846 24.001 11.953 24 C 12.059 23.998 12.164 23.972 12.262 23.924 C 12.361 23.875 12.449 23.804 12.523 23.715 L 21.747 12.72 C 21.909 12.526 22 12.268 22 11.998 C 22 11.728 21.909 11.469 21.747 11.276 L 12.523 0.284 Z M 5.403 0.284 C 5.327 0.194 5.237 0.123 5.138 0.074 C 5.037 0.025 4.93 0 4.822 0 C 4.714 0 4.607 0.025 4.508 0.074 C 4.408 0.123 4.317 0.194 4.243 0.284 C 4.087 0.469 4.001 0.716 4.001 0.974 C 4.001 1.232 4.087 1.479 4.243 1.664 L 12.917 11.998 L 4.243 22.334 C 4.164 22.427 4.102 22.537 4.061 22.657 C 4.02 22.778 3.999 22.907 4 23.037 C 4.001 23.166 4.025 23.295 4.069 23.414 C 4.113 23.533 4.176 23.641 4.257 23.732 C 4.333 23.818 4.423 23.887 4.522 23.933 C 4.621 23.979 4.726 24.001 4.833 24 C 4.939 23.998 5.044 23.972 5.143 23.924 C 5.24 23.875 5.328 23.804 5.403 23.715 L 14.627 12.72 C 14.789 12.526 14.88 12.268 14.88 11.998 C 14.88 11.728 14.789 11.469 14.627 11.276 L 5.403 0.284 Z"></path>
       </svg>
-  `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconArrowRightDoubleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightDoubleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-icon-arrow-right-double', imports: [], template: `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M 12.523 0.284 C 12.448 0.194 12.358 0.123 12.257 0.074 C 12.158 0.025 12.051 0 11.943 0 C 11.835 0 11.728 0.025 11.628 0.074 C 11.528 0.123 11.438 0.194 11.362 0.284 C 11.208 0.469 11.121 0.716 11.121 0.974 C 11.121 1.232 11.208 1.479 11.362 1.664 L 20.037 11.998 L 11.362 22.334 C 11.284 22.427 11.223 22.537 11.181 22.657 C 11.139 22.778 11.119 22.907 11.12 23.037 C 11.121 23.166 11.145 23.295 11.189 23.414 C 11.233 23.533 11.297 23.641 11.376 23.732 C 11.453 23.818 11.543 23.887 11.641 23.933 C 11.741 23.979 11.846 24.001 11.953 24 C 12.059 23.998 12.164 23.972 12.262 23.924 C 12.361 23.875 12.449 23.804 12.523 23.715 L 21.747 12.72 C 21.909 12.526 22 12.268 22 11.998 C 22 11.728 21.909 11.469 21.747 11.276 L 12.523 0.284 Z M 5.403 0.284 C 5.327 0.194 5.237 0.123 5.138 0.074 C 5.037 0.025 4.93 0 4.822 0 C 4.714 0 4.607 0.025 4.508 0.074 C 4.408 0.123 4.317 0.194 4.243 0.284 C 4.087 0.469 4.001 0.716 4.001 0.974 C 4.001 1.232 4.087 1.479 4.243 1.664 L 12.917 11.998 L 4.243 22.334 C 4.164 22.427 4.102 22.537 4.061 22.657 C 4.02 22.778 3.999 22.907 4 23.037 C 4.001 23.166 4.025 23.295 4.069 23.414 C 4.113 23.533 4.176 23.641 4.257 23.732 C 4.333 23.818 4.423 23.887 4.522 23.933 C 4.621 23.979 4.726 24.001 4.833 24 C 4.939 23.998 5.044 23.972 5.143 23.924 C 5.24 23.875 5.328 23.804 5.403 23.715 L 14.627 12.72 C 14.789 12.526 14.88 12.268 14.88 11.998 C 14.88 11.728 14.789 11.469 14.627 11.276 L 5.403 0.284 Z"></path>
       </svg>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
+  `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
         }] });
 
 class PaginationComponent {
@@ -816,10 +816,10 @@ class PaginationComponent {
             this.inputRef().nativeElement.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: PaginationComponent, isStandalone: true, selector: "ngx-bsl-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, nextPageAriaLabel: { classPropertyName: "nextPageAriaLabel", publicName: "nextPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageAriaLabel: { classPropertyName: "previousPageAriaLabel", publicName: "previousPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageAriaLabel: { classPropertyName: "firstPageAriaLabel", publicName: "firstPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageAriaLabel: { classPropertyName: "lastPageAriaLabel", publicName: "lastPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPageAriaLabel: { classPropertyName: "selectPageAriaLabel", publicName: "selectPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPageAriaLabelledBy: { classPropertyName: "selectPageAriaLabelledBy", publicName: "selectPageAriaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"firstPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === 1\"\n    (click)=\"onFirstPage($any($event))\">\n    <ngx-bsl-icon-arrow-left-double></ngx-bsl-icon-arrow-left-double>\n</button>\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"previousPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === 1\"\n    (click)=\"onPreviousPage($any($event))\">\n    <ngx-bsl-icon-arrow-left></ngx-bsl-icon-arrow-left>\n</button>\n\n<input\n    type=\"number\"\n    [attr.aria-label]=\"selectPageAriaLabel()\"\n    [attr.aria-labelledby]=\"selectPageAriaLabelledBy()\"\n    [disabled]=\"disabled()\"\n    [min]=\"1\"\n    [max]=\"pages()\"\n    [value]=\"page()\"\n    (blur)=\"onInputBlur($any($event.target).valueAsNumber)\"\n    (keydown.enter)=\"onInputEnter()\">\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"nextPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === pages()\"\n    (click)=\"onNextPage($any($event))\">\n    <ngx-bsl-icon-arrow-right></ngx-bsl-icon-arrow-right>\n</button>\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"lastPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === pages()\"\n    (click)=\"onLastPage($any($event))\">\n    <ngx-bsl-icon-arrow-right-double></ngx-bsl-icon-arrow-right-double>\n</button>\n", styles: [":host{display:flex;justify-content:center;align-items:center;gap:12px}:host input{width:3.5rem;height:2.25rem;padding:.5rem;text-align:center}\n"], dependencies: [{ kind: "component", type: IconArrowLeftComponent, selector: "ngx-bsl-icon-arrow-left" }, { kind: "component", type: IconArrowRightComponent, selector: "ngx-bsl-icon-arrow-right" }, { kind: "component", type: IconArrowLeftDoubleComponent, selector: "ngx-bsl-icon-arrow-left-double" }, { kind: "component", type: IconArrowRightDoubleComponent, selector: "ngx-bsl-icon-arrow-right-double" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: PaginationComponent, isStandalone: true, selector: "ngx-bsl-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, nextPageAriaLabel: { classPropertyName: "nextPageAriaLabel", publicName: "nextPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageAriaLabel: { classPropertyName: "previousPageAriaLabel", publicName: "previousPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageAriaLabel: { classPropertyName: "firstPageAriaLabel", publicName: "firstPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageAriaLabel: { classPropertyName: "lastPageAriaLabel", publicName: "lastPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPageAriaLabel: { classPropertyName: "selectPageAriaLabel", publicName: "selectPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPageAriaLabelledBy: { classPropertyName: "selectPageAriaLabelledBy", publicName: "selectPageAriaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"firstPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === 1\"\n    (click)=\"onFirstPage($any($event))\">\n    <ngx-bsl-icon-arrow-left-double></ngx-bsl-icon-arrow-left-double>\n</button>\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"previousPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === 1\"\n    (click)=\"onPreviousPage($any($event))\">\n    <ngx-bsl-icon-arrow-left></ngx-bsl-icon-arrow-left>\n</button>\n\n<input\n    type=\"number\"\n    [attr.aria-label]=\"selectPageAriaLabel()\"\n    [attr.aria-labelledby]=\"selectPageAriaLabelledBy()\"\n    [disabled]=\"disabled()\"\n    [min]=\"1\"\n    [max]=\"pages()\"\n    [value]=\"page()\"\n    (blur)=\"onInputBlur($any($event.target).valueAsNumber)\"\n    (keydown.enter)=\"onInputEnter()\">\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"nextPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === pages()\"\n    (click)=\"onNextPage($any($event))\">\n    <ngx-bsl-icon-arrow-right></ngx-bsl-icon-arrow-right>\n</button>\n\n<button\n    type=\"button\"\n    class=\"button-icon\"\n    [attr.aria-label]=\"lastPageAriaLabel()\"\n    [disabled]=\"disabled() || page() === pages()\"\n    (click)=\"onLastPage($any($event))\">\n    <ngx-bsl-icon-arrow-right-double></ngx-bsl-icon-arrow-right-double>\n</button>\n", styles: [":host{display:flex;justify-content:center;align-items:center;gap:12px}:host input{width:3.5rem;height:2.25rem;padding:.5rem;text-align:center}\n"], dependencies: [{ kind: "component", type: IconArrowLeftComponent, selector: "ngx-bsl-icon-arrow-left" }, { kind: "component", type: IconArrowRightComponent, selector: "ngx-bsl-icon-arrow-right" }, { kind: "component", type: IconArrowLeftDoubleComponent, selector: "ngx-bsl-icon-arrow-left-double" }, { kind: "component", type: IconArrowRightDoubleComponent, selector: "ngx-bsl-icon-arrow-right-double" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-pagination', imports: [
                         IconArrowLeftComponent,
@@ -882,14 +882,14 @@ class RangeThumbComponent {
         this.disposePointerUpListener();
         this.disposePointerMoveListener();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangeThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: RangeThumbComponent, isStandalone: true, selector: "ngx-bsl-range-thumb", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { positionChanged: "positionChanged" }, host: { listeners: { "keydown.arrowLeft": "positionChanged.emit(RangeMoveDirection.BACKWARD)", "keydown.arrowRight": "positionChanged.emit(RangeMoveDirection.FORWARD)", "pointerdown": "onPointerDown($event)" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: RangeThumbComponent, isStandalone: true, selector: "ngx-bsl-range-thumb", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { positionChanged: "positionChanged" }, host: { listeners: { "keydown.arrowLeft": "positionChanged.emit(RangeMoveDirection.BACKWARD)", "keydown.arrowRight": "positionChanged.emit(RangeMoveDirection.FORWARD)", "pointerdown": "onPointerDown($event)" } }, ngImport: i0, template: `
         @if (showLabel()) {
             <span class="thumb-label">{{value()}}</span>
         }
     `, isInline: true, styles: [":host{position:absolute;width:.75rem;height:.75rem;border-radius:.375rem;background-color:var(--bsl-range-thumb-backgroundColor);cursor:pointer;touch-action:none}:host .thumb-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font:var(--bsl-font-sm)}:host.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangeThumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeThumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-range-thumb', imports: [], template: `
         @if (showLabel()) {
@@ -1101,8 +1101,8 @@ class RangeComponent {
     ngOnDestroy() {
         this.resizeObserver.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: RangeComponent, isStandalone: true, selector: "ngx-bsl-range", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, showThumbLabels: { classPropertyName: "showThumbLabels", publicName: "showThumbLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: RangeComponent, isStandalone: true, selector: "ngx-bsl-range", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, showThumbLabels: { classPropertyName: "showThumbLabels", publicName: "showThumbLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1110,7 +1110,7 @@ class RangeComponent {
             },
         ], viewQueries: [{ propertyName: "thumbFromRef", first: true, predicate: ["thumbFrom"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "thumbToRef", first: true, predicate: ["thumbTo"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"range\">\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\n    <div class=\"rail\"\n         [class.disabled]=\"disabled()\"\n         (click)=\"onRailClick($event)\">\n    </div>\n\n    <div class=\"tracker\"\n         [class.disabled]=\"disabled()\"\n         [style.left]=\"trackerLeft()\"\n         [style.right]=\"trackerRight()\">\n    </div>\n\n    <ngx-bsl-range-thumb\n        #thumbFrom\n        role=\"slider\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"value().to\"\n        [attr.aria-valuenow]=\"value().from\"\n        [attr.aria-valuetext]=\"value().from + ' - ' + value().to\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [tabindex]=\"disabled() ? -1 : 0\"\n        [class.disabled]=\"disabled()\"\n        [style.left]=\"thumbFromPosition() + 'px'\"\n        [style.z-index]=\"overlappingThumb() === 'from' ? 1 : 0\"\n        [value]=\"value().from\"\n        [ratio]=\"this.ratio()\"\n        [showLabel]=\"showThumbLabels()\"\n        (focus)=\"overlappingThumb.set(Thumb.FROM)\"\n        (positionChanged)=\"onPositionChangedThumbFrom($event)\">\n    </ngx-bsl-range-thumb>\n\n    <ngx-bsl-range-thumb\n        #thumbTo\n        role=\"slider\"\n        [attr.aria-valuemin]=\"value().from\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value().to\"\n        [attr.aria-valuetext]=\"value().from + ' - ' + value().to\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [tabindex]=\"disabled() ? -1 : 0\"\n        [class.disabled]=\"disabled()\"\n        [style.left]=\"thumbToPosition() + 'px'\"\n        [style.z-index]=\"overlappingThumb() === 'to' ? 1 : 0\"\n        [value]=\"value().to\"\n        [ratio]=\"this.ratio()\"\n        [showLabel]=\"showThumbLabels()\"\n        (focus)=\"overlappingThumb.set(Thumb.TO)\"\n        (positionChanged)=\"onPositionChangedThumbTo($event)\">\n    </ngx-bsl-range-thumb>\n</div>\n\n<div class=\"limits\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n</div>\n", styles: [":host{display:flex;align-items:center;flex-direction:column}:host .range{position:relative;height:.75rem;width:100%;display:flex;align-items:center}:host .range .rail{height:.25rem;width:100%;border-radius:.125rem;background-color:var(--bsl-range-rail-backgroundColor);cursor:pointer}:host .range .rail.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}:host .range .tracker{position:absolute;height:.25rem;background-color:var(--bsl-range-tracker-backgroundColor);pointer-events:none}:host .range .tracker.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}:host .limits{width:100%;display:flex;justify-content:space-between;font:var(--bsl-font-sm)}\n"], dependencies: [{ kind: "component", type: RangeThumbComponent, selector: "ngx-bsl-range-thumb", inputs: ["ratio", "value", "showLabel"], outputs: ["positionChanged"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-range', imports: [
                         RangeThumbComponent,
@@ -1140,7 +1140,7 @@ class SelectComponent {
     listBox = viewChild(ListBoxComponent, ...(ngDevMode ? [{ debugName: "listBox" }] : []));
     onChange = (_value) => { };
     onTouch = () => { };
-    value = null;
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     ariaActiveDescendant = computed(() => this.listBox()?.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
     initialFocusedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "initialFocusedOptionIndex" }] : []));
@@ -1160,8 +1160,8 @@ class SelectComponent {
         }
     }
     onSelectOption(value) {
-        this.value = value;
-        this.onChange(this.value);
+        this.value.set(value);
+        this.onChange(value);
         this.hideListBox();
     }
     onKeydown(event) {
@@ -1186,18 +1186,18 @@ class SelectComponent {
         this.onTouch = onTouch;
     }
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SelectComponent, isStandalone: true, selector: "ngx-bsl-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SelectComponent, isStandalone: true, selector: "ngx-bsl-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.space)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\">\n    @if (iconMode()) {\n        <ng-content select=\"[data-custom-icon]\"></ng-content>\n    } @else {\n        <span>{{ value ? (value | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n        @if (customIcon()) {\n            <ng-content select=\"[data-custom-icon]\"></ng-content>\n        } @else {\n            <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n        }\n    }\n</button>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectButton\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", styles: ["button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: IconChevronDownComponent, selector: "ngx-bsl-icon-chevron-down" }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }] });
+        ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    class=\"bsl-select-button\"\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    [class.button-icon]=\"iconMode()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.space)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\">\n    @if (iconMode()) {\n        <ng-content select=\"[data-custom-icon]\"></ng-content>\n    } @else {\n        <span>{{ value() ? (value() | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n        @if (customIcon()) {\n            <ng-content select=\"[data-custom-icon]\"></ng-content>\n        } @else {\n            <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n        }\n    }\n</button>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectButton\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value()\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", styles: [".bsl-select-button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}.bsl-select-button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: IconChevronDownComponent, selector: "ngx-bsl-icon-chevron-down" }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-select', imports: [
                         CdkOverlayOrigin,
@@ -1212,15 +1212,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.space)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\">\n    @if (iconMode()) {\n        <ng-content select=\"[data-custom-icon]\"></ng-content>\n    } @else {\n        <span>{{ value ? (value | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n        @if (customIcon()) {\n            <ng-content select=\"[data-custom-icon]\"></ng-content>\n        } @else {\n            <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n        }\n    }\n</button>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectButton\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", styles: ["button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], customIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcon", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListBoxComponent), { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    class=\"bsl-select-button\"\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"'list-box-' + id()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    [class.button-icon]=\"iconMode()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onKeydown($any($event))\"\n    (keydown.space)=\"onKeydown($any($event))\"\n    (keydown.arrowUp)=\"onKeydown($any($event))\"\n    (keydown.arrowDown)=\"onKeydown($any($event))\"\n    (keydown.escape)=\"hideListBox()\">\n    @if (iconMode()) {\n        <ng-content select=\"[data-custom-icon]\"></ng-content>\n    } @else {\n        <span>{{ value() ? (value() | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n        @if (customIcon()) {\n            <ng-content select=\"[data-custom-icon]\"></ng-content>\n        } @else {\n            <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n        }\n    }\n</button>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectButton\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n    (overlayOutsideClick)=\"hideListBox()\">\n    <ngx-bsl-list-box\n        [initialValue]=\"value()\"\n        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @for (option of options(); track option) {\n            <ngx-bsl-list-box-option\n                [id]=\"'list-box-option-' + id()\"\n                [value]=\"option\">\n                <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n            </ngx-bsl-list-box-option>\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n", styles: [".bsl-select-button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}.bsl-select-button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], customIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcon", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListBoxComponent), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TooltipComponent {
     message = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TooltipComponent, isStandalone: true, selector: "ngx-bsl-tooltip", host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: '{{message}}', isInline: true, styles: [":host{padding:4px 8px;border-radius:4px;background-color:var(--bsl-tooltip-backgroundColor);font:var(--bsl-font-xs);color:var(--bsl-tooltip-textColor)}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: TooltipComponent, isStandalone: true, selector: "ngx-bsl-tooltip", host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: '{{message}}', isInline: true, styles: [":host{padding:4px 8px;border-radius:4px;background-color:var(--bsl-tooltip-backgroundColor);font:var(--bsl-font-xs);color:var(--bsl-tooltip-textColor)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-tooltip', imports: [], template: '{{message}}', host: { 'role': 'tooltip' }, styles: [":host{padding:4px 8px;border-radius:4px;background-color:var(--bsl-tooltip-backgroundColor);font:var(--bsl-font-xs);color:var(--bsl-tooltip-textColor)}\n"] }]
         }] });
@@ -1306,10 +1306,10 @@ class TooltipDirective {
         }
         return positionStrategy;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: TooltipDirective, isStandalone: true, selector: "[ngxBslTooltip]", inputs: { message: { classPropertyName: "message", publicName: "ngxBslTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TooltipDirective, isStandalone: true, selector: "[ngxBslTooltip]", inputs: { message: { classPropertyName: "message", publicName: "ngxBslTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxBslTooltip]',
@@ -1322,8 +1322,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBslTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
-/* eslint-disable max-len */
-
 /**
  * Generated bundle index. Do not edit.
  */