ngx-bsl 0.0.3 → 0.0.5

package/fesm2022/ngx-bsl.mjs

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