@vonage/vivid 4.13.0 → 4.14.0

package/shared/listbox2.cjs

@@ -0,0 +1,1268 @@
+'use strict';
+
+const keyCodes$1 = require('./key-codes.cjs');
+const foundationElement = require('./foundation-element.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
+const keyCodes = require('./key-codes2.cjs');
+const applyMixins = require('./apply-mixins2.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const strings = require('./strings2.cjs');
+
+/**
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+ *
+ * @param array - the array to test
+ * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+ */
+function findLastIndex(array, predicate) {
+    let k = array.length;
+    while (k--) {
+        if (predicate(array[k], k, array)) {
+            return k;
+        }
+    }
+    return -1;
+}
+
+/**
+ * A test that ensures that all arguments are HTML Elements
+ */
+function isHTMLElement(...args) {
+    return args.every((arg) => arg instanceof HTMLElement);
+}
+
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+class ListboxOption extends foundationElement.FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        defineVividComponent.Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        defineVividComponent.Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+}
+foundationElement.__decorate([
+    defineVividComponent.observable
+], ListboxOption.prototype, "checked", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], ListboxOption.prototype, "content", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], ListboxOption.prototype, "defaultSelected", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], ListboxOption.prototype, "selected", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, keyCodes.StartEnd, DelegatesARIAListboxOption);
+
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
+ *
+ * @slot - The default slot for the listbox options
+ *
+ * @public
+ */
+let Listbox$1 = class Listbox extends foundationElement.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The internal unfiltered list of selectable options.
+         *
+         * @internal
+         */
+        this._options = [];
+        /**
+         * The index of the selected option.
+         *
+         * @public
+         */
+        this.selectedIndex = -1;
+        /**
+         * A collection of the selected options.
+         *
+         * @public
+         */
+        this.selectedOptions = [];
+        /**
+         * A standard `click` event creates a `focus` event before firing, so a
+         * `mousedown` event is used to skip that initial focus.
+         *
+         * @internal
+         */
+        this.shouldSkipFocus = false;
+        /**
+         * The current typeahead buffer string.
+         *
+         * @internal
+         */
+        this.typeaheadBuffer = "";
+        /**
+         * Flag for the typeahead timeout expiration.
+         *
+         * @internal
+         */
+        this.typeaheadExpired = true;
+        /**
+         * The timeout ID for the typeahead handler.
+         *
+         * @internal
+         */
+        this.typeaheadTimeout = -1;
+    }
+    /**
+     * The first selected option.
+     *
+     * @internal
+     */
+    get firstSelectedOption() {
+        var _a;
+        return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * Returns true if there is one or more selectable option.
+     *
+     * @internal
+     */
+    get hasSelectableOptions() {
+        return this.options.length > 0 && !this.options.every(o => o.disabled);
+    }
+    /**
+     * The number of options.
+     *
+     * @public
+     */
+    get length() {
+        var _a, _b;
+        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }
+    /**
+     * The list of options.
+     *
+     * @public
+     */
+    get options() {
+        defineVividComponent.Observable.track(this, "options");
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        defineVividComponent.Observable.notify(this, "options");
+    }
+    /**
+     * Flag for the typeahead timeout expiration.
+     *
+     * @deprecated use `Listbox.typeaheadExpired`
+     * @internal
+     */
+    get typeAheadExpired() {
+        return this.typeaheadExpired;
+    }
+    set typeAheadExpired(value) {
+        this.typeaheadExpired = value;
+    }
+    /**
+     * Handle click events for listbox options.
+     *
+     * @internal
+     */
+    clickHandler(e) {
+        const captured = e.target.closest(`option,[role=option]`);
+        if (captured && !captured.disabled) {
+            this.selectedIndex = this.options.indexOf(captured);
+            return true;
+        }
+    }
+    /**
+     * Ensures that the provided option is focused and scrolled into view.
+     *
+     * @param optionToFocus - The option to focus
+     * @internal
+     */
+    focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
+        // To ensure that the browser handles both `focus()` and `scrollIntoView()`, the
+        // timing here needs to guarantee that they happen on different frames. Since this
+        // function is typically called from the `openChanged` observer, `DOM.queueUpdate`
+        // causes the calls to be grouped into the same frame. To prevent this,
+        // `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
+        if (this.contains(document.activeElement) && optionToFocus !== null) {
+            optionToFocus.focus();
+            requestAnimationFrame(() => {
+                optionToFocus.scrollIntoView({ block: "nearest" });
+            });
+        }
+    }
+    /**
+     * Handles `focusin` actions for the component. When the component receives focus,
+     * the list of selected options is refreshed and the first selected option is scrolled
+     * into view.
+     *
+     * @internal
+     */
+    focusinHandler(e) {
+        if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+            this.setSelectedOptions();
+            this.focusAndScrollOptionIntoView();
+        }
+        this.shouldSkipFocus = false;
+    }
+    /**
+     * Returns the options which match the current typeahead buffer.
+     *
+     * @internal
+     */
+    getTypeaheadMatches() {
+        const pattern = this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
+        const re = new RegExp(`^${pattern}`, "gi");
+        return this.options.filter((o) => o.text.trim().match(re));
+    }
+    /**
+     * Determines the index of the next option which is selectable, if any.
+     *
+     * @param prev - the previous selected index
+     * @param next - the next index to select
+     *
+     * @internal
+     */
+    getSelectableIndex(prev = this.selectedIndex, next) {
+        const direction = prev > next ? -1 : prev < next ? 1 : 0;
+        const potentialDirection = prev + direction;
+        let nextSelectableOption = null;
+        switch (direction) {
+            case -1: {
+                nextSelectableOption = this.options.reduceRight((nextSelectableOption, thisOption, index) => !nextSelectableOption &&
+                    !thisOption.disabled &&
+                    index < potentialDirection
+                    ? thisOption
+                    : nextSelectableOption, nextSelectableOption);
+                break;
+            }
+            case 1: {
+                nextSelectableOption = this.options.reduce((nextSelectableOption, thisOption, index) => !nextSelectableOption &&
+                    !thisOption.disabled &&
+                    index > potentialDirection
+                    ? thisOption
+                    : nextSelectableOption, nextSelectableOption);
+                break;
+            }
+        }
+        return this.options.indexOf(nextSelectableOption);
+    }
+    /**
+     * Handles external changes to child options.
+     *
+     * @param source - the source object
+     * @param propertyName - the property
+     *
+     * @internal
+     */
+    handleChange(source, propertyName) {
+        switch (propertyName) {
+            case "selected": {
+                if (Listbox.slottedOptionFilter(source)) {
+                    this.selectedIndex = this.options.indexOf(source);
+                }
+                this.setSelectedOptions();
+                break;
+            }
+        }
+    }
+    /**
+     * Moves focus to an option whose label matches characters typed by the user.
+     * Consecutive keystrokes are batched into a buffer of search text used
+     * to match against the set of options.  If `TYPE_AHEAD_TIMEOUT_MS` passes
+     * between consecutive keystrokes, the search restarts.
+     *
+     * @param key - the key to be evaluated
+     *
+     * @internal
+     */
+    handleTypeAhead(key) {
+        if (this.typeaheadTimeout) {
+            window.clearTimeout(this.typeaheadTimeout);
+        }
+        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox.TYPE_AHEAD_TIMEOUT_MS);
+        if (key.length > 1) {
+            return;
+        }
+        this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
+    }
+    /**
+     * Handles `keydown` actions for listbox navigation and typeahead.
+     *
+     * @internal
+     */
+    keydownHandler(e) {
+        if (this.disabled) {
+            return true;
+        }
+        this.shouldSkipFocus = false;
+        const key = e.key;
+        switch (key) {
+            // Select the first available option
+            case keyCodes.keyHome: {
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    this.selectFirstOption();
+                }
+                break;
+            }
+            // Select the next selectable option
+            case keyCodes.keyArrowDown: {
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    this.selectNextOption();
+                }
+                break;
+            }
+            // Select the previous selectable option
+            case keyCodes.keyArrowUp: {
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    this.selectPreviousOption();
+                }
+                break;
+            }
+            // Select the last available option
+            case keyCodes.keyEnd: {
+                e.preventDefault();
+                this.selectLastOption();
+                break;
+            }
+            case keyCodes.keyTab: {
+                this.focusAndScrollOptionIntoView();
+                return true;
+            }
+            case keyCodes.keyEnter:
+            case keyCodes.keyEscape: {
+                return true;
+            }
+            case keyCodes.keySpace: {
+                if (this.typeaheadExpired) {
+                    return true;
+                }
+            }
+            // Send key to Typeahead handler
+            default: {
+                if (key.length === 1) {
+                    this.handleTypeAhead(`${key}`);
+                }
+                return true;
+            }
+        }
+    }
+    /**
+     * Prevents `focusin` events from firing before `click` events when the
+     * element is unfocused.
+     *
+     * @internal
+     */
+    mousedownHandler(e) {
+        this.shouldSkipFocus = !this.contains(document.activeElement);
+        return true;
+    }
+    /**
+     * Switches between single-selection and multi-selection mode.
+     *
+     * @param prev - the previous value of the `multiple` attribute
+     * @param next - the next value of the `multiple` attribute
+     *
+     * @internal
+     */
+    multipleChanged(prev, next) {
+        this.ariaMultiSelectable = next ? "true" : null;
+    }
+    /**
+     * Updates the list of selected options when the `selectedIndex` changes.
+     *
+     * @param prev - the previous selected index value
+     * @param next - the current selected index value
+     *
+     * @internal
+     */
+    selectedIndexChanged(prev, next) {
+        var _a;
+        if (!this.hasSelectableOptions) {
+            this.selectedIndex = -1;
+            return;
+        }
+        if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {
+            const selectableIndex = this.getSelectableIndex(prev, next);
+            const newNext = selectableIndex > -1 ? selectableIndex : prev;
+            this.selectedIndex = newNext;
+            if (next === newNext) {
+                this.selectedIndexChanged(next, newNext);
+            }
+            return;
+        }
+        this.setSelectedOptions();
+    }
+    /**
+     * Updates the selectedness of each option when the list of selected options changes.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @internal
+     */
+    selectedOptionsChanged(prev, next) {
+        var _a;
+        const filteredNext = next.filter(Listbox.slottedOptionFilter);
+        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+            const notifier = defineVividComponent.Observable.getNotifier(o);
+            notifier.unsubscribe(this, "selected");
+            o.selected = filteredNext.includes(o);
+            notifier.subscribe(this, "selected");
+        });
+    }
+    /**
+     * Moves focus to the first selectable option.
+     *
+     * @public
+     */
+    selectFirstOption() {
+        var _a, _b;
+        if (!this.disabled) {
+            this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
+        }
+    }
+    /**
+     * Moves focus to the last selectable option.
+     *
+     * @internal
+     */
+    selectLastOption() {
+        if (!this.disabled) {
+            this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
+        }
+    }
+    /**
+     * Moves focus to the next selectable option.
+     *
+     * @internal
+     */
+    selectNextOption() {
+        if (!this.disabled && this.selectedIndex < this.options.length - 1) {
+            this.selectedIndex += 1;
+        }
+    }
+    /**
+     * Moves focus to the previous selectable option.
+     *
+     * @internal
+     */
+    selectPreviousOption() {
+        if (!this.disabled && this.selectedIndex > 0) {
+            this.selectedIndex = this.selectedIndex - 1;
+        }
+    }
+    /**
+     * Updates the selected index to match the first selected option.
+     *
+     * @internal
+     */
+    setDefaultSelectedOption() {
+        var _a, _b;
+        this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
+    }
+    /**
+     * Sets an option as selected and gives it focus.
+     *
+     * @public
+     */
+    setSelectedOptions() {
+        var _a, _b, _c;
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+            this.selectedOptions = [this.options[this.selectedIndex]];
+            this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
+            this.focusAndScrollOptionIntoView();
+        }
+    }
+    /**
+     * Updates the list of options and resets the selected option when the slotted option content changes.
+     *
+     * @param prev - the previous list of slotted options
+     * @param next - the current list of slotted options
+     *
+     * @internal
+     */
+    slottedOptionsChanged(prev, next) {
+        this.options = next.reduce((options, item) => {
+            if (isListboxOption(item)) {
+                options.push(item);
+            }
+            return options;
+        }, []);
+        const setSize = `${this.options.length}`;
+        this.options.forEach((option, index) => {
+            if (!option.id) {
+                option.id = strings.uniqueId("option-");
+            }
+            option.ariaPosInSet = `${index + 1}`;
+            option.ariaSetSize = setSize;
+        });
+        if (this.$fastController.isConnected) {
+            this.setSelectedOptions();
+            this.setDefaultSelectedOption();
+        }
+    }
+    /**
+     * Updates the filtered list of options when the typeahead buffer changes.
+     *
+     * @param prev - the previous typeahead buffer value
+     * @param next - the current typeahead buffer value
+     *
+     * @internal
+     */
+    typeaheadBufferChanged(prev, next) {
+        if (this.$fastController.isConnected) {
+            const typeaheadMatches = this.getTypeaheadMatches();
+            if (typeaheadMatches.length) {
+                const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
+                if (selectedIndex > -1) {
+                    this.selectedIndex = selectedIndex;
+                }
+            }
+            this.typeaheadExpired = false;
+        }
+    }
+};
+/**
+ * A static filter to include only selectable options.
+ *
+ * @param n - element to filter
+ * @public
+ */
+Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+/**
+ * Typeahead timeout in milliseconds.
+ *
+ * @internal
+ */
+Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
+foundationElement.__decorate([
+    defineVividComponent.attr({ mode: "boolean" })
+], Listbox$1.prototype, "disabled", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Listbox$1.prototype, "selectedIndex", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Listbox$1.prototype, "selectedOptions", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Listbox$1.prototype, "slottedOptions", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Listbox$1.prototype, "typeaheadBuffer", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA listbox role
+ *
+ * @public
+ */
+class DelegatesARIAListbox {
+}
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
+applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Listbox$1, DelegatesARIAListbox);
+
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
+ *
+ * @public
+ */
+class ListboxElement extends Listbox$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The index of the most recently checked option.
+         *
+         * @internal
+         * @remarks
+         * Multiple-selection mode only.
+         */
+        this.activeIndex = -1;
+        /**
+         * The start index when checking a range of options.
+         *
+         * @internal
+         */
+        this.rangeStartIndex = -1;
+    }
+    /**
+     * Returns the last checked option.
+     *
+     * @internal
+     */
+    get activeOption() {
+        return this.options[this.activeIndex];
+    }
+    /**
+     * Returns the list of checked options.
+     *
+     * @internal
+     */
+    get checkedOptions() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
+    }
+    /**
+     * Returns the index of the first selected option.
+     *
+     * @internal
+     */
+    get firstSelectedOptionIndex() {
+        return this.options.indexOf(this.firstSelectedOption);
+    }
+    /**
+     * Updates the `ariaActiveDescendant` property when the active index changes.
+     *
+     * @param prev - the previous active index
+     * @param next - the next active index
+     *
+     * @internal
+     */
+    activeIndexChanged(prev, next) {
+        var _a, _b;
+        this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
+        this.focusAndScrollOptionIntoView();
+    }
+    /**
+     * Toggles the checked state for the currently active option.
+     *
+     * @remarks
+     * Multiple-selection mode only.
+     *
+     * @internal
+     */
+    checkActiveIndex() {
+        if (!this.multiple) {
+            return;
+        }
+        const activeItem = this.activeOption;
+        if (activeItem) {
+            activeItem.checked = true;
+        }
+    }
+    /**
+     * Sets the active index to the first option and marks it as checked.
+     *
+     * @remarks
+     * Multi-selection mode only.
+     *
+     * @param preserveChecked - mark all options unchecked before changing the active index
+     *
+     * @internal
+     */
+    checkFirstOption(preserveChecked = false) {
+        if (preserveChecked) {
+            if (this.rangeStartIndex === -1) {
+                this.rangeStartIndex = this.activeIndex + 1;
+            }
+            this.options.forEach((o, i) => {
+                o.checked = strings.inRange(i, this.rangeStartIndex);
+            });
+        }
+        else {
+            this.uncheckAllOptions();
+        }
+        this.activeIndex = 0;
+        this.checkActiveIndex();
+    }
+    /**
+     * Decrements the active index and sets the matching option as checked.
+     *
+     * @remarks
+     * Multi-selection mode only.
+     *
+     * @param preserveChecked - mark all options unchecked before changing the active index
+     *
+     * @internal
+     */
+    checkLastOption(preserveChecked = false) {
+        if (preserveChecked) {
+            if (this.rangeStartIndex === -1) {
+                this.rangeStartIndex = this.activeIndex;
+            }
+            this.options.forEach((o, i) => {
+                o.checked = strings.inRange(i, this.rangeStartIndex, this.options.length);
+            });
+        }
+        else {
+            this.uncheckAllOptions();
+        }
+        this.activeIndex = this.options.length - 1;
+        this.checkActiveIndex();
+    }
+    /**
+     * @override
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusout", this.focusoutHandler);
+    }
+    /**
+     * @override
+     * @internal
+     */
+    disconnectedCallback() {
+        this.removeEventListener("focusout", this.focusoutHandler);
+        super.disconnectedCallback();
+    }
+    /**
+     * Increments the active index and marks the matching option as checked.
+     *
+     * @remarks
+     * Multiple-selection mode only.
+     *
+     * @param preserveChecked - mark all options unchecked before changing the active index
+     *
+     * @internal
+     */
+    checkNextOption(preserveChecked = false) {
+        if (preserveChecked) {
+            if (this.rangeStartIndex === -1) {
+                this.rangeStartIndex = this.activeIndex;
+            }
+            this.options.forEach((o, i) => {
+                o.checked = strings.inRange(i, this.rangeStartIndex, this.activeIndex + 1);
+            });
+        }
+        else {
+            this.uncheckAllOptions();
+        }
+        this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
+        this.checkActiveIndex();
+    }
+    /**
+     * Decrements the active index and marks the matching option as checked.
+     *
+     * @remarks
+     * Multiple-selection mode only.
+     *
+     * @param preserveChecked - mark all options unchecked before changing the active index
+     *
+     * @internal
+     */
+    checkPreviousOption(preserveChecked = false) {
+        if (preserveChecked) {
+            if (this.rangeStartIndex === -1) {
+                this.rangeStartIndex = this.activeIndex;
+            }
+            if (this.checkedOptions.length === 1) {
+                this.rangeStartIndex += 1;
+            }
+            this.options.forEach((o, i) => {
+                o.checked = strings.inRange(i, this.activeIndex, this.rangeStartIndex);
+            });
+        }
+        else {
+            this.uncheckAllOptions();
+        }
+        this.activeIndex -= this.activeIndex > 0 ? 1 : 0;
+        this.checkActiveIndex();
+    }
+    /**
+     * Handles click events for listbox options.
+     *
+     * @param e - the event object
+     *
+     * @override
+     * @internal
+     */
+    clickHandler(e) {
+        var _a;
+        if (!this.multiple) {
+            return super.clickHandler(e);
+        }
+        const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
+        if (!captured || captured.disabled) {
+            return;
+        }
+        this.uncheckAllOptions();
+        this.activeIndex = this.options.indexOf(captured);
+        this.checkActiveIndex();
+        this.toggleSelectedForAllCheckedOptions();
+        return true;
+    }
+    /**
+     * @override
+     * @internal
+     */
+    focusAndScrollOptionIntoView() {
+        super.focusAndScrollOptionIntoView(this.activeOption);
+    }
+    /**
+     * In multiple-selection mode:
+     * If any options are selected, the first selected option is checked when
+     * the listbox receives focus. If no options are selected, the first
+     * selectable option is checked.
+     *
+     * @override
+     * @internal
+     */
+    focusinHandler(e) {
+        if (!this.multiple) {
+            return super.focusinHandler(e);
+        }
+        if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+            this.uncheckAllOptions();
+            if (this.activeIndex === -1) {
+                this.activeIndex =
+                    this.firstSelectedOptionIndex !== -1
+                        ? this.firstSelectedOptionIndex
+                        : 0;
+            }
+            this.checkActiveIndex();
+            this.setSelectedOptions();
+            this.focusAndScrollOptionIntoView();
+        }
+        this.shouldSkipFocus = false;
+    }
+    /**
+     * Unchecks all options when the listbox loses focus.
+     *
+     * @internal
+     */
+    focusoutHandler(e) {
+        if (this.multiple) {
+            this.uncheckAllOptions();
+        }
+    }
+    /**
+     * Handles keydown actions for listbox navigation and typeahead
+     *
+     * @override
+     * @internal
+     */
+    keydownHandler(e) {
+        if (!this.multiple) {
+            return super.keydownHandler(e);
+        }
+        if (this.disabled) {
+            return true;
+        }
+        const { key, shiftKey } = e;
+        this.shouldSkipFocus = false;
+        switch (key) {
+            // Select the first available option
+            case keyCodes.keyHome: {
+                this.checkFirstOption(shiftKey);
+                return;
+            }
+            // Select the next selectable option
+            case keyCodes.keyArrowDown: {
+                this.checkNextOption(shiftKey);
+                return;
+            }
+            // Select the previous selectable option
+            case keyCodes.keyArrowUp: {
+                this.checkPreviousOption(shiftKey);
+                return;
+            }
+            // Select the last available option
+            case keyCodes.keyEnd: {
+                this.checkLastOption(shiftKey);
+                return;
+            }
+            case keyCodes.keyTab: {
+                this.focusAndScrollOptionIntoView();
+                return true;
+            }
+            case keyCodes.keyEscape: {
+                this.uncheckAllOptions();
+                this.checkActiveIndex();
+                return true;
+            }
+            case keyCodes.keySpace: {
+                e.preventDefault();
+                if (this.typeAheadExpired) {
+                    this.toggleSelectedForAllCheckedOptions();
+                    return;
+                }
+            }
+            // Send key to Typeahead handler
+            default: {
+                if (key.length === 1) {
+                    this.handleTypeAhead(`${key}`);
+                }
+                return true;
+            }
+        }
+    }
+    /**
+     * Prevents `focusin` events from firing before `click` events when the
+     * element is unfocused.
+     *
+     * @override
+     * @internal
+     */
+    mousedownHandler(e) {
+        if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
+            return super.mousedownHandler(e);
+        }
+    }
+    /**
+     * Switches between single-selection and multi-selection mode.
+     *
+     * @internal
+     */
+    multipleChanged(prev, next) {
+        var _a;
+        this.ariaMultiSelectable = next ? "true" : null;
+        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+            o.checked = next ? false : undefined;
+        });
+        this.setSelectedOptions();
+    }
+    /**
+     * Sets an option as selected and gives it focus.
+     *
+     * @override
+     * @public
+     */
+    setSelectedOptions() {
+        if (!this.multiple) {
+            super.setSelectedOptions();
+            return;
+        }
+        if (this.$fastController.isConnected && this.options) {
+            this.selectedOptions = this.options.filter(o => o.selected);
+            this.focusAndScrollOptionIntoView();
+        }
+    }
+    /**
+     * Ensures the size is a positive integer when the property is updated.
+     *
+     * @param prev - the previous size value
+     * @param next - the current size value
+     *
+     * @internal
+     */
+    sizeChanged(prev, next) {
+        var _a;
+        const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
+        if (size !== next) {
+            defineVividComponent.DOM.queueUpdate(() => {
+                this.size = size;
+            });
+        }
+    }
+    /**
+     * Toggles the selected state of the provided options. If any provided items
+     * are in an unselected state, all items are set to selected. If every
+     * provided item is selected, they are all unselected.
+     *
+     * @internal
+     */
+    toggleSelectedForAllCheckedOptions() {
+        const enabledCheckedOptions = this.checkedOptions.filter(o => !o.disabled);
+        const force = !enabledCheckedOptions.every(o => o.selected);
+        enabledCheckedOptions.forEach(o => (o.selected = force));
+        this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
+        this.setSelectedOptions();
+    }
+    /**
+     * @override
+     * @internal
+     */
+    typeaheadBufferChanged(prev, next) {
+        if (!this.multiple) {
+            super.typeaheadBufferChanged(prev, next);
+            return;
+        }
+        if (this.$fastController.isConnected) {
+            const typeaheadMatches = this.getTypeaheadMatches();
+            const activeIndex = this.options.indexOf(typeaheadMatches[0]);
+            if (activeIndex > -1) {
+                this.activeIndex = activeIndex;
+                this.uncheckAllOptions();
+                this.checkActiveIndex();
+            }
+            this.typeAheadExpired = false;
+        }
+    }
+    /**
+     * Unchecks all options.
+     *
+     * @remarks
+     * Multiple-selection mode only.
+     *
+     * @param preserveChecked - reset the rangeStartIndex
+     *
+     * @internal
+     */
+    uncheckAllOptions(preserveChecked = false) {
+        this.options.forEach(o => (o.checked = this.multiple ? false : undefined));
+        if (!preserveChecked) {
+            this.rangeStartIndex = -1;
+        }
+    }
+}
+foundationElement.__decorate([
+    defineVividComponent.observable
+], ListboxElement.prototype, "activeIndex", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ mode: "boolean" })
+], ListboxElement.prototype, "multiple", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+], ListboxElement.prototype, "size", void 0);
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Listbox extends ListboxElement {
+  orientationChanged() {
+    if (this.orientation === "horizontal") {
+      this.addEventListener("keydown", this.#horizontalKeydownHandler);
+    } else {
+      this.removeEventListener("keydown", this.#horizontalKeydownHandler);
+    }
+  }
+  /**
+   * Handles `keydown` actions for horizontal listbox navigation and typeahead.
+   *
+   * @internal
+   */
+  #horizontalKeydownHandler(e) {
+    if (this.disabled) {
+      return true;
+    }
+    const key = e.key;
+    switch (key) {
+      case keyCodes$1.keyArrowRight: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectNextOption();
+        }
+        break;
+      }
+      case keyCodes$1.keyArrowLeft: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectPreviousOption();
+        }
+        break;
+      }
+    }
+  }
+  slottedOptionsChanged(prev, next) {
+    super.slottedOptionsChanged(prev, next);
+    this.#disableSlottedChildren();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === "disabled") {
+      this.#disableSlottedChildren();
+    }
+  }
+  #disableSlottedChildren() {
+    this.options.forEach((optionElement) => {
+      if (!optionElement.disabled) {
+        optionElement.disabled = this.disabled;
+      }
+    });
+  }
+}
+__decorateClass([
+  defineVividComponent.attr
+], Listbox.prototype, "appearance");
+__decorateClass([
+  defineVividComponent.attr
+], Listbox.prototype, "orientation");
+__decorateClass([
+  defineVividComponent.attr
+], Listbox.prototype, "shape");
+
+exports.Listbox = Listbox;
+exports.ListboxElement = ListboxElement;