@spectrum-web-components/number-field 0.4.2-devmode2.0 → 0.5.1

package/src/NumberField.js

@@ -1,380 +1,18 @@
-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 remapMultiByteCharacters = {
-  "\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: "-"
-};
-export class NumberField extends TextfieldBase {
-  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();
-        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;
-        }
-      }
-      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 = 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;
-        }
-        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;
-        }
-        this._numberParser = this._numberParserFocused;
-      }
-    }
-    return this.focused ? this._numberParserFocused : this._numberParser;
-  }
-  renderField() {
-    this.autocomplete = "off";
-    return html`
+"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=(h,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,r=h.length-1,s;r>=0;r--)(s=h[r])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&m(o,e,i),i};import{html as d}from"@spectrum-web-components/base";import{property as a,query as v}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as b}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as p,NumberParser as c}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 as g,isIPhone as y}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as P}from"@spectrum-web-components/textfield";import _ from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import E from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,indeterminatePlaceholder="-",remapMultiByteCharacters={"\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:"-"};export class NumberField extends P{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.resolvedLanguage=document.documentElement.lang||navigator.language;this.stepperActive=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.changeCount=0;this.wasIndeterminate=!1}static get styles(){return[...super.styles,E,_]}set value(e){const t=this.validateInput(e);if(t===this.value)return;const i=this._value;this._value=t,this.requestUpdate("value",i)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return isNaN(this.value)?"":this.numberFormatter.format(this.value)+(this.focused?"":this._forcedUnit)}convertValueToNumber(e){return this.numberParser.parse(e)}get _step(){var e;return typeof this.step!="undefined"?this.step:((e=this.formatOptions)==null?void 0:e.style)==="percent"?.01:1}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.stepperActive=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=r=>{r.clientX>=t.x&&r.clientY>=t.y&&r.clientX<=t.x+t.width&&r.clientY<=t.y+t.height?this.change=s=>this.increment(s.shiftKey?this.stepModifier:1):r.clientX>=i.x&&r.clientY>=i.y&&r.clientX<=i.x+i.width&&r.clientY<=i.y+i.height&&(this.change=s=>this.decrement(s.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.stepperActive=!1}doNextChange(e){return this.changeCount+=1,this.changeCount%FRAMES_PER_CHANGE===0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;const t=typeof this.min!="undefined"?this.min:0;let i=this.value;i+=e*this._step,isNaN(this.value)?this.value=t:this.value=i,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));break}}onScroll(e){e.preventDefault();const t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!isNaN(t)&&this.stepBy(t*(e.shiftKey?this.stepModifier:1))}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener("wheel",this.onScroll,{passive:!1})}onBlur(){super.onBlur(),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener("wheel",this.onScroll)}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){const e=this.convertValueToNumber(this.inputValue);if(this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,isNaN(e))){this.indeterminate=!0;return}this.value=e,super.handleChange()}handleInput(){this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,""));const{value:e,selectionStart:t}=this.inputElement,i=e.split("").map(u=>remapMultiByteCharacters[u]||u).join("");if(this.numberParser.isValidPartialNumber(i)){const u=this.convertValueToNumber(i);!i&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(u)),this._trackingValue=i,this.inputElement.value=i;return}const r=i.length,s=this._trackingValue.length,l=(t||r)-(r-s);this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue,this.inputElement.setSelectionRange(l,l)}validateInput(e){if(typeof this.min!="undefined"&&(e=Math.max(this.min,e)),typeof this.max!="undefined"&&(e=Math.min(this.max,e)),this.step){const t=typeof this.min!="undefined"?this.min:0,i=(e-t)%this.step;if(i===0||(Math.round(i/this.step)===1?e+=this.step-i:e-=i),typeof this.max!="undefined")for(;e>this.max;)e-=this.step}return e}get displayValue(){const e=this.focused?"":indeterminatePlaceholder;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){const{style:e,unit:t,unitDisplay:i,...r}=this.formatOptions;e!=="unit"&&(r.style=e),this._numberFormatterFocused=new p(this.resolvedLanguage,r);try{this._numberFormatter=new p(this.resolvedLanguage,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(s){e==="unit"&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...r}=this.formatOptions;e!=="unit"&&(r.style=e),this._numberParserFocused=new c(this.resolvedLanguage,r);try{this._numberParser=new c(this.resolvedLanguage,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(s){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",d`
             ${super.renderField()}
-            ${this.hideStepper ? html`` : html`
+            ${this.hideStepper?d``:d`
                       <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
-      ]
-    })}
+                          ${b({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
@@ -387,7 +25,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
@@ -397,103 +35,5 @@ export class NumberField extends TextfieldBase {
                           </sp-action-button>
                       </span>
                   `}
-        `;
-  }
-  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";
-        }
-      } else if (isAndroid()) {
-        if (hasNegative) {
-          inputMode = "numeric";
-        } else if (hasDecimals) {
-          inputMode = "decimal";
-        }
-      }
-      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;
-        }
-      },
-      cancelable: true
-    });
-    this.dispatchEvent(queryThemeEvent);
-  }
-}
-__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);
+        `}update(e){if((e.has("formatOptions")||e.has("resolvedLanguage"))&&this.clearNumberFormatterCache(),e.has("value")||e.has("max")||e.has("min")){const t=this.numberParser.parse(this.formattedValue.replace(this._forcedUnit,""));this.value=t}super.update(e)}willUpdate(){this.multiline=!1}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(e.has("min")||e.has("formatOptions")){let t="numeric";const i=typeof this.min!="undefined"&&this.min<0,{maximumFractionDigits:r}=this.formatOptions,s=r&&r>0;y()?i?t="text":s&&(t="decimal"):g()&&(i?t="numeric":s&&(t="decimal")),this.inputElement.inputMode=t}}connectedCallback(){super.connectedCallback(),this.resolveLanguage()}disconnectedCallback(){this.resolveLanguage(),super.disconnectedCallback()}resolveLanguage(){const e=new CustomEvent("sp-language-context",{bubbles:!0,composed:!0,detail:{callback:t=>{this.resolvedLanguage=t}},cancelable:!0});this.dispatchEvent(e)}}n([v(".buttons")],NumberField.prototype,"buttons",2),n([a({type:Boolean,reflect:!0})],NumberField.prototype,"focused",2),n([a({type:Object,attribute:"format-options"})],NumberField.prototype,"formatOptions",2),n([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],NumberField.prototype,"hideStepper",2),n([a({type:Boolean,reflect:!0})],NumberField.prototype,"indeterminate",2),n([a({type:Boolean,reflect:!0,attribute:"keyboard-focused"})],NumberField.prototype,"keyboardFocused",2),n([a({type:Number})],NumberField.prototype,"max",2),n([a({type:Number})],NumberField.prototype,"min",2),n([a({attribute:!1})],NumberField.prototype,"resolvedLanguage",2),n([a({type:Number})],NumberField.prototype,"step",2),n([a({type:Number,reflect:!0,attribute:"step-modifier"})],NumberField.prototype,"stepModifier",2),n([a({type:Number})],NumberField.prototype,"value",1);
 //# sourceMappingURL=NumberField.js.map