@spectrum-web-components/number-field 0.3.13 → 0.4.1-devmode.7

package/src/NumberField.js

@@ -1,417 +1,380 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate, __rest } from "tslib";
-import { html, } from '@spectrum-web-components/base';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
-import { NumberFormatter, NumberParser } from '@internationalized/number';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { isAndroid, isIPhone, } from '@spectrum-web-components/shared/src/platform.js';
-import { TextfieldBase } from '@spectrum-web-components/textfield';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import styles from './number-field.css.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+import { NumberFormatter, NumberParser } from "@internationalized/number";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import {
+  isAndroid,
+  isIPhone
+} from "@spectrum-web-components/shared/src/platform.js";
+import { TextfieldBase } from "@spectrum-web-components/textfield";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import styles from "./number-field.css.js";
 export const FRAMES_PER_CHANGE = 5;
-export const indeterminatePlaceholder = '-';
+export const indeterminatePlaceholder = "-";
 export const remapMultiByteCharacters = {
-    '１': '1',
-    '２': '2',
-    '３': '3',
-    '４': '4',
-    '５': '5',
-    '６': '6',
-    '７': '7',
-    '８': '8',
-    '９': '9',
-    '０': '0',
-    '、': ',',
-    '，': ',',
-    '。': '.',
-    '．': '.',
-    '％': '%',
-    '＋': '+',
-    ー: '-',
+  "\uFF11": "1",
+  "\uFF12": "2",
+  "\uFF13": "3",
+  "\uFF14": "4",
+  "\uFF15": "5",
+  "\uFF16": "6",
+  "\uFF17": "7",
+  "\uFF18": "8",
+  "\uFF19": "9",
+  "\uFF10": "0",
+  "\u3001": ",",
+  "\uFF0C": ",",
+  "\u3002": ".",
+  "\uFF0E": ".",
+  "\uFF05": "%",
+  "\uFF0B": "+",
+  \u30FC: "-"
 };
