@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.docs.js

@@ -0,0 +1,180 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldnumberDocs = {
+    component: 'nv-fieldnumber',
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Numberfield Label',
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Numberfield Description',
+                description: 'Description will show here',
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                label: 'Numberfield Placeholder',
+                placeholder: 'Type something...',
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            args: {
+                label: 'Numberfield Name',
+                name: 'name',
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Numberfield Value',
+                value: 123,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Numberfield Disabled',
+                disabled: true,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Numberfield Readonly',
+                readonly: true,
+                value: 123,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Numberfield Required',
+                required: true,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Numberfield Error',
+                error: true,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Numberfield Error Description',
+                description: 'Make sure to be valid.',
+                error: true,
+                errorDescription: 'This input has an error.',
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.success),
+            args: {
+                label: 'Numberfield Success',
+                success: true,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.min),
+            args: {
+                label: 'Numberfield Min',
+                min: 0,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.max),
+            args: {
+                label: 'Numberfield Max',
+                max: 10,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.step),
+            args: {
+                label: 'Numberfield Step',
+                step: 2,
+            },
+            template: h("nv-fieldnumber", { "data-storybook-args": true }),
+        },
+        {
+            name: 'beforeInputSlot',
+            description: 'Content to be placed before the number input, outside the input container.',
+            args: {
+                label: 'Before Input Slot',
+                description: 'This is placed before the number field',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("nv-button", { slot: "before-input" }, "Before Input Slot"))),
+        },
+        {
+            name: 'afterInputSlot',
+            description: 'Content to be placed after the number input, outside the input container.',
+            args: {
+                label: 'After Input Slot',
+                description: 'This is placed after the number field',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("nv-button", { slot: "after-input" }, "After Input Slot"))),
+        },
+        {
+            name: 'leadingInputSlot',
+            description: 'Content to be placed before the number input, within the input container.',
+            args: {
+                label: 'Leading Input',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "Leading", dismissible: true }))),
+        },
+        {
+            name: 'labelSlot',
+            description: 'Content to be placed as the label, will override the label prop.',
+            args: {
+                label: 'Original Label',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
+        },
+        {
+            name: 'descriptionSlot',
+            description: 'Content to be placed as the description, will override the description prop.',
+            args: {
+                label: 'Description Slot',
+                description: 'Original description',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
+        },
+        {
+            name: 'errorDescriptionSlot',
+            description: 'Content to be placed as the error description, will override the errorDescription prop.',
+            args: {
+                label: 'Error Description Slot',
+                errorDescription: 'Original error description',
+                error: true,
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
+        },
+    ],
+};
+export default NvFieldnumberDocs;
+//# sourceMappingURL=nv-fieldnumber.docs.js.map

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldnumber.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldnumberDocs: NovaDocs<Components.NvFieldnumber> = {\n  component: 'nv-fieldnumber',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.label),\n      args: {\n        label: 'Numberfield Label',\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.description),\n      args: {\n        label: 'Numberfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.placeholder),\n      args: {\n        label: 'Numberfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.name),\n      args: {\n        label: 'Numberfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.value),\n      args: {\n        label: 'Numberfield Value',\n        value: 123,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.disabled),\n      args: {\n        label: 'Numberfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.readonly),\n      args: {\n        label: 'Numberfield Readonly',\n        readonly: true,\n        value: 123,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.required),\n      args: {\n        label: 'Numberfield Required',\n        required: true,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.error),\n      args: {\n        label: 'Numberfield Error',\n        error: true,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.errorDescription),\n      args: {\n        label: 'Numberfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This input has an error.',\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.success),\n      args: {\n        label: 'Numberfield Success',\n        success: true,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.min),\n      args: {\n        label: 'Numberfield Min',\n        min: 0,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.max),\n      args: {\n        label: 'Numberfield Max',\n        max: 10,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: nameof<Components.NvFieldnumber>(x => x.step),\n      args: {\n        label: 'Numberfield Step',\n        step: 2,\n      },\n      template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n    },\n    {\n      name: 'beforeInputSlot',\n      description:\n        'Content to be placed before the number input, outside the input container.',\n      args: {\n        label: 'Before Input Slot',\n        description: 'This is placed before the number field',\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldnumber>\n      ),\n    },\n    {\n      name: 'afterInputSlot',\n      description:\n        'Content to be placed after the number input, outside the input container.',\n      args: {\n        label: 'After Input Slot',\n        description: 'This is placed after the number field',\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldnumber>\n      ),\n    },\n    {\n      name: 'leadingInputSlot',\n      description:\n        'Content to be placed before the number input, within the input container.',\n      args: {\n        label: 'Leading Input',\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <nv-badge slot=\"leading-input\" label=\"Leading\" dismissible></nv-badge>\n        </nv-fieldnumber>\n      ),\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldnumber>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldnumber>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldnumber data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldnumber>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldnumberDocs;\n"]}

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js

@@ -0,0 +1,435 @@
+import { h, Host, } from "@stencil/core";
+import clsx from "clsx";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldnumber {
+    constructor() {
+        //#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);
+        };
+        this.isMinValueReached = () => {
+            return this.min !== undefined && this.value <= this.min;
+        };
+        this.isMaxValueReached = () => {
+            return this.max !== undefined && this.value >= this.max;
+        };
+        this.message = undefined;
+        this.validation = undefined;
+        this.inputId = uuidv4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.step = 1;
+        this.value = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'a150acab0261cad03438abbce43dda76c2fd222f' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '69519f99052729a6a2b62b001694048342b6c0ae', htmlFor: this.inputId }, h("slot", { key: '21427c7b39a7282f14fcbca437f7ca74d59f3cbe', name: "label" }, this.label))), h("div", { key: '23cc57bdefec4c0d200afe9176407d9306cd296f', class: "input-wrapper" }, h("slot", { key: 'd9c83c42093fff848a75d9e79940f19cb945c7ff', name: "before-input" }), h("div", { key: '9edcc27d93280f193e2e7bf51efd63d815ffcf7e', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '8b844a90904874f63965d91a33c2a78b32b4fa96', name: "leading-input" }), h("input", { key: '19520af4e0bea22a5092201270051a97faed62a1', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", 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 && (h("nv-icon", { key: '5f5ad3a9e4a6dc88710a6f0714bb3cf7c54bfb27', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2c81457c414bc282ad602156ee1e17bdc02a87fe', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '56408d1860ffb8f59971b15a5c4155d6f8da027f', class: "stepper-spacer" }), h("div", { key: '237b6d01a886bd2648d8c00d19ef32cce7a8bbd5', class: "stepper" }, h("nv-icon", { key: '7ea54e299fbbbaee4eaaa955057c52f6be47fce3', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), h("nv-icon", { key: 'fbfd4a9cd3d78bfbeefa99b2a74f0710fb72a60d', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), h("slot", { key: '5d43fe5dabf1eecb3c00ce809e2e4802326f4599', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a76876356c76c22a3189fd4bfb5c50dd80329a67', class: "description" }, h("slot", { key: '91877b6ce1ea6b9c8e1f67e13a733cfa70cd635a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2449f25e9fac52a815ece32de6d488044ce78969', hidden: !this.error, class: "error-description" }, h("slot", { key: '276537a3e19c182de08c4a48c4f5b4a9bbbdda09', name: "error-description" }, this.errorDescription)))));
+    }
+    static get is() { return "nv-fieldnumber"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldnumber.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldnumber.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use description instead."
+                        }],
+                    "text": "Message defines a 'hint ' message for the number field."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "validation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use errorDescription and set the error prop instead."
+                        }],
+                    "text": "Add the message to the validation state."
+                },
+                "attribute": "validation",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                },
+                "attribute": "input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets you define the text that explains what users should enter in the text\ninput field. It\u2019s a crucial element for making forms clear and\nuser-friendly."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display temporary text inside the input field to give users a hint about\nwhat to type. It\u2019s a great way to provide examples or suggestions directly\nin the field before they start typing."
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input\u2019s data in form submissions. It should be\nunique within the form to avoid conflicts"
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled prop lets you turn off the input field so that users can\u2019t\ntype in it. When disabled, the field is grayed out and won\u2019t respond to#\nclicks or touches."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input field\u2019s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won\u2019t be\nable to type or delete anything."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Alters the input field\u2019s appearance to indicate an error, helping users\nidentify fields that need correction."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "Show a helpful message under the input field when there\u2019s a problem. It\nexplains what\u2019s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
+                },
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Changes the input field\u2019s appearance to indicate successful input or\nvalidation."
+                },
+                "attribute": "success",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value that the input field can accept. Use this in combination\nwith min to create a range of valid values."
+                },
+                "attribute": "max",
+                "reflect": true
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value that the input field can accept. Use this in combination\nwith max to create a range of valid values."
+                },
+                "attribute": "min",
+                "reflect": true
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the increment value for the input field. It determines how much the\nvalue will increase or decrease when the user clicks the stepper buttons."
+                },
+                "attribute": "step",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input field. It\u2019s the text that users type in or the value\nthat you set programmatically. This is the main way to interact with the\ninput field, and it\u2019s essential for creating forms that users can fill out."
+                },
+                "attribute": "value",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the input value changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValueHandler"
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldnumber.js.map