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

package/dist/cjs/nv-fieldnumber.entry-BHhIsjLK.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-CDe7nrrW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const NvFieldnumberStyle0 = nvFieldnumberCss;
+
+const NvFieldnumber = 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 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;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * 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 WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = Number(input.value);
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return this.min !== undefined && this.value <= this.min;
+        };
+        this.isMaxValueReached = () => {
+            return this.max !== undefined && this.value >= this.max;
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        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: '99076502efb577ad65e43827f4d4959fb1f84055' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365821e9e3cb25367591680279f05d951f6a5fd9', htmlFor: this.inputId }, index.h("slot", { key: '92273b991f6c6bd34fe6a302dedb808d46abb71d', name: "label" }, this.label))), index.h("div", { key: 'ab849355fa1719ed40b5379a8aeee160f98ea798', class: "input-wrapper" }, index.h("slot", { key: '71e4de7753f3880756cd763a7a8955832066d0e7', name: "before-input" }), index.h("div", { key: '6da56e990c4ad0329c5d974868e9520cb5ac7a99', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd09eb9350067116d5236142951f0e7ed81d9aa5c', name: "leading-input" }), index.h("input", { key: '6df1d2f3acb880000b57e5be990f6d843c7d3b2c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '85deaf9197825370d0bc7d81bd82cf9fd86b7a05', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '68ed66eb7a9af38f974e515d554eed6e3d28a915', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '16b0e4b303cce4ee7df29ea411e8fee808e5ddb0', class: "stepper" }, index.h("nv-iconbutton", { key: '6dec84d7c05b467b5178177351e6fa769d2a9433', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: '66391588b961555aa20a1974098c114aadceadd1', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '4549e591971e83d5d14f08b56a8d5357c5d6aaf0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'cef21ffaf75f976708d0c8b51f928daea26f1221', class: "description" }, index.h("slot", { key: 'be36b7c3c6a606847805dc1a50f762a80155d695', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '91b5b8c969520bb10bccd59066ddea32d6fa58f3', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7e0729d42390a1fc62d320841de4e016e01e2485', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+NvFieldnumber.style = NvFieldnumberStyle0;
+
+exports.nv_fieldnumber = NvFieldnumber;

package/dist/cjs/nv-fieldnumber.entry-BklKxOFA.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const NvFieldnumberStyle0 = nvFieldnumberCss;
+
+const NvFieldnumber = 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 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;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * 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 WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = Number(input.value);
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return this.min !== undefined && this.value <= this.min;
+        };
+        this.isMaxValueReached = () => {
+            return this.max !== undefined && this.value >= this.max;
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        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: '99076502efb577ad65e43827f4d4959fb1f84055' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365821e9e3cb25367591680279f05d951f6a5fd9', htmlFor: this.inputId }, index.h("slot", { key: '92273b991f6c6bd34fe6a302dedb808d46abb71d', name: "label" }, this.label))), index.h("div", { key: 'ab849355fa1719ed40b5379a8aeee160f98ea798', class: "input-wrapper" }, index.h("slot", { key: '71e4de7753f3880756cd763a7a8955832066d0e7', name: "before-input" }), index.h("div", { key: '6da56e990c4ad0329c5d974868e9520cb5ac7a99', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd09eb9350067116d5236142951f0e7ed81d9aa5c', name: "leading-input" }), index.h("input", { key: '6df1d2f3acb880000b57e5be990f6d843c7d3b2c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '85deaf9197825370d0bc7d81bd82cf9fd86b7a05', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '68ed66eb7a9af38f974e515d554eed6e3d28a915', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '16b0e4b303cce4ee7df29ea411e8fee808e5ddb0', class: "stepper" }, index.h("nv-iconbutton", { key: '6dec84d7c05b467b5178177351e6fa769d2a9433', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: '66391588b961555aa20a1974098c114aadceadd1', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '4549e591971e83d5d14f08b56a8d5357c5d6aaf0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'cef21ffaf75f976708d0c8b51f928daea26f1221', class: "description" }, index.h("slot", { key: 'be36b7c3c6a606847805dc1a50f762a80155d695', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '91b5b8c969520bb10bccd59066ddea32d6fa58f3', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7e0729d42390a1fc62d320841de4e016e01e2485', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+NvFieldnumber.style = NvFieldnumberStyle0;
+
+exports.nv_fieldnumber = NvFieldnumber;

package/dist/cjs/nv-fieldnumber.entry-C8zJkL24.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const NvFieldnumberStyle0 = nvFieldnumberCss;
+
+const NvFieldnumber = 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 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;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * 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 WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = Number(input.value);
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return this.min !== undefined && this.value <= this.min;
+        };
+        this.isMaxValueReached = () => {
+            return this.max !== undefined && this.value >= this.max;
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        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: '99076502efb577ad65e43827f4d4959fb1f84055' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365821e9e3cb25367591680279f05d951f6a5fd9', htmlFor: this.inputId }, index.h("slot", { key: '92273b991f6c6bd34fe6a302dedb808d46abb71d', name: "label" }, this.label))), index.h("div", { key: 'ab849355fa1719ed40b5379a8aeee160f98ea798', class: "input-wrapper" }, index.h("slot", { key: '71e4de7753f3880756cd763a7a8955832066d0e7', name: "before-input" }), index.h("div", { key: '6da56e990c4ad0329c5d974868e9520cb5ac7a99', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd09eb9350067116d5236142951f0e7ed81d9aa5c', name: "leading-input" }), index.h("input", { key: '6df1d2f3acb880000b57e5be990f6d843c7d3b2c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '85deaf9197825370d0bc7d81bd82cf9fd86b7a05', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '68ed66eb7a9af38f974e515d554eed6e3d28a915', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '16b0e4b303cce4ee7df29ea411e8fee808e5ddb0', class: "stepper" }, index.h("nv-iconbutton", { key: '6dec84d7c05b467b5178177351e6fa769d2a9433', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: '66391588b961555aa20a1974098c114aadceadd1', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '4549e591971e83d5d14f08b56a8d5357c5d6aaf0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'cef21ffaf75f976708d0c8b51f928daea26f1221', class: "description" }, index.h("slot", { key: 'be36b7c3c6a606847805dc1a50f762a80155d695', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '91b5b8c969520bb10bccd59066ddea32d6fa58f3', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7e0729d42390a1fc62d320841de4e016e01e2485', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+NvFieldnumber.style = NvFieldnumberStyle0;
+
+exports.nv_fieldnumber = NvFieldnumber;

package/dist/cjs/nv-fieldnumber.entry-C9rKWY_M.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const NvFieldnumberStyle0 = nvFieldnumberCss;
+
+const NvFieldnumber = 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 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;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * 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 WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = Number(input.value);
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return this.min !== undefined && this.value <= this.min;
+        };
+        this.isMaxValueReached = () => {
+            return this.max !== undefined && this.value >= this.max;
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        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: 'd4a702bbb94585da82e6c40ac83d0f3508564a7b' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '11cfc66c6796aae236796fb5a637aa72ef6c2340', htmlFor: this.inputId }, index.h("slot", { key: 'bce23d0b1a283ec2d1c1ce0cc6d2c61a6d2cf6e9', name: "label" }, this.label))), index.h("div", { key: 'c62aa0a4d69fd0235912ef16c89a4d511348aa48', class: "input-wrapper" }, index.h("slot", { key: '2f7a66f50f7256b7ef5dcc90d112da47a4cac511', name: "before-input" }), index.h("div", { key: 'b00c8348136289513a1c3d5ef68a08a581fa4d9c', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '9d4cce93ff07c710db6cafb3d5c644fad480a397', name: "leading-input" }), index.h("input", { key: '44ef9c168f0e6e1ce9166cc896127f79d0794392', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: 'b2335c490f6ff69c3019731e309d450c94f0a881', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '5b259e0b4fce9444d6bd4019a5a9c01b66cb8b67', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: 'a22e29f5af849084331ddda2d63339b3517cb0cf', class: "stepper" }, index.h("nv-iconbutton", { key: '97b7a1646b20fb0804daa5c830c70be05bc6673f', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: '2a9cfde9dfa60a3a565a4673a3696f2907e67845', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '85b9df5f03f45486dec27961d9c98eafa90e008a', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '1bab44c8766935832acf883732f059333426bd61', class: "description" }, index.h("slot", { key: 'f148c139053ce336f342a93e6bc9b8ac11872909', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a47082dd9ae82156fde1dd4948e31dcfec804a64', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '9537d8157e4acd4a2c502e271b9b2640c0cc71a6', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+NvFieldnumber.style = NvFieldnumberStyle0;
+
+exports.nv_fieldnumber = NvFieldnumber;