@nova-design-system/nova-react 3.21.1-beta.0 → 3.23.0

package/dist/cjs/nv-fieldcheckbox.entry-C23dGGX7.js

@@ -1,138 +0,0 @@
-'use strict';
-
-var index = require('./index-CEKdYnmK.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-require('react-dom');
-
-const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;text-align:left;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
-const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
-
-const NvFieldcheckbox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged");
-        /**
-         * When true, the label will be placed before the checkbox.
-         * @deprecated Use `labelPlacement = end` instead.
-         * */
-        this.labelBefore = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the radio button’s 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();
-        /**
-         * Hides the label visually while still keeping it available for screen
-         * readers.
-         */
-        this.hideLabel = false;
-        /**
-         * Signals that there is an error associated with the checkbox, which can
-         * trigger visual cues.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Indicates whether the checkbox is checked or not.
-         */
-        this.checked = false;
-        /**
-         * Indicates whether the checkbox is in an indeterminate state, typically used
-         * for hierarchical checkboxes.
-         */
-        this.indeterminate = false;
-        /**
-         * Disables the checkbox, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Sets the checkbox to read-only, preventing user changes but still allowing
-         * focus and selection of text.
-         */
-        this.readonly = false;
-        /**
-         * Marks the checkbox as required, indicating that it must be checked for
-         * form submission.
-         */
-        this.required = 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 EVENTS
-    /****************************************************************************/
-    //#region LISTENERS
-    /**
-     * Listens for the change event on the checkbox input element and updates the
-     * checked state.
-     * @param {Event} event - The change event.
-     */
-    handleChange(event) {
-        const target = event.target;
-        if (target.type === 'checkbox' && target.id === this.inputId) {
-            if (this.readonly || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (this.indeterminate) {
-                this.indeterminate = false;
-            }
-            this.checked = target.checked;
-        }
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * Watches for changes to the checked state and emits the new value.
-     * @param {boolean} checked - The new value of the checked state.
-     */
-    onCheckedChanged(checked) {
-        this.checkedChanged.emit(checked);
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillRender() {
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.labelBefore) {
-            this.labelPlacement = 'before';
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-            this.error = true;
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '4db161f34d188b5370f28a39ec9637d269719b04', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '7608f50840faf35c4da8dbfcc8240becece6f609', class: "input-container" }, index.h("input", { key: '733ad01f2cadd1e17d6bfc40022ef9ab1db93f0a', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
-                if (el) {
-                    el.indeterminate = this.indeterminate;
-                }
-            } }), index.h("span", { key: '81da5960abee0aa2c74f10612d05388e427b3a1a', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'e257ebad9a1c23bc77961645dabe6e0fc8c51440', name: "checked-icon" }, index.h("svg", { key: 'd4005dfd634169aa14140c7eba1e0ac63e28342d', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '1817c25edf09f09d4317d9e41b52484883c7a943', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '043148db3518e99f2850ffa4b3622f7ae3c654a7', name: "indeterminate-icon" }, index.h("svg", { key: 'b8a67cfa8d0f880657b62b89ddae7a238b22bc26', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'd63f610ff5cca552d295de18dffeda84cbd370ac', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'e4befe30753cd2f76da4af10e648704068f7ce55' }), index.h("div", { key: '281b4046dbeb8b8dcb05fc154b65ed822fa45960', class: "text-container" }, index.h("slot", { key: '8e40b1e52c55fa45b38bec26e6b20da90c8553ed', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ad2e4a47d1d5a218835b410579e7e93febd08d15', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '815d03f2c69465e430178c29a885ad770e2c561f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '22159e2cb8c4897507da91ebee09502922093ead', class: "description" }, index.h("slot", { key: '61b277015ecb4e0e3b813e45dbb6cd7ebe89506b', name: "description" }, this.description)))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '924d333e443c943b5fe37f31e3191d231b9d87e1', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '2469d3f6cf2121b489b637138642417d27556740', name: "error-description" }, this.errorDescription))))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "checked": ["onCheckedChanged"]
-    }; }
-};
-NvFieldcheckbox.style = NvFieldcheckboxStyle0;
-
-exports.nv_fieldcheckbox = NvFieldcheckbox;

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

