@keenthemes/ktui 1.0.7 → 1.0.9

package/lib/esm/components/select/select.js

@@ -0,0 +1,1535 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import KTData from '../../helpers/data';
+import KTDom from '../../helpers/dom';
+import KTComponent from '../component';
+import { KTSelectState, } from './config';
+import { KTSelectOption } from './option';
+import { KTSelectRemote } from './remote';
+import { KTSelectSearch } from './search';
+import { defaultTemplates } from './templates';
+import { KTSelectCombobox } from './combobox';
+import { KTSelectDropdown } from './dropdown';
+import { handleDropdownKeyNavigation, filterOptions, FocusManager, EventManager, } from './utils';
+import { KTSelectTags } from './tags';
+import { SelectMode } from './types';
+var KTSelect = /** @class */ (function (_super) {
+    __extends(KTSelect, _super);
+    /**
+     * Constructor: Initializes the select component
+     */
+    function KTSelect(element, config) {
+        var _this = _super.call(this) || this;
+        // Core properties
+        _this._name = 'select';
+        _this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
+        // State
+        _this._dropdownIsOpen = false;
+        _this._comboboxModule = null;
+        _this._tagsModule = null;
+        _this._dropdownModule = null;
+        _this._loadMoreIndicator = null;
+        // Search debounce timeout
+        _this._searchDebounceTimeout = null;
+        // Store original options HTML for restoring after search
+        _this._originalOptionsHtml = null;
+        if (KTData.has(element, _this._name)) {
+            return _this;
+        }
+        _this._init(element);
+        _this._buildConfig(config);
+        _this._state = new KTSelectState(_this._config);
+        _this._config = _this._state.getConfig();
+        element.instance = _this;
+        // Initialize event manager
+        _this._eventManager = new EventManager();
+        // Initialize remote module if remote data is enabled
+        if (_this._config.remote) {
+            _this._remoteModule = new KTSelectRemote(_this._config, _this._element);
+            _this._initializeRemoteData();
+        }
+        else {
+            _this._state
+                .setItems()
+                .then(function () {
+                if (_this._config.debug)
+                    console.log('Setting up component after remote data is loaded');
+                _this._setupComponent();
+            })
+                .catch(function (error) {
+                console.error('Error setting items:', error);
+                // Handle the error, e.g., display an error message to the user
+            });
+        }
+        return _this;
+    }
+    /**
+     * Initialize remote data fetching
+     */
+    KTSelect.prototype._initializeRemoteData = function () {
+        var _this = this;
+        if (!this._remoteModule || !this._config.remote)
+            return;
+        if (this._config.debug)
+            console.log('Initializing remote data with URL:', this._config.dataUrl);
+        // Show loading state
+        this._renderLoadingState();
+        // Fetch remote data
+        this._remoteModule
+            .fetchData()
+            .then(function (items) {
+            if (_this._config.debug)
+                console.log('Remote data fetched:', items);
+            // Remove placeholder/loading options before setting new items
+            _this._clearExistingOptions();
+            // Update state with fetched items
+            _this._state
+                .setItems(items)
+                .then(function () {
+                // Generate options from the fetched data
+                _this._generateOptionsHtml(_this._element);
+                if (_this._config.debug)
+                    console.log('Generating options HTML from remote data');
+                _this._setupComponent();
+                // Add pagination "Load More" button if needed
+                if (_this._config.pagination && _this._remoteModule.hasMorePages()) {
+                    _this._addLoadMoreButton();
+                }
+            })
+                .catch(function (error) {
+                console.error('Error setting items:', error);
+                _this._renderErrorState(error.message || 'Failed to load data');
+            });
+        })
+            .catch(function (error) {
+            console.error('Error fetching remote data:', error);
+            _this._renderErrorState(_this._remoteModule.getErrorMessage() || 'Failed to load data');
+        });
+    };
+    /**
+     * Clear existing options from the select element
+     */
+    KTSelect.prototype._clearExistingOptions = function () {
+        // Keep only the empty/placeholder option and remove the rest
+        var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
+        options.forEach(function (option) { return option.remove(); });
+        // Ensure we have at least an empty option
+        if (this._element.querySelectorAll('option').length === 0) {
+            var emptyOption = defaultTemplates.emptyOption(__assign(__assign({}, this._config), { placeholder: this._config.placeholder }));
+            this._element.appendChild(emptyOption);
+        }
+    };
+    /**
+     * Helper to show a dropdown message (error, loading, noResults)
+     */
+    KTSelect.prototype._showDropdownMessage = function (type, message) {
+        if (!this._dropdownContentElement)
+            return;
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        if (!optionsContainer)
+            return;
+        switch (type) {
+            case 'error':
+                optionsContainer.innerHTML = defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message }));
+                break;
+            case 'loading':
+                optionsContainer.innerHTML = defaultTemplates.loading(this._config, message || 'Loading...').outerHTML;
+                break;
+            case 'noResults':
+                optionsContainer.innerHTML = '';
+                optionsContainer.appendChild(defaultTemplates.noResults(this._config));
+                break;
+        }
+    };
+    /**
+     * Render loading state in dropdown
+     */
+    KTSelect.prototype._renderLoadingState = function () {
+        if (this._element.querySelectorAll('option').length <= 1) {
+            var existingLoadingOptions = this._element.querySelectorAll('option[disabled][selected][value=""]');
+            existingLoadingOptions.forEach(function (option) { return option.remove(); });
+            this._showDropdownMessage('loading', 'Loading options...');
+        }
+    };
+    /**
+     * Render error state
+     * @param message Error message
+     */
+    KTSelect.prototype._renderErrorState = function (message) {
+        // Create error option if the select is empty
+        if (this._element.querySelectorAll('option').length <= 1) {
+            var loadingOptions = this._element.querySelectorAll('option[disabled]:not([value])');
+            loadingOptions.forEach(function (option) { return option.remove(); });
+            // Use template function for error option instead of hardcoded element
+            var errorOption = defaultTemplates.errorOption(__assign(__assign({}, this._config), { errorMessage: message }));
+            this._element.appendChild(errorOption);
+        }
+        // If dropdown is already created, show error message there
+        this._showDropdownMessage('error', message);
+        if (!this._wrapperElement) {
+            if (this._config.debug)
+                console.log('Setting up component after error');
+            this._setupComponent();
+        }
+    };
+    /**
+     * Add "Load More" button for pagination
+     */
+    KTSelect.prototype._addLoadMoreButton = function () {
+        if (!this._dropdownContentElement || !this._config.pagination)
+            return;
+        // Remove existing button if any
+        if (this._loadMoreIndicator) {
+            this._loadMoreIndicator.remove();
+            this._loadMoreIndicator = null;
+        }
+        // Create load more button using template
+        this._loadMoreIndicator = defaultTemplates.loadMore(this._config);
+        // Add to dropdown
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        if (optionsContainer) {
+            optionsContainer.appendChild(this._loadMoreIndicator);
+        }
+        else {
+            this._dropdownContentElement.appendChild(this._loadMoreIndicator);
+        }
+        // Add event listener
+        this._loadMoreIndicator.addEventListener('click', this._handleLoadMore.bind(this));
+    };
+    /**
+     * Handle load more button click
+     */
+    KTSelect.prototype._handleLoadMore = function () {
+        var _this = this;
+        if (!this._remoteModule || !this._config.pagination)
+            return;
+        // Show loading state
+        if (this._loadMoreIndicator) {
+            this._loadMoreIndicator.textContent = 'Loading...';
+        }
+        // Fetch next page
+        this._remoteModule
+            .loadNextPage()
+            .then(function (newItems) {
+            // Get existing items
+            var existingItems = _this._state.getItems();
+            // Combine new items with existing items
+            _this._state
+                .setItems(__spreadArray(__spreadArray([], existingItems, true), newItems, true))
+                .then(function () {
+                // Update options in the dropdown
+                _this._updateOptionsInDropdown(newItems);
+                // Check if there are more pages
+                if (_this._remoteModule.hasMorePages()) {
+                    // Reset load more button
+                    if (_this._loadMoreIndicator) {
+                        _this._loadMoreIndicator.textContent =
+                            _this._config.loadMoreText || 'Load more...';
+                    }
+                }
+                else {
+                    // Remove load more button if no more pages
+                    if (_this._loadMoreIndicator) {
+                        _this._loadMoreIndicator.remove();
+                        _this._loadMoreIndicator = null;
+                    }
+                }
+            })
+                .catch(function (error) {
+                console.error('Error updating items:', error);
+                // Reset load more button
+                if (_this._loadMoreIndicator) {
+                    _this._loadMoreIndicator.textContent = 'Error loading more items';
+                }
+            });
+        })
+            .catch(function (error) {
+            console.error('Error loading more items:', error);
+            // Reset load more button
+            if (_this._loadMoreIndicator) {
+                _this._loadMoreIndicator.textContent = 'Error loading more items';
+            }
+        });
+    };
+    /**
+     * Update options in the dropdown
+     * @param newItems New items to add to the dropdown
+     */
+    KTSelect.prototype._updateOptionsInDropdown = function (newItems) {
+        var _this = this;
+        if (!this._dropdownContentElement || !newItems.length)
+            return;
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        if (!optionsContainer)
+            return;
+        // Get the load more button
+        var loadMoreButton = optionsContainer.querySelector('[data-kt-select-load-more]');
+        // Process each new item
+        newItems.forEach(function (item) {
+            // Create option for the original select
+            var selectOption = defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title || 'Unnamed option' }));
+            selectOption.value = item.id || '';
+            // Add description and icon attributes if available and valid
+            if (item.description &&
+                item.description !== 'null' &&
+                item.description !== 'undefined') {
+                selectOption.setAttribute('data-kt-select-option-description', item.description);
+            }
+            if (item.icon && item.icon !== 'null' && item.icon !== 'undefined') {
+                selectOption.setAttribute('data-kt-select-option-icon', item.icon);
+            }
+            // Add the option to the original select element
+            _this._element.appendChild(selectOption);
+            // Create option element for the dropdown using the KTSelectOption class
+            // This ensures consistent option rendering
+            var ktOption = new KTSelectOption(selectOption, _this._config);
+            var renderedOption = ktOption.render();
+            // Add to dropdown container
+            if (loadMoreButton) {
+                // Insert before the load more button
+                optionsContainer.insertBefore(renderedOption, loadMoreButton);
+            }
+            else {
+                // Append to the end
+                optionsContainer.appendChild(renderedOption);
+            }
+        });
+        // Update options NodeList to include the new options
+        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        if (this._config.debug)
+            console.log("Added ".concat(newItems.length, " more options to dropdown"));
+    };
+    /**
+     * ========================================================================
+     * INITIALIZATION METHODS
+     * ========================================================================
+     */
+    /**
+     * Set up the component after everything is initialized
+     */
+    KTSelect.prototype._setupComponent = function () {
+        // Setup HTML structure
+        this._createHtmlStructure();
+        this._setupElementReferences();
+        this._initZIndex();
+        // Initialize options
+        this._initializeOptionsHtml();
+        this._preSelectOptions(this._element);
+        // Apply disabled state if needed
+        this._applyInitialDisabledState();
+        // Initialize search if enabled
+        if (this._config.enableSearch) {
+            this._initializeSearchModule();
+        }
+        // Initialize combobox if enabled
+        if (this._config.mode === SelectMode.COMBOBOX) {
+            this._comboboxModule = new KTSelectCombobox(this);
+        }
+        // Initialize tags if enabled
+        if (this._config.mode === SelectMode.TAGS) {
+            this._tagsModule = new KTSelectTags(this);
+        }
+        // Initialize focus manager after dropdown element is created
+        this._focusManager = new FocusManager(this._dropdownContentElement, '[data-kt-select-option]', this._config);
+        // Initialize dropdown module after all elements are created
+        this._dropdownModule = new KTSelectDropdown(this._wrapperElement, this._displayElement, this._dropdownContentElement, this._config);
+        // Update display and set ARIA attributes
+        this._updateDisplayAndAriaAttributes();
+        this.updateSelectedOptionDisplay();
+        this._setAriaAttributes();
+        // Attach event listeners after all modules are initialized
+        this._attachEventListeners();
+    };
+    /**
+     * Initialize options HTML from data
+     */
+    KTSelect.prototype._initializeOptionsHtml = function () {
+        this._generateOptionsHtml(this._element);
+    };
+    /**
+     * Creates the HTML structure for the select component
+     */
+    KTSelect.prototype._createHtmlStructure = function () {
+        var _this = this;
+        var options = Array.from(this._element.querySelectorAll('option'));
+        // Create wrapper and display elements
+        var wrapperElement = defaultTemplates.main(this._config);
+        var displayElement = defaultTemplates.display(this._config);
+        // Add the display element to the wrapper
+        wrapperElement.appendChild(displayElement);
+        // Create an empty dropdown first (without options) using template
+        var dropdownElement = defaultTemplates.dropdownContent(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
+        // Add search input if needed
+        var isCombobox = this._config.mode === SelectMode.COMBOBOX;
+        var hasSearch = this._config.enableSearch && !isCombobox;
+        if (hasSearch) {
+            var searchElement = defaultTemplates.search(this._config);
+            dropdownElement.appendChild(searchElement);
+        }
+        // Create options container using template
+        var optionsContainer = defaultTemplates.optionsContainer(this._config);
+        // Add each option directly to the container
+        options.forEach(function (optionElement) {
+            // Skip empty placeholder options (only if BOTH value AND text are empty)
+            // This allows options with empty value but visible text to display in dropdown
+            if (optionElement.value === '' &&
+                optionElement.textContent.trim() === '') {
+                return;
+            }
+            // Create new KTSelectOption instance for each option
+            var selectOption = new KTSelectOption(optionElement, _this._config);
+            var renderedOption = selectOption.render();
+            // Append directly to options container
+            optionsContainer.appendChild(renderedOption);
+        });
+        // Add options container to dropdown
+        dropdownElement.appendChild(optionsContainer);
+        // Add dropdown to wrapper
+        wrapperElement.appendChild(dropdownElement);
+        // Insert after the original element
+        this._element.after(wrapperElement);
+        this._element.style.display = 'none';
+    };
+    /**
+     * Setup all element references after DOM is created
+     */
+    KTSelect.prototype._setupElementReferences = function () {
+        this._wrapperElement = this._element.nextElementSibling;
+        // Get display element
+        this._displayElement = this._wrapperElement.querySelector("[data-kt-select-display]");
+        // Get dropdown content element - this is critical for dropdown functionality
+        this._dropdownContentElement = this._wrapperElement.querySelector("[data-kt-select-dropdown-content]");
+        if (!this._dropdownContentElement) {
+            console.error('Dropdown content element not found', this._wrapperElement);
+        }
+        // Get search input element - this is used for the search functionality
+        // First check if it's in dropdown, then check if it's in display (for combobox)
+        this._searchInputElement = this._dropdownContentElement.querySelector("[data-kt-select-search]");
+        // If not found in dropdown, check if it's the display element itself (for combobox)
+        if (!this._searchInputElement &&
+            this._config.mode === SelectMode.COMBOBOX) {
+            this._searchInputElement = this._displayElement;
+        }
+        if (this._config.debug)
+            console.log('Search input found:', this._searchInputElement ? 'Yes' : 'No', 'Mode:', this._config.mode, 'EnableSearch:', this._config.enableSearch);
+        this._valueDisplayElement = this._wrapperElement.querySelector("[data-kt-select-value]");
+        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+    };
+    /**
+     * Attach all event listeners to elements
+     */
+    KTSelect.prototype._attachEventListeners = function () {
+        // Document level event listeners
+        document.addEventListener('click', this._handleDocumentClick.bind(this));
+        document.addEventListener('keydown', this._handleEscKey.bind(this));
+        // Dropdown option click events
+        this._eventManager.addListener(this._dropdownContentElement, 'click', this._handleDropdownOptionClick.bind(this));
+        // Only attach click handler to display element
+        this._eventManager.addListener(this._displayElement, 'click', this._handleDropdownClick.bind(this));
+        // Only attach keyboard navigation to display element if NOT in combobox mode
+        // This prevents conflicts with the combobox module's keyboard handler
+        if (this._config.mode !== SelectMode.COMBOBOX) {
+            if (this._config.debug)
+                console.log('Attaching keyboard navigation to display element (non-combobox mode)');
+            this._eventManager.addListener(this._displayElement, 'keydown', this._handleDropdownKeyDown.bind(this));
+        }
+    };
+    /**
+     * Initialize search module if search is enabled
+     */
+    KTSelect.prototype._initializeSearchModule = function () {
+        if (this._config.enableSearch) {
+            this._searchModule = new KTSelectSearch(this);
+            this._searchModule.init();
+            // If remote search is enabled, add event listener for search input
+            if (this._config.remote &&
+                this._config.searchParam &&
+                this._searchInputElement) {
+                this._searchInputElement.addEventListener('input', this._handleRemoteSearch.bind(this));
+            }
+        }
+    };
+    /**
+     * Apply ARIA attributes and update display
+     */
+    KTSelect.prototype._updateDisplayAndAriaAttributes = function () {
+        this.updateSelectedOptionDisplay();
+        this._setAriaAttributes();
+    };
+    /**
+     * Apply initial disabled state if configured
+     */
+    KTSelect.prototype._applyInitialDisabledState = function () {
+        if (this._config.disabled) {
+            this.getElement().classList.add('disabled');
+            this.getElement().setAttribute('disabled', 'disabled');
+            this._wrapperElement.classList.add('disabled');
+        }
+    };
+    /**
+     * Generate options HTML from data items
+     */
+    KTSelect.prototype._generateOptionsHtml = function (element) {
+        var _this = this;
+        var items = this._state.getItems() || [];
+        if (this._config.debug)
+            console.log("Generating options HTML from ".concat(items.length, " items"));
+        // Only modify options if we have items to replace them with
+        if (items && items.length > 0) {
+            // Clear existing options except the first empty one
+            var options = element.querySelectorAll('option:not(:first-child)');
+            options.forEach(function (option) { return option.remove(); });
+            // Generate options from data
+            items.forEach(function (item) {
+                var optionElement = document.createElement('option');
+                // Get value - use item.id directly if available, otherwise try dataValueField
+                var value = '';
+                if (item.id !== undefined) {
+                    value = String(item.id);
+                }
+                else if (_this._config.dataValueField) {
+                    var extractedValue = _this._getValueByKey(item, _this._config.dataValueField);
+                    value = extractedValue !== null ? String(extractedValue) : '';
+                }
+                // Get label - use item.title directly if available, otherwise try dataFieldText
+                var label = '';
+                if (item.title !== undefined) {
+                    label = String(item.title);
+                }
+                else if (_this._config.dataFieldText) {
+                    var extractedLabel = _this._getValueByKey(item, _this._config.dataFieldText);
+                    label =
+                        extractedLabel !== null ? String(extractedLabel) : 'Unnamed option';
+                }
+                // Get description - skip if null, undefined, or "null" string
+                var description = null;
+                if (item.description !== undefined &&
+                    item.description !== null &&
+                    String(item.description) !== 'null' &&
+                    String(item.description) !== 'undefined') {
+                    description = String(item.description);
+                }
+                else if (_this._config.dataFieldDescription) {
+                    var extractedDesc = _this._getValueByKey(item, _this._config.dataFieldDescription);
+                    if (extractedDesc !== null &&
+                        extractedDesc !== undefined &&
+                        String(extractedDesc) !== 'null' &&
+                        String(extractedDesc) !== 'undefined') {
+                        description = String(extractedDesc);
+                    }
+                }
+                // Get icon - skip if null, undefined, or "null" string
+                var icon = null;
+                if (item.icon !== undefined &&
+                    item.icon !== null &&
+                    String(item.icon) !== 'null' &&
+                    String(item.icon) !== 'undefined') {
+                    icon = String(item.icon);
+                }
+                else if (_this._config.dataFieldIcon) {
+                    var extractedIcon = _this._getValueByKey(item, _this._config.dataFieldIcon);
+                    if (extractedIcon !== null &&
+                        extractedIcon !== undefined &&
+                        String(extractedIcon) !== 'null' &&
+                        String(extractedIcon) !== 'undefined') {
+                        icon = String(extractedIcon);
+                    }
+                }
+                // Log the extracted values for debugging
+                if (_this._config.debug)
+                    console.log("Option: value=".concat(value, ", label=").concat(label, ", desc=").concat(description ? description : 'none', ", icon=").concat(icon ? icon : 'none'));
+                // Set option attributes
+                optionElement.value = value;
+                optionElement.textContent = label || 'Unnamed option';
+                if (description) {
+                    optionElement.setAttribute('data-kt-select-option-description', description);
+                }
+                if (icon) {
+                    optionElement.setAttribute('data-kt-select-option-icon', icon);
+                }
+                if (item.selected) {
+                    optionElement.setAttribute('selected', 'selected');
+                }
+                element.appendChild(optionElement);
+            });
+            if (this._config.debug)
+                console.log("Added ".concat(items.length, " options to select element"));
+        }
+        else {
+            if (this._config.debug)
+                console.log('No items to generate options from');
+        }
+    };
+    /**
+     * Extract nested property value from object using dot notation
+     */
+    KTSelect.prototype._getValueByKey = function (obj, key) {
+        if (!key || !obj)
+            return null;
+        // Use reduce to walk through the object by splitting the key on dots
+        var result = key
+            .split('.')
+            .reduce(function (o, k) { return (o && o[k] !== undefined ? o[k] : null); }, obj);
+        if (this._config.debug)
+            console.log("Extracting [".concat(key, "] from object => ").concat(result !== null ? JSON.stringify(result) : 'null'));
+        return result;
+    };
+    /**
+     * Pre-select options that have the selected attribute
+     */
+    KTSelect.prototype._preSelectOptions = function (element) {
+        var _this = this;
+        // Handle options with selected attribute
+        Array.from(element.querySelectorAll('option[selected]')).forEach(function (option) {
+            var value = option.value;
+            _this._selectOption(value);
+        });
+        // Handle data-kt-select-pre-selected attribute for React compatibility
+        var preSelectedValues = element.getAttribute('data-kt-select-pre-selected');
+        if (preSelectedValues) {
+            var values = preSelectedValues.split(',').map(function (v) { return v.trim(); });
+            values.forEach(function (value) {
+                if (value) {
+                    _this._selectOption(value);
+                }
+            });
+        }
+    };
+    /**
+     * Set appropriate z-index for dropdown
+     */
+    KTSelect.prototype._initZIndex = function () {
+        var zindex = this._config.dropdownZindex;
+        if (parseInt(KTDom.getCssProp(this._dropdownContentElement, 'z-index')) >
+            zindex) {
+            zindex = parseInt(KTDom.getCssProp(this._dropdownContentElement, 'z-index'));
+        }
+        if (KTDom.getHighestZindex(this._wrapperElement) > zindex) {
+            zindex = KTDom.getHighestZindex(this._wrapperElement) + 1;
+        }
+        this._dropdownContentElement.style.zIndex = String(zindex);
+    };
+    /**
+     * ========================================================================
+     * DROPDOWN MANAGEMENT
+     * ========================================================================
+     */
+    /**
+     * Toggle dropdown visibility
+     */
+    KTSelect.prototype.toggleDropdown = function () {
+        if (this._config.debug)
+            console.log('toggleDropdown called');
+        if (this._dropdownModule) {
+            // Always use the dropdown module's state to determine whether to open or close
+            if (this._dropdownModule.isOpen()) {
+                if (this._config.debug)
+                    console.log('Dropdown is open, closing...');
+                this.closeDropdown();
+            }
+            else {
+                if (this._config.debug)
+                    console.log('Dropdown is closed, opening...');
+                this.openDropdown();
+            }
+        }
+    };
+    /**
+     * Open the dropdown
+     */
+    KTSelect.prototype.openDropdown = function () {
+        var _this = this;
+        if (this._config.debug)
+            console.log('openDropdown called, dropdownModule exists:', !!this._dropdownModule);
+        if (!this._dropdownModule) {
+            if (this._config.debug)
+                console.log('Early return from openDropdown - module missing');
+            return;
+        }
+        // Don't open dropdown if the select is disabled
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('Early return from openDropdown - select is disabled');
+            return;
+        }
+        if (this._config.debug)
+            console.log('Opening dropdown via dropdownModule...');
+        // Set our internal flag to match what we're doing
+        this._dropdownIsOpen = true;
+        // Open the dropdown via the module
+        this._dropdownModule.open();
+        // Dispatch custom event
+        this._dispatchEvent('show');
+        this._fireEvent('show');
+        // Focus search input if configured and exists
+        if (this._config.enableSearch &&
+            this._config.searchAutofocus &&
+            this._searchInputElement) {
+            setTimeout(function () {
+                _this._searchInputElement.focus();
+            }, 50);
+        }
+        // Update ARIA states
+        this._setAriaAttributes();
+        // Focus the first selected option or first option if nothing selected
+        this._focusSelectedOption();
+    };
+    /**
+     * Close the dropdown
+     */
+    KTSelect.prototype.closeDropdown = function () {
+        if (this._config.debug)
+            console.log('closeDropdown called, dropdownModule exists:', !!this._dropdownModule);
+        // Only check if dropdown module exists, not dropdownIsOpen flag
+        if (!this._dropdownModule) {
+            if (this._config.debug)
+                console.log('Early return from closeDropdown - module missing');
+            return;
+        }
+        // Always close by delegating to the dropdown module, which is the source of truth
+        if (this._config.debug)
+            console.log('Closing dropdown via dropdownModule...');
+        // Clear search input and highlights if the dropdown is closing
+        if (this._searchModule && this._searchInputElement) {
+            // Clear search input if configured to do so
+            if (this._config.clearSearchOnClose) {
+                this._searchInputElement.value = '';
+            }
+            // Always clear the highlights when dropdown closes
+            this._searchModule.clearSearchHighlights();
+        }
+        // Set our internal flag to match what we're doing
+        this._dropdownIsOpen = false;
+        // Call the dropdown module's close method
+        this._dropdownModule.close();
+        // Reset all focus states
+        if (this._focusManager) {
+            this._focusManager.resetFocus();
+        }
+        // Dispatch custom events
+        this._dispatchEvent('close');
+        this._fireEvent('close');
+        // Update ARIA states
+        this._setAriaAttributes();
+        if (this._config.debug)
+            console.log('closeDropdown complete');
+    };
+    /**
+     * Update dropdown position
+     */
+    KTSelect.prototype.updateDropdownPosition = function () {
+        if (this._dropdownModule) {
+            this._dropdownModule.updatePosition();
+        }
+    };
+    /**
+     * Focus on the first selected option if any exists in the dropdown
+     */
+    KTSelect.prototype._focusSelectedOption = function () {
+        // Get selected options
+        var selectedOptions = this.getSelectedOptions();
+        if (selectedOptions.length === 0)
+            return;
+        // Get the first selected option element
+        var firstSelectedValue = selectedOptions[0];
+        // Use the FocusManager to focus on the option
+        this._focusManager.focusOptionByValue(firstSelectedValue);
+    };
+    /**
+     * ========================================================================
+     * SELECTION MANAGEMENT
+     * ========================================================================
+     */
+    /**
+     * Select an option by value
+     */
+    KTSelect.prototype._selectOption = function (value) {
+        // Get current selection state
+        var isSelected = this._state.isSelected(value);
+        // Toggle selection in state
+        if (this._config.multiple) {
+            // Toggle in multiple mode
+            this._state.toggleSelectedOptions(value);
+        }
+        else {
+            // Set as only selection in single mode
+            this._state.setSelectedOptions(value);
+        }
+        // Update the original select element's option selected state
+        var optionEl = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        if (optionEl) {
+            if (this._config.multiple) {
+                // Toggle the selection for multiple select
+                optionEl.selected = !isSelected;
+            }
+            else {
+                // Set as only selection for single select
+                Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
+                    opt.selected = opt.value === value;
+                });
+            }
+        }
+        // Update the visual display of selected options
+        this.updateSelectedOptionDisplay();
+        // Update option classes without re-rendering the dropdown content
+        this._updateSelectedOptionClass();
+        // Dispatch standard and custom change events
+        this._dispatchEvent('change', {
+            value: value,
+            selected: !isSelected,
+            selectedOptions: this.getSelectedOptions(),
+        });
+        this._fireEvent('change', {
+            value: value,
+            selected: !isSelected,
+            selectedOptions: this.getSelectedOptions(),
+        });
+    };
+    /**
+     * Update selected option display value
+     */
+    KTSelect.prototype.updateSelectedOptionDisplay = function () {
+        var _this = this;
+        var selectedOptions = this.getSelectedOptions();
+        if (this._config.renderSelected) {
+            // Use the custom renderSelected function if provided
+            this._updateValueDisplay(this._config.renderSelected(selectedOptions));
+        }
+        else {
+            if (selectedOptions.length === 0) {
+                if (this._config.mode !== SelectMode.COMBOBOX) {
+                    this._updateValueDisplay(this._config.placeholder); // Use innerHTML for placeholder
+                }
+            }
+            else if (this._config.multiple) {
+                if (this._config.mode === SelectMode.TAGS) {
+                    // Use the tags module to render selected options as tags
+                    if (this._tagsModule) {
+                        this._tagsModule.updateTagsDisplay(selectedOptions);
+                    }
+                    else {
+                        // Fallback if tags module not initialized for some reason
+                        this._updateValueDisplay(selectedOptions.join(', '));
+                    }
+                }
+                else {
+                    // Render as comma-separated values
+                    var displayText = selectedOptions
+                        .map(function (option) { return _this._getOptionInnerHtml(option) || ''; })
+                        .join(', ');
+                    this._updateValueDisplay(displayText);
+                }
+            }
+            else {
+                var selectedOption = selectedOptions[0];
+                if (selectedOption) {
+                    var selectedText = this._getOptionInnerHtml(selectedOption);
+                    this._updateValueDisplay(selectedText);
+                    // Update combobox input value if in combobox mode
+                    if (this._config.mode === SelectMode.COMBOBOX &&
+                        this._comboboxModule) {
+                        this._comboboxModule.updateSelectedValue(selectedText);
+                    }
+                }
+                else {
+                    this._updateValueDisplay(this._config.placeholder);
+                }
+            }
+        }
+        // Update any debug display boxes if they exist
+        this._updateDebugDisplays();
+    };
+    /**
+     * Update the value display element
+     */
+    KTSelect.prototype._updateValueDisplay = function (value) {
+        if (this._config.mode === SelectMode.COMBOBOX) {
+            // For combobox, we only update the hidden value element, not the input
+            // The combobox module will handle updating the input value
+            if (!this._comboboxModule) {
+                this._valueDisplayElement.value = value;
+            }
+        }
+        else {
+            this._valueDisplayElement.innerHTML = value;
+        }
+    };
+    /**
+     * Update debug displays if present
+     */
+    KTSelect.prototype._updateDebugDisplays = function () {
+        // Check if we're in a test environment with debug boxes
+        var selectId = this.getElement().id;
+        if (selectId) {
+            var debugElement = document.getElementById("".concat(selectId, "-value"));
+            if (debugElement) {
+                var selectedOptions = this.getSelectedOptions();
+                // Format display based on selection mode
+                if (this._config.multiple) {
+                    // For multiple selection, show comma-separated list
+                    debugElement.textContent =
+                        selectedOptions.length > 0 ? selectedOptions.join(', ') : 'None';
+                }
+                else {
+                    // For single selection, show just the one value
+                    debugElement.textContent =
+                        selectedOptions.length > 0 ? selectedOptions[0] : 'None';
+                }
+            }
+        }
+    };
+    /**
+     * Get option inner HTML content by option value
+     */
+    KTSelect.prototype._getOptionInnerHtml = function (optionValue) {
+        var option = Array.from(this._options).find(function (opt) { return opt.dataset.value === optionValue; });
+        if (this._config.mode == SelectMode.COMBOBOX) {
+            return option.textContent;
+        }
+        return option.innerHTML; // Get the entire HTML content of the option
+    };
+    /**
+     * Update CSS classes for selected options
+     */
+    KTSelect.prototype._updateSelectedOptionClass = function () {
+        var allOptions = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        var selectedValues = this._state.getSelectedOptions();
+        var maxReached = typeof this._config.maxSelections === 'number' &&
+            selectedValues.length >= this._config.maxSelections;
+        if (this._config.debug)
+            console.log('Updating selected classes for options, selected values:', selectedValues);
+        allOptions.forEach(function (option) {
+            var optionValue = option.getAttribute('data-value');
+            if (!optionValue)
+                return;
+            var isSelected = selectedValues.includes(optionValue);
+            if (isSelected) {
+                option.classList.add('selected');
+                option.setAttribute('aria-selected', 'true');
+                option.classList.remove('hidden');
+                option.classList.remove('disabled');
+                option.removeAttribute('aria-disabled');
+            }
+            else {
+                option.classList.remove('selected');
+                option.setAttribute('aria-selected', 'false');
+                if (maxReached) {
+                    option.classList.add('disabled');
+                    option.setAttribute('aria-disabled', 'true');
+                }
+                else {
+                    option.classList.remove('disabled');
+                    option.removeAttribute('aria-disabled');
+                }
+            }
+        });
+    };
+    /**
+     * Clear all selected options
+     */
+    KTSelect.prototype.clearSelection = function () {
+        // Clear the current selection
+        this._state.setSelectedOptions([]);
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+        // For combobox, also clear the input value
+        if (this._config.mode === SelectMode.COMBOBOX) {
+            if (this._searchInputElement) {
+                this._searchInputElement.value = '';
+            }
+            // If combobox has a clear button, hide it
+            if (this._comboboxModule) {
+                // The combobox module will handle hiding the clear button
+                this._comboboxModule.resetInputValueToSelection();
+            }
+        }
+        // Dispatch change event
+        this._dispatchEvent('change');
+        this._fireEvent('change');
+    };
+    /**
+     * Set selected options programmatically
+     */
+    KTSelect.prototype.setSelectedOptions = function (options) {
+        var values = Array.from(options).map(function (option) { return option.value; });
+        this._state.setSelectedOptions(values);
+    };
+    /**
+     * ========================================================================
+     * KEYBOARD NAVIGATION
+     * ========================================================================
+     */
+    /**
+     * Handle dropdown key down events for keyboard navigation
+     * Only used for standard (non-combobox) dropdowns
+     */
+    KTSelect.prototype._handleDropdownKeyDown = function (event) {
+        // Log event for debugging
+        if (this._config.debug)
+            console.log('Standard dropdown keydown:', event.key);
+        // Use the shared handler
+        handleDropdownKeyNavigation(event, this, {
+            multiple: this._config.multiple,
+            closeOnSelect: this._config.closeOnSelect,
+        });
+    };
+    /**
+     * Focus next option in dropdown
+     */
+    KTSelect.prototype._focusNextOption = function () {
+        return this._focusManager.focusNext();
+    };
+    /**
+     * Focus previous option in dropdown
+     */
+    KTSelect.prototype._focusPreviousOption = function () {
+        return this._focusManager.focusPrevious();
+    };
+    /**
+     * Apply hover/focus state to focused option
+     */
+    KTSelect.prototype._hoverFocusedOption = function (option) {
+        this._focusManager.applyFocus(option);
+    };
+    /**
+     * Scroll option into view when navigating
+     */
+    KTSelect.prototype._scrollOptionIntoView = function (option) {
+        this._focusManager.scrollIntoView(option);
+    };
+    /**
+     * Select the currently focused option
+     */
+    KTSelect.prototype.selectFocusedOption = function () {
+        var _a, _b;
+        var focusedOption = this._focusManager.getFocusedOption();
+        if (focusedOption) {
+            var selectedValue = focusedOption.dataset.value;
+            // Extract just the title text, not including description
+            var selectedText = '';
+            var titleElement = focusedOption.querySelector('[data-kt-option-title]');
+            if (titleElement) {
+                // If it has a structured content with title element
+                selectedText = ((_a = titleElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            }
+            else {
+                // Fallback to the whole text content
+                selectedText = ((_b = focusedOption.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            }
+            // First trigger the selection to ensure state is updated properly
+            if (selectedValue) {
+                this._selectOption(selectedValue);
+            }
+            // For combobox mode, update input value AFTER selection to ensure consistency
+            if (this._config.mode === SelectMode.COMBOBOX && this._comboboxModule) {
+                this._comboboxModule.updateSelectedValue(selectedText);
+                // Also directly update the input value for immediate visual feedback
+                if (this._searchInputElement) {
+                    this._searchInputElement.value = selectedText;
+                }
+            }
+        }
+    };
+    /**
+     * ========================================================================
+     * COMBOBOX SPECIFIC METHODS
+     * ========================================================================
+     */
+    /**
+     * Handle combobox input events
+     */
+    KTSelect.prototype._handleComboboxInput = function (event) {
+        if (this._comboboxModule) {
+            return;
+        }
+        var inputElement = event.target;
+        var query = inputElement.value.toLowerCase();
+        // If dropdown isn't open, open it when user starts typing
+        if (!this._dropdownIsOpen) {
+            this.openDropdown();
+        }
+        // Filter options based on input
+        this._filterOptionsForCombobox(query);
+    };
+    /**
+     * Filter options for combobox based on input query
+     * Uses the shared filterOptions function
+     */
+    KTSelect.prototype._filterOptionsForCombobox = function (query) {
+        var options = Array.from(this._dropdownContentElement.querySelectorAll('[data-kt-select-option]'));
+        filterOptions(options, query, this._config, this._dropdownContentElement);
+    };
+    /**
+     * ========================================================================
+     * EVENT HANDLERS
+     * ========================================================================
+     */
+    /**
+     * Handle display element click
+     */
+    KTSelect.prototype._handleDropdownClick = function (event) {
+        if (this._config.debug)
+            console.log('Display element clicked', event.target);
+        event.preventDefault();
+        event.stopPropagation(); // Prevent event bubbling
+        this.toggleDropdown();
+    };
+    /**
+     * Handle click within the dropdown
+     */
+    KTSelect.prototype._handleDropdownOptionClick = function (event) {
+        var optionElement = event.target.closest("[data-kt-select-option]");
+        // If an option is clicked, handle the option click
+        if (optionElement) {
+            this._handleOptionClick(event);
+        }
+    };
+    /**
+     * Handle clicking on an option in the dropdown
+     */
+    KTSelect.prototype._handleOptionClick = function (event) {
+        if (this._config.debug)
+            console.log('_handleOptionClick called', event.target);
+        event.preventDefault();
+        event.stopPropagation();
+        // Find the clicked option element
+        var clickedOption = event.target.closest("[data-kt-select-option]");
+        if (!clickedOption) {
+            if (this._config.debug)
+                console.log('No clicked option found');
+            return;
+        }
+        // Check if the option is disabled
+        if (clickedOption.getAttribute('aria-disabled') === 'true') {
+            if (this._config.debug)
+                console.log('Option is disabled, ignoring click');
+            return;
+        }
+        // Use dataset.value to get the option value
+        var optionValue = clickedOption.dataset.value;
+        if (optionValue === undefined) {
+            if (this._config.debug)
+                console.log('Option value is undefined');
+            return;
+        }
+        if (this._config.debug)
+            console.log('Option clicked:', optionValue);
+        // Use toggleSelection instead of _selectOption to prevent re-rendering
+        this.toggleSelection(optionValue);
+    };
+    /**
+     * Handle document click for closing dropdown
+     */
+    KTSelect.prototype._handleDocumentClick = function (event) {
+        var targetElement = event.target;
+        // Check if the click is outside the dropdown and the display element
+        if (!this._wrapperElement.contains(targetElement)) {
+            this.closeDropdown();
+        }
+    };
+    /**
+     * Handle escape key press
+     */
+    KTSelect.prototype._handleEscKey = function (event) {
+        if (event.key === 'Escape' && this._dropdownIsOpen) {
+            this.closeDropdown();
+        }
+    };
+    /**
+     * ========================================================================
+     * ACCESSIBILITY METHODS
+     * ========================================================================
+     */
+    /**
+     * Set ARIA attributes for accessibility
+     */
+    KTSelect.prototype._setAriaAttributes = function () {
+        this._displayElement.setAttribute('aria-expanded', this._dropdownIsOpen.toString());
+    };
+    /**
+     * Handle focus events
+     */
+    KTSelect.prototype._handleFocus = function () {
+        // Implementation pending
+    };
+    /**
+     * Handle blur events
+     */
+    KTSelect.prototype._handleBlur = function () {
+        // Implementation pending
+    };
+    /**
+     * ========================================================================
+     * PUBLIC API
+     * ========================================================================
+     */
+    /**
+     * Get the search input element
+     */
+    KTSelect.prototype.getSearchInput = function () {
+        return this._searchInputElement;
+    };
+    /**
+     * Get selected options
+     */
+    KTSelect.prototype.getSelectedOptions = function () {
+        return this._state.getSelectedOptions();
+    };
+    /**
+     * Get configuration
+     */
+    KTSelect.prototype.getConfig = function () {
+        return this._config;
+    };
+    /**
+     * Get option elements
+     */
+    KTSelect.prototype.getOptionsElement = function () {
+        return this._options;
+    };
+    /**
+     * Get dropdown element
+     */
+    KTSelect.prototype.getDropdownElement = function () {
+        return this._dropdownContentElement;
+    };
+    /**
+     * Get value display element
+     */
+    KTSelect.prototype.getValueDisplayElement = function () {
+        return this._valueDisplayElement;
+    };
+    /**
+     * Show all options in the dropdown
+     */
+    KTSelect.prototype.showAllOptions = function () {
+        // Get all options in the dropdown
+        var options = Array.from(this._wrapperElement.querySelectorAll("[data-kt-select-option]"));
+        // Show all options by removing the hidden class and any inline styles
+        options.forEach(function (option) {
+            // Remove hidden class
+            option.classList.remove('hidden');
+            // Clean up any existing inline styles for backward compatibility
+            if (option.hasAttribute('style')) {
+                var styleAttr = option.getAttribute('style');
+                if (styleAttr.includes('display:')) {
+                    // If style only contains display property, remove the entire attribute
+                    if (styleAttr.trim() === 'display: none;' ||
+                        styleAttr.trim() === 'display: block;') {
+                        option.removeAttribute('style');
+                    }
+                    else {
+                        // Otherwise, remove just the display property
+                        option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
+                    }
+                }
+            }
+        });
+        // If search input exists, clear it
+        if (this._searchInputElement && this._config.mode !== SelectMode.COMBOBOX) {
+            this._searchInputElement.value = '';
+            // If we have a search module, clear any search filtering
+            if (this._searchModule) {
+                this._searchModule.clearSearchHighlights();
+            }
+        }
+    };
+    /**
+     * Toggle multi-select functionality
+     */
+    KTSelect.prototype.enableMultiSelect = function () {
+        this._state.modifyConfig({ multiple: true });
+    };
+    /**
+     * Disable multi-select functionality
+     */
+    KTSelect.prototype.disableMultiSelect = function () {
+        this._state.modifyConfig({ multiple: false });
+    };
+    /**
+     * Toggle the selection of an option
+     */
+    KTSelect.prototype.toggleSelection = function (value) {
+        // Get current selection state
+        var isSelected = this._state.isSelected(value);
+        if (this._config.debug)
+            console.log("toggleSelection called for value: ".concat(value, ", isSelected: ").concat(isSelected, ", multiple: ").concat(this._config.multiple, ", closeOnSelect: ").concat(this._config.closeOnSelect));
+        // If already selected in single select mode, do nothing (can't deselect in single select)
+        if (isSelected && !this._config.multiple) {
+            if (this._config.debug)
+                console.log('Early return from toggleSelection - already selected in single select mode');
+            return;
+        }
+        if (this._config.debug)
+            console.log("Toggling selection for option: ".concat(value, ", currently selected: ").concat(isSelected));
+        // Ensure any search highlights are cleared when selection changes
+        if (this._searchModule) {
+            this._searchModule.clearSearchHighlights();
+        }
+        // Toggle the selection in the state
+        this._state.toggleSelectedOptions(value);
+        // Update the original select element's option selected state
+        var optionEl = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        if (optionEl) {
+            // For multiple select, toggle the 'selected' attribute
+            if (this._config.multiple) {
+                optionEl.selected = !isSelected;
+            }
+            else {
+                // For single select, deselect all other options and select this one
+                Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
+                    opt.selected = opt.value === value;
+                });
+            }
+        }
+        // Update the display element value
+        this.updateSelectedOptionDisplay();
+        // Update option classes without re-rendering the dropdown content
+        this._updateSelectedOptionClass();
+        // For single select mode, always close the dropdown after selection
+        // For multiple select mode, only close if closeOnSelect is true
+        if (!this._config.multiple) {
+            if (this._config.debug)
+                console.log('About to call closeDropdown() for single select mode - always close after selection');
+            this.closeDropdown();
+        }
+        else if (this._config.closeOnSelect) {
+            if (this._config.debug)
+                console.log('About to call closeDropdown() for multiple select with closeOnSelect:true');
+            this.closeDropdown();
+        }
+        // Dispatch custom change event with additional data
+        this._dispatchEvent('change', {
+            value: value,
+            selected: !isSelected,
+            selectedOptions: this.getSelectedOptions(),
+        });
+        this._fireEvent('change', {
+            value: value,
+            selected: !isSelected,
+            selectedOptions: this.getSelectedOptions(),
+        });
+    };
+    /**
+     * Clean up all resources when the component is destroyed
+     * This overrides the parent dispose method
+     */
+    KTSelect.prototype.dispose = function () {
+        // Clean up event listeners
+        this._eventManager.removeAllListeners(null);
+        // Dispose modules
+        if (this._dropdownModule) {
+            this._dropdownModule.dispose();
+        }
+        if (this._comboboxModule) {
+            if (typeof this._comboboxModule.destroy === 'function') {
+                this._comboboxModule.destroy();
+            }
+        }
+        if (this._tagsModule) {
+            if (typeof this._tagsModule.destroy === 'function') {
+                this._tagsModule.destroy();
+            }
+        }
+        if (this._searchModule) {
+            if (typeof this._searchModule.destroy === 'function') {
+                this._searchModule.destroy();
+            }
+        }
+        // Remove DOM elements
+        if (this._wrapperElement && this._wrapperElement.parentNode) {
+            this._wrapperElement.parentNode.removeChild(this._wrapperElement);
+        }
+        // Call parent dispose to clean up data
+        _super.prototype.dispose.call(this);
+    };
+    /**
+     * Create instances of KTSelect for all matching elements
+     */
+    KTSelect.createInstances = function () {
+        var _this = this;
+        var elements = document.querySelectorAll('[data-kt-select]');
+        elements.forEach(function (element) {
+            if (element.hasAttribute('data-kt-select') &&
+                !element.classList.contains('data-kt-select-initialized')) {
+                var instance = new KTSelect(element);
+                _this._instances.set(element, instance);
+            }
+        });
+    };
+    /**
+     * Initialize all KTSelect instances
+     */
+    KTSelect.init = function () {
+        KTSelect.createInstances();
+    };
+    /**
+     * Handle remote search
+     * @param event Input event
+     */
+    KTSelect.prototype._handleRemoteSearch = function (event) {
+        var _this = this;
+        if (!this._remoteModule ||
+            !this._config.remote ||
+            !this._config.searchParam)
+            return;
+        var query = event.target.value;
+        // Check if the query is long enough
+        if (query.length < (this._config.searchMinLength || 0)) {
+            return;
+        }
+        // Debounce the search
+        if (this._searchDebounceTimeout) {
+            clearTimeout(this._searchDebounceTimeout);
+        }
+        this._searchDebounceTimeout = window.setTimeout(function () {
+            // Show loading state
+            _this._renderSearchLoadingState();
+            // Fetch remote data with search query
+            _this._remoteModule
+                .fetchData(query)
+                .then(function (items) {
+                // Update state with fetched items
+                _this._state
+                    .setItems(items)
+                    .then(function () {
+                    // Update options in the dropdown
+                    _this._updateSearchResults(items);
+                    // Refresh the search module's option cache if search is enabled
+                    if (_this._searchModule && _this._config.enableSearch) {
+                        _this._searchModule.refreshOptionCache();
+                    }
+                })
+                    .catch(function (error) {
+                    console.error('Error updating search results:', error);
+                    _this._renderSearchErrorState(error.message || 'Failed to load search results');
+                });
+            })
+                .catch(function (error) {
+                console.error('Error fetching search results:', error);
+                _this._renderSearchErrorState(_this._remoteModule.getErrorMessage() ||
+                    'Failed to load search results');
+            });
+        }, this._config.searchDebounce || 300);
+    };
+    /**
+     * Render loading state for search
+     */
+    KTSelect.prototype._renderSearchLoadingState = function () {
+        if (!this._originalOptionsHtml && this._dropdownContentElement) {
+            var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+            if (optionsContainer) {
+                this._originalOptionsHtml = optionsContainer.innerHTML;
+            }
+        }
+        this._showDropdownMessage('loading', 'Searching...');
+    };
+    /**
+     * Render error state for search
+     * @param message Error message
+     */
+    KTSelect.prototype._renderSearchErrorState = function (message) {
+        this._showDropdownMessage('error', message);
+    };
+    /**
+     * Update search results in the dropdown
+     * @param items Search result items
+     */
+    KTSelect.prototype._updateSearchResults = function (items) {
+        var _this = this;
+        if (!this._dropdownContentElement)
+            return;
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        if (!optionsContainer)
+            return;
+        // Clear current options
+        optionsContainer.innerHTML = '';
+        if (items.length === 0) {
+            // Show no results message using template for consistency and customization
+            var noResultsElement = defaultTemplates.noResults(this._config);
+            optionsContainer.appendChild(noResultsElement);
+            return;
+        }
+        // Process each item individually to create options
+        items.forEach(function (item) {
+            // Create option for the original select
+            var selectOption = defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title }));
+            selectOption.value = item.id;
+            if (item.description) {
+                selectOption.setAttribute('data-kt-select-option-description', item.description);
+            }
+            if (item.icon) {
+                selectOption.setAttribute('data-kt-select-option-icon', item.icon);
+            }
+            // Create option element for the dropdown
+            var ktOption = new KTSelectOption(selectOption, _this._config);
+            var renderedOption = ktOption.render();
+            // Add to dropdown container
+            optionsContainer.appendChild(renderedOption);
+        });
+        // Add pagination "Load More" button if needed
+        if (this._config.pagination && this._remoteModule.hasMorePages()) {
+            this._addLoadMoreButton();
+        }
+        // Update options NodeList
+        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+    };
+    /**
+     * Filter options by query
+     */
+    KTSelect.prototype.filterOptions = function (query) {
+        this._filterOptionsForCombobox(query);
+    };
+    /**
+     * Check if dropdown is open
+     */
+    KTSelect.prototype.isDropdownOpen = function () {
+        return this._dropdownIsOpen;
+    };
+    /**
+     * ========================================================================
+     * STATIC METHODS
+     * ========================================================================
+     */
+    KTSelect._instances = new Map();
+    return KTSelect;
+}(KTComponent));
+export { KTSelect };
+//# sourceMappingURL=select.js.map