@keenthemes/ktui 1.0.25 → 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,
                     },
                 },
@@ -12533,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
      */
@@ -12540,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);
@@ -12641,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
@@ -13009,41 +13065,160 @@ var KTSelect = /** @class */ (function (_super) {
     };
     /**
      * Update the dropdown to sync with native select element changes
-     * Optionally accepts new options to replace existing ones
+     * 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;
-        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);
+        // 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');
             });
         }
-        // Rebuild dropdown from native select
-        this._rebuildOptionsFromNative();
-        // Dispatch updated event
-        this._dispatchEvent('updated');
-        this._fireEvent('updated');
+        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 () {
-        // Sync internal state from native select first
-        this._syncSelectionFromNative();
-        // Reapply ARIA attributes
-        this._setAriaAttributes();
-        // Dispatch refreshed event
-        this._dispatchEvent('refreshed');
-        this._fireEvent('refreshed');
+        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');
+        }
     };
     /**
      * ========================================================================
@@ -18447,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)) {