@keenthemes/ktui 1.0.7 → 1.0.9

package/lib/esm/components/select/config.js

@@ -0,0 +1,223 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var DefaultConfig = {
+    // ...other config options
+    loadMoreText: 'Load more...',
+    // 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
+    onFetch: null, // Callback function to fetch options asynchronously
+    // Remote Data Configuration
+    remote: false, // Enable/disable remote data fetching
+    dataUrl: null, // URL to fetch options from
+    apiDataProperty: null, // Property in the response object that contains the options
+    remoteErrorMessage: 'Failed to load data', // Error message to display if remote data fetch fails
+    // Field Mapping
+    dataValueField: null, // Property in the option object that contains the value (default: 'id')
+    dataFieldText: null, // Property in the option object that contains the text (default: 'title')
+    dataFieldDescription: null, // Property in the option object that contains the description
+    dataFieldIcon: null, // Property in the option object that contains the icon
+    dataFieldIconWidth: null, // Property in the option object that contains the icon width
+    dataFieldIconHeight: null, // Property in the option object that contains the icon height
+    // Search Configuration
+    searchParam: '', // Query parameter for API search requests
+    searchDebounce: 300, // Debounce delay for search (in ms)
+    // Pagination Configuration
+    pagination: false, // Enable/disable pagination for remote data
+    paginationLimit: 10, // Items per page
+    paginationPageParam: 'page', // Parameter name for page number
+    paginationLimitParam: 'limit', // Parameter name for items per page
+    paginationTotalParam: 'total', // Parameter name for total items
+    // Selection Behavior
+    multiple: false, // Enable/disable multi-select
+    maxSelections: null, // Maximum number of selections allowed in multi-select mode (null for unlimited)
+    closeOnSelect: true, // Close the dropdown after selecting an option (single-select only)
+    disabled: false, // Disable the select component
+    isRequired: false, // Make selection required
+    mode: null, // Select mode: tags or combobox
+    // Search Functionality
+    enableSearch: false, // Enable/disable search functionality within the dropdown
+    searchPlaceholder: 'Search...', // Placeholder text for the search input
+    searchAutofocus: true, // Autofocus on search input when dropdown opens
+    searchMinLength: 0, // Minimum characters required to trigger search
+    searchMaxItems: 50, // Maximum number of search results to display
+    searchNotFoundText: 'No results found', // Text to display when no search results are found
+    searchHighlight: true, // Highlight matching search terms within the options
+    clearSearchOnClose: true, // Clear search input when dropdown closes
+    // Multi-Select Display
+    selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
+    clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
+    showSelectedCount: true, // Show the number of selected options in multi-select mode
+    renderSelected: null, // Custom function to render the selected value(s) in the display area
+    // Accessibility & Usability
+    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
+    dropdownPlacement: null,
+    dropdownFlip: false,
+    dropdownPreventOverflow: false,
+    dropdownStrategy: null,
+    dropdownWidth: null, // Custom width for dropdown (e.g., '300px'), null to match toggle element width
+    // Styling
+    focusClass: 'option-focused',
+    hoverClass: 'hovered',
+    bgClass: 'bg-blue-50',
+    fontClass: 'font-medium',
+};
+var KTSelectState = /** @class */ (function () {
+    function KTSelectState(config) {
+        this._selectedOptions = [];
+        this._config = this._initDefaultConfig(config);
+    }
+    KTSelectState.prototype._initDefaultConfig = function (config) {
+        return __assign(__assign({}, DefaultConfig), config);
+    };
+    KTSelectState.prototype.setItems = function (items, query) {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            if (items) {
+                _this._config.items = items;
+                resolve();
+            }
+            else if (_this._config.dataUrl) {
+                _this._fetchRemoteData(query)
+                    .then(resolve) // Resolve after _fetchRemoteData completes
+                    .catch(reject);
+            }
+            else if (_this._config.onFetch) {
+                _this._config.isLoading = true;
+                _this._config
+                    .onFetch(query)
+                    .then(function (items) {
+                    _this._config.items = items;
+                    resolve(); // Resolve after onFetch completes
+                })
+                    .catch(function (error) {
+                    console.error('Error fetching data:', error);
+                    reject(error); // Reject on error
+                })
+                    .finally(function () {
+                    _this._config.isLoading = false;
+                });
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    KTSelectState.prototype._fetchRemoteData = function (query) {
+        var _this = this;
+        this._config.isLoading = true; // Show loading indicator
+        var url = this._config.dataUrl;
+        if (query) {
+            url += "?".concat(this._config.searchParam, "=").concat(encodeURIComponent(query));
+        }
+        return fetch(url)
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+            if (_this._config.apiDataProperty) {
+                // Extract the data property from the response
+                if (_this._config.apiDataProperty in data) {
+                    data = data[_this._config.apiDataProperty];
+                }
+                else {
+                    console.error('Error fetching data:', "Property '".concat(_this._config.apiDataProperty, "' not found in response"));
+                    return;
+                }
+            }
+            _this._config.items = data;
+        })
+            .catch(function (error) {
+            console.error('Error fetching data:', error);
+            // Handle error (e.g., display an error message)
+        })
+            .finally(function () {
+            _this._config.isLoading = false; // Hide loading indicator
+        });
+    };
+    KTSelectState.prototype.getItems = 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
+        }); });
+    };
+    KTSelectState.prototype.getConfig = function () {
+        return this._config;
+    };
+    KTSelectState.prototype.setSelectedOptions = function (value) {
+        if (this._config.multiple &&
+            typeof value === 'string' &&
+            !this._selectedOptions.includes(value)) {
+            this._selectedOptions.push(value);
+        }
+        else if (!this._config.multiple) {
+            // For single select, replace the previous selection with the new one
+            this._selectedOptions = typeof value === 'string' ? [value] : [value[0]];
+        }
+        else if (this._config.multiple && Array.isArray(value)) {
+            // For multiple select with array input, use the provided array
+            this._selectedOptions = __spreadArray([], value, true);
+        }
+    };
+    KTSelectState.prototype.toggleSelectedOptions = function (value) {
+        if (!this._config.multiple) {
+            // For non-multiple, always set the new value
+            this._selectedOptions = [value];
+            return;
+        }
+        // For multiple selection, toggle the value
+        var index = this._selectedOptions.indexOf(value);
+        if (index > -1) {
+            this._selectedOptions.splice(index, 1);
+        }
+        else {
+            this._selectedOptions.push(value);
+        }
+    };
+    KTSelectState.prototype.getSelectedOptions = function () {
+        return this._selectedOptions;
+    };
+    KTSelectState.prototype.isSelected = function (value) {
+        return this._selectedOptions.includes(value);
+    };
+    KTSelectState.prototype.modifyConfig = function (config) {
+        this._config = __assign(__assign({}, this._config), config);
+    };
+    return KTSelectState;
+}());
+export { KTSelectState };
+export var SelectOptionDefaultConfig = {
+    description: '',
+    icon: null,
+};
+//# sourceMappingURL=config.js.map

