@keenthemes/ktui 1.0.19 → 1.0.20

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,27 @@ 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) {
@@ -7587,6 +7686,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);
@@ -8693,8 +8793,61 @@ 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 +8983,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 +9013,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 +9075,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;
+    }
 }
 
 
@@ -10023,6 +10183,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 +10202,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();
@@ -10158,6 +10324,7 @@ var KTSelectSearch = /** @class */ (function () {
         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 +10352,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;
@@ -11394,6 +11562,8 @@ var KTSelect = /** @class */ (function (_super) {
         _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
@@ -11674,6 +11844,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();
@@ -11712,6 +11886,11 @@ 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
@@ -11755,6 +11934,7 @@ var KTSelect = /** @class */ (function (_super) {
         if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
+        this._selectAllButton = this._wrapperElement.querySelector('[data-kt-select-select-all]');
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
@@ -11765,6 +11945,12 @@ 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 +12116,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 +12345,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 +12611,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', {
@@ -12523,6 +12714,7 @@ var KTSelect = /** @class */ (function (_super) {
                     if (_this._searchModule) {
                         _this._searchModule.refreshAfterSearch();
                     }
+                    _this.updateSelectAllButtonState();
                 })
                     .catch(function (error) {
                     console.error('Error updating search results:', error);
@@ -12827,6 +13019,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;
     };
     /**
      * ========================================================================
@@ -16162,6 +16405,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 +16679,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 +17846,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