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

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

@@ -1,391 +0,0 @@
-'use strict';
-
-var index = require('./index-C8UfzrMI.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 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.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;
-            if (this.open && !this.filterable) {
-                this.focusFirstItem();
-            }
-        };
-        this.getSelectedLabel = () => {
-            var _a, _b, _c;
-            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-            const matchingItem = items.find(item => item.getAttribute('value') === this.value);
-            return matchingItem
-                ? (_c = (_a = matchingItem.label) !== null && _a !== void 0 ? _a : (_b = matchingItem.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : matchingItem.value
-                : '';
-        };
-        this.clearFilter = () => {
-            this.filterText = '';
-            this.inputElement.value = '';
-            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.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) {
-        if (newValue) {
-            this.updateSelectedItem(newValue);
-        }
-        this.valueChanged.emit(newValue);
-    }
-    handleOptionsChange(newValue) {
-        if (newValue) {
-            try {
-                const parsedOpts = JSON.parse(newValue);
-                this.parsedOptions = [...parsedOpts];
-                const selectedOption = this.parsedOptions.find(opt => opt.selected);
-                if (selectedOption) {
-                    this.value = selectedOption.value;
-                    requestAnimationFrame(() => {
-                        // Wait for items to be rendered
-                        this.updateSelectedItem(selectedOption.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;
-        }
-    }
-    handleKeyDown(event) {
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                if (!this.filterable) {
-                    // Focus on the first item if it is not filterable
-                    this.focusFirstItem();
-                }
-                event.preventDefault();
-                return;
-            }
-            return;
-        }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'));
-        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 === '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;
-    }
-    /**
-     * Set the initial selection based on the current value and update the
-     * inputElement value.
-     */
-    setInitialSelection() {
-        if (!this.value)
-            return;
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-        const selectedItem = items.find(item => item.getAttribute('value') === this.value);
-        items.forEach(item => {
-            item.removeAttribute('selected');
-            item.classList.remove('selected');
-        });
-        if (selectedItem) {
-            selectedItem.setAttribute('selected', 'true');
-            selectedItem.classList.add('selected');
-            this.value = selectedItem.getAttribute('value');
-            if (this.inputElement) {
-                this.inputElement.value = this.value;
-            }
-        }
-        else {
-            console.warn('No matching item found for value:', this.value);
-        }
-    }
-    /**
-     * 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 = '';
-        });
-    }
-    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');
-            }
-        });
-    }
-    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('nv-fielddropdown: no first item found to focus');
-        }
-    }
-    updateSelectedItem(value) {
-        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');
-            }
-        });
-        if (matchingItem && this.inputElement) {
-            this.inputElement.value = value;
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.resetFilter();
-        this.setInitialSelection();
-        if (this.filterable && this.filterText) {
-            this.filterItems();
-        }
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-        if (this.value) {
-            this.updateSelectedItem(this.value);
-        }
-    }
-    componentDidLoad() {
-        if (this.value) {
-            this.updateSelectedItem(this.value);
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '48e85659e175543dc2ef58833894d7463ae6f63d' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f51d40ffadbf8a7e33b76c30fb1a2a1561588d08', htmlFor: this.inputId }, index.h("slot", { key: 'a5255931aa0a633e7086f561c30a8575e28f1694', name: "label" }, this.label))), index.h("nv-popover", { key: '7c790545d51d8724dae9dc9e0f91a54fd2fb2544', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '4933be02446f387c684d73eac4a06983f8dc9ac0', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'f5ca197bd700abc0c6ef8b0b83c73c31f62d7df8', name: "before-input" }), index.h("div", { key: 'bce1ce0bdd3c6739d0c46a61a7f82c17d1f95a3f', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c58e66a16b0e10704eb58076e7d68869a2a621c3', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { 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, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), this.isFilterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '6bef63f4197f0b3b79e42aa774513f0c85c0250f', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'c7fb1b550ba644116c361fa2d0b1cb88c5c16446', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '1ddbe075c2b62ca43af0ee6cd662faf993ada8da', "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: 'f4a3116e50f7d1c5c08b4cb2ab441dedb1bb47d2', name: "after-input" })), index.h("div", { key: 'e88cb43467be8ccc9e404087b29d5595e5b4576f', 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: '2da91397cdeadfb9bb90085344256f5da1bf5fc1', class: "description" }, index.h("slot", { key: 'a860a4f17d1de5131b7eb1f580e0b21ce35b280f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c6913ab2f8c0edbcf847d626a641578d4d3c3b47', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b528456faacff3f589797365b6e944f3da3f8fd8', 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;