@keenthemes/ktui 1.0.24 → 1.0.26

package/dist/ktui.js

@@ -6993,8 +6993,11 @@ function createCheckboxHandler(element, config, fireEvent) {
             return;
         var value = input.value;
         var selectedRows = getSelectedRows();
-        if (input.checked) {
-            if (!selectedRows.includes(value))
+        var wasChecked = selectedRows.includes(value);
+        var isNowChecked = input.checked;
+        // Update state first
+        if (isNowChecked) {
+            if (!wasChecked)
                 selectedRows.push(value);
         }
         else {
@@ -7002,14 +7005,24 @@ function createCheckboxHandler(element, config, fireEvent) {
         }
         setSelectedRows(selectedRows);
         updateHeaderCheckboxState();
+        // Fire specific checked/unchecked events after state is updated
+        if (isNowChecked && !wasChecked) {
+            fireEvent('checked');
+        }
+        else if (!isNowChecked && wasChecked) {
+            fireEvent('unchecked');
+        }
+        // Always fire changed event for backward compatibility
         fireEvent('changed');
     }
     // When the header checkbox is toggled
     function checkboxToggle(event) {
         var checked = !isChecked();
+        // Update state first, then fire events
+        change(checked);
+        // Fire checked/unchecked events after state is updated
         var eventType = checked ? 'checked' : 'unchecked';
         fireEvent(eventType);
-        change(checked);
     }
     // Change all visible checkboxes and update selectedRows
     function change(checked) {
@@ -8405,11 +8418,9 @@ var KTDataTable = /** @class */ (function (_super) {
                     apiEndpointWithQueryParams.search = queryParams.toString();
                     this._config.apiEndpoint = apiEndpointWithQueryParams.toString();
                 }
-                return [2 /*return*/, fetch(this._config.apiEndpoint, {
-                        method: requestMethod,
-                        body: requestBody,
-                        headers: this._config.requestHeaders,
-                    }).catch(function (error) {
+                return [2 /*return*/, fetch(this._config.apiEndpoint, __assign({ method: requestMethod, body: requestBody, headers: this._config.requestHeaders }, (this._config.requestCredentials && {
+                        credentials: this._config.requestCredentials,
+                    }))).catch(function (error) {
                         // Trigger an error event
                         _this._fireEvent('error', { error: error });
                         _this._dispatchEvent('error', { error: error });
@@ -9243,7 +9254,9 @@ var KTModal = /** @class */ (function (_super) {
         this._element.addEventListener('click', function (event) {
             if (_this._element !== event.target)
                 return;
-            if (_this._getOption('backdropStatic') === false) {
+            // Only hide if both backdropStatic is false AND persistent is false
+            if (_this._getOption('backdropStatic') === false &&
+                utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
                 _this._hide();
             }
         });
@@ -9632,6 +9645,26 @@ var KTSelectDropdown = /** @class */ (function (_super) {
             this._dropdownElement.style.width = "".concat(toggleWidth, "px");
         }
     };
+    /**
+     * Detect if the select is inside a modal container
+     * @returns The modal element if found, null otherwise
+     */
+    KTSelectDropdown.prototype._getModalContainer = function () {
+        return this._element.closest('[data-kt-modal], .kt-modal, .kt-modal-center');
+    };
+    /**
+     * Get the appropriate positioning strategy based on context
+     * @returns 'fixed' if inside modal, 'absolute' otherwise
+     */
+    KTSelectDropdown.prototype._getPositioningStrategy = function () {
+        // Check if config explicitly sets strategy
+        if (this._config.dropdownStrategy) {
+            return this._config.dropdownStrategy;
+        }
+        // Use fixed positioning if inside a modal (to handle transform-based centering)
+        var modalParent = this._getModalContainer();
+        return modalParent ? 'fixed' : 'absolute';
+    };
     /**
      * Initialize the Popper instance for dropdown positioning
      */
@@ -9642,9 +9675,12 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         var offsetValue = '0, 5';
         // Get configuration options
         var placement = this._config.dropdownPlacement || 'bottom-start';
-        var strategy = this._config.dropdownStrategy || 'fixed';
+        var strategy = this._getPositioningStrategy();
         var preventOverflow = this._config.dropdownPreventOverflow !== false;
         var flip = this._config.dropdownFlip !== false;
+        // Detect modal container for boundary
+        var modalParent = this._getModalContainer();
+        var boundary = modalParent || 'clippingParents';
         // Create new popper instance
         this._popperInstance = (0, core_1.createPopper)(this._toggleElement, this._dropdownElement, {
             placement: placement,
@@ -9659,7 +9695,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
                 {
                     name: 'preventOverflow',
                     options: {
-                        boundary: 'viewport',
+                        boundary: boundary,
                         altAxis: preventOverflow,
                     },
                 },
@@ -11660,6 +11696,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._selectAllButtonToggle = null;
         _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         _this._mutationObserver = null;
+        _this._preSelectedValues = [];
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -11773,6 +11810,14 @@ var KTSelect = /** @class */ (function (_super) {
      * Clear existing options from the select element
      */
     KTSelect.prototype._clearExistingOptions = function () {
+        // Capture pre-selected values before clearing (for remote data)
+        var selectedOptions = Array.from(this._element.querySelectorAll('option[selected]:not([value=""])'));
+        if (selectedOptions.length > 0) {
+            this._preSelectedValues = selectedOptions.map(function (opt) { return opt.value; });
+            if (this._config.debug) {
+                console.log('Captured pre-selected values before clearing:', this._preSelectedValues);
+            }
+        }
         // Keep only the empty/placeholder option and remove the rest
         var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
         options.forEach(function (option) { return option.remove(); });
@@ -11829,7 +11874,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Batch append all options at once
         optionsContainer.appendChild(fragment);
         // Update options NodeList
-        this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+        this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
         if (this._config.debug) {
             console.log("Rendered ".concat(optionsData.length, " options in dropdown"));
         }
@@ -11849,6 +11894,47 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._completeRemoteSetup = function () {
         // Initialize options
         this._preSelectOptions(this._element);
+        // Apply pre-selected values captured before remote data was loaded
+        if (this._preSelectedValues.length > 0) {
+            if (this._config.debug) {
+                console.log('Applying pre-selected values after remote data loaded:', this._preSelectedValues);
+            }
+            // Get all available option values from the loaded remote data
+            var availableValues_1 = Array.from(this._element.querySelectorAll('option')).map(function (opt) { return opt.value; });
+            // Filter pre-selected values to only those that exist in remote data
+            var validPreSelectedValues = this._preSelectedValues.filter(function (value) {
+                return availableValues_1.includes(value);
+            });
+            if (validPreSelectedValues.length > 0) {
+                // For single-select mode, only use the first value
+                var valuesToSelect = this._config.multiple
+                    ? validPreSelectedValues
+                    : [validPreSelectedValues[0]];
+                if (this._config.debug) {
+                    console.log('Selecting matched values:', valuesToSelect);
+                }
+                // Get any existing selections from _preSelectOptions (e.g., data-kt-select-pre-selected)
+                var existingSelections = this._state.getSelectedOptions();
+                // Merge existing selections with native pre-selected values (no duplicates)
+                var allSelections_1 = this._config.multiple
+                    ? Array.from(new Set(__spreadArray(__spreadArray([], existingSelections, true), valuesToSelect, true)))
+                    : valuesToSelect;
+                // Set all selections at once to avoid toggling issues
+                this._state.setSelectedOptions(allSelections_1);
+                // Update the native select element to match
+                Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
+                    opt.selected = allSelections_1.includes(opt.value);
+                });
+                // Update the visual display
+                this.updateSelectedOptionDisplay();
+                this._updateSelectedOptionClass();
+            }
+            else if (this._config.debug) {
+                console.log('None of the pre-selected values matched remote data:', this._preSelectedValues);
+            }
+            // Clear the pre-selected values array after processing
+            this._preSelectedValues = [];
+        }
         // Apply disabled state if needed
         this._applyInitialDisabledState();
         // Initialize search if enabled
@@ -12032,7 +12118,7 @@ var KTSelect = /** @class */ (function (_super) {
             }
         });
         // Update options NodeList to include the new options
-        this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
         if (this._config.debug)
             console.log("Added ".concat(newItems.length, " more options to dropdown"));
     };
@@ -12176,7 +12262,7 @@ var KTSelect = /** @class */ (function (_super) {
         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]");
+        this._options = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
      * Attach all event listeners to elements
@@ -12483,6 +12569,22 @@ var KTSelect = /** @class */ (function (_super) {
             selectedOptions: this.getSelectedOptions(),
         });
     };
+    /**
+     * Sync native select value attribute for FormData support
+     */
+    KTSelect.prototype._syncNativeSelectValue = function () {
+        var selectedOptions = this.getSelectedOptions();
+        if (this._config.multiple) {
+            // For multiple select, the selected options are marked via option.selected
+            // The native select's value property will return the first selected option's value
+            // FormData will include all selected values automatically
+        }
+        else {
+            // For single select, set the value attribute explicitly
+            var selectedValue = selectedOptions.length > 0 ? selectedOptions[0] : '';
+            this._element.value = selectedValue;
+        }
+    };
     /**
      * Update selected option display value
      */
@@ -12490,6 +12592,8 @@ var KTSelect = /** @class */ (function (_super) {
         var selectedOptions = this.getSelectedOptions();
         var tagsEnabled = this._config.tags && this._tagsModule;
         var valueDisplayEl = this.getValueDisplayElement();
+        // Sync native select value for FormData support
+        this._syncNativeSelectValue();
         if (tagsEnabled) {
             // Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
             this._tagsModule.updateTagsDisplay(selectedOptions);
@@ -12546,7 +12650,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype._updateSelectedOptionClass = function () {
         var _this = this;
-        var allOptions = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
+        var allOptions = this._dropdownContentElement.querySelectorAll("[data-kt-select-option]");
         var selectedValues = this._state.getSelectedOptions();
         var maxReached = typeof this._config.maxSelections === 'number' &&
             selectedValues.length >= this._config.maxSelections;
@@ -12591,6 +12695,8 @@ var KTSelect = /** @class */ (function (_super) {
         Array.from(this._element.querySelectorAll('option')).forEach(function (opt) {
             opt.selected = false;
         });
+        // Clear native select value
+        this._element.value = '';
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
         // Update select all button state
@@ -12759,7 +12865,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.showAllOptions = function () {
         // Get all options in the dropdown
-        var options = Array.from(this._wrapperElement.querySelectorAll("[data-kt-select-option]"));
+        var options = Array.from(this._dropdownContentElement.querySelectorAll("[data-kt-select-option]"));
         // Show all options by removing the hidden class and any inline styles
         options.forEach(function (option) {
             var _a;
@@ -12906,6 +13012,214 @@ var KTSelect = /** @class */ (function (_super) {
         // Call parent dispose to clean up data
         _super.prototype.dispose.call(this);
     };
+    /**
+     * ========================================================================
+     * DYNAMIC CONTROL METHODS
+     * ========================================================================
+     */
+    /**
+     * Programmatically enable the select component
+     * @public
+     */
+    KTSelect.prototype.enable = function () {
+        // Update config state
+        this._config.disabled = false;
+        // Remove disabled attribute from native select
+        this._element.removeAttribute('disabled');
+        this._element.classList.remove('disabled');
+        // Remove disabled state from wrapper and display elements
+        if (this._wrapperElement) {
+            this._wrapperElement.classList.remove('disabled');
+        }
+        if (this._displayElement) {
+            this._displayElement.removeAttribute('aria-disabled');
+        }
+        // Dispatch enabled event
+        this._dispatchEvent('enabled');
+        this._fireEvent('enabled');
+    };
+    /**
+     * Programmatically disable the select component
+     * @public
+     */
+    KTSelect.prototype.disable = function () {
+        // Update config state
+        this._config.disabled = true;
+        // Close dropdown if currently open
+        if (this._dropdownIsOpen) {
+            this.closeDropdown();
+        }
+        // Add disabled attribute to native select
+        this._element.setAttribute('disabled', 'disabled');
+        this._element.classList.add('disabled');
+        // Add disabled state to wrapper and display elements
+        if (this._wrapperElement) {
+            this._wrapperElement.classList.add('disabled');
+        }
+        if (this._displayElement) {
+            this._displayElement.setAttribute('aria-disabled', 'true');
+        }
+        // Dispatch disabled event
+        this._dispatchEvent('disabled');
+        this._fireEvent('disabled');
+    };
+    /**
+     * Update the dropdown to sync with native select element changes
+     * For remote selects, refetches data from the server
+     * Optionally accepts new options to replace existing ones (static selects only)
+     * @param newOptions Optional array of new options [{value, text}, ...]
+     * @public
+     */
+    KTSelect.prototype.update = function (newOptions) {
+        var _this = this;
+        // For remote selects, refetch data
+        if (this._config.remote && this._remoteModule) {
+            this._remoteModule
+                .fetchData()
+                .then(function (items) {
+                // Clear existing options
+                _this._clearExistingOptions();
+                // Add new options from remote data
+                items.forEach(function (item) {
+                    var option = document.createElement('option');
+                    option.value = item.id;
+                    option.textContent = item.title;
+                    if (item.disabled)
+                        option.disabled = true;
+                    _this._element.appendChild(option);
+                });
+                // Rebuild dropdown
+                _this._rebuildOptionsFromNative();
+                // Dispatch updated event
+                _this._dispatchEvent('updated');
+                _this._fireEvent('updated');
+            })
+                .catch(function (error) {
+                console.error('Error updating remote data:', error);
+                _this._dispatchEvent('updateError');
+                _this._fireEvent('updateError');
+            });
+        }
+        else {
+            // For static selects, handle new options
+            if (newOptions) {
+                // Clear existing options except placeholder
+                this._clearExistingOptions();
+                // Add new options to native select
+                newOptions.forEach(function (opt) {
+                    var option = document.createElement('option');
+                    option.value = opt.value;
+                    option.textContent = opt.text;
+                    _this._element.appendChild(option);
+                });
+            }
+            // Rebuild dropdown from native select
+            this._rebuildOptionsFromNative();
+            // Dispatch updated event
+            this._dispatchEvent('updated');
+            this._fireEvent('updated');
+        }
+    };
+    /**
+     * Reload remote data and rebuild the dropdown
+     * Only works with remote data enabled
+     * @returns Promise that resolves when reload completes
+     * @public
+     */
+    KTSelect.prototype.reload = function () {
+        var _this = this;
+        // Guard clause: only works with remote data
+        if (!this._config.remote || !this._remoteModule) {
+            console.warn('reload() only works with remote data enabled');
+            return Promise.resolve();
+        }
+        // Dispatch reload start event
+        this._dispatchEvent('reloadStart');
+        this._fireEvent('reloadStart');
+        // Fetch fresh remote data
+        return this._remoteModule
+            .fetchData()
+            .then(function (items) {
+            // Clear existing options
+            _this._clearExistingOptions();
+            // Update state with new items
+            return _this._state.setItems(items).then(function () {
+                // Generate new options HTML
+                _this._generateOptionsHtml(_this._element);
+                // Update the dropdown
+                _this._updateDropdownWithNewOptions();
+                // Sync selection state from native select
+                _this._syncSelectionFromNative();
+                // Update visual display
+                _this.updateSelectedOptionDisplay();
+                _this._updateSelectedOptionClass();
+                // Update select all button state if applicable
+                if (_this._config.multiple && _this._config.enableSelectAll) {
+                    _this.updateSelectAllButtonState();
+                }
+                // Dispatch reload complete event
+                _this._dispatchEvent('reloadComplete');
+                _this._fireEvent('reloadComplete');
+            });
+        })
+            .catch(function (error) {
+            console.error('Error reloading remote data:', error);
+            // Dispatch reload error event with error details
+            _this._dispatchEvent('reloadError', { error: error });
+            _this._fireEvent('reloadError', { error: error });
+            // Re-throw error so caller can handle it
+            throw error;
+        });
+    };
+    /**
+     * Refresh the visual display and state without rebuilding options
+     * For remote selects, refetches data from the server
+     * @public
+     */
+    KTSelect.prototype.refresh = function () {
+        var _this = this;
+        // For remote selects, refetch data
+        if (this._config.remote && this._remoteModule) {
+            this._remoteModule
+                .fetchData()
+                .then(function (items) {
+                // Clear existing options
+                _this._clearExistingOptions();
+                // Add new options
+                items.forEach(function (item) {
+                    var option = document.createElement('option');
+                    option.value = item.id;
+                    option.textContent = item.title;
+                    if (item.disabled)
+                        option.disabled = true;
+                    _this._element.appendChild(option);
+                });
+                // Rebuild dropdown
+                _this._rebuildOptionsFromNative();
+                // Sync selection state
+                _this._syncSelectionFromNative();
+                // Reapply ARIA attributes
+                _this._setAriaAttributes();
+                // Dispatch refreshed event
+                _this._dispatchEvent('refreshed');
+                _this._fireEvent('refreshed');
+            })
+                .catch(function (error) {
+                console.error('Error refreshing remote data:', error);
+                _this._dispatchEvent('refreshError');
+                _this._fireEvent('refreshError');
+            });
+        }
+        else {
+            // For static selects, just sync visual state
+            this._syncSelectionFromNative();
+            // Reapply ARIA attributes
+            this._setAriaAttributes();
+            // Dispatch refreshed event
+            this._dispatchEvent('refreshed');
+            this._fireEvent('refreshed');
+        }
+    };
     /**
      * ========================================================================
      * STATIC METHODS
@@ -13039,7 +13353,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Restore original options
         optionsContainer.innerHTML = this._originalOptionsHtml;
         // Update options NodeList
-        this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+        this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
         // Refresh search module
         if (this._searchModule) {
             this._searchModule.refreshAfterSearch();
@@ -13344,7 +13658,7 @@ var KTSelect = /** @class */ (function (_super) {
                     optionsContainer_1.appendChild(renderedOption);
                 });
                 // Update internal references
-                this._options = this._wrapperElement.querySelectorAll('[data-kt-select-option]');
+                this._options = this._dropdownContentElement.querySelectorAll('[data-kt-select-option]');
             }
         }
         // Sync selection after rebuilding
@@ -18308,6 +18622,11 @@ var KTSelectState = /** @class */ (function () {
         return this._config;
     };
     KTSelectState.prototype.setSelectedOptions = function (value) {
+        // Handle empty array case first to prevent undefined elements
+        if (Array.isArray(value) && value.length === 0) {
+            this._selectedOptions = [];
+            return;
+        }
         if (this._config.multiple &&
             typeof value === 'string' &&
             !this._selectedOptions.includes(value)) {