ngx-bsl 0.0.11 → 0.0.16

package/fesm2022/ngx-bsl.mjs

@@ -1,17 +1,12 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, input, inject, computed, output, contentChildren, ElementRef, signal, forwardRef, HostListener, Pipe, viewChild, effect, afterNextRender, model, Renderer2, DOCUMENT, Directive } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, input, contentChildren, ElementRef, signal, Directive, inject, DestroyRef, output, model, computed, effect, forwardRef, HostListener, afterNextRender, viewChild, Renderer2, DOCUMENT } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';
+import { Subject } from 'rxjs';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { ComponentPortal } from '@angular/cdk/portal';
 
-class IdGenerator {
-    id = 0;
-    nextId() {
-        return this.id++;
-    }
-}
-
 /*
     eslint-disable max-len,
     @typescript-eslint/no-extraneous-class
@@ -36,16 +31,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 class ListBoxOptionComponent {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
-    optionIdGenerator = inject(IdGenerator);
-    listBoxOptionId = computed(() => {
-        const id = this.optionIdGenerator.nextId();
-        return `${this.id()}-${id}`;
-    }, ...(ngDevMode ? [{ debugName: "listBoxOptionId" }] : []));
     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: `
+    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": "id()" } }, ngImport: i0, template: `
         <ng-content></ng-content>
         <ngx-bsl-icon-check></ngx-bsl-icon-check>
-    `, isInline: true, styles: ["ngx-bsl-list-box-option{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}ngx-bsl-list-box-option:hover,ngx-bsl-list-box-option.visual-focus{background-color:var(--bsl-list-box-backgroundColor-hover)}ngx-bsl-list-box-option[aria-selected=true] ngx-bsl-icon-check{display:inline;visibility:visible}ngx-bsl-list-box-option 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, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["ngx-bsl-list-box-option{position:relative;padding:.375rem 1.25rem .375rem 1rem;border-radius:4px;font:var(--bsl-font-sm);color:var(--bsl-textColor);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ngx-bsl-list-box-option:hover,ngx-bsl-list-box-option.visual-focus{background-color:var(--bsl-list-box-backgroundColor-hover)}ngx-bsl-list-box-option[aria-selected=true] ngx-bsl-icon-check{display:inline;visibility:visible}ngx-bsl-list-box-option 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, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxOptionComponent, decorators: [{
             type: Component,
@@ -56,33 +46,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         <ngx-bsl-icon-check></ngx-bsl-icon-check>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'role': 'option',
-                        '[attr.id]': 'listBoxOptionId()',
-                    }, styles: ["ngx-bsl-list-box-option{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}ngx-bsl-list-box-option:hover,ngx-bsl-list-box-option.visual-focus{background-color:var(--bsl-list-box-backgroundColor-hover)}ngx-bsl-list-box-option[aria-selected=true] ngx-bsl-icon-check{display:inline;visibility:visible}ngx-bsl-list-box-option ngx-bsl-icon-check{display:none;visibility:hidden;position:absolute;right:0;color:var(--bsl-textColor)}\n"] }]
+                        '[attr.id]': 'id()',
+                    }, styles: ["ngx-bsl-list-box-option{position:relative;padding:.375rem 1.25rem .375rem 1rem;border-radius:4px;font:var(--bsl-font-sm);color:var(--bsl-textColor);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ngx-bsl-list-box-option:hover,ngx-bsl-list-box-option.visual-focus{background-color:var(--bsl-list-box-backgroundColor-hover)}ngx-bsl-list-box-option[aria-selected=true] ngx-bsl-icon-check{display:inline;visibility:visible}ngx-bsl-list-box-option ngx-bsl-icon-check{display:none;visibility:hidden;position:absolute;right:0;color:var(--bsl-textColor)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }] } });
 
-class ListBoxComponent {
-    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
-    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
-    ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : []));
-    exposeAriaActiveDescendant = input(false, ...(ngDevMode ? [{ debugName: "exposeAriaActiveDescendant" }] : []));
-    comparisonField = input(...(ngDevMode ? [undefined, { debugName: "comparisonField" }] : []));
-    initialValue = input(...(ngDevMode ? [undefined, { debugName: "initialValue" }] : []));
-    initialFocusedOptionIndex = input(null, ...(ngDevMode ? [{ debugName: "initialFocusedOptionIndex" }] : []));
-    selectOption = output();
-    listBoxOptions = contentChildren((ListBoxOptionComponent), ...(ngDevMode ? [{ debugName: "listBoxOptions" }] : []));
+class ListBoxDirective {
+    listBoxId = input(...(ngDevMode ? [undefined, { debugName: "listBoxId" }] : []));
+    listBoxAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "listBoxAriaLabel" }] : []));
+    listBoxAriaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "listBoxAriaLabelledby" }] : []));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    optionValueEquality = input((value, optionValue) => value === optionValue, ...(ngDevMode ? [{ debugName: "optionValueEquality" }] : []));
+    listBoxOptions = contentChildren((ListBoxOptionComponent), ...(ngDevMode ? [{ debugName: "listBoxOptions", descendants: true }] : [{ descendants: true }]));
     listBoxOptionRefs = contentChildren(ListBoxOptionComponent, ...(ngDevMode ? [{ debugName: "listBoxOptionRefs", descendants: true, read: (ElementRef) }] : [{ descendants: true, read: (ElementRef) }]));
     ariaActiveDescendant = signal(null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
-    onChange = (_value) => { };
-    onTouch = () => { };
-    value = null;
-    ngOnInit() {
-        const initialValue = this.initialValue();
-        if (initialValue) {
-            this.value = initialValue;
+    selectOption = new Subject();
+    hasAriaSelected = true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setVisualMarkups(value) {
+        this.clearVisualFocus();
+        this.removeSelectedAttribute();
+        const optionIndex = this.listBoxOptions()
+            .findIndex(option => this.optionValueEquality()(value, option.value()));
+        if (optionIndex !== -1) {
+            this.setSelectedAttribute(optionIndex);
+            this.setVisualFocus(optionIndex);
+            return true;
         }
-    }
-    ngAfterContentInit() {
-        this.initSelectedOption();
+        return false;
     }
     onClick(event) {
         const element = event.target;
@@ -93,9 +83,7 @@ class ListBoxComponent {
             const optionIndex = this.listBoxOptionRefs().findIndex(o => o.nativeElement.id === element.id);
             this.setSelectedAttribute(optionIndex);
             this.setVisualFocus(optionIndex);
-            this.value = this.listBoxOptions()[optionIndex].value();
-            this.onChange(this.value);
-            this.selectOption.emit(this.value);
+            this.selectOption.next(this.listBoxOptions()[optionIndex].value());
         }
     }
     onKeydown(event) {
@@ -110,35 +98,19 @@ class ListBoxComponent {
             return;
         }
     }
-    initSelectedOption() {
-        const optionIndex = this.listBoxOptions().findIndex(o => this.equalsToCurrentValue(o.value()));
-        if (optionIndex !== -1) {
-            this.setSelectedAttribute(optionIndex);
-            this.setVisualFocus(optionIndex);
-            return;
-        }
-        if (this.initialFocusedOptionIndex() !== null) {
-            this.setVisualFocus(this.initialFocusedOptionIndex());
-        }
-    }
-    equalsToCurrentValue(value) {
-        const comparisonField = this.comparisonField();
-        return comparisonField && this.value && typeof this.value === 'object' && comparisonField in this.value
-            ? this.value[comparisonField] === value[comparisonField]
-            : this.value === value;
-    }
     handleSelectionKeys() {
-        const optionIndex = this.getVisuallyFocusedListBoxOptionRefIndex();
+        const optionIndex = this.getVisuallyFocusedOptionRefIndex();
         if (optionIndex !== -1) {
             this.removeSelectedAttribute();
             this.setSelectedAttribute(optionIndex);
-            this.value = this.listBoxOptions()[optionIndex].value();
-            this.onChange(this.value);
-            this.selectOption.emit(this.value);
+            this.selectOption.next(this.listBoxOptions()[optionIndex].value());
+        }
+        else {
+            this.selectOption.next(null);
         }
     }
     handleArrowKeys(event) {
-        const optionIndex = this.getVisuallyFocusedListBoxOptionRefIndex();
+        const optionIndex = this.getVisuallyFocusedOptionRefIndex();
         const firstOption = 0;
         const lastOption = this.listBoxOptionRefs().length - 1;
         if (optionIndex === -1) {
@@ -168,7 +140,7 @@ class ListBoxComponent {
             }
         }
     }
-    getVisuallyFocusedListBoxOptionRefIndex() {
+    getVisuallyFocusedOptionRefIndex() {
         return this.listBoxOptionRefs().findIndex(r => r.nativeElement.classList.contains('visual-focus'));
     }
     setVisualFocus(optionIndex) {
@@ -181,150 +153,82 @@ class ListBoxComponent {
         this.ariaActiveDescendant.set(null);
     }
     clearVisualFocus() {
-        const optionIndex = this.getVisuallyFocusedListBoxOptionRefIndex();
+        const optionIndex = this.getVisuallyFocusedOptionRefIndex();
         if (optionIndex !== -1) {
             this.removeVisualFocus(optionIndex);
         }
     }
     setSelectedAttribute(optionIndex) {
+        if (!this.hasAriaSelected)
+            return;
         this.listBoxOptionRefs()[optionIndex].nativeElement.setAttribute('aria-selected', 'true');
     }
     removeSelectedAttribute() {
+        if (!this.hasAriaSelected)
+            return;
         this.listBoxOptionRefs()
-            .find(o => o.nativeElement.hasAttribute('aria-selected'))
-            ?.nativeElement.removeAttribute('aria-selected');
+            .find(o => o.nativeElement.hasAttribute('aria-selected'))?.nativeElement.removeAttribute('aria-selected');
     }
-    registerOnChange(onChange) {
-        this.onChange = onChange;
-    }
-    registerOnTouched(onTouch) {
-        this.onTouch = onTouch;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    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,
-                useExisting: forwardRef(() => ListBoxComponent),
-                multi: true,
-            },
-        ], 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: ["ngx-bsl-list-box{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}ngx-bsl-list-box .list-box-no-options-message{padding:4px;display:flex;justify-content:center;font:var(--bsl-font-sm);color:var(--bsl-textColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.0", type: ListBoxDirective, isStandalone: true, selector: "[ngxBslListBox]", inputs: { listBoxId: { classPropertyName: "listBoxId", publicName: "listBoxId", isSignal: true, isRequired: false, transformFunction: null }, listBoxAriaLabel: { classPropertyName: "listBoxAriaLabel", publicName: "listBoxAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, listBoxAriaLabelledby: { classPropertyName: "listBoxAriaLabelledby", publicName: "listBoxAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, optionValueEquality: { classPropertyName: "optionValueEquality", publicName: "optionValueEquality", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "listBoxOptions", predicate: (ListBoxOptionComponent), descendants: true, isSignal: true }, { propertyName: "listBoxOptionRefs", predicate: ListBoxOptionComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
 }
-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, encapsulation: ViewEncapsulation.None, providers: [
-                        IdGenerator,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ListBoxComponent),
-                            multi: true,
-                        },
-                    ], host: {
-                        'role': 'listbox',
-                        '[attr.id]': 'id()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()',
-                        '[attr.aria-activedescendant]': 'exposeAriaActiveDescendant() ? null : ariaActiveDescendant()',
-                    }, styles: ["ngx-bsl-list-box{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}ngx-bsl-list-box .list-box-no-options-message{padding:4px;display:flex;justify-content:center;font:var(--bsl-font-sm);color:var(--bsl-textColor)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], exposeAriaActiveDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "exposeAriaActiveDescendant", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], initialFocusedOptionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocusedOptionIndex", required: false }] }], selectOption: [{ type: i0.Output, args: ["selectOption"] }], listBoxOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListBoxOptionComponent), { isSignal: true }] }], listBoxOptionRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListBoxOptionComponent), { ...{ descendants: true, read: (ElementRef) }, isSignal: true }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class ListBoxGroupComponent {
-    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-    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: "21.0.0", ngImport: i0, type: ListBoxGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-bsl-list-box-group', imports: [], template: `
-        @if (title()) {
-            <div class="group-title">{{ title() }}</div>
-        }
-        <ng-content></ng-content>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".group-title{padding:.375rem .5rem;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted);font-weight:500}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
-
-class ListBoxOptionValueConverterPipe {
-    transform(value, bindLabel) {
-        if (!value) {
-            return '';
-        }
-        if (typeof value === 'string') {
-            return value;
-        }
-        if (typeof value === 'number') {
-            return value.toString();
-        }
-        if (typeof value === 'object' && bindLabel) {
-            if (bindLabel in value) {
-                return value[bindLabel];
-            }
-            throw new Error('Provided label is incorrect');
-        }
-        throw new Error('Cannot parse the value');
-    }
-    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: "21.0.0", ngImport: i0, type: ListBoxOptionValueConverterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'listBoxOptionValueConverter' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngxBslListBox]' }]
+        }], propDecorators: { listBoxId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listBoxId", required: false }] }], listBoxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listBoxAriaLabel", required: false }] }], listBoxAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "listBoxAriaLabelledby", required: false }] }], optionValueEquality: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueEquality", required: false }] }], listBoxOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListBoxOptionComponent), { ...{ descendants: true }, isSignal: true }] }], listBoxOptionRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListBoxOptionComponent), { ...{ descendants: true, read: (ElementRef) }, isSignal: true }] }] } });
 
 class ComboboxComponent {
+    listBox = inject((ListBoxDirective));
+    destroyRef = inject(DestroyRef);
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
-    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
-    bindLabel = input(...(ngDevMode ? [undefined, { debugName: "bindLabel" }] : []));
-    groupBy = input(...(ngDevMode ? [undefined, { debugName: "groupBy" }] : []));
-    comparisonField = input(...(ngDevMode ? [undefined, { debugName: "comparisonField" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
+    optionValueParse = input((option) => option, ...(ngDevMode ? [{ debugName: "optionValueParse" }] : []));
     confirmSelection = output();
-    listBox = viewChild(ListBoxComponent, ...(ngDevMode ? [{ debugName: "listBox" }] : []));
     onChange = (_value) => { };
     onTouch = () => { };
-    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    ariaActiveDescendant = computed(() => this.listBox()?.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
-    initialFocusedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "initialFocusedOptionIndex" }] : []));
-    groupedOptions = computed(() => {
-        const groupByKey = this.groupBy();
-        if (groupByKey) {
-            return this.groupDataBy(groupByKey, this.options());
-        }
-        return [];
-    }, ...(ngDevMode ? [{ debugName: "groupedOptions" }] : []));
-    ignoreOptionsUpdate = false;
+    ariaActiveDescendant = computed(() => this.listBox.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
+    optionSelecting = false;
+    optionChangedBy = null;
     constructor() {
         effect(() => {
-            if (!this.options().length || this.ignoreOptionsUpdate) {
-                this.ignoreOptionsUpdate = false;
+            const hasOptions = this.listBox.listBoxOptions().length;
+            if (this.optionChangedBy === 'input' && hasOptions) {
+                this.showListBox();
+                // Must be set after option components initialization.
+                setTimeout(() => this.listBox.setVisualMarkups(this.value()));
+            }
+            else if (this.optionChangedBy === 'selection' || !hasOptions) {
                 this.hideListBox();
             }
-            else {
-                this.showListBox();
+            this.optionChangedBy = null;
+        });
+    }
+    ngOnInit() {
+        this.listBox.hasAriaSelected = false;
+        this.subscribeSelectOption();
+    }
+    subscribeSelectOption() {
+        this.listBox.selectOption.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(option => {
+            if (option) {
+                this.optionChangedBy = 'selection';
+                this.value.set(this.optionValueParse()(option));
+                this.onChange(this.value());
             }
+            this.hideListBox();
         });
     }
     showListBox() {
+        if (this.open())
+            return;
         this.open.set(true);
     }
     hideListBox() {
-        this.initialFocusedOptionIndex.set(null);
+        if (!this.open())
+            return;
         this.open.set(false);
     }
     onClick() {
@@ -332,73 +236,50 @@ class ComboboxComponent {
             this.hideListBox();
         }
         else {
-            if (this.options().length) {
+            if (this.listBox.listBoxOptions().length) {
                 this.showListBox();
+                this.listBox.setVisualMarkups(this.value());
             }
         }
     }
-    onSelectOption(value) {
-        let valueToSet;
-        if (typeof value === 'string') {
-            valueToSet = value;
-        }
-        else {
-            const comparisonField = this.comparisonField();
-            if (comparisonField) {
-                if (typeof value[comparisonField] === 'string') {
-                    valueToSet = value[comparisonField];
-                }
-                else {
-                    throw new Error('Type of property pointed by comparisonField must be a string.');
-                }
-            }
-            else {
-                throw new Error('comparisonField is not provided.');
-            }
+    onBlur() {
+        if (!this.optionSelecting) {
+            this.hideListBox();
         }
-        this.ignoreOptionsUpdate = true;
-        this.value.set(valueToSet);
-        this.onChange(this.value());
-        this.hideListBox();
+    }
+    onListBoxPointerDown(event) {
+        event.preventDefault();
+        this.optionSelecting = true;
+    }
+    onListBoxClick(event) {
+        this.listBox.onClick(event);
+        this.optionSelecting = false;
     }
     onInputChange(event) {
         const value = event.target.value;
         this.value.set(value);
+        this.optionChangedBy = 'input';
+        if (this.listBox.listBoxOptions().length) {
+            this.showListBox();
+            this.listBox.setVisualMarkups(this.value());
+        }
         this.onChange(this.value());
     }
     onKeydown(event) {
         event.preventDefault();
-        if (!this.open()) {
-            if (event.code === 'ArrowUp') {
-                if (!this.options().length)
-                    return;
-                this.initialFocusedOptionIndex.set(this.options().length - 1);
-                this.showListBox();
-            }
-            else if (event.code === 'ArrowDown') {
-                if (!this.options().length)
-                    return;
-                this.initialFocusedOptionIndex.set(0);
-                this.showListBox();
-            }
-            else if (event.code === 'Enter') {
-                this.confirmSelection.emit();
-            }
+        if (this.open()) {
+            this.listBox.onKeydown(event);
         }
-        else {
-            this.listBox()?.onKeydown(event);
+        else if (event.code === 'Enter') {
+            this.confirmSelection.emit();
         }
-    }
-    groupDataBy(field, data) {
-        const groupsMap = data.reduce((map, value) => {
-            const key = value[field];
-            if (!map.has(key)) {
-                map.set(key, []);
+        else {
+            this.showListBox();
+            const markupsSet = this.listBox.setVisualMarkups(this.value());
+            if (!markupsSet) {
+                this.listBox.onKeydown(event);
             }
-            map.get(key)?.push(value);
-            return map;
-        }, new Map);
-        return Array.from(groupsMap, ([group, data]) => ({ group, data }));
+        }
     }
     registerOnChange(onChange) {
         this.onChange = onChange;
@@ -410,36 +291,37 @@ class ComboboxComponent {
         this.value.set(value);
     }
     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 }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", 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 } }, outputs: { confirmSelection: "confirmSelection" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 }, 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 }, optionValueParse: { classPropertyName: "optionValueParse", publicName: "optionValueParse", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmSelection: "confirmSelection", value: "valueChange" }, 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    (blur)=\"hideListBox()\"\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        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @if (options() && !groupBy()) {\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        }\n        @if (groupedOptions() && groupBy()) {\n            @for (group of groupedOptions(); track group) {\n                <ngx-bsl-list-box-group [title]=\"group.group\"></ngx-bsl-list-box-group>\n                @for (option of group.data; 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            }\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: "component", type: ListBoxGroupComponent, selector: "ngx-bsl-list-box-group", inputs: ["title"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], hostDirectives: [{ directive: ListBoxDirective, inputs: ["listBoxId", "listBoxId", "listBoxAriaLabel", "listBoxAriaLabel", "listBoxAriaLabelledby", "listBoxAriaLabelledby", "optionValueEquality", "optionValueEquality"] }], ngImport: i0, template: "<input\n    type=\"text\"\n    role=\"combobox\"\n    #comboboxInput\n    cdkOverlayOrigin\n    [value]=\"value()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listBox.listBoxId() || id() + '-list-box'\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (input)=\"onInputChange($any($event))\"\n    (blur)=\"onBlur()\"\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    <!-- eslint-disable-next-line\n    @angular-eslint/template/interactive-supports-focus,\n    @angular-eslint/template/click-events-have-key-events -->\n    <div\n        role=\"listbox\"\n        class=\"ngx-bsl-list-box\"\n        [id]=\"listBox.listBoxId() || id() + '-list-box'\"\n        [attr.aria-label]=\"listBox.listBoxAriaLabel()\"\n        [attr.aria-labelledby]=\"listBox.listBoxAriaLabelledby()\"\n        [attr.aria-activedescendant]=\"listBox.ariaActiveDescendant()\"\n        (pointerdown)=\"onListBoxPointerDown($event)\"\n        (click)=\"onListBoxClick($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-combobox', imports: [
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
-                        ListBoxComponent,
-                        ListBoxOptionComponent,
-                        ListBoxGroupComponent,
-                        ListBoxOptionValueConverterPipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ComboboxComponent),
                             multi: true,
                         },
-                    ], 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    (blur)=\"hideListBox()\"\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        [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n        [comparisonField]=\"comparisonField()\"\n        [id]=\"'list-box-' + id()\"\n        [ariaLabel]=\"ariaLabel()\"\n        [ariaLabelledby]=\"ariaLabelledBy()\"\n        [exposeAriaActiveDescendant]=\"true\"\n        (selectOption)=\"onSelectOption($event)\">\n        @if (options() && !groupBy()) {\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        }\n        @if (groupedOptions() && groupBy()) {\n            @for (group of groupedOptions(); track group) {\n                <ngx-bsl-list-box-group [title]=\"group.group\"></ngx-bsl-list-box-group>\n                @for (option of group.data; 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            }\n        }\n    </ngx-bsl-list-box>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], 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 }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", 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 }] }], confirmSelection: [{ type: i0.Output, args: ["confirmSelection"] }], listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListBoxComponent), { isSignal: true }] }] } });
+                    ], hostDirectives: [
+                        {
+                            directive: ListBoxDirective,
+                            inputs: ['listBoxId', 'listBoxAriaLabel', 'listBoxAriaLabelledby', 'optionValueEquality'],
+                        },
+                    ], template: "<input\n    type=\"text\"\n    role=\"combobox\"\n    #comboboxInput\n    cdkOverlayOrigin\n    [value]=\"value()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listBox.listBoxId() || id() + '-list-box'\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    (input)=\"onInputChange($any($event))\"\n    (blur)=\"onBlur()\"\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    <!-- eslint-disable-next-line\n    @angular-eslint/template/interactive-supports-focus,\n    @angular-eslint/template/click-events-have-key-events -->\n    <div\n        role=\"listbox\"\n        class=\"ngx-bsl-list-box\"\n        [id]=\"listBox.listBoxId() || id() + '-list-box'\"\n        [attr.aria-label]=\"listBox.listBoxAriaLabel()\"\n        [attr.aria-labelledby]=\"listBox.listBoxAriaLabelledby()\"\n        [attr.aria-activedescendant]=\"listBox.ariaActiveDescendant()\"\n        (pointerdown)=\"onListBoxPointerDown($event)\"\n        (click)=\"onListBoxClick($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], 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 }] }], optionValueParse: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueParse", required: false }] }], confirmSelection: [{ type: i0.Output, args: ["confirmSelection"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class CheckboxComponent {
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     onChange = (_value) => { };
     onTouch = () => { };
     registerOnChange(onChange) {
@@ -465,13 +347,13 @@ class CheckboxComponent {
         this.onChange(this.checked());
     }
     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: [
+    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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, 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,
                 useExisting: 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=\"bsl-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: ["ngx-bsl-checkbox{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-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)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }], encapsulation: i0.ViewEncapsulation.None });
+        ], 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.disabled]=\"disabled()\"\n      class=\"bsl-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: ["ngx-bsl-checkbox{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-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)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -483,8 +365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             multi: true,
                             useExisting: CheckboxComponent,
                         },
-                    ], encapsulation: ViewEncapsulation.None, 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=\"bsl-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: ["ngx-bsl-checkbox{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-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)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], onKeydown: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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.disabled]=\"disabled()\"\n      class=\"bsl-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: ["ngx-bsl-checkbox{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-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)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }, {
@@ -538,6 +420,7 @@ class DrawerComponent {
     }
     close() {
         this.isClosed.set(true);
+        this.closed.emit();
     }
     onTransitionEnd(event) {
         if (this.elementRef.nativeElement === event.target) {
@@ -547,22 +430,42 @@ class DrawerComponent {
         }
     }
     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.ngx-bsl-drawer-closed": "isClosed()" } }, ngImport: i0, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"ngx-bsl-drawer-container\">\n    <header class=\"ngx-bsl-drawer-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=\"ngx-bsl-drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["ngx-bsl-drawer{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)}ngx-bsl-drawer.ngx-bsl-drawer-closed{transform:translateY(100%)}.ngx-bsl-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}ngx-bsl-drawer-header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.ngx-bsl-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 ɵ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.bsl-drawer-closed": "isClosed()" } }, ngImport: i0, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"bsl-drawer-container\">\n    <header class=\"bsl-drawer-header\">\n        <button class=\"bsl-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=\"bsl-drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["ngx-bsl-drawer{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)}ngx-bsl-drawer.bsl-drawer-closed{transform:translateY(100%)}.bsl-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}.bsl-drawer-header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.bsl-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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-bsl-drawer', imports: [
                         CdkTrapFocus,
                         IconXMarkComponent,
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'role': 'dialog',
                         'aria-modal': 'true',
                         '[attr.aria-label]': 'title()',
-                        '[class.ngx-bsl-drawer-closed]': 'isClosed()',
+                        '[class.bsl-drawer-closed]': 'isClosed()',
                         '(transitionend)': 'onTransitionEnd($event)',
-                    }, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"ngx-bsl-drawer-container\">\n    <header class=\"ngx-bsl-drawer-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=\"ngx-bsl-drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["ngx-bsl-drawer{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)}ngx-bsl-drawer.ngx-bsl-drawer-closed{transform:translateY(100%)}.ngx-bsl-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}ngx-bsl-drawer-header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.ngx-bsl-drawer-content{overflow-y:auto;height:100%}\n"] }]
+                    }, template: "<div cdkTrapFocus\n     cdkTrapFocusAutoCapture=\"true\"\n     class=\"bsl-drawer-container\">\n    <header class=\"bsl-drawer-header\">\n        <button class=\"bsl-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=\"bsl-drawer-content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["ngx-bsl-drawer{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)}ngx-bsl-drawer.bsl-drawer-closed{transform:translateY(100%)}.bsl-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}.bsl-drawer-header{margin-bottom:1rem;display:flex;justify-content:space-between;flex-direction:row-reverse}.bsl-drawer-content{overflow-y:auto;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+class ListBoxGroupComponent {
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    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="ngx-bsl-list-box-group-title">{{ title() }}</div>
+        }
+        <ng-content></ng-content>
+  `, isInline: true, styles: ["ngx-bsl-list-box-group{display:flex;flex-direction:column;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted)}.ngx-bsl-list-box-group-title{padding:.375rem .5rem;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted);font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+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()) {
+            <div class="ngx-bsl-list-box-group-title">{{ title() }}</div>
+        }
+        <ng-content></ng-content>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ngx-bsl-list-box-group{display:flex;flex-direction:column;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted)}.ngx-bsl-list-box-group-title{padding:.375rem .5rem;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted);font-weight:500}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 class ListBoxSeparatorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListBoxSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -573,6 +476,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'ngx-bsl-list-box-separator', imports: [], template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ngx-bsl-list-box-separator{display:block;height:1px;background-color:var(--bsl-list-box-borderColor)}\n"] }]
         }] });
 
+/*
+    eslint-disable max-len,
+    @typescript-eslint/no-extraneous-class
+*/
+class IconArrowLeftComponent {
+    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: [".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: "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>
+  `, 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"] }]
+        }] });
+
+/*
+    eslint-disable max-len,
+    @typescript-eslint/no-extraneous-class
+*/
+class IconArrowRightComponent {
+    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: [".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: "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>
+  `, 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"] }]
+        }] });
+
+/*
+    eslint-disable max-len,
+    @typescript-eslint/no-extraneous-class
+*/
+class IconArrowLeftDoubleComponent {
+    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: [".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: "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>
+  `, 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"] }]
+        }] });
+
+/*
+    eslint-disable max-len,
+    @typescript-eslint/no-extraneous-class
+*/
+class IconArrowRightDoubleComponent {
+    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: [".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: "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>
+  `, 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"] }]
+        }] });
+
+/*
+    eslint-disable @typescript-eslint/no-extraneous-class
+*/
+class IconBurgerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconBurgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconBurgerComponent, isStandalone: true, selector: "ngx-bsl-icon-burger", 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 18L20 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <path d="M4 12L20 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <path d="M4 6L20 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+  `, 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: "21.0.0", ngImport: i0, type: IconBurgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-bsl-icon-burger', imports: [], template: `
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 18L20 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <path d="M4 12L20 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <path d="M4 6L20 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+  `, 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"] }]
+        }] });
+
 /*
     eslint-disable max-len,
     @typescript-eslint/no-extraneous-class
@@ -727,90 +738,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
   `, 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"] }]
         }] });
 
