@keenthemes/ktui 1.0.24 → 1.0.25

package/dist/ktui.js

@@ -11660,6 +11660,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._selectAllButtonToggle = null;
         _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         _this._mutationObserver = null;
+        _this._preSelectedValues = [];
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -11773,6 +11774,14 @@ var KTSelect = /** @class */ (function (_super) {
      * Clear existing options from the select element
      */
     KTSelect.prototype._clearExistingOptions = function () {
+        // Capture pre-selected values before clearing (for remote data)
+        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=""])'));
         options.forEach(function (option) { return option.remove(); });
@@ -11829,7 +11838,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Batch append all options at once
         optionsContainer.appendChild(fragment);
         // Update options NodeList
-        this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+        this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
         if (this._config.debug) {
             console.log("Rendered ".concat(optionsData.length, " options in dropdown"));
         }
@@ -11849,6 +11858,47 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._completeRemoteSetup = function () {
         // Initialize options
         this._preSelectOptions(this._element);
+        // 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
+            var validPreSelectedValues = this._preSelectedValues.filter(function (value) {
+                return availableValues_1.includes(value);
+            });
+            if (validPreSelectedValues.length > 0) {
+                // For single-select mode, only use the first value
+                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)
+                var allSelections_1 = this._config.multiple
+                    ? Array.from(new Set(__spreadArray(__spreadArray([], existingSelections, true), valuesToSelect, true)))
+                    : valuesToSelect;
+                // Set all selections at once to avoid toggling issues
+                this._state.setSelectedOptions(allSelections_1);
+                // Update the native select element to match
+                Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
+                    opt.selected = allSelections_1.includes(opt.value);
+                });
+                // Update the visual display
+                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 = [];
+        }
         // Apply disabled state if needed
         this._applyInitialDisabledState();
         // Initialize search if enabled
@@ -12032,7 +12082,7 @@ var KTSelect = /** @class */ (function (_super) {
             }
         });
         // Update options NodeList to include the new options
-        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
         if (this._config.debug)
             console.log("Added ".concat(newItems.length, " more options to dropdown"));
     };
@@ -12176,7 +12226,7 @@ var KTSelect = /** @class */ (function (_super) {
         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]");
+        this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
      * Attach all event listeners to elements
@@ -12546,7 +12596,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype._updateSelectedOptionClass = function () {
         var _this = this;
-        var allOptions = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        var allOptions = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
         var selectedValues = this._state.getSelectedOptions();
         var maxReached = typeof this._config.maxSelections === 'number' &&
             selectedValues.length >= this._config.maxSelections;
@@ -12759,7 +12809,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.showAllOptions = function () {
         // Get all options in the dropdown
-        var options = Array.from(this._wrapperElement.querySelectorAll("[data-kt-select-option]"));
+        var options = Array.from(this._dropdownContentElement.querySelectorAll("[data-kt-select-option]"));
         // Show all options by removing the hidden class and any inline styles
         options.forEach(function (option) {
             var _a;
@@ -12906,6 +12956,95 @@ var KTSelect = /** @class */ (function (_super) {
         // Call parent dispose to clean up data
         _super.prototype.dispose.call(this);
     };
+    /**
+     * ========================================================================
+     * DYNAMIC CONTROL METHODS
+     * ========================================================================
+     */
+    /**
+     * Programmatically enable the select component
+     * @public
+     */
+    KTSelect.prototype.enable = function () {
+        // Update config state
+        this._config.disabled = false;
+        // Remove disabled attribute from native select
+        this._element.removeAttribute('disabled');
+        this._element.classList.remove('disabled');
+        // Remove disabled state from wrapper and display elements
+        if (this._wrapperElement) {
+            this._wrapperElement.classList.remove('disabled');
+        }
+        if (this._displayElement) {
+            this._displayElement.removeAttribute('aria-disabled');
+        }
+        // Dispatch enabled event
+        this._dispatchEvent('enabled');
+        this._fireEvent('enabled');
+    };
+    /**
+     * Programmatically disable the select component
+     * @public
+     */
+    KTSelect.prototype.disable = function () {
+        // Update config state
+        this._config.disabled = true;
+        // Close dropdown if currently open
+        if (this._dropdownIsOpen) {
+            this.closeDropdown();
+        }
+        // Add disabled attribute to native select
+        this._element.setAttribute('disabled', 'disabled');
+        this._element.classList.add('disabled');
+        // Add disabled state to wrapper and display elements
+        if (this._wrapperElement) {
+            this._wrapperElement.classList.add('disabled');
+        }
+        if (this._displayElement) {
+            this._displayElement.setAttribute('aria-disabled', 'true');
+        }
+        // Dispatch disabled event
+        this._dispatchEvent('disabled');
+        this._fireEvent('disabled');
+    };
+    /**
+     * Update the dropdown to sync with native select element changes
+     * Optionally accepts new options to replace existing ones
+     * @param newOptions Optional array of new options [{value, text}, ...]
+     * @public
+     */
+    KTSelect.prototype.update = function (newOptions) {
+        var _this = this;
+        if (newOptions) {
+            // Clear existing options except placeholder
+            this._clearExistingOptions();
+            // Add new options to native select
+            newOptions.forEach(function (opt) {
+                var option = document.createElement('option');
+                option.value = opt.value;
+                option.textContent = opt.text;
+                _this._element.appendChild(option);
+            });
+        }
+        // Rebuild dropdown from native select
+        this._rebuildOptionsFromNative();
+        // Dispatch updated event
+        this._dispatchEvent('updated');
+        this._fireEvent('updated');
+    };
+    /**
+     * Refresh the visual display and state without rebuilding options
+     * @public
+     */
+    KTSelect.prototype.refresh = function () {
+        // Sync internal state from native select first
+        this._syncSelectionFromNative();
+        // Reapply ARIA attributes
+        this._setAriaAttributes();
+        // Dispatch refreshed event
+        this._dispatchEvent('refreshed');
+        this._fireEvent('refreshed');
+    };
     /**
      * ========================================================================
      * STATIC METHODS
@@ -13039,7 +13178,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Restore original options
         optionsContainer.innerHTML = this._originalOptionsHtml;
         // Update options NodeList
-        this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+        this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
         // Refresh search module
         if (this._searchModule) {
             this._searchModule.refreshAfterSearch();
@@ -13344,7 +13483,7 @@ var KTSelect = /** @class */ (function (_super) {
                     optionsContainer_1.appendChild(renderedOption);
                 });
                 // Update internal references
-                this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+                this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
             }
         }
         // Sync selection after rebuilding