@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

package/dist/collection/components/input-number/input-number.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
+import { h, Host } from "@stencil/core";
+import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { getDecimalSeparator, delocalizeNumberString, localizeNumberString } from "../../utils/locale";
+import { numberStringFormatter, defaultNumberingSystem, disconnectLocalized, connectLocalized, updateEffectiveLocale } from "../../utils/locale";
 import { numberKeys } from "../../utils/key";
 import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { CSS_UTILITY, TEXT as COMMON_TEXT } from "../../utils/resources";
@@ -28,27 +28,27 @@ export class InputNumber {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * When `true`, the component is focused on page load.
      *
      * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      */
     this.autofocus = false;
     /**
-     * When true, a clear button is displayed when the component has a value.
+     * When `true`, a clear button is displayed when the component has a value.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
      * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
      */
     this.disabled = false;
     /**
-     * When true, number values are displayed with the locale's group separator.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /**
-     * When true, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -59,12 +59,10 @@ export class InputNumber {
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon is flipped in RTL. */
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
-    /** Specifies the BCP 47 language tag for the desired language and country format. */
-    this.locale = document.documentElement.lang || "en";
     /**
      * Toggles locale formatting for numbers.
      *
@@ -74,12 +72,12 @@ export class InputNumber {
     /** Specifies the placement of the buttons. */
     this.numberButtonType = "vertical";
     /**
-     * When true, the value cannot be modified.
+     * When `true`, the component's value can be read, but cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -96,6 +94,12 @@ export class InputNumber {
     this.userChangedValue = false;
     //--------------------------------------------------------------------------
     //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    this.effectiveLocale = "";
+    //--------------------------------------------------------------------------
+    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -143,7 +147,12 @@ export class InputNumber {
         return;
       }
       const value = nativeEvent.target.value;
-      const delocalizedValue = delocalizeNumberString(value, this.locale);
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      };
+      const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
         if (!isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
@@ -197,12 +206,16 @@ export class InputNumber {
         }
         return;
       }
-      const decimalSeparator = getDecimalSeparator(this.locale);
-      if (event.key === decimalSeparator) {
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      };
+      if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
           return;
         }
-        if (this.value && this.childNumberEl.value.indexOf(decimalSeparator) === -1) {
+        if (this.value && this.childNumberEl.value.indexOf(numberStringFormatter.decimal) === -1) {
           return;
         }
       }
@@ -244,10 +257,16 @@ export class InputNumber {
         this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
       }, valueNudgeDelayInMs);
     };
-    this.nudgeButtonPointerUpAndOutHandler = () => {
+    this.nudgeButtonPointerUpAndOutHandler = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
       window.clearInterval(this.nudgeNumberValueIntervalId);
     };
     this.nudgeButtonPointerDownHandler = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
       event.preventDefault();
       const direction = event.target.dataset.adjustment;
       if (!this.disabled) {
@@ -281,14 +300,20 @@ export class InputNumber {
       this.previousValue = isValidNumber(newPreviousValue) ? newPreviousValue : "";
     };
     this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      const previousLocalizedValue = localizeNumberString(this.previousValue, this.locale, this.groupSeparator, this.numberingSystem);
-      const sanitizedValue = sanitizeNumberString(value);
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      };
+      const sanitizedValue = sanitizeNumberString((this.numberingSystem && this.numberingSystem !== "latn") || defaultNumberingSystem !== "latn"
+        ? numberStringFormatter.delocalize(value)
+        : value);
       const newValue = value && !sanitizedValue
         ? isValidNumber(this.previousValue)
           ? this.previousValue
           : ""
         : sanitizedValue;
-      const newLocalizedValue = localizeNumberString(newValue, this.locale, this.groupSeparator, this.numberingSystem);
+      const newLocalizedValue = numberStringFormatter.localize(newValue);
       this.setPreviousNumberValue(previousValue || this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && this.value !== newValue;
@@ -304,6 +329,7 @@ export class InputNumber {
           value: this.value
         });
         if (calciteInputNumberInputEvent.defaultPrevented) {
+          const previousLocalizedValue = numberStringFormatter.localize(this.previousValue);
           this.value = this.previousValue;
           this.localizedValue = previousLocalizedValue;
         }
@@ -319,6 +345,9 @@ export class InputNumber {
   disabledWatcher() {
     this.setDisabledAction();
   }
+  localeChanged() {
+    updateEffectiveLocale(this);
+  }
   /** watcher to update number-to-string for max */
   maxWatcher() {
     var _a;
@@ -357,12 +386,15 @@ export class InputNumber {
   //--------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    connectLocalized(this);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
+    connectLabel(this);
+    connectForm(this);
     this.setPreviousEmittedNumberValue(this.value);
     this.setPreviousNumberValue(this.value);
     this.warnAboutInvalidNumberValue(this.value);
@@ -370,8 +402,6 @@ export class InputNumber {
       origin: "connected",
       value: isValidNumber(this.value) ? this.value : ""
     });
-    connectLabel(this);
-    connectForm(this);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
@@ -380,6 +410,7 @@ export class InputNumber {
     var _a;
     disconnectLabel(this);
     disconnectForm(this);
+    disconnectLocalized(this);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
@@ -472,792 +503,797 @@ export class InputNumber {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (h("div", { class: CSS.loader },
-      h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" },
-      h("calcite-icon", { icon: "x", scale: "s" })));
+    const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
+    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
-      h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
-      h("calcite-icon", { icon: "chevron-down", scale: "s" })));
-    const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper },
-      numberButtonsHorizontalUp,
-      numberButtonsHorizontalDown));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+    const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
     const childEl = (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue }));
