@keenthemes/ktui 1.0.22 → 1.0.24

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);
@@ -11696,6 +11694,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
      */
@@ -12492,8 +12515,10 @@ var KTSelect = /** @class */ (function (_super) {
                 // 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 = '';
+                    // Completely clear all content to avoid redundancy with tags
+                    // Don't touch the innerHTML here as tags module manages it
+                    // Just ensure no text content is generated
+                    return; // Exit early to prevent any text generation
                 }
                 else {
                     // Tags are not enabled AND options are selected: render normal text display.
@@ -12562,6 +12587,10 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype.clearSelection = function () {
         // Clear the current selection
         this._state.setSelectedOptions([]);
+        // Clear all native select options
+        Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
+            opt.selected = false;
+        });
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
         // Update select all button state
@@ -12877,17 +12906,20 @@ var KTSelect = /** @class */ (function (_super) {
         // Call parent dispose to clean up data
         _super.prototype.dispose.call(this);
     };
+    /**
+     * ========================================================================
+     * 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);
             }
         });
     };
@@ -12897,6 +12929,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
@@ -13016,13 +13068,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
      */
@@ -13331,12 +13410,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;
@@ -15219,12 +15294,16 @@ var KTSelectTags = /** @class */ (function () {
         var wrapper = this._valueDisplayElement.parentElement;
         if (!wrapper)
             return;
-        // Remove all previous tags
-        Array.from(wrapper.querySelectorAll('[data-kt-select-tag]')).forEach(function (tag) { return tag.remove(); });
-        // If no options selected, do nothing (let display show placeholder)
+        // If no options selected, ensure placeholder is shown
         if (selectedOptions.length === 0) {
+            // Clear any existing content and show placeholder
+            this._valueDisplayElement.innerHTML = '';
+            var placeholderEl = templates_1.defaultTemplates.placeholder(this._config);
+            this._valueDisplayElement.appendChild(placeholderEl);
             return;
         }
+        // Clear all existing content before adding tags
+        this._valueDisplayElement.innerHTML = '';
         // Insert each tag before the display element
         selectedOptions.forEach(function (optionValue) {
             // Find the original option element (in dropdown or select)
@@ -15258,8 +15337,8 @@ var KTSelectTags = /** @class */ (function () {
                     _this._removeTag(optionValue);
                 });
             }
-            // Insert tag before the display element
-            wrapper.insertBefore(tag, _this._valueDisplayElement);
+            // Insert tag inside the display element
+            _this._valueDisplayElement.appendChild(tag);
         });
     };
     /**
@@ -16900,7 +16979,7 @@ exports.defaultTemplates = {
     tag: function (option, config) {
         var _a;
         var template = getTemplateStrings(config).tag;
-        var preparedContent = option.title; // Default content is the option's title
+        var preparedContent = option.textContent || option.innerText || option.value || ''; // Default content is the option's text
         if (config.tagTemplate) {
             var tagTemplateString_1 = config.tagTemplate;
             var optionValue = option.getAttribute('data-value') || option.value;