@keenthemes/ktui 1.0.12 → 1.0.14

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

@@ -66,6 +66,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
         _this._typeToSearchBuffer = new TypeToSearchBuffer();
+        _this._mutationObserver = null;
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -160,15 +161,16 @@ var KTSelect = /** @class */ (function (_super) {
         var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
+        // Clear previous messages
+        optionsContainer.innerHTML = '';
         switch (type) {
             case 'error':
-                optionsContainer.innerHTML = defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message }));
+                optionsContainer.appendChild(defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message })));
                 break;
             case 'loading':
-                optionsContainer.innerHTML = defaultTemplates.loading(this._config, message || 'Loading...').outerHTML;
+                optionsContainer.appendChild(defaultTemplates.loading(this._config, message || 'Loading...'));
                 break;
             case 'empty':
-                optionsContainer.innerHTML = '';
                 optionsContainer.appendChild(defaultTemplates.empty(this._config));
                 break;
         }
@@ -340,20 +342,15 @@ var KTSelect = /** @class */ (function (_super) {
         // 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);
+        this._dropdownModule = new KTSelectDropdown(this._wrapperElement, this._displayElement, this._dropdownContentElement, this._config, this);
         // Update display and set ARIA attributes
         this._updateDisplayAndAriaAttributes();
         this.updateSelectedOptionDisplay();
         this._setAriaAttributes();
         // Attach event listeners after all modules are initialized
         this._attachEventListeners();
+        this._observeNativeSelect();
     };
-    /**
-     * Initialize options HTML from data
-     */
-    // private _initializeOptionsHtml() {
-    // 	this._generateOptionsHtml(this._element);
-    // }
     /**
      * Creates the HTML structure for the select component
      */
@@ -368,7 +365,13 @@ var KTSelect = /** @class */ (function (_super) {
         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));
+            // Exclude kt-select class from being added to the wrapper element
+            var classes = Array.from(this._element.classList).filter(function (className) { return className !== 'kt-select'; });
+            (_a = wrapperElement.classList).add.apply(_a, classes);
+            // If element has class kt-select, move it to display element
+            if (this._element.classList.contains('kt-select')) {
+                displayElement.classList.add('kt-select');
+            }
             this._element.className = '';
         }
         // Create an empty dropdown first (without options) using template