-/**
- * @element sp-number-field
- * @slot help-text - default or non-negative help text to associate to your form element
- * @slot negative-help-text - negative help text to associate to your form element when `invalid`
- */
 export class NumberField extends TextfieldBase {
-    constructor() {
-        super(...arguments);
-        this.focused = false;
-        this._forcedUnit = '';
-        /**
-         * An `<sp-number-field>` element will process its numeric value with
-         * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
-         * in order to prepare it for visual delivery in the input. In order to customize this
-         * processing supply your own `Intl.NumberFormatOptions` object here.
-         *
-         * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-         */
-        this.formatOptions = {};
-        /**
-         * Whether the stepper UI is hidden or not.
-         */
-        this.hideStepper = false;
-        this.indeterminate = false;
-        this.keyboardFocused = false;
-        this.resolvedLanguage = document.documentElement.lang || navigator.language;
-        this.stepperActive = false;
-        this.stepModifier = 10;
-        this._value = NaN;
-        this._trackingValue = '';
-        this.changeCount = 0;
-        this.wasIndeterminate = false;
-    }
-    static get styles() {
-        return [...super.styles, styles, chevronStyles];
-    }
-    set value(rawValue) {
-        const value = this.validateInput(rawValue);
-        if (value === this.value) {
-            return;
-        }
-        const oldValue = this._value;
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-    get value() {
-        return this._value;
-    }
-    get inputValue() {
-        return this.indeterminate
-            ? this.formattedValue
-            : this.inputElement.value;
-    }
-    /**
-     * Retreive the value of the element parsed to a Number.
-     */
-    get valueAsString() {
-        return this._value.toString();
-    }
-    set valueAsString(value) {
-        this.value = this.numberParser.parse(value);
-    }
-    get formattedValue() {
-        if (isNaN(this.value))
-            return '';
-        return (this.numberFormatter.format(this.value) +
-            (this.focused ? '' : this._forcedUnit));
-    }
-    convertValueToNumber(value) {
-        return this.numberParser.parse(value);
-    }
-    get _step() {
-        var _a;
-        if (typeof this.step !== 'undefined') {
-            return this.step;
-        }
-        if (((_a = this.formatOptions) === null || _a === void 0 ? void 0 : _a.style) === 'percent') {
-            return 0.01;
-        }
-        return 1;
-    }
-    handlePointerdown(event) {
-        if (event.button !== 0) {
-            event.preventDefault();
-            return;
-        }
-        this.stepperActive = true;
-        this.buttons.setPointerCapture(event.pointerId);
-        const stepUpRect = this.buttons.children[0].getBoundingClientRect();
-        const stepDownRect = this.buttons.children[1].getBoundingClientRect();
-        this.findChange = (event) => {
-            if (event.clientX >= stepUpRect.x &&
-                event.clientY >= stepUpRect.y &&
-                event.clientX <= stepUpRect.x + stepUpRect.width &&
-                event.clientY <= stepUpRect.y + stepUpRect.height) {
-                this.change = (event) => this.increment(event.shiftKey ? this.stepModifier : 1);
-            }
-            else if (event.clientX >= stepDownRect.x &&
-                event.clientY >= stepDownRect.y &&
-                event.clientX <= stepDownRect.x + stepDownRect.width &&
-                event.clientY <= stepDownRect.y + stepDownRect.height) {
-                this.change = (event) => this.decrement(event.shiftKey ? this.stepModifier : 1);
-            }
-        };
-        this.findChange(event);
-        this.startChange(event);
-    }
-    startChange(event) {
-        this.changeCount = 0;
-        this.doChange(event);
-        this.safty = setTimeout(() => {
-            this.doNextChange(event);
-        }, 400);
-    }
-    doChange(event) {
-        this.change(event);
-    }
-    handlePointermove(event) {
-        this.findChange(event);
-    }
-    handlePointerup(event) {
-        this.buttons.releasePointerCapture(event.pointerId);
-        cancelAnimationFrame(this.nextChange);
-        clearTimeout(this.safty);
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        this.stepperActive = false;
-    }
-    doNextChange(event) {
-        this.changeCount += 1;
-        if (this.changeCount % FRAMES_PER_CHANGE === 0) {
-            this.doChange(event);
-        }
-        return requestAnimationFrame(() => {
-            this.nextChange = this.doNextChange(event);
-        });
-    }
-    stepBy(count) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const min = typeof this.min !== 'undefined' ? this.min : 0;
-        let value = this.value;
-        value += count * this._step;
-        if (isNaN(this.value)) {
-            this.value = min;
-        }
-        else {
-            this.value = value;
-        }
-        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-        this.indeterminate = false;
-        this.focus();
-    }
-    increment(factor = 1) {
-        this.stepBy(1 * factor);
-    }
-    decrement(factor = 1) {
-        this.stepBy(-1 * factor);
-    }
-    handleKeydown(event) {
-        switch (event.code) {
-            case 'ArrowUp':
-                event.preventDefault();
-                this.increment(event.shiftKey ? this.stepModifier : 1);
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.decrement(event.shiftKey ? this.stepModifier : 1);
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                break;
-        }
-    }
-    onScroll(event) {
+  constructor() {
+    super(...arguments);
+    this.focused = false;
+    this._forcedUnit = "";
+    this.formatOptions = {};
+    this.hideStepper = false;
+    this.indeterminate = false;
+    this.keyboardFocused = false;
+    this.resolvedLanguage = document.documentElement.lang || navigator.language;
+    this.stepperActive = false;
+    this.stepModifier = 10;
+    this._value = NaN;
+    this._trackingValue = "";
+    this.changeCount = 0;
+    this.wasIndeterminate = false;
+  }
+  static get styles() {
+    return [...super.styles, styles, chevronStyles];
+  }
+  set value(rawValue) {
+    const value = this.validateInput(rawValue);
+    if (value === this.value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+  get value() {
+    return this._value;
+  }
+  get inputValue() {
+    return this.indeterminate ? this.formattedValue : this.inputElement.value;
+  }
+  get valueAsString() {
+    return this._value.toString();
+  }
+  set valueAsString(value) {
+    this.value = this.numberParser.parse(value);
+  }
+  get formattedValue() {
+    if (isNaN(this.value))
+      return "";
+    return this.numberFormatter.format(this.value) + (this.focused ? "" : this._forcedUnit);
+  }
+  convertValueToNumber(value) {
+    return this.numberParser.parse(value);
+  }
+  get _step() {
+    var _a;
+    if (typeof this.step !== "undefined") {
+      return this.step;
+    }
+    if (((_a = this.formatOptions) == null ? void 0 : _a.style) === "percent") {
+      return 0.01;
+    }
+    return 1;
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
+    }
+    this.stepperActive = true;
+    this.buttons.setPointerCapture(event.pointerId);
+    const stepUpRect = this.buttons.children[0].getBoundingClientRect();
+    const stepDownRect = this.buttons.children[1].getBoundingClientRect();
+    this.findChange = (event2) => {
+      if (event2.clientX >= stepUpRect.x && event2.clientY >= stepUpRect.y && event2.clientX <= stepUpRect.x + stepUpRect.width && event2.clientY <= stepUpRect.y + stepUpRect.height) {
+        this.change = (event3) => this.increment(event3.shiftKey ? this.stepModifier : 1);
+      } else if (event2.clientX >= stepDownRect.x && event2.clientY >= stepDownRect.y && event2.clientX <= stepDownRect.x + stepDownRect.width && event2.clientY <= stepDownRect.y + stepDownRect.height) {
+        this.change = (event3) => this.decrement(event3.shiftKey ? this.stepModifier : 1);
+      }
+    };
+    this.findChange(event);
+    this.startChange(event);
+  }
+  startChange(event) {
+    this.changeCount = 0;
+    this.doChange(event);
+    this.safty = setTimeout(() => {
+      this.doNextChange(event);
+    }, 400);
+  }
+  doChange(event) {
+    this.change(event);
+  }
+  handlePointermove(event) {
+    this.findChange(event);
+  }
+  handlePointerup(event) {
+    this.buttons.releasePointerCapture(event.pointerId);
+    cancelAnimationFrame(this.nextChange);
+    clearTimeout(this.safty);
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    this.stepperActive = false;
+  }
+  doNextChange(event) {
+    this.changeCount += 1;
+    if (this.changeCount % FRAMES_PER_CHANGE === 0) {
+      this.doChange(event);
+    }
+    return requestAnimationFrame(() => {
+      this.nextChange = this.doNextChange(event);
+    });
+  }
+  stepBy(count) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    const min = typeof this.min !== "undefined" ? this.min : 0;
+    let value = this.value;
+    value += count * this._step;
+    if (isNaN(this.value)) {
+      this.value = min;
+    } else {
+      this.value = value;
+    }
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.indeterminate = false;
+    this.focus();
+  }
+  increment(factor = 1) {
+    this.stepBy(1 * factor);
+  }
+  decrement(factor = 1) {
+    this.stepBy(-1 * factor);
+  }
+  handleKeydown(event) {
+    switch (event.code) {
+      case "ArrowUp":
         event.preventDefault();
-        const direction = event.shiftKey
-            ? event.deltaX / Math.abs(event.deltaX)
-            : event.deltaY / Math.abs(event.deltaY);
-        if (direction !== 0 && !isNaN(direction)) {
-            this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
-        }
-    }
-    onFocus() {
-        super.onFocus();
-        this._trackingValue = this.inputValue;
-        this.keyboardFocused = !this.readonly && true;
-        this.addEventListener('wheel', this.onScroll, { passive: false });
-    }
-    onBlur() {
-        super.onBlur();
-        this.keyboardFocused = !this.readonly && false;
-        this.removeEventListener('wheel', this.onScroll);
-    }
-    handleFocusin() {
-        this.focused = !this.readonly && true;
-        this.keyboardFocused = !this.readonly && true;
-    }
-    handleFocusout() {
-        this.focused = !this.readonly && false;
-        this.keyboardFocused = !this.readonly && false;
-    }
-    handleChange() {
-        const value = this.convertValueToNumber(this.inputValue);
-        if (this.wasIndeterminate) {
-            this.wasIndeterminate = false;
-            this.indeterminateValue = undefined;
-            if (isNaN(value)) {
-                this.indeterminate = true;
-                return;
-            }
-        }
-        this.value = value;
-        super.handleChange();
-    }
-    handleInput() {
-        if (this.indeterminate) {
-            this.wasIndeterminate = true;
-            this.indeterminateValue = this.value;
-            this.inputElement.value = this.inputElement.value.replace(indeterminatePlaceholder, '');
-        }
-        const { value: originalValue, selectionStart } = this.inputElement;
-        const value = originalValue
-            .split('')
-            .map((char) => remapMultiByteCharacters[char] || char)
-            .join('');
-        if (this.numberParser.isValidPartialNumber(value)) {
-            const valueAsNumber = this.convertValueToNumber(value);
-            if (!value && this.indeterminateValue) {
-                this.indeterminate = true;
-                this._value = this.indeterminateValue;
-            }
-            else {
-                this.indeterminate = false;
-                this._value = this.validateInput(valueAsNumber);
-            }
-            this._trackingValue = value;
-            this.inputElement.value = value;
-            return;
-        }
-        const currentLength = value.length;
-        const previousLength = this._trackingValue.length;
-        const nextSelectStart = (selectionStart || currentLength) -
-            (currentLength - previousLength);
-        this.inputElement.value = this.indeterminate
-            ? indeterminatePlaceholder
-            : this._trackingValue;
-        this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
-    }
-    validateInput(value) {
-        if (typeof this.min !== 'undefined') {
-            value = Math.max(this.min, value);
-        }
-        if (typeof this.max !== 'undefined') {
-            value = Math.min(this.max, value);
+        this.increment(event.shiftKey ? this.stepModifier : 1);
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.decrement(event.shiftKey ? this.stepModifier : 1);
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        break;
+    }
+  }
+  onScroll(event) {
+    event.preventDefault();
+    const direction = event.shiftKey ? event.deltaX / Math.abs(event.deltaX) : event.deltaY / Math.abs(event.deltaY);
+    if (direction !== 0 && !isNaN(direction)) {
+      this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
+    }
+  }
+  onFocus() {
+    super.onFocus();
+    this._trackingValue = this.inputValue;
+    this.keyboardFocused = !this.readonly && true;
+    this.addEventListener("wheel", this.onScroll, { passive: false });
+  }
+  onBlur() {
+    super.onBlur();
+    this.keyboardFocused = !this.readonly && false;
+    this.removeEventListener("wheel", this.onScroll);
+  }
+  handleFocusin() {
+    this.focused = !this.readonly && true;
+    this.keyboardFocused = !this.readonly && true;
+  }
+  handleFocusout() {
+    this.focused = !this.readonly && false;
+    this.keyboardFocused = !this.readonly && false;
+  }
+  handleChange() {
+    const value = this.convertValueToNumber(this.inputValue);
+    if (this.wasIndeterminate) {
+      this.wasIndeterminate = false;
+      this.indeterminateValue = void 0;
+      if (isNaN(value)) {
+        this.indeterminate = true;
+        return;
+      }
+    }
+    this.value = value;
+    super.handleChange();
+  }
+  handleInput() {
+    if (this.indeterminate) {
+      this.wasIndeterminate = true;
+      this.indeterminateValue = this.value;
+      this.inputElement.value = this.inputElement.value.replace(indeterminatePlaceholder, "");
+    }
+    const { value: originalValue, selectionStart } = this.inputElement;
+    const value = originalValue.split("").map((char) => remapMultiByteCharacters[char] || char).join("");
+    if (this.numberParser.isValidPartialNumber(value)) {
+      const valueAsNumber = this.convertValueToNumber(value);
+      if (!value && this.indeterminateValue) {
+        this.indeterminate = true;
+        this._value = this.indeterminateValue;
+      } else {
+        this.indeterminate = false;
+        this._value = this.validateInput(valueAsNumber);
+      }
+      this._trackingValue = value;
+      this.inputElement.value = value;
+      return;
+    }
+    const currentLength = value.length;
+    const previousLength = this._trackingValue.length;
+    const nextSelectStart = (selectionStart || currentLength) - (currentLength - previousLength);
+    this.inputElement.value = this.indeterminate ? indeterminatePlaceholder : this._trackingValue;
+    this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
+  }
+  validateInput(value) {
+    if (typeof this.min !== "undefined") {
+      value = Math.max(this.min, value);
+    }
+    if (typeof this.max !== "undefined") {
+      value = Math.min(this.max, value);
+    }
+    if (this.step) {
+      const min = typeof this.min !== "undefined" ? this.min : 0;
+      const moduloStep = (value - min) % this.step;
+      const fallsOnStep = moduloStep === 0;
+      if (!fallsOnStep) {
+        const overUnder = Math.round(moduloStep / this.step);
+        if (overUnder === 1) {
+          value += this.step - moduloStep;
+        } else {
+          value -= moduloStep;
         }
-        // Step shouldn't validate when 0...
-        if (this.step) {
-            const min = typeof this.min !== 'undefined' ? this.min : 0;
-            const moduloStep = (value - min) % this.step;
-            const fallsOnStep = moduloStep === 0;
-            if (!fallsOnStep) {
-                const overUnder = Math.round(moduloStep / this.step);
-                if (overUnder === 1) {
-                    value += this.step - moduloStep;
-                }
-                else {
-                    value -= moduloStep;
-                }
-            }
-            if (typeof this.max !== 'undefined') {
-                while (value > this.max) {
-                    value -= this.step;
-                }
-            }
+      }
+      if (typeof this.max !== "undefined") {
+        while (value > this.max) {
+          value -= this.step;
         }
-        return value;
-    }
-    get displayValue() {
-        const indeterminateValue = this.focused ? '' : indeterminatePlaceholder;
-        return this.indeterminate ? indeterminateValue : this.formattedValue;
-    }
-    clearNumberFormatterCache() {
-        this._numberFormatter = undefined;
-        this._numberParser = undefined;
-    }
-    get numberFormatter() {
-        if (!this._numberFormatter || !this._numberFormatterFocused) {
-            const _a = this.formatOptions, { style, unit, 
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            unitDisplay } = _a, formatOptionsNoUnit = __rest(_a, ["style", "unit", "unitDisplay"]);
-            if (style !== 'unit') {
-                formatOptionsNoUnit.style = style;
-            }
-            this._numberFormatterFocused = new NumberFormatter(this.resolvedLanguage, formatOptionsNoUnit);
-            try {
-                this._numberFormatter = new NumberFormatter(this.resolvedLanguage, this.formatOptions);
-                this._forcedUnit = '';
-                this._numberFormatter.format(1);
-            }
-            catch (error) {
-                if (style === 'unit') {
-                    this._forcedUnit = unit;
-                }
-                this._numberFormatter = this._numberFormatterFocused;
-            }
+      }
+    }
+    return value;
+  }
+  get displayValue() {
+    const indeterminateValue = this.focused ? "" : indeterminatePlaceholder;
+    return this.indeterminate ? indeterminateValue : this.formattedValue;
+  }
+  clearNumberFormatterCache() {
+    this._numberFormatter = void 0;
+    this._numberParser = void 0;
+  }
+  get numberFormatter() {
+    if (!this._numberFormatter || !this._numberFormatterFocused) {
+      const {
+        style,
+        unit,
+        unitDisplay,
+        ...formatOptionsNoUnit
+      } = this.formatOptions;
+      if (style !== "unit") {
+        formatOptionsNoUnit.style = style;
+      }
+      this._numberFormatterFocused = new NumberFormatter(this.resolvedLanguage, formatOptionsNoUnit);
+      try {
+        this._numberFormatter = new NumberFormatter(this.resolvedLanguage, this.formatOptions);
+        this._forcedUnit = "";
+        this._numberFormatter.format(1);
+      } catch (error) {
+        if (style === "unit") {
+          this._forcedUnit = unit;
         }
-        return this.focused
-            ? this._numberFormatterFocused
-            : this._numberFormatter;
-    }
-    get numberParser() {
-        if (!this._numberParser || !this._numberParserFocused) {
-            const _a = this.formatOptions, { style, unit, 
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            unitDisplay } = _a, formatOptionsNoUnit = __rest(_a, ["style", "unit", "unitDisplay"]);
-            if (style !== 'unit') {
-                formatOptionsNoUnit.style = style;
-            }
-            this._numberParserFocused = new NumberParser(this.resolvedLanguage, formatOptionsNoUnit);
-            try {
-                this._numberParser = new NumberParser(this.resolvedLanguage, this.formatOptions);
-                this._forcedUnit = '';
-                this._numberParser.parse('0');
-            }
-            catch (error) {
-                if (style === 'unit') {
-                    this._forcedUnit = unit;
-                }
-                this._numberParser = this._numberParserFocused;
-            }
+        this._numberFormatter = this._numberFormatterFocused;
+      }
+    }
+    return this.focused ? this._numberFormatterFocused : this._numberFormatter;
+  }
+  get numberParser() {
+    if (!this._numberParser || !this._numberParserFocused) {
+      const {
+        style,
+        unit,
+        unitDisplay,
+        ...formatOptionsNoUnit
+      } = this.formatOptions;
+      if (style !== "unit") {
+        formatOptionsNoUnit.style = style;
+      }
+      this._numberParserFocused = new NumberParser(this.resolvedLanguage, formatOptionsNoUnit);
+      try {
+        this._numberParser = new NumberParser(this.resolvedLanguage, this.formatOptions);
+        this._forcedUnit = "";
+        this._numberParser.parse("0");
+      } catch (error) {
+        if (style === "unit") {
+          this._forcedUnit = unit;
         }
-        return this.focused ? this._numberParserFocused : this._numberParser;
-    }
-    renderField() {
-        this.autocomplete = 'off';
-        return html `
+        this._numberParser = this._numberParserFocused;
+      }
+    }
+    return this.focused ? this._numberParserFocused : this._numberParser;
+  }
+  renderField() {
+    this.autocomplete = "off";
+    return html`
             ${super.renderField()}
-            ${this.hideStepper
-            ? html ``
-            : html `
+            ${this.hideStepper ? html`` : html`
                       <span
                           class="buttons"
                           @focusin=${this.handleFocusin}
                           @focusout=${this.handleFocusout}
                           ${streamingListener({
-                start: ['pointerdown', this.handlePointerdown],
-                streamInside: [
-                    [
-                        'pointermove',
-                        'pointerenter',
-                        'pointerleave',
-                        'pointerover',
-                        'pointerout',
-                    ],
-                    this.handlePointermove,
-                ],
-                end: [
-                    ['pointerup', 'pointercancel'],
-                    this.handlePointerup,
-                ],
-            })}
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: [
+        [
+          "pointermove",
+          "pointerenter",
+          "pointerleave",
+          "pointerover",
+          "pointerout"
+        ],
+        this.handlePointermove
+      ],
+      end: [
+        ["pointerup", "pointercancel"],
+        this.handlePointerup
+      ]
+    })}
                       >
                           <sp-action-button
                               class="stepUp"
                               label="Increment"
                               tabindex="-1"
                               ?focused=${this.focused}
-                              ?disabled=${this.disabled ||
-                this.readonly ||
-                (typeof this.max !== 'undefined' &&
-                    this.value === this.max)}
+                              ?disabled=${this.disabled || this.readonly || typeof this.max !== "undefined" && this.value === this.max}
                               ?quiet=${this.quiet}
                           >
                               <sp-icon-chevron75
@@ -424,10 +387,7 @@ export class NumberField extends TextfieldBase {
                               label="Decrement"
                               tabindex="-1"
                               ?focused=${this.focused}
-                              ?disabled=${this.disabled ||
-                this.readonly ||
-                (typeof this.min !== 'undefined' &&
-                    this.value === this.min)}
+                              ?disabled=${this.disabled || this.readonly || typeof this.min !== "undefined" && this.value === this.min}
                               ?quiet=${this.quiet}
                           >
                               <sp-icon-chevron75
@@ -438,114 +398,102 @@ export class NumberField extends TextfieldBase {
                       </span>
                   `}
         `;
-    }
-    update(changes) {
-        if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {
-            this.clearNumberFormatterCache();
+  }
+  update(changes) {
+    if (changes.has("formatOptions") || changes.has("resolvedLanguage")) {
+      this.clearNumberFormatterCache();
+    }
+    if (changes.has("value") || changes.has("max") || changes.has("min")) {
+      const value = this.numberParser.parse(this.formattedValue.replace(this._forcedUnit, ""));
+      this.value = value;
+    }
+    super.update(changes);
+  }
+  willUpdate() {
+    this.multiline = false;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  updated(changes) {
+    if (changes.has("min") || changes.has("formatOptions")) {
+      let inputMode = "numeric";
+      const hasNegative = typeof this.min !== "undefined" && this.min < 0;
+      const { maximumFractionDigits } = this.formatOptions;
+      const hasDecimals = maximumFractionDigits && maximumFractionDigits > 0;
+      if (isIPhone()) {
+        if (hasNegative) {
+          inputMode = "text";
+        } else if (hasDecimals) {
+          inputMode = "decimal";
         }
-        super.update(changes);
-    }
-    willUpdate() {
-        this.multiline = false;
-    }
-    firstUpdated(changes) {
-        super.firstUpdated(changes);
-        this.addEventListener('keydown', this.handleKeydown);
-    }
-    updated(changes) {
-        if (changes.has('value') ||
-            changes.has('max') ||
-            changes.has('min') ||
-            changes.has('min')) {
-            const value = this.numberParser.parse(this.inputValue.replace(this._forcedUnit, ''));
-            this.value = value;
+      } else if (isAndroid()) {
+        if (hasNegative) {
+          inputMode = "numeric";
+        } else if (hasDecimals) {
+          inputMode = "decimal";
         }
-        if (changes.has('min') || changes.has('formatOptions')) {
-            let inputMode = 'numeric';
-            const hasNegative = typeof this.min !== 'undefined' && this.min < 0;
-            const { maximumFractionDigits } = this.formatOptions;
-            const hasDecimals = maximumFractionDigits && maximumFractionDigits > 0;
-            /* c8 ignore next 18 */
-            if (isIPhone()) {
-                // iPhone doesn't have a minus sign in either numeric or decimal.
-                // Note this is only for iPhone, not iPad, which always has both
-                // minus and decimal in numeric.
-                if (hasNegative) {
-                    inputMode = 'text';
-                }
-                else if (hasDecimals) {
-                    inputMode = 'decimal';
-                }
-            }
-            else if (isAndroid()) {
-                // Android numeric has both a decimal point and minus key.
-                // decimal does not have a minus key.
-                if (hasNegative) {
-                    inputMode = 'numeric';
-                }
-                else if (hasDecimals) {
-                    inputMode = 'decimal';
-                }
-            }
-            this.inputElement.inputMode = inputMode;
+      }
+      this.inputElement.inputMode = inputMode;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resolveLanguage();
+  }
+  disconnectedCallback() {
+    this.resolveLanguage();
+    super.disconnectedCallback();
+  }
+  resolveLanguage() {
+    const queryThemeEvent = new CustomEvent("sp-language-context", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        callback: (lang) => {
+          this.resolvedLanguage = lang;
         }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resolveLanguage();
-    }
-    disconnectedCallback() {
-        this.resolveLanguage();
-        super.disconnectedCallback();
-    }
-    resolveLanguage() {
-        const queryThemeEvent = new CustomEvent('sp-language-context', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                callback: (lang) => {
-                    this.resolvedLanguage = lang;
-                },
-            },
-            cancelable: true,
-        });
-        this.dispatchEvent(queryThemeEvent);
-    }
+      },
+      cancelable: true
+    });
+    this.dispatchEvent(queryThemeEvent);
+  }
 }
-__decorate([
-    query('.buttons')
-], NumberField.prototype, "buttons", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NumberField.prototype, "focused", void 0);
-__decorate([
-    property({ type: Object, attribute: 'format-options' })
-], NumberField.prototype, "formatOptions", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })
-], NumberField.prototype, "hideStepper", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NumberField.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'keyboard-focused' })
-], NumberField.prototype, "keyboardFocused", void 0);
-__decorate([
-    property({ type: Number })
-], NumberField.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], NumberField.prototype, "min", void 0);
-__decorate([
-    property({ attribute: false })
-], NumberField.prototype, "resolvedLanguage", void 0);
-__decorate([
-    property({ type: Number })
-], NumberField.prototype, "step", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'step-modifier' })
-], NumberField.prototype, "stepModifier", void 0);
-__decorate([
-    property({ type: Number })
-], NumberField.prototype, "value", null);
-//# sourceMappingURL=NumberField.js.map
+__decorateClass([
+  query(".buttons")
+], NumberField.prototype, "buttons", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], NumberField.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Object, attribute: "format-options" })
+], NumberField.prototype, "formatOptions", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
+], NumberField.prototype, "hideStepper", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], NumberField.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "keyboard-focused" })
+], NumberField.prototype, "keyboardFocused", 2);
+__decorateClass([
+  property({ type: Number })
+], NumberField.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], NumberField.prototype, "min", 2);
+__decorateClass([
+  property({ attribute: false })
+], NumberField.prototype, "resolvedLanguage", 2);
+__decorateClass([
+  property({ type: Number })
+], NumberField.prototype, "step", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "step-modifier" })
+], NumberField.prototype, "stepModifier", 2);
+__decorateClass([
+  property({ type: Number })
+], NumberField.prototype, "value", 1);
+//# sourceMappingURL=NumberField.js.map