-/*
-    eslint-disable max-len,
-    @typescript-eslint/no-extraneous-class
-*/
-class IconArrowLeftComponent {
-    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: [".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: "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>
-  `, 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"] }]
-        }] });
-
-/*
-    eslint-disable max-len,
-    @typescript-eslint/no-extraneous-class
-*/
-class IconArrowRightComponent {
-    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: [".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: "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>
-  `, 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"] }]
-        }] });
-
-/*
-    eslint-disable max-len,
-    @typescript-eslint/no-extraneous-class
-*/
-class IconArrowLeftDoubleComponent {
-    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: [".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: "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>
-  `, 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"] }]
-        }] });
-
-/*
-    eslint-disable max-len,
-    @typescript-eslint/no-extraneous-class
-*/
-class IconArrowRightDoubleComponent {
-    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: [".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: "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>
-  `, 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 {
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
     total = input(1, ...(ngDevMode ? [{ debugName: "total" }] : []));
@@ -871,7 +798,7 @@ class PaginationComponent {
         }
     }
     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: ["ngx-bsl-pagination{display:flex;justify-content:center;align-items:center;gap:12px}ngx-bsl-pagination 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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=\"bsl-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=\"bsl-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=\"bsl-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=\"bsl-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: ["ngx-bsl-pagination{display:flex;align-items:center;gap:12px}ngx-bsl-pagination input[type=number]{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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -880,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         IconArrowRightComponent,
                         IconArrowLeftDoubleComponent,
                         IconArrowRightDoubleComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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: ["ngx-bsl-pagination{display:flex;justify-content:center;align-items:center;gap:12px}ngx-bsl-pagination input{width:3.5rem;height:2.25rem;padding:.5rem;text-align:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    type=\"button\"\n    class=\"bsl-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=\"bsl-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=\"bsl-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=\"bsl-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: ["ngx-bsl-pagination{display:flex;align-items:center;gap:12px}ngx-bsl-pagination input[type=number]{width:3.5rem;height:2.25rem;padding:.5rem;text-align:center}\n"] }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], nextPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageAriaLabel", required: false }] }], previousPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageAriaLabel", required: false }] }], firstPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageAriaLabel", required: false }] }], lastPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageAriaLabel", required: false }] }], selectPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPageAriaLabel", required: false }] }], selectPageAriaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPageAriaLabelledBy", required: false }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
 
 var RangeMoveDirection;
