@keenthemes/ktui 1.1.1 → 1.1.3

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

@@ -95,8 +95,6 @@ var KTSelect = /** @class */ (function (_super) {
             _this._state
                 .setItems()
                 .then(function () {
-                if (_this._config.debug)
-                    console.log('Setting up component after remote data is loaded');
                 _this._setupComponent();
             })
                 .catch(function (error) {
@@ -131,6 +129,41 @@ var KTSelect = /** @class */ (function (_super) {
         // Cast to writable to allow assignment (config is readonly but needs initialization)
         this._config = __assign(__assign(__assign(__assign(__assign({}, this._defaultConfig), KTSelect.globalConfig), this._getGlobalConfig()), KTDom.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
     };
+    /**
+     * Override _dispatchEvent to also dispatch on document for global listeners (jQuery compatibility)
+     */
+    KTSelect.prototype._dispatchEvent = function (eventType, payload) {
+        if (payload === void 0) { payload = null; }
+        // Call parent method to dispatch on element (existing behavior)
+        _super.prototype._dispatchEvent.call(this, eventType, payload);
+        // Also dispatch on document if configured
+        var dispatchGlobalEvents = this._config.dispatchGlobalEvents !== false; // Default to true
+        if (dispatchGlobalEvents) {
+            // Create event detail structure
+            var eventDetail = {
+                payload: payload,
+                instance: this, // Include component instance reference
+                element: this._element, // Include element reference
+            };
+            // Dispatch non-namespaced event on document (for jQuery compatibility: $(document).on('show', ...))
+            var nonNamespacedEvent = new CustomEvent(eventType, {
+                detail: eventDetail,
+                bubbles: true,
+                cancelable: true,
+                composed: true, // Allow event to cross shadow DOM boundaries
+            });
+            document.dispatchEvent(nonNamespacedEvent);
+            // Also dispatch namespaced event on document (for namespaced listeners: $(document).on('kt-select:show', ...))
+            var namespacedEventType = "kt-select:".concat(eventType);
+            var namespacedEvent = new CustomEvent(namespacedEventType, {
+                detail: eventDetail,
+                bubbles: true,
+                cancelable: true,
+                composed: true, // Allow event to cross shadow DOM boundaries
+            });
+            document.dispatchEvent(namespacedEvent);
+        }
+    };
     /**
      * Initialize remote data fetching
      */
@@ -138,8 +171,6 @@ var KTSelect = /** @class */ (function (_super) {
         var _this = this;
         if (!this._remoteModule || !this._config.remote)
             return;
-        if (this._config.debug)
-            console.log('Initializing remote data with URL:', this._config.dataUrl);
         // For remote data, we need to create the HTML structure first
         // so that the component can be properly initialized
         this._createHtmlStructure();
@@ -150,8 +181,6 @@ var KTSelect = /** @class */ (function (_super) {
         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
@@ -160,8 +189,6 @@ var KTSelect = /** @class */ (function (_super) {
                 .then(function () {
                 // Generate options from the fetched data
                 _this._generateOptionsHtml(_this._element);
-                if (_this._config.debug)
-                    console.log('Generating options HTML from remote data');
                 // Update the dropdown to show the new options
                 _this._updateDropdownWithNewOptions();
                 // Complete the component setup with the fetched data
@@ -189,9 +216,6 @@ var KTSelect = /** @class */ (function (_super) {
         var selectedOptions = Array.from(this._element.querySelectorAll('option[selected]:not([value=""])'));
         if (selectedOptions.length > 0) {
             this._preSelectedValues = selectedOptions.map(function (opt) { return opt.value; });
-            if (this._config.debug) {
-                console.log('Captured pre-selected values before clearing:', this._preSelectedValues);
-            }
         }
         // Keep only the empty/placeholder option and remove the rest
         var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
@@ -250,9 +274,6 @@ var KTSelect = /** @class */ (function (_super) {
         optionsContainer.appendChild(fragment);
         // Update options NodeList
         this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
-        if (this._config.debug) {
-            console.log("Rendered ".concat(optionsData.length, " options in dropdown"));
-        }
     };
     /**
      * Update dropdown with new options from the original select element
@@ -277,9 +298,6 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Apply pre-selected values captured before remote data was loaded
         if (this._preSelectedValues.length > 0) {
-            if (this._config.debug) {
-                console.log('Applying pre-selected values after remote data loaded:', this._preSelectedValues);
-            }
             // Get all available option values from the loaded remote data
             var availableValues_1 = Array.from(this._element.querySelectorAll('option')).map(function (opt) { return opt.value; });
             // Filter pre-selected values to only those that exist in remote data
@@ -291,9 +309,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var valuesToSelect = this._config.multiple
                     ? validPreSelectedValues
                     : [validPreSelectedValues[0]];
-                if (this._config.debug) {
-                    console.log('Selecting matched values:', valuesToSelect);
-                }
                 // Get any existing selections from _preSelectOptions (e.g., data-kt-select-pre-selected)
                 var existingSelections = this._state.getSelectedOptions();
                 // Merge existing selections with native pre-selected values (no duplicates)
@@ -310,9 +325,6 @@ var KTSelect = /** @class */ (function (_super) {
                 this.updateSelectedOptionDisplay();
                 this._updateSelectedOptionClass();
             }
-            else if (this._config.debug) {
-                console.log('None of the pre-selected values matched remote data:', this._preSelectedValues);
-            }
             // Clear the pre-selected values array after processing
             this._preSelectedValues = [];
         }
@@ -387,8 +399,6 @@ var KTSelect = /** @class */ (function (_super) {
         // 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();
         }
     };
@@ -500,8 +510,6 @@ var KTSelect = /** @class */ (function (_super) {
         });
         // Update options NodeList to include the new options
         this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
-        if (this._config.debug)
-            console.log("Added ".concat(newItems.length, " more options to dropdown"));
     };
     /**
      * ========================================================================
@@ -640,10 +648,18 @@ var KTSelect = /** @class */ (function (_super) {
             return;
         }
         // Get search input element - this is used for the search functionality
-        this._searchInputElement = this._dropdownContentElement.querySelector("[data-kt-select-search]");
-        // If not found in dropdown, check if it's the display element itself
+        // First try to find the actual input element (not the wrapper div)
+        this._searchInputElement = this._dropdownContentElement.querySelector("input[data-kt-select-search]");
+        // If not found, try the wrapper selector (for backward compatibility)
+        if (!this._searchInputElement) {
+            var searchWrapper = this._dropdownContentElement.querySelector("[data-kt-select-search]");
+            if (searchWrapper) {
+                this._searchInputElement = searchWrapper.querySelector('input');
+            }
+        }
+        // If still not found in dropdown, check if it's the display element itself (combobox mode)
         if (!this._searchInputElement) {
-            this._searchInputElement = this._displayElement;
+            this._searchInputElement = this._displayElement.querySelector('input[data-kt-select-search]');
         }
         this._selectAllButton = this._wrapperElement.querySelector('[data-kt-select-select-all]');
         // Cache the options container for performance
@@ -709,8 +725,6 @@ var KTSelect = /** @class */ (function (_super) {
     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
@@ -738,9 +752,6 @@ var KTSelect = /** @class */ (function (_super) {
                     label =
                         extractedLabel !== null ? String(extractedLabel) : 'Unnamed option';
                 }
-                // Log the extracted values for debugging
-                if (_this._config.debug)
-                    console.log("Option: value=".concat(value, ", label=").concat(label));
                 // Set option attributes
                 optionElement.value = value;
                 optionElement.textContent = label || 'Unnamed option';
@@ -749,12 +760,6 @@ var KTSelect = /** @class */ (function (_super) {
                 }
                 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');
         }
     };
     /**
@@ -767,8 +772,6 @@ var KTSelect = /** @class */ (function (_super) {
         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;
     };
     /**
@@ -801,55 +804,79 @@ var KTSelect = /** @class */ (function (_super) {
      * 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');
             return;
         }
-        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...');
+        // Global dropdown management: close other open dropdowns if configured
+        var closeOnOtherOpen = this._config.closeOnOtherOpen !== false; // Default to true
+        if (closeOnOtherOpen) {
+            // Close all other open dropdowns
+            var otherSelectsToClose_1 = [];
+            KTSelect.openDropdowns.forEach(function (otherSelect) {
+                var isOther = otherSelect !== _this;
+                var isOpen = otherSelect._dropdownIsOpen;
+                if (isOther && isOpen) {
+                    otherSelectsToClose_1.push(otherSelect);
+                }
+            });
+            otherSelectsToClose_1.forEach(function (otherSelect) {
+                otherSelect.closeDropdown();
+            });
+        }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = true;
+        // Add to registry
+        KTSelect.openDropdowns.add(this);
         // Open the dropdown via the module
         this._dropdownModule.open();
-        // Dispatch custom event
+        // Dispatch custom events
         this._dispatchEvent('show');
         this._fireEvent('show');
+        // Dispatch dropdown.show event on wrapper for search module
+        var dropdownShowEvent = new CustomEvent('dropdown.show', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._wrapperElement.dispatchEvent(dropdownShowEvent);
         // Update ARIA states
         this._setAriaAttributes();
         // Update select all button state
         this.updateSelectAllButtonState();
         // Focus the first selected option or first option if nothing selected
-        this._focusSelectedOption();
+        // BUT: Skip this if search autofocus is enabled, as we want search input to get focus
+        if (!(this._config.enableSearch && this._config.searchAutofocus)) {
+            this._focusSelectedOption();
+        }
+        // Dispatch dropdown.show event on the wrapper element for search module
+        // Use requestAnimationFrame to ensure dropdown is visible and transition has started
+        requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+                if (_this._wrapperElement) {
+                    var dropdownShowEvent_1 = new CustomEvent('dropdown.show', {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    _this._wrapperElement.dispatchEvent(dropdownShowEvent_1);
+                }
+            });
+        });
     };
     /**
      * 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 if the dropdown is closing
         if (this._searchModule && this._searchInputElement) {
             // Clear search input if configured to do so
@@ -861,19 +888,25 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = false;
+        // Remove from registry
+        KTSelect.openDropdowns.delete(this);
         // Call the dropdown module's close method
         this._dropdownModule.close();
         // Reset all focus states
         if (this._focusManager) {
             this._focusManager.resetFocus();
         }
-        // Dispatch custom events
+        // Dispatch custom events on the select element
         this._dispatchEvent('close');
         this._fireEvent('close');
+        // Dispatch dropdown.close event on wrapper for search module
+        var dropdownCloseEvent = new CustomEvent('dropdown.close', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._wrapperElement.dispatchEvent(dropdownCloseEvent);
         // Update ARIA states
         this._setAriaAttributes();
-        if (this._config.debug)
-            console.log('closeDropdown complete');
     };
     /**
      * Update dropdown position
@@ -910,8 +943,6 @@ var KTSelect = /** @class */ (function (_super) {
     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
@@ -1040,8 +1071,6 @@ var KTSelect = /** @class */ (function (_super) {
         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)
@@ -1091,6 +1120,55 @@ var KTSelect = /** @class */ (function (_super) {
         this._dispatchEvent('change');
         this._fireEvent('change');
     };
+    /**
+     * Deselect a specific option by value
+     * @param value The value of the option to deselect
+     * @public
+     */
+    KTSelect.prototype.deselectOption = function (value) {
+        // Check if the option is currently selected
+        if (!this._state.isSelected(value)) {
+            return; // Already deselected
+        }
+        // For single-select mode, check if clearing is allowed
+        if (!this._config.multiple && !this._config.allowClear) {
+            return; // Cannot deselect in single-select mode unless allowClear is true
+        }
+        // Remove from selected options
+        if (this._config.multiple) {
+            // For multiple select, just toggle it off
+            this._state.toggleSelectedOptions(value);
+        }
+        else {
+            // For single select, clear all selections
+            this._state.setSelectedOptions([]);
+        }
+        // Update the native select element
+        var optionEl = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        if (optionEl) {
+            optionEl.selected = false;
+        }
+        // For single select, clear the native select value
+        if (!this._config.multiple) {
+            this._element.value = '';
+        }
+        // Update the display
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+        // Update select all button state
+        this.updateSelectAllButtonState();
+        // Dispatch change event
+        this._dispatchEvent('change', {
+            value: value,
+            selected: false,
+            selectedOptions: this.getSelectedOptions(),
+        });
+        this._fireEvent('change', {
+            value: value,
+            selected: false,
+            selectedOptions: this.getSelectedOptions(),
+        });
+    };
     /**
      * Set selected options programmatically
      */
@@ -1142,36 +1220,24 @@ var KTSelect = /** @class */ (function (_super) {
      * 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);
         // 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;
         }
@@ -1300,22 +1366,19 @@ var KTSelect = /** @class */ (function (_super) {
     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)
-            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 already selected in single select mode, allow deselecting only if allowClear is true
         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.allowClear) {
+                // Use the deselectOption method to handle clearing
+                this.deselectOption(value);
+                return;
+            }
+            return; // Can't deselect in single select mode when allowClear is false
         }
-        if (this._config.debug)
-            console.log("Toggling selection for option: ".concat(value, ", currently selected: ").concat(isSelected));
         // Ensure any search input is cleared when selection changes
         if (this._searchModule) {
             this._searchModule.clearSearch();
@@ -1340,16 +1403,21 @@ var KTSelect = /** @class */ (function (_super) {
         this.updateSelectedOptionDisplay();
         // Update option classes without re-rendering the dropdown content
         this._updateSelectedOptionClass();
-        // For single select mode, always close the dropdown after selection
+        // For single select mode, close the dropdown after selection unless closeOnEnter is false
         // For multiple select mode, keep the dropdown open to allow multiple selections
         if (!this._config.multiple) {
-            if (this._config.debug)
-                console.log('About to call closeDropdown() for single select mode - always close after selection');
-            this.closeDropdown();
+            // Check if we should close based on closeOnEnter config
+            // closeOnEnter only applies to Enter key selections, but for backward compatibility,
+            // we'll respect it for all selections when explicitly set to false
+            var shouldClose = this._config.closeOnEnter !== false; // Default to true
+            if (shouldClose) {
+                this.closeDropdown();
+            }
+            else {
+                this.updateSelectAllButtonState();
+            }
         }
         else {
-            if (this._config.debug)
-                console.log('Multiple select mode - keeping dropdown open for additional selections');
             // Don't close dropdown in multiple select mode to allow multiple selections
             this.updateSelectAllButtonState();
         }
@@ -1481,9 +1549,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('update(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Add new options from remote data and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
@@ -1566,9 +1631,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('reload(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Mark preserved selections on new options
                 validSelections.forEach(function (value) {
                     var option = Array.from(_this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
@@ -1632,9 +1694,6 @@ var KTSelect = /** @class */ (function (_super) {
                 var validSelections = currentlySelected.filter(function (value) {
                     return availableValues.includes(value);
                 });
-                if (_this._config.debug && currentlySelected.length > 0) {
-                    console.log('refresh(): Preserving selections that exist in new data:', validSelections);
-                }
                 // Add new options and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
@@ -1813,9 +1872,6 @@ var KTSelect = /** @class */ (function (_super) {
             this._searchModule.refreshAfterSearch();
         }
         this.updateSelectAllButtonState();
-        if (this._config.debug) {
-            console.log('Restored original options after search clear');
-        }
     };
     /**
      * Update search results in the dropdown
@@ -1866,9 +1922,6 @@ var KTSelect = /** @class */ (function (_super) {
             }
             _this._element.appendChild(optionElement);
         });
-        if (this._config.debug) {
-            console.log("Updated original select with ".concat(items.length, " search results"));
-        }
     };
     /**
      * Check if dropdown is open
@@ -1993,8 +2046,6 @@ var KTSelect = /** @class */ (function (_super) {
                         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;
@@ -2178,8 +2229,23 @@ var KTSelect = /** @class */ (function (_super) {
             ? this._config.clearAllText
             : this._config.selectAllText;
     };
+    /**
+     * Destroy the component and clean up resources
+     */
+    KTSelect.prototype.destroy = function () {
+        // Remove from global dropdown registry
+        KTSelect.openDropdowns.delete(this);
+        // Close dropdown if open
+        if (this._dropdownIsOpen) {
+            this.closeDropdown();
+        }
+        // Call parent dispose method
+        _super.prototype.dispose.call(this);
+    };
     // Static global configuration
     KTSelect.globalConfig = {};
+    // Static registry for tracking open dropdowns (global dropdown management)
+    KTSelect.openDropdowns = new Set();
     return KTSelect;
 }(KTComponent));
 export { KTSelect };