ngx-bsl 0.0.13 → 0.0.16

package/fesm2022/ngx-bsl.mjs

@@ -62,17 +62,17 @@ class ListBoxDirective {
     selectOption = new Subject();
     hasAriaSelected = true;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    initSelectedOption(value) {
+    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;
         }
-        else {
-            this.clearVisualFocus();
-            this.removeSelectedAttribute();
-        }
+        return false;
     }
     onClick(event) {
         const element = event.target;
@@ -198,8 +198,10 @@ class ComboboxComponent {
             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') {
+            else if (this.optionChangedBy === 'selection' || !hasOptions) {
                 this.hideListBox();
             }
             this.optionChangedBy = null;
@@ -220,10 +222,13 @@ class ComboboxComponent {
         });
     }
     showListBox() {
+        if (this.open())
+            return;
         this.open.set(true);
     }
     hideListBox() {
-        this.listBox.clearVisualFocus();
+        if (!this.open())
+            return;
         this.open.set(false);
     }
     onClick() {
@@ -233,6 +238,7 @@ class ComboboxComponent {
         else {
             if (this.listBox.listBoxOptions().length) {
                 this.showListBox();
+                this.listBox.setVisualMarkups(this.value());
             }
         }
     }
@@ -254,36 +260,25 @@ class ComboboxComponent {
         this.value.set(value);
         this.optionChangedBy = 'input';
         if (this.listBox.listBoxOptions().length) {
-            if (this.open()) {
-                this.listBox.initSelectedOption(this.value());
-            }
-            else {
-                this.showListBox();
-            }
+            this.showListBox();
+            this.listBox.setVisualMarkups(this.value());
         }
         this.onChange(this.value());
     }
     onKeydown(event) {
         event.preventDefault();
-        if (!this.open()) {
-            if (event.code === 'ArrowUp') {
-                if (!this.listBox.listBoxOptions().length)
-                    return;
-                this.listBox.setVisualFocus(this.listBox.listBoxOptions().length - 1);
-                this.showListBox();
-            }
-            else if (event.code === 'ArrowDown') {
-                if (!this.listBox.listBoxOptions().length)
-                    return;
-                this.listBox.setVisualFocus(0);
-                this.showListBox();
-            }
-            else if (event.code === 'Enter') {
-                this.confirmSelection.emit();
-            }
+        if (this.open()) {
+            this.listBox.onKeydown(event);
+        }
+        else if (event.code === 'Enter') {
+            this.confirmSelection.emit();
         }
         else {
-            this.listBox.onKeydown(event);
+            this.showListBox();
+            const markupsSet = this.listBox.setVisualMarkups(this.value());
+            if (!markupsSet) {
+                this.listBox.onKeydown(event);
+            }
         }
     }
     registerOnChange(onChange) {
@@ -325,8 +320,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 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) {
@@ -352,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,
@@ -370,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']]
             }, {
@@ -425,6 +420,7 @@ class DrawerComponent {
     }
     close() {
         this.isClosed.set(true);
+        this.closed.emit();
     }
     onTransitionEnd(event) {
         if (this.elementRef.nativeElement === event.target) {
@@ -434,20 +430,20 @@ 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 {
@@ -458,7 +454,7 @@ class ListBoxGroupComponent {
             <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 span:first-child{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 });
+  `, 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,
@@ -467,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             <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 span:first-child{padding:.375rem .5rem;font:var(--bsl-font-xs);color:var(--bsl-textColor-muted);font-weight:500}\n"] }]
+  `, 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
@@ -480,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
@@ -634,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" }] : []));
@@ -778,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,
@@ -787,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;
@@ -846,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) {
@@ -1076,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,
@@ -1088,10 +1108,10 @@ 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 {
@@ -1130,16 +1150,18 @@ class SelectComponent {
             if (option) {
                 this.value.set(this.optionValueParse()(option));
                 this.onChange(this.value());
+                this.hideListBox();
             }
-            this.hideListBox();
         });
     }
     showListBox() {
+        if (this.open())
+            return;
         this.open.set(true);
-        this.listBox.initSelectedOption(this.value());
     }
     hideListBox() {
-        this.listBox.clearVisualFocus();
+        if (!this.open())
+            return;
         this.open.set(false);
     }
     onClick() {
@@ -1149,6 +1171,7 @@ class SelectComponent {
         else {
             if (this.listBox.listBoxOptions().length) {
                 this.showListBox();
+                this.listBox.setVisualMarkups(this.value());
             }
         }
     }
@@ -1157,21 +1180,15 @@ class SelectComponent {
     }
     onKeydown(event) {
         event.preventDefault();
-        if (!this.open()) {
-            this.showListBox();
-            if (event.code === 'ArrowUp') {
-                this.listBox.setVisualFocus(this.listBox.listBoxOptions().length - 1);
-                this.showListBox();
-            }
-            else if (event.code === 'ArrowDown') {
-                if (!this.listBox.listBoxOptions().length)
-                    return;
-                this.listBox.setVisualFocus(0);
-                this.showListBox();
-            }
+        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) {
@@ -1213,35 +1230,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         }], 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',
@@ -1249,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;
@@ -1270,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() {
@@ -1286,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:
@@ -1323,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, ListBoxDirective, ListBoxGroupComponent, ListBoxOptionComponent, 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