@nova-design-system/nova-react 3.0.0-beta.41 → 3.0.0-beta.42

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

@@ -0,0 +1,365 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldselectCss = "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}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)}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{content:\"*\";color:var(--components-form-text-required);font-weight:700}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}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:\"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-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 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:500;line-height:var(--form-field-line-height)}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:\"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-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:500;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:\"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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}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{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-fieldselect .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 NvFieldselectStyle0 = nvFieldselectCss;
+
+const NvFieldselect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region STATES
+        this.computedDisplayValue = '';
+        this.internalReadonly = false;
+        /**
+         * Parsed options stored internally
+         */
+        this.parsedOptions = [];
+        //#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 = v4A79185f4.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.
+         */
+        this.required = 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;
+        //#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;
+        }
+    }
+    /**
+     * Parse options and update the internal state
+     * @param {string} newValue - The new value of options
+     */
+    handleOptionsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                const parsedOpts = JSON.parse(newValue);
+                this.parsedOptions = [...parsedOpts];
+                // Update the value if an option is pre-selected
+                const selectedOption = parsedOpts.find(opt => opt.selected);
+                if (selectedOption) {
+                    this.value = selectedOption.value;
+                }
+            }
+            catch (error) {
+                console.error('Error parsing options:', error);
+                this.parsedOptions = [];
+            }
+        }
+    }
+    /**
+     * 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() {
+        return (index.h(index.Host, { key: 'e447f10faacbd9107b3636b711745655b234daaf' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6949ffbfa4a3d055689aa384521456277336eb31', htmlFor: this.inputId }, index.h("slot", { key: 'c46be62ffca373acaa64555dd055d0e506731ff8', name: "label" }, this.label))), index.h("div", { key: '73173b60885c479e76c9d089f40033ac73641597', class: "select-wrapper" }, index.h("slot", { key: 'a64bbdef05fd860d1534bea9c5d8143abe2aa688', name: "before-input" }), index.h("div", { key: 'c8d5503afd194397a0385959fbe557544208f7e9', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '82456f7f21d552459af03787b26363acb9d77cb8', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '2b02c5f82fd43d2f12d2473ebe68704e7aac2c52', 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", { key: '597815200ff13a3a94c5f8cf2f31f292630831a1', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, 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.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'e7315331865264cfceefc37333f29f503cfaca60', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '20b2a3b436a31b4528c0a6336433baa20f1dade7', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '6ddb9ce572a0e66670ea3a3f084c08b465a1054f', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '7df5645e762451036ba84e8ae7e533f6d9c9e89e', name: "chevron-down", size: "md", emphasis: "lower", tabIndex: -1 })))), index.h("slot", { key: '43220cb3c92d9876e2f22645ed695c076439999a', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7ca06f0ec81f82cce825045bef226bdaeaa2774d', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '008a54ac423cfe534214d0f32d5b557419d60aaf', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1c5d34d7441cdaa28c463f062c74070b8193433e', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '98a88b41c33a87541d2b3833ca95fc5dff7a8d2e', 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 = NvFieldselectStyle0;
+
+exports.nv_fieldselect = NvFieldselect;

package/dist/cjs/nv-fieldtext.entry-DKdxC2cG.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldtextCss = "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}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)}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{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"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-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){opacity:0.5;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 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:500;line-height:var(--form-field-line-height)}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:\"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-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.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-fieldtext>.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 NvFieldtextStyle0 = nvFieldtextCss;
+
+const NvFieldtext = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        //#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 = v4A79185f4.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.
+         */
+        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;
+        /**
+         * 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;
+        //#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() {
+        return (index.h(index.Host, { key: 'c2087a4b6384599a1cc52b18b8c4f981f9de5368' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'cff1e42c5a60b4a21af73baa86c45f7cc25520cc', htmlFor: this.inputId }, index.h("slot", { key: '2bc682d07f905ecb9e02b12b114fee9e88a8c1dd', name: "label" }, this.label))), index.h("div", { key: '84e4440e2a774d7ea0fa92cc9b70ebb1dc75c001', class: "input-wrapper" }, index.h("slot", { key: 'd35fce40a0bb9927bb734628968b6ccfd0a38fe9', name: "before-input" }), index.h("div", { key: '2e3ef34b8cee6187f5996ba4475266f4db65d93f', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0504980d073238202e51eccde3f4d38f133e883e', name: "leading-input" }), index.h("input", { key: '8208b2ac4c2c8181bcac9542e838aa14bf19c897', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: 'f1ade80215e39b7fcc1b28ee8b5bd3a075df1f21', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '15c0df99a2cc6033f760ef9966a1d5c75bcbfac3', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '2374d49838eaed58f9564a7dbb2b7162e828950b', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f28c3e325fbcca0de0aabb94914d2049d8165bb6', class: "description" }, index.h("slot", { key: 'e4bfe4450070f1b15ff67ccfffaf474f59f0aa3d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '9413a8cd161b7458f6e9d8cb3f0c52128f6861e3', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a831645d3c45469e92ec24a8e6c92b7285a0b3f1', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvFieldtext.style = NvFieldtextStyle0;
+
+exports.nv_fieldtext = NvFieldtext;

package/dist/cjs/nv-fieldtext.entry-DRPCH6Sf.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldtextCss = "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}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)}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{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"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-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){opacity:0.5;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 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:500;line-height:var(--form-field-line-height)}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:\"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-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.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-fieldtext>.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 NvFieldtextStyle0 = nvFieldtextCss;
+
+const NvFieldtext = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        //#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 = v4A79185f4.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.
+         */
+        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;
+        /**
+         * 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;
+        //#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() {
+        return (index.h(index.Host, { key: '9979c9c835f414965a4ae1ee3db398ee6223c3a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '899abb4f3faaa65e1f32738e7ab91440dcc32fd2', htmlFor: this.inputId }, index.h("slot", { key: 'f82bb9e2e63d56afb8078ffcdaee8da6d2b3df87', name: "label" }, this.label))), index.h("div", { key: 'b75dfdfc0c875db7019a23c084133b90d957ed8e', class: "input-wrapper" }, index.h("slot", { key: 'cf4cd32cd106bee88c662fd0960e67ba87dddbc9', name: "before-input" }), index.h("div", { key: '2f005ef34a722424dcf86c9e189d1ab001bd2495', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0d554159f716ed6a4dae76a6b0befd05cdf97173', name: "leading-input" }), index.h("input", { key: '8dbba6bce4617cbd3d9168b897c0101c83fb6e1e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: 'cb4a0028e53aefcaf9b3127488811ea9d66cd305', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '307fa39a19684d92b5e64ce83301dac337948822', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: 'a8eb4186286fd472b7c0d515be544e6331bad33c', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f5bd9926035d6d8829382adea3f68eb633bbf738', class: "description" }, index.h("slot", { key: '561c28cc04225e9d84a86b161714efde4882debe', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '09e08c344f477d70f698a9c11e38c737667c4ef6', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '117cd688cb63f5411225d468ca2071b19c1be39f', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvFieldtext.style = NvFieldtextStyle0;
+
+exports.nv_fieldtext = NvFieldtext;