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

package/dist/cjs/nv-fieldnumber.entry-CEmPQK-3.js

@@ -1,126 +0,0 @@
-'use strict';
-
-var index = require('./index-wDACGzKb.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-CLhjFlCj.js

@@ -1,126 +0,0 @@
-'use strict';
-
-var index = require('./index-B_VOAJzk.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;

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

@@ -1,126 +0,0 @@
-'use strict';
-
-var index = require('./index-C8UfzrMI.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: 'dfdd78ef36068cdf6316c28815c4f538a31948b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fd62123cd36c895872d8f39f53279e6b30aebbb6', htmlFor: this.inputId }, index.h("slot", { key: '1ae8e36c92499784727d5475ffba2e193d809bf6', name: "label" }, this.label))), index.h("div", { key: 'fa18e6e52926dc9f144ccc61194505509e31bb52', class: "input-wrapper" }, index.h("slot", { key: '335e98f56a3b09ad4877584a4f23f4677728bf3e', name: "before-input" }), index.h("div", { key: '0628ee3bb756af0dc17f0b0c1f7e7feca5cc0481', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '680d7c258d11bc53eb2162ff9e76399b9b773e6f', name: "leading-input" }), index.h("input", { key: '37c5e0269d38fba60f594ae6893565d65df9b573', 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: 'ba55c53fb229d076aa964e91bb43eb451a7d72bf', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '01801f320e78c2025858cca5f06b8d622fcc58ed', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '6f3cae85317a5d6ea3ea5695b9c8a3c876b788fd', class: "stepper" }, index.h("nv-iconbutton", { key: '8e75feeae477728964e8c291d698d8bd0b1de259', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: 'd09b83e0474cb5b8f7a7c3cc5c453833def3aa38', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '16a89e311259c83645dbceab7f682c778dc8eded', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '58dc574b42cc4697dff78301809c24dafbcabfe2', class: "description" }, index.h("slot", { key: '6d402e360d93d464c4adf16d7974029b386fef3d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1a6de49980c737b206ace729a43fb25cb7420960', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a84eecf8e46571f4c0f6ed757e89477c1f77c6d2', 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-ezdDvJh_.js

@@ -1,126 +0,0 @@
-'use strict';
-
-var index = require('./index-CinzsZ8D.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: '14de76d6ddda9977fa3ad28d6e9d2acf613565fa' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '22131a183df8f9612d7d1fc4c7904f7e9e3fba71', htmlFor: this.inputId }, index.h("slot", { key: '48cca38b15579499662018d593bd9e73129565da', name: "label" }, this.label))), index.h("div", { key: '9a0a40a370f879f0685a62fb7360419db1245738', class: "input-wrapper" }, index.h("slot", { key: '05bcbc8bd7311f3e6ae467b40af269e373e7ef26', name: "before-input" }), index.h("div", { key: '81861b40c527dde0b7629914e70f7ee1b3389f06', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'dc64fe00dd75120daedfdc51fc2d5d955f3e3348', name: "leading-input" }), index.h("input", { key: '01593dfe3c0331acec3ec765cb1673d6a0536f1f', 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: 'f253f726e6ad61e0b49389f38d1b6c519bd7ade6', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '11968ad93087be6813e99e2b781fa8d3d7f7b772', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '900d860455ced0a97dbdad044c83578f680e2d1c', class: "stepper" }, index.h("nv-iconbutton", { key: '1c6f95596b862dad92ca2006e983fbf4b45fa9ee', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: '2f08e682805b4c9cf6f09b71c885460ca697de5f', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: 'b63dbbaeb358b73105f552de15a0226906f5e547', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '43c3f1bd58a36095e69283151ac4d7edcd0eef4a', class: "description" }, index.h("slot", { key: '0c91c8198be73d7285065d86c1ca1340d3517e0d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ecb9e02f67241294215ee3e570006dcf98539537', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '763ddc2a238b85022d72e046d9665fbb433f8476', 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;