@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

package/dist/cjs/nv-fielddropdown.entry-hHh_RDC4.js

@@ -0,0 +1,361 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFielddropdownStyle0 = nvFielddropdownCss;
+
+const NvFielddropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * State of the dropdown popover.
+         */
+        this.open = false;
+        /**
+         * The autocomplete prop helps users fill out the input field faster by
+         * suggesting entries they've used before, like their email or address.
+         * You can turn it on to make forms more convenient or off to ensure users
+         * always type in fresh data.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Display the input field's content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won't be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * The disabled prop lets you turn off the input field so that users can't
+         * type in it. When disabled, the field is grayed out and won't respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyResult = 'No results found';
+        /**
+         * Enables or disables the filtering feature for the dropdown items.
+         */
+        this.filterable = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /** The text entered by the user for filtering dropdown items. */
+        this.filterText = '';
+        this.isFilterable = this.filterable;
+        this.selectedValues = new Set();
+        /**
+         * Options configuration for the dropdown items.
+         */
+        this.parsedOptions = [];
+        this.handleInputContainerClick = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                // 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);
+                }
+            }
+        };
+        this.handleInput = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            this.open = true;
+            this.filterText = input.value.toLowerCase();
+            this.filterItems();
+        };
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.open = true;
+        };
+        this.togglePopover = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.open = !this.open;
+        };
+        this.getSelectedLabel = () => {
+            var _a, _b, _c, _d, _e;
+            if (!this.value)
+                return '';
+            if (this.parsedOptions.length > 1) {
+                const matchingItem = this.parsedOptions.find(option => option.value === this.value);
+                return (_b = (_a = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _a !== void 0 ? _a : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _b !== void 0 ? _b : this.value;
+            }
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+            const matchingItem = items.find(item => item.value === this.value);
+            const selectedLabel = matchingItem
+                ? (_e = (_c = matchingItem.label) !== null && _c !== void 0 ? _c : (_d = matchingItem.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : matchingItem.value
+                : '';
+            return selectedLabel;
+        };
+        this.clearFilter = () => {
+            if (!this.filterable)
+                return;
+            this.filterText = '';
+            this.inputElement.value = this.getSelectedLabel();
+            this.inputElement.focus();
+            this.filterItems();
+        };
+    }
+    handleDropdownItemSelected(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        items.forEach(item => {
+            if (item !== event.target) {
+                item.removeAttribute('selected');
+            }
+            else {
+                item.setAttribute('selected', 'true');
+            }
+        });
+        this.clearFilter();
+        this.value = event.detail.value;
+        this.open = false;
+    }
+    handleOpenChanged(event) {
+        this.open = event.detail; // Update `open` based on the popover state
+    }
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    handleOptionsChange(newValue) {
+        var _a;
+        if (newValue) {
+            try {
+                const parsedOpts = JSON.parse(newValue);
+                this.parsedOptions = [...parsedOpts];
+                if (!this.value) {
+                    const defaultValue = parsedOpts.find(option => option.selected);
+                    this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
+                    this.updateSelectedItem(this.value);
+                }
+            }
+            catch (error) {
+                console.error('nv-fielddropdown: error parsing options:', error);
+                this.parsedOptions = [];
+            }
+        }
+        else {
+            this.parsedOptions = [];
+        }
+    }
+    handleBlur(event) {
+        const target = event.relatedTarget;
+        if (!(target instanceof Node) || !this.el.contains(target)) {
+            this.open = false;
+            if (this.inputElement) {
+                this.filterText = '';
+                this.inputElement.value = this.getSelectedLabel();
+                setTimeout(() => {
+                    this.filterItems();
+                }, 200);
+            }
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.el)
+            return;
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
+        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 === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * 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);
+            if (shouldShow)
+                item.removeAttribute('hidden');
+            else
+                item.setAttribute('hidden', '');
+            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 = '';
+        });
+    }
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.focus();
+                item.scrollIntoView({ block: 'nearest' });
+            }
+            else {
+                item.classList.remove('highlighted');
+            }
+        });
+    }
+    updateSelectedItem(value) {
+        if (!value)
+            return;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        const matchingItem = items.find(item => {
+            var _a;
+            const itemLabel = item.getAttribute('label');
+            const itemValue = item.getAttribute('value');
+            const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            return itemLabel === value || itemValue === value || itemText === value;
+        });
+        items.forEach(item => {
+            if (item === matchingItem) {
+                item.setAttribute('selected', '');
+            }
+            else {
+                item.removeAttribute('selected');
+            }
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.resetFilter();
+        if (this.filterable && this.filterText) {
+            this.filterItems();
+        }
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+    }
+    componentDidLoad() {
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+        if (this.inputElement) {
+            this.inputElement.value = this.getSelectedLabel();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'fd9c415beb138bf85bdd914c6143b50a2f2330bf', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3bd9ea3ac7f1202882511ab6bf0d187975eaaaf6', htmlFor: this.inputId }, index.h("slot", { key: '0e33a34af113e622401e5d23843fc67afce8c7a0', name: "label" }, this.label))), index.h("nv-popover", { key: 'cf41abb986f71b746f7b83828eb69244e502626a', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'c030054877c24d5091bc9ea91f8b90182a5150b9', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '974aa8736caa3112d2e17a6e6fc33d0271315303', name: "before-input" }), index.h("div", { key: '7b657cf2dd489e8e22ecd52403a9eba8193c1728', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '26d55cabf26329cde6f7ac93464def081533dd7d', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.isFilterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '4dab0dd29d016a68b94681893bd0367c2f2bbccb', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '94555a8f663a45ce5e744a2c4f42442ee725556f', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'c52dcc16864b6093cc7c1417d98506c9b4739f4b', "data-scope": "toggle-dropdown", 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, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'a78197668881b8fc5fd7522a3b2ebcb4e4d6c1cc', name: "after-input" })), index.h("div", { key: '161678718ea939874d27b800052f3ff2df94a07d', slot: "content" }, this.parsedOptions.length > 0 ? (index.h("ul", null, this.parsedOptions.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b4ea5b9e6d12307201847c8b9979e7c77442c0a9', class: "description" }, index.h("slot", { key: '7162553aadfbeae787683a1fcf4ac7a1ca4788da', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c96506582bd9c604490ce0d9c4a398ff70b7e814', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '9069e068a0e1624344b248d68799ecf07f10c649', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "filterable": ["watchFilterableHandler"],
+        "value": ["watchValueHandler"],
+        "options": ["handleOptionsChange"]
+    }; }
+};
+NvFielddropdown.style = NvFielddropdownStyle0;
+
+exports.nv_fielddropdown = NvFielddropdown;

package/dist/cjs/nv-fielddropdownitem.entry-BscNyhXz.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-CIcUUomJ.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '8f867e8c456eae541561024d5194e1582504e85b', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '2f26847b783458cde7a99d69269b0e15f381cdb8' }), !this.composed && (index.h("div", { key: '22229450f3e1492d1f71cbd9e89c6e0204cee201', class: "text-wrapper" }, index.h("span", { key: 'a5c691f3addf577acd848b6fe72c23388d116584', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '02232856ec60e9b741ced372a9d05def5d822cc6', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;

package/dist/cjs/nv-fielddropdownitem.entry-CMWgXP_Z.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'acee05b9d46a503b8ca19acf9f96577f83686c38', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '07eb6931adeb42c1bd9d83b58ef43d07eb0fd4df' }), !this.composed && (index.h("div", { key: '4a1c9d51f6d7e2ea3680ddd2294bc5a88c6a354b', class: "text-wrapper" }, index.h("span", { key: '6f13add04158044d4b3cd00b386ed0ed5cde87fc', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '88bfab2accd9b3bb8a2bb8fbbc6bafab8712432e', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;

package/dist/cjs/nv-fielddropdownitem.entry-CS1Ejbc9.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-wDACGzKb.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (index.h("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, index.h("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;

package/dist/cjs/nv-fielddropdownitem.entry-CW4WMmSZ.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-CDe7nrrW.js');
+require('react');
+
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
+const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+const NvFielddropdownitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected");
+        this.composed = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Indicates if the item is selected.
+         */
+        this.selected = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleSelected = () => {
+            if (this.disabled)
+                return;
+            this.dropdownItemSelected.emit({
+                label: this.label,
+                value: this.value,
+            });
+        };
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelected();
+            (_b = (_a = this.el
+                .closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        var _a;
+        this.composed = Boolean(this.el.children.length);
+        if (!this.value) {
+            const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
+            this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (index.h("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, index.h("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitem.style = NvFielddropdownitemStyle0;
+
+exports.nv_fielddropdownitem = NvFielddropdownitem;