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

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

@@ -1,119 +0,0 @@
-'use strict';
-
-var index = require('./index-CEWbQ5nh.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: 'ffcbe1c8f14257f6380d28f2c50fe8b77ae73027' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3b84598a05eedc7625312def01ca726dc68fa247', htmlFor: this.inputId }, index.h("slot", { key: '8c8f0d2f86742dd0699b8b309cbea0dca1d294ce', name: "label" }, this.label))), index.h("div", { key: 'c2adf3acc7780a7eba5d4762b7275d1c63304bf5', class: "input-wrapper" }, index.h("slot", { key: 'c49756d1daaba476222ebda2df4854b1094655b3', name: "before-input" }), index.h("div", { key: '723c34f09e6c073bdef2db799246da72ffd52703', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4e94bcac72ac2e5147a8d5e33396a13359820009', name: "leading-input" }), index.h("input", { key: '96cbf022912735445467320600e372fba03de4e4', 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: '39a55c42a49006d316e5dcc5389793c6264d2b09', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'bf1b6040dbb392b5c46b3b9af665d7cdc7389d29', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: 'bb2256bf3fc5165e61f162fe89dd7be564a989c0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3d2c5a89247042184b3a110ca7982b793b0bd86a', class: "description" }, index.h("slot", { key: '2358cc5217d6ba65b4d4baa927b397dbe62982e8', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'cdef4117d71b8a6bdde19fea1a0f4070ba02ab2e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '66a2b100ab641aa9c2e22fdfc9a987bb86cd44a0', 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-CW6P-R-Q.js

@@ -1,119 +0,0 @@
-'use strict';
-
-var index = require('./index-B_VOAJzk.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: '322d1e58130e04d69a5f14343fc5325c299e7d74' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '12cc27c3d8e7791db20ba39be84a261708ac1b81', htmlFor: this.inputId }, index.h("slot", { key: '01cbeb48a79294d3c10283891fcdd68fce8b5597', name: "label" }, this.label))), index.h("div", { key: 'd13eccee6cb016d49b9e2bba0a6333ea9ddb7cb0', class: "input-wrapper" }, index.h("slot", { key: 'af2ffdddf6f9ae4f1af16a1710a0f829ef30196c', name: "before-input" }), index.h("div", { key: 'b598d6b8709bd56051b25a12705a3b785cc5c7d5', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c3006ed040dee98b443467e5d4a081fb4404efd8', name: "leading-input" }), index.h("input", { key: '057f8836541e78d465083174ec029ed9ba56d950', 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: '1c961288b97eb8f2580fd421b03db1f275709d47', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4ffaf30cf97c5c6e69709abcca3db5ef7fa2598e', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '46257b784d082071ed717f37aeac1e1bbffaeac3', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dad03cc1954a17b4d9075f5c0949abdb83bee15c', class: "description" }, index.h("slot", { key: '62c4d6315ad5eff50c86e289d7bcc61afacf64bc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '3cd561cd634519ae18da4edfe8ec35dd2000a4ce', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7fc992b0285652f46530ca23f12e626752dd1282', 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-CyLJxDw6.js

@@ -1,119 +0,0 @@
-'use strict';
-
-var index = require('./index-BZCQTWfv.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: '322d1e58130e04d69a5f14343fc5325c299e7d74' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '12cc27c3d8e7791db20ba39be84a261708ac1b81', htmlFor: this.inputId }, index.h("slot", { key: '01cbeb48a79294d3c10283891fcdd68fce8b5597', name: "label" }, this.label))), index.h("div", { key: 'd13eccee6cb016d49b9e2bba0a6333ea9ddb7cb0', class: "input-wrapper" }, index.h("slot", { key: 'af2ffdddf6f9ae4f1af16a1710a0f829ef30196c', name: "before-input" }), index.h("div", { key: 'b598d6b8709bd56051b25a12705a3b785cc5c7d5', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c3006ed040dee98b443467e5d4a081fb4404efd8', name: "leading-input" }), index.h("input", { key: '057f8836541e78d465083174ec029ed9ba56d950', 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: '1c961288b97eb8f2580fd421b03db1f275709d47', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4ffaf30cf97c5c6e69709abcca3db5ef7fa2598e', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '46257b784d082071ed717f37aeac1e1bbffaeac3', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dad03cc1954a17b4d9075f5c0949abdb83bee15c', class: "description" }, index.h("slot", { key: '62c4d6315ad5eff50c86e289d7bcc61afacf64bc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '3cd561cd634519ae18da4edfe8ec35dd2000a4ce', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7fc992b0285652f46530ca23f12e626752dd1282', 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-DKdxC2cG.js

@@ -1,119 +0,0 @@
-'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;