@nova-design-system/nova-react 3.23.0 → 3.25.0

package/dist/cjs/nv-fieldselect.entry-BPQEtrv2.js

@@ -1,397 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-container input{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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 NvFieldselect = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged", 3);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region STATES
-        this.computedDisplayValue = '';
-        this.internalReadonly = false;
-        //#endregion STATES
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the select 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 = v4BdYh22OP.v4();
-        /**
-         * The disabled prop lets you turn off the select field so that users can’t
-         * choose something. When disabled, the field is grayed out and won’t respond to
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the select 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 change or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the select field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks the select field as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = false;
-        /**
-         * Alters the select field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the select field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * When enabled, allows the select to handle multiple selections.
-         */
-        this.multiple = false;
-        /**
-         * The value of the select field.
-         * - If `multiple` is `false`, it's a single string.
-         * - If `multiple` is `true`, it's a comma-separated string of selected values.
-         */
-        this.value = '';
-        /**
-         * When enabled, displays the value element instead of the label when readonly.
-         * By default, the label is displayed in readonly mode. Also it automatically
-         * sets the component to readonly.
-         */
-        this.displayValue = false;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on a <select>
-         * element.
-         */
-        this.autofocus = false;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        //#endregion WATCHERS
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Handles the change event on the select element. This method is used to
-         * update the value property when the selected options change. It is also
-         * used to emit the selectChanged event when the selected value changes.
-         * @param {Event} event - The change event on the select element.
-         * @emits selectChanged
-         */
-        this.handleSelectChange = (event) => {
-            const select = event.target;
-            let selectedValues = Array.from(select.selectedOptions).map(option => option.value);
-            if (!this.multiple) {
-                selectedValues = selectedValues.slice(0, 1);
-            }
-            this.value = this.multiple
-                ? selectedValues.join(', ')
-                : selectedValues[0] || '';
-            this.valueChanged.emit(this.value);
-            // Update form value
-            this.setFormValue();
-        };
-        /**
-         * Handles focus when the select container is clicked.
-         */
-        this.handleSelectContainerClick = () => {
-            if (!this.internalReadonly && this.selectElement) {
-                this.selectElement.focus();
-            }
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * Updates the display value when the value property changes. This watcher is
-     * used to update the display value when the selected value changes. This is
-     * necessary for readonly select fields to display the selected value.
-     * @internal This watcher is not intended to be called outside of the component.
-     * @param {string} newValue - The new value of the select field.
-     */
-    updateDisplayValueWatcher(newValue) {
-        this.updateDisplayValue();
-        if (this.selectElement) {
-            const selectedValues = newValue.split(',').map(val => val.trim());
-            const options = this.selectElement.options;
-            if (options) {
-                Array.from(options).forEach(option => {
-                    option.selected = this.multiple
-                        ? selectedValues.includes(option.value)
-                        : option.value === selectedValues[0];
-                });
-                if (!this.multiple) {
-                    this.selectElement.value = newValue; // Only set when not multiple
-                }
-            }
-            else {
-                this.selectElement.value = selectedValues[0] || '';
-            }
-        }
-        // Update form value
-        this.setFormValue();
-    }
-    /**
-     * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.
-     * @param {boolean} newValue - The new value of displayValue.
-     */
-    handleDisplayValueChange(newValue) {
-        this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true
-        if (this.readonly) {
-            this.internalReadonly = true;
-        }
-    }
-    /**
-     * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.
-     * @param {boolean} newValue - The new value of readonly.
-     */
-    handleReadonlyChange(newValue) {
-        this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true
-        if (this.displayValue) {
-            this.internalReadonly = true;
-        }
-    }
-    /**
-     * Handle options change and update the internal state
-     * @param {typeof this.options} newValue - The new value of options
-     */
-    handleOptionsChange(newValue) {
-        if (!newValue)
-            return;
-        // Update the value if an option is pre-selected
-        const selectedOption = newValue.find(opt => opt.selected);
-        if (selectedOption) {
-            this.value = selectedOption.value;
-        }
-    }
-    /**
-     * Updates the display value of the select field. This method is used to
-     * update the display value when the selected value changes. This is necessary
-     * for readonly select fields to display the selected value. This method is
-     * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher
-     * watcher.
-     * @internal This method is not intended to be called outside of the component.
-     */
-    updateDisplayValue() {
-        if (this.internalReadonly && !this.displayValue) {
-            if (this.multiple) {
-                const selectedLabels = this.value
-                    .split(',')
-                    .map(key => key.trim())
-                    .map(key => this.getLabelFromId(key) || '')
-                    .filter(label => label !== '');
-                this.computedDisplayValue = selectedLabels.join(', ') || '';
-            }
-            else {
-                this.computedDisplayValue = this.getLabelFromId(this.value) || '';
-            }
-        }
-        else if (this.internalReadonly && this.displayValue) {
-            this.computedDisplayValue = this.value || '';
-        }
-    }
-    /**
-     * Retrieves the label from the <option> elements based on the provided key (value).
-     * This method uses the id or value attribute directly from the <select> options.
-     * @param {string} key - The key (value) for which to find the corresponding label.
-     * @returns {string} The label if found; otherwise, an empty string.
-     */
-    getLabelFromId(key) {
-        this.ensureSelectElement();
-        if (!this.selectElement) {
-            return '';
-        }
-        // Cache the option list
-        const options = this.selectElement.options;
-        if (options) {
-            const option = Array.from(options).find(option => option.value === key);
-            return option ? option.textContent.trim() || '' : '';
-        }
-        else {
-            return '';
-        }
-    }
-    /**
-     * Sets the value of the form element for form submission. This method is
-     * called when the selected value changes or when the value property is set.
-     * @internal This method is not intended to be called outside of the component.
-     */
-    setFormValue() {
-        this.internals.setFormValue(this.value);
-    }
-    /**
-     * Ensures the select element is available. This method is used to ensure
-     * the select element is available before attempting to access it.
-     * @internal This method is not intended to be called outside of the component.
-     */
-    ensureSelectElement() {
-        if (!this.selectElement) {
-            this.selectElement = this.el.querySelector('select');
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillRender() {
-        this.updateDisplayValue(); // Ensure display value is updated before render
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-            this.error = true;
-        }
-    }
-    /**
-     * Lifecycle method that is called before the component is rendered. This is
-     * where the internal state is set up before rendering occurs.
-     */
-    componentWillLoad() {
-        // Set internalReadonly based on the readonly prop
-        this.internalReadonly = this.readonly;
-        // Ensure internalReadonly is true if displayValue is true during loading
-        if (this.displayValue) {
-            this.internalReadonly = true;
-        }
-        if ('attachInternals' in this.el) {
-            this.internals = this.el.attachInternals();
-        }
-        else {
-            // Fallback logic for browsers without attachInternals support
-            this.internals = {
-                setFormValue: (value) => {
-                    const formElement = this.el.closest('form');
-                    if (formElement) {
-                        const input = document.createElement('input');
-                        input.type = 'hidden';
-                        input.name = this.name;
-                        input.value = value;
-                        formElement.appendChild(input);
-                    }
-                },
-            };
-        }
-        // Initialize value as an empty string if multiple is true
-        if (this.multiple && typeof this.value !== 'string') {
-            this.value = '';
-        }
-        // Parse initial options if present
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-    }
-    /**
-     * Lifecycle method that is called after the component has been rendered.
-     * This is where the display value is updated and the initial select element's
-     * state is set.
-     */
-    componentDidLoad() {
-        this.updateDisplayValue();
-        if (this.selectElement) {
-            // Only set the value for single selection, skip for multiple
-            if (!this.multiple) {
-                this.selectElement.value = this.value;
-            }
-            const selectedValues = this.multiple
-                ? this.value.split(',').map(v => v.trim())
-                : [this.value];
-            const options = this.selectElement.options;
-            if (options) {
-                Array.from(options).forEach(option => {
-                    option.selected = this.multiple
-                        ? selectedValues.includes(option.value)
-                        : option.value === selectedValues[0];
-                });
-            }
-            else {
-                // Handle case where there are no options
-                this.selectElement.value = selectedValues[0] || '';
-            }
-        }
-        // Set the initial form value
-        this.setFormValue();
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDERING
-    /**
-     * The render method creates the HTML structure for the component, including
-     * the label, select element, and any error or description messages. It also
-     * applies the appropriate CSS classes based on the readonly state and
-     * displayValue prop. This method is called when the component is rendered.
-     * @returns {HTMLStencilElement} The HTML element to render.
-     */
-    render() {
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (index.h(index.Host, { key: '19dc919c517b20e9271019c3c035a5d3965ac500' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd490a55c4c2bbea30ea5474906e16ac1e0ebf09d', htmlFor: this.inputId }, index.h("slot", { key: 'eaa51f927cc6c16899f806832afe5807948e5aed', name: "label" }, this.label))), index.h("div", { key: '04ee5ad2797e3f315c21359b09a9350c9c69789b', class: "select-wrapper" }, index.h("slot", { key: '7b63bc1fdf20a286635c36f7a1d865365284dd68', name: "before-input" }), index.h("div", { key: 'a98eb2c006fe321bc6f2e28d18afe24641cd4227', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '2946fafe902e662c5fa37c8a238cd98a04b9e2f5', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '7512f2cca62e6f4e86bd32b370730e5b630bd8c1', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
-                ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), index.h("select", Object.assign({ key: '6f6c473e866a81ff53baa1c647d3563033d8d71e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
-                ? `${this.inputId}-error`
-                : `${this.inputId}-description` }), this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '11ace2d1d554e07071441a92b751f9f1e40c41b9', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '5fe0c48e595e4e51fd88a1cf3b593349eb8b6880', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '992b8433aa0430828910e9b0d7a5b5bb9cbdde02', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'a1c89dc4437e96680a6d1ddf4db85b478ad52b28', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'fe76b1d3caa6addb556d6743626c6bc160d77d53', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '50bd8a56780a1b722d38279bb9f51860bf36e8b6', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '3bfc2999c532ec0c8e192a5e442a0294e70cfc8d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5e807d931efdd9d3a69c90dee42497234f7c2cda', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '48db0766450942d8d8ce4cdfa3f80a46d7c18a77', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["updateDisplayValueWatcher"],
-        "displayValue": ["handleDisplayValueChange"],
-        "readonly": ["handleReadonlyChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-};
-NvFieldselect.style = nvFieldselectCss;
-
-exports.nv_fieldselect = NvFieldselect;

package/dist/cjs/nv-fieldtext.entry-BD-z01ru.js

@@ -1,163 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvFieldtextCss = "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-fieldtext{--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-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[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-fieldtext[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-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fieldtext[required]:not([required=false]) label::after,nv-fieldtext[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .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}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .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-fieldtext>.input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{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-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::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-fieldtext>.input-wrapper .input-container input{}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.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 NvFieldtext = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged", 3);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#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 = v4BdYh22OP.v4();
-        /**
-         * The type prop lets you specify what kind of information the input field
-         * should accept. Choose 'text' for general words or sentences, 'tel' for
-         * phone numbers, or 'email' for email addresses. This makes sure users get
-         * the right keyboard and validation for what they need to enter.
-         */
-        this.type = 'text';
-        /**
-         * 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;
-        /**
-         * 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;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks the input field as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * When used with the email input type, this prop enables the field to accept
-         * multiple email addresses. Users can enter several addresses, separating
-         * each one with a comma, allowing the form to handle multiple recipients.
-         */
-        this.multiple = 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;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        //#endregion EVENTS
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Handles the input event on the input element.
-         * Emits the inputChanged event with the new value.
-         * @param {Event} event - Event object of the input event.
-         */
-        this.handleInput = (event) => {
-            const input = event.target;
-            this.value = input.value;
-            this.valueChanged.emit(input.value);
-        };
-        /**
-         * Handles focus when the input container is clicked.
-         */
-        this.handleInputContainerClick = () => {
-            this.inputElement.focus();
-        };
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillRender() {
-        if (this.textInputType) {
-            this.type = this.textInputType;
-        }
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-            this.error = true;
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (index.h(index.Host, { key: '0cbae961a0d59fcba4fb273fb813a690fe66e139' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e8523abecb5db03407c99bec4aef29292c54b8b9', htmlFor: this.inputId }, index.h("slot", { key: '794b1363cbc29d628c57c14630d929b80f1fea62', name: "label" }, this.label))), index.h("div", { key: 'fa592d4df8d53534d051d874cb640fd42d991a64', class: "input-wrapper" }, index.h("slot", { key: '5473b8c7259be5e51b771f01450a2b07d449d590', name: "before-input" }), index.h("div", { key: '7901740dd1e0e1c11f34c50f72ca0bb6eb0c62e7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '3894a124bcad3f66cdd50f74781e99720fd3bf3a', name: "leading-input" }), index.h("input", Object.assign({ key: 'c59aa092005df1b24321666e98fa72fd70ac8e55', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput })), index.h("slot", { key: '0ff21168be1eff0b34f342c9e7adda8d3bb0ea30', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'b86f7cb07c86c07273ee0a77e673addef50902e2', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f3e1f2bcaf4f009b5d560921e3d3c28e8ae26d41', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '0e68fd5bb2d4d5c244f4f17b66fda7e73a0868ae', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6ad45dd3c28d6097ea339279df6a1477e021e633', class: "description" }, index.h("slot", { key: '401cd1e43d57fc357f04bb7009e02bafade6de62', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f67e669eed3fe013a18e26588a608afe32d76fba', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '20a32f3a875bc8f036ad133c4b0d87deb5b92b5c', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-};
-NvFieldtext.style = nvFieldtextCss;
-
-exports.nv_fieldtext = NvFieldtext;