@pine-ds/core 3.14.0 → 3.14.2-dev.0

package/dist/collection/components/pds-multiselect/pds-multiselect.js

@@ -0,0 +1,1153 @@
+import { h, Host } from "@stencil/core";
+import { computePosition, flip, offset, shift, size, autoUpdate } from "@floating-ui/dom";
+import { debounceEvent } from "../../utils/utils";
+import { messageId, assignDescription } from "../../utils/form";
+import { danger, enlarge } from "@pine-ds/icons/icons";
+/**
+ * @slot (default) - Static option elements for the multiselect
+ * @slot empty - Custom empty state message when no options match
+ * @slot loading - Custom loading indicator
+ */
+export class PdsMultiselect {
+    constructor() {
+        /**
+         * Placeholder text for the input field.
+         */
+        this.placeholder = 'Select...';
+        /**
+         * Array of selected option values.
+         */
+        this.value = [];
+        /**
+         * Determines whether or not the multiselect is disabled.
+         */
+        this.disabled = false;
+        /**
+         * HTTP method for async requests.
+         */
+        this.asyncMethod = 'GET';
+        /**
+         * Debounce delay in milliseconds for search/fetch.
+         */
+        this.debounce = 300;
+        /**
+         * Maximum height of the dropdown before scrolling.
+         */
+        this.maxHeight = '300px';
+        /**
+         * Width of the trigger button (and reference for dropdown positioning).
+         */
+        this.triggerWidth = '100%';
+        /**
+         * Minimum width of the dropdown panel.
+         */
+        this.minWidth = '250px';
+        /**
+         * Visually hides the label but keeps it accessible.
+         */
+        this.hideLabel = false;
+        /**
+         * If true, the multiselect is required.
+         */
+        this.required = false;
+        /**
+         * Whether the component is currently loading async options.
+         */
+        this.loading = false;
+        // Internal state
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.highlightedIndex = -1;
+        this.internalOptions = [];
+        this.selectedItems = [];
+        this.currentPage = 1;
+        this.hasMore = false;
+        // Flag to prevent focusout from closing during open transition
+        this.isOpening = false;
+        this.handleTriggerClick = () => {
+            if (this.disabled)
+                return;
+            if (this.isOpen) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (!this.isOpen) {
+                        this.openDropdown();
+                    }
+                    break;
+            }
+        };
+        this.handleSearchInputChange = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+            this.highlightedIndex = -1;
+            // Emit search event for consumer-managed async
+            this.pdsMultiselectSearch.emit({ query: this.searchQuery });
+            // Fetch from async URL if configured
+            if (this.asyncUrl) {
+                this.debouncedFetchAsyncOptions(this.searchQuery, 1);
+            }
+        };
+        this.handleSearchInputKeyDown = (e) => {
+            const filteredOptions = this.getFilteredOptions();
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, filteredOptions.length - 1);
+                    this.scrollOptionIntoView();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    this.scrollOptionIntoView();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0) {
+                        const option = filteredOptions[this.highlightedIndex];
+                        if (option) {
+                            this.selectOption(option);
+                        }
+                    }
+                    break;
+                // Escape is handled by the global @Listen('keydown') handler
+                case 'Tab':
+                    this.closeDropdown();
+                    break;
+            }
+        };
+        this.handleContainerFocusOut = () => {
+            // Use setTimeout to delay the check - this allows click events and focus transitions to complete
+            // before we decide to close the dropdown
+            setTimeout(() => {
+                var _a;
+                // Don't close if we're in the middle of opening or already closed
+                if (!this.isOpen || this.isOpening)
+                    return;
+                const activeElement = document.activeElement;
+                // Check if focus is within our component's shadow root
+                const isInShadowRoot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement);
+                // Also check if focus is on the host element itself
+                const isOnHost = activeElement === this.el;
+                if (!isInShadowRoot && !isOnHost) {
+                    this.closeDropdown();
+                }
+            }, 0);
+        };
+        this.handleOptionMouseDown = (option) => (e) => {
+            e.preventDefault(); // Prevent focus change
+            this.toggleOption(option);
+        };
+        this.handleOptionMouseEnter = (index) => () => {
+            this.highlightedIndex = index;
+        };
+        this.handleScroll = (e) => {
+            if (!this.asyncUrl || !this.hasMore || this.loading)
+                return;
+            const target = e.target;
+            const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+            // Load more when near bottom (within 50px)
+            if (scrollBottom < 50) {
+                this.pdsMultiselectLoadOptions.emit({
+                    query: this.searchQuery,
+                    page: this.currentPage + 1,
+                });
+                this.debouncedFetchAsyncOptions(this.searchQuery, this.currentPage + 1);
+            }
+        };
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentWillLoad() {
+        this.originalSearchEmitter = this.pdsMultiselectSearch;
+        this.syncSelectedItems();
+    }
+    componentDidLoad() {
+        this.setupDebounce();
+        this.setupMutationObserver();
+        this.setupSlotChangeListener();
+        this.updateFormValue();
+        // Ensure preselected values sync after DOM is fully ready
+        // This handles cases where slot content loads after initial render (e.g., in docs/MDX)
+        requestAnimationFrame(() => {
+            this.updateOptionsFromSlot();
+            this.syncSelectedItems();
+        });
+    }
+    setupSlotChangeListener() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (slot) {
+            slot.addEventListener('slotchange', () => {
+                this.updateOptionsFromSlot();
+                this.syncSelectedItems();
+            });
+            // Also call it immediately in case content is already slotted
+            this.updateOptionsFromSlot();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.clearAsyncFetchState();
+    }
+    setupDebounce() {
+        const { pdsMultiselectSearch, debounce, originalSearchEmitter } = this;
+        this.pdsMultiselectSearch = debounce === undefined
+            ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsMultiselectSearch
+            : debounceEvent(pdsMultiselectSearch, debounce);
+    }
+    valueChanged(newValue) {
+        // Handle JSON string values (from HTML attributes)
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                if (Array.isArray(parsed)) {
+                    this.value = parsed;
+                    return; // The assignment will trigger this watcher again with the array
+                }
+            }
+            catch (_a) {
+                // Not valid JSON, treat as single value
+                this.value = newValue ? [newValue] : [];
+                return;
+            }
+        }
+        this.syncSelectedItems();
+        this.updateFormValue();
+    }
+    optionsChanged() {
+        if (this.options) {
+            this.internalOptions = [...this.options];
+        }
+    }
+    internalOptionsChanged() {
+        // Re-sync selected items when options become available
+        // This handles the case where value is set before options are loaded (e.g., from slot)
+        this.syncSelectedItems();
+    }
+    /**
+     * Sets focus on the trigger button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Handle global keyboard events for accessibility.
+     * Closes dropdown on Escape key press regardless of focus location.
+     */
+    handleWindowKeyDown(event) {
+        var _a;
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeDropdown();
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    setupMutationObserver() {
+        this.observer = new MutationObserver(() => {
+            this.updateOptionsFromSlot();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    updateOptionsFromSlot() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const options = slot.assignedElements({ flatten: true })
+            .filter((el) => el.tagName === 'OPTION')
+            .map(opt => ({
+            id: opt.value,
+            text: opt.textContent || opt.value,
+        }));
+        // Only update if we actually found options AND we're not using async/external options
+        // Don't clear internalOptions if slot returns empty (might be mid-DOM-update)
+        if (options.length > 0 && !this.asyncUrl && !this.options) {
+            this.internalOptions = options;
+        }
+    }
+    clearAsyncFetchState() {
+        var _a;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+            this.fetchDebounceTimer = undefined;
+        }
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = undefined;
+    }
+    debouncedFetchAsyncOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+        }
+        const delay = Math.max(0, (_a = this.debounce) !== null && _a !== void 0 ? _a : 0);
+        this.fetchDebounceTimer = window.setTimeout(() => {
+            this.fetchDebounceTimer = undefined;
+            this.fetchOptions(query, page);
+        }, delay);
+    }
+    syncSelectedItems() {
+        // Ensure value is an array (may be string from HTML attribute)
+        const valueArray = this.ensureValueArray();
+        const allOptions = this.getAllOptions();
+        this.selectedItems = valueArray
+            .map(val => allOptions.find(opt => String(opt.id) === String(val)))
+            .filter((opt) => opt !== undefined);
+    }
+    ensureValueArray() {
+        // Handle JSON string values passed via HTML attribute
+        if (typeof this.value === 'string') {
+            try {
+                const parsed = JSON.parse(this.value);
+                if (Array.isArray(parsed)) {
+                    this.value = parsed;
+                    return parsed;
+                }
+            }
+            catch (_a) {
+                // Not valid JSON, treat as single value
+                const singleValue = this.value;
+                this.value = singleValue ? [singleValue] : [];
+                return this.value;
+            }
+        }
+        return Array.isArray(this.value) ? this.value : [];
+    }
+    getAllOptions() {
+        return this.options || this.internalOptions;
+    }
+    getFilteredOptions() {
+        const allOptions = this.getAllOptions();
+        const query = this.searchQuery.toLowerCase();
+        return allOptions.filter(opt => {
+            // Filter by search query only - don't filter out selected items
+            if (query) {
+                return opt.text.toLowerCase().includes(query);
+            }
+            return true;
+        });
+    }
+    updateFormValue() {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            // Ensure value is an array before iterating
+            const valueArray = this.ensureValueArray();
+            // Submit as multiple values with same name (native select multiple behavior)
+            const formData = new FormData();
+            valueArray.forEach(val => {
+                if (this.name) {
+                    formData.append(this.name, val);
+                }
+            });
+            this.internals.setFormValue(formData);
+            // Update validity state for required validation
+            if (this.required && valueArray.length === 0) {
+                this.internals.setValidity({ valueMissing: true }, 'Please select at least one option.', this.triggerEl);
+            }
+            else {
+                this.internals.setValidity({});
+            }
+        }
+    }
+    async fetchOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = new AbortController();
+        this.loading = true;
+        try {
+            const url = new URL(this.asyncUrl, window.location.origin);
+            if (this.asyncMethod === 'GET') {
+                url.searchParams.set('search', query);
+                url.searchParams.set('page', String(page));
+            }
+            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                } }, (this.asyncMethod === 'POST' && {
+                body: JSON.stringify({ search: query, page }),
+            })));
+            if (!response.ok)
+                throw new Error('Failed to fetch options');
+            const data = await response.json();
+            const formattedResults = data.results.map(item => {
+                if (this.formatResult) {
+                    return this.formatResult(item);
+                }
+                return Object.assign({ id: item.id, text: item.text }, item);
+            });
+            if (page === 1) {
+                this.internalOptions = formattedResults;
+            }
+            else {
+                this.internalOptions = [...this.internalOptions, ...formattedResults];
+            }
+            this.hasMore = data.totalCount ? this.internalOptions.length < data.totalCount : false;
+            this.currentPage = page;
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error('PdsMultiselect: Failed to fetch options', error);
+            }
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    openDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpening = true;
+        this.isOpen = true;
+        this.highlightedIndex = -1;
+        // Trigger initial fetch if async
+        if (this.asyncUrl && this.internalOptions.length === 0) {
+            this.debouncedFetchAsyncOptions(this.searchQuery, 1);
+        }
+        requestAnimationFrame(() => {
+            var _a;
+            this.positionDropdown();
+            // Focus the search input after the panel is positioned
+            (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Clear the opening flag after focus has moved
+            setTimeout(() => {
+                this.isOpening = false;
+            }, 50);
+        });
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.highlightedIndex = -1;
+        this.searchQuery = '';
+        // Clean up auto-update
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    positionDropdown() {
+        if (!this.containerEl || !this.panelEl)
+            return;
+        const referenceEl = this.triggerEl || this.containerEl;
+        const { minWidth, panelWidth } = this;
+        const updatePosition = () => {
+            computePosition(referenceEl, this.panelEl, {
+                placement: 'bottom-start',
+                strategy: 'absolute',
+                middleware: [
+                    offset(12),
+                    flip(),
+                    shift({ padding: 8 }),
+                    size({
+                        apply: ({ rects, elements }) => {
+                            Object.assign(elements.floating.style, {
+                                width: panelWidth !== null && panelWidth !== void 0 ? panelWidth : `${rects.reference.width}px`,
+                                minWidth,
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                if (this.panelEl) {
+                    this.panelEl.style.left = `${x}px`;
+                    this.panelEl.style.top = `${y}px`;
+                }
+            });
+        };
+        // Initial position
+        updatePosition();
+        // Set up auto-update for window resize and scroll
+        const cleanupAutoUpdate = autoUpdate(referenceEl, this.panelEl, updatePosition);
+        this.cleanupAutoUpdate = () => {
+            cleanupAutoUpdate();
+            this.clearAsyncFetchState();
+        };
+    }
+    scrollOptionIntoView() {
+        requestAnimationFrame(() => {
+            var _a;
+            const highlighted = (_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${this.highlightedIndex}"]`);
+            highlighted === null || highlighted === void 0 ? void 0 : highlighted.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        });
+    }
+    toggleOption(option) {
+        var _a;
+        const isSelected = this.value.includes(String(option.id));
+        if (isSelected) {
+            // Remove from selection
+            const newValue = this.value.filter(v => v !== String(option.id));
+            this.value = newValue;
+            const newSelectedItems = this.selectedItems.filter(item => String(item.id) !== String(option.id));
+            this.pdsMultiselectChange.emit({
+                values: newValue,
+                items: newSelectedItems,
+            });
+        }
+        else {
+            // Add to selection
+            if (this.maxSelections && this.value.length >= this.maxSelections) {
+                return;
+            }
+            const newValue = [...this.value, String(option.id)];
+            this.value = newValue;
+            const newSelectedItems = [...this.selectedItems, option];
+            this.pdsMultiselectChange.emit({
+                values: newValue,
+                items: newSelectedItems,
+            });
+        }
+        // Keep focus on search input, don't close dropdown
+        (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    selectOption(option) {
+        // For keyboard navigation - toggle the option
+        this.toggleOption(option);
+    }
+    renderSelectedItemsList() {
+        if (this.selectedItems.length === 0)
+            return null;
+        return (h("div", { class: "pds-multiselect__selected-section" }, h("ul", { class: "pds-multiselect__selected-list", role: "list" }, this.selectedItems.map(item => (h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
+    }
+    renderDropdown() {
+        if (!this.isOpen)
+            return null;
+        const filteredOptions = this.getFilteredOptions();
+        const valueArray = this.ensureValueArray();
+        const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
+        const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
+        return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: "Find...", value: this.searchQuery, "aria-label": "Search options", "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), filteredOptions.map((option, index) => {
+            const isSelected = valueArray.includes(String(option.id));
+            const isHighlighted = index === this.highlightedIndex;
+            const optionId = `${this.componentId}-option-${index}`;
+            return (h("li", { key: String(option.id), id: optionId, class: {
+                    'pds-multiselect__option': true,
+                    'pds-multiselect__option--highlighted': isHighlighted,
+                    'pds-multiselect__option--selected': isSelected,
+                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index) }, h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, style: { pointerEvents: 'none' } })));
+        }), this.hasMore && !this.loading && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" }))))));
+    }
+    getTriggerText() {
+        const count = this.selectedItems.length;
+        if (count === 0) {
+            return this.placeholder || 'Select...';
+        }
+        return `${count} item${count === 1 ? '' : 's'}`;
+    }
+    render() {
+        const hasSelections = this.selectedItems.length > 0;
+        return (h(Host, { key: 'e7d872fd9bedb03390eaf8a2bd9c5d6ba1cc7ecc', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '141dee3c657dd17d3389d4a25979d0f748e36361', class: "pds-multiselect" }, this.label && (h("label", { key: '386114a823424506857a1e927a2538e88d3c82f5', htmlFor: this.componentId, class: {
+                'pds-multiselect__label': true,
+                'visually-hidden': this.hideLabel,
+            } }, this.label)), h("div", { key: '9fc18bf93f981ee7f72f31c20f43f5251ed647e4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: '74e8eb5ef5984307dce779ef63d54e49e07497ea', ref: el => (this.triggerEl = el), type: "button", class: {
+                'pds-multiselect__trigger': true,
+                'pds-multiselect__trigger--open': this.isOpen,
+                'pds-multiselect__trigger--disabled': this.disabled,
+                'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
+                'pds-multiselect__trigger--has-value': hasSelections,
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: 'fb7f9b9fffd46839ddc4ab0bb549b61de191f76c', class: {
+                'pds-multiselect__trigger-text': true,
+                'pds-multiselect__trigger-text--placeholder': !hasSelections,
+            } }, this.getTriggerText()), h("pds-icon", { key: '354e1c57758350d73557a6c94d0b31eb6732f12a', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !this.errorMessage && (h("p", { key: '3709f184a7972e1acfd3826faefc4ba139a8d518', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '8029b58286455b7b4789a4336a79c324ca91ad74', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'cd781f3caed8b81deef2ce43f0a4406b6ed2d53c', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '7c303f4d64247b41b9e88892cfb8c02acd5d8d59', style: { display: 'none' } }, h("slot", { key: 'e9b384038e67bb951613933bbf68fd2b2efc71ef' })))));
+    }
+    static get is() { return "pds-multiselect"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-multiselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-multiselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the multiselect label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select...'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name. Submitted with the form as part of a name/value pair."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of selected option values."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the multiselect is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "asyncUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL endpoint for async data fetching."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "async-url"
+            },
+            "asyncMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'GET' | 'POST'",
+                    "resolved": "\"GET\" | \"POST\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTTP method for async requests."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "async-method",
+                "defaultValue": "'GET'"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay in milliseconds for search/fetch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "300"
+            },
+            "maxSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of selections allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-selections"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height of the dropdown before scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "'300px'"
+            },
+            "triggerWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the trigger button (and reference for dropdown positioning)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-width",
+                "defaultValue": "'100%'"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width of the dropdown panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width",
+                "defaultValue": "'250px'"
+            },
+            "panelWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the dropdown panel. Defaults to the trigger width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-width"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label but keeps it accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper message to display below the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the multiselect is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the multiselect is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is currently loading async options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MultiselectOption[]",
+                    "resolved": "MultiselectOption[]",
+                    "references": {
+                        "MultiselectOption": {
+                            "location": "import",
+                            "path": "./multiselect-interface",
+                            "id": "src/components/pds-multiselect/multiselect-interface.ts::MultiselectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Options provided externally (for consumer-managed async)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formatResult": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: unknown) => MultiselectOption",
+                    "resolved": "(item: unknown) => MultiselectOption",
+                    "references": {
+                        "MultiselectOption": {
+                            "location": "import",
+                            "path": "./multiselect-interface",
+                            "id": "src/components/pds-multiselect/multiselect-interface.ts::MultiselectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Function to format async results. Receives raw API response item."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "searchQuery": {},
+            "highlightedIndex": {},
+            "internalOptions": {},
+            "selectedItems": {},
+            "currentPage": {},
+            "hasMore": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsMultiselectChange",
+                "name": "pdsMultiselectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes."
+                },
+                "complexType": {
+                    "original": "MultiselectChangeEventDetail",
+                    "resolved": "MultiselectChangeEventDetail",
+                    "references": {
+                        "MultiselectChangeEventDetail": {
+                            "location": "import",
+                            "path": "./multiselect-interface",
+                            "id": "src/components/pds-multiselect/multiselect-interface.ts::MultiselectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsMultiselectSearch",
+                "name": "pdsMultiselectSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search input (for consumer-managed async)."
+                },
+                "complexType": {
+                    "original": "MultiselectSearchEventDetail",
+                    "resolved": "MultiselectSearchEventDetail",
+                    "references": {
+                        "MultiselectSearchEventDetail": {
+                            "location": "import",
+                            "path": "./multiselect-interface",
+                            "id": "src/components/pds-multiselect/multiselect-interface.ts::MultiselectSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsMultiselectLoadOptions",
+                "name": "pdsMultiselectLoadOptions",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request more options (pagination)."
+                },
+                "complexType": {
+                    "original": "MultiselectLoadOptionsEventDetail",
+                    "resolved": "MultiselectLoadOptionsEventDetail",
+                    "references": {
+                        "MultiselectLoadOptionsEventDetail": {
+                            "location": "import",
+                            "path": "./multiselect-interface",
+                            "id": "src/components/pds-multiselect/multiselect-interface.ts::MultiselectLoadOptionsEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the trigger button.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "setupDebounce"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "internalOptions",
+                "methodName": "internalOptionsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleWindowKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pds-multiselect.js.map