@@ -939,21 +866,21 @@ class RangeThumbComponent {
     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>
+            <span class="bsl-range-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"] });
+    `, isInline: true, styles: ["ngx-bsl-range-thumb{position:absolute;width:.75rem;height:.75rem;border-radius:.375rem;background-color:var(--bsl-range-thumb-backgroundColor);cursor:pointer;touch-action:none}ngx-bsl-range-thumb.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-thumb-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font:var(--bsl-font-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 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()) {
-            <span class="thumb-label">{{value()}}</span>
+            <span class="bsl-range-thumb-label">{{value()}}</span>
         }
-    `, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '(keydown.arrowLeft)': 'positionChanged.emit(RangeMoveDirection.BACKWARD)',
                         '(keydown.arrowRight)': 'positionChanged.emit(RangeMoveDirection.FORWARD)',
                         '(pointerdown)': 'onPointerDown($event)',
-                    }, 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"] }]
+                    }, styles: ["ngx-bsl-range-thumb{position:absolute;width:.75rem;height:.75rem;border-radius:.375rem;background-color:var(--bsl-range-thumb-backgroundColor);cursor:pointer;touch-action:none}ngx-bsl-range-thumb.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-thumb-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font:var(--bsl-font-sm)}\n"] }]
         }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], positionChanged: [{ type: i0.Output, args: ["positionChanged"] }] } });
 
 function round(value, digits = 0) {
@@ -1169,7 +1096,7 @@ class RangeComponent {
                 multi: true,
                 useExisting: 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"] }] });
+        ], 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=\"bsl-range-container\">\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\n    <div class=\"bsl-range-rail\"\n         [class.disabled]=\"disabled()\"\n         (click)=\"onRailClick($event)\">\n    </div>\n\n    <div class=\"bsl-range-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=\"bsl-range-limits\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n</div>\n", styles: ["ngx-bsl-range{display:flex;align-items:center;flex-direction:column}.bsl-range-container{position:relative;height:.75rem;width:100%;display:flex;align-items:center}.bsl-range-rail{height:.25rem;width:100%;border-radius:.125rem;background-color:var(--bsl-range-rail-backgroundColor);cursor:pointer}.bsl-range-rail.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-tracker{position:absolute;height:.25rem;background-color:var(--bsl-range-tracker-backgroundColor);pointer-events:none}.bsl-range-tracker.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
@@ -1181,35 +1108,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             multi: true,
                             useExisting: RangeComponent,
                         },
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
-                    }, 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"] }]
+                    }, template: "<div class=\"bsl-range-container\">\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\n    <div class=\"bsl-range-rail\"\n         [class.disabled]=\"disabled()\"\n         (click)=\"onRailClick($event)\">\n    </div>\n\n    <div class=\"bsl-range-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=\"bsl-range-limits\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n</div>\n", styles: ["ngx-bsl-range{display:flex;align-items:center;flex-direction:column}.bsl-range-container{position:relative;height:.75rem;width:100%;display:flex;align-items:center}.bsl-range-rail{height:.25rem;width:100%;border-radius:.125rem;background-color:var(--bsl-range-rail-backgroundColor);cursor:pointer}.bsl-range-rail.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-tracker{position:absolute;height:.25rem;background-color:var(--bsl-range-tracker-backgroundColor);pointer-events:none}.bsl-range-tracker.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}.bsl-range-limits{width:100%;display:flex;justify-content:space-between;font:var(--bsl-font-sm)}\n"] }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], showThumbLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbLabels", required: false }] }], thumbFromRef: [{ type: i0.ViewChild, args: ['thumbFrom', { ...{ read: (ElementRef) }, isSignal: true }] }], thumbToRef: [{ type: i0.ViewChild, args: ['thumbTo', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 class SelectComponent {
+    listBox = inject((ListBoxDirective));
+    destroyRef = inject(DestroyRef);
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
-    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
-    bindLabel = input(...(ngDevMode ? [undefined, { debugName: "bindLabel" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
-    comparisonField = input(...(ngDevMode ? [undefined, { debugName: "comparisonField" }] : []));
     iconMode = input(false, ...(ngDevMode ? [{ debugName: "iconMode" }] : []));
     customIcon = input(false, ...(ngDevMode ? [{ debugName: "customIcon" }] : []));
     dropdownWidth = input(...(ngDevMode ? [undefined, { debugName: "dropdownWidth" }] : []));
-    listBox = viewChild(ListBoxComponent, ...(ngDevMode ? [{ debugName: "listBox" }] : []));
+    optionValueParse = input((option) => option, ...(ngDevMode ? [{ debugName: "optionValueParse" }] : []));
+    displayLabel = input(...(ngDevMode ? [undefined, { debugName: "displayLabel" }] : []));
     onChange = (_value) => { };
     onTouch = () => { };
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    ariaActiveDescendant = computed(() => this.listBox()?.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
-    initialFocusedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "initialFocusedOptionIndex" }] : []));
+    ariaActiveDescendant = computed(() => this.listBox.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
+    displayValue = computed(() => {
+        const displayLabel = this.displayLabel();
+        const value = this.value();
+        if (displayLabel && value && typeof value === 'object' && displayLabel in value) {
+            return value[displayLabel];
+        }
+        else {
+            return value;
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    ngOnInit() {
+        this.listBox.hasAriaSelected = true;
+        this.subscribeSelectOption();
+    }
+    subscribeSelectOption() {
+        this.listBox.selectOption.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(option => {
+            if (option) {
+                this.value.set(this.optionValueParse()(option));
+                this.onChange(this.value());
+                this.hideListBox();
+            }
+        });
+    }
     showListBox() {
+        if (this.open())
+            return;
         this.open.set(true);
     }
     hideListBox() {
-        this.initialFocusedOptionIndex.set(null);
+        if (!this.open())
+            return;
         this.open.set(false);
     }
     onClick() {
@@ -1217,27 +1169,26 @@ class SelectComponent {
             this.hideListBox();
         }
         else {
-            this.showListBox();
+            if (this.listBox.listBoxOptions().length) {
+                this.showListBox();
+                this.listBox.setVisualMarkups(this.value());
+            }
         }
     }
-    onSelectOption(value) {
-        this.value.set(value);
-        this.onChange(value);
-        this.hideListBox();
+    onListBoxClick(event) {
+        this.listBox.onClick(event);
     }
     onKeydown(event) {
         event.preventDefault();
-        if (!this.open()) {
-            this.showListBox();
-            if (event.code === 'ArrowUp') {
-                this.initialFocusedOptionIndex.set(this.options().length - 1);
-            }
-            else if (event.code === 'ArrowDown') {
-                this.initialFocusedOptionIndex.set(0);
-            }
+        if (this.open()) {
+            this.listBox.onKeydown(event);
         }
         else {
-            this.listBox()?.onKeydown(event);
+            this.showListBox();
+            const markupsSet = this.listBox.setVisualMarkups(this.value());
+            if (!markupsSet) {
+                this.listBox.onKeydown(event);
+            }
         }
     }
     registerOnChange(onChange) {
@@ -1250,13 +1201,13 @@ class SelectComponent {
         this.value.set(value);
     }
     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: [
+    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 }, 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 }, 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 }, optionValueParse: { classPropertyName: "optionValueParse", publicName: "optionValueParse", isSignal: true, isRequired: false, transformFunction: null }, displayLabel: { classPropertyName: "displayLabel", publicName: "displayLabel", 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    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: ["ngx-bsl-select{display:block}.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 });
+        ], hostDirectives: [{ directive: ListBoxDirective, inputs: ["listBoxId", "listBoxId", "listBoxAriaLabel", "listBoxAriaLabel", "listBoxAriaLabelledby", "listBoxAriaLabelledby", "optionValueEquality", "optionValueEquality"] }], ngImport: i0, template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    class=\"ngx-bsl-select-button\"\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listBox.listBoxId() || id() + '-list-box'\"\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>{{ displayValue() }}</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    <!-- eslint-disable-next-line\n    @angular-eslint/template/interactive-supports-focus,\n    @angular-eslint/template/click-events-have-key-events -->\n    <div\n        role=\"listbox\"\n        class=\"ngx-bsl-list-box\"\n        [id]=\"listBox.listBoxId() || id() + '-list-box'\"\n        [attr.aria-label]=\"listBox.listBoxAriaLabel()\"\n        [attr.aria-labelledby]=\"listBox.listBoxAriaLabelledby()\"\n        [attr.aria-activedescendant]=\"listBox.ariaActiveDescendant()\"\n        (click)=\"onListBoxClick($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: ["ngx-bsl-select{display:block}.ngx-bsl-select-button{width:100%;justify-content:space-between;gap:.5rem}.ngx-bsl-select-button span{min-height:var(--bsl-line-height-sm);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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1264,48 +1215,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
                         IconChevronDownComponent,
-                        ListBoxComponent,
-                        ListBoxOptionComponent,
-                        ListBoxOptionValueConverterPipe,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: 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: ["ngx-bsl-select{display:block}.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"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: ListBoxDirective,
+                            inputs: ['listBoxId', 'listBoxAriaLabel', 'listBoxAriaLabelledby', 'optionValueEquality'],
+                        },
+                    ], template: "<button\n    type=\"button\"\n    role=\"combobox\"\n    #selectButton\n    class=\"ngx-bsl-select-button\"\n    cdkOverlayOrigin\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listBox.listBoxId() || id() + '-list-box'\"\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>{{ displayValue() }}</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    <!-- eslint-disable-next-line\n    @angular-eslint/template/interactive-supports-focus,\n    @angular-eslint/template/click-events-have-key-events -->\n    <div\n        role=\"listbox\"\n        class=\"ngx-bsl-list-box\"\n        [id]=\"listBox.listBoxId() || id() + '-list-box'\"\n        [attr.aria-label]=\"listBox.listBoxAriaLabel()\"\n        [attr.aria-labelledby]=\"listBox.listBoxAriaLabelledby()\"\n        [attr.aria-activedescendant]=\"listBox.ariaActiveDescendant()\"\n        (click)=\"onListBoxClick($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: ["ngx-bsl-select{display:block}.ngx-bsl-select-button{width:100%;justify-content:space-between;gap:.5rem}.ngx-bsl-select-button span{min-height:var(--bsl-line-height-sm);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], 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 }] }], 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 }] }], optionValueParse: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueParse", required: false }] }], displayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TooltipComponent {
-    message = '';
+    message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
     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"] });
