@keenthemes/ktui 1.0.20 → 1.0.21

package/dist/ktui.js

@@ -2507,12 +2507,14 @@ var KTComponent = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         callbacks = this._events.get(eventType);
-                        if ((callbacks instanceof Map) == false) {
+                        if (callbacks instanceof Map == false) {
                             return [2 /*return*/];
                         }
-                        return [4 /*yield*/, Promise.all(Array.from(callbacks.values()).filter(function (callable) {
+                        return [4 /*yield*/, Promise.all(Array.from(callbacks.values())
+                                .filter(function (callable) {
                                 return typeof callable === 'function';
-                            }).map(function (callable) {
+                            })
+                                .map(function (callable) {
                                 return Promise.resolve(callable(payload));
                             }))];
                     case 1:
@@ -2641,6 +2643,7 @@ var KTImageInput = /** @class */ (function (_super) {
             hiddenClass: 'hidden',
         };
         _this._previewUrl = '';
+        _this._selectedFile = null;
         if (data_1.default.has(element, _this._name))
             return _this;
         _this._init(element);
@@ -2679,6 +2682,7 @@ var KTImageInput = /** @class */ (function (_super) {
             _this._previewElement.style.backgroundImage = "url(".concat(reader.result, ")");
         };
         reader.readAsDataURL(this._inputElement.files[0]);
+        this._selectedFile = this._inputElement.files[0];
         this._inputElement.value = '';
         this._hiddenElement.value = '';
         this._lastMode = 'new';
@@ -2709,6 +2713,7 @@ var KTImageInput = /** @class */ (function (_super) {
             }
             this._inputElement.value = '';
             this._hiddenElement.value = '';
+            this._selectedFile = null;
             this._lastMode = 'saved';
         }
         else if (this._lastMode == 'saved') {
@@ -2718,6 +2723,7 @@ var KTImageInput = /** @class */ (function (_super) {
             this._element.classList.add('empty');
             this._hiddenElement.value = '1';
             this._inputElement.value = '';
+            this._selectedFile = null;
             this._lastMode = 'placeholder';
         }
         else if (this._lastMode == 'placeholder') {
@@ -2731,6 +2737,7 @@ var KTImageInput = /** @class */ (function (_super) {
             }
             this._inputElement.value = '';
             this._hiddenElement.value = '';
+            this._selectedFile = null;
             this._lastMode = 'saved';
         }
         this._fireEvent('remove');
@@ -2755,10 +2762,10 @@ var KTImageInput = /** @class */ (function (_super) {
         this._previewUrl = url.replace(/(url\(|\)|")/g, '');
     };
     KTImageInput.prototype.isEmpty = function () {
-        return this._inputElement.value.length === 0;
+        return this._selectedFile === null;
     };
     KTImageInput.prototype.isChanged = function () {
-        return this._inputElement.value.length > 0;
+        return this._selectedFile !== null;
     };
     KTImageInput.prototype.remove = function () {
         this._remove();
@@ -2772,6 +2779,9 @@ var KTImageInput = /** @class */ (function (_super) {
     KTImageInput.prototype.getPreviewUrl = function () {
         return this._getPreviewUrl();
     };
+    KTImageInput.prototype.getSelectedFile = function () {
+        return this._selectedFile;
+    };
     KTImageInput.getInstance = function (element) {
         if (!element)
             return null;
@@ -2845,7 +2855,10 @@ var KTSticky = /** @class */ (function (_super) {
             name: '',
             class: '',
             top: '',
+            middle: false,
+            bottom: '',
             start: '',
+            center: false,
             end: '',
             width: '',
             zindex: '',
@@ -2988,7 +3001,10 @@ var KTSticky = /** @class */ (function (_super) {
             return false;
         var width = this._getOption('width');
         var top = this._getOption('top');
+        var middle = this._getOption('middle');
+        var bottom = this._getOption('bottom');
         var start = this._getOption('start');
+        var center = this._getOption('center');
         var end = this._getOption('end');
         var height = this._calculateHeight();
         var zindex = this._getOption('zindex');
@@ -3006,29 +3022,56 @@ var KTSticky = /** @class */ (function (_super) {
             }
             this._element.style.width = "".concat(Math.round(parseFloat(width)), "px");
         }
-        if (top) {
-            this._element.style.top = "".concat(top, "px");
+        if (middle === true) {
+            this._element.style.insetBlockStart = "50%";
         }
-        if (start) {
-            if (start === 'auto') {
-                var offsetLeft = dom_1.default.offset(this._element).left;
-                if (offsetLeft >= 0) {
-                    this._element.style.insetInlineStart = "".concat(offsetLeft, "px");
+        else {
+            if (top) {
+                if (top === 'auto') {
+                    this._element.style.insetBlockStart = "0px";
+                }
+                else {
+                    this._element.style.insetBlockStart = "".concat(top, "px");
                 }
             }
             else {
-                this._element.style.insetInlineStart = "".concat(start, "px");
+                if (bottom) {
+                    if (bottom === 'auto') {
+                        this._element.style.insetBlockEnd = "0px";
+                    }
+                    else {
+                        this._element.style.insetBlockEnd = "".concat(bottom, "px");
+                    }
+                }
             }
         }
-        if (end) {
-            if (end === 'auto') {
-                var offseRight = dom_1.default.offset(this._element).right;
-                if (offseRight >= 0) {
-                    this._element.style.insetInlineEnd = "".concat(offseRight, "px");
+        if (center === true) {
+            this._element.style.insetInlineStart = "50%";
+        }
+        else {
+            if (start) {
+                if (start === 'auto') {
+                    var offsetLeft = dom_1.default.offset(this._element).left;
+                    if (offsetLeft >= 0) {
+                        this._element.style.insetInlineStart = "".concat(offsetLeft, "px");
+                    }
+                }
+                else {
+                    this._element.style.insetInlineStart = "".concat(start, "px");
                 }
             }
             else {
-                this._element.style.insetInlineEnd = "".concat(end, "px");
+                if (end) {
+                    if (end === 'auto') {
+                        var offsetRight = dom_1.default.offset(this._element).right;
+                        if (offsetRight >= 0) {
+                            this._element.style.insetInlineEnd = "".concat(offsetRight, "px");
+                        }
+                    }
+                    else {
+                        this._element.style.insetInlineEnd = "".concat(end, "px");
+                    }
+                }
             }
         }
         if (zindex) {
@@ -3049,6 +3092,11 @@ var KTSticky = /** @class */ (function (_super) {
         if (!this._element)
             return;
         this._element.style.top = '';
+        this._element.style.bottom = '';
+        this._element.style.insetInlineStart = '';
+        this._element.style.insetInlineEnd = '';
+        this._element.style.insetBlockStart = '';
+        this._element.style.insetBlockEnd = '';
         this._element.style.width = '';
         this._element.style.left = '';
         this._element.style.right = '';
@@ -3370,11 +3418,9 @@ var KTSelectRemote = /** @class */ (function () {
             console.log("Mapping fields: value=".concat(valueField, ", label=").concat(labelField));
         if (this._config.debug)
             console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
-        // Extract values using dot notation if needed
+        // Extract values using improved getValue function
         var getValue = function (obj, path) {
-            if (!path)
-                return null;
-            if (!obj)
+            if (!path || !obj)
                 return null;
             try {
                 // Handle dot notation to access nested properties
@@ -3403,65 +3449,67 @@ var KTSelectRemote = /** @class */ (function () {
                 return null;
             }
         };
-        // Try to get a usable ID, with fallbacks
+        // Get ID and ensure it's a string
         var id = getValue(item, valueField);
-        // Ensure id is always a proper string
         if (id === null || id === undefined) {
-            // If no ID found, check for id.value or item.id as fallbacks
-            if (item.id &&
-                typeof item.id === 'object' &&
-                'value' in item.id &&
-                item.id.value) {
-                id = String(item.id.value);
-                if (this._config.debug)
-                    console.log("Using id.value as fallback: ".concat(id));
-            }
-            else if (item.id) {
-                id = String(item.id);
-                if (this._config.debug)
-                    console.log("Using direct item.id as fallback: ".concat(id));
-            }
-            else {
-                // If no ID found at all, use the title instead (will be extracted below)
-                if (this._config.debug)
-                    console.log("No ID found, will use title as fallback");
-                id = null;
+            // Try common fallback fields for ID
+            var fallbackFields = ['id', 'value', 'key', 'pk'];
+            for (var _i = 0, fallbackFields_1 = fallbackFields; _i < fallbackFields_1.length; _i++) {
+                var field = fallbackFields_1[_i];
+                if (item[field] !== null && item[field] !== undefined) {
+                    id = String(item[field]);
+                    if (this._config.debug)
+                        console.log("Using fallback field '".concat(field, "' for ID: ").concat(id));
+                    break;
+                }
             }
         }
-        else if (typeof id === 'object') {
-            // If ID is an object, log the issue and set to null to use title fallback
-            console.warn("ID for path ".concat(valueField, " is an object, will use title fallback instead"));
-            id = null;
-        }
         else {
-            // Otherwise, ensure it's a string
             id = String(id);
+        }
+        // If still no ID, generate one
+        if (!id) {
+            id = "option-".concat(Math.random().toString(36).substr(2, 9));
             if (this._config.debug)
-                console.log("Final ID value: ".concat(id));
+                console.log("Generated fallback ID: ".concat(id));
         }
-        // Try to get a usable title, with fallbacks
+        // Get label with proper fallbacks
         var title = getValue(item, labelField);
-        title = title !== null ? String(title) : '';
-        if (this._config.debug)
-            console.log("Title/label field [".concat(labelField, "]:"), title);
-        // If title is still empty, try common field names
         if (!title) {
-            // Try common field names if the configured one doesn't work
-            if (item.name)
-                title = String(item.name);
-            else if (item.title)
-                title = String(item.title);
-            else if (item.label)
-                title = String(item.label);
-            else if (item.text)
-                title = String(item.text);
+            // Try common fallback fields for title
+            var fallbackFields = [
+                'name',
+                'title',
+                'label',
+                'text',
+                'displayName',
+                'description',
+            ];
+            for (var _a = 0, fallbackFields_2 = fallbackFields; _a < fallbackFields_2.length; _a++) {
+                var field = fallbackFields_2[_a];
+                if (item[field] !== null && item[field] !== undefined) {
+                    title = String(item[field]);
+                    if (this._config.debug)
+                        console.log("Using fallback field '".concat(field, "' for title: ").concat(title));
+                    break;
+                }
+            }
+        }
+        else {
+            title = String(title);
+        }
+        // If still no title, use ID as fallback
+        if (!title) {
+            title = "Option ".concat(id);
             if (this._config.debug)
-                console.log('After fallback checks, title:', title);
+                console.log("Using ID as fallback title: ".concat(title));
         }
-        // Create the option object with non-empty values
+        // Create the option object with consistent structure
         var result = {
-            id: id || title || 'id-' + Math.random().toString(36).substr(2, 9), // Ensure we always have an ID
-            title: title || 'Unnamed option',
+            id: id,
+            title: title,
+            selected: Boolean(item.selected),
+            disabled: Boolean(item.disabled),
         };
         if (this._config.debug)
             console.log('Final mapped item:', JSON.stringify(result));
@@ -5783,7 +5831,8 @@ var KTSelectOption = /** @class */ (function (_super) {
         // Ensure optionsConfig is initialized
         if (_this._globalConfig) {
             _this._globalConfig.optionsConfig = _this._globalConfig.optionsConfig || {};
-            _this._globalConfig.optionsConfig[element.value] = _this._config;
+            _this._globalConfig.optionsConfig[element.value] =
+                _this._config;
             // console.log('[KTSelectOption] Populating _globalConfig.optionsConfig for value', (element as HTMLInputElement).value, 'with:', JSON.parse(JSON.stringify(this._config)));
             // console.log('[KTSelectOption] _globalConfig.optionsConfig is now:', JSON.parse(JSON.stringify(this._globalConfig.optionsConfig)));
         }
@@ -6600,6 +6649,10 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
             // If the sort class is not found, it's not a sortable column
             if (!header.querySelector(".".concat((_b = (_a = config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base)))
                 return;
+            // Check if sorting is disabled for this column
+            var sortDisabled = header.getAttribute('data-kt-datatable-column-sort') === 'false';
+            if (sortDisabled)
+                return;
             var sortAttribute = header.getAttribute('data-kt-datatable-column-sort') ||
                 header.getAttribute('data-kt-datatable-column');
             var sortField = sortAttribute
@@ -6686,7 +6739,8 @@ var KTSelectCombobox = /** @class */ (function () {
      */
     KTSelectCombobox.prototype._attachEventListeners = function () {
         this._removeEventListeners();
-        if (this._searchInputElement) { // Ensure element exists
+        if (this._searchInputElement) {
+            // Ensure element exists
             this._searchInputElement.addEventListener('input', this._boundInputHandler);
         }
         if (this._clearButtonElement) {
@@ -6711,7 +6765,8 @@ var KTSelectCombobox = /** @class */ (function () {
         var inputElement = event.target;
         var query = inputElement.value;
         this._toggleClearButtonVisibility(query);
-        if (!this._select.isDropdownOpen()) { // Use public getter
+        if (!this._select.isDropdownOpen()) {
+            // Use public getter
             this._select.openDropdown();
         }
         // For single select without displayTemplate, if user types, they are essentially clearing the previous selection text
@@ -6750,7 +6805,9 @@ var KTSelectCombobox = /** @class */ (function () {
         if (!this._clearButtonElement)
             return;
         var hasSelectedItems = this._select.getSelectedOptions().length > 0;
-        if (inputValue.length > 0 || (hasSelectedItems && (this._config.multiple || this._config.displayTemplate))) {
+        if (inputValue.length > 0 ||
+            (hasSelectedItems &&
+                (this._config.multiple || this._config.displayTemplate))) {
             this._clearButtonElement.classList.remove('hidden');
         }
         else {
@@ -6782,41 +6839,67 @@ var KTSelectCombobox = /** @class */ (function () {
         if (this._valuesContainerElement) {
             this._valuesContainerElement.innerHTML = '';
         }
-        if (this._config.tags && this._valuesContainerElement) { // Combobox + Tags
+        if (this._config.tags && this._valuesContainerElement) {
+            // Combobox + Tags
             selectedOptions.forEach(function (value) {
                 // Ensure value is properly escaped for querySelector
-                var optionElement = _this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+                var optionElement = _this._select
+                    .getElement()
+                    .querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
                 if (optionElement) {
                     var tagElement = templates_1.defaultTemplates.tag(optionElement, _this._config);
                     _this._valuesContainerElement.appendChild(tagElement);
                 }
             });
             this._searchInputElement.value = ''; // Input field is for typing new searches
-            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
-        }
-        else if (this._config.displayTemplate && this._valuesContainerElement) { // Combobox + DisplayTemplate (no tags)
-            this._valuesContainerElement.innerHTML = this._select.renderDisplayTemplateForSelected(selectedOptions);
+            this._searchInputElement.placeholder =
+                selectedOptions.length > 0
+                    ? ''
+                    : this._config.placeholder || 'Select...';
+        }
+        else if (this._config.displayTemplate && this._valuesContainerElement) {
+            // Combobox + DisplayTemplate (no tags)
+            this._valuesContainerElement.innerHTML =
+                this._select.renderDisplayTemplateForSelected(selectedOptions);
             this._searchInputElement.value = ''; // Input field is for typing new searches
-            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+            this._searchInputElement.placeholder =
+                selectedOptions.length > 0
+                    ? ''
+                    : this._config.placeholder || 'Select...';
         }
-        else if (this._config.multiple && this._valuesContainerElement) { // Combobox + Multiple (no tags, no display template)
+        else if (this._config.multiple && this._valuesContainerElement) {
+            // Combobox + Multiple (no tags, no display template)
             // For simplicity, join text. A proper tag implementation would be more complex here.
-            this._valuesContainerElement.innerHTML = selectedOptions.map(function (value) {
-                var optionEl = _this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+            this._valuesContainerElement.innerHTML = selectedOptions
+                .map(function (value) {
+                var optionEl = _this._select
+                    .getElement()
+                    .querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
                 return optionEl ? optionEl.textContent : '';
-            }).join(', '); // Basic comma separation
+            })
+                .join(', '); // Basic comma separation
             this._searchInputElement.value = '';
-            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+            this._searchInputElement.placeholder =
+                selectedOptions.length > 0
+                    ? ''
+                    : this._config.placeholder || 'Select...';
         }
-        else if (!this._config.multiple && selectedOptions.length > 0) { // Single select combobox: display selected option's text in the input
+        else if (!this._config.multiple && selectedOptions.length > 0) {
+            // Single select combobox: display selected option's text in the input
             var selectedValue = selectedOptions[0];
-            var optionElement = this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(selectedValue), "\"]"));
-            this._searchInputElement.value = optionElement ? optionElement.textContent || '' : '';
+            var optionElement = this._select
+                .getElement()
+                .querySelector("option[value=\"".concat(CSS.escape(selectedValue), "\"]"));
+            this._searchInputElement.value = optionElement
+                ? optionElement.textContent || ''
+                : '';
             // placeholder is implicitly handled by input value for single select
         }
-        else { // No selection or not fitting above categories (e.g. single select, no items)
+        else {
+            // No selection or not fitting above categories (e.g. single select, no items)
             this._searchInputElement.value = '';
-            this._searchInputElement.placeholder = this._config.placeholder || 'Select...';
+            this._searchInputElement.placeholder =
+                this._config.placeholder || 'Select...';
             // _valuesContainerElement is already cleared if it exists
         }
         this._toggleClearButtonVisibility(this._searchInputElement.value);
@@ -8065,7 +8148,11 @@ var KTDataTable = /** @class */ (function (_super) {
         // Set search value
         if (searchElement) {
             searchElement.value =
-                search === undefined || search === null ? '' : typeof search === 'string' ? search : String(search);
+                search === undefined || search === null
+                    ? ''
+                    : typeof search === 'string'
+                        ? search
+                        : String(search);
         }
         if (searchElement) {
             // Check if a debounced search function already exists
@@ -8472,7 +8559,8 @@ var KTDataTable = /** @class */ (function (_super) {
                     }
                     if (typeof columnDef.render === 'function') {
                         var result = columnDef.render.call(_this, item[key], item, _this);
-                        if (result instanceof HTMLElement || result instanceof DocumentFragment) {
+                        if (result instanceof HTMLElement ||
+                            result instanceof DocumentFragment) {
                             td.appendChild(result);
                         }
                         else if (typeof result === 'string') {
@@ -8818,7 +8906,8 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         // --- 4. Dispose of handler objects (checkbox, sort) ---
         // KTDataTableCheckboxAPI does not have a dispose method, but we can remove header checkbox listener
-        if (this._checkbox && typeof this._checkbox.dispose === 'function') {
+        if (this._checkbox &&
+            typeof this._checkbox.dispose === 'function') {
             this._checkbox.dispose();
         }
         else {
@@ -9654,13 +9743,15 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         var currentDropdownZIndexStr = dom_1.default.getCssProp(this._dropdownElement, 'z-index');
         if (currentDropdownZIndexStr && currentDropdownZIndexStr !== 'auto') {
             var currentDropdownZIndex = parseInt(currentDropdownZIndexStr);
-            if (!isNaN(currentDropdownZIndex) && currentDropdownZIndex > (zIndexToApply || 0)) {
+            if (!isNaN(currentDropdownZIndex) &&
+                currentDropdownZIndex > (zIndexToApply || 0)) {
                 zIndexToApply = currentDropdownZIndex;
             }
         }
         // Ensure dropdown is above elements within its original toggle's parent context
         var toggleParentContextZindex = dom_1.default.getHighestZindex(this._element); // _element is the select wrapper
-        if (toggleParentContextZindex !== null && toggleParentContextZindex >= (zIndexToApply || 0)) {
+        if (toggleParentContextZindex !== null &&
+            toggleParentContextZindex >= (zIndexToApply || 0)) {
             zIndexToApply = toggleParentContextZindex + 1;
         }
         if (zIndexToApply !== null) {
@@ -10138,7 +10229,9 @@ var KTSelectSearch = /** @class */ (function () {
                     });
                 }
                 // Listen for dropdown close to reset options - ATTACH TO WRAPPER
-                this._select.getWrapperElement().addEventListener('dropdown.close', function () {
+                this._select
+                    .getWrapperElement()
+                    .addEventListener('dropdown.close', function () {
                     _this._focusManager.resetFocus();
                     // If clearSearchOnClose is false and there's a value, the search term and filtered state should persist.
                     // KTSelect's closeDropdown method already calls this._searchModule.clearSearch() (which clears highlights)
@@ -10160,7 +10253,9 @@ var KTSelectSearch = /** @class */ (function () {
                     }
                 });
                 // Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
-                this._select.getWrapperElement().addEventListener('dropdown.show', function () {
+                this._select
+                    .getWrapperElement()
+                    .addEventListener('dropdown.show', function () {
                     var _a;
                     _this._focusManager.resetFocus(); // Always clear previous focus state
                     if ((_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.value) {
@@ -10321,9 +10416,7 @@ var KTSelectSearch = /** @class */ (function () {
         }
         // Restore original content before filtering, so highlighting is applied fresh.
         this._restoreOptionContentsBeforeFilter();
-        var visibleCount = (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (count) {
-            return _this._handleNoResults(count);
-        });
+        var visibleCount = (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (count) { return _this._handleNoResults(count); });
         this._select.updateSelectAllButtonState();
     };
     /**
@@ -11556,6 +11649,8 @@ 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;
@@ -11609,6 +11704,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
@@ -11627,7 +11726,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();
@@ -11651,6 +11753,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)
      */
@@ -11867,13 +12071,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);
             }
@@ -11893,7 +12103,7 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // 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
@@ -11920,13 +12130,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]");
@@ -11935,6 +12150,8 @@ var KTSelect = /** @class */ (function (_super) {
             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]");
     };
     /**
@@ -11946,7 +12163,8 @@ var KTSelect = /** @class */ (function (_super) {
         // Dropdown option click events
         this._eventManager.addListener(this._dropdownContentElement, 'click', this._handleDropdownOptionClick.bind(this));
         if (this._selectAllButton) {
-            this._selectAllButtonToggle = this._selectAllButton.querySelector('button');
+            this._selectAllButtonToggle =
+                this._selectAllButton.querySelector('button');
             if (this._selectAllButtonToggle) {
                 this._eventManager.addListener(this._selectAllButtonToggle, 'click', this._handleSelectAllClick.bind(this));
             }
@@ -12691,6 +12909,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
@@ -12745,7 +12965,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
@@ -12754,31 +13003,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
@@ -12790,10 +13032,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);
     };
     /**
@@ -12801,7 +13045,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);
@@ -12823,9 +13069,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.
@@ -12839,7 +13090,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) {
@@ -12888,7 +13142,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();
@@ -12929,7 +13185,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 '';
@@ -12938,7 +13195,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));
                 }
             });
@@ -12947,7 +13204,8 @@ var KTSelect = /** @class */ (function (_super) {
                 selectedTexts: _this.getSelectedOptionsText() || '',
                 text: text,
             });
-        }).filter(Boolean)));
+        })
+            .filter(Boolean)));
         return contentArray.join(displaySeparator);
     };
     KTSelect.prototype.getDisplayElement = function () {
@@ -12966,7 +13224,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;
                     }
@@ -14978,7 +15237,9 @@ var KTSelectTags = /** @class */ (function () {
                 }
             }
             if (!optionElement) {
-                var originalOptions = _this._select.getElement().querySelectorAll('option');
+                var originalOptions = _this._select
+                    .getElement()
+                    .querySelectorAll('option');
                 for (var _b = 0, _c = Array.from(originalOptions); _b < _c.length; _b++) {
                     var opt = _c[_b];
                     if (opt.value === optionValue) {
@@ -15938,7 +16199,9 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
     for (var _a = 0, options_2 = options; _a < options_2.length; _a++) {
         var option = options_2[_a];
         // Use data-text for matching if available, otherwise fall back to textContent
-        var optionText = (option.dataset.text || option.textContent || '').toLowerCase();
+        var optionText = (option.dataset.text ||
+            option.textContent ||
+            '').toLowerCase();
         var isMatch = optionText.includes(queryLower);
         if (isMatch) {
             option.classList.remove('hidden');
@@ -16015,7 +16278,8 @@ var FocusManager = /** @class */ (function () {
             return null;
         for (var i = 0; i < options.length; i++) {
             var option = options[i];
-            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+            if (!option.classList.contains('disabled') &&
+                option.getAttribute('aria-disabled') !== 'true') {
                 this.resetFocus();
                 this._focusedOptionIndex = i;
                 this.applyFocus(option);
@@ -16034,7 +16298,8 @@ var FocusManager = /** @class */ (function () {
             return null;
         for (var i = options.length - 1; i >= 0; i--) {
             var option = options[i];
-            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+            if (!option.classList.contains('disabled') &&
+                option.getAttribute('aria-disabled') !== 'true') {
                 this.resetFocus();
                 this._focusedOptionIndex = i;
                 this.applyFocus(option);
@@ -16059,7 +16324,8 @@ var FocusManager = /** @class */ (function () {
             var option = options[idx];
             if (!option.classList.contains('disabled') &&
                 option.getAttribute('aria-disabled') !== 'true' &&
-                (((_b = option.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase().startsWith(lowerStr)) || ((_c = option.dataset.value) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith(lowerStr)))) {
+                (((_b = option.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase().startsWith(lowerStr)) ||
+                    ((_c = option.dataset.value) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith(lowerStr)))) {
                 this.resetFocus();
                 this._focusedOptionIndex = idx;
                 this.applyFocus(option);
@@ -16076,11 +16342,14 @@ var FocusManager = /** @class */ (function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        var idx = this._focusedOptionIndex === null ? 0 : (this._focusedOptionIndex + 1) % options.length;
+        var idx = this._focusedOptionIndex === null
+            ? 0
+            : (this._focusedOptionIndex + 1) % options.length;
         var startIdx = idx;
         do {
             var option = options[idx];
-            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+            if (!option.classList.contains('disabled') &&
+                option.getAttribute('aria-disabled') !== 'true') {
                 this.resetFocus();
                 this._focusedOptionIndex = idx;
                 this.applyFocus(option);
@@ -16098,11 +16367,14 @@ var FocusManager = /** @class */ (function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        var idx = this._focusedOptionIndex === null ? options.length - 1 : (this._focusedOptionIndex - 1 + options.length) % options.length;
+        var idx = this._focusedOptionIndex === null
+            ? options.length - 1
+            : (this._focusedOptionIndex - 1 + options.length) % options.length;
         var startIdx = idx;
         do {
             var option = options[idx];
-            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+            if (!option.classList.contains('disabled') &&
+                option.getAttribute('aria-disabled') !== 'true') {
                 this.resetFocus();
                 this._focusedOptionIndex = idx;
                 this.applyFocus(option);
@@ -16120,7 +16392,8 @@ var FocusManager = /** @class */ (function () {
         if (!option)
             return;
         // Ensure it's not disabled
-        if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
+        if (option.classList.contains('disabled') ||
+            option.getAttribute('aria-disabled') === 'true') {
             return;
         }
         // DO NOT CALL resetFocus() here. Caller's responsibility.
@@ -16169,7 +16442,8 @@ var FocusManager = /** @class */ (function () {
         var index = options.findIndex(function (option) { return option.dataset.value === value; });
         if (index >= 0) {
             var optionToFocus = options[index];
-            if (!optionToFocus.classList.contains('disabled') && optionToFocus.getAttribute('aria-disabled') !== 'true') {
+            if (!optionToFocus.classList.contains('disabled') &&
+                optionToFocus.getAttribute('aria-disabled') !== 'true') {
                 this.resetFocus();
                 this._focusedOptionIndex = index;
                 this.applyFocus(optionToFocus);