package/lib/esm/components/select/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/components/select/config.ts"],"names":[],"mappings":"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"}

package/lib/esm/components/select/dropdown.js

@@ -0,0 +1,426 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { createPopper, } from '@popperjs/core';
+import KTDom from '../../helpers/dom';
+import KTData from '../../helpers/data';
+import KTComponent from '../component';
+import { FocusManager, EventManager } from './utils';
+/**
+ * KTSelectDropdown
+ *
+ * A specialized dropdown implementation for the KTSelect component.
+ * This module handles the dropdown functionality for the select component,
+ * including positioning, showing/hiding, and keyboard navigation.
+ */
+var KTSelectDropdown = /** @class */ (function (_super) {
+    __extends(KTSelectDropdown, _super);
+    /**
+     * Constructor
+     * @param element The parent element (select wrapper)
+     * @param toggleElement The element that triggers the dropdown
+     * @param dropdownElement The dropdown content element
+     * @param config The configuration options
+     */
+    function KTSelectDropdown(element, toggleElement, dropdownElement, config) {
+        var _this = _super.call(this) || this;
+        _this._name = 'select-dropdown';
+        // State
+        _this._isOpen = false;
+        _this._isTransitioning = false;
+        _this._popperInstance = null;
+        _this._element = element;
+        _this._toggleElement = toggleElement;
+        _this._dropdownElement = dropdownElement;
+        _this._config = config;
+        _this._eventManager = new EventManager();
+        _this._focusManager = new FocusManager(dropdownElement, '[data-kt-select-option]', config);
+        _this._setupEventListeners();
+        return _this;
+    }
+    /**
+     * Set up event listeners for the dropdown
+     */
+    KTSelectDropdown.prototype._setupEventListeners = function () {
+        // Toggle click
+        this._eventManager.addListener(this._toggleElement, 'click', this._handleToggleClick.bind(this));
+        // Keyboard navigation
+        this._eventManager.addListener(this._element, 'keydown', this._handleKeyDown.bind(this));
+        // Close on outside click
+        this._eventManager.addListener(document, 'click', this._handleOutsideClick.bind(this));
+    };
+    /**
+     * Handle toggle element click
+     */
+    KTSelectDropdown.prototype._handleToggleClick = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    };
+    /**
+     * Handle keyboard events
+     */
+    KTSelectDropdown.prototype._handleKeyDown = function (event) {
+        if (!this._isOpen)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this._toggleElement.focus();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusManager.focusNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusManager.focusPrevious();
+                break;
+            case 'Home':
+                event.preventDefault();
+                // Focus first visible option
+                var firstOption = this._focusManager.getVisibleOptions()[0];
+                if (firstOption) {
+                    this._focusManager.applyFocus(firstOption);
+                    this._focusManager.scrollIntoView(firstOption);
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                // Focus last visible option
+                var visibleOptions = this._focusManager.getVisibleOptions();
+                var lastOption = visibleOptions[visibleOptions.length - 1];
+                if (lastOption) {
+                    this._focusManager.applyFocus(lastOption);
+                    this._focusManager.scrollIntoView(lastOption);
+                }
+                break;
+        }
+    };
+    /**
+     * Handle clicks outside the dropdown
+     */
+    KTSelectDropdown.prototype._handleOutsideClick = function (event) {
+        if (!this._isOpen)
+            return;
+        var target = event.target;
+        if (!this._element.contains(target) &&
+            !this._dropdownElement.contains(target)) {
+            this.close();
+        }
+    };
+    /**
+     * Set width of dropdown based on toggle element
+     */
+    KTSelectDropdown.prototype._setDropdownWidth = function () {
+        if (!this._dropdownElement || !this._toggleElement)
+            return;
+        // Check if width is configured
+        if (this._config.dropdownWidth) {
+            // If custom width is set, use that
+            this._dropdownElement.style.width = this._config.dropdownWidth;
+        }
+        else {
+            // Otherwise, match toggle element width for a cleaner appearance
+            var toggleWidth = this._toggleElement.offsetWidth;
+            this._dropdownElement.style.width = "".concat(toggleWidth, "px");
+        }
+    };
+    /**
+     * Initialize the Popper instance for dropdown positioning
+     */
+    KTSelectDropdown.prototype._initPopper = function () {
+        // Destroy existing popper instance if it exists
+        this._destroyPopper();
+        // Default offset
+        var offsetValue = '0, 5';
+        // Get configuration options
+        var placement = this._config.dropdownPlacement || 'bottom-start';
+        var strategy = this._config.dropdownStrategy || 'fixed';
+        var preventOverflow = this._config.dropdownPreventOverflow !== false;
+        var flip = this._config.dropdownFlip !== false;
+        // Create new popper instance
+        this._popperInstance = createPopper(this._toggleElement, this._dropdownElement, {
+            placement: placement,
+            strategy: strategy,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: this._parseOffset(offsetValue),
+                    },
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        boundary: 'viewport',
+                        altAxis: preventOverflow,
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        enabled: flip,
+                        fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
+                    },
+                },
+                {
+                    name: 'sameWidth',
+                    enabled: !this._config.dropdownWidth,
+                    phase: 'beforeWrite',
+                    requires: ['computeStyles'],
+                    fn: function (_a) {
+                        var state = _a.state;
+                        state.styles.popper.width = "".concat(state.rects.reference.width, "px");
+                    },
+                    effect: function (_a) {
+                        var state = _a.state;
+                        // Add type guard for HTMLElement
+                        var reference = state.elements.reference;
+                        if (reference && 'offsetWidth' in reference) {
+                            state.elements.popper.style.width = "".concat(reference.offsetWidth, "px");
+                        }
+                    },
+                },
+            ],
+        });
+    };
+    /**
+     * Parse offset string into an array of numbers
+     */
+    KTSelectDropdown.prototype._parseOffset = function (offset) {
+        return offset.split(',').map(function (value) { return parseInt(value.trim(), 10); });
+    };
+    /**
+     * Destroy the Popper instance
+     */
+    KTSelectDropdown.prototype._destroyPopper = function () {
+        if (this._popperInstance) {
+            this._popperInstance.destroy();
+            this._popperInstance = null;
+        }
+    };
+    /**
+     * Update dropdown position
+     */
+    KTSelectDropdown.prototype.updatePosition = function () {
+        if (this._popperInstance) {
+            this._popperInstance.update();
+        }
+    };
+    /**
+     * Toggle the dropdown
+     */
+    KTSelectDropdown.prototype.toggle = function () {
+        if (this._config.debug)
+            console.log('KTSelectDropdown.toggle called - isOpen:', this._isOpen);
+        if (this._isTransitioning) {
+            if (this._config.debug)
+                console.log('KTSelectDropdown.toggle - ignoring during transition');
+            return;
+        }
+        if (this._isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    /**
+     * Open the dropdown
+     */
+    KTSelectDropdown.prototype.open = function () {
+        var _this = this;
+        if (this._isOpen || this._isTransitioning)
+            return;
+        // Fire before show event
+        var beforeShowEvent = new CustomEvent('kt.select.dropdown.show', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._element.dispatchEvent(beforeShowEvent);
+        if (beforeShowEvent.defaultPrevented)
+            return;
+        // Begin opening transition
+        this._isTransitioning = true;
+        // Set initial styles - remove display: block and use class toggling instead
+        this._dropdownElement.classList.remove('hidden');
+        this._dropdownElement.style.opacity = '0';
+        // Set dropdown width
+        this._setDropdownWidth();
+        // Make sure the element is visible for transitioning
+        KTDom.reflow(this._dropdownElement);
+        // Apply z-index if configured
+        if (this._config.dropdownZindex) {
+            this._dropdownElement.style.zIndex =
+                this._config.dropdownZindex.toString();
+        }
+        else {
+            // Auto-calculate z-index
+            var parentZindex = KTDom.getHighestZindex(this._element);
+            if (parentZindex) {
+                this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
+            }
+        }
+        // Initialize popper for positioning
+        this._initPopper();
+        // Add active classes
+        this._dropdownElement.classList.add('open');
+        this._toggleElement.classList.add('active');
+        this._toggleElement.setAttribute('aria-expanded', 'true');
+        // Start transition
+        this._dropdownElement.style.opacity = '1';
+        // Handle transition end
+        KTDom.transitionEnd(this._dropdownElement, function () {
+            _this._isTransitioning = false;
+            _this._isOpen = true;
+            // Focus the first item if search is enabled
+            if (_this._config.enableSearch) {
+                var searchInput = _this._dropdownElement.querySelector('input[type="search"]');
+                if (searchInput) {
+                    searchInput.focus();
+                }
+                else {
+                    _this._focusFirstOption();
+                }
+            }
+            else {
+                _this._focusFirstOption();
+            }
+            // Fire after show event
+            var afterShowEvent = new CustomEvent('kt.select.dropdown.shown', {
+                bubbles: true,
+            });
+            _this._element.dispatchEvent(afterShowEvent);
+        });
+    };
+    /**
+     * Focus the first option in the dropdown
+     */
+    KTSelectDropdown.prototype._focusFirstOption = function () {
+        var firstOption = this._focusManager.getVisibleOptions()[0];
+        if (firstOption) {
+            this._focusManager.applyFocus(firstOption);
+            this._focusManager.scrollIntoView(firstOption);
+        }
+    };
+    /**
+     * Close the dropdown
+     */
+    KTSelectDropdown.prototype.close = function () {
+        var _this = this;
+        if (this._config.debug)
+            console.log('KTSelectDropdown.close called - isOpen:', this._isOpen, 'isTransitioning:', this._isTransitioning);
+        if (!this._isOpen || this._isTransitioning) {
+            if (this._config.debug)
+                console.log('KTSelectDropdown.close - early return: dropdown not open or is transitioning');
+            return;
+        }
+        // Fire before hide event
+        var beforeHideEvent = new CustomEvent('kt.select.dropdown.hide', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this._element.dispatchEvent(beforeHideEvent);
+        if (beforeHideEvent.defaultPrevented) {
+            if (this._config.debug)
+                console.log('KTSelectDropdown.close - canceling due to defaultPrevented on beforeHideEvent');
+            return;
+        }
+        if (this._config.debug)
+            console.log('KTSelectDropdown.close - starting transition');
+        // Begin closing transition
+        this._isTransitioning = true;
+        // Start transition
+        this._dropdownElement.style.opacity = '0';
+        // Use a combination of transition end and a fallback timer
+        var transitionComplete = false;
+        // Set a fixed-duration fallback in case the transition event doesn't fire
+        var fallbackTimer = setTimeout(function () {
+            if (!transitionComplete) {
+                if (_this._config.debug)
+                    console.log('KTSelectDropdown.close - fallback timer triggered');
+                completeTransition();
+            }
+        }, 300); // 300ms should be enough for most transitions
+        // Setup the transition end function
+        var completeTransition = function () {
+            if (transitionComplete)
+                return;
+            transitionComplete = true;
+            clearTimeout(fallbackTimer);
+            if (_this._config.debug)
+                console.log('KTSelectDropdown.close - transition ended');
+            // Remove active classes
+            _this._dropdownElement.classList.add('hidden');
+            _this._dropdownElement.classList.remove('open');
+            _this._toggleElement.classList.remove('active');
+            _this._toggleElement.setAttribute('aria-expanded', 'false');
+            // Reset styles - replace display: none with adding hidden class
+            _this._dropdownElement.classList.add('hidden');
+            _this._dropdownElement.style.opacity = '';
+            _this._dropdownElement.style.zIndex = '';
+            // Destroy popper
+            _this._destroyPopper();
+            // Update state
+            _this._isTransitioning = false;
+            _this._isOpen = false;
+            // Fire after hide event
+            var afterHideEvent = new CustomEvent('kt.select.dropdown.hidden', {
+                bubbles: true,
+            });
+            _this._element.dispatchEvent(afterHideEvent);
+            if (_this._config.debug)
+                console.log('KTSelectDropdown.close - complete, events fired');
+        };
+        // Handle transition end via the utility but also have the fallback
+        KTDom.transitionEnd(this._dropdownElement, completeTransition);
+    };
+    /**
+     * Check if dropdown is open
+     */
+    KTSelectDropdown.prototype.isOpen = function () {
+        return this._isOpen;
+    };
+    /**
+     * Clean up component
+     */
+    KTSelectDropdown.prototype.dispose = function () {
+        // Destroy popper
+        this._destroyPopper();
+        // Remove event listeners
+        this._eventManager.removeAllListeners(this._element);
+        this._eventManager.removeAllListeners(this._toggleElement);
+        this._eventManager.removeAllListeners(document);
+        // Clean up focus manager
+        if (this._focusManager &&
+            typeof this._focusManager.dispose === 'function') {
+            this._focusManager.dispose();
+        }
+        // Clean up state
+        this._isOpen = false;
+        this._isTransitioning = false;
+        // Remove data reference
+        KTData.remove(this._element, this._name);
+    };
+    return KTSelectDropdown;
+}(KTComponent));
+export { KTSelectDropdown };
+//# sourceMappingURL=dropdown.js.map