@duetds/components 8.0.6 → 8.1.1

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -3,1139 +3,1145 @@
  */
 import addIcon from "@duetds/icons/lib/assets/action-add";
 import subtractIcon from "@duetds/icons/lib/assets/action-subtract";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
 export class DuetNumberInput {
-  constructor() {
-    this.inputId = createID("DuetInput");
-    /**
-     * Component event handling.
-     */
-    this.handleFocus = () => {
-      // This state is saved on focus so we can compare on blur to it.
-      this.focusedValue = this.value;
-    };
-    this.handleKeyDown = (ev) => {
-      if (isArrowRightKey(ev) || isArrowUpKey(ev)) {
-        this.add(ev);
-      }
-      else if (isArrowDownKey(ev) || isArrowLeftKey(ev)) {
-        this.subtract(ev);
-      }
-      else if (isBackspaceKey(ev)) {
-        this.clearValue();
-      }
-    };
-    this.handleChange = (ev) => {
-      const input = ev.target;
-      if (input && input.value) {
-        try {
-          let value = SafeParseFloat(input.value, this.locale);
-          // Make sure that everything works if the user clears the input and
-          // starts typing non-numeric characters.
-          if (isNaN(value) || value == null) {
-            value = this.min || 0;
-          }
-          this.setValue(value);
-          this.duetInput.emit({
-            component: "duet-number-input",
-            originalEvent: ev,
-            value: SafeParseFloat(this.value, this.locale).toString(),
-            valueAsNumber: value,
-          });
-        }
-        catch (e) {
-          this.duetInput.emit({
-            component: "duet-number-input",
-            originalEvent: ev,
-            value: null,
-            valueAsNumber: null,
-          });
-        }
-      }
-      else {
-        this.duetInput.emit({
-          component: "duet-number-input",
-          originalEvent: ev,
-          value: null,
-          valueAsNumber: null,
-        });
-      }
-    };
-    this.handleBlur = (ev) => {
-      const input = ev.target;
-      if (!input) {
-        return;
-      }
-      if (input.value) {
-        // On blur we want to make sure that the user input is between the min and max values,
-        // and also round it up or down to the nearest step.
-        try {
-          let value = SafeParseFloat(input.value, this.locale);
-          if (this.rounding) {
-            value = roundTo(value, this.step);
-          }
-          value = clamp(value, this.min, this.max);
-          if (value !== SafeParseFloat(this.value, this.locale) ||
-            value !== SafeParseFloat(this.focusedValue, this.locale)) {
-            this.setValue(value);
-            this.emitChange(ev);
-          }
-        }
-        catch (e) {
-          this.emitNull(ev);
-        }
-      }
-      else {
-        this.emitNull(ev);
-      }
-    };
-    /**
-     * Local methods.
-     */
-    this.emitChange = (ev) => {
-      const currentValue = SafeParseFloat(this.value, this.locale);
-      this.duetChange.emit({
-        originalEvent: ev,
-        value: currentValue.toString(),
-        valueAsNumber: currentValue,
-        component: "duet-number-input",
-      });
-    };
-    this.emitNull = (ev) => {
-      this.duetChange.emit({
-        originalEvent: ev,
-        value: null,
-        valueAsNumber: null,
-        component: "duet-number-input",
-      });
-    };
-    this.localizeValue = (value) => {
-      // Returns a localized string that can be used as input value.
-      return value.toLocaleString(this.locale);
-    };
-    this.setValue = (value) => {
-      // Set the localized prop value.
-      this.value = this.localizeValue(value);
-      // Finally also set the visible input value and unit.
-      this.duetInputElement.value = `${this.value} ${this.unit}`;
-    };
-    this.add = (ev) => {
-      // If this was called via a html button, prevent the default functionality
-      // to not trigger submit accidentally when used inside a form.
-      if (ev) {
-        ev.preventDefault();
-      }
-      const cleanedValue = SafeParseFloat(this.value, this.locale);
-      // Only fire change event when necessary
-      if (cleanedValue === this.max) {
-        return;
-      }
-      // in cases where no value set, incrementing should go to min
-      let newValue = cleanedValue == null ? this.min : cleanedValue + this.step;
-      // handle cases where value is not multiple of step
-      // e.g. if someone enters 199, with a step of 100, add should go to 200
-      // and if someone enters 101, add should also go to 200
-      if (newValue % this.step !== 0) {
-        const adjustment = newValue % this.step;
-        newValue -= adjustment;
-      }
-      const clampedValue = clamp(newValue, this.min, this.max);
-      this.value = this.localizeValue(clampedValue);
-      this.emitChange(ev);
-    };
-    this.subtract = (ev) => {
-      // If this was called via a html button, prevent the default functionality
-      // to not trigger submit accidentally when used inside a form.
-      if (ev) {
-        ev.preventDefault();
-      }
-      const currentValue = SafeParseFloat(this.value, this.locale);
-      // Only fire change event when necessary.
-      if (currentValue === this.min) {
-        return;
-      }
-      let newValue = currentValue - this.step;
-      // handle cases where value is not multiple of step
-      // if someone enters 199, with a step of 100, subtract should go to 100
-      // and if someone enters 101, subtract should also go to 100
-      if (newValue % this.step !== 0) {
-        const adjustment = this.step - (newValue % this.step);
-        newValue += adjustment;
-      }
-      newValue = clamp(newValue, this.min, this.max);
-      this.value = this.localizeValue(newValue);
-      this.emitChange(ev);
-    };
-    this.language = getLanguage();
-    this.locale = getLocale(this.language).locale;
-    this.unit = getLocale(this.language).money;
-    this.focusedValue = undefined;
-    this.accessibleActiveDescendant = undefined;
-    this.accessibleControls = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.accessibleOwns = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleLiveDefaults = {
-      fi: "{current} euroa valittuna",
-      en: "{current} euros selected",
-      sv: "{current} euro valt",
-    };
-    this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
-    this.accessibleLiveEnabled = true;
-    this.accessibleAddDefaults = {
-      fi: "Lisää summaan",
-      en: "Add to the amount",
-      sv: "Lägg till beloppet",
-    };
-    this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
-    this.accessibleSubtractDefaults = {
-      fi: "Vähennä summasta",
-      en: "Subtract from the amount",
-      sv: "Dra från beloppet",
-    };
-    this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
-    this.theme = "";
-    this.margin = "auto";
-    this.expand = false;
-    this.identifier = undefined;
-    this.min = 0;
-    this.labelDefaults = {
-      fi: "Nimilappu",
-      en: "Label",
-      sv: "Etikett",
-    };
-    this.label = getLocaleString(this.labelDefaults, this.language);
-    this.labelHidden = false;
-    this.max = 1000000;
-    this.name = undefined;
-    this.error = "";
-    this.tooltip = "";
-    this.step = 5000;
-    this.rounding = true;
-    this.role = undefined;
-    this.disabled = false;
-    this.required = false;
-    this.value = undefined;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    // Format the number value to a localeString initially.
-    if (this.value) {
-      this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
-    }
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, [
-      { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
-      { prop: "accessibleAdd", defaults: "accessibleAddDefaults" },
-      { prop: "accessibleSubtract", defaults: "accessibleSubtractDefaults" },
-      { prop: "label", defaults: "labelDefaults" },
-    ]);
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Sets focus on the specified `duet-number-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    this.duetInputElement.setFocus(options);
-  }
-  /**
-   * Returns a promise which resolves to the current input numeric value.
-   */
-  async getValueAsNumber() {
-    const currentValue = SafeParseFloat(this.value, this.locale);
-    return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
-  }
-  clearValue() {
-    this.value = null;
-    this.duetInputElement.value = "";
-  }
-  formatAnnouncement() {
-    const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-    if (current == null) {
-      return "";
-    }
-    return this.accessibleLive.replace("{current}", current.toString(10));
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.inputId;
-    const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
-    const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-    return (h(Host, { class: {
-        "duet-theme-turva": this.theme === "turva",
-        "duet-expand": this.expand,
-        "duet-m-0": this.margin === "none",
-      } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
-  }
-  static get is() { return "duet-number-input"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-number-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-number-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
+    constructor() {
+        this.inputId = createID("DuetInput");
+        /**
+         * Component event handling.
+         */
+        this.handleFocus = () => {
+            // This state is saved on focus so we can compare on blur to it.
+            this.focusedValue = this.value;
+        };
+        this.handleKeyDown = (ev) => {
+            if (isArrowRightKey(ev) || isArrowUpKey(ev)) {
+                this.add(ev);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
-            }, {
-              "name": "default",
-              "text": "\"fi\""
-            }],
-          "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
-        },
-        "attribute": "language",
-        "reflect": false,
-        "defaultValue": "getLanguage()"
-      },
-      "locale": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLocale",
-          "resolved": "\"en-GB\" | \"en-US\" | \"fi-FI\" | \"sv-SE\"",
-          "references": {
-            "DuetLocale": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLocale"
+            else if (isArrowDownKey(ev) || isArrowLeftKey(ev)) {
+                this.subtract(ev);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Locale used to format the entered value."
-        },
-        "attribute": "locale",
-        "reflect": false,
-        "defaultValue": "getLocale(this.language).locale"
-      },
-      "unit": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Unit for the number input."
-        },
-        "attribute": "unit",
-        "reflect": false,
-        "defaultValue": "getLocale(this.language).money"
-      },
-      "accessibleActiveDescendant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a related component\u2019s visually focused element."
-        },
-        "attribute": "accessible-active-descendant",
-        "reflect": false
-      },
-      "accessibleControls": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
-        },
-        "attribute": "accessible-controls",
-        "reflect": false
-      },
-      "accessibleDetails": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Details of the component"
-        },
-        "attribute": "accessible-details",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "String of id's that indicate alternative labels elements"
-        },
-        "attribute": "accessible-labelled-by",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleDescription": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria description the button"
-        },
-        "attribute": "accessible-description",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleOwns": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component owned by the input."
-        },
-        "attribute": "accessible-owns",
-        "reflect": false
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the input."
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false
-      },
-      "accessibleLiveDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (isBackspaceKey(ev)) {
+                this.clearValue();
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
-            }],
-          "text": "Defaults for accessibleLive"
-        },
-        "attribute": "accessible-live-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"{current} euroa valittuna\",\n    en: \"{current} euros selected\",\n    sv: \"{current} euro valt\",\n  }"
-      },
-      "accessibleLive": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
-            }],
-          "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
-        },
-        "attribute": "accessible-live",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLiveDefaults, this.language)"
-      },
-      "accessibleLiveEnabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead."
-        },
-        "attribute": "accessible-live-enabled",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "accessibleAddDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+        };
+        this.handleChange = (ev) => {
+            const input = ev.target;
+            if (input && input.value) {
+                try {
+                    let value = SafeParseFloat(input.value, this.locale);
+                    // Make sure that everything works if the user clears the input and
+                    // starts typing non-numeric characters.
+                    if (isNaN(value) || value == null) {
+                        value = this.min || 0;
+                    }
+                    this.setValue(value);
+                    this.duetInput.emit({
+                        component: "duet-number-input",
+                        originalEvent: ev,
+                        value: SafeParseFloat(this.value, this.locale).toString(),
+                        valueAsNumber: value,
+                    });
+                }
+                catch (e) {
+                    this.duetInput.emit({
+                        component: "duet-number-input",
+                        originalEvent: ev,
+                        value: null,
+                        valueAsNumber: null,
+                    });
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
-            }],
-          "text": "Defaults for accessibleAdd"
-        },
-        "attribute": "accessible-add-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
-      },
-      "accessibleAdd": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
-            }],
-          "text": "Accessible label for the add button that is read for screen reader users."
-        },
-        "attribute": "accessible-add",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleAddDefaults, this.language)"
-      },
-      "accessibleSubtractDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else {
+                this.duetInput.emit({
+                    component: "duet-number-input",
+                    originalEvent: ev,
+                    value: null,
+                    valueAsNumber: null,
+                });
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
-            }],
-          "text": "Defaults for accessibleSubtract"
-        },
-        "attribute": "accessible-subtract-defaults",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
-      },
-      "accessibleSubtract": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
-            }],
-          "text": "Accessible label for the subtract button that is read for screen reader users."
-        },
-        "attribute": "accessible-subtract",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleSubtractDefaults, this.language)"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
+        };
+        this.handleBlur = (ev) => {
+            const input = ev.target;
+            if (!input) {
+                return;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the input."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
+            if (input.value) {
+                // On blur we want to make sure that the user input is between the min and max values,
+                // and also round it up or down to the nearest step.
+                try {
+                    let value = SafeParseFloat(input.value, this.locale);
+                    if (this.rounding) {
+                        value = roundTo(value, this.step);
+                    }
+                    value = clamp(value, this.min, this.max);
+                    if (value !== SafeParseFloat(this.value, this.locale) ||
+                        value !== SafeParseFloat(this.focusedValue, this.locale)) {
+                        this.setValue(value);
+                        this.emitChange(ev);
+                    }
+                }
+                catch (e) {
+                    this.emitNull(ev);
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "expand": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Expands the input to fill 100% of the container width."
-        },
-        "attribute": "expand",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the input."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "min": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum value."
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "labelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else {
+                this.emitNull(ev);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
-            }],
-          "text": "Defaults for Label"
-        },
-        "attribute": "label-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"Nimilappu\",\n    en: \"Label\",\n    sv: \"Etikett\",\n  }"
-      },
-      "label": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
-            }],
-          "text": "Label for the number input."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum value."
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "1000000"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the input."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the input in error state along with an error message."
-        },
-        "attribute": "error",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip to display next to the label of the input."
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Step amount."
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "5000"
-      },
-      "rounding": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls whether or not value gets rounded to the nearest\nmultiple of a step on blur. Set to \"false\" to disable this behaviour."
-        },
-        "attribute": "rounding",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines a specific role attribute for the input."
-        },
-        "attribute": "role",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the number input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of the input. This is passed as a string since Number Input uses Duet\u2019s Input component internally and we need the value to support spaces and the unit as well."
-        },
-        "attribute": "value",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusedValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value has changed."
-        },
-        "complexType": {
-          "original": "DuetNumberInputEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
-          "references": {
-            "DuetNumberInputEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
-              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+        };
+        /**
+         * Local methods.
+         */
+        this.emitChange = (ev) => {
+            const currentValue = SafeParseFloat(this.value, this.locale);
+            this.duetChange.emit({
+                originalEvent: ev,
+                value: currentValue.toString(),
+                valueAsNumber: currentValue,
+                component: "duet-number-input",
+            });
+        };
+        this.emitNull = (ev) => {
+            this.duetChange.emit({
+                originalEvent: ev,
+                value: null,
+                valueAsNumber: null,
+                component: "duet-number-input",
+            });
+        };
+        this.localizeValue = (value) => {
+            // Returns a localized string that can be used as input value.
+            return value.toLocaleString(this.locale);
+        };
+        this.setValue = (value) => {
+            // Set the localized prop value.
+            this.value = this.localizeValue(value);
+            // Finally also set the visible input value and unit.
+            this.duetInputElement.value = `${this.value} ${this.unit}`;
+        };
+        this.add = (ev) => {
+            // If this was called via a html button, prevent the default functionality
+            // to not trigger submit accidentally when used inside a form.
+            if (ev) {
+                ev.preventDefault();
             }
-          }
-        }
-      }, {
-        "method": "duetInput",
-        "name": "duetInput",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a keyboard input has ocurred."
-        },
-        "complexType": {
-          "original": "DuetNumberInputEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
-          "references": {
-            "DuetNumberInputEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
-              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+            const cleanedValue = SafeParseFloat(this.value, this.locale);
+            // Only fire change event when necessary
+            if (cleanedValue === this.max) {
+                return;
             }
-          }
-        }
-      }, {
-        "method": "duetBlur",
-        "name": "duetBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input loses focus."
-        },
-        "complexType": {
-          "original": "DuetNumberInputEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
-          "references": {
-            "DuetNumberInputEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
-              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+            // in cases where no value set, incrementing should go to min
+            let newValue = cleanedValue == null ? this.min : cleanedValue + this.step;
+            // handle cases where value is not multiple of step
+            // e.g. if someone enters 199, with a step of 100, add should go to 200
+            // and if someone enters 101, add should also go to 200
+            if (newValue % this.step !== 0) {
+                const adjustment = newValue % this.step;
+                newValue -= adjustment;
             }
-          }
-        }
-      }, {
-        "method": "duetFocus",
-        "name": "duetFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input has focus."
-        },
-        "complexType": {
-          "original": "DuetNumberInputEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
-          "references": {
-            "DuetNumberInputEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
-              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+            const clampedValue = clamp(newValue, this.min, this.max);
+            this.value = this.localizeValue(clampedValue);
+            this.emitChange(ev);
+        };
+        this.subtract = (ev) => {
+            // If this was called via a html button, prevent the default functionality
+            // to not trigger submit accidentally when used inside a form.
+            if (ev) {
+                ev.preventDefault();
             }
-          }
+            const currentValue = SafeParseFloat(this.value, this.locale);
+            // Only fire change event when necessary.
+            if (currentValue === this.min) {
+                return;
+            }
+            let newValue = currentValue - this.step;
+            // handle cases where value is not multiple of step
+            // if someone enters 199, with a step of 100, subtract should go to 100
+            // and if someone enters 101, subtract should also go to 100
+            if (newValue % this.step !== 0) {
+                const adjustment = this.step - (newValue % this.step);
+                newValue += adjustment;
+            }
+            newValue = clamp(newValue, this.min, this.max);
+            this.value = this.localizeValue(newValue);
+            this.emitChange(ev);
+        };
+        this.language = getLanguage();
+        this.locale = getLocale(this.language).locale;
+        this.unit = getLocale(this.language).money;
+        this.focusedValue = undefined;
+        this.accessibleActiveDescendant = undefined;
+        this.accessibleControls = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescription = undefined;
+        this.accessibleOwns = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.accessibleLiveDefaults = {
+            fi: "{current} euroa valittuna",
+            en: "{current} euros selected",
+            sv: "{current} euro valt",
+        };
+        this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
+        this.accessibleLiveEnabled = true;
+        this.accessibleAddDefaults = {
+            fi: "Lisää summaan",
+            en: "Add to the amount",
+            sv: "Lägg till beloppet",
+        };
+        this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
+        this.accessibleSubtractDefaults = {
+            fi: "Vähennä summasta",
+            en: "Subtract from the amount",
+            sv: "Dra från beloppet",
+        };
+        this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
+        this.theme = "";
+        this.margin = "auto";
+        this.expand = false;
+        this.identifier = undefined;
+        this.min = 0;
+        this.labelDefaults = {
+            fi: "Nimilappu",
+            en: "Label",
+            sv: "Etikett",
+        };
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        this.labelHidden = false;
+        this.max = 1000000;
+        this.name = undefined;
+        this.error = "";
+        this.tooltip = "";
+        this.step = 5000;
+        this.rounding = true;
+        this.role = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.value = undefined;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        // Format the number value to a localeString initially.
+        if (this.value) {
+            this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, [
+            { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
+            { prop: "accessibleAdd", defaults: "accessibleAddDefaults" },
+            { prop: "accessibleSubtract", defaults: "accessibleSubtractDefaults" },
+            { prop: "label", defaults: "labelDefaults" },
+        ]);
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+    }
+    /**
+     * Sets focus on the specified `duet-number-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus(options) {
+        this.duetInputElement.setFocus(options);
+    }
+    /**
+     * Returns a promise which resolves to the current input numeric value.
+     */
+    async getValueAsNumber() {
+        const currentValue = SafeParseFloat(this.value, this.locale);
+        return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
+    }
+    clearValue() {
+        this.value = null;
+        this.duetInputElement.value = "";
+    }
+    formatAnnouncement() {
+        const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
+        if (current == null) {
+            return "";
+        }
+        return this.accessibleLive.replace("{current}", current.toString(10));
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        if (Build.isServer) {
+            return;
+        }
+        const identifier = this.identifier || this.inputId;
+        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
+        return (h(Host, { class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-expand": this.expand,
+                "duet-m-0": this.margin === "none",
+            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+    }
+    static get is() { return "duet-number-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-number-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+                        }, {
+                            "name": "default",
+                            "text": "\"fi\""
+                        }],
+                    "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "getLanguage()"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLocale",
+                    "resolved": "\"en-GB\" | \"en-US\" | \"fi-FI\" | \"sv-SE\"",
+                    "references": {
+                        "DuetLocale": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLocale"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale used to format the entered value."
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "getLocale(this.language).locale"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit for the number input."
+                },
+                "attribute": "unit",
+                "reflect": false,
+                "defaultValue": "getLocale(this.language).money"
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "accessibleActiveDescendant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a related component\u2019s visually focused element."
+                },
+                "attribute": "accessible-active-descendant",
+                "reflect": false
+            },
+            "accessibleControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+                },
+                "attribute": "accessible-controls",
+                "reflect": false
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "attribute": "accessible-details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String of id's that indicate alternative labels elements"
+                },
+                "attribute": "accessible-labelled-by",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "attribute": "accessible-description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleOwns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component owned by the input."
+                },
+                "attribute": "accessible-owns",
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the input."
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "accessibleLiveDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
+                        }],
+                    "text": "Defaults for accessibleLive"
+                },
+                "attribute": "accessible-live-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"{current} euroa valittuna\",\n    en: \"{current} euros selected\",\n    sv: \"{current} euro valt\",\n  }"
+            },
+            "accessibleLive": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
+                        }],
+                    "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+                },
+                "attribute": "accessible-live",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLiveDefaults, this.language)"
+            },
+            "accessibleLiveEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead."
+                },
+                "attribute": "accessible-live-enabled",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "accessibleAddDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                        }],
+                    "text": "Defaults for accessibleAdd"
+                },
+                "attribute": "accessible-add-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
+            },
+            "accessibleAdd": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                        }],
+                    "text": "Accessible label for the add button that is read for screen reader users."
+                },
+                "attribute": "accessible-add",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleAddDefaults, this.language)"
+            },
+            "accessibleSubtractDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                        }],
+                    "text": "Defaults for accessibleSubtract"
+                },
+                "attribute": "accessible-subtract-defaults",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
+            },
+            "accessibleSubtract": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                        }],
+                    "text": "Accessible label for the subtract button that is read for screen reader users."
+                },
+                "attribute": "accessible-subtract",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleSubtractDefaults, this.language)"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the input."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the input to fill 100% of the container width."
+                },
+                "attribute": "expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "labelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
+                        }],
+                    "text": "Defaults for Label"
+                },
+                "attribute": "label-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Nimilappu\",\n    en: \"Label\",\n    sv: \"Etikett\",\n  }"
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
+                        }],
+                    "text": "Label for the number input."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value."
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "1000000"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the input."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input in error state along with an error message."
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip to display next to the label of the input."
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step amount."
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "5000"
+            },
+            "rounding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether or not value gets rounded to the nearest\nmultiple of a step on blur. Set to \"false\" to disable this behaviour."
+                },
+                "attribute": "rounding",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a specific role attribute for the input."
+                },
+                "attribute": "role",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the number input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input. This is passed as a string since Number Input uses Duet\u2019s Input component internally and we need the value to support spaces and the unit as well."
+                },
+                "attribute": "value",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-number-input`. Use this method instead of the global\n`input.focus()`.",
-          "tags": []
-        }
-      },
-      "getValueAsNumber": {
-        "complexType": {
-          "signature": "() => Promise<number>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "focusedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "DuetNumberInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
+                    "references": {
+                        "DuetNumberInputEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetInput",
+                "name": "duetInput",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input has ocurred."
+                },
+                "complexType": {
+                    "original": "DuetNumberInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
+                    "references": {
+                        "DuetNumberInputEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetBlur",
+                "name": "duetBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "DuetNumberInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
+                    "references": {
+                        "DuetNumberInputEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetFocus",
+                "name": "duetFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "DuetNumberInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-number-input\"; value: string; valueAsNumber: number; }",
+                    "references": {
+                        "DuetNumberInputEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-number-input`. Use this method instead of the global\n`input.focus()`.",
+                    "tags": []
+                }
+            },
+            "getValueAsNumber": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Returns a promise which resolves to the current input numeric value.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<number>"
-        },
-        "docs": {
-          "text": "Returns a promise which resolves to the current input numeric value.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
+        };
+    }
+    static get elementRef() { return "element"; }
 }