@keenthemes/ktui 1.0.13 → 1.0.15

package/dist/ktui.js

@@ -8436,16 +8436,19 @@ var KTDataTable = /** @class */ (function (_super) {
         if (!_sizeElement) {
             return _sizeElement;
         }
-        // Create <option> elements for each page size option
-        var options = this._config.pageSizes.map(function (size) {
-            var option = document.createElement('option');
-            option.value = String(size);
-            option.text = String(size);
-            option.selected = _this.getState().pageSize === size;
-            return option;
-        });
-        // Add the <option> elements to the provided element
-        _sizeElement.append.apply(_sizeElement, options);
+        // Wait for the element to be attached to the DOM
+        setTimeout(function () {
+            // Create <option> elements for each page size option
+            var options = _this._config.pageSizes.map(function (size) {
+                var option = document.createElement('option');
+                option.value = String(size);
+                option.text = String(size);
+                option.selected = _this.getState().pageSize === size;
+                return option;
+            });
+            // Add the <option> elements to the provided element
+            _sizeElement.append.apply(_sizeElement, options);
+        }, 100);
         // Create an event listener for the "change" event on the element
         var _pageSizeControlsEvent = function (event) {
             // When the element changes, reload the page with the new page size and page number 1
@@ -9308,6 +9311,12 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         _this._dropdownElement = dropdownElement;
         _this._config = config;
         _this._ktSelectInstance = ktSelectInstance; // Assign instance
+        var container = _this._resolveDropdownContainer();
+        if (container) {
+            if (container !== _this._dropdownElement.parentElement) {
+                container.appendChild(_this._dropdownElement);
+            }
+        }
         _this._eventManager = new utils_1.EventManager();
         _this._focusManager = new utils_1.FocusManager(dropdownElement, '[data-kt-select-option]', config);
         _this._setupEventListeners();
@@ -9475,16 +9484,26 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         // Reflow
         dom_1.default.reflow(this._dropdownElement);
         // Apply z-index
+        var zIndexToApply = null;
         if (this._config.dropdownZindex) {
-            this._dropdownElement.style.zIndex =
-                this._config.dropdownZindex.toString();
+            zIndexToApply = this._config.dropdownZindex;
         }
-        else {
-            var parentZindex = dom_1.default.getHighestZindex(this._element);
-            if (parentZindex) {
-                this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
+        // Consider the dropdown's current z-index if it's already set and higher
+        var currentDropdownZIndexStr = dom_1.default.getCssProp(this._dropdownElement, 'z-index');
+        if (currentDropdownZIndexStr && currentDropdownZIndexStr !== 'auto') {
+            var currentDropdownZIndex = parseInt(currentDropdownZIndexStr);
+            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)) {
+            zIndexToApply = toggleParentContextZindex + 1;
+        }
+        if (zIndexToApply !== null) {
+            this._dropdownElement.style.zIndex = zIndexToApply.toString();
+        }
         // Initialize popper
         this._initPopper();
         // Add active classes for visual state
@@ -9575,6 +9594,20 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         // Remove data reference
         data_1.default.remove(this._element, this._name);
     };
+    KTSelectDropdown.prototype._resolveDropdownContainer = function () {
+        var containerSelector = this._config.dropdownContainer;
+        if (containerSelector && containerSelector !== 'body') {
+            var containerElement = document.querySelector(containerSelector);
+            if (!containerElement && this._config.debug) {
+                console.warn("KTSelectDropdown: dropdownContainer selector \"".concat(containerSelector, "\" not found. Dropdown will remain in its default position."));
+            }
+            return containerElement;
+        }
+        else if (containerSelector === 'body') {
+            return document.body;
+        }
+        return null;
+    };
     return KTSelectDropdown;
 }(component_1.default));
 exports.KTSelectDropdown = KTSelectDropdown;
@@ -11330,7 +11363,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTSelect = void 0;
 var data_1 = __webpack_require__(8716);
-var dom_1 = __webpack_require__(9010);
 var component_1 = __webpack_require__(2658);
 var config_1 = __webpack_require__(9386);
 var option_1 = __webpack_require__(4241);
@@ -11358,6 +11390,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
         _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
+        _this._mutationObserver = null;
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -11612,9 +11645,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Setup HTML structure
         this._createHtmlStructure();
         this._setupElementReferences();
-        this._initZIndex();
         // Initialize options
-        // this._initializeOptionsHtml();
         this._preSelectOptions(this._element);
         // Apply disabled state if needed
         this._applyInitialDisabledState();
@@ -11640,12 +11671,13 @@ var KTSelect = /** @class */ (function (_super) {
         this._setAriaAttributes();
         // Attach event listeners after all modules are initialized
         this._attachEventListeners();
+        this._observeNativeSelect();
     };
     /**
      * Creates the HTML structure for the select component
      */
     KTSelect.prototype._createHtmlStructure = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
         var options = Array.from(this._element.querySelectorAll('option'));
         // Create wrapper and display elements
@@ -11653,10 +11685,20 @@ var KTSelect = /** @class */ (function (_super) {
         var displayElement = templates_1.defaultTemplates.display(this._config);
         // Add the display element to the wrapper
         wrapperElement.appendChild(displayElement);
-        // Move classes from original select to display element
+        // Move classes from original select to wrapper and display elements
         if (this._element.classList.length > 0) {
-            (_a = displayElement.classList).add.apply(_a, Array.from(this._element.classList));
-            this._element.className = '';
+            var originalClasses = Array.from(this._element.classList);
+            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); });
+            if (classesForDisplay.length > 0) {
+                (_b = displayElement.classList).add.apply(_b, classesForDisplay);
+            }
+            this._element.className = ''; // Clear classes from original select element
         }
         // Create an empty dropdown first (without options) using template
         var dropdownElement = templates_1.defaultTemplates.dropdown(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
@@ -11667,8 +11709,6 @@ var KTSelect = /** @class */ (function (_super) {
         }
         // Create options container using template
         var optionsContainer = templates_1.defaultTemplates.options(this._config);
-        // Clear the options container
-        optionsContainer.innerHTML = '';
         // Add each option directly to the container
         options.forEach(function (optionElement) {
             // Skip empty placeholder options (only if BOTH value AND text are empty)
@@ -11689,7 +11729,7 @@ var KTSelect = /** @class */ (function (_super) {
         wrapperElement.appendChild(dropdownElement);
         // Insert after the original element
         this._element.after(wrapperElement);
-        this._element.style.display = 'none';
+        this._element.classList.add('hidden');
     };
     /**
      * Setup all element references after DOM is created
@@ -11847,20 +11887,6 @@ var KTSelect = /** @class */ (function (_super) {
             });
         }
     };
-    /**
-     * Set appropriate z-index for dropdown
-     */
-    KTSelect.prototype._initZIndex = function () {
-        var zindex = this._config.dropdownZindex;
-        if (parseInt(dom_1.default.getCssProp(this._dropdownContentElement, 'z-index')) >
-            zindex) {
-            zindex = parseInt(dom_1.default.getCssProp(this._dropdownContentElement, 'z-index'));
-        }
-        if (dom_1.default.getHighestZindex(this._wrapperElement) > zindex) {
-            zindex = dom_1.default.getHighestZindex(this._wrapperElement) + 1;
-        }
-        this._dropdownContentElement.style.zIndex = String(zindex);
-    };
     /**
      * ========================================================================
      * DROPDOWN MANAGEMENT
@@ -12040,62 +12066,34 @@ var KTSelect = /** @class */ (function (_super) {
             }
             return; // Nothing to display on if the element is missing
         }
-        // 1. Custom render function takes highest precedence
         if (typeof this._config.renderSelected === 'function') {
             valueDisplayEl.innerHTML = this._config.renderSelected(selectedOptions);
-            return;
-        }
-        // 2. Custom displayTemplate string
-        // Check if a custom display template string is provided directly in config or via config.templates
-        var customDisplayTemplateString = this._config.displayTemplate || (this._config.templates && this._config.templates.display);
-        if (customDisplayTemplateString) {
-            // If tags are enabled and items are selected, the tags module handles display, so clear the main display area.
-            if (tagsEnabled && selectedOptions.length > 0) {
-                valueDisplayEl.innerHTML = '';
-            }
-            else {
-                // Otherwise, render the custom display template.
-                // If no options are selected, renderDisplayTemplateForSelected should handle showing a placeholder if the template supports it,
-                // or we might need a separate placeholder rendering for custom templates if they don't handle empty selection.
-                // For now, assume renderDisplayTemplateForSelected handles it or shows selected text.
-                valueDisplayEl.innerHTML = this.renderDisplayTemplateForSelected(selectedOptions);
-            }
-            return;
-        }
-        // 3. Default template behavior (no custom function or string template)
-        var textContainer = valueDisplayEl.querySelector('[data-kt-text-container="true"]');
-        if (tagsEnabled && selectedOptions.length > 0) {
-            // Tags are active and have content, clear the text container if it exists,
-            // or the whole display if it doesn't (though it should with default template).
-            if (textContainer) {
-                textContainer.innerHTML = '';
-            }
-            else {
-                valueDisplayEl.innerHTML = ''; // Fallback: clear entire display area
-            }
-        }
-        else if (selectedOptions.length === 0) {
-            // No options selected: display placeholder text in the text container.
-            var placeholderTemplate = templates_1.defaultTemplates.placeholder(this._config);
-            var placeholderText = placeholderTemplate.textContent || ''; // Get text from placeholder element
-            if (textContainer) {
-                textContainer.innerHTML = placeholderText;
-            }
-            else {
-                // Fallback: If no text container, replace children of valueDisplayEl with the placeholder element itself.
-                // This ensures the placeholder (which might have its own structure/classes) is displayed.
-                valueDisplayEl.replaceChildren(placeholderTemplate);
-            }
         }
         else {
-            // Options are selected, and tags are not enabled (or no selected options for tags):
-            // Render normal selected text in the text container.
-            var content = this.getSelectedOptionsText();
-            if (textContainer) {
-                textContainer.innerHTML = content;
+            if (selectedOptions.length === 0) {
+                // No options selected: display placeholder.
+                // This runs if tags are off, OR if tags are on but no items are selected (tags module would have cleared tags).
+                var placeholderEl = templates_1.defaultTemplates.placeholder(this._config);
+                valueDisplayEl.replaceChildren(placeholderEl);
             }
             else {
-                valueDisplayEl.innerHTML = content; // Fallback: set content on whole display area
+                // Options are selected.
+                if (tagsEnabled) {
+                    // Tags are enabled AND options are selected: tags module has rendered them.
+                    // Clear valueDisplayEl as tags are the primary display.
+                    valueDisplayEl.innerHTML = '';
+                }
+                else {
+                    // Tags are not enabled AND options are selected: render normal text display.
+                    var content = '';
+                    if (this._config.displayTemplate) {
+                        content = this.renderDisplayTemplateForSelected(this.getSelectedOptions());
+                    }
+                    else {
+                        content = this.getSelectedOptionsText();
+                    }
+                    valueDisplayEl.innerHTML = content;
+                }
             }
         }
     };
@@ -12756,6 +12754,73 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype.getDisplayElement = function () {
         return this._displayElement;
     };
+    KTSelect.prototype._observeNativeSelect = function () {
+        var _this = this;
+        if (this._mutationObserver)
+            return; // Prevent double observers
+        this._mutationObserver = new MutationObserver(function (mutations) {
+            var needsRebuild = false;
+            var needsSelectionSync = false;
+            for (var _i = 0, mutations_1 = mutations; _i < mutations_1.length; _i++) {
+                var mutation = mutations_1[_i];
+                if (mutation.type === 'childList') {
+                    // Option(s) added or removed
+                    needsRebuild = true;
+                }
+                else if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
+                    if (mutation.attributeName === 'selected') {
+                        needsSelectionSync = true;
+                    }
+                }
+            }
+            if (needsRebuild) {
+                // Rebuild the custom dropdown options
+                _this._rebuildOptionsFromNative();
+            }
+            if (needsSelectionSync) {
+                _this._syncSelectionFromNative();
+            }
+        });
+        this._mutationObserver.observe(this._element, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['selected'],
+        });
+    };
+    KTSelect.prototype._rebuildOptionsFromNative = function () {
+        var _this = this;
+        // Remove and rebuild the custom dropdown options from the native select
+        if (this._dropdownContentElement) {
+            var optionsContainer_1 = this._dropdownContentElement.querySelector('[data-kt-select-options]');
+            if (optionsContainer_1) {
+                optionsContainer_1.innerHTML = '';
+                var options = Array.from(this._element.querySelectorAll('option'));
+                options.forEach(function (optionElement) {
+                    if (optionElement.value === '' &&
+                        optionElement.textContent.trim() === '') {
+                        return;
+                    }
+                    var selectOption = new option_1.KTSelectOption(optionElement, _this._config);
+                    var renderedOption = selectOption.render();
+                    optionsContainer_1.appendChild(renderedOption);
+                });
+                // Update internal references
+                this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+            }
+        }
+        // Sync selection after rebuilding
+        this._syncSelectionFromNative();
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+    };
+    KTSelect.prototype._syncSelectionFromNative = function () {
+        // Sync internal state from the native select's selected options
+        var selected = Array.from(this._element.querySelectorAll('option:checked')).map(function (opt) { return opt.value; });
+        this._state.setSelectedOptions(this._config.multiple ? selected : selected[0] || '');
+        this.updateSelectedOptionDisplay();
+        this._updateSelectedOptionClass();
+    };
     /**
      * ========================================================================
      * STATIC METHODS
@@ -13502,6 +13567,7 @@ var KTDropdown = /** @class */ (function (_super) {
             offset: '0px, 5px',
             offsetRtl: '0px, 5px',
             hiddenClass: 'hidden',
+            container: '',
         };
         _this._config = _this._defaultConfig;
         _this._disabled = false;
@@ -13519,8 +13585,21 @@ var KTDropdown = /** @class */ (function (_super) {
             return _this;
         data_1.default.set(_this._menuElement, 'dropdownElement', _this._element);
         _this._setupNestedDropdowns();
+        _this._handleContainer();
         return _this;
     }
+    KTDropdown.prototype._handleContainer = function () {
+        var _a;
+        if (this._getOption('container')) {
+            if (this._getOption('container') === 'body') {
+                document.body.appendChild(this._menuElement);
+            }
+            else {
+                (_a = document
+                    .querySelector(this._getOption('container'))) === null || _a === void 0 ? void 0 : _a.appendChild(this._menuElement);
+            }
+        }
+    };
     KTDropdown.prototype._setupNestedDropdowns = function () {
         var subDropdowns = this._menuElement.querySelectorAll('[data-kt-dropdown-toggle]');
         subDropdowns.forEach(function (subToggle) {
@@ -16174,8 +16253,6 @@ exports.defaultTemplates = {
     wrapper: function (config) {
         var html = getTemplateStrings(config).wrapper.replace('{{class}}', config.wrapperClass || '');
         var element = stringToElement(html);
-        element.setAttribute('data-kt-select-combobox', config.combobox ? 'true' : 'false');
-        element.setAttribute('data-kt-select-tags', config.tags ? 'true' : 'false');
         return element;
     },
     /**
@@ -17454,7 +17531,6 @@ exports.DefaultConfig = {
     // General Display
     debug: false,
     placeholder: 'Select an option', // Default placeholder text when no option is selected
-    dropdownZindex: null, // Initial z-index value for the dropdown
     // Data Handling
     items: [], // Static list of options
     isLoading: false, // Indicates if options are being loaded asynchronously
@@ -17477,6 +17553,7 @@ exports.DefaultConfig = {
     paginationLimitParam: 'limit', // Parameter name for items per page
     paginationTotalParam: 'total', // Parameter name for total items
     // Selection Behavior
+    allowClear: false, // Allow clearing the selection (if true, an empty value can be set)
     multiple: false, // Enable/disable multi-select
     maxSelections: null, // Maximum number of selections allowed in multi-select mode (null for unlimited)
     disabled: false, // Disable the select component
@@ -17498,6 +17575,8 @@ exports.DefaultConfig = {
     label: 'Select an option', // Label for the select component (for screen readers)
     height: 250, // Maximum height of the dropdown menu in pixels (if exceeded, a scrollbar will appear)
     // Dropdown Configuration
+    dropdownZindex: null, // Initial z-index value for the dropdown
+    dropdownContainer: null, // Container element for the dropdown
     dropdownPlacement: null,
     dropdownFlip: false,
     dropdownPreventOverflow: false,
@@ -17581,11 +17660,17 @@ var KTSelectState = /** @class */ (function () {
         return this._config.items || [];
     };
     KTSelectState.prototype.setItemsFromOptions = function (options) {
-        this._config.items = options.map(function (option) { return ({
-            id: option.value,
-            title: option.textContent || '',
-            // Add other properties from option element if needed
-        }); });
+        this._config.items = options.map(function (option) {
+            var item = {
+                id: option.value,
+                title: option.textContent || option.value, // Use value as fallback for title
+                // 'selected' property will be definitively set by _preSelectOptions
+                disabled: option.disabled,
+            };
+            return item;
+        });
+        // The 'selected' status of these items and the overall component selection state
+        // are now fully managed by _preSelectOptions in KTSelect during initialization.
     };
     KTSelectState.prototype.getConfig = function () {
         return this._config;