+    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: ["ngx-bsl-tooltip{padding:4px 8px;border-radius:4px;background-color:var(--bsl-tooltip-backgroundColor);font:var(--bsl-font-xs);color:var(--bsl-tooltip-textColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 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"] }]
+            args: [{ selector: 'ngx-bsl-tooltip', imports: [], template: '{{message()}}', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'role': 'tooltip' }, styles: ["ngx-bsl-tooltip{padding:4px 8px;border-radius:4px;background-color:var(--bsl-tooltip-backgroundColor);font:var(--bsl-font-xs);color:var(--bsl-tooltip-textColor)}\n"] }]
         }] });
 
 const TOOLTIP_OVERLAY_POSITION = {
-    TOP: {
+    top: {
         originX: 'center',
         originY: 'top',
         overlayX: 'center',
         overlayY: 'bottom',
     },
-    BOTTOM: {
+    bottom: {
         originX: 'center',
         originY: 'bottom',
         overlayX: 'center',
         overlayY: 'top',
     },
-    LEFT: {
+    left: {
         originX: 'start',
         originY: 'center',
         overlayX: 'end',
         overlayY: 'center',
     },
-    RIGHT: {
+    right: {
         originX: 'end',
         originY: 'center',
         overlayX: 'start',
@@ -1313,17 +1266,9 @@ const TOOLTIP_OVERLAY_POSITION = {
     },
 };
 
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition["TOP"] = "TOP";
-    TooltipPosition["BOTTOM"] = "BOTTOM";
-    TooltipPosition["LEFT"] = "LEFT";
-    TooltipPosition["RIGHT"] = "RIGHT";
-})(TooltipPosition || (TooltipPosition = {}));
-
 class TooltipDirective {
     message = input.required(...(ngDevMode ? [{ debugName: "message", alias: 'ngxBslTooltip' }] : [{ alias: 'ngxBslTooltip' }]));
-    position = input(TooltipPosition.TOP, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
     overlay = inject(Overlay);
     elementRef = inject(ElementRef);
     overlayRef = null;
@@ -1334,7 +1279,7 @@ class TooltipDirective {
             this.overlayRef = this.overlay.create({ positionStrategy });
             const componentPortal = new ComponentPortal(TooltipComponent);
             const componentInstance = this.overlayRef.attach(componentPortal);
-            componentInstance.instance.message = this.message();
+            componentInstance.instance.message.set(this.message());
         }
     }
     hide() {
@@ -1350,16 +1295,16 @@ class TooltipDirective {
             .withPositions([TOOLTIP_OVERLAY_POSITION[this.position()]]);
         const tooltipOffset = 8;
         switch (this.position()) {
-            case TooltipPosition.TOP:
+            case 'top':
                 positionStrategy.withDefaultOffsetY(-tooltipOffset);
                 break;
-            case TooltipPosition.BOTTOM:
+            case 'bottom':
                 positionStrategy.withDefaultOffsetY(tooltipOffset);
                 break;
-            case TooltipPosition.LEFT:
+            case 'left':
                 positionStrategy.withDefaultOffsetX(-tooltipOffset);
                 break;
-            case TooltipPosition.RIGHT:
+            case 'right':
                 positionStrategy.withDefaultOffsetX(tooltipOffset);
                 break;
             default:
@@ -1387,5 +1332,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxComponent, ComboboxComponent, DrawerComponent, IconCheckComponent, IconChevronDownComponent, IconCompanyComponent, IconLanguageComponent, IconLocationComponent, IconMoonComponent, IconSunComponent, IconXMarkComponent, ListBoxComponent, ListBoxGroupComponent, ListBoxOptionComponent, ListBoxOptionValueConverterPipe, ListBoxSeparatorComponent, PaginationComponent, RangeComponent, SelectComponent, TooltipDirective };
+export { CheckboxComponent, ComboboxComponent, DrawerComponent, IconArrowLeftComponent, IconArrowLeftDoubleComponent, IconArrowRightComponent, IconArrowRightDoubleComponent, IconBurgerComponent, IconCheckComponent, IconChevronDownComponent, IconCompanyComponent, IconLanguageComponent, IconLocationComponent, IconMoonComponent, IconSunComponent, IconXMarkComponent, ListBoxDirective, ListBoxGroupComponent, ListBoxOptionComponent, ListBoxSeparatorComponent, PaginationComponent, RangeComponent, SelectComponent, TooltipDirective };
 //# sourceMappingURL=ngx-bsl.mjs.map