@@ -1,392 +0,0 @@
-'use strict';
-
-var index = require('./index-CEKdYnmK.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-require('react-dom');
-
-const nvFielddropdownCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}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;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}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-in-field)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;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 nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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.filterTextChanged = index.createEvent(this, "filterTextChanged");
-        this.openChanged = index.createEvent(this, "openChanged");
-        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();
-        /**
-         * 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;
-        /**
-         * 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;
-        /**
-         * Alters the input field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Defines the maximum height of the multiselect list when open.
-         */
-        this.maxHeight = '';
-        /**
-         * 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;
-        /**
-         * When an item is selected by the user, the dropdown will continue to stay
-         * open.
-         */
-        this.openOnSelect = false;
-        /**
-         * Determines if the component’s filtering behavior is managed externally.
-         * When set to true and filterable is enabled, the component won’t
-         * automatically filter items. Instead, you must implement your own filtering
-         * logic (e.g., server-side search or custom matching) using the
-         * filterTextChanged event.
-         */
-        this.controlledFilter = false;
-        /**
-         * Delay in milliseconds before the search is triggered when typing in the
-         * filter input.
-         * @default 300
-         */
-        this.debounceDelay = 300;
-        /**
-         * 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;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
-        /**
-         * The text entered by the user for filtering dropdown items.
-         */
-        this.filterText = '';
-        this.selectedValues = new Set();
-        this.open = false;
-        /**
-         * Closes the popover when a click is detected outside the component.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.handleClickOutside = (event) => {
-            var _a;
-            if (!(event.target instanceof Node))
-                return;
-            if (!((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
-                this.open = false;
-        };
-        this.handleFilterInput = () => {
-            this.open = true;
-            this.filterText = this.inputElement.value;
-            this.filterTextChanged.emit(this.inputElement.value);
-            clearTimeout(this.debounceTimer);
-            this.debounceTimer = window.setTimeout(() => {
-                this.filterItems();
-            }, this.debounceDelay);
-        };
-        this.getSelectedLabel = () => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (!this.value)
-                return '';
-            if ((_a = this.filterText) === null || _a === void 0 ? void 0 : _a.length)
-                return this.filterText;
-            if (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) > 1) {
-                const matchingItem = this.options.find(option => option.value === this.value);
-                return (_d = (_c = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _c !== void 0 ? _c : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _d !== void 0 ? _d : this.value;
-            }
-            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-            const matchingItem = items.find(item => item.value === this.value);
-            const selectedLabel = matchingItem
-                ? (_g = (_e = matchingItem.label) !== null && _e !== void 0 ? _e : (_f = matchingItem.textContent) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : matchingItem.value
-                : '';
-            return selectedLabel;
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleOpenChange(newOpen) {
-        if (newOpen === false) {
-            clearTimeout(this.debounceTimer);
-            setTimeout(() => {
-                this.clearFilter();
-            }, 100);
-        }
-    }
-    handleValueChange() {
-        this.updateSelectedItem();
-        if (!this.open || !this.filterText)
-            this.setFilterInputToSelectedValue();
-    }
-    handleOptionsChange() {
-        this.updateSelectedItem();
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LISTENERS
-    handleDropdownItemSelected(event) {
-        if (this.disabled || this.readonly)
-            return;
-        if (!this.openOnSelect)
-            this.open = false;
-        if (event.detail.detached)
-            return;
-        const items = this.getAllItems();
-        items.forEach(item => {
-            if (item !== event.target) {
-                item.removeAttribute('selected');
-            }
-            else {
-                item.setAttribute('selected', 'true');
-            }
-        });
-        this.value = event.detail.value;
-        this.setFilterInputToSelectedValue();
-        this.valueChanged.emit(event.detail.value);
-    }
-    handleFocus(event) {
-        if (event.relatedTarget instanceof HTMLElement &&
-            event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
-            return;
-        }
-        if (event.target != this.toggleElement)
-            this.open = true;
-    }
-    handleFocusOut(event) {
-        if (!(event.relatedTarget instanceof Node))
-            return;
-        if (this.el.contains(event.relatedTarget))
-            return;
-        this.open = false;
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape') {
-            this.focusField();
-            this.open = false;
-            return;
-        }
-        if (event.key === ' ') {
-            if (event.target == this.selectElement) {
-                event.preventDefault(); // Prevent scrolling down
-                this.open = true;
-            }
-            return;
-        }
-        const items = this.getNavigableItems();
-        const highlightedItem = this.getHighlightedItemIndex(items);
-        if (event.key === 'ArrowDown') {
-            event.preventDefault(); // Prevent scrolling down
-            this.open = true;
-            const nextIndex = highlightedItem + 1;
-            this.updateHighlightedItem(items, nextIndex >= items.length ? 0 : nextIndex);
-        }
-        if (event.key === 'ArrowUp') {
-            event.preventDefault(); // Prevent scrolling up
-            this.open = true;
-            const nextIndex = highlightedItem - 1;
-            this.updateHighlightedItem(items, nextIndex < 0 ? items.length - 1 : nextIndex);
-        }
-    }
-    handleDocumentClick(event) {
-        this.handleClickOutside(event);
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region METHODS
-    /** Clears the filter text */
-    async clearFilter() {
-        var _a;
-        if (!this.filterable)
-            return;
-        if ((_a = this.filterText) === null || _a === void 0 ? void 0 : _a.length) {
-            this.filterText = '';
-            this.filterTextChanged.emit(this.filterText);
-        }
-        this.filterItems();
-        // Wait for wrapper lifecycle to finish
-        setTimeout(() => {
-            this.setFilterInputToSelectedValue();
-        }, 0);
-    }
-    /**
-     * Toggles the dropdown popover open state
-     * @param {boolean} open - The open state to set, if null, toggles the state
-     */
-    async toggleDropdown(open) {
-        if (open !== undefined) {
-            setTimeout(() => {
-                this.open = open;
-            }, 0);
-        }
-        else {
-            setTimeout(() => {
-                this.open = !this.open;
-            }, 0);
-        }
-    }
-    syncToggleDropdown() {
-        this.open = !this.open;
-    }
-    setFilterInputToSelectedValue() {
-        if (!this.filterable && !this.disabled && !this.readonly)
-            return;
-        if (!this.inputElement)
-            return;
-        if (!this.value)
-            return (this.inputElement.value = '');
-        this.inputElement.value = this.getSelectedLabel();
-    }
-    // Will exclude detached items and data-empty
-    getFilterableItems() {
-        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty]):not([detached])'));
-    }
-    getNavigableItems() {
-        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
-    }
-    getAllItems() {
-        return Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-    }
-    getHighlightedItemIndex(items) {
-        return items.findIndex(item => item.classList.contains('highlighted'));
-    }
-    updateHighlightedItem(items, index) {
-        items.forEach((item, i) => {
-            item.classList.remove('highlighted');
-            if (i === index) {
-                item.classList.add('highlighted');
-                item.focus();
-                item.scrollIntoView({ block: 'nearest' });
-            }
-        });
-    }
-    focusField() {
-        const focusableItem = this.el.querySelector('[data-scope="focusable"]');
-        focusableItem === null || focusableItem === void 0 ? void 0 : focusableItem.focus();
-    }
-    /**
-     * 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, _b;
-        if (this.controlledFilter)
-            return;
-        let hasVisibleItems = false;
-        const items = this.getFilterableItems();
-        // Remove the "no results found" item if it exists
-        (_a = this.el
-            .querySelector('nv-fielddropdownitem[data-empty]')) === null || _a === void 0 ? void 0 : _a.remove();
-        items.forEach(item => {
-            var _a, _b;
-            const filterText = this.filterText.toLowerCase();
-            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '';
-            // Either in the value or in the textual content
-            const shouldShow = value.includes(filterText) || textContent.includes(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;
-            (_b = this.el.querySelector('div[slot="content"] ul')) === null || _b === void 0 ? void 0 : _b.prepend(emptyItem);
-        }
-    }
-    async updateSelectedItem() {
-        const items = this.getAllItems();
-        if (this.value) {
-            items.forEach(item => {
-                if (item.value === this.value) {
-                    item.selected = true;
-                }
-                else {
-                    item.selected = false;
-                }
-            });
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentDidLoad() {
-        this.updateSelectedItem();
-        this.setFilterInputToSelectedValue();
-    }
-    disconnectedCallback() {
-        clearTimeout(this.debounceTimer);
-    }
-    componentDidRender() {
-        // Make sure to show the value when the field is disabled or readonly
-        // as we switch to an input instead of a p in that case
-        if (!this.filterable && (this.disabled || this.readonly)) {
-            this.inputElement.value = this.getSelectedLabel();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        var _a;
-        return (index.h(index.Host, { key: '349904a9bf07fb37c44f0b73c95ae736efb6a3b2', 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: 'c5f8bb31012cac1c671fdca7b77325b28b7f0fad', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'cec5527d93c3742abbe5cb26d452a0ce061998dc', name: "label" }, this.label))), index.h("nv-popover", { key: '6b5c8d8fc0fe2615ac2703e78faa91a4c8e0f792', triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'f07d22a294703544be6687e11b880d01a29c1629', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '4067e496595f3647c6ab30a858011f38da9fe039', name: "before-input" }), index.h("div", { key: 'e13bf4e23b508a3ce621a677509c2052ce6ee146', class: "input-container" }, index.h("slot", { key: '8f26a1ab3d0c7405e4bc16acfcd6ab7f27336816', name: "leading-input" }), this.filterable || 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, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (index.h("nv-iconbutton", { key: '715fe5388001e7d005ee4c57f6ea699b2b507dbb', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '18d825c0bfd9b6bf528dbf34f7e7a2f90678fa87', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'aee8efcaeb022ca3ef73bbd3085755817e6fae12', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '403e224fadcb71ad15574a100b9892f3b8bfa209', name: "after-input" })), index.h("div", { key: 'b154f9f5bb6b8bc73c2c0fdfeae096586ca43275', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("ul", { key: 'ae92bb94df44b545ce83644fe3cb4b312f7d3147' }, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), index.h("slot", { key: '8f8a76ba2cfd23cbff34a579222a2e1f8a635142', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c3b288a86fd98c0cf61bf671524f2a5c0d8ccd47', class: "description" }, index.h("slot", { key: '212e58e32660ef43042c418c09b828ed388f4017', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '0baf91460aac3f2ba5b2d41721fc44c5eeb2f6aa', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '134681ffcf2a86b86bac60ff0ebabbba4e89b380', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-};
-NvFielddropdown.style = NvFielddropdownStyle0;
-
-exports.nv_fielddropdown = NvFielddropdown;