@keenthemes/ktui 1.0.19 → 1.0.21

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

@@ -61,12 +61,16 @@ var KTSelect = /** @class */ (function (_super) {
         // Core properties
         _this._name = 'select';
         _this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
+        // Cached DOM references for performance
+        _this._optionsContainer = null;
         // State
         _this._dropdownIsOpen = false;
         _this._comboboxModule = null;
         _this._tagsModule = null;
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
+        _this._selectAllButton = null;
+        _this._selectAllButtonToggle = null;
         _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         _this._mutationObserver = null;
         // Search debounce timeout
@@ -112,6 +116,10 @@ var KTSelect = /** @class */ (function (_super) {
             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();
+        this._setupElementReferences();
         // Show loading state
         this._renderLoadingState();
         // Fetch remote data
@@ -130,7 +138,10 @@ var KTSelect = /** @class */ (function (_super) {
                 _this._generateOptionsHtml(_this._element);
                 if (_this._config.debug)
                     console.log('Generating options HTML from remote data');
-                _this._setupComponent();
+                // Update the dropdown to show the new options
+                _this._updateDropdownWithNewOptions();
+                // Complete the component setup with the fetched data
+                _this._completeRemoteSetup();
                 // Add pagination "Load More" button if needed
                 if (_this._config.pagination && _this._remoteModule.hasMorePages()) {
                     _this._addLoadMoreButton();
@@ -154,6 +165,108 @@ var KTSelect = /** @class */ (function (_super) {
         var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
         options.forEach(function (option) { return option.remove(); });
     };
+    /**
+     * Unified method to render options in dropdown - eliminates code duplication
+     */
+    KTSelect.prototype._renderOptionsInDropdown = function (optionsData, clearContainer) {
+        var _this = this;
+        if (clearContainer === void 0) { clearContainer = true; }
+        if (!this._dropdownContentElement)
+            return;
+        // Use cached options container for better performance
+        var optionsContainer = this._optionsContainer ||
+            this._dropdownContentElement.querySelector('[data-kt-select-options]');
+        if (!optionsContainer)
+            return;
+        // Clear container if requested
+        if (clearContainer) {
+            optionsContainer.innerHTML = '';
+        }
+        // Use DocumentFragment for efficient DOM manipulation
+        var fragment = document.createDocumentFragment();
+        // Process options data
+        optionsData.forEach(function (optionData) {
+            var optionElement;
+            // Handle different input types
+            if (optionData instanceof HTMLOptionElement) {
+                // Skip empty placeholder options
+                if (optionData.value === '' && optionData.textContent.trim() === '') {
+                    return;
+                }
+                optionElement = optionData;
+            }
+            else {
+                // Handle KTSelectOptionData objects - cast to ensure type safety
+                var dataItem = optionData;
+                optionElement = document.createElement('option');
+                optionElement.value = dataItem.id || '';
+                optionElement.textContent = dataItem.title || '';
+                if (dataItem.selected) {
+                    optionElement.setAttribute('selected', 'selected');
+                }
+                if (dataItem.disabled) {
+                    optionElement.setAttribute('disabled', 'disabled');
+                }
+            }
+            // Create KTSelectOption instance for proper rendering
+            var selectOption = new option_1.KTSelectOption(optionElement, _this._config);
+            var renderedOption = selectOption.render();
+            // Add to fragment for batch DOM operation
+            fragment.appendChild(renderedOption);
+        });
+        // Batch append all options at once
+        optionsContainer.appendChild(fragment);
+        // Update options NodeList
+        this._options = this._wrapperElement.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
+     */
+    KTSelect.prototype._updateDropdownWithNewOptions = function () {
+        // Get all options from the original select element
+        var options = Array.from(this._element.querySelectorAll('option'));
+        // Use unified renderer
+        this._renderOptionsInDropdown(options, true);
+    };
+    /**
+     * Complete the setup for remote data after HTML structure is created
+     */
+    KTSelect.prototype._completeRemoteSetup = function () {
+        // Initialize options
+        this._preSelectOptions(this._element);
+        // Apply disabled state if needed
+        this._applyInitialDisabledState();
+        // Initialize search if enabled
+        if (this._config.enableSearch) {
+            this._initializeSearchModule();
+        }
+        // Initialize combobox if enabled
+        if (this._config.combobox) {
+            this._comboboxModule = new combobox_1.KTSelectCombobox(this);
+        }
+        // Initialize tags if enabled
+        if (this._config.tags) {
+            this._tagsModule = new tags_1.KTSelectTags(this);
+        }
+        // Initialize focus manager after dropdown element is created
+        this._focusManager = new utils_1.FocusManager(this._dropdownContentElement, '[data-kt-select-option]', this._config);
+        // Initialize dropdown module after all elements are created
+        this._dropdownModule = new dropdown_1.KTSelectDropdown(this._wrapperElement, this._displayElement, this._dropdownContentElement, this._config, this);
+        // Update display and set ARIA attributes
+        this._updateDisplayAndAriaAttributes();
+        this.updateSelectedOptionDisplay();
+        this._setAriaAttributes();
+        // Update select all button state
+        this.updateSelectAllButtonState();
+        // Focus the first selected option or first option if nothing selected
+        this._focusSelectedOption();
+        // Attach event listeners after all modules are initialized
+        this._attachEventListeners();
+        this._observeNativeSelect();
+    };
     /**
      * Helper to show a dropdown message (error, loading, noResults)
      */
@@ -347,6 +460,10 @@ var KTSelect = /** @class */ (function (_super) {
         this._updateDisplayAndAriaAttributes();
         this.updateSelectedOptionDisplay();
         this._setAriaAttributes();
+        // Update select all button state
+        this.updateSelectAllButtonState();
+        // Focus the first selected option or first option if nothing selected
+        this._focusSelectedOption();
         // Attach event listeners after all modules are initialized
         this._attachEventListeners();
         this._observeNativeSelect();
@@ -366,13 +483,19 @@ var KTSelect = /** @class */ (function (_super) {
         // Move classes from original select to wrapper and display elements
         if (this._element.classList.length > 0) {
             var originalClasses = Array.from(this._element.classList);
-            var displaySpecificClasses_1 = ['kt-select', 'kt-select-sm', 'kt-select-lg'];
+            var displaySpecificClasses_1 = [
+                'kt-select',
+                'kt-select-sm',
+                'kt-select-lg',
+            ];
             var classesForWrapper = originalClasses.filter(function (className) { return !displaySpecificClasses_1.includes(className); });
             if (classesForWrapper.length > 0) {
                 (_a = wrapperElement.classList).add.apply(_a, classesForWrapper);
             }
             // Move display-specific classes to display element
-            var classesForDisplay = originalClasses.filter(function (className) { return displaySpecificClasses_1.includes(className); });
+            var classesForDisplay = originalClasses.filter(function (className) {
+                return displaySpecificClasses_1.includes(className);
+            });
             if (classesForDisplay.length > 0) {
                 (_b = displayElement.classList).add.apply(_b, classesForDisplay);
             }
@@ -385,9 +508,14 @@ var KTSelect = /** @class */ (function (_super) {
             var searchElement = templates_1.defaultTemplates.search(this._config);
             dropdownElement.appendChild(searchElement);
         }
+        // Add select all button if needed
+        if (this._config.multiple && this._config.enableSelectAll) {
+            var selectAllElement = templates_1.defaultTemplates.selectAll(this._config);
+            dropdownElement.appendChild(selectAllElement);
+        }
         // Create options container using template
         var optionsContainer = templates_1.defaultTemplates.options(this._config);
-        // Add each option directly to the container
+        // Add each option directly to the container (only if options exist)
         options.forEach(function (optionElement) {
             // Skip empty placeholder options (only if BOTH value AND text are empty)
             // This allows options with empty value but visible text to display in dropdown
@@ -414,13 +542,18 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype._setupElementReferences = function () {
         this._wrapperElement = this._element.nextElementSibling;
+        // Safety check - ensure wrapper element exists
+        if (!this._wrapperElement) {
+            console.error('KTSelect: Wrapper element not found. HTML structure may not be created properly.');
+            return;
+        }
         // 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]");
         if (!this._dropdownContentElement) {
-            console.log(this._element);
-            console.error('Dropdown content element not found', this._wrapperElement);
+            console.error('KTSelect: Dropdown content element not found', this._wrapperElement);
+            return;
         }
         // Get search input element - this is used for the search functionality
         this._searchInputElement = this._dropdownContentElement.querySelector("[data-kt-select-search]");
@@ -428,6 +561,9 @@ var KTSelect = /** @class */ (function (_super) {
         if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
+        this._selectAllButton = this._wrapperElement.querySelector('[data-kt-select-select-all]');
+        // Cache the options container for performance
+        this._optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
@@ -438,6 +574,13 @@ 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));
+        if (this._selectAllButton) {
+            this._selectAllButtonToggle =
+                this._selectAllButton.querySelector('button');
+            if (this._selectAllButtonToggle) {
+                this._eventManager.addListener(this._selectAllButtonToggle, 'click', this._handleSelectAllClick.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) {
@@ -603,6 +746,8 @@ var KTSelect = /** @class */ (function (_super) {
         this._fireEvent('show');
         // 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();
     };
@@ -830,6 +975,8 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions([]);
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
+        // Update select all button state
+        this.updateSelectAllButtonState();
         // Dispatch change event
         this._dispatchEvent('change');
         this._fireEvent('change');
@@ -1094,6 +1241,7 @@ var KTSelect = /** @class */ (function (_super) {
             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();
         }
         // Dispatch custom change event with additional data
         this._dispatchEvent('change', {
@@ -1173,6 +1321,8 @@ var KTSelect = /** @class */ (function (_super) {
         var query = event.target.value;
         // Check if the query is long enough
         if (query.length < (this._config.searchMinLength || 0)) {
+            // Restore original options if query is too short
+            this._restoreOriginalOptions();
             return;
         }
         // Debounce the search
@@ -1196,6 +1346,7 @@ var KTSelect = /** @class */ (function (_super) {
                     if (_this._searchModule) {
                         _this._searchModule.refreshAfterSearch();
                     }
+                    _this.updateSelectAllButtonState();
                 })
                     .catch(function (error) {
                     console.error('Error updating search results:', error);
@@ -1226,7 +1377,36 @@ var KTSelect = /** @class */ (function (_super) {
      * @param message Error message
      */
     KTSelect.prototype._renderSearchErrorState = function (message) {
+        var _this = this;
         this._showDropdownMessage('error', message);
+        // Restore original options after error with a delay
+        setTimeout(function () {
+            _this._restoreOriginalOptions();
+        }, 2000);
+    };
+    /**
+     * Restore original options when search is cleared
+     */
+    KTSelect.prototype._restoreOriginalOptions = function () {
+        if (!this._dropdownContentElement || !this._originalOptionsHtml)
+            return;
+        // Use cached options container for better performance
+        var optionsContainer = this._optionsContainer ||
+            this._dropdownContentElement.querySelector('[data-kt-select-options]');
+        if (!optionsContainer)
+            return;
+        // Restore original options
+        optionsContainer.innerHTML = this._originalOptionsHtml;
+        // Update options NodeList
+        this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+        // Refresh search module
+        if (this._searchModule) {
+            this._searchModule.refreshAfterSearch();
+        }
+        this.updateSelectAllButtonState();
+        if (this._config.debug) {
+            console.log('Restored original options after search clear');
+        }
     };
     /**
      * Update search results in the dropdown
@@ -1235,31 +1415,24 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._updateSearchResults = function (items) {
         if (!this._dropdownContentElement)
             return;
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
+        // Use cached options container for better performance
+        var optionsContainer = this._optionsContainer ||
+            this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
-        // Clear current options
-        optionsContainer.innerHTML = '';
+        // Handle empty results
         if (items.length === 0) {
-            // Show no results message using template for consistency and customization
+            optionsContainer.innerHTML = '';
             var noResultsElement = templates_1.defaultTemplates.searchEmpty(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 = document.createElement('option');
-            selectOption.value = item.id;
-            // Add to dropdown container
-            optionsContainer.appendChild(selectOption);
-        });
+        // Use unified renderer for search results
+        this._renderOptionsInDropdown(items, true);
         // Add pagination "Load More" button if needed
         if (this._config.pagination && this._remoteModule.hasMorePages()) {
             this._addLoadMoreButton();
         }
-        // Update options NodeList
-        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
      * Check if dropdown is open
@@ -1271,10 +1444,12 @@ var KTSelect = /** @class */ (function (_super) {
         var _this = this;
         var selectedValues = this.getSelectedOptions();
         var displaySeparator = this._config.displaySeparator || ', ';
-        var texts = selectedValues.map(function (value) {
+        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);
+        })
+            .filter(Boolean);
         return texts.join(displaySeparator);
     };
     /**
@@ -1282,7 +1457,9 @@ var KTSelect = /** @class */ (function (_super) {
      */
     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 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);
@@ -1304,9 +1481,14 @@ var KTSelect = /** @class */ (function (_super) {
         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 (event.key !== 'ArrowDown' &&
+                event.key !== 'ArrowUp' &&
+                event.key !== 'Escape' &&
+                event.key !== 'Enter' &&
+                event.key !== 'Tab' &&
+                event.key !== 'Home' &&
+                event.key !== 'End' &&
+                event.key !== ' ') {
                 // 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.
@@ -1320,7 +1502,10 @@ var KTSelect = /** @class */ (function (_super) {
         if (event.altKey || event.ctrlKey || event.metaKey)
             return;
         // 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) {
+        if (event.key.length === 1 &&
+            !event.repeat &&
+            !event.key.match(/\s/) &&
+            document.activeElement !== this._searchInputElement) {
             buffer.push(event.key);
             var str = buffer.getBuffer();
             if (isOpen) {
@@ -1369,7 +1554,9 @@ var KTSelect = /** @class */ (function (_super) {
                     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 (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();
@@ -1410,7 +1597,8 @@ var KTSelect = /** @class */ (function (_super) {
         var _this = this;
         var optionsConfig = this._config.optionsConfig || {};
         var displaySeparator = this._config.displaySeparator || ', ';
-        var contentArray = Array.from(new Set(selectedValues.map(function (value) {
+        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 '';
@@ -1419,7 +1607,7 @@ var KTSelect = /** @class */ (function (_super) {
             // 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)) {
+                if (['string', 'number', 'boolean'].includes(typeof val)) {
                     displayTemplate = displayTemplate.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(val));
                 }
             });
@@ -1428,7 +1616,8 @@ var KTSelect = /** @class */ (function (_super) {
                 selectedTexts: _this.getSelectedOptionsText() || '',
                 text: text,
             });
-        }).filter(Boolean)));
+        })
+            .filter(Boolean)));
         return contentArray.join(displaySeparator);
     };
     KTSelect.prototype.getDisplayElement = function () {
@@ -1447,7 +1636,8 @@ var KTSelect = /** @class */ (function (_super) {
                     // Option(s) added or removed
                     needsRebuild = true;
                 }
-                else if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+                else if (mutation.type === 'attributes' &&
+                    mutation.target instanceof HTMLOptionElement) {
                     if (mutation.attributeName === 'selected') {
                         needsSelectionSync = true;
                     }
@@ -1500,6 +1690,57 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
+        this.updateSelectAllButtonState();
+    };
+    KTSelect.prototype._handleSelectAllClick = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var visibleOptions = this._focusManager
+            .getVisibleOptions()
+            .filter(function (opt) { return opt.getAttribute('aria-disabled') !== 'true'; });
+        if (visibleOptions.length === 0)
+            return;
+        var visibleValues = visibleOptions.map(function (opt) { return opt.dataset.value; });
+        var selectedValues = new Set(this.getSelectedOptions());
+        var isAllSelected = visibleOptions.every(function (opt) {
+            return selectedValues.has(opt.dataset.value);
+        });
+        if (isAllSelected) {
+            // Deselect all visible
+            visibleValues.forEach(function (value) { return selectedValues.delete(value); });
+        }
+        else {
+            // Select all visible
+            visibleValues.forEach(function (value) { return selectedValues.add(value); });
+        }
+        this._state.setSelectedOptions(Array.from(selectedValues));
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+        this.updateSelectAllButtonState();
+        this._dispatchEvent('change');
+        this._fireEvent('change');
+    };
+    KTSelect.prototype.updateSelectAllButtonState = function () {
+        if (!this._config.multiple ||
+            !this._config.enableSelectAll ||
+            !this._selectAllButtonToggle) {
+            return;
+        }
+        var visibleOptions = this._focusManager
+            .getVisibleOptions()
+            .filter(function (opt) { return opt.getAttribute('aria-disabled') !== 'true'; });
+        if (visibleOptions.length === 0) {
+            this._selectAllButton.style.display = 'none';
+            return;
+        }
+        this._selectAllButton.style.display = '';
+        var selectedValues = new Set(this.getSelectedOptions());
+        var isAllSelected = visibleOptions.every(function (opt) {
+            return selectedValues.has(opt.dataset.value);
+        });
+        this._selectAllButtonToggle.textContent = isAllSelected
+            ? this._config.clearAllText
+            : this._config.selectAllText;
     };
     /**
      * ========================================================================