shirkasoft-ui-components 1.2.0 → 1.3.0

package/fesm2022/shirkasoft-ui-components-select.mjs

@@ -0,0 +1,737 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, inject, DestroyRef, effect, forwardRef, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
+import { LucideChevronDown, LucideDynamicIcon } from '@lucide/angular';
+import { getIcon } from 'shirkasoft-ui-components/utils';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Custom select that works as a ControlValueAccessor: single/multiple
+ * selection, searchable, keyboard navigation, pagination, custom entries and
+ * reactive-form integration.
+ */
+class SelectComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /** Resolves icon names to lucide components, falling back to a chevron. */
+        this.getIcon = (name) => getIcon(name, LucideChevronDown);
+        /** Available options. */
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Enables multi-select mode. */
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** Restricts multi-selection to the given value combinations. */
+        this.validCombinations = input(undefined, ...(ngDevMode ? [{ debugName: "validCombinations" }] : /* istanbul ignore next */ []));
+        /** Placeholder shown when there is no selection. */
+        this.placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Label used to bind the control inside a `formGroup`. */
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Shows a loading state while options are being fetched. */
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        /** Marks that all options have been loaded (used with pagination + search). */
+        this.isAllDataLoaded = input(false, ...(ngDevMode ? [{ debugName: "isAllDataLoaded" }] : /* istanbul ignore next */ []));
+        /** Allows creating new entries from the typed search term. */
+        this.allowCustomEntries = input(false, ...(ngDevMode ? [{ debugName: "allowCustomEntries" }] : /* istanbul ignore next */ []));
+        /** Parent form group to resolve the control from `label`. */
+        this.formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Enables the search input inside the dropdown. */
+        this.isSearchable = input(false, ...(ngDevMode ? [{ debugName: "isSearchable" }] : /* istanbul ignore next */ []));
+        /** Number of options loaded per page when pagination is enabled. */
+        this.itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+        /** FormControl bound externally (used instead of `formGroup`/`label`). */
+        this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Paginates the option list instead of rendering it all at once. */
+        this.usePagination = input(false, ...(ngDevMode ? [{ debugName: "usePagination" }] : /* istanbul ignore next */ []));
+        /** Disables the whole select. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Custom per-validation-error messages shown under the select. */
+        this.errorMessages = input({
+            required: 'Este campo es requerido',
+        }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+        /** Keeps the search term when options reload. */
+        this.preserveSearchOnLoad = input(false, ...(ngDevMode ? [{ debugName: "preserveSearchOnLoad" }] : /* istanbul ignore next */ []));
+        /** Translation key of the "no records" empty message. */
+        this.emptyMessageKey = input('common.no_records', ...(ngDevMode ? [{ debugName: "emptyMessageKey" }] : /* istanbul ignore next */ []));
+        /** Opens the dropdown above the trigger instead of below. */
+        this.dropdownUpward = input(false, ...(ngDevMode ? [{ debugName: "dropdownUpward" }] : /* istanbul ignore next */ []));
+        /** Shows the "no selection" option in single-select mode. */
+        this.showEmptyOption = input(true, ...(ngDevMode ? [{ debugName: "showEmptyOption" }] : /* istanbul ignore next */ []));
+        /** Emits when the selection changes (new value or array in multiple mode). */
+        this.selectionChange = output();
+        /** Emits the debounced search term while typing. */
+        this.search = output();
+        /** Reference to the filter input inside the dropdown (when searchable). */
+        this.filterInput = viewChild('filterInput', ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+        /** Reference to the select container element. */
+        this.selectContainer = viewChild('selectContainer', ...(ngDevMode ? [{ debugName: "selectContainer" }] : /* istanbul ignore next */ []));
+        /** Reference to the trigger button. */
+        this.selectTrigger = viewChild('selectTrigger', ...(ngDevMode ? [{ debugName: "selectTrigger" }] : /* istanbul ignore next */ []));
+        /** Reference to the dropdown list container. */
+        this.dropdownContainer = viewChild('dropdownContainer', ...(ngDevMode ? [{ debugName: "dropdownContainer" }] : /* istanbul ignore next */ []));
+        /** Underlying selection value (mirrors the reactive control). */
+        this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown is open. */
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Index of the currently focused option for keyboard navigation. */
+        this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+        /** Current search term (searchable mode). */
+        this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        /** Current page of the paginated dropdown. */
+        this.currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        /** Tracks whether the user typed in the search input. */
+        this.searchTermChanged = signal(false, ...(ngDevMode ? [{ debugName: "searchTermChanged" }] : /* istanbul ignore next */ []));
+        /** Internal disabled state from the reactive form (setDisabledState). */
+        this._isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+        /** Debounce timer handle for the search output. */
+        this.debounceTimer = null;
+        /** Error-state counter used to recompute error helpers reactively. */
+        this.errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+        /** Whether an error has been shown at some point (for "fixed" messaging). */
+        this.hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+        /** Whether control status/value subscriptions have been attached. */
+        this.subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+        this.valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+        /** Current selection value. */
+        this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** True when the select is disabled via input or by the reactive form. */
+        this.isDisabled = computed(() => this.disabled() || this._isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Resolves the form control from `control` or from `formGroup`+`label`. */
+        this.actualControl = computed(() => {
+            const ctrl = this.control();
+            if (ctrl)
+                return ctrl;
+            const fg = this.formGroup();
+            const lbl = this.label();
+            if (fg && lbl) {
+                return fg.get(lbl);
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+        /** Whether the bound control should display its error (invalid + touched/dirty). */
+        this.shouldShowError = computed(() => {
+            this.errorTracker();
+            const ctrl = this.actualControl();
+            return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
+        }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+        /** Whether an error was shown before and the control is now valid + touched. */
+        this.wasFixedError = computed(() => {
+            this.errorTracker();
+            const ctrl = this.actualControl();
+            return this.hadError() && ctrl?.valid && ctrl?.touched;
+        }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+        /** Text shown in the trigger: the selected label(s) or the placeholder. */
+        this.displayValue = computed(() => {
+            const val = this._value();
+            const opts = this.options();
+            const isMultiple = this.multiple();
+            const ph = this.placeholder();
+            if (!val || (Array.isArray(val) && val.length === 0)) {
+                return ph;
+            }
+            if (isMultiple) {
+                const values = Array.isArray(val) ? val : [];
+                const selectedLabels = opts
+                    .filter((option) => values.includes(option.value))
+                    .map((option) => option.label);
+                if (selectedLabels.length === 0) {
+                    return values.toString();
+                }
+                return selectedLabels.join(', ');
+            }
+            const selectedOption = opts.find((opt) => opt.value === val);
+            return selectedOption ? selectedOption.label : val;
+        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        /** List of validation error messages for the bound control. */
+        this.getErrorMessages = computed(() => {
+            this.errorTracker();
+            const ctrl = this.actualControl();
+            if (!ctrl?.errors)
+                return [];
+            const customErrors = this.errorMessages();
+            const t = this.transloco;
+            return Object.keys(ctrl.errors).map((errorKey) => {
+                if (customErrors[errorKey])
+                    return customErrors[errorKey];
+                switch (errorKey) {
+                    case 'required':
+                        return t.translate('validation.required');
+                    case 'email':
+                        return t.translate('validation.email');
+                    case 'minlength':
+                        return t.translate('validation.minlength', {
+                            min: ctrl.errors['minlength'].requiredLength,
+                        });
+                    case 'maxlength':
+                        return t.translate('validation.maxlength', {
+                            max: ctrl.errors['maxlength'].requiredLength,
+                        });
+                    case 'pattern':
+                        return t.translate('validation.pattern');
+                    default:
+                        return t.translate('validation.invalid');
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+        /** Options filtered by the search term (matches first, then contains). */
+        this.filteredOptions = computed(() => {
+            const opts = this.options();
+            const term = this.searchTerm();
+            if (!term)
+                return opts;
+            const normalizedSearchTerm = this.normalizeText(term);
+            const matched = opts.filter((option) => this.normalizeText(option.label).includes(normalizedSearchTerm));
+            return matched.sort((a, b) => {
+                const aLbl = this.normalizeText(a.label);
+                const bLbl = this.normalizeText(b.label);
+                const aStarts = aLbl.startsWith(normalizedSearchTerm);
+                const bStarts = bLbl.startsWith(normalizedSearchTerm);
+                if (aStarts && !bStarts)
+                    return -1;
+                if (!aStarts && bStarts)
+                    return 1;
+                return 0;
+            });
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        /** Options for the current page, with a synthetic custom entry when allowed. */
+        this.paginatedOptions = computed(() => {
+            let filtered = this.filteredOptions();
+            const term = this.searchTerm();
+            const allowCustom = this.allowCustomEntries();
+            if (allowCustom && term && !filtered.some((o) => o.value === term)) {
+                filtered = [
+                    {
+                        label: `${term} (nuevo)`,
+                        value: term,
+                        custom: true,
+                    },
+                    ...filtered,
+                ];
+            }
+            if (!this.usePagination()) {
+                return filtered;
+            }
+            const page = this.currentPage();
+            const perPage = this.itemsPerPage();
+            const startIndex = (page - 1) * perPage;
+            const endIndex = startIndex + perPage;
+            return filtered.slice(startIndex, endIndex);
+        }, ...(ngDevMode ? [{ debugName: "paginatedOptions" }] : /* istanbul ignore next */ []));
+        /** Non-custom options, including the empty option in single-select mode. */
+        this.regularOptions = computed(() => {
+            const opts = this.paginatedOptions().filter((option) => !option.custom);
+            if (!this.multiple() && this.showEmptyOption()) {
+                return [{ label: '- Sin selección -', value: null }, ...opts];
+            }
+            return opts;
+        }, ...(ngDevMode ? [{ debugName: "regularOptions" }] : /* istanbul ignore next */ []));
+        /** Total pages of the filtered option list (1 when pagination is off). */
+        this.totalPages = computed(() => {
+            if (!this.usePagination()) {
+                return 1;
+            }
+            const filtered = this.filteredOptions();
+            const perPage = this.itemsPerPage();
+            return Math.ceil(filtered.length / perPage);
+        }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+        /** Whether there is at least one selected value. */
+        this.hasSelectedValues = computed(() => {
+            const val = this._value();
+            if (this.multiple()) {
+                return val && val.length > 0;
+            }
+            return !!val;
+        }, ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : /* istanbul ignore next */ []));
+        /** Whether the custom optional entry should be offered for the current term. */
+        this.showCustomOption = computed(() => {
+            const term = this.searchTerm();
+            const opts = this.options();
+            return (this.allowCustomEntries() &&
+                term !== '' &&
+                !opts.some((o) => o.value === term));
+        }, ...(ngDevMode ? [{ debugName: "showCustomOption" }] : /* istanbul ignore next */ []));
+        this.transloco = inject(TranslocoService);
+        /** ControlValueAccessor onChange callback. */
+        this.onChange = (_) => { };
+        /** ControlValueAccessor onTouched callback. */
+        this.onTouched = () => { };
+        this.destroyRef = inject(DestroyRef);
+        // Debounced search emission whenever the term changes (searchable mode).
+        effect(() => {
+            const term = this.searchTerm();
+            if (term !== '' && this.isSearchable()) {
+                if (this.debounceTimer) {
+                    clearTimeout(this.debounceTimer);
+                }
+                this.debounceTimer = setTimeout(() => {
+                    this.search.emit(term);
+                }, 300);
+            }
+        });
+        // Normalizes the value to arrays in multiple mode when empty.
+        effect(() => {
+            const isMultiple = this.multiple();
+            if (this._value() === null || this._value() === undefined) {
+                this._value.set(isMultiple ? [] : null);
+            }
+        });
+        // Resets to the first page when options reload, clearing the search
+        // term unless it must be preserved.
+        effect(() => {
+            this.options();
+            this.currentPage.set(1);
+            if (!this.preserveSearchOnLoad() || !this.searchTermChanged()) {
+                this.searchTerm.set('');
+            }
+        });
+        // Subscribes to the bound control status/value changes to track errors.
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl) {
+                this.subscribed.set(false);
+                return;
+            }
+            if (this.subscribed())
+                return;
+            if (ctrl.invalid && ctrl.touched) {
+                this.hadError.set(true);
+            }
+            ctrl.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+                if (ctrl.invalid && ctrl.touched) {
+                    this.hadError.set(true);
+                }
+            });
+            ctrl.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+            });
+            this.subscribed.set(true);
+        });
+        // Forces error recomputation when the active translation changes.
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.errorTracker.update((v) => v + 1);
+        });
+        // One-way sync from the reactive control to the internal value signal.
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl)
+                return;
+            if (!this.valueSubscribed()) {
+                this.writeValue(ctrl.value);
+                ctrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                    this.writeValue(value);
+                });
+                this.valueSubscribed.set(true);
+            }
+        });
+    }
+    /** Sets the disabled state coming from the reactive form infrastructure. */
+    setDisabledState(isDisabled) {
+        this._isDisabled.set(isDisabled);
+    }
+    /** Marks the control as touched and updates validity and error state. */
+    markAsTouchedAndUpdate() {
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.markAsTouched();
+            ctrl.updateValueAndValidity({ emitEvent: false });
+        }
+        this.onTouched();
+        this.errorTracker.update((v) => v + 1);
+        if (ctrl?.invalid) {
+            this.hadError.set(true);
+        }
+    }
+    /** Strips accents and lowercases text for accent-insensitive matching. */
+    normalizeText(text) {
+        return text
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase();
+    }
+    /** Keyboard handler for the trigger element (open/close/navigate/select). */
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    if (this.focusedIndex() >= 0) {
+                        const options = this.regularOptions();
+                        const selectedOption = options[this.focusedIndex()];
+                        if (selectedOption && !this.isOptionDisabled(selectedOption)) {
+                            this.selectOption(selectedOption);
+                        }
+                    }
+                }
+                else {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    this.isOpen.set(false);
+                    this.searchTerm.set('');
+                    this.focusedIndex.set(-1);
+                    this.selectTrigger()?.nativeElement.focus();
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggleDropdown();
+                }
+                else {
+                    this.moveFocus(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.moveFocus(-1);
+                }
+                break;
+            case 'Tab':
+                if (this.isOpen()) {
+                    this.isOpen.set(false);
+                    this.searchTerm.set('');
+                    this.focusedIndex.set(-1);
+                }
+                break;
+        }
+    }
+    /** Keyboard handler for the search input inside a searchable dropdown. */
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.focusedIndex() >= 0) {
+                    const options = this.regularOptions();
+                    const option = options[this.focusedIndex()];
+                    if (option && !this.isOptionDisabled(option)) {
+                        this.selectOption(option);
+                    }
+                }
+                else {
+                    const filtered = this.filteredOptions();
+                    if (filtered.length > 0) {
+                        this.selectOption(filtered[0]);
+                    }
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveFocus(-1);
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                event.preventDefault();
+                this.isOpen.set(false);
+                this.searchTerm.set('');
+                this.focusedIndex.set(-1);
+                this.selectTrigger()?.nativeElement.focus();
+                break;
+        }
+    }
+    /** Moves the focused option index by `direction`, skipping disabled ones. */
+    moveFocus(direction) {
+        const options = this.regularOptions();
+        if (!options.length)
+            return;
+        let newIndex = this.focusedIndex();
+        do {
+            newIndex = newIndex + direction;
+            if (newIndex < 0)
+                newIndex = options.length - 1;
+            if (newIndex >= options.length)
+                newIndex = 0;
+        } while (this.isOptionDisabled(options[newIndex]) && options.length > 1);
+        this.focusedIndex.set(newIndex);
+        setTimeout(() => {
+            const container = this.dropdownContainer()?.nativeElement;
+            const activeItem = container?.querySelector('.select-option-active');
+            if (activeItem && container) {
+                const itemTop = activeItem.offsetTop;
+                const itemBottom = itemTop + activeItem.offsetHeight;
+                const containerScrollTop = container.scrollTop;
+                const containerHeight = container.clientHeight;
+                if (itemTop < containerScrollTop) {
+                    container.scrollTop = itemTop;
+                }
+                else if (itemBottom > containerScrollTop + containerHeight) {
+                    container.scrollTop = itemBottom - containerHeight;
+                }
+            }
+        });
+    }
+    /** Index of the currently selected option, or -1. */
+    getSelectedIndex() {
+        const currentVal = this._value();
+        const options = this.regularOptions();
+        if (currentVal === null || currentVal === undefined)
+            return -1;
+        const index = options.findIndex((opt) => opt.value === currentVal);
+        return index >= 0 ? index : -1;
+    }
+    /** Whether an option is disabled based on the valid combinations rule. */
+    isOptionDisabled(option) {
+        if (option.value === null)
+            return false;
+        const validCombos = this.validCombinations();
+        if (!validCombos || !this.multiple()) {
+            return false;
+        }
+        const currentSelection = Array.isArray(this._value()) ? this._value() : [];
+        if (currentSelection.length === 0) {
+            return false;
+        }
+        if (currentSelection.includes(option.value)) {
+            return false;
+        }
+        const hypotheticalSelection = [...currentSelection, option.value];
+        return !validCombos.some((combination) => {
+            const allSelected = hypotheticalSelection.every((selected) => combination.includes(selected));
+            const withinLimit = hypotheticalSelection.length <= combination.length;
+            return allSelected && withinLimit;
+        });
+    }
+    /** Whether an option is currently selected. */
+    isSelected(option) {
+        const val = this._value();
+        if (this.multiple()) {
+            return Array.isArray(val) && val.includes(option.value);
+        }
+        return val === option.value;
+    }
+    /** Goes to the next options page when possible. */
+    nextPage() {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (current < total) {
+            this.currentPage.set(current + 1);
+        }
+    }
+    /** Goes to the previous options page when possible. */
+    previousPage() {
+        const current = this.currentPage();
+        if (current > 1) {
+            this.currentPage.set(current - 1);
+        }
+    }
+    /** Closes the dropdown when a click happens outside the component. */
+    onClickOutside(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside && this.isOpen()) {
+            this.markAsTouchedAndUpdate();
+            this.isOpen.set(false);
+            this.searchTerm.set('');
+            this.focusedIndex.set(-1);
+        }
+    }
+    /** Selects a typed free-text value as a new custom entry. */
+    onCustomOptionClick() {
+        const term = this.searchTerm();
+        const customOption = {
+            label: term,
+            value: term,
+        };
+        this._value.set(customOption.value);
+        this.onChange(customOption.value);
+        this.selectionChange.emit(customOption.value);
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(customOption.value);
+        }
+        this.markAsTouchedAndUpdate();
+    }
+    /** Handles typing in the search input (updates term and emits search). */
+    onInputChange(event) {
+        const previousSearch = this.searchTerm();
+        const target = event.target;
+        this.searchTerm.set(target.value);
+        this.searchTermChanged.set(true);
+        if (previousSearch !== this.searchTerm()) {
+            this.search.emit(this.searchTerm());
+            if (this.allowCustomEntries() && this.searchTerm()) {
+                this._value.set(this.searchTerm());
+                this.onChange(this.searchTerm());
+                this.selectionChange.emit(this.searchTerm());
+            }
+        }
+        this.currentPage.set(1);
+    }
+    /** Selects or toggles the clicked option (custom entries included). */
+    onOptionClick(option) {
+        if (this.isDisabled())
+            return;
+        if (this.allowCustomEntries() && option.value === this.searchTerm()) {
+            const customOption = {
+                label: this.searchTerm(),
+                value: this.searchTerm(),
+            };
+            this._value.set(customOption.value);
+            this.onChange(customOption.value);
+            this.selectionChange.emit(customOption.value);
+            this.isOpen.set(false);
+            this.searchTerm.set('');
+            const ctrl = this.actualControl();
+            if (ctrl) {
+                ctrl.setValue(customOption.value);
+            }
+            this.markAsTouchedAndUpdate();
+            return;
+        }
+        if (this.multiple()) {
+            this.toggleOption(option);
+        }
+        else {
+            this.selectOption(option);
+        }
+    }
+    /** Selects a single option and updates the control/outputs. */
+    selectOption(option) {
+        if (this.multiple()) {
+            this.toggleOption(option);
+            return;
+        }
+        this._value.set(option.value);
+        this.onChange(option.value);
+        this.onTouched();
+        this.selectionChange.emit(option.value);
+        this.isOpen.set(false);
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(option.value);
+        }
+        this.markAsTouchedAndUpdate();
+        this.focusedIndex.set(-1);
+        this.selectTrigger()?.nativeElement.focus();
+    }
+    /** Toggles an option in multiple mode, honoring the valid combinations. */
+    toggleOption(option) {
+        if (this.isOptionDisabled(option))
+            return;
+        if (!this.multiple())
+            return;
+        let currentValue = this._value();
+        if (!Array.isArray(currentValue)) {
+            currentValue = [];
+        }
+        const index = currentValue.indexOf(option.value);
+        let newValue;
+        if (index === -1) {
+            newValue = [...currentValue, option.value];
+        }
+        else {
+            newValue = currentValue.filter((v) => v !== option.value);
+        }
+        this._value.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.selectionChange.emit(newValue);
+        this.markAsTouchedAndUpdate();
+    }
+    /** Opens/closes the dropdown and manages focus/selection state. */
+    toggleDropdown() {
+        if (this.isDisabled())
+            return;
+        const wasOpen = this.isOpen();
+        this.isOpen.update((v) => !v);
+        if (!wasOpen && this.isOpen()) {
+            const selectedIdx = this.getSelectedIndex();
+            this.focusedIndex.set(selectedIdx);
+        }
+        else if (wasOpen && !this.isOpen()) {
+            this.searchTerm.set('');
+            this.focusedIndex.set(-1);
+            this.selectTrigger()?.nativeElement.focus();
+        }
+        if (this.isOpen() && this.isSearchable()) {
+            setTimeout(() => {
+                this.filterInput()?.nativeElement?.focus();
+            });
+        }
+        this.onTouched();
+    }
+    /** trackBy for rendered options so Angular reuses DOM nodes by value. */
+    trackByFn(index, option) {
+        return option.value;
+    }
+    /** Writes an external value into the internal signal (ControlValueAccessor). */
+    writeValue(value) {
+        if (value === null ||
+            value === undefined ||
+            value === '' ||
+            (Array.isArray(value) && value.length === 0)) {
+            this._value.set(this.multiple() ? [] : null);
+        }
+        else {
+            this._value.set(value);
+        }
+    }
+    /** Stores the onChange callback (ControlValueAccessor). */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** Stores the onTouched callback (ControlValueAccessor). */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SelectComponent, isStandalone: true, selector: "shk-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validCombinations: { classPropertyName: "validCombinations", publicName: "validCombinations", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isAllDataLoaded: { classPropertyName: "isAllDataLoaded", publicName: "isAllDataLoaded", isSignal: true, isRequired: false, transformFunction: null }, allowCustomEntries: { classPropertyName: "allowCustomEntries", publicName: "allowCustomEntries", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, isSearchable: { classPropertyName: "isSearchable", publicName: "isSearchable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, usePagination: { classPropertyName: "usePagination", publicName: "usePagination", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, preserveSearchOnLoad: { classPropertyName: "preserveSearchOnLoad", publicName: "preserveSearchOnLoad", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageKey: { classPropertyName: "emptyMessageKey", publicName: "emptyMessageKey", isSignal: true, isRequired: false, transformFunction: null }, dropdownUpward: { classPropertyName: "dropdownUpward", publicName: "dropdownUpward", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", search: "search" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true, isSignal: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #selectContainer\n  class=\"relative w-full font-sans outline-none\"\n>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div\n    #selectTrigger\n    class=\"flex justify-between items-center w-full px-3 py-2 border _shk-border rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] focus-within:ring-1 focus-within:[--tw-ring-color:var(--shk-primary-500)] focus-within:[border-color:var(--shk-primary-500)] focus:outline-none focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] focus:[border-color:var(--shk-primary-500)] sm:text-sm\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"toggleDropdown()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled-select]=\"isDisabled()\"\n    [class._shk-border-red]=\"shouldShowError()\"\n  >\n    <div class=\"selected-value truncate\">\n      @if (isSearchable() && isOpen()) {\n        <input\n          #filterInput\n          type=\"text\"\n          class=\"w-full bg-transparent border-0 outline-none p-0 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          placeholder=\"Buscar...\"\n          [value]=\"searchTerm()\"\n          (input)=\"onInputChange($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <span\n          [class._shk-text-surface-400]=\"!hasSelectedValues()\"\n          [class._shk-text-surface-800]=\"hasSelectedValues()\"\n        >\n          {{ displayValue() }}\n        </span>\n      }\n    </div>\n    <div\n      class=\"text-xs transition-transform duration-200 shrink-0 ml-2\"\n      [class.rotate-180]=\"isOpen()\"\n    >\n      <svg\n        [lucideIcon]=\"getIcon('chevron-down')\"\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\"\n      ></svg>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      #dropdownContainer\n      (keydown)=\"onKeydown($event)\"\n      class=\"absolute left-0 right-0 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border _shk-border rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg _shk-scrollbar\"\n      [class.top-full]=\"!dropdownUpward()\"\n      [class.bottom-full]=\"dropdownUpward()\"\n      [class.mt-1]=\"!dropdownUpward()\"\n      [class.mb-1]=\"dropdownUpward()\"\n    >\n      @if (showCustomOption()) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-200)] text-sm\"\n          (click)=\"onCustomOptionClick()\"\n        >\n          <span class=\"font-semibold _shk-text-primary\">Crear nuevo:</span>\n          <span class=\"_shk-text-surface-700 dark:[color:var(--shk-surface-700)] ml-1\">{{ searchTerm() }}</span>\n        </div>\n      }\n\n      @for (option of regularOptions(); track trackByFn($index, option); let i = $index) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          [class.opacity-50]=\"isOptionDisabled(option)\"\n          [class.select-option-active]=\"focusedIndex() === i\"\n          [class._shk-text-surface-400]=\"option.value === null\"\n          (click)=\"!isOptionDisabled(option) && onOptionClick(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"!isOptionDisabled(option) && toggleOption(option)\"\n              class=\"flex-shrink-0 [accent-color:var(--shk-primary-600)]\"\n            />\n            {{ option.label }}\n          } @else {\n            {{ option.label }}\n          }\n        </div>\n      }\n\n      <div class=\"px-3 py-2 text-center\">\n        @if (isLoading() && regularOptions().length === 0) {\n          <div class=\"flex items-center justify-center gap-2 text-sm _shk-text-surface-500\">\n            <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n              <circle\n                class=\"path\"\n                cx=\"25\"\n                cy=\"25\"\n                r=\"20\"\n                fill=\"none\"\n                stroke-width=\"5\"\n              ></circle>\n            </svg>\n            Cargando m\u00E1s resultados...\n          </div>\n        }\n\n        @if (!isLoading() && isAllDataLoaded() && regularOptions().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 italic\">\n            {{ emptyMessageKey() | transloco }}\n          </div>\n        }\n      </div>\n\n      @if (usePagination() && totalPages() > 1) {\n        <div class=\"flex justify-between items-center px-3 py-2 border-t _shk-border\">\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"$event.stopPropagation(); previousPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n          </button>\n          <span class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            {{ currentPage() }} de {{ totalPages() }}\n          </span>\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (click)=\"$event.stopPropagation(); nextPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto _shk-scrollbar\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-select', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TranslocoModule,
+                        LucideDynamicIcon,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  #selectContainer\n  class=\"relative w-full font-sans outline-none\"\n>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div\n    #selectTrigger\n    class=\"flex justify-between items-center w-full px-3 py-2 border _shk-border rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] focus-within:ring-1 focus-within:[--tw-ring-color:var(--shk-primary-500)] focus-within:[border-color:var(--shk-primary-500)] focus:outline-none focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] focus:[border-color:var(--shk-primary-500)] sm:text-sm\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"toggleDropdown()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled-select]=\"isDisabled()\"\n    [class._shk-border-red]=\"shouldShowError()\"\n  >\n    <div class=\"selected-value truncate\">\n      @if (isSearchable() && isOpen()) {\n        <input\n          #filterInput\n          type=\"text\"\n          class=\"w-full bg-transparent border-0 outline-none p-0 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          placeholder=\"Buscar...\"\n          [value]=\"searchTerm()\"\n          (input)=\"onInputChange($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <span\n          [class._shk-text-surface-400]=\"!hasSelectedValues()\"\n          [class._shk-text-surface-800]=\"hasSelectedValues()\"\n        >\n          {{ displayValue() }}\n        </span>\n      }\n    </div>\n    <div\n      class=\"text-xs transition-transform duration-200 shrink-0 ml-2\"\n      [class.rotate-180]=\"isOpen()\"\n    >\n      <svg\n        [lucideIcon]=\"getIcon('chevron-down')\"\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\"\n      ></svg>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      #dropdownContainer\n      (keydown)=\"onKeydown($event)\"\n      class=\"absolute left-0 right-0 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border _shk-border rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg _shk-scrollbar\"\n      [class.top-full]=\"!dropdownUpward()\"\n      [class.bottom-full]=\"dropdownUpward()\"\n      [class.mt-1]=\"!dropdownUpward()\"\n      [class.mb-1]=\"dropdownUpward()\"\n    >\n      @if (showCustomOption()) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-200)] text-sm\"\n          (click)=\"onCustomOptionClick()\"\n        >\n          <span class=\"font-semibold _shk-text-primary\">Crear nuevo:</span>\n          <span class=\"_shk-text-surface-700 dark:[color:var(--shk-surface-700)] ml-1\">{{ searchTerm() }}</span>\n        </div>\n      }\n\n      @for (option of regularOptions(); track trackByFn($index, option); let i = $index) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          [class.opacity-50]=\"isOptionDisabled(option)\"\n          [class.select-option-active]=\"focusedIndex() === i\"\n          [class._shk-text-surface-400]=\"option.value === null\"\n          (click)=\"!isOptionDisabled(option) && onOptionClick(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"!isOptionDisabled(option) && toggleOption(option)\"\n              class=\"flex-shrink-0 [accent-color:var(--shk-primary-600)]\"\n            />\n            {{ option.label }}\n          } @else {\n            {{ option.label }}\n          }\n        </div>\n      }\n\n      <div class=\"px-3 py-2 text-center\">\n        @if (isLoading() && regularOptions().length === 0) {\n          <div class=\"flex items-center justify-center gap-2 text-sm _shk-text-surface-500\">\n            <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n              <circle\n                class=\"path\"\n                cx=\"25\"\n                cy=\"25\"\n                r=\"20\"\n                fill=\"none\"\n                stroke-width=\"5\"\n              ></circle>\n            </svg>\n            Cargando m\u00E1s resultados...\n          </div>\n        }\n\n        @if (!isLoading() && isAllDataLoaded() && regularOptions().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 italic\">\n            {{ emptyMessageKey() | transloco }}\n          </div>\n        }\n      </div>\n\n      @if (usePagination() && totalPages() > 1) {\n        <div class=\"flex justify-between items-center px-3 py-2 border-t _shk-border\">\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"$event.stopPropagation(); previousPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n          </button>\n          <span class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            {{ currentPage() }} de {{ totalPages() }}\n          </span>\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (click)=\"$event.stopPropagation(); nextPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto _shk-scrollbar\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], validCombinations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validCombinations", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isAllDataLoaded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAllDataLoaded", required: false }] }], allowCustomEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomEntries", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], isSearchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearchable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], usePagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "usePagination", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], preserveSearchOnLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveSearchOnLoad", required: false }] }], emptyMessageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessageKey", required: false }] }], dropdownUpward: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownUpward", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], search: [{ type: i0.Output, args: ["search"] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], selectContainer: [{ type: i0.ViewChild, args: ['selectContainer', { isSignal: true }] }], selectTrigger: [{ type: i0.ViewChild, args: ['selectTrigger', { isSignal: true }] }], dropdownContainer: [{ type: i0.ViewChild, args: ['dropdownContainer', { isSignal: true }] }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SelectComponent };
+//# sourceMappingURL=shirkasoft-ui-components-select.mjs.map