@keenthemes/ktui 1.0.23 → 1.0.25

package/dist/ktui.js

@@ -2636,7 +2636,6 @@ var component_1 = __webpack_require__(2658);
 var KTImageInput = /** @class */ (function (_super) {
     __extends(KTImageInput, _super);
     function KTImageInput(element, config) {
-        if (config === void 0) { config = null; }
         var _this = _super.call(this) || this;
         _this._name = 'image-input';
         _this._defaultConfig = {
@@ -2683,8 +2682,6 @@ var KTImageInput = /** @class */ (function (_super) {
         };
         reader.readAsDataURL(this._inputElement.files[0]);
         this._selectedFile = this._inputElement.files[0];
-        this._inputElement.value = '';
-        this._hiddenElement.value = '';
         this._lastMode = 'new';
         this._element.classList.add('changed');
         this._removeElement.classList.remove('hidden');
@@ -11630,6 +11627,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTSelect = void 0;
 var data_1 = __webpack_require__(8716);
+var dom_1 = __webpack_require__(9010);
 var component_1 = __webpack_require__(2658);
 var config_1 = __webpack_require__(9386);
 var option_1 = __webpack_require__(4241);
@@ -11662,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
@@ -11696,6 +11695,31 @@ var KTSelect = /** @class */ (function (_super) {
         }
         return _this;
     }
+    /**
+     * Set global select configuration options.
+     * This allows setting default configuration that will be applied to all new KTSelect instances.
+     * @param options Partial select config to merge with global config.
+     * @example
+     * KTSelect.config({
+     *   enableSearch: true,
+     *   searchPlaceholder: 'Type to search...',
+     *   dropdownZindex: 9999,
+     *   height: 300
+     * });
+     */
+    KTSelect.config = function (options) {
+        this.globalConfig = __assign(__assign({}, this.globalConfig), options);
+    };
+    /**
+     * Override _buildConfig to include static globalConfig in the merge chain
+     */
+    KTSelect.prototype._buildConfig = function (config) {
+        if (config === void 0) { config = {}; }
+        if (!this._element)
+            return;
+        // 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()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
+    };
     /**
      * Initialize remote data fetching
      */
@@ -11750,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(); });
@@ -11806,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"));
         }
@@ -11826,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
@@ -12009,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"));
     };
@@ -12153,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
@@ -12523,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;
@@ -12736,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;
@@ -12883,17 +12956,109 @@ 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
+     * ========================================================================
+     */
     /**
      * Create instances of KTSelect for all matching elements
      */
     KTSelect.createInstances = function () {
-        var _this = this;
         var elements = document.querySelectorAll('[data-kt-select]');
         elements.forEach(function (element) {
             if (element.hasAttribute('data-kt-select') &&
                 !element.classList.contains('data-kt-select-initialized')) {
-                var instance = new KTSelect(element);
-                _this._instances.set(element, instance);
+                new KTSelect(element);
             }
         });
     };
@@ -12903,6 +13068,26 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.init = function () {
         KTSelect.createInstances();
     };
+    /**
+     * Get an existing KTSelect instance from an element
+     */
+    KTSelect.getInstance = function (element) {
+        if (!element)
+            return null;
+        if (data_1.default.has(element, 'select')) {
+            return data_1.default.get(element, 'select');
+        }
+        if (element.getAttribute('data-kt-select')) {
+            return new KTSelect(element);
+        }
+        return null;
+    };
+    /**
+     * Get an existing KTSelect instance or create a new one
+     */
+    KTSelect.getOrCreateInstance = function (element, config) {
+        return this.getInstance(element) || new KTSelect(element, config);
+    };
     /**
      * Handle remote search
      * @param event Input event
@@ -12993,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();
@@ -13022,13 +13207,40 @@ var KTSelect = /** @class */ (function (_super) {
             optionsContainer.appendChild(noResultsElement);
             return;
         }
-        // Use unified renderer for search results
-        this._renderOptionsInDropdown(items, true);
+        // First update the original select element with search results
+        this._updateOriginalSelectWithSearchResults(items);
+        // Then update dropdown using the standard flow
+        this._updateDropdownWithNewOptions();
         // Add pagination "Load More" button if needed
         if (this._config.pagination && this._remoteModule.hasMorePages()) {
             this._addLoadMoreButton();
         }
     };
+    /**
+     * Update original select element with search results
+     * @param items Search result items
+     */
+    KTSelect.prototype._updateOriginalSelectWithSearchResults = function (items) {
+        var _this = this;
+        // Clear existing options except placeholder
+        this._clearExistingOptions();
+        // Add search result items to original select element
+        items.forEach(function (item) {
+            var optionElement = document.createElement('option');
+            optionElement.value = item.id || '';
+            optionElement.textContent = item.title || '';
+            if (item.selected) {
+                optionElement.setAttribute('selected', 'selected');
+            }
+            if (item.disabled) {
+                optionElement.setAttribute('disabled', 'disabled');
+            }
+            _this._element.appendChild(optionElement);
+        });
+        if (this._config.debug) {
+            console.log("Updated original select with ".concat(items.length, " search results"));
+        }
+    };
     /**
      * Check if dropdown is open
      */
@@ -13271,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
@@ -13337,12 +13549,8 @@ var KTSelect = /** @class */ (function (_super) {
             ? this._config.clearAllText
             : this._config.selectAllText;
     };
-    /**
-     * ========================================================================
-     * STATIC METHODS
-     * ========================================================================
-     */
-    KTSelect._instances = new Map();
+    // Static global configuration
+    KTSelect.globalConfig = {};
     return KTSelect;
 }(component_1.default));
 exports.KTSelect = KTSelect;