@@ -402,7 +405,7 @@ var KTSelect = /** @class */ (function (_super) {
         wrapperElement.appendChild(dropdownElement);
         // Insert after the original element
         this._element.after(wrapperElement);
-        this._element.style.display = 'none';
+        this._element.classList.add('hidden');
     };
     /**
      * Setup all element references after DOM is created
@@ -423,7 +426,6 @@ var KTSelect = /** @class */ (function (_super) {
         if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
-        this._valueDisplayElement = this._wrapperElement.querySelector("[data-kt-select-value]");
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
@@ -434,16 +436,10 @@ var KTSelect = /** @class */ (function (_super) {
         document.addEventListener('click', this._handleDocumentClick.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._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));
+        // Attach centralized keyboard handler to the wrapper element.
+        // Events from focusable children like _displayElement or _searchInputElement (if present) will bubble up.
+        if (this._wrapperElement) {
+            this._wrapperElement.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
         }
     };
     /**
@@ -586,37 +582,10 @@ var KTSelect = /** @class */ (function (_super) {
      * DROPDOWN MANAGEMENT
      * ========================================================================
      */
-    /**
-     * 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) {
-            // 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.disabled) {
             if (this._config.debug)
                 console.log('openDropdown: select is disabled, not opening');
@@ -644,14 +613,6 @@ var KTSelect = /** @class */ (function (_super) {
         // 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
@@ -672,14 +633,14 @@ var KTSelect = /** @class */ (function (_super) {
         // 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
+        // Clear search input 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();
+            // Clear search input when dropdown closes
+            this._searchModule.clearSearch();
         }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = false;
@@ -713,10 +674,13 @@ var KTSelect = /** @class */ (function (_super) {
         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);
+        // Iterate through selected options and focus the first one that is visible
+        for (var _i = 0, selectedOptions_1 = selectedOptions; _i < selectedOptions_1.length; _i++) {
+            var value = selectedOptions_1[_i];
+            if (this._focusManager && this._focusManager.focusOptionByValue(value)) {
+                break; // Stop after focusing the first found selected and visible option
+            }
+        }
     };
     /**
      * ========================================================================
@@ -779,38 +743,62 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.updateSelectedOptionDisplay = function () {
         var selectedOptions = this.getSelectedOptions();
-        // Tag mode: render tags if enabled
-        if (this._config.tags && this._tagsModule) {
+        var tagsEnabled = this._config.tags && this._tagsModule;
+        var valueDisplayEl = this.getValueDisplayElement();
+        if (tagsEnabled) {
+            // Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
             this._tagsModule.updateTagsDisplay(selectedOptions);
-            return;
+        }
+        // Guard against valueDisplayEl being null due to template modifications
+        if (!valueDisplayEl) {
+            if (this._config.debug) {
+                console.warn('KTSelect: Value display element is null. Cannot update display or placeholder. Check template for [data-kt-select-value].');
+            }
+            return; // Nothing to display on if the element is missing
         }
         if (typeof this._config.renderSelected === 'function') {
-            // Use the custom renderSelected function if provided
-            this._valueDisplayElement.innerHTML = this._config.renderSelected(selectedOptions);
+            valueDisplayEl.innerHTML = this._config.renderSelected(selectedOptions);
         }
         else {
             if (selectedOptions.length === 0) {
-                var placeholder = defaultTemplates.placeholder(this._config);
-                this._valueDisplayElement.replaceChildren(placeholder);
+                // No options selected: display placeholder.
+                // This runs if tags are off, OR if tags are on but no items are selected (tags module would have cleared tags).
+                var placeholderEl = defaultTemplates.placeholder(this._config);
+                valueDisplayEl.replaceChildren(placeholderEl);
             }
             else {
-                var content = '';
-                if (this._config.displayTemplate) {
-                    var selectedValues = this.getSelectedOptions();
-                    content = this.renderDisplayTemplateForSelected(selectedValues);
+                // Options are selected.
+                if (tagsEnabled) {
+                    // Tags are enabled AND options are selected: tags module has rendered them.
+                    // Clear valueDisplayEl as tags are the primary display.
+                    valueDisplayEl.innerHTML = '';
                 }
                 else {
-                    // If no displayTemplate is provided, use the default comma-separated list of selected options
-                    content = this.getSelectedOptionsText();
+                    // Tags are not enabled AND options are selected: render normal text display.
+                    var content = '';
+                    if (this._config.displayTemplate) {
+                        content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+                    }
+                    else {
+                        content = this.getSelectedOptionsText();
+                    }
+                    valueDisplayEl.innerHTML = content;
                 }
-                this._valueDisplayElement.innerHTML = content;
             }
         }
     };
+    /**
+     * Check if an option was originally disabled in the HTML
+     */
+    KTSelect.prototype._isOptionOriginallyDisabled = function (value) {
+        var originalOption = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        return originalOption ? originalOption.disabled : false;
+    };
     /**
      * Update CSS classes for selected options
      */
     KTSelect.prototype._updateSelectedOptionClass = function () {
+        var _this = this;
         var allOptions = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
         var selectedValues = this._state.getSelectedOptions();
         var maxReached = typeof this._config.maxSelections === 'number' &&
@@ -822,9 +810,11 @@ var KTSelect = /** @class */ (function (_super) {
             if (!optionValue)
                 return;
             var isSelected = selectedValues.includes(optionValue);
+            var isOriginallyDisabled = _this._isOptionOriginallyDisabled(optionValue);
             if (isSelected) {
                 option.classList.add('selected');
                 option.setAttribute('aria-selected', 'true');
+                // Selected options should not be visually hidden or disabled by maxSelections logic
                 option.classList.remove('hidden');
                 option.classList.remove('disabled');
                 option.removeAttribute('aria-disabled');
@@ -832,7 +822,8 @@ var KTSelect = /** @class */ (function (_super) {
             else {
                 option.classList.remove('selected');
                 option.setAttribute('aria-selected', 'false');
-                if (maxReached) {
+                // An option should be disabled if it was originally disabled OR if maxSelections is reached
+                if (isOriginallyDisabled || maxReached) {
                     option.classList.add('disabled');
                     option.setAttribute('aria-disabled', 'true');
                 }
@@ -892,17 +883,6 @@ var KTSelect = /** @class */ (function (_super) {
      * EVENT HANDLERS
      * ========================================================================
      */
-    /**
-     * Handle display element click
-     * @deprecated
-     */
-    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
      */
@@ -943,6 +923,13 @@ var KTSelect = /** @class */ (function (_super) {
         }
         if (this._config.debug)
             console.log('Option clicked:', optionValue);
+        // If in single-select mode and the clicked option is already selected, just close the dropdown.
+        if (!this._config.multiple && this._state.isSelected(optionValue)) {
+            if (this._config.debug)
+                console.log('Single select mode: clicked already selected option. Closing dropdown.');
+            this.closeDropdown();
+            return;
+        }
         // Use toggleSelection instead of _selectOption to prevent re-rendering
         this.toggleSelection(optionValue);
     };
@@ -1006,7 +993,13 @@ var KTSelect = /** @class */ (function (_super) {
      * Get value display element
      */
     KTSelect.prototype.getValueDisplayElement = function () {
-        return this._valueDisplayElement;
+        return this._displayElement;
+    };
+    /**
+     * Get wrapper element
+     */
+    KTSelect.prototype.getWrapperElement = function () {
+        return this._wrapperElement;
     };
     /**
      * Show all options in the dropdown
@@ -1016,6 +1009,7 @@ var KTSelect = /** @class */ (function (_super) {
         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) {
+            var _a;
             // Remove hidden class
             option.classList.remove('hidden');
             // Clean up any existing inline styles for backward compatibility
@@ -1029,7 +1023,7 @@ var KTSelect = /** @class */ (function (_super) {
                     }
                     else {
                         // Otherwise, remove just the display property
-                        option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
+                        option.setAttribute('style', (_a = styleAttr === null || styleAttr === void 0 ? void 0 : styleAttr.replace(/display:\s*[^;]+;?/gi, '')) === null || _a === void 0 ? void 0 : _a.trim());
                     }
                 }
             }
@@ -1039,7 +1033,7 @@ var KTSelect = /** @class */ (function (_super) {
             this._searchInputElement.value = '';
             // If we have a search module, clear any search filtering
             if (this._searchModule) {
-                this._searchModule.clearSearchHighlights();
+                this._searchModule.clearSearch();
             }
         }
     };
@@ -1068,7 +1062,7 @@ var KTSelect = /** @class */ (function (_super) {
         // 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));
+            console.log("toggleSelection called for value: ".concat(value, ", isSelected: ").concat(isSelected, ", multiple: ").concat(this._config.multiple));
         // If already selected in single select mode, do nothing (can't deselect in single select)
         if (isSelected && !this._config.multiple) {
             if (this._config.debug)
@@ -1077,9 +1071,9 @@ var KTSelect = /** @class */ (function (_super) {
         }
         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
+        // Ensure any search input is cleared when selection changes
         if (this._searchModule) {
-            this._searchModule.clearSearchHighlights();
+            this._searchModule.clearSearch();
         }
         // Toggle the selection in the state
         this._state.toggleSelectedOptions(value);
@@ -1102,15 +1096,14 @@ var KTSelect = /** @class */ (function (_super) {
         // 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) {
+        else {
             if (this._config.debug)
-                console.log('About to call closeDropdown() for multiple select with closeOnSelect:true');
+                console.log('About to call closeDropdown() for multiple select');
             this.closeDropdown();
         }
         // Dispatch custom change event with additional data
@@ -1210,9 +1203,9 @@ var KTSelect = /** @class */ (function (_super) {
                     .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();
+                    // Refresh the search module to update focus and cache
+                    if (_this._searchModule) {
+                        _this._searchModule.refreshAfterSearch();
                     }
                 })
                     .catch(function (error) {
@@ -1309,19 +1302,47 @@ var KTSelect = /** @class */ (function (_super) {
      * Centralized keyboard event handler for all select modes
      */
     KTSelect.prototype._handleKeyboardEvent = function (event) {
+        // If the event target is the search input and the event was already handled (defaultPrevented),
+        // then return early to avoid duplicate processing by this broader handler.
+        if (event.target === this._searchInputElement && event.defaultPrevented) {
+            return;
+        }
         var isOpen = this._dropdownIsOpen;
         var config = this._config;
         var focusManager = this._focusManager;
         var buffer = this._typeToSearchBuffer;
-        // Ignore modifier keys
+        // If the event target is the search input, let it handle most typing keys naturally.
+        if (event.target === this._searchInputElement) {
+            // Allow navigation keys like ArrowDown, ArrowUp, Escape, Enter (for search/selection) to be handled by the logic below.
+            // For other keys (characters, space, backspace, delete), let the input field process them.
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' &&
+                event.key !== 'Escape' && event.key !== 'Enter' && event.key !== 'Tab' &&
+                event.key !== 'Home' && event.key !== 'End') {
+                // If it's a character key and we are NOT type-to-searching (because search has focus)
+                // then let the input field handle it for its own value.
+                // The search module's 'input' event will handle filtering based on the input's value.
+                buffer.clear(); // Clear type-to-search buffer when typing in search field
+                return;
+            }
+            // For Enter specifically in search input, we might want to select the focused option or submit search.
+            // This is handled later in the switch.
+        }
+        // Ignore modifier keys (except for specific combinations if added later)
         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/)) {
+        // Type-to-search: only for single char keys, when search input does not have focus
+        if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/) && document.activeElement !== this._searchInputElement) {
             buffer.push(event.key);
             var str = buffer.getBuffer();
-            focusManager.focusByString(str);
-            return;
+            if (isOpen) {
+                focusManager.focusByString(str);
+            }
+            else {
+                // If closed, type-to-search could potentially open and select.
+                // For now, let's assume it only works when open or opens it first.
+                // Or, we could find the matching option and set it directly without opening.
+            }
+            return; // Type-to-search handles the event
         }
         switch (event.key) {
             case 'ArrowDown':
@@ -1355,18 +1376,28 @@ var KTSelect = /** @class */ (function (_super) {
             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();
-                            }
+                    var focusedOptionEl = this._focusManager.getFocusedOption();
+                    if (focusedOptionEl) {
+                        var val = focusedOptionEl.dataset.value;
+                        // If single select, and the item is already selected, just close.
+                        if (val !== undefined && !this._config.multiple && this._state.isSelected(val)) {
+                            if (this._config.debug)
+                                console.log('Enter on already selected item in single-select mode. Closing.');
+                            this.closeDropdown();
+                            event.preventDefault();
+                            break;
                         }
                     }
-                    // Prevent form submit
-                    event.preventDefault();
+                    // Proceed with selection if not handled above
+                    this.selectFocusedOption();
+                    // Close dropdown if configured to do so (for new selections)
+                    if (!this._config.multiple) {
+                        // This will also be true for the case handled above, but closeDropdown is idempotent.
+                        // However, the break above prevents this from being reached for that specific case.
+                        this.closeDropdown();
+                    }
+                    event.preventDefault(); // Prevent form submission or other default actions
+                    break;
                 }
                 else {
                     this.openDropdown();
@@ -1410,6 +1441,76 @@ var KTSelect = /** @class */ (function (_super) {
         }).filter(Boolean)));
         return contentArray.join(displaySeparator);
     };
+    KTSelect.prototype.getDisplayElement = function () {
+        return this._displayElement;
+    };
+    KTSelect.prototype._observeNativeSelect = function () {
+        var _this = this;
+        if (this._mutationObserver)
+            return; // Prevent double observers
+        this._mutationObserver = new MutationObserver(function (mutations) {
+            var needsRebuild = false;
+            var needsSelectionSync = false;
+            for (var _i = 0, mutations_1 = mutations; _i < mutations_1.length; _i++) {
+                var mutation = mutations_1[_i];
+                if (mutation.type === 'childList') {
+                    // Option(s) added or removed
+                    needsRebuild = true;
+                }
+                else if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+                    if (mutation.attributeName === 'selected') {
+                        needsSelectionSync = true;
+                    }
+                }
+            }
+            if (needsRebuild) {
+                // Rebuild the custom dropdown options
+                _this._rebuildOptionsFromNative();
+            }
+            if (needsSelectionSync) {
+                _this._syncSelectionFromNative();
+            }
+        });
+        this._mutationObserver.observe(this._element, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['selected'],
+        });
+    };
+    KTSelect.prototype._rebuildOptionsFromNative = function () {
+        var _this = this;
+        // Remove and rebuild the custom dropdown options from the native select
+        if (this._dropdownContentElement) {
+            var optionsContainer_1 = this._dropdownContentElement.querySelector('[data-kt-select-options]');
+            if (optionsContainer_1) {
+                optionsContainer_1.innerHTML = '';
+                var options = Array.from(this._element.querySelectorAll('option'));
+                options.forEach(function (optionElement) {
+                    if (optionElement.value === '' &&
+                        optionElement.textContent.trim() === '') {
+                        return;
+                    }
+                    var selectOption = new KTSelectOption(optionElement, _this._config);
+                    var renderedOption = selectOption.render();
+                    optionsContainer_1.appendChild(renderedOption);
+                });
+                // Update internal references
+                this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+            }
+        }
+        // Sync selection after rebuilding
+        this._syncSelectionFromNative();
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+    };
+    KTSelect.prototype._syncSelectionFromNative = function () {
+        // Sync internal state from the native select's selected options
+        var selected = Array.from(this._element.querySelectorAll('option:checked')).map(function (opt) { return opt.value; });
+        this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+    };
     /**
      * ========================================================================
      * STATIC METHODS