-    return (h(Host, { onClick: this.inputNumberFocusHandler, onKeyDown: this.keyDownHandler },
-      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
-        this.numberButtonType === "horizontal" && !this.readOnly
-          ? numberButtonsHorizontalDown
-          : null,
-        this.prefixText ? prefixText : null,
-        h("div", { class: CSS.wrapper },
-          childEl,
-          this.isClearable ? inputClearButton : null,
-          this.requestedIcon ? iconEl : null,
-          this.loading ? loader : null),
-        h("div", { class: CSS.actionWrapper },
-          h("slot", { name: SLOTS.action })),
-        this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null,
-        this.suffixText ? suffixText : null,
-        this.numberButtonType === "horizontal" && !this.readOnly
-          ? numberButtonsHorizontalUp
-          : null,
-        h(HiddenFormInputSlot, { component: this }))));
+    return (h(Host, { onClick: this.inputNumberFocusHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
+      ? numberButtonsHorizontalDown
+      : null, this.prefixText ? prefixText : null, h("div", { class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS.actionWrapper }, h("slot", { name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+      ? numberButtonsHorizontalUp
+      : null, h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-input-number"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input-number.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input-number.css"]
-  }; }
-  static get properties() { return {
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Position",
-        "resolved": "\"end\" | \"start\"",
-        "references": {
-          "Position": {
-            "location": "import",
-            "path": "../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the text alignment of the component's value."
-      },
-      "attribute": "alignment",
-      "reflect": true,
-      "defaultValue": "\"start\""
-    },
-    "autofocus": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
-          }],
-        "text": "When true, the component is focused on page load."
-      },
-      "attribute": "autofocus",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, a clear button is displayed when the component has a value."
-      },
-      "attribute": "clearable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
-          }],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "groupSeparator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, number values are displayed with the locale's group separator."
-      },
-      "attribute": "group-separator",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
-          }],
-        "text": "When true, the component will not be visible."
-      },
-      "attribute": "hidden",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "icon": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | boolean",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
-      },
-      "attribute": "icon",
-      "reflect": true
-    },
-    "intlClear": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A text label that will appear on the clear button for screen readers."
-      },
-      "attribute": "intl-clear",
-      "reflect": false
-    },
-    "intlLoading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Loading\""
-          }],
-        "text": "Accessible name that will appear while loading."
-      },
-      "attribute": "intl-loading",
-      "reflect": false,
-      "defaultValue": "COMMON_TEXT.loading"
-    },
-    "iconFlipRtl": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the icon is flipped in RTL."
-      },
-      "attribute": "icon-flip-rtl",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component's button or hyperlink."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the BCP 47 language tag for the desired language and country format."
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "document.documentElement.lang || \"en\""
-    },
-    "numberingSystem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
-          }],
-        "text": "Specifies the Unicode numeral system used by the component for localization."
-      },
-      "attribute": "numbering-system",
-      "reflect": true
-    },
-    "localeFormat": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "Toggles locale formatting for numbers."
-      },
-      "attribute": "locale-format",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)"
-          }],
-        "text": "Specifies the maximum value."
-      },
-      "attribute": "max",
-      "reflect": true
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)"
-          }],
-        "text": "Specifies the minimum value."
-      },
-      "attribute": "min",
-      "reflect": true
-    },
-    "maxLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)"
-          }],
-        "text": "Specifies the maximum length of text for the component's value."
-      },
-      "attribute": "max-length",
-      "reflect": true
-    },
-    "minLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)"
-          }],
-        "text": "Specifies the minimum length of text for the component's value."
-      },
-      "attribute": "min-length",
-      "reflect": true
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)"
-          }],
-        "text": "Specifies the name of the component."
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "numberButtonType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputPlacement",
-        "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
-        "references": {
-          "InputPlacement": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-number.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-number.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Position",
+          "resolved": "\"end\" | \"start\"",
+          "references": {
+            "Position": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the placement of the buttons."
-      },
-      "attribute": "number-button-type",
-      "reflect": true,
-      "defaultValue": "\"vertical\""
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)"
-          }],
-        "text": "Specifies placeholder text for the component."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "prefixText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds text to the start of the component."
-      },
-      "attribute": "prefix-text",
-      "reflect": false
-    },
-    "readOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
-          }],
-        "text": "When true, the value cannot be modified."
-      },
-      "attribute": "read-only",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component must have a value in order for the form to submit."
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the text alignment of the component's value."
+        },
+        "attribute": "alignment",
+        "reflect": true,
+        "defaultValue": "\"start\""
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
+            }],
+          "text": "When `true`, the component is focused on page load."
+        },
+        "attribute": "autofocus",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, a clear button is displayed when the component has a value."
+        },
+        "attribute": "clearable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
+            }],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "groupSeparator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
+        },
+        "attribute": "group-separator",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
+            }],
+          "text": "When `true`, the component will not be visible."
+        },
+        "attribute": "hidden",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "intlClear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A text label that will appear on the clear button for screen readers."
+        },
+        "attribute": "intl-clear",
+        "reflect": false
+      },
+      "intlLoading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Loading\""
+            }],
+          "text": "Accessible name that will appear while loading."
+        },
+        "attribute": "intl-loading",
+        "reflect": false,
+        "defaultValue": "COMMON_TEXT.loading"
+      },
+      "iconFlipRtl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component's button or hyperlink."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component is in the loading state and `calcite-progress` is displayed."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "set the global `lang` attribute on the element instead."
+            }, {
+              "name": "mdn",
+              "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
+            }],
+          "text": "Specifies the BCP 47 language tag for the desired language and country format."
+        },
+        "attribute": "locale",
+        "reflect": false
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "status": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Status",
-        "resolved": "\"idle\" | \"invalid\" | \"valid\"",
-        "references": {
-          "Status": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
+      "localeFormat": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Toggles locale formatting for numbers."
+        },
+        "attribute": "locale-format",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)"
+            }],
+          "text": "Specifies the maximum value."
+        },
+        "attribute": "max",
+        "reflect": true
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)"
+            }],
+          "text": "Specifies the minimum value."
+        },
+        "attribute": "min",
+        "reflect": true
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)"
+            }],
+          "text": "Specifies the maximum length of text for the component's value."
+        },
+        "attribute": "max-length",
+        "reflect": true
+      },
+      "minLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)"
+            }],
+          "text": "Specifies the minimum length of text for the component's value."
+        },
+        "attribute": "min-length",
+        "reflect": true
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)"
+            }],
+          "text": "Specifies the name of the component."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "numberButtonType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InputPlacement",
+          "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
+          "references": {
+            "InputPlacement": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the status of the input field, which determines message and icons."
-      },
-      "attribute": "status",
-      "reflect": true,
-      "defaultValue": "\"idle\""
-    },
-    "step": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | \"any\"",
-        "resolved": "\"any\" | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)"
-          }],
-        "text": "Specifies the granularity that the component's value must adhere to."
-      },
-      "attribute": "step",
-      "reflect": true
-    },
-    "suffixText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds text to the end of the component."
-      },
-      "attribute": "suffix-text",
-      "reflect": false
-    },
-    "editingEnabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "attribute": "editing-enabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's value."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "localizedValue": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteInternalInputNumberFocus",
-      "name": "calciteInternalInputNumberFocus",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInternalInputNumberBlur",
-      "name": "calciteInternalInputNumberBlur",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputNumberInput",
-      "name": "calciteInputNumberInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead"
-      },
-      "complexType": {
-        "original": "DeprecatedEventPayload",
-        "resolved": "any",
-        "references": {
-          "DeprecatedEventPayload": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the placement of the buttons."
+        },
+        "attribute": "number-button-type",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)"
+            }],
+          "text": "Specifies placeholder text for the component."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "prefixText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds text to the start of the component."
+        },
+        "attribute": "prefix-text",
+        "reflect": false
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+            }],
+          "text": "When `true`, the component's value can be read, but cannot be modified."
+        },
+        "attribute": "read-only",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      }
-    }, {
-      "method": "calciteInputNumberChange",
-      "name": "calciteInputNumberChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires each time a new value is typed and committed."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "status": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Status",
+          "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+          "references": {
+            "Status": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the status of the input field, which determines message and icons."
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "\"idle\""
+      },
+      "step": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | \"any\"",
+          "resolved": "\"any\" | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)"
+            }],
+          "text": "Specifies the granularity that the component's value must adhere to."
+        },
+        "attribute": "step",
+        "reflect": true
+      },
+      "suffixText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds text to the end of the component."
+        },
+        "attribute": "suffix-text",
+        "reflect": false
+      },
+      "editingEnabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "editing-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
-    },
-    "selectText": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "localizedValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteInternalInputNumberFocus",
+        "name": "calciteInternalInputNumberFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalInputNumberBlur",
+        "name": "calciteInternalInputNumberBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputNumberInput",
+        "name": "calciteInputNumberInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's `target`/`currentTarget` instead"
+        },
+        "complexType": {
+          "original": "DeprecatedEventPayload",
+          "resolved": "any",
+          "references": {
+            "DeprecatedEventPayload": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
+        }
+      }, {
+        "method": "calciteInputNumberChange",
+        "name": "calciteInputNumberChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires each time a new value is typed and committed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Selects all text of the component's `value`.",
-        "tags": []
+      "selectText": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Selects all text of the component's `value`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "disabledWatcher"
-    }, {
-      "propName": "max",
-      "methodName": "maxWatcher"
-    }, {
-      "propName": "min",
-      "methodName": "minWatcher"
-    }, {
-      "propName": "value",
-      "methodName": "valueWatcher"
-    }, {
-      "propName": "icon",
-      "methodName": "updateRequestedIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
+        "propName": "locale",
+        "methodName": "localeChanged"
+      }, {
+        "propName": "max",
+        "methodName": "maxWatcher"
+      }, {
+        "propName": "min",
+        "methodName": "minWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "icon",
+        "methodName": "updateRequestedIcon"
+      }];
+  }
 }