@keenthemes/ktui 1.0.25 → 1.0.27

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 });
@@ -9241,9 +9252,23 @@ var KTModal = /** @class */ (function (_super) {
     KTModal.prototype._handlers = function () {
         var _this = this;
         this._element.addEventListener('click', function (event) {
-            if (_this._element !== event.target)
+            var target = event.target;
+            var currentTarget = event.currentTarget;
+            // Only proceed if clicking directly on the backdrop (modal element itself)
+            // This prevents closing when clicking inside modal content or any child elements
+            // (including dropdowns rendered via dropdownContainer pointing to modal)
+            if (target !== currentTarget) {
+                // Stop propagation for clicks inside dropdowns to prevent dropdown from closing
+                // Check if click is inside a dropdown element (KT Select dropdown)
+                var dropdownElement = target.closest('[data-kt-select-dropdown]');
+                if (dropdownElement) {
+                    event.stopPropagation();
+                }
                 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();
             }
         });
@@ -9563,8 +9588,14 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         _this._dropdownElement = dropdownElement;
         _this._config = config;
         _this._ktSelectInstance = ktSelectInstance; // Assign instance
+        // For centered modals, don't move dropdown to container to preserve positioning context
+        // For other cases, move to container if specified
+        var modalParent = _this._getModalContainer();
+        var isCenteredModal = modalParent && modalParent.classList.contains('kt-modal-center');
+        // Only move dropdown if not in centered modal (regardless of strategy override)
+        // This prevents the positioning bug even if user sets dropdownStrategy: 'fixed'
         var container = _this._resolveDropdownContainer();
-        if (container) {
+        if (container && !isCenteredModal) {
             if (container !== _this._dropdownElement.parentElement) {
                 container.appendChild(_this._dropdownElement);
             }
@@ -9632,6 +9663,49 @@ 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 boundary element for Popper positioning
+     * For centered modals, use .kt-modal-content to avoid transform calculation issues
+     * @returns The boundary element, or null if no modal found
+     */
+    KTSelectDropdown.prototype._getModalBoundary = function () {
+        var modalParent = this._getModalContainer();
+        if (!modalParent) {
+            return null;
+        }
+        // For centered modals, use .kt-modal-content as boundary to avoid transform issues
+        if (modalParent.classList.contains('kt-modal-center')) {
+            var modalContent = modalParent.querySelector('.kt-modal-content');
+            return modalContent || modalParent;
+        }
+        // For non-centered modals, use the modal element itself
+        return modalParent;
+    };
+    /**
+     * Get the appropriate positioning strategy based on context
+     * @returns 'fixed' if inside non-centered modal, 'absolute' for centered modals or no modal
+     */
+    KTSelectDropdown.prototype._getPositioningStrategy = function () {
+        // Check if config explicitly sets strategy
+        if (this._config.dropdownStrategy) {
+            return this._config.dropdownStrategy;
+        }
+        // For centered modals, use absolute positioning to avoid transform calculation issues
+        // For non-centered modals, use fixed positioning
+        var modalParent = this._getModalContainer();
+        if (modalParent && modalParent.classList.contains('kt-modal-center')) {
+            return 'absolute';
+        }
+        // Use fixed positioning for non-centered modals
+        return modalParent ? 'fixed' : 'absolute';
+    };
     /**
      * Initialize the Popper instance for dropdown positioning
      */
@@ -9642,9 +9716,11 @@ 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;
+        // Get appropriate boundary element for modal context
+        var boundary = this._getModalBoundary() || 'clippingParents';
         // Create new popper instance
         this._popperInstance = (0, core_1.createPopper)(this._toggleElement, this._dropdownElement, {
             placement: placement,
@@ -9659,7 +9735,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
                 {
                     name: 'preventOverflow',
                     options: {
-                        boundary: 'viewport',
+                        boundary: boundary,
                         altAxis: preventOverflow,
                     },
                 },
@@ -11858,6 +11934,12 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._completeRemoteSetup = function () {
         // Initialize options
         this._preSelectOptions(this._element);
+        // Prevent browser auto-selection when placeholder is configured
+        if (this._config.placeholder &&
+            this._state.getSelectedOptions().length === 0 &&
+            this._preSelectedValues.length === 0) {
+            this._element.value = '';
+        }
         // Apply pre-selected values captured before remote data was loaded
         if (this._preSelectedValues.length > 0) {
             if (this._config.debug) {
@@ -12100,6 +12182,11 @@ var KTSelect = /** @class */ (function (_super) {
         this._setupElementReferences();
         // Initialize options
         this._preSelectOptions(this._element);
+        // Prevent browser auto-selection when placeholder is configured
+        if (this._config.placeholder &&
+            this._state.getSelectedOptions().length === 0) {
+            this._element.value = '';
+        }
         // Apply disabled state if needed
         this._applyInitialDisabledState();
         // Initialize search if enabled
@@ -12533,6 +12620,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 +12643,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 +12746,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 +13116,228 @@ var KTSelect = /** @class */ (function (_super) {
     };
     /**
      * Update the dropdown to sync with native select element changes
-     * Optionally accepts new options to replace existing ones
-     * @param newOptions Optional array of new options [{value, text}, ...]
+     * For remote selects, refetches data from the server and preserves selections
+     * Optionally accepts new options to replace existing ones (static selects only)
+     *
+     * @param newOptions Optional array of new options [{value, text}, ...] (static selects only)
      * @public
+     * @remarks
+     * - For static selects: rebuilds dropdown from native select or new options
+     * - For remote selects: fetches fresh data, preserves matching selections
+     * - Selections are preserved if their values exist in new remote data
+     * - Selections are cleared if their values don't exist in new data
+     * @fires updated - After update completes successfully
+     * @fires updateError - If remote data fetch fails
      */
     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) {
+                // Capture currently selected values before clearing
+                var currentlySelected = _this._state.getSelectedOptions();
+                // Clear existing options (also captures to _preSelectedValues)
+                _this._clearExistingOptions();
+                // Get all available values from new remote data
+                var availableValues = items.map(function (item) { return item.id; });
+                // Filter to only values that exist in new data
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('update(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Add new options from remote data and restore selection state
+                items.forEach(function (item) {
+                    var option = document.createElement('option');
+                    option.value = item.id;
+                    option.textContent = item.title;
+                    if (item.disabled)
+                        option.disabled = true;
+                    // Restore selected attribute for preserved selections
+                    if (validSelections.includes(item.id)) {
+                        option.selected = true;
+                    }
+                    _this._element.appendChild(option);
+                });
+                // Rebuild dropdown
+                _this._rebuildOptionsFromNative();
+                // Sync selection state from native select (now has selected attributes)
+                _this._syncSelectionFromNative();
+                // 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');
+        // Capture currently selected values before clearing
+        var currentlySelected = this._state.getSelectedOptions();
+        // Fetch fresh remote data
+        return this._remoteModule
+            .fetchData()
+            .then(function (items) {
+            // Clear existing options (captures to _preSelectedValues)
+            _this._clearExistingOptions();
+            // Update state with new items
+            return _this._state.setItems(items).then(function () {
+                // Generate new options HTML
+                _this._generateOptionsHtml(_this._element);
+                // Preserve selections by marking matching options as selected
+                var availableValues = items.map(function (item) {
+                    return item.id !== undefined ? String(item.id) : '';
+                });
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('reload(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Mark preserved selections on new options
+                validSelections.forEach(function (value) {
+                    var option = Array.from(_this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+                    if (option) {
+                        option.selected = true;
+                    }
+                });
+                // Update the dropdown
+                _this._updateDropdownWithNewOptions();
+                // Sync selection state from native select (now has selected attributes)
+                _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 and preserves selections
+     * that exist in the newly fetched data
+     *
      * @public
+     * @remarks
+     * - For static selects: syncs visual state with native select
+     * - For remote selects: fetches fresh data, preserves matching selections
+     * - Selections are preserved if their values exist in new remote data
+     * - Selections are cleared if their values don't exist in new data
+     * @fires refreshed - After refresh completes successfully
+     * @fires refreshError - If remote data fetch fails
      */
     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) {
+                // Capture currently selected values before clearing
+                var currentlySelected = _this._state.getSelectedOptions();
+                // Clear existing options (also captures to _preSelectedValues)
+                _this._clearExistingOptions();
+                // Get all available values from new remote data
+                var availableValues = items.map(function (item) { return item.id; });
+                // Filter to only values that exist in new data
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('refresh(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Add new options and restore selection state
+                items.forEach(function (item) {
+                    var option = document.createElement('option');
+                    option.value = item.id;
+                    option.textContent = item.title;
+                    if (item.disabled)
+                        option.disabled = true;
+                    // Restore selected attribute for preserved selections
+                    if (validSelections.includes(item.id)) {
+                        option.selected = true;
+                    }
+                    _this._element.appendChild(option);
+                });
+                // Rebuild dropdown
+                _this._rebuildOptionsFromNative();
+                // Sync selection state from native select (now has selected attributes)
+                _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 +18741,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)) {