@keenthemes/ktui 1.1.3 → 1.1.5

package/dist/ktui.js

@@ -208,6 +208,7 @@ var KTDrawer = /** @class */ (function (_super) {
             persistent: false,
             container: '',
             focus: true,
+            keepInPlaceWithin: '',
         };
         _this._config = _this._defaultConfig;
         _this._isOpen = false;
@@ -258,26 +259,19 @@ var KTDrawer = /** @class */ (function (_super) {
             return;
         }
         KTDrawer.hide();
-        // If drawer needs to be in front of backdrop, ensure it's in body (for proper z-index stacking)
-        // This ensures the drawer and backdrop are in the same stacking context
+        // When container="body", move drawer to body only if NOT inside an element matching keepInPlaceWithin.
+        // When keepInPlaceWithin is set (e.g. for SPA/persisted layouts), keeping the drawer in place lets the host preserve it across navigations.
         if (this._getOption('container') === 'body' && this._element.parentElement !== document.body) {
-            // Store original parent for restoration when hiding
-            if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
-                var originalParent = this._element.parentElement;
-                if (originalParent && originalParent !== document.body) {
-                    this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
-                    // Store a reference to find the parent later (using closest to find Livewire component or header)
-                    var livewireComponent = originalParent.closest('[wire\\:id]');
-                    var header = originalParent.closest('header#header');
-                    if (livewireComponent) {
-                        this._element.setAttribute('data-kt-drawer-original-wire-id', livewireComponent.getAttribute('wire:id') || '');
-                    }
-                    if (header) {
-                        this._element.setAttribute('data-kt-drawer-original-in-header', 'true');
+            var keepInPlace = this._isKeepInPlace();
+            if (!keepInPlace) {
+                if (!this._element.hasAttribute('data-kt-drawer-original-parent-id')) {
+                    var originalParent = this._element.parentElement;
+                    if (originalParent && originalParent !== document.body) {
+                        this._element.setAttribute('data-kt-drawer-original-parent-id', originalParent.id || '');
                     }
                 }
+                document.body.appendChild(this._element);
             }
-            document.body.appendChild(this._element);
         }
         if (this._getOption('backdrop') === true)
             this._createBackdrop();
@@ -365,23 +359,12 @@ var KTDrawer = /** @class */ (function (_super) {
         var _a;
         if (this._getOption('container')) {
             if (this._getOption('container') === 'body') {
-                // Check if drawer is in a persisted Livewire component (like header with @persist)
-                // If so, don't move it to body - keep it in place so Livewire can preserve it
-                // This follows the same pattern as dropdowns/menus which work with wire:navigate
-                var originalParent = this._element.parentNode;
-                var isInPersistedComponent = originalParent &&
-                    (originalParent.closest('[wire\\:id]') !== null ||
-                        originalParent.closest('header#header') !== null);
-                if (isInPersistedComponent) {
-                    // Don't move to body - keep in original location for Livewire persistence
-                    // Use fixed positioning to achieve the same visual effect
-                    // Ensure drawer has fixed positioning to work from its current location
+                if (this._isKeepInPlace()) {
                     if (!this._element.style.position || this._element.style.position === 'static') {
                         this._element.style.position = 'fixed';
                     }
                 }
                 else {
-                    // Not in persisted component - safe to move to body (follows original behavior)
                     document.body.appendChild(this._element);
                 }
             }
@@ -391,6 +374,26 @@ var KTDrawer = /** @class */ (function (_super) {
             }
         }
     };
+    /** True when drawer is inside an element matching keepInPlaceWithin (so we keep it in place instead of moving to body). */
+    KTDrawer.prototype._isKeepInPlace = function () {
+        var _a, _b;
+        var selector = (_a = this._getOption('keepInPlaceWithin')) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!selector || !((_b = this._element) === null || _b === void 0 ? void 0 : _b.parentElement))
+            return false;
+        var parent = this._element.parentElement;
+        var selectors = selector.split(',').map(function (s) { return s.trim(); }).filter(Boolean);
+        for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
+            var sel = selectors_1[_i];
+            try {
+                if (parent.closest(sel) !== null)
+                    return true;
+            }
+            catch (_c) {
+                // invalid selector, skip
+            }
+        }
+        return false;
+    };
     KTDrawer.prototype._autoFocus = function () {
         if (!this._element)
             return;
@@ -408,7 +411,13 @@ var KTDrawer = /** @class */ (function (_super) {
         this._backdropElement = document.createElement('DIV');
         this._backdropElement.style.zIndex = (zindex - 1).toString();
         this._backdropElement.setAttribute('data-kt-drawer-backdrop', 'true');
-        document.body.append(this._backdropElement);
+        var parent = this._element.parentElement;
+        if (parent) {
+            parent.insertBefore(this._backdropElement, this._element);
+        }
+        else {
+            document.body.append(this._backdropElement);
+        }
         dom_1.default.reflow(this._backdropElement);
         dom_1.default.addClass(this._backdropElement, this._getOption('backdropClass'));
         this._backdropElement.addEventListener('click', function (event) {
@@ -433,8 +442,8 @@ var KTDrawer = /** @class */ (function (_super) {
     KTDrawer.prototype._isEnabled = function () {
         return utils_1.default.stringToBoolean(this._getOption('enable'));
     };
-    KTDrawer.prototype.toggle = function () {
-        return this._toggle();
+    KTDrawer.prototype.toggle = function (relatedTarget) {
+        return this._toggle(relatedTarget);
     };
     KTDrawer.prototype.show = function (relatedTarget) {
         return this._show(relatedTarget);
@@ -612,7 +621,7 @@ var KTDrawer = /** @class */ (function (_super) {
             // Try to get instance immediately
             var drawer = KTDrawer.getInstance(target);
             if (drawer) {
-                drawer.toggle();
+                drawer.toggle(target);
             }
             else {
                 // Drawer element not found - wait for it to appear (handles persisted Livewire components)
@@ -630,7 +639,7 @@ var KTDrawer = /** @class */ (function (_super) {
                         // Get instance and toggle
                         var drawerInstance = KTDrawer.getInstance(drawerElement);
                         if (drawerInstance) {
-                            drawerInstance.toggle();
+                            drawerInstance.toggle(target);
                         }
                     }
                     else {
@@ -646,7 +655,7 @@ var KTDrawer = /** @class */ (function (_super) {
                                 }
                                 var drawerInstance = KTDrawer.getInstance(drawerAfterReinit);
                                 if (drawerInstance) {
-                                    drawerInstance.toggle();
+                                    drawerInstance.toggle(target);
                                 }
                             }
                         }, 500);
@@ -2265,6 +2274,15 @@ var KTComponent = /** @class */ (function () {
             return;
         this._config = __assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
     };
+    /**
+     * Merge config into the existing _config in place. Use when re-applying config to an
+     * already-initialized instance so handlers that hold a reference to _config see updates.
+     */
+    KTComponent.prototype._mergeConfig = function (config) {
+        if (config && typeof config === 'object' && Object.keys(config).length > 0) {
+            Object.assign(this._config, config);
+        }
+    };
     KTComponent.prototype.dispose = function () {
         if (!this._element)
             return;
@@ -6272,7 +6290,7 @@ if (typeof window !== 'undefined') {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createSortHandler = createSortHandler;
 function createSortHandler(config, theadElement, getState, setState, fireEvent, dispatchEvent, updateData) {
-    // Helper to compare values for sorting
+    // Helper to compare values for sorting (string)
     function compareValues(a, b, sortOrder) {
         var aText = String(a).replace(/<[^>]*>|&nbsp;/g, '');
         var bText = String(b).replace(/<[^>]*>|&nbsp;/g, '');
@@ -6286,11 +6304,63 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                     : 1
                 : 0;
     }
+    // Parse value for numeric sort: strip currency/commas, then parseFloat
+    function parseNumeric(value) {
+        if (value === null || value === undefined || value === '') {
+            return Number.NaN;
+        }
+        var s = String(value).replace(/[^0-9.-]/g, '');
+        var n = parseFloat(s);
+        return Number.isNaN(n) ? Number.NaN : n;
+    }
+    // Compare two numbers; NaN sorts to the end for both asc and desc
+    function compareNumeric(aNum, bNum, sortOrder) {
+        var aNaN = Number.isNaN(aNum);
+        var bNaN = Number.isNaN(bNum);
+        if (aNaN && bNaN)
+            return 0;
+        if (aNaN)
+            return 1;
+        if (bNaN)
+            return -1;
+        if (aNum < bNum)
+            return sortOrder === 'asc' ? -1 : 1;
+        if (aNum > bNum)
+            return sortOrder === 'asc' ? 1 : -1;
+        return 0;
+    }
+    function getColumnDef(sortField) {
+        var columns = config.columns;
+        if (!columns)
+            return undefined;
+        var key = typeof sortField === 'number'
+            ? Object.keys(columns)[sortField]
+            : sortField;
+        return key !== undefined ? columns[key] : undefined;
+    }
     function sortData(data, sortField, sortOrder) {
+        var columnDef = getColumnDef(sortField);
+        var sortValueFn = columnDef === null || columnDef === void 0 ? void 0 : columnDef.sortValue;
+        var useNumeric = !sortValueFn && (columnDef === null || columnDef === void 0 ? void 0 : columnDef.sortType) === 'numeric';
         return data.sort(function (a, b) {
-            var aValue = a[sortField];
-            var bValue = b[sortField];
-            return compareValues(aValue, bValue, sortOrder);
+            var aRaw = a[sortField];
+            var bRaw = b[sortField];
+            if (typeof sortValueFn === 'function') {
+                var aVal = sortValueFn(aRaw, a);
+                var bVal = sortValueFn(bRaw, b);
+                var aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
+                var bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
+                if (typeof aVal === 'number' && typeof bVal === 'number') {
+                    return compareNumeric(aNum, bNum, sortOrder);
+                }
+                return compareValues(aVal, bVal, sortOrder);
+            }
+            if (useNumeric) {
+                var aNum = parseNumeric(aRaw);
+                var bNum = parseNumeric(bRaw);
+                return compareNumeric(aNum, bNum, sortOrder);
+            }
+            return compareValues(aRaw, bRaw, sortOrder);
         });
     }
     function toggleSortOrder(currentField, currentOrder, newField) {
@@ -6307,20 +6377,38 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
         return 'asc';
     }
     function setSortIcon(sortField, sortOrder) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
+        var baseClass = ((_b = (_a = config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base) || '';
         var sortClass = sortOrder
             ? sortOrder === 'asc'
-                ? ((_b = (_a = config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.asc) || ''
-                : ((_d = (_c = config.sort) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.desc) || ''
+                ? ((_d = (_c = config.sort) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.asc) || ''
+                : ((_f = (_e = config.sort) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.desc) || ''
             : '';
+        // Clear all headers: remove sort state so only the active column shows highlighted arrow
+        var allTh = theadElement.querySelectorAll('th');
+        allTh.forEach(function (header) {
+            var el = header;
+            el.setAttribute('aria-sort', 'none');
+            var sortElement = header.querySelector(".".concat(baseClass));
+            if (sortElement) {
+                sortElement.className = baseClass;
+            }
+        });
+        // Apply sort state to the active column so table.css [aria-sort='asc'] / [aria-sort='desc'] can highlight the arrow
         var th = typeof sortField === 'number'
-            ? theadElement.querySelectorAll('th')[sortField]
+            ? allTh[sortField]
             : theadElement.querySelector("th[data-kt-datatable-column=\"".concat(String(sortField), "\"], th[data-kt-datatable-column-sort=\"").concat(String(sortField), "\"]"));
         if (th) {
-            var sortElement = th.querySelector(".".concat((_f = (_e = config.sort) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.base));
+            var sortElement = th.querySelector(".".concat(baseClass));
             if (sortElement) {
                 sortElement.className =
-                    "".concat((_h = (_g = config.sort) === null || _g === void 0 ? void 0 : _g.classes) === null || _h === void 0 ? void 0 : _h.base, " ").concat(sortClass).trim();
+                    "".concat(baseClass, " ").concat(sortClass).trim();
+            }
+            if (sortOrder) {
+                th.setAttribute('aria-sort', sortOrder);
+            }
+            else {
+                th.setAttribute('aria-sort', 'none');
             }
         }
     }
@@ -7032,8 +7120,14 @@ var KTDataTable = /** @class */ (function (_super) {
          * Used to detect and ignore stale responses from older requests
          */
         _this._requestId = 0;
-        if (data_1.default.has(element, _this._name))
+        if (data_1.default.has(element, _this._name)) {
+            // Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
+            var existing = KTDataTable.getInstance(element);
+            if (existing && config) {
+                existing._mergeConfig(config);
+            }
             return _this;
+        }
         _this._defaultConfig = _this._initDefaultConfig(config);
         _this._init(element);
         _this._buildConfig();
@@ -7521,9 +7615,13 @@ var KTDataTable = /** @class */ (function (_super) {
         var originalDataAttributes = [];
         this._storeOriginalClasses();
         var rows = this._tbodyElement.querySelectorAll('tr');
-        var ths = this._theadElement
+        // Filter th elements to only include those with data-kt-datatable-column attribute
+        var allThs = this._theadElement
             ? this._theadElement.querySelectorAll('th')
             : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
         rows.forEach(function (row) {
             var dataRow = {};
             var dataRowAttribute = {};
@@ -7551,9 +7649,13 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._localTableHeaderInvalidate = function () {
         var originalData = this.getState().originalData;
-        var currentTableHeaders = this._theadElement
-            ? this._theadElement.querySelectorAll('th').length
-            : 0;
+        // Count only th elements with data-kt-datatable-column attribute
+        var allThs = this._theadElement
+            ? this._theadElement.querySelectorAll('th')
+            : [];
+        var currentTableHeaders = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        }).length;
         var totalColumns = originalData.length
             ? Object.keys(originalData[0]).length
             : 0;
@@ -7803,9 +7905,16 @@ var KTDataTable = /** @class */ (function (_super) {
             this._noticeOnTable(this._config.infoEmpty || '');
             return tbodyElement;
         }
-        var ths = this._theadElement
+        // Filter th elements to only include those with data-kt-datatable-column attribute
+        // This prevents creating blank td elements for merged header cells (colspan/rowspan)
+        var allThs = this._theadElement
             ? this._theadElement.querySelectorAll('th')
             : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
+        // When no th has data-kt-datatable-column, use all ths so we still render by column index (data extracted with numeric keys)
+        var columnsToRender = ths.length > 0 ? ths : Array.from(allThs);
         this._data.forEach(function (item, rowIndex) {
             var row = document.createElement('tr');
             // Apply original tr class if available
@@ -7816,8 +7925,8 @@ var KTDataTable = /** @class */ (function (_super) {
                 var dataRowAttributes_1 = _this.getState().originalDataAttributes
                     ? _this.getState().originalDataAttributes[rowIndex]
                     : null;
-                // Use the order of <th> elements to render <td>s in the correct order
-                ths.forEach(function (th, colIndex) {
+                // Use columnsToRender so tables without data-kt-datatable-column still get cells (by index)
+                columnsToRender.forEach(function (th, colIndex) {
                     var colName = th.getAttribute('data-kt-datatable-column');
                     var td = document.createElement('td');
                     var value;
@@ -8413,8 +8522,31 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.init = function () {
         if (typeof document === 'undefined')
             return;
-        // Create instances of KTDataTable for all elements with a
-        // data-kt-datatable="true" attribute
+        KTDataTable.createInstances();
+    };
+    /**
+     * Force reinitialization of datatables by clearing existing instances.
+     * Useful for Livewire wire:navigate where the DOM is replaced and new tables need to be initialized.
+     */
+    KTDataTable.reinit = function () {
+        if (typeof document === 'undefined')
+            return;
+        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
+        elements.forEach(function (element) {
+            try {
+                var instance = KTDataTable.getInstance(element);
+                if (instance && typeof instance.dispose === 'function') {
+                    instance.dispose();
+                }
+                data_1.default.remove(element, 'datatable');
+                element.removeAttribute('data-kt-datatable-initialized');
+                element.classList.remove('datatable-initialized');
+            }
+            catch (_a) {
+                // ignore per-element errors
+            }
+        });
+        KTDataTable._instances.clear();
         KTDataTable.createInstances();
     };
     /**
@@ -11018,14 +11150,17 @@ var KTSelect = /** @class */ (function (_super) {
                 }
                 else {
                     // Tags are not enabled AND options are selected: render normal text display.
-                    var content = '';
+                    // Wrap content in .kt-select-option-text so long text truncates in single-select (see Asana #1212821478465094).
+                    var wrapper = document.createElement('div');
+                    wrapper.className = 'kt-select-option-text';
+                    wrapper.setAttribute('data-kt-text-container', 'true');
                     if (this._config.displayTemplate) {
-                        content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+                        wrapper.innerHTML = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
                     }
                     else {
-                        content = this.getSelectedOptionsText();
+                        wrapper.textContent = this.getSelectedOptionsText();
                     }
-                    valueDisplayEl.innerHTML = content;
+                    valueDisplayEl.replaceChildren(wrapper);
                 }
             }
         }
@@ -12421,6 +12556,8 @@ var KTDropdown = /** @class */ (function (_super) {
         _this._disabled = false;
         _this._isTransitioning = false;
         _this._isOpen = false;
+        /** Timestamp when _show() was last called; used to ignore duplicate _hide() from double handlers */
+        _this._shownAt = 0;
         if (data_1.default.has(element, _this._name)) {
             return _this;
         }
@@ -12546,11 +12683,15 @@ var KTDropdown = /** @class */ (function (_super) {
             _this._fireEvent('shown');
             _this._dispatchEvent('shown');
         });
+        this._shownAt = Date.now();
     };
     KTDropdown.prototype._hide = function () {
         var _this = this;
         if (!this._isOpen || this._isTransitioning)
             return;
+        // If another handler fired _hide() right after _show() (e.g. double initHandlers), ignore
+        if (this._shownAt && Date.now() - this._shownAt < 150)
+            return;
         var payload = { cancel: false };
         this._fireEvent('hide', payload);
         this._dispatchEvent('hide', payload);