@keenthemes/ktui 1.0.10 → 1.0.12

package/lib/cjs/components/select/select.js

@@ -52,7 +52,6 @@ var combobox_1 = require("./combobox");
 var dropdown_1 = require("./dropdown");
 var utils_1 = require("./utils");
 var tags_1 = require("./tags");
-var types_1 = require("./types");
 var KTSelect = /** @class */ (function (_super) {
     __extends(KTSelect, _super);
     /**
@@ -69,6 +68,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._tagsModule = null;
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
+        _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -153,11 +153,6 @@ var KTSelect = /** @class */ (function (_super) {
         // 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 = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, this._config), { placeholder: this._config.placeholder }));
-            this._element.appendChild(emptyOption);
-        }
     };
     /**
      * Helper to show a dropdown message (error, loading, noResults)
@@ -165,7 +160,7 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._showDropdownMessage = function (type, message) {
         if (!this._dropdownContentElement)
             return;
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
         switch (type) {
@@ -175,9 +170,9 @@ var KTSelect = /** @class */ (function (_super) {
             case 'loading':
                 optionsContainer.innerHTML = templates_1.defaultTemplates.loading(this._config, message || 'Loading...').outerHTML;
                 break;
-            case 'noResults':
+            case 'empty':
                 optionsContainer.innerHTML = '';
-                optionsContainer.appendChild(templates_1.defaultTemplates.noResults(this._config));
+                optionsContainer.appendChild(templates_1.defaultTemplates.empty(this._config));
                 break;
         }
     };
@@ -196,14 +191,6 @@ var KTSelect = /** @class */ (function (_super) {
      * @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 = templates_1.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) {
@@ -226,7 +213,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Create load more button using template
         this._loadMoreIndicator = templates_1.defaultTemplates.loadMore(this._config);
         // Add to dropdown
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (optionsContainer) {
             optionsContainer.appendChild(this._loadMoreIndicator);
         }
@@ -296,42 +283,26 @@ var KTSelect = /** @class */ (function (_super) {
      * @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]');
+        var optionsContainer = this._dropdownContentElement.querySelector("[data-kt-select-options]");
         if (!optionsContainer)
             return;
         // Get the load more button
-        var loadMoreButton = optionsContainer.querySelector('[data-kt-select-load-more]');
+        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 = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title || 'Unnamed option' }));
+            var selectOption = document.createElement('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 option_1.KTSelectOption(selectOption, _this._config);
-            var renderedOption = ktOption.render();
             // Add to dropdown container
             if (loadMoreButton) {
                 // Insert before the load more button
-                optionsContainer.insertBefore(renderedOption, loadMoreButton);
+                optionsContainer.insertBefore(selectOption, loadMoreButton);
             }
             else {
                 // Append to the end
-                optionsContainer.appendChild(renderedOption);
+                optionsContainer.appendChild(selectOption);
             }
         });
         // Update options NodeList to include the new options
@@ -353,7 +324,7 @@ var KTSelect = /** @class */ (function (_super) {
         this._setupElementReferences();
         this._initZIndex();
         // Initialize options
-        this._initializeOptionsHtml();
+        // this._initializeOptionsHtml();
         this._preSelectOptions(this._element);
         // Apply disabled state if needed
         this._applyInitialDisabledState();
@@ -362,11 +333,11 @@ var KTSelect = /** @class */ (function (_super) {
             this._initializeSearchModule();
         }
         // Initialize combobox if enabled
-        if (this._config.mode === types_1.SelectMode.COMBOBOX) {
+        if (this._config.combobox) {
             this._comboboxModule = new combobox_1.KTSelectCombobox(this);
         }
         // Initialize tags if enabled
-        if (this._config.mode === types_1.SelectMode.TAGS) {
+        if (this._config.tags) {
             this._tagsModule = new tags_1.KTSelectTags(this);
         }
         // Initialize focus manager after dropdown element is created
@@ -383,31 +354,37 @@ var KTSelect = /** @class */ (function (_super) {
     /**
      * Initialize options HTML from data
      */
-    KTSelect.prototype._initializeOptionsHtml = function () {
-        this._generateOptionsHtml(this._element);
-    };
+    // private _initializeOptionsHtml() {
+    // 	this._generateOptionsHtml(this._element);
+    // }
     /**
      * Creates the HTML structure for the select component
      */
     KTSelect.prototype._createHtmlStructure = function () {
+        var _a;
         var _this = this;
         var options = Array.from(this._element.querySelectorAll('option'));
         // Create wrapper and display elements
-        var wrapperElement = templates_1.defaultTemplates.main(this._config);
+        var wrapperElement = templates_1.defaultTemplates.wrapper(this._config);
         var displayElement = templates_1.defaultTemplates.display(this._config);
         // Add the display element to the wrapper
         wrapperElement.appendChild(displayElement);
+        // Move classes from original select to display element
+        if (this._element.classList.length > 0) {
+            (_a = displayElement.classList).add.apply(_a, Array.from(this._element.classList));
+            this._element.className = '';
+        }
         // Create an empty dropdown first (without options) using template
-        var dropdownElement = templates_1.defaultTemplates.dropdownContent(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
+        var dropdownElement = templates_1.defaultTemplates.dropdown(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
         // Add search input if needed
-        var isCombobox = this._config.mode === types_1.SelectMode.COMBOBOX;
-        var hasSearch = this._config.enableSearch && !isCombobox;
-        if (hasSearch) {
+        if (this._config.enableSearch) {
             var searchElement = templates_1.defaultTemplates.search(this._config);
             dropdownElement.appendChild(searchElement);
         }
         // Create options container using template
-        var optionsContainer = templates_1.defaultTemplates.optionsContainer(this._config);
+        var optionsContainer = templates_1.defaultTemplates.options(this._config);
+        // Clear the options container
+        optionsContainer.innerHTML = '';
         // Add each option directly to the container
         options.forEach(function (optionElement) {
             // Skip empty placeholder options (only if BOTH value AND text are empty)
@@ -438,20 +415,17 @@ var KTSelect = /** @class */ (function (_super) {
         // 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]");
+        this._dropdownContentElement = this._wrapperElement.querySelector("[data-kt-select-dropdown]");
         if (!this._dropdownContentElement) {
+            console.log(this._element);
             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 === types_1.SelectMode.COMBOBOX) {
+        // If not found in dropdown, check if it's the display element itself
+        if (!this._searchInputElement) {
             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]");
     };
@@ -461,17 +435,18 @@ var KTSelect = /** @class */ (function (_super) {
     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 !== types_1.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));
+        // this._eventManager.addListener(
+        // 	this._wrapperElement,
+        // 	'click',
+        // 	this._handleDropdownClick.bind(this),
+        // );
+        // Attach centralized keyboard handler
+        var keyboardTarget = this._searchInputElement || this._wrapperElement;
+        if (keyboardTarget) {
+            keyboardTarget.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
         }
     };
     /**
@@ -541,52 +516,12 @@ var KTSelect = /** @class */ (function (_super) {
                     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'));
+                    console.log("Option: value=".concat(value, ", label=").concat(label));
                 // 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');
                 }
@@ -656,8 +591,14 @@ var KTSelect = /** @class */ (function (_super) {
      */
     /**
      * Toggle dropdown visibility
+     * @deprecated
      */
     KTSelect.prototype.toggleDropdown = function () {
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('toggleDropdown: select is disabled, not opening');
+            return;
+        }
         if (this._config.debug)
             console.log('toggleDropdown called');
         if (this._dropdownModule) {
@@ -679,6 +620,11 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.openDropdown = function () {
         var _this = this;
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('openDropdown: select is disabled, not opening');
+            return;
+        }
         if (this._config.debug)
             console.log('openDropdown called, dropdownModule exists:', !!this._dropdownModule);
         if (!this._dropdownModule) {
@@ -784,6 +730,12 @@ var KTSelect = /** @class */ (function (_super) {
      * Select an option by value
      */
     KTSelect.prototype._selectOption = function (value) {
+        // Prevent selection if the option is disabled (in dropdown or original select)
+        if (this._isOptionDisabled(value)) {
+            if (this._config.debug)
+                console.log('_selectOption: Option is disabled, ignoring selection');
+            return;
+        }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
         // Toggle selection in state
@@ -829,104 +781,34 @@ var KTSelect = /** @class */ (function (_super) {
      * Update selected option display value
      */
     KTSelect.prototype.updateSelectedOptionDisplay = function () {
-        var _this = this;
         var selectedOptions = this.getSelectedOptions();
-        if (this._config.renderSelected) {
+        // Tag mode: render tags if enabled
+        if (this._config.tags && this._tagsModule) {
+            this._tagsModule.updateTagsDisplay(selectedOptions);
+            return;
+        }
+        if (typeof this._config.renderSelected === 'function') {
             // Use the custom renderSelected function if provided
-            this._updateValueDisplay(this._config.renderSelected(selectedOptions));
+            this._valueDisplayElement.innerHTML = this._config.renderSelected(selectedOptions);
         }
         else {
             if (selectedOptions.length === 0) {
-                if (this._config.mode !== types_1.SelectMode.COMBOBOX) {
-                    this._updateValueDisplay(this._config.placeholder); // Use innerHTML for placeholder
-                }
-            }
-            else if (this._config.multiple) {
-                if (this._config.mode === types_1.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);
-                }
+                var placeholder = templates_1.defaultTemplates.placeholder(this._config);
+                this._valueDisplayElement.replaceChildren(placeholder);
             }
             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 === types_1.SelectMode.COMBOBOX &&
-                        this._comboboxModule) {
-                        this._comboboxModule.updateSelectedValue(selectedText);
-                    }
+                var content = '';
+                if (this._config.displayTemplate) {
+                    var selectedValues = this.getSelectedOptions();
+                    content = this.renderDisplayTemplateForSelected(selectedValues);
                 }
                 else {
-                    this._updateValueDisplay(this._config.placeholder);
+                    // If no displayTemplate is provided, use the default comma-separated list of selected options
+                    content = this.getSelectedOptionsText();
                 }
+                this._valueDisplayElement.innerHTML = content;
             }
         }
-        // Update any debug display boxes if they exist
-        this._updateDebugDisplays();
-    };
-    /**
-     * Update the value display element
-     */
-    KTSelect.prototype._updateValueDisplay = function (value) {
-        if (this._config.mode === types_1.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 == types_1.SelectMode.COMBOBOX) {
-            return option.textContent;
-        }
-        return option.innerHTML; // Get the entire HTML content of the option
     };
     /**
      * Update CSS classes for selected options
@@ -972,17 +854,6 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions([]);
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
-        // For combobox, also clear the input value
-        if (this._config.mode === types_1.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');
@@ -994,49 +865,6 @@ var KTSelect = /** @class */ (function (_super) {
         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
-        (0, utils_1.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
      */
@@ -1060,44 +888,7 @@ var KTSelect = /** @class */ (function (_super) {
             if (selectedValue) {
                 this._selectOption(selectedValue);
             }
-            // For combobox mode, update input value AFTER selection to ensure consistency
-            if (this._config.mode === types_1.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]'));
-        (0, utils_1.filterOptions)(options, query, this._config, this._dropdownContentElement);
     };
     /**
      * ========================================================================
@@ -1106,6 +897,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     /**
      * Handle display element click
+     * @deprecated
      */
     KTSelect.prototype._handleDropdownClick = function (event) {
         if (this._config.debug)
@@ -1167,14 +959,6 @@ var KTSelect = /** @class */ (function (_super) {
             this.closeDropdown();
         }
     };
-    /**
-     * Handle escape key press
-     */
-    KTSelect.prototype._handleEscKey = function (event) {
-        if (event.key === 'Escape' && this._dropdownIsOpen) {
-            this.closeDropdown();
-        }
-    };
     /**
      * ========================================================================
      * ACCESSIBILITY METHODS
@@ -1186,18 +970,6 @@ var KTSelect = /** @class */ (function (_super) {
     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
@@ -1266,7 +1038,7 @@ var KTSelect = /** @class */ (function (_super) {
             }
         });
         // If search input exists, clear it
-        if (this._searchInputElement && this._config.mode !== types_1.SelectMode.COMBOBOX) {
+        if (this._searchInputElement) {
             this._searchInputElement.value = '';
             // If we have a search module, clear any search filtering
             if (this._searchModule) {
@@ -1290,6 +1062,12 @@ var KTSelect = /** @class */ (function (_super) {
      * Toggle the selection of an option
      */
     KTSelect.prototype.toggleSelection = function (value) {
+        // Prevent selection if the option is disabled (in dropdown or original select)
+        if (this._isOptionDisabled(value)) {
+            if (this._config.debug)
+                console.log('toggleSelection: Option is disabled, ignoring selection');
+            return;
+        }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
         if (this._config.debug)
@@ -1457,7 +1235,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype._renderSearchLoadingState = function () {
         if (!this._originalOptionsHtml && this._dropdownContentElement) {
-            var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+            var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
             if (optionsContainer) {
                 this._originalOptionsHtml = optionsContainer.innerHTML;
             }
@@ -1476,36 +1254,26 @@ var KTSelect = /** @class */ (function (_super) {
      * @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]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
         // Clear current options
         optionsContainer.innerHTML = '';
         if (items.length === 0) {
             // Show no results message using template for consistency and customization
-            var noResultsElement = templates_1.defaultTemplates.noResults(this._config);
+            var noResultsElement = templates_1.defaultTemplates.empty(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 = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title }));
+            var selectOption = document.createElement('option');
             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 option_1.KTSelectOption(selectOption, _this._config);
-            var renderedOption = ktOption.render();
             // Add to dropdown container
-            optionsContainer.appendChild(renderedOption);
+            optionsContainer.appendChild(selectOption);
         });
         // Add pagination "Load More" button if needed
         if (this._config.pagination && this._remoteModule.hasMorePages()) {
@@ -1514,18 +1282,137 @@ var KTSelect = /** @class */ (function (_super) {
         // 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;
     };
+    KTSelect.prototype.getSelectedOptionsText = function () {
+        var _this = this;
+        var selectedValues = this.getSelectedOptions();
+        var displaySeparator = this._config.displaySeparator || ', ';
+        var texts = selectedValues.map(function (value) {
+            var option = Array.from(_this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+            return (option === null || option === void 0 ? void 0 : option.getAttribute('data-text')) || '';
+        }).filter(Boolean);
+        return texts.join(displaySeparator);
+    };
+    /**
+     * Check if an option is disabled (either in dropdown or original select)
+     */
+    KTSelect.prototype._isOptionDisabled = function (value) {
+        var dropdownOption = Array.from(this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+        var isDropdownDisabled = dropdownOption && (dropdownOption.classList.contains('disabled') || dropdownOption.getAttribute('aria-disabled') === 'true');
+        var selectOption = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        var isNativeDisabled = selectOption && selectOption.disabled;
+        return Boolean(isDropdownDisabled || isNativeDisabled);
+    };
+    /**
+     * Centralized keyboard event handler for all select modes
+     */
+    KTSelect.prototype._handleKeyboardEvent = function (event) {
+        var isOpen = this._dropdownIsOpen;
+        var config = this._config;
+        var focusManager = this._focusManager;
+        var buffer = this._typeToSearchBuffer;
+        // Ignore modifier keys
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        // Type-to-search: only for single char keys
+        if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/)) {
+            buffer.push(event.key);
+            var str = buffer.getBuffer();
+            focusManager.focusByString(str);
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openDropdown();
+                }
+                else {
+                    focusManager.focusNext();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openDropdown();
+                }
+                else {
+                    focusManager.focusPrevious();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (isOpen)
+                    focusManager.focusFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                if (isOpen)
+                    focusManager.focusLast();
+                break;
+            case 'Enter':
+            case ' ': // Space
+                if (isOpen) {
+                    var focused = focusManager.getFocusedOption();
+                    if (focused) {
+                        var value = focused.dataset.value;
+                        if (value) {
+                            this.toggleSelection(value);
+                            if (!config.multiple && config.closeOnSelect) {
+                                this.closeDropdown();
+                            }
+                        }
+                    }
+                    // Prevent form submit
+                    event.preventDefault();
+                }
+                else {
+                    this.openDropdown();
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    this.closeDropdown();
+                    event.target.blur();
+                }
+                break;
+            case 'Tab':
+                // Let Tab propagate for normal focus movement
+                break;
+            default:
+                break;
+        }
+    };
+    KTSelect.prototype.renderDisplayTemplateForSelected = function (selectedValues) {
+        var _this = this;
+        var optionsConfig = this._config.optionsConfig || {};
+        var displaySeparator = this._config.displaySeparator || ', ';
+        var contentArray = Array.from(new Set(selectedValues.map(function (value) {
+            var option = Array.from(_this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+            if (!option)
+                return '';
+            var displayTemplate = _this._config.displayTemplate;
+            var text = option.getAttribute('data-text') || '';
+            // Replace all {{varname}} in option.innerHTML with values from _config
+            Object.entries(optionsConfig[value] || {}).forEach(function (_a) {
+                var key = _a[0], val = _a[1];
+                if (["string", "number", "boolean"].includes(typeof val)) {
+                    displayTemplate = displayTemplate.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(val));
+                }
+            });
+            return (0, utils_1.renderTemplateString)(displayTemplate, {
+                selectedCount: selectedValues.length || 0,
+                selectedTexts: _this.getSelectedOptionsText() || '',
+                text: text,
+            });
+        }).filter(Boolean)));
+        return contentArray.join(displaySeparator);
+    };
     /**
      * ========================================================================
      * STATIC METHODS