@keenthemes/ktui 1.0.13 → 1.0.14

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
@@ -11358,6 +11361,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
@@ -11640,6 +11644,7 @@ 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
@@ -11655,7 +11660,13 @@ var KTSelect = /** @class */ (function (_super) {
         wrapperElement.appendChild(displayElement);
         // Move classes from original select to display element
         if (this._element.classList.length > 0) {
-            (_a = displayElement.classList).add.apply(_a, Array.from(this._element.classList));
+            // Exclude kt-select class from being added to the wrapper element
+            var classes = Array.from(this._element.classList).filter(function (className) { return className !== 'kt-select'; });
+            (_a = wrapperElement.classList).add.apply(_a, classes);
+            // If element has class kt-select, move it to display element
+            if (this._element.classList.contains('kt-select')) {
+                displayElement.classList.add('kt-select');
+            }
             this._element.className = '';
         }
         // Create an empty dropdown first (without options) using template
@@ -11689,7 +11700,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
@@ -12040,62 +12051,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 +12739,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
@@ -16174,8 +16224,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;
     },
     /**
@@ -17477,6 +17525,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
@@ -17581,11 +17630,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;