@nova-design-system/nova-webcomponents 3.0.0-beta.24 → 3.0.0-beta.25

package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js

@@ -0,0 +1,751 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NVFieldDropDown {
+    constructor() {
+        /**
+         * Handle click on the input container.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClick = (event) => {
+            if (this.disabled || this.readonly) {
+                return; // Do nothing if the dropdown is disabled or read-only
+            }
+            const target = event.target;
+            // Check if it is the paragraph or another part of the container
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                // Simulate focus to trigger "focus-within" style
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    // Remove the "focus-within" class after a delay or when the popover is closed
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    // Or remove the class when the popover is closed
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle input change.
+         * @param {Event} event - The input event.
+         */
+        this.handleInput = (event) => {
+            if (!this.filterable)
+                return; // Do not filter if `filterable` is false
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle the state if the dropdown is disabled or read-only
+            }
+            const input = event.target;
+            this.filterText = input.value.toLowerCase();
+            this.value = input.value; // Update the value
+            this.valueChanged.emit(input.value); // Emit an event if needed
+            this.filterItems(); // Update the visibility of items
+        };
+        /**
+         * Handle input focus.
+         */
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle the state if the dropdown is disabled or read-only
+            }
+            this.open = true; // Force the popover to open
+        };
+        /**
+         * Handle input blur.
+         */
+        this.handleInputBlur = () => {
+            // Use a delay to check if the focus is still within the popover
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    this.open = false;
+                    this.popoverElement.hide(); // Close the popover if the focus is outside the component
+                }
+            }, 150);
+        };
+        /**
+         * Toggle the dropdown popover.
+         * @returns {void}
+         */
+        this.togglePopover = () => {
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle if disabled or read-only
+            }
+            this.open = !this.open;
+            if (this.open) {
+                this.popoverElement.show();
+                // Si le dropdown n'est pas filtrable, focus sur le premier élément
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+            else {
+                this.popoverElement.hide();
+            }
+        };
+        this.inputId = uuidv4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.open = false;
+        this.autocomplete = 'off';
+        this.value = undefined;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.readonly = false;
+        this.disabled = false;
+        this.emptyresult = 'No results found';
+        this.filterText = '';
+        this.filterable = false;
+        this.isFilterable = this.filterable;
+        this.selectedValues = new Set();
+    }
+    handleItemSelected(event) {
+        if (this.disabled || this.readonly)
+            return;
+        // Retrieve all nv-fielddropdownitem elements present in the dropdown.
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // For each item, remove the 'selected' attribute and the 'selected' class.
+        items.forEach(item => {
+            if (item !== event.target) {
+                item.removeAttribute('selected');
+                item.classList.remove('selected');
+            }
+        });
+        // Update the value and emit the event with the selected item.
+        this.value = event.detail.value;
+        event.target.setAttribute('selected', 'true');
+        event.target.classList.add('selected');
+        this.dropdownItemSelected.emit(event.detail);
+        // Close the popover after selecting.
+        if (this.popoverElement) {
+            this.popoverElement.hide();
+        }
+    }
+    handleOpenChanged(event) {
+        this.open = event.detail; // Update `open` based on the popover state
+    }
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    watchValueHandler() {
+        // Handle value change and update the corresponding dropdown item if it exists
+        this.setInitialSelection();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Handle pre-selection during component initialization
+        this.setInitialSelection();
+        // Apply filtering if the dropdown is filterable and there is a value
+        if (this.filterable && this.value) {
+            this.filterText = this.value.toLowerCase();
+            this.filterItems(); // Update the visibility of items
+        }
+        else {
+            // Ensure all items are visible if no filtering is applied
+            this.resetFilter();
+        }
+    }
+    /**
+     * Set the initial selection based on the current value and update the inputElement value.
+     */
+    setInitialSelection() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        const selectedItem = items.find(item => {
+            var _a;
+            return item.getAttribute('label') === this.value ||
+                item.getAttribute('value') === this.value ||
+                ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
+        });
+        // Remove 'selected' from all items first to reset the state
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        if (selectedItem) {
+            // Add the `selected` attribute and `selected` class for visual styling
+            selectedItem.setAttribute('selected', 'true');
+            selectedItem.classList.add('selected');
+            // Update the value and inputElement value to reflect the pre-selected item
+            this.value =
+                selectedItem.getAttribute('label') ||
+                    selectedItem.getAttribute('value') ||
+                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                    '';
+            if (this.inputElement) {
+                this.inputElement.value = this.value;
+            }
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Filter dropdown items based on the text entered by the user.
+     * If no items are found, display a message indicating no results.
+     */
+    filterItems() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // Remove the "no results found" item if it exists
+        const existingEmptyItem = this.el.querySelector('nv-fielddropdownitem[data-empty]');
+        if (existingEmptyItem) {
+            existingEmptyItem.remove();
+        }
+        let hasVisibleItems = false;
+        // Iterate over all items and adjust their visibility
+        items.forEach(item => {
+            var _a, _b;
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ''; // Get the textual content of the slot
+            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || ''; // Get the value of the `value` attribute
+            // Check if the filtered text is present either in the value or in the textual content
+            const shouldShow = value.includes(this.filterText) ||
+                textContent.includes(this.filterText);
+            item.style.display = shouldShow ? '' : 'none'; // Hide or show the item
+            if (shouldShow) {
+                hasVisibleItems = true;
+            }
+        });
+        // If no items are visible, add the "no results found" item
+        if (!hasVisibleItems) {
+            const emptyItem = document.createElement('nv-fielddropdownitem');
+            emptyItem.setAttribute('data-empty', 'true');
+            emptyItem.setAttribute('disabled', 'true');
+            emptyItem.textContent = this.emptyresult;
+            (_a = this.el.querySelector('ul[slot="content"]')) === null || _a === void 0 ? void 0 : _a.appendChild(emptyItem);
+        }
+    }
+    /**
+     * Reset the filter and make all items visible.
+     */
+    resetFilter() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        items.forEach(item => {
+            item.style.display = '';
+        });
+    }
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * Handle click outside the component.
+     * @param {MouseEvent} event - The click event.
+     */
+    handleClickOutside(event) {
+        if (this.el.contains(event.target) ||
+            (this.inputElement && this.inputElement.contains(event.target))) {
+            // If the click is inside the component or on the input, do not close the popover
+            return;
+        }
+        this.popoverElement.hide(); // Close the popover if the click is outside the component
+    }
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    // Focus sur le premier élément si ce n'est pas filtrable
+                    this.focusFirstItem();
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        // Vérifiez si le popover est défini avant de chercher les items
+        if (!this.popoverElement) {
+            console.warn('Popover element is not defined');
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'));
+        // Vérifiez si les items existent
+        if (items.length === 0) {
+            console.warn('No dropdown items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex = (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex = (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            items[currentIndex].click();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            this.popoverElement.hide();
+            if (this.inputElement) {
+                this.inputElement.blur();
+            }
+        }
+    }
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.setAttribute('tabindex', '0');
+                if (!item.checkVisibility()) {
+                    console.log('Item not focused');
+                }
+                item.focus(); // Forcer le focus ici
+                item.scrollIntoView({ block: 'nearest' });
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitem');
+        if (firstItem) {
+            firstItem.focus();
+            this.updateHighlightedItem(Array.from(this.el.querySelectorAll('nv-fielddropdownitem')), 0);
+        }
+        else {
+            console.warn('No first item found to focus');
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '250c1480057430dc7ed9b9f9e754f141f72ae8df' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '381c4c83a2a868e3714770c942e02f7553c02593', htmlFor: this.inputId }, h("slot", { key: '213591b66daee583e63f8f13097ce5d7e00176b5', name: "label" }, this.label))), h("nv-popover", { key: '935e926058a328f1279002853a6125fb14183b3d', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'e0b285ab5bb4af2bf84afd20457fccbad87c7ab6', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '78a732873c07adb228c2e1c930bcadc3f77a25c6', name: "before-input" }), h("div", { key: '7413239369a4d03acd13875f63d8f4973bf3147e', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '228cf0a81fdc68fd8ed9c25ce15da5ad88b4e1fb', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { key: 'b6be1247858609d11db9401f08625445961c0c5c', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover })), h("slot", { key: 'c0ad34bdf23bdfdb1adbdab04b4629b2b1c6bc9d', name: "after-input" })), h("slot", { key: 'e8d4a526b62a84caca5f28aa0a9d448683d3ad51', name: "content" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '22273a23815f4048dce904b491c7972fce7051fd', class: "description" }, h("slot", { key: '8f8364a20416b5cf20c75e9ead5a2856d1ad307f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e13aa744e80484699a0abf26f93a1ed2490d13cb', hidden: !this.error, class: "error-description" }, h("slot", { key: 'faf36f46aede8b40e9f7c01c36119cee11ad5dd2', name: "error-description" }, this.errorDescription)))));
+    }
+    static get is() { return "nv-fielddropdown"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fielddropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fielddropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                },
+                "attribute": "input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It\u2019s a crucial element for making forms clear and\nuser-friendly."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display temporary text inside the input field to give users a hint about\nwhat to type. It\u2019s a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input\u2019s data in form submissions. It should be\nunique within the form to avoid conflicts."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the dropdown popover."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${TextInputAutocomplete}`",
+                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "references": {
+                        "TextInputAutocomplete": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they\u2019ve used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data."
+                },
+                "attribute": "autocomplete",
+                "reflect": true,
+                "defaultValue": "'off'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input\u2019s value is managed by the component\u2019s state."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Alters the input field\u2019s appearance to indicate an error, helping users\nidentify fields that need correction."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "A description that appears when there is an error related to the dropdown\nfield."
+                },
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input field\u2019s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won\u2019t be\nable to type or delete anything."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled prop lets you turn off the input field so that users can\u2019t\ntype in it. When disabled, the field is grayed out and won\u2019t respond to\nclicks or touches."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "emptyresult": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display when no items match the filter."
+                },
+                "attribute": "emptyresult",
+                "reflect": true,
+                "defaultValue": "'No results found'"
+            },
+            "filterable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables or disables the filtering feature for the dropdown items."
+                },
+                "attribute": "filterable",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filterText": {},
+            "isFilterable": {},
+            "selectedValues": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropdownItemSelected",
+                "name": "dropdownItemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item is selected."
+                },
+                "complexType": {
+                    "original": "DropdownItemSelectedEventDetail",
+                    "resolved": "DropdownItemSelectedEventDetail",
+                    "references": {
+                        "DropdownItemSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../nv-fielddropdownitem/DropdownItemSelectedEventDetail",
+                            "id": "src/components/nv-fielddropdownitem/DropdownItemSelectedEventDetail.tsx::DropdownItemSelectedEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the input value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getFilterText": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Retrieves the current filter text entered by the user.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The filter text."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "filterable",
+                "methodName": "watchFilterableHandler"
+            }, {
+                "propName": "value",
+                "methodName": "watchValueHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "itemSelected",
+                "method": "handleItemSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "openChanged",
+                "method": "handleOpenChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-fielddropdown.js.map