@keenthemes/ktui 1.0.14 → 1.0.16

package/dist/ktui.js

@@ -9311,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();
@@ -9478,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
@@ -9578,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;
@@ -11333,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);
@@ -11616,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();
@@ -11650,7 +11677,7 @@ var KTSelect = /** @class */ (function (_super) {
      * 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
@@ -11658,16 +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) {
-            // 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');
+            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 = '';
+            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 }));
@@ -11678,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)
@@ -11858,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
@@ -13552,6 +13567,7 @@ var KTDropdown = /** @class */ (function (_super) {
             offset: '0px, 5px',
             offsetRtl: '0px, 5px',
             hiddenClass: 'hidden',
+            container: '',
         };
         _this._config = _this._defaultConfig;
         _this._disabled = false;
@@ -13569,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) {
@@ -17502,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
@@ -17547,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: 105, // Initial z-index value for the dropdown
+    dropdownContainer: null, // Container element for the dropdown
     dropdownPlacement: null,
     dropdownFlip: false,
     dropdownPreventOverflow: false,