@keenthemes/ktui 1.0.19 → 1.0.21

package/dist/ktui.js

@@ -568,6 +568,42 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTStepper = void 0;
 var data_1 = __webpack_require__(8716);
@@ -677,18 +713,29 @@ var KTStepper = /** @class */ (function (_super) {
         return elements;
     };
     KTStepper.prototype._go = function (step) {
-        if (step === this._activeStep || step > this._getTotalSteps() || step < 0)
-            return;
-        var payload = { step: step, cancel: false };
-        this._fireEvent('change', payload);
-        this._dispatchEvent('change', payload);
-        if (payload.cancel === true) {
-            return;
-        }
-        this._activeStep = step;
-        this._update();
-        this._fireEvent('changed');
-        this._dispatchEvent('changed');
+        return __awaiter(this, void 0, void 0, function () {
+            var payload;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (step === this._activeStep || step > this._getTotalSteps() || step < 0)
+                            return [2 /*return*/];
+                        payload = { step: step, cancel: false };
+                        return [4 /*yield*/, this._fireEvent('change', payload)];
+                    case 1:
+                        _a.sent();
+                        this._dispatchEvent('change', payload);
+                        if (payload.cancel === true) {
+                            return [2 /*return*/];
+                        }
+                        this._activeStep = step;
+                        this._update();
+                        this._fireEvent('changed');
+                        this._dispatchEvent('changed');
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     KTStepper.prototype._goTo = function (itemElement) {
         var step = this._getStep(itemElement);
@@ -2395,6 +2442,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var data_1 = __webpack_require__(8716);
 var dom_1 = __webpack_require__(9010);
@@ -2416,11 +2499,29 @@ var KTComponent = /** @class */ (function () {
         this._element.setAttribute("data-kt-".concat(this._name, "-initialized"), 'true');
         data_1.default.set(this._element, this._name, this);
     };
-    KTComponent.prototype._fireEvent = function (eventType, payload) {
-        var _a;
-        if (payload === void 0) { payload = null; }
-        (_a = this._events.get(eventType)) === null || _a === void 0 ? void 0 : _a.forEach(function (callable) {
-            callable(payload);
+    KTComponent.prototype._fireEvent = function (eventType_1) {
+        return __awaiter(this, arguments, void 0, function (eventType, payload) {
+            var callbacks;
+            if (payload === void 0) { payload = null; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        callbacks = this._events.get(eventType);
+                        if (callbacks instanceof Map == false) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, Promise.all(Array.from(callbacks.values())
+                                .filter(function (callable) {
+                                return typeof callable === 'function';
+                            })
+                                .map(function (callable) {
+                                return Promise.resolve(callable(payload));
+                            }))];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
         });
     };
     KTComponent.prototype._dispatchEvent = function (eventType, payload) {
@@ -2542,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);
@@ -2580,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';
@@ -2610,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') {
@@ -2619,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') {
@@ -2632,6 +2737,7 @@ var KTImageInput = /** @class */ (function (_super) {
             }
             this._inputElement.value = '';
             this._hiddenElement.value = '';
+            this._selectedFile = null;
             this._lastMode = 'saved';
         }
         this._fireEvent('remove');
@@ -2656,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();
@@ -2673,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;
@@ -2746,7 +2855,10 @@ var KTSticky = /** @class */ (function (_super) {
             name: '',
             class: '',
             top: '',
+            middle: false,
+            bottom: '',
             start: '',
+            center: false,
             end: '',
             width: '',
             zindex: '',
@@ -2889,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');
@@ -2907,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) {
@@ -2950,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 = '';
@@ -3271,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
@@ -3304,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));
@@ -5684,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)));
         }
@@ -6501,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
@@ -6587,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) {
@@ -6612,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
@@ -6651,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 {
@@ -6683,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);
@@ -7587,6 +7769,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDataTable = void 0;
+exports.initAllDataTables = initAllDataTables;
 var component_1 = __webpack_require__(2658);
 var utils_1 = __webpack_require__(2599);
 var index_1 = __webpack_require__(8156);
@@ -7965,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
@@ -8372,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') {
@@ -8693,8 +8881,62 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         return id;
     };
+    /**
+     * Clean up all event listeners, handlers, and DOM nodes created by this instance.
+     * This method is called before re-rendering or when disposing the component.
+     */
     KTDataTable.prototype._dispose = function () {
-        // Remove all event listeners and clean up resources
+        // --- 1. Remove search input event listener (debounced) ---
+        var tableId = this._tableId();
+        var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
+        if (searchElement && searchElement._debouncedSearch) {
+            searchElement.removeEventListener('keyup', searchElement._debouncedSearch);
+            delete searchElement._debouncedSearch;
+        }
+        // --- 2. Remove page size dropdown event listener ---
+        if (this._sizeElement && this._sizeElement.onchange) {
+            this._sizeElement.onchange = null;
+        }
+        // --- 3. Remove all pagination button event listeners ---
+        if (this._paginationElement) {
+            // Remove all child nodes (buttons) to ensure no lingering listeners
+            while (this._paginationElement.firstChild) {
+                this._paginationElement.removeChild(this._paginationElement.firstChild);
+            }
+        }
+        // --- 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') {
+            this._checkbox.dispose();
+        }
+        else {
+            // Remove header checkbox event listener if possible
+            var headerCheckElement = this._element.querySelector(this._config.attributes.check);
+            if (headerCheckElement) {
+                headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
+            }
+        }
+        // KTDataTableSortAPI does not have a dispose method, but we can remove th click listeners by replacing them
+        if (this._theadElement) {
+            var ths = this._theadElement.querySelectorAll('th');
+            ths.forEach(function (th) {
+                th.replaceWith(th.cloneNode(true));
+            });
+        }
+        // --- 5. Remove spinner DOM node if it exists ---
+        var spinner = this._element.querySelector(this._config.attributes.spinner);
+        if (spinner && spinner.parentNode) {
+            spinner.parentNode.removeChild(spinner);
+        }
+        this._element.classList.remove(this._config.loadingClass);
+        // --- 6. Remove instance reference from the DOM element ---
+        if (this._element.instance) {
+            delete this._element.instance;
+        }
+        // --- 7. (Optional) Clear localStorage state ---
+        // Uncomment the following line if you want to clear state on dispose:
+        // this._deleteState();
     };
     KTDataTable.prototype._debounce = function (func, wait) {
         var timeout;
@@ -8830,13 +9072,12 @@ var KTDataTable = /** @class */ (function (_super) {
     };
     /**
      * Create KTDataTable instances for all elements with a data-kt-datatable="true" attribute.
-     *
-     * This function should be called after the control(s) have been
-     * loaded and parsed by the browser. It will create instances of
-     * KTDataTable for all elements with a data-kt-datatable="true" attribute.
+     * This function is now browser-guarded and must be called explicitly.
      */
     KTDataTable.createInstances = function () {
         var _this = this;
+        if (typeof document === 'undefined')
+            return;
         var elements = document.querySelectorAll('[data-kt-datatable="true"]');
         elements.forEach(function (element) {
             if (element.hasAttribute('data-kt-datatable') &&
@@ -8861,11 +9102,11 @@ var KTDataTable = /** @class */ (function (_super) {
     };
     /**
      * Initializes all KTDataTable instances on the page.
-     *
-     * This function should be called after the control(s) have been
-     * loaded and parsed by the browser.
+     * This function is now browser-guarded and must be called explicitly.
      */
     KTDataTable.init = function () {
+        if (typeof document === 'undefined')
+            return;
         // Create instances of KTDataTable for all elements with a
         // data-kt-datatable="true" attribute
         KTDataTable.createInstances();
@@ -8923,8 +9164,16 @@ var KTDataTable = /** @class */ (function (_super) {
     return KTDataTable;
 }(component_1.default));
 exports.KTDataTable = KTDataTable;
-if (typeof window !== 'undefined') {
-    window.KTDataTable = KTDataTable;
+/**
+ * NOTE: This module is now PURE. No side effects or DOM/global assignments occur on import.
+ * To auto-initialize all datatables on the page, call the exported `initAllDataTables()` function explicitly in the browser.
+ */
+function initAllDataTables() {
+    if (typeof document !== 'undefined') {
+        KTDataTable.createInstances();
+        // Optionally assign to window for legacy support
+        window.KTDataTable = KTDataTable;
+    }
 }
 
 
@@ -9494,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) {
@@ -9978,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)
@@ -10000,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) {
@@ -10023,6 +10278,7 @@ var KTSelectSearch = /** @class */ (function () {
                             (_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.focus(); // Focus search input
                         }, 50); // Delay to ensure dropdown is visible
                     }
+                    _this._select.updateSelectAllButtonState();
                 });
             }
         }
@@ -10041,6 +10297,11 @@ var KTSelectSearch = /** @class */ (function () {
     KTSelectSearch.prototype._handleSearchKeyDown = function (event) {
         var key = event.key;
         switch (key) {
+            case ' ': // Spacebar
+                // Do nothing, allow space to be typed into the input
+                // Stop propagation to prevent parent handlers from processing this event
+                event.stopPropagation();
+                break;
             case 'ArrowDown':
                 event.preventDefault();
                 this._focusManager.focusNext();
@@ -10155,9 +10416,8 @@ 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();
     };
     /**
      * Reset all options to their original state
@@ -10185,6 +10445,7 @@ var KTSelectSearch = /** @class */ (function () {
             }
         });
         this._clearNoResultsMessage(); // Ensure no results message is cleared when resetting
+        this._select.updateSelectAllButtonState();
     };
     KTSelectSearch.prototype._handleNoResults = function (visibleOptionsCount) {
         var _a, _b;
@@ -11388,12 +11649,16 @@ var KTSelect = /** @class */ (function (_super) {
         // Core properties
         _this._name = 'select';
         _this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
+        // Cached DOM references for performance
+        _this._optionsContainer = null;
         // State
         _this._dropdownIsOpen = false;
         _this._comboboxModule = null;
         _this._tagsModule = null;
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
+        _this._selectAllButton = null;
+        _this._selectAllButtonToggle = null;
         _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         _this._mutationObserver = null;
         // Search debounce timeout
@@ -11439,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
@@ -11457,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();
@@ -11481,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)
      */
@@ -11674,6 +12048,10 @@ var KTSelect = /** @class */ (function (_super) {
         this._updateDisplayAndAriaAttributes();
         this.updateSelectedOptionDisplay();
         this._setAriaAttributes();
+        // Update select all button state
+        this.updateSelectAllButtonState();
+        // Focus the first selected option or first option if nothing selected
+        this._focusSelectedOption();
         // Attach event listeners after all modules are initialized
         this._attachEventListeners();
         this._observeNativeSelect();
@@ -11693,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);
             }
@@ -11712,9 +12096,14 @@ var KTSelect = /** @class */ (function (_super) {
             var searchElement = templates_1.defaultTemplates.search(this._config);
             dropdownElement.appendChild(searchElement);
         }
+        // Add select all button if needed
+        if (this._config.multiple && this._config.enableSelectAll) {
+            var selectAllElement = templates_1.defaultTemplates.selectAll(this._config);
+            dropdownElement.appendChild(selectAllElement);
+        }
         // Create options container using template
         var optionsContainer = templates_1.defaultTemplates.options(this._config);
-        // Add each option directly to the container
+        // Add each option directly to the container (only if options exist)
         options.forEach(function (optionElement) {
             // Skip empty placeholder options (only if BOTH value AND text are empty)
             // This allows options with empty value but visible text to display in dropdown
@@ -11741,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]");
@@ -11755,6 +12149,9 @@ var KTSelect = /** @class */ (function (_super) {
         if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
+        this._selectAllButton = this._wrapperElement.querySelector('[data-kt-select-select-all]');
+        // Cache the options container for performance
+        this._optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
@@ -11765,6 +12162,13 @@ var KTSelect = /** @class */ (function (_super) {
         document.addEventListener('click', this._handleDocumentClick.bind(this));
         // Dropdown option click events
         this._eventManager.addListener(this._dropdownContentElement, 'click', this._handleDropdownOptionClick.bind(this));
+        if (this._selectAllButton) {
+            this._selectAllButtonToggle =
+                this._selectAllButton.querySelector('button');
+            if (this._selectAllButtonToggle) {
+                this._eventManager.addListener(this._selectAllButtonToggle, 'click', this._handleSelectAllClick.bind(this));
+            }
+        }
         // Attach centralized keyboard handler to the wrapper element.
         // Events from focusable children like _displayElement or _searchInputElement (if present) will bubble up.
         if (this._wrapperElement) {
@@ -11930,6 +12334,8 @@ var KTSelect = /** @class */ (function (_super) {
         this._fireEvent('show');
         // Update ARIA states
         this._setAriaAttributes();
+        // Update select all button state
+        this.updateSelectAllButtonState();
         // Focus the first selected option or first option if nothing selected
         this._focusSelectedOption();
     };
@@ -12157,6 +12563,8 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions([]);
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
+        // Update select all button state
+        this.updateSelectAllButtonState();
         // Dispatch change event
         this._dispatchEvent('change');
         this._fireEvent('change');
@@ -12421,6 +12829,7 @@ var KTSelect = /** @class */ (function (_super) {
             if (this._config.debug)
                 console.log('Multiple select mode - keeping dropdown open for additional selections');
             // Don't close dropdown in multiple select mode to allow multiple selections
+            this.updateSelectAllButtonState();
         }
         // Dispatch custom change event with additional data
         this._dispatchEvent('change', {
@@ -12500,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
@@ -12523,6 +12934,7 @@ var KTSelect = /** @class */ (function (_super) {
                     if (_this._searchModule) {
                         _this._searchModule.refreshAfterSearch();
                     }
+                    _this.updateSelectAllButtonState();
                 })
                     .catch(function (error) {
                     console.error('Error updating search results:', error);
@@ -12553,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
@@ -12562,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
@@ -12598,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);
     };
     /**
@@ -12609,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);
@@ -12631,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.
@@ -12647,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) {
@@ -12696,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();
@@ -12737,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 '';
@@ -12746,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));
                 }
             });
@@ -12755,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 () {
@@ -12774,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;
                     }
@@ -12827,6 +13278,57 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
+        this.updateSelectAllButtonState();
+    };
+    KTSelect.prototype._handleSelectAllClick = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var visibleOptions = this._focusManager
+            .getVisibleOptions()
+            .filter(function (opt) { return opt.getAttribute('aria-disabled') !== 'true'; });
+        if (visibleOptions.length === 0)
+            return;
+        var visibleValues = visibleOptions.map(function (opt) { return opt.dataset.value; });
+        var selectedValues = new Set(this.getSelectedOptions());
+        var isAllSelected = visibleOptions.every(function (opt) {
+            return selectedValues.has(opt.dataset.value);
+        });
+        if (isAllSelected) {
+            // Deselect all visible
+            visibleValues.forEach(function (value) { return selectedValues.delete(value); });
+        }
+        else {
+            // Select all visible
+            visibleValues.forEach(function (value) { return selectedValues.add(value); });
+        }
+        this._state.setSelectedOptions(Array.from(selectedValues));
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+        this.updateSelectAllButtonState();
+        this._dispatchEvent('change');
+        this._fireEvent('change');
+    };
+    KTSelect.prototype.updateSelectAllButtonState = function () {
+        if (!this._config.multiple ||
+            !this._config.enableSelectAll ||
+            !this._selectAllButtonToggle) {
+            return;
+        }
+        var visibleOptions = this._focusManager
+            .getVisibleOptions()
+            .filter(function (opt) { return opt.getAttribute('aria-disabled') !== 'true'; });
+        if (visibleOptions.length === 0) {
+            this._selectAllButton.style.display = 'none';
+            return;
+        }
+        this._selectAllButton.style.display = '';
+        var selectedValues = new Set(this.getSelectedOptions());
+        var isAllSelected = visibleOptions.every(function (opt) {
+            return selectedValues.has(opt.dataset.value);
+        });
+        this._selectAllButtonToggle.textContent = isAllSelected
+            ? this._config.clearAllText
+            : this._config.selectAllText;
     };
     /**
      * ========================================================================
@@ -14735,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) {
@@ -15695,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');
@@ -15772,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);
@@ -15791,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);
@@ -15816,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);
@@ -15833,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);
@@ -15855,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);
@@ -15877,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.
@@ -15926,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);
@@ -16162,6 +16679,7 @@ exports.coreTemplateStrings = {
     loading: "<li class=\"kt-select-loading {{class}}\" role=\"status\" aria-live=\"polite\"></li>",
     tag: "<div data-kt-select-tag=\"true\" class=\"kt-select-tag {{class}}\"></div>",
     loadMore: "<li class=\"kt-select-load-more {{class}}\" data-kt-select-load-more=\"true\"></li>",
+    selectAll: "<div data-kt-select-select-all class=\"kt-select-select-all\"><button type=\"button\" class=\"kt-select-select-all-button\">{{text}}</button></div>",
     tagRemoveButton: "<button type=\"button\" data-kt-select-remove-button class=\"kt-select-tag-remove\" aria-label=\"Remove tag\" tabindex=\"0\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"3\" y1=\"3\" x2=\"9\" y2=\"9\"/><line x1=\"9\" y1=\"3\" x2=\"3\" y2=\"9\"/></svg></button>",
 };
 /**
@@ -16435,6 +16953,11 @@ exports.defaultTemplates = {
             return element;
         }
     },
+    selectAll: function (config) {
+        var template = getTemplateStrings(config).selectAll;
+        var element = stringToElement(template.replace('{{text}}', config.selectAllText || 'Select All'));
+        return element;
+    },
 };
 
 
@@ -17597,6 +18120,7 @@ exports.DefaultConfig = {
     // Multi-Select Display
     selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
     clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
+    enableSelectAll: false, // Enable/disable "Select All" button for multi-select
     showSelectedCount: true, // Show the number of selected options in multi-select mode
     renderSelected: null, // Custom function to render the selected value(s) in the display area
     // Accessibility & Usability