@pine-ds/core 3.26.4 → 3.28.0

package/components/pds-multiselect.js

@@ -1,1087 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom.js';
-import { d as debounceEvent } from './utils.js';
-import { i as isSpecTest, a as assignDescription, m as messageId } from './form.js';
-import { g as enlarge, h as danger } from './index2.js';
-import { d as defineCustomElement$7 } from './pds-box2.js';
-import { d as defineCustomElement$6 } from './pds-checkbox2.js';
-import { d as defineCustomElement$5 } from './pds-chip2.js';
-import { d as defineCustomElement$4 } from './pds-icon2.js';
-import { d as defineCustomElement$3 } from './pds-loader2.js';
-import { d as defineCustomElement$2 } from './pds-text2.js';
-
-const pdsMultiselectCss = ":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";
-
-const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsMultiselectChange = createEvent(this, "pdsMultiselectChange", 7);
-        this.pdsMultiselectSearch = createEvent(this, "pdsMultiselectSearch", 7);
-        this.pdsMultiselectLoadOptions = createEvent(this, "pdsMultiselectLoadOptions", 7);
-        this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate", 7);
-        this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss", 7);
-        /**
-         * Placeholder text for the input field.
-         */
-        this.placeholder = 'Select...';
-        /**
-         * Placeholder text for the search input inside the dropdown panel.
-         * @default 'Find...'
-         */
-        this.searchPlaceholder = 'Find...';
-        /**
-         * Whether to close the panel after an option is selected.
-         * Defaults to `false` (panel stays open for multi-select).
-         */
-        this.closePanelOnSelect = false;
-        /**
-         * 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;
-        /**
-         * Timeout in milliseconds for async fetch requests.
-         */
-        this.fetchTimeout = 30000;
-        /**
-         * 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;
-        /**
-         * Hides the selected items summary section in the dropdown panel.
-         */
-        this.hideSelectedItems = false;
-        /**
-         * Display mode for selected items outside the dropdown panel.
-         * `'count'` shows "N item(s)" text in the trigger (default). `'pill'` renders
-         * selected items as dismissible pds-chip tags.
-         * @default 'count'
-         */
-        this.selectedDisplay = 'count';
-        /**
-         * Position of pill chips when `selectedDisplay` is `'pill'`.
-         * `'inline'` places chips inside the trigger; `'below'` places chips in a
-         * flex-wrap row directly below the trigger.
-         * @default 'inline'
-         */
-        this.pillPosition = 'inline';
-        /**
-         * Maximum chips shown inline before collapsing to a "+N more" badge.
-         * Only applies when `selectedDisplay='pill'` and `pillPosition='inline'`.
-         * @default 3
-         */
-        this.maxInlinePills = 3;
-        /**
-         * If true, the multiselect is required.
-         */
-        this.required = false;
-        /**
-         * Whether the component is currently loading async options.
-         */
-        this.loading = false;
-        /**
-         * CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
-         */
-        this.csrfHeaderName = 'X-CSRF-Token';
-        // Internal state
-        this.isOpen = false;
-        this.searchQuery = '';
-        this.highlightedIndex = -1;
-        this.internalOptions = [];
-        this.selectedItems = [];
-        this.currentPage = 1;
-        this.hasMore = false;
-        this.creating = false;
-        this.removalAnnouncement = '';
-        // Flag to prevent focusout from closing during open transition
-        this.isOpening = false;
-        // Flag to suppress dismiss event when panel closes due to selection (not user dismissal)
-        this.isClosingViaSelection = false;
-        // Flag to track if initial async fetch has been triggered (prevents double fetch)
-        this.initialAsyncFetchTriggered = false;
-        // Flag to track if value changed during loading and needs resolution after fetch completes
-        this.pendingUnresolvedFetch = false;
-        this.handleTriggerClick = (e) => {
-            if (this.disabled)
-                return;
-            // In inline-pill mode, ignore clicks that originated inside a pds-chip.
-            // Chip close-button clicks are handled by handlePillRemove; chip body clicks should not toggle the panel.
-            if (e && this.selectedDisplay === 'pill' && this.pillPosition === 'inline') {
-                const fromChip = e.composedPath().some(el => { var _a; return ((_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'pds-chip'; });
-                if (fromChip)
-                    return;
-            }
-            if (this.isOpen) {
-                this.closeDropdown();
-            }
-            else {
-                this.openDropdown();
-            }
-        };
-        this.handleTriggerKeyDown = (e) => {
-            // Ignore keydown events that bubbled from child elements (e.g. chip close buttons).
-            // Only handle keys when the trigger itself is the event target.
-            if (e.target !== this.triggerEl)
-                return;
-            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) => {
-            var _a, _b, _c;
-            const filteredOptions = this.getFilteredOptions();
-            switch (e.key) {
-                case 'ArrowDown': {
-                    e.preventDefault();
-                    let nextIndex = this.highlightedIndex + 1;
-                    while (nextIndex < filteredOptions.length && ((_a = filteredOptions[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                        nextIndex++;
-                    }
-                    if (nextIndex < filteredOptions.length) {
-                        this.highlightedIndex = nextIndex;
-                        this.scrollOptionIntoView();
-                    }
-                    break;
-                }
-                case 'ArrowUp': {
-                    e.preventDefault();
-                    // Clamp to 0 so ArrowUp from uninitialised state (-1) attempts the first option;
-                    // stays at -1 if that option is disabled.
-                    let prevIndex = Math.max(this.highlightedIndex - 1, 0);
-                    while (prevIndex > 0 && ((_b = filteredOptions[prevIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                        prevIndex--;
-                    }
-                    if (!((_c = filteredOptions[prevIndex]) === null || _c === void 0 ? void 0 : _c.disabled)) {
-                        this.highlightedIndex = prevIndex;
-                        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, already closed,
-                // or closing due to a selection (not a user dismissal)
-                if (!this.isOpen || this.isOpening || this.isClosingViaSelection)
-                    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.pdsMultiselectDismiss.emit();
-                    this.closeDropdown();
-                }
-            }, 0);
-        };
-        this.handleOptionMouseDown = (option) => (e) => {
-            e.preventDefault(); // Prevent focus change
-            this.toggleOption(option);
-        };
-        this.handleOptionMouseEnter = (index, option) => () => {
-            if (option.disabled)
-                return;
-            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);
-            }
-        };
-        this.handlePillRemove = (item) => () => {
-            var _a, _b;
-            if (this.disabled)
-                return;
-            const optionId = String(item.id);
-            this.value = this.value.filter(v => v !== optionId);
-            this.syncSelectedItems();
-            this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
-            // Clear first so screen readers re-announce even when the same item is removed twice
-            this.removalAnnouncement = '';
-            queueMicrotask(() => { this.removalAnnouncement = `${item.text} removed`; });
-            this.isClosingViaSelection = true;
-            if (this.isOpen) {
-                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            setTimeout(() => { this.isClosingViaSelection = false; }, 0);
-        };
-    }
-    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();
-        });
-        // If we have preselected values and asyncUrl, fetch options to resolve them
-        // This ensures the trigger shows "X items" instead of placeholder on initial render
-        if (this.asyncUrl && this.ensureValueArray().length > 0) {
-            this.initialAsyncFetchTriggered = true;
-            this.fetchOptions('', 1);
-        }
-    }
-    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();
-        // If using asyncUrl and some values couldn't be resolved, fetch options
-        // This handles programmatic value changes where the options aren't loaded yet
-        if (this.asyncUrl) {
-            const valueArray = this.ensureValueArray();
-            const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;
-            if (hasUnresolvedValues) {
-                if (this.loading) {
-                    // Mark that we need to re-check after current fetch completes
-                    this.pendingUnresolvedFetch = true;
-                }
-                else {
-                    this.fetchOptions('', 1);
-                }
-            }
-        }
-    }
-    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();
-    }
-    /**
-     * Clears all selected values and resets the component.
-     */
-    async clear() {
-        const hadValues = this.value.length > 0 || this.searchQuery !== '';
-        this.value = [];
-        this.searchQuery = '';
-        this.syncSelectedItems();
-        this.updateFormValue();
-        if (hadValues) {
-            this.pdsMultiselectChange.emit({ values: [], items: [] });
-        }
-    }
-    /**
-     * 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.pdsMultiselectDismiss.emit();
-            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 }).forEach(el => {
-            var _a;
-            if (el.tagName === 'OPTGROUP') {
-                const optgroup = el;
-                const groupLabel = optgroup.label;
-                const groupDisabled = optgroup.disabled;
-                optgroup.querySelectorAll('option').forEach((opt) => {
-                    var _a;
-                    const option = {
-                        id: opt.value,
-                        text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
-                        disabled: opt.disabled || groupDisabled || undefined,
-                    };
-                    if (groupLabel) {
-                        option.group = groupLabel;
-                    }
-                    options.push(option);
-                });
-            }
-            else if (el.tagName === 'OPTION') {
-                const opt = el;
-                options.push({
-                    id: opt.value,
-                    text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
-                    disabled: opt.disabled || undefined,
-                });
-            }
-        });
-        // 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;
-        }
-        if (this.fetchTimeoutTimer !== undefined) {
-            window.clearTimeout(this.fetchTimeoutTimer);
-            this.fetchTimeoutTimer = 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();
-        // Map values to options, preserving existing selectedItems for values not yet in options
-        const newSelectedItems = [];
-        const existingItemsMap = new Map(this.selectedItems.map(item => [String(item.id), item]));
-        valueArray.forEach(val => {
-            // First try to find in available options
-            const option = allOptions.find(opt => String(opt.id) === String(val));
-            if (option) {
-                newSelectedItems.push(option);
-            }
-            else if (existingItemsMap.has(String(val))) {
-                // If not in options but exists in current selectedItems, preserve it
-                // This handles the case where async data hasn't loaded yet or newly created items
-                newSelectedItems.push(existingItemsMap.get(String(val)));
-            }
-            // Note: We don't create placeholders for values without matching options.
-            // This ensures selectedItems remains empty until options are actually loaded,
-            // which matches the expected behavior for preselected values.
-        });
-        this.selectedItems = newSelectedItems;
-    }
-    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();
-        const filtered = allOptions.filter(opt => {
-            // Filter by search query only - don't filter out selected items
-            if (query) {
-                return opt.text.toLowerCase().includes(query);
-            }
-            return true;
-        });
-        // Add create option if enabled and no matches found
-        if (this.createUrl && this.searchQuery.trim() && filtered.length === 0) {
-            return [{
-                    id: '__create__',
-                    text: this.searchQuery.trim(),
-                    isCreateOption: true,
-                }];
-        }
-        return filtered;
-    }
-    updateFormValue() {
-        var _a;
-        if (isSpecTest())
-            return;
-        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({});
-            }
-        }
-    }
-    getCsrfToken() {
-        // Use provided token if available
-        if (this.csrfToken) {
-            return this.csrfToken;
-        }
-        // Try to read from meta tag
-        const metaTag = document.querySelector('meta[name="csrf-token"]');
-        return (metaTag === null || metaTag === void 0 ? void 0 : metaTag.content) || null;
-    }
-    async fetchOptions(query, page = 1) {
-        var _a;
-        if (!this.asyncUrl)
-            return;
-        // Abort any pending request and clear existing timeout
-        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
-        if (this.fetchTimeoutTimer !== undefined) {
-            window.clearTimeout(this.fetchTimeoutTimer);
-            this.fetchTimeoutTimer = undefined;
-        }
-        this.abortController = new AbortController();
-        this.loading = true;
-        // Set up timeout for fetch request
-        this.fetchTimeoutTimer = window.setTimeout(() => {
-            var _a;
-            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
-            this.fetchTimeoutTimer = undefined;
-        }, this.fetchTimeout);
-        try {
-            // Guard against malformed asyncUrl
-            let url;
-            try {
-                url = new URL(this.asyncUrl, window.location.origin);
-            }
-            catch (urlError) {
-                throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`);
-            }
-            if (this.asyncMethod === 'GET') {
-                url.searchParams.set('search', query);
-                url.searchParams.set('page', String(page));
-            }
-            const csrfToken = this.getCsrfToken();
-            const headers = {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json',
-            };
-            if (csrfToken) {
-                const headerName = this.csrfHeaderName || 'X-CSRF-Token';
-                headers[headerName] = csrfToken;
-            }
-            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers }, (this.asyncMethod === 'POST' && {
-                body: JSON.stringify({ search: query, page }),
-            })));
-            // Clear timeout on successful response
-            if (this.fetchTimeoutTimer !== undefined) {
-                window.clearTimeout(this.fetchTimeoutTimer);
-                this.fetchTimeoutTimer = undefined;
-            }
-            if (!response.ok)
-                throw new Error('Failed to fetch options');
-            const data = await response.json();
-            const formattedResults = data.results.map(item => {
-                // If formatResult is provided, use it
-                if (this.formatResult) {
-                    return this.formatResult(item);
-                }
-                // Defensive check: ensure item is an object before spreading
-                if (typeof item === 'object' && item !== null) {
-                    return Object.assign({ id: item.id, text: item.text }, item);
-                }
-                // Handle primitives by converting to safe shape
-                return {
-                    id: String(item),
-                    text: String(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) {
-            // Clear timeout on error
-            if (this.fetchTimeoutTimer !== undefined) {
-                window.clearTimeout(this.fetchTimeoutTimer);
-                this.fetchTimeoutTimer = undefined;
-            }
-            if (error.name !== 'AbortError') {
-                console.error('PdsMultiselect: Failed to fetch options', error);
-            }
-        }
-        finally {
-            this.loading = false;
-            // Check if value changed during loading and still has unresolved values
-            if (this.pendingUnresolvedFetch) {
-                this.pendingUnresolvedFetch = false;
-                const valueArray = this.ensureValueArray();
-                const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;
-                if (hasUnresolvedValues) {
-                    this.fetchOptions('', 1);
-                }
-            }
-        }
-    }
-    async createOption(query) {
-        if (!this.createUrl || !query.trim())
-            return;
-        // Reentrancy guard: prevent duplicate POSTs if creation is already in-flight
-        if (this.creating)
-            return;
-        this.creating = true;
-        try {
-            const url = new URL(this.createUrl, window.location.origin);
-            const csrfToken = this.getCsrfToken();
-            const headers = {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json',
-            };
-            if (csrfToken) {
-                const headerName = this.csrfHeaderName || 'X-CSRF-Token';
-                headers[headerName] = csrfToken;
-            }
-            const response = await fetch(url.toString(), {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({ text: query.trim() }),
-            });
-            if (!response.ok)
-                throw new Error('Failed to create option');
-            const data = await response.json();
-            const newOption = Object.assign({ id: data.id, text: data.text }, data);
-            // Add to internal options first
-            this.internalOptions = [...this.internalOptions, newOption];
-            // Select the new option
-            this.value = [...this.value, String(newOption.id)];
-            // Sync selected items to update display with new option
-            this.syncSelectedItems();
-            // Emit create event
-            this.pdsMultiselectCreate.emit({
-                query: query.trim(),
-                newOption,
-            });
-            // Emit change event with synced items
-            this.pdsMultiselectChange.emit({
-                values: this.value,
-                items: this.selectedItems,
-            });
-            // Clear search and keep dropdown open
-            this.searchQuery = '';
-            this.highlightedIndex = -1;
-            // Focus back on search input
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        }
-        catch (error) {
-            console.error('PdsMultiselect: Failed to create option', error);
-        }
-        finally {
-            this.creating = false;
-        }
-    }
-    openDropdown() {
-        if (this.disabled)
-            return;
-        this.isOpening = true;
-        this.isOpen = true;
-        this.highlightedIndex = -1;
-        // Trigger initial fetch if async (skip if already fetching from componentDidLoad)
-        if (this.asyncUrl && this.internalOptions.length === 0 && !this.initialAsyncFetchTriggered) {
-            this.debouncedFetchAsyncOptions(this.searchQuery, 1);
-        }
-        // Reset the flag so subsequent opens can fetch if needed
-        this.initialAsyncFetchTriggered = false;
-        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 = '';
-        // Reset the selection-close guard after the focusout handler's setTimeout has resolved
-        if (this.isClosingViaSelection) {
-            setTimeout(() => {
-                this.isClosingViaSelection = false;
-            }, 0);
-        }
-        // Clean up auto-update
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-    }
-    positionDropdown() {
-        if (!this.containerEl || !this.panelEl)
-            return;
-        // In inline pill mode, triggerEl is the small chevron button — use the full-width
-        // wrapper div as the Floating UI reference so the panel aligns with the whole trigger.
-        const referenceEl = this.pillInlineTriggerEl || 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, _b;
-        if (option.disabled)
-            return;
-        // Handle create option
-        if (option.isCreateOption) {
-            // Prevent multiple create calls while one is in-flight
-            if (!this.creating) {
-                this.createOption(this.searchQuery);
-            }
-            return;
-        }
-        const optionId = String(option.id);
-        const isSelected = this.value.includes(optionId);
-        if (isSelected) {
-            // Remove from selection
-            this.value = this.value.filter(v => v !== optionId);
-        }
-        else {
-            // Add to selection
-            if (this.maxSelections && this.value.length >= this.maxSelections) {
-                return;
-            }
-            this.value = [...this.value, optionId];
-        }
-        // Sync selected items to ensure no duplicates and accurate state
-        this.syncSelectedItems();
-        // Emit change event with synced items
-        this.pdsMultiselectChange.emit({
-            values: this.value,
-            items: this.selectedItems,
-        });
-        if (this.closePanelOnSelect) {
-            this.isClosingViaSelection = true;
-            this.closeDropdown();
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            // Keep focus on search input, don't close dropdown
-            (_b = this.searchInputEl) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }
-    selectOption(option) {
-        // For keyboard navigation - toggle the option
-        this.toggleOption(option);
-    }
-    getGroupedRenderItems(filteredOptions) {
-        const items = [];
-        let currentGroup = null;
-        filteredOptions.forEach((option, index) => {
-            const group = option.group;
-            if (group !== undefined) {
-                if (!currentGroup || currentGroup.group !== group) {
-                    currentGroup = { type: 'group', group, options: [] };
-                    items.push(currentGroup);
-                }
-                currentGroup.options.push({ option, index });
-            }
-            else {
-                currentGroup = null;
-                items.push({ type: 'option', option, index });
-            }
-        });
-        return items;
-    }
-    renderOption(option, index, valueArray) {
-        const isSelected = valueArray.includes(String(option.id));
-        const isCreateOption = option.isCreateOption;
-        const isDisabled = option.disabled;
-        const isHighlighted = index === this.highlightedIndex && !isCreateOption;
-        const optionId = `${this.componentId}-option-${index}`;
-        const isCreateDisabled = isCreateOption && this.creating;
-        return (h("li", { key: String(option.id), id: optionId, class: {
-                'pds-multiselect__option': true,
-                'pds-multiselect__option--highlighted': isHighlighted,
-                'pds-multiselect__option--selected': isSelected,
-                'pds-multiselect__option--create': isCreateOption,
-                'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? `Create new tag: ${option.text}` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, "Add \"", option.text, "\""))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
-    }
-    renderSelectedItemsList() {
-        if (this.hideSelectedItems || 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: this.searchPlaceholder, 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")))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
-            if (item.type === 'group') {
-                return (h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
-            }
-            return this.renderOption(item.option, item.index, valueArray);
-        }), this.hasMore && !this.loading && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" }))))));
-    }
-    renderInlinePills() {
-        const hasSelections = this.selectedItems.length > 0;
-        if (!hasSelections) {
-            return (h("span", { class: "pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder" }, this.placeholder || 'Select...'));
-        }
-        const variant = this.disabled ? 'text' : 'tag';
-        const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
-        const overflowCount = this.selectedItems.length - visibleItems.length;
-        return (h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": "Selected items" }, visibleItems.map(item => (h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (h("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
-    }
-    renderBelowPills() {
-        if (this.selectedItems.length === 0)
-            return null;
-        const variant = this.disabled ? 'text' : 'tag';
-        return (h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": "Selected items" }, this.selectedItems.map(item => (h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
-    }
-    getTriggerText() {
-        const count = this.selectedItems.length;
-        if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
-            return this.placeholder || 'Select...';
-        }
-        return `${count} item${count === 1 ? '' : 's'}`;
-    }
-    render() {
-        const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '086b6d2d199b35110e64ba1da3c12f1a81360581', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'c2faf217a97de056a9111a78e7077025e4ab5ee1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '0aff86a3a0054aef256bac5c0204dd914a9bd3ae', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
-                'pds-multiselect__label': true,
-                'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '3b92119871dc32bb3c9a559be816bdece2fc30a6', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", 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,
-                'pds-multiselect__trigger--pill-inline': true,
-            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", 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", { class: {
-                'pds-multiselect__trigger-text': true,
-                'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '07d6a6bf9ccc2fe8bfcf9502a1cd4b7abf5c5e6f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'a94bb6f31805d31ec3cd5b5f2ca8b1984f4d41d1', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '15afc6b9313e1fe22bd56b00eee1ebcf9e085c2e', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '452814577b14ca8f891b101903bd1a7a7e5d8bb1', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'd8ce787886e666303759cd2654c78b44269a40ff', style: { display: 'none' } }, h("slot", { key: '8295376fb03b23d44c5baeca9bc967514e433e0f' })))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "debounce": ["setupDebounce"],
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "internalOptions": ["internalOptionsChanged"]
-    }; }
-    static get style() { return pdsMultiselectCss; }
-}, [321, "pds-multiselect", {
-        "componentId": [1, "component-id"],
-        "label": [1],
-        "placeholder": [1],
-        "searchPlaceholder": [1, "search-placeholder"],
-        "closePanelOnSelect": [4, "close-panel-on-select"],
-        "name": [1],
-        "value": [1040],
-        "disabled": [4],
-        "asyncUrl": [1, "async-url"],
-        "asyncMethod": [1, "async-method"],
-        "debounce": [2],
-        "fetchTimeout": [2, "fetch-timeout"],
-        "maxSelections": [2, "max-selections"],
-        "maxHeight": [1, "max-height"],
-        "triggerWidth": [1, "trigger-width"],
-        "minWidth": [1, "min-width"],
-        "panelWidth": [1, "panel-width"],
-        "hideLabel": [4, "hide-label"],
-        "hideSelectedItems": [4, "hide-selected-items"],
-        "selectedDisplay": [1, "selected-display"],
-        "pillPosition": [1, "pill-position"],
-        "maxInlinePills": [2, "max-inline-pills"],
-        "errorMessage": [1, "error-message"],
-        "helperMessage": [1, "helper-message"],
-        "invalid": [4],
-        "required": [4],
-        "loading": [1028],
-        "options": [16],
-        "formatResult": [16],
-        "createUrl": [1, "create-url"],
-        "csrfToken": [1, "csrf-token"],
-        "csrfHeaderName": [1, "csrf-header-name"],
-        "isOpen": [32],
-        "searchQuery": [32],
-        "highlightedIndex": [32],
-        "internalOptions": [32],
-        "selectedItems": [32],
-        "currentPage": [32],
-        "hasMore": [32],
-        "creating": [32],
-        "removalAnnouncement": [32],
-        "setFocus": [64],
-        "clear": [64]
-    }, [[8, "keydown", "handleWindowKeyDown"]], {
-        "debounce": ["setupDebounce"],
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "internalOptions": ["internalOptionsChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-multiselect", "pds-box", "pds-checkbox", "pds-chip", "pds-icon", "pds-loader", "pds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-multiselect":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsMultiselect$1);
-            }
-            break;
-        case "pds-box":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "pds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "pds-chip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pds-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsMultiselect = PdsMultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsMultiselect, defineCustomElement };
-//# sourceMappingURL=pds-multiselect.js.map
-
-//# sourceMappingURL=pds-multiselect.js.map
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{a as l,c as r,o as a,f as d,s as c,b as p}from"./floating-ui.dom.js";import{d as h}from"./utils.js";import{i as m,a as u,m as b}from"./form.js";import{g as v,h as g}from"./index2.js";import{f as _,p as x}from"./i18n-format.js";import{d as f}from"./pds-box2.js";import{d as y}from"./pds-checkbox2.js";import{d as w}from"./pds-chip2.js";import{d as k}from"./pds-icon2.js";import{d as O}from"./pds-loader2.js";import{d as C}from"./pds-text2.js";const j=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsMultiselectChange=t(this,"pdsMultiselectChange",7),this.pdsMultiselectSearch=t(this,"pdsMultiselectSearch",7),this.pdsMultiselectLoadOptions=t(this,"pdsMultiselectLoadOptions",7),this.pdsMultiselectCreate=t(this,"pdsMultiselectCreate",7),this.pdsMultiselectDismiss=t(this,"pdsMultiselectDismiss",7),this.placeholder="Select...",this.searchPlaceholder="Find...",this.searchOptionsLabel="Search options",this.selectedItemsLabel="Selected items",this.optionsLabel="Options",this.noOptionsFoundLabel="No options found",this.createOptionLabel='Add "{text}"',this.createOptionAriaLabel="Create new tag: {text}",this.itemRemovedLabel="{item} removed",this.pillRemoveLabel="Remove",this.selectedCountLabelOne="{count} item",this.selectedCountLabelOther="{count} items",this.closePanelOnSelect=!1,this.value=[],this.disabled=!1,this.asyncMethod="GET",this.debounce=300,this.fetchTimeout=3e4,this.maxHeight="300px",this.triggerWidth="100%",this.minWidth="250px",this.hideLabel=!1,this.hideSelectedItems=!1,this.selectedDisplay="count",this.pillPosition="inline",this.maxInlinePills=3,this.required=!1,this.loading=!1,this.csrfHeaderName="X-CSRF-Token",this.isOpen=!1,this.searchQuery="",this.highlightedIndex=-1,this.internalOptions=[],this.selectedItems=[],this.currentPage=1,this.hasMore=!1,this.creating=!1,this.removalAnnouncement="",this.isOpening=!1,this.isClosingViaSelection=!1,this.initialAsyncFetchTriggered=!1,this.pendingUnresolvedFetch=!1,this.handleTriggerClick=e=>{if(!this.disabled){if(e&&"pill"===this.selectedDisplay&&"inline"===this.pillPosition&&e.composedPath().some((e=>{var i;return"pds-chip"===(null===(i=e.tagName)||void 0===i?void 0:i.toLowerCase())})))return;this.isOpen?this.closeDropdown():this.openDropdown()}},this.handleTriggerKeyDown=e=>{if(e.target===this.triggerEl)switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault(),this.isOpen||this.openDropdown()}},this.handleSearchInputChange=e=>{this.searchQuery=e.target.value,this.highlightedIndex=-1,this.pdsMultiselectSearch.emit({query:this.searchQuery}),this.asyncUrl&&this.debouncedFetchAsyncOptions(this.searchQuery,1)},this.handleSearchInputKeyDown=e=>{var i,t,s;const o=this.getFilteredOptions();switch(e.key){case"ArrowDown":{e.preventDefault();let t=this.highlightedIndex+1;for(;t<o.length&&(null===(i=o[t])||void 0===i?void 0:i.disabled);)t++;t<o.length&&(this.highlightedIndex=t,this.scrollOptionIntoView());break}case"ArrowUp":{e.preventDefault();let i=Math.max(this.highlightedIndex-1,0);for(;i>0&&(null===(t=o[i])||void 0===t?void 0:t.disabled);)i--;(null===(s=o[i])||void 0===s?void 0:s.disabled)||(this.highlightedIndex=i,this.scrollOptionIntoView());break}case"Enter":if(e.preventDefault(),this.highlightedIndex>=0){const e=o[this.highlightedIndex];e&&this.selectOption(e)}break;case"Tab":this.closeDropdown()}},this.handleContainerFocusOut=()=>{setTimeout((()=>{var e;if(!this.isOpen||this.isOpening||this.isClosingViaSelection)return;const i=document.activeElement;(null===(e=this.el.shadowRoot)||void 0===e?void 0:e.contains(i))||i===this.el||(this.pdsMultiselectDismiss.emit(),this.closeDropdown())}),0)},this.handleOptionMouseDown=e=>i=>{i.preventDefault(),this.toggleOption(e)},this.handleOptionMouseEnter=(e,i)=>()=>{i.disabled||(this.highlightedIndex=e)},this.handleScroll=e=>{if(!this.asyncUrl||!this.hasMore||this.loading)return;const i=e.target;i.scrollHeight-i.scrollTop-i.clientHeight<50&&(this.pdsMultiselectLoadOptions.emit({query:this.searchQuery,page:this.currentPage+1}),this.debouncedFetchAsyncOptions(this.searchQuery,this.currentPage+1))},this.handlePillRemove=e=>()=>{var i,t;if(this.disabled)return;const s=e.id+"";this.value=this.value.filter((e=>e!==s)),this.syncSelectedItems(),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.removalAnnouncement="",queueMicrotask((()=>{this.removalAnnouncement=_(this.itemRemovedLabel,{item:e.text})})),this.isClosingViaSelection=!0,this.isOpen?null===(i=this.searchInputEl)||void 0===i||i.focus():null===(t=this.triggerEl)||void 0===t||t.focus(),setTimeout((()=>{this.isClosingViaSelection=!1}),0)}}connectedCallback(){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(),requestAnimationFrame((()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.asyncUrl&&this.ensureValueArray().length>0&&(this.initialAsyncFetchTriggered=!0,this.fetchOptions("",1))}setupSlotChangeListener(){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("slot:not([name])");i&&(i.addEventListener("slotchange",(()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.updateOptionsFromSlot())}disconnectedCallback(){var e,i;null===(e=this.observer)||void 0===e||e.disconnect(),null===(i=this.cleanupAutoUpdate)||void 0===i||i.call(this),this.clearAsyncFetchState()}setupDebounce(){const{pdsMultiselectSearch:e,debounce:i,originalSearchEmitter:t}=this;this.pdsMultiselectSearch=void 0===i?null!=t?t:e:h(e,i)}valueChanged(e){if("string"==typeof e)try{const i=JSON.parse(e);if(Array.isArray(i))return void(this.value=i)}catch(i){return void(this.value=e?[e]:[])}if(this.syncSelectedItems(),this.updateFormValue(),this.asyncUrl){const e=this.ensureValueArray();e.length>0&&this.selectedItems.length<e.length&&(this.loading?this.pendingUnresolvedFetch=!0:this.fetchOptions("",1))}}optionsChanged(){this.options&&(this.internalOptions=[...this.options])}internalOptionsChanged(){this.syncSelectedItems()}async setFocus(){var e;null===(e=this.triggerEl)||void 0===e||e.focus()}async clear(){const e=this.value.length>0||""!==this.searchQuery;this.value=[],this.searchQuery="",this.syncSelectedItems(),this.updateFormValue(),e&&this.pdsMultiselectChange.emit({values:[],items:[]})}handleWindowKeyDown(e){var i;this.isOpen&&"Escape"===e.key&&(e.preventDefault(),this.pdsMultiselectDismiss.emit(),this.closeDropdown(),null===(i=this.triggerEl)||void 0===i||i.focus())}setupMutationObserver(){this.observer=new MutationObserver((()=>{this.updateOptionsFromSlot()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptionsFromSlot(){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("slot:not([name])");if(!i)return;const t=[];i.assignedElements({flatten:!0}).forEach((e=>{var i;if("OPTGROUP"===e.tagName){const i=e.label,s=e.disabled;e.querySelectorAll("option").forEach((e=>{var o;const n={id:e.value,text:(null===(o=e.textContent)||void 0===o?void 0:o.trim())||e.value,disabled:e.disabled||s||void 0};i&&(n.group=i),t.push(n)}))}else if("OPTION"===e.tagName){const s=e;t.push({id:s.value,text:(null===(i=s.textContent)||void 0===i?void 0:i.trim())||s.value,disabled:s.disabled||void 0})}})),t.length>0&&!this.asyncUrl&&!this.options&&(this.internalOptions=t)}clearAsyncFetchState(){var e;void 0!==this.fetchDebounceTimer&&(window.clearTimeout(this.fetchDebounceTimer),this.fetchDebounceTimer=void 0),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),null===(e=this.abortController)||void 0===e||e.abort(),this.abortController=void 0}debouncedFetchAsyncOptions(e,i=1){var t;if(!this.asyncUrl)return;void 0!==this.fetchDebounceTimer&&window.clearTimeout(this.fetchDebounceTimer);const s=Math.max(0,null!==(t=this.debounce)&&void 0!==t?t:0);this.fetchDebounceTimer=window.setTimeout((()=>{this.fetchDebounceTimer=void 0,this.fetchOptions(e,i)}),s)}syncSelectedItems(){const e=this.ensureValueArray(),i=this.getAllOptions(),t=[],s=new Map(this.selectedItems.map((e=>[e.id+"",e])));e.forEach((e=>{const o=i.find((i=>i.id+""==e+""));o?t.push(o):s.has(e+"")&&t.push(s.get(e+""))})),this.selectedItems=t}ensureValueArray(){if("string"==typeof this.value)try{const e=JSON.parse(this.value);if(Array.isArray(e))return this.value=e,e}catch(e){const i=this.value;return this.value=i?[i]:[],this.value}return Array.isArray(this.value)?this.value:[]}getAllOptions(){return this.options||this.internalOptions}getFilteredOptions(){const e=this.getAllOptions(),i=this.searchQuery.toLowerCase(),t=e.filter((e=>!i||e.text.toLowerCase().includes(i)));return this.createUrl&&this.searchQuery.trim()&&0===t.length?[{id:"__create__",text:this.searchQuery.trim(),isCreateOption:!0}]:t}updateFormValue(){var e;if(!m()&&(null===(e=this.internals)||void 0===e?void 0:e.setFormValue)){const e=this.ensureValueArray(),i=new FormData;e.forEach((e=>{this.name&&i.append(this.name,e)})),this.internals.setFormValue(i),this.required&&0===e.length?this.internals.setValidity({valueMissing:!0},"Please select at least one option.",this.triggerEl):this.internals.setValidity({})}}getCsrfToken(){if(this.csrfToken)return this.csrfToken;const e=document.querySelector('meta[name="csrf-token"]');return(null==e?void 0:e.content)||null}async fetchOptions(e,i=1){var t;if(this.asyncUrl){null===(t=this.abortController)||void 0===t||t.abort(),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),this.abortController=new AbortController,this.loading=!0,this.fetchTimeoutTimer=window.setTimeout((()=>{var e;null===(e=this.abortController)||void 0===e||e.abort(),this.fetchTimeoutTimer=void 0}),this.fetchTimeout);try{let t;try{t=new URL(this.asyncUrl,window.location.origin)}catch(e){throw new TypeError("Invalid asyncUrl: "+this.asyncUrl)}"GET"===this.asyncMethod&&(t.searchParams.set("search",e),t.searchParams.set("page",i+""));const s=this.getCsrfToken(),o={"Content-Type":"application/json",Accept:"application/json"};s&&(o[this.csrfHeaderName||"X-CSRF-Token"]=s);const n=await fetch(""+t,Object.assign({method:this.asyncMethod,signal:this.abortController.signal,headers:o},"POST"===this.asyncMethod&&{body:JSON.stringify({search:e,page:i})}));if(void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),!n.ok)throw Error("Failed to fetch options");const l=await n.json(),r=l.results.map((e=>this.formatResult?this.formatResult(e):"object"==typeof e&&null!==e?Object.assign({id:e.id,text:e.text},e):{id:e+"",text:e+""}));this.internalOptions=1===i?r:[...this.internalOptions,...r],this.hasMore=!!l.totalCount&&this.internalOptions.length<l.totalCount,this.currentPage=i}catch(e){void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),"AbortError"!==e.name&&console.error("PdsMultiselect: Failed to fetch options",e)}finally{if(this.loading=!1,this.pendingUnresolvedFetch){this.pendingUnresolvedFetch=!1;const e=this.ensureValueArray();e.length>0&&this.selectedItems.length<e.length&&this.fetchOptions("",1)}}}}async createOption(e){if(this.createUrl&&e.trim()&&!this.creating){this.creating=!0;try{const i=new URL(this.createUrl,window.location.origin),t=this.getCsrfToken(),s={"Content-Type":"application/json",Accept:"application/json"};t&&(s[this.csrfHeaderName||"X-CSRF-Token"]=t);const o=await fetch(""+i,{method:"POST",headers:s,body:JSON.stringify({text:e.trim()})});if(!o.ok)throw Error("Failed to create option");const n=await o.json(),l=Object.assign({id:n.id,text:n.text},n);this.internalOptions=[...this.internalOptions,l],this.value=[...this.value,l.id+""],this.syncSelectedItems(),this.pdsMultiselectCreate.emit({query:e.trim(),newOption:l}),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.searchQuery="",this.highlightedIndex=-1,requestAnimationFrame((()=>{var e;null===(e=this.searchInputEl)||void 0===e||e.focus()}))}catch(e){console.error("PdsMultiselect: Failed to create option",e)}finally{this.creating=!1}}}openDropdown(){this.disabled||(this.isOpening=!0,this.isOpen=!0,this.highlightedIndex=-1,this.asyncUrl&&0===this.internalOptions.length&&!this.initialAsyncFetchTriggered&&this.debouncedFetchAsyncOptions(this.searchQuery,1),this.initialAsyncFetchTriggered=!1,requestAnimationFrame((()=>{var e;this.positionDropdown(),null===(e=this.searchInputEl)||void 0===e||e.focus(),setTimeout((()=>{this.isOpening=!1}),50)})))}closeDropdown(){this.isOpen=!1,this.highlightedIndex=-1,this.searchQuery="",this.isClosingViaSelection&&setTimeout((()=>{this.isClosingViaSelection=!1}),0),this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0)}positionDropdown(){if(!this.containerEl||!this.panelEl)return;const e=this.pillInlineTriggerEl||this.triggerEl||this.containerEl,{minWidth:i,panelWidth:t}=this,s=()=>{r(e,this.panelEl,{placement:"bottom-start",strategy:"absolute",middleware:[a(12),d(),c({padding:8}),p({apply:({rects:e,elements:s})=>{Object.assign(s.floating.style,{width:null!=t?t:e.reference.width+"px",minWidth:i})}})]}).then((({x:e,y:i})=>{this.panelEl&&(this.panelEl.style.left=e+"px",this.panelEl.style.top=i+"px")}))};s();const o=l(e,this.panelEl,s);this.cleanupAutoUpdate=()=>{o(),this.clearAsyncFetchState()}}scrollOptionIntoView(){requestAnimationFrame((()=>{var e;const i=null===(e=this.listboxEl)||void 0===e?void 0:e.querySelector(`[data-index="${this.highlightedIndex}"]`);null==i||i.scrollIntoView({block:"nearest",behavior:"smooth"})}))}toggleOption(e){var i,t;if(e.disabled)return;if(e.isCreateOption)return void(this.creating||this.createOption(this.searchQuery));const s=e.id+"";if(this.value.includes(s))this.value=this.value.filter((e=>e!==s));else{if(this.maxSelections&&this.value.length>=this.maxSelections)return;this.value=[...this.value,s]}this.syncSelectedItems(),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.closePanelOnSelect?(this.isClosingViaSelection=!0,this.closeDropdown(),null===(i=this.triggerEl)||void 0===i||i.focus()):null===(t=this.searchInputEl)||void 0===t||t.focus()}selectOption(e){this.toggleOption(e)}getGroupedRenderItems(e){const i=[];let t=null;return e.forEach(((e,s)=>{const o=e.group;void 0!==o?(t&&t.group===o||(t={type:"group",group:o,options:[]},i.push(t)),t.options.push({option:e,index:s})):(t=null,i.push({type:"option",option:e,index:s}))})),i}renderOption(e,i,t){const o=t.includes(e.id+""),n=e.isCreateOption,l=e.disabled,r=n&&this.creating;return s("li",{key:e.id+"",id:`${this.componentId}-option-${i}`,class:{"pds-multiselect__option":!0,"pds-multiselect__option--highlighted":i===this.highlightedIndex&&!n,"pds-multiselect__option--selected":o,"pds-multiselect__option--create":n,"pds-multiselect__option--disabled":l||r},role:"option","aria-selected":o?"true":"false","aria-disabled":l||r?"true":void 0,"aria-label":n?_(this.createOptionAriaLabel,{text:e.text}):void 0,"data-index":i,onMouseDown:this.handleOptionMouseDown(e),onMouseEnter:this.handleOptionMouseEnter(i,e)},n?s("pds-box",{class:"pds-multiselect__create-option","align-items":"center",gap:"xs"},s("pds-icon",{name:"add",size:"small"}),s("pds-text",null,_(this.createOptionLabel,{text:e.text}))):s("pds-checkbox",{componentId:`${this.componentId}-checkbox-${i}`,checked:o,label:e.text,disabled:l,style:{pointerEvents:"none"}}))}renderSelectedItemsList(){return this.hideSelectedItems||0===this.selectedItems.length?null:s("div",{class:"pds-multiselect__selected-section"},s("ul",{class:"pds-multiselect__selected-list",role:"list"},this.selectedItems.map((e=>s("li",{key:e.id+"",class:"pds-multiselect__selected-item"},e.text)))))}renderDropdown(){if(!this.isOpen)return null;const e=this.getFilteredOptions(),i=this.ensureValueArray(),t=!!this.el.querySelector('[slot="empty"]'),o=!!this.el.querySelector('[slot="loading"]');return s("div",{class:"pds-multiselect__panel",ref:e=>this.panelEl=e,style:{minWidth:this.minWidth}},s("div",{class:"pds-multiselect__search"},s("pds-icon",{name:"search",size:"small"}),s("input",{ref:e=>this.searchInputEl=e,type:"text",class:"pds-multiselect__search-input",placeholder:this.searchPlaceholder,value:this.searchQuery,"aria-label":this.searchOptionsLabel,"aria-controls":this.componentId+"-listbox","aria-activedescendant":this.highlightedIndex>=0?`${this.componentId}-option-${this.highlightedIndex}`:void 0,role:"combobox","aria-haspopup":"listbox","aria-expanded":"true","aria-autocomplete":"list",autocomplete:"off",onInput:this.handleSearchInputChange,onKeyDown:this.handleSearchInputKeyDown})),this.renderSelectedItemsList(),s("ul",{class:"pds-multiselect__listbox",role:"listbox","aria-multiselectable":"true","aria-label":this.label||this.optionsLabel,id:this.componentId+"-listbox",ref:e=>this.listboxEl=e,style:{maxHeight:this.maxHeight},onScroll:this.handleScroll},this.loading&&s("li",{class:"pds-multiselect__loading",role:"presentation"},o?s("slot",{name:"loading"}):s("pds-loader",{size:"small"})),!this.loading&&0===e.length&&s("li",{class:"pds-multiselect__empty",role:"presentation"},t?s("slot",{name:"empty"}):s("span",null,this.noOptionsFoundLabel)),this.getGroupedRenderItems(e).map(((e,t)=>"group"===e.type?s("li",{key:"group-"+t,role:"group","aria-label":e.group,class:"pds-multiselect__group"},s("span",{class:"pds-multiselect__group-header","aria-hidden":"true"},e.group),s("ul",{class:"pds-multiselect__group-list",role:"presentation"},e.options.map((({option:e,index:t})=>this.renderOption(e,t,i))))):this.renderOption(e.option,e.index,i))),this.hasMore&&!this.loading&&s("li",{class:"pds-multiselect__load-more",role:"presentation"},s("pds-loader",{size:"small"}))))}renderInlinePills(){if(!(this.selectedItems.length>0))return s("span",{class:"pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder"},this.placeholder||"Select...");const e=this.disabled?"text":"tag",i=this.selectedItems.slice(0,Math.max(1,this.maxInlinePills)),t=this.selectedItems.length-i.length;return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--inline","aria-label":this.selectedItemsLabel},i.map((i=>s("pds-chip",{key:i.id+"","component-id":`${this.componentId}-pill-${i.id}`,variant:e,size:"sm",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(i)},i.text))),t>0&&s("span",{class:"pds-multiselect__pill-overflow"},"+",t))}renderBelowPills(){if(0===this.selectedItems.length)return null;const e=this.disabled?"text":"tag";return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--below","aria-label":this.selectedItemsLabel},this.selectedItems.map((i=>s("pds-chip",{key:i.id+"","component-id":`${this.componentId}-pill-${i.id}`,variant:e,size:"md",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(i)},i.text))))}getTriggerText(){const e=this.selectedItems.length;return 0===e||"pill"===this.selectedDisplay&&"below"===this.pillPosition?this.placeholder||"Select...":x(this.el,e,this.resolveCountForms())}resolveCountForms(){const e={one:this.selectedCountLabelOne,other:this.selectedCountLabelOther},i=this.selectedCountLabels;if(!i)return e;if("string"==typeof i)try{const t=JSON.parse(i);return t&&"object"==typeof t?Object.assign(Object.assign({},e),t):e}catch(i){return e}return Object.assign(Object.assign({},e),i)}render(){const e=this.selectedItems.length>0;return s(o,{key:"4a54a778522d0a1d2f45c32928e7a663f19c0189","aria-disabled":this.disabled?"true":null},s("div",{key:"3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6",class:"pds-multiselect",onFocusout:this.handleContainerFocusOut},this.label&&s("label",{key:"f91a680ae3c3021bac6bd99368d3ef6ad6438898",id:this.componentId+"-label",htmlFor:this.componentId,class:{"pds-multiselect__label":!0,"visually-hidden":this.hideLabel}},this.label),s("div",{key:"de2899f19057b8cd19cf3467251d03c1b43b73f5",class:"pds-multiselect__wrapper",ref:e=>this.containerEl=e,style:{width:this.triggerWidth}},"pill"===this.selectedDisplay&&"inline"===this.pillPosition?s("div",{ref:e=>this.pillInlineTriggerEl=e||void 0,part:"trigger",class:{"pds-multiselect__trigger":!0,"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":e,"pds-multiselect__trigger--pill-inline":!0},onClick:this.handleTriggerClick},this.renderInlinePills(),s("button",{ref:e=>this.triggerEl=e,type:"button",id:this.componentId,part:"pill-toggle",class:"pds-multiselect__pill-toggle",disabled:this.disabled,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.label?this.componentId+"-label":void 0,"aria-required":this.required?"true":void 0,"aria-describedby":u(this.componentId,this.invalid||!!this.errorMessage,this.errorMessage||this.helperMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onKeyDown:this.handleTriggerKeyDown},s("pds-icon",{class:"pds-multiselect__icon",icon:v}))):s("button",{ref:e=>this.triggerEl=e,type:"button",part:"trigger",class:{"pds-multiselect__trigger":!0,"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":e},id:this.componentId,disabled:this.disabled,"aria-required":this.required?"true":void 0,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-describedby":u(this.componentId,this.invalid||!!this.errorMessage,this.errorMessage||this.helperMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},s("span",{class:{"pds-multiselect__trigger-text":!0,"pds-multiselect__trigger-text--placeholder":!e||"pill"===this.selectedDisplay&&"below"===this.pillPosition}},this.getTriggerText()),s("pds-icon",{class:"pds-multiselect__icon",icon:v})),this.renderDropdown()),"pill"===this.selectedDisplay&&"below"===this.pillPosition&&this.renderBelowPills(),s("span",{key:"973443f9eb29dcf7fb1bde3f9101ac02967a8fd9",class:"visually-hidden","aria-live":"polite","aria-atomic":"true"},this.removalAnnouncement),this.helperMessage&&!(this.errorMessage&&this.errorMessage.length>0)&&s("p",{key:"568aab2b278abb7f4426d84ee926b4883375fb11",class:"pds-multiselect__helper",id:b(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("p",{key:"daddf192efd47df8c15267b9896913b926e02544",class:"pds-multiselect__error",id:b(this.componentId,"error")},s("pds-icon",{key:"d0c72ab75a8e02e61c09e980ae817790804a776a",icon:g,size:"small"}),this.errorMessage),s("div",{key:"0453db2fca10b3573b1dd244875f90c856c8887b",style:{display:"none"}},s("slot",{key:"a612741afc9545e5e50c47d27c3c27c1d7cade3c"}))))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}]}}static get style(){return":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}"}},[321,"pds-multiselect",{componentId:[1,"component-id"],label:[1],placeholder:[1],searchPlaceholder:[1,"search-placeholder"],searchOptionsLabel:[1,"search-options-label"],selectedItemsLabel:[1,"selected-items-label"],optionsLabel:[1,"options-label"],noOptionsFoundLabel:[1,"no-options-found-label"],createOptionLabel:[1,"create-option-label"],createOptionAriaLabel:[1,"create-option-aria-label"],itemRemovedLabel:[1,"item-removed-label"],pillRemoveLabel:[1,"pill-remove-label"],selectedCountLabelOne:[1,"selected-count-label-one"],selectedCountLabelOther:[1,"selected-count-label-other"],selectedCountLabels:[1,"selected-count-labels"],closePanelOnSelect:[4,"close-panel-on-select"],name:[1],value:[1040],disabled:[4],asyncUrl:[1,"async-url"],asyncMethod:[1,"async-method"],debounce:[2],fetchTimeout:[2,"fetch-timeout"],maxSelections:[2,"max-selections"],maxHeight:[1,"max-height"],triggerWidth:[1,"trigger-width"],minWidth:[1,"min-width"],panelWidth:[1,"panel-width"],hideLabel:[4,"hide-label"],hideSelectedItems:[4,"hide-selected-items"],selectedDisplay:[1,"selected-display"],pillPosition:[1,"pill-position"],maxInlinePills:[2,"max-inline-pills"],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],required:[4],loading:[1028],options:[16],formatResult:[16],createUrl:[1,"create-url"],csrfToken:[1,"csrf-token"],csrfHeaderName:[1,"csrf-header-name"],isOpen:[32],searchQuery:[32],highlightedIndex:[32],internalOptions:[32],selectedItems:[32],currentPage:[32],hasMore:[32],creating:[32],removalAnnouncement:[32],setFocus:[64],clear:[64]},[[8,"keydown","handleWindowKeyDown"]],{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}]}]),S=j,F=function(){"undefined"!=typeof customElements&&["pds-multiselect","pds-box","pds-checkbox","pds-chip","pds-icon","pds-loader","pds-text"].forEach((e=>{switch(e){case"pds-multiselect":customElements.get(n(e))||customElements.define(n(e),j);break;case"pds-box":customElements.get(n(e))||f();break;case"pds-checkbox":customElements.get(n(e))||y();break;case"pds-chip":customElements.get(n(e))||w();break;case"pds-icon":customElements.get(n(e))||k();break;case"pds-loader":customElements.get(n(e))||O();break;case"pds-text":customElements.get(n(e))||C()}}))};export{S as PdsMultiselect,F as defineCustomElement}