@spectrum-web-components/number-field 0.3.2 → 0.3.4

package/custom-elements.json

@@ -37,6 +37,14 @@
           },
           "default": "'-'"
         },
+        {
+          "kind": "variable",
+          "name": "remapMultiByteCharacters",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{\n    '１': '1',\n    '２': '2',\n    '３': '3',\n    '４': '4',\n    '５': '5',\n    '６': '6',\n    '７': '7',\n    '８': '8',\n    '９': '9',\n    '０': '0',\n    '、': ',',\n    '，': ',',\n    '。': '.',\n    '．': '.',\n    '％': '%',\n    '＋': '+',\n    ー: '-',\n}"
+        },
         {
           "kind": "class",
           "description": "",
@@ -546,7 +554,7 @@
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleChange",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -556,7 +564,7 @@
             },
             {
               "kind": "method",
-              "name": "onInput",
+              "name": "handleInput",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -789,6 +797,14 @@
             "module": "src/NumberField.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "remapMultiByteCharacters",
+          "declaration": {
+            "name": "remapMultiByteCharacters",
+            "module": "src/NumberField.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "NumberField",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.3.2",
+    "version": "0.3.4",
     "publishConfig": {
         "access": "public"
     },
@@ -45,22 +45,22 @@
     ],
     "dependencies": {
         "@internationalized/number": "^3.0.2",
-        "@spectrum-web-components/action-button": "^0.7.2",
+        "@spectrum-web-components/action-button": "^0.7.3",
         "@spectrum-web-components/base": "^0.5.1",
-        "@spectrum-web-components/icon": "^0.11.1",
-        "@spectrum-web-components/icons-ui": "^0.8.1",
-        "@spectrum-web-components/shared": "^0.13.2",
-        "@spectrum-web-components/textfield": "^0.10.2",
+        "@spectrum-web-components/icon": "^0.11.2",
+        "@spectrum-web-components/icons-ui": "^0.8.2",
+        "@spectrum-web-components/shared": "^0.13.3",
+        "@spectrum-web-components/textfield": "^0.11.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
         "@formatjs/intl-numberformat": "7.1.4",
-        "@spectrum-css/stepper": "^3.0.11"
+        "@spectrum-css/stepper": "^3.0.13"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
+    "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
 }

package/src/NumberField.d.ts

@@ -5,6 +5,7 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import { TextfieldBase } from '@spectrum-web-components/textfield';
 export declare const FRAMES_PER_CHANGE = 5;
 export declare const indeterminatePlaceholder = "-";
+export declare const remapMultiByteCharacters: Record<string, string>;
 /**
  * @element sp-number-field
  * @slot help-text - default or non-negative help text to associate to your form element
@@ -42,7 +43,7 @@ export declare class NumberField extends TextfieldBase {
     step?: number;
     stepperActive: boolean;
     stepModifier: number;
-    set value(value: number);
+    set value(rawValue: number);
     get value(): number;
     private get inputValue();
     _value: number;
@@ -77,8 +78,8 @@ export declare class NumberField extends TextfieldBase {
     private handleFocusout;
     private wasIndeterminate;
     private indeterminateValue?;
-    protected onChange(): void;
-    protected onInput(): void;
+    protected handleChange(): void;
+    protected handleInput(): void;
     private validateInput;
     protected get displayValue(): string;
     protected clearNumberFormatterCache(): void;

package/src/NumberField.js

@@ -22,6 +22,25 @@ import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevr
 import styles from './number-field.css.js';
 export const FRAMES_PER_CHANGE = 5;
 export const indeterminatePlaceholder = '-';
+export const remapMultiByteCharacters = {
+    '１': '1',
+    '２': '2',
+    '３': '3',
+    '４': '4',
+    '５': '5',
+    '６': '6',
+    '７': '7',
+    '８': '8',
+    '９': '9',
+    '０': '0',
+    '、': ',',
+    '，': ',',
+    '。': '.',
+    '．': '.',
+    '％': '%',
+    '＋': '+',
+    ー: '-',
+};
 /**
  * @element sp-number-field
  * @slot help-text - default or non-negative help text to associate to your form element
@@ -58,7 +77,8 @@ export class NumberField extends TextfieldBase {
     static get styles() {
         return [...super.styles, styles, chevronStyles];
     }
-    set value(value) {
+    set value(rawValue) {
+        const value = this.validateInput(rawValue);
         if (value === this.value) {
             return;
         }
@@ -222,7 +242,7 @@ export class NumberField extends TextfieldBase {
         this.focused = false;
         this.keyboardFocused = false;
     }
-    onChange() {
+    handleChange() {
         const value = this.convertValueToNumber(this.inputValue);
         if (this.wasIndeterminate) {
             this.wasIndeterminate = false;
@@ -233,15 +253,19 @@ export class NumberField extends TextfieldBase {
             }
         }
         this.value = value;
-        super.onChange();
+        super.handleChange();
     }
-    onInput() {
+    handleInput() {
         if (this.indeterminate) {
             this.wasIndeterminate = true;
             this.indeterminateValue = this.value;
             this.inputElement.value = this.inputElement.value.replace(indeterminatePlaceholder, '');
         }
-        const { value, selectionStart } = this.inputElement;
+        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) {
@@ -253,6 +277,7 @@ export class NumberField extends TextfieldBase {
                 this._value = this.validateInput(valueAsNumber);
             }
             this._trackingValue = value;
+            this.inputElement.value = value;
             return;
         }
         const currentLength = value.length;
@@ -431,7 +456,7 @@ export class NumberField extends TextfieldBase {
             changes.has('min') ||
             changes.has('min')) {
             const value = this.numberParser.parse(this.inputValue.replace(this._forcedUnit, ''));
-            this.value = this.validateInput(value);
+            this.value = value;
         }
         if (changes.has('min') || changes.has('formatOptions')) {
             let inputMode = 'numeric';

package/src/NumberField.js.map

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

package/stories/number-field.stories.js

@@ -161,11 +161,21 @@ export default {
     },
 };
 export const Default = (args = {}) => {
+    const onChange = args.onChange ||
+        (() => {
+            return;
+        });
+    const onInput = args.onInput ||
+        (() => {
+            return;
+        });
     return html `
         <sp-field-label for="default">Enter a number</sp-field-label>
         <sp-number-field
             id="default"
             ...=${spreadProps(args)}
+            @input=${(event) => onInput(event.target.value)}
+            @change=${(event) => onChange(event.target.value)}
             style="width: 150px"
         ></sp-number-field>
     `;
@@ -173,30 +183,12 @@ export const Default = (args = {}) => {
 Default.args = {
     value: 100,
 };
-export const quiet = (args = {}) => {
-    return html `
-        <sp-field-label for="default">Enter a number</sp-field-label>
-        <sp-number-field
-            id="default"
-            ...=${spreadProps(args)}
-            style="width: 150px"
-        ></sp-number-field>
-    `;
-};
+export const quiet = (args = {}) => Default(args);
 quiet.args = {
     quiet: true,
     value: 100,
 };
-export const indeterminate = (args = {}) => {
-    return html `
-        <sp-field-label for="default">Enter a number</sp-field-label>
-        <sp-number-field
-            id="default"
-            ...=${spreadProps(args)}
-            style="width: 150px"
-        ></sp-number-field>
-    `;
-};
+export const indeterminate = (args = {}) => Default(args);
 indeterminate.args = {
     value: 100,
     indeterminate: true,
@@ -210,6 +202,7 @@ export const decimals = (args) => {
             id="decimals"
             style="width: 200px"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
             .formatOptions=${{
         signDisplay: 'exceptZero',
         minimumFractionDigits: 1,
@@ -228,6 +221,7 @@ export const percents = (args = {}) => {
             id="percents"
             style="width: 200px"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
             .formatOptions=${{
         style: 'percent',
         unitDisplay: 'narrow',
@@ -244,6 +238,7 @@ export const currency = (args = {}) => {
         <sp-number-field
             style="width: 200px"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
             .formatOptions=${{
         style: 'currency',
         currency: 'EUR',
@@ -263,6 +258,7 @@ export const units = (args) => {
             id="units"
             style="width: 200px"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
             .formatOptions=${{
         style: 'unit',
         unit: 'inch',
@@ -285,6 +281,7 @@ export const pixels = (args) => {
         unit: 'px',
     }}
             ...=${spreadProps(args)}
+            @change=${args.onChange}
         ></sp-number-field>
     `;
 };
@@ -299,6 +296,7 @@ export const minMax = (args) => html `
         id="min-max"
         style="width: 200px"
         ...=${spreadProps(args)}
+        @change=${args.onChange}
     ></sp-number-field>
 `;
 minMax.args = {
@@ -314,6 +312,7 @@ export const hideStepper = (args) => {
         <sp-number-field
             id="hideStepper"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
         ></sp-number-field>
     `;
 };
@@ -329,6 +328,7 @@ export const hideStepperQuiet = (args) => {
         <sp-number-field
             id="hideStepper"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
         ></sp-number-field>
     `;
 };
@@ -345,6 +345,7 @@ export const disabled = (args) => {
         <sp-number-field
             id="disabled"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
         ></sp-number-field>
     `;
 };
@@ -360,6 +361,7 @@ export const readOnly = (args) => {
         <sp-number-field
             id="readonly"
             ...=${spreadProps(args)}
+            @change=${args.onChange}
         ></sp-number-field>
     `;
 };

package/stories/number-field.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.stories.js","sourceRoot":"","sources":["number-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-number-field.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n    title: 'Number Field',\n    component: 'sp-number-field',\n    args: {\n        disabled: false,\n        readonly: false,\n        quiet: false,\n        value: undefined,\n        placeholder: '',\n        min: undefined,\n        max: undefined,\n        step: undefined,\n    },\n    argTypes: {\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        indeterminate: {\n            name: 'indeterminate',\n            type: { name: 'boolean', required: false },\n            description:\n                'Whether the value of the Number Field can be determined for display.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        readonly: {\n            name: 'readonly',\n            type: { name: 'boolean', required: false },\n            description:\n                'When this control is read only, you will not be able to input an updated value.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description:\n                'An altered delivery with no background and only a bottom border.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        hideStepper: {\n            name: 'hide stepper',\n            type: { name: 'boolean', required: false },\n            description: 'Whether to remove the stepper UI from the control.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        value: {\n            name: 'value',\n            type: { name: 'number', required: false },\n            description: 'Value to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        step: {\n            name: 'step',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to change the value by when using the stepper or arrow key interactions.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        stepModifier: {\n            name: 'step modifier',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to scale the step increment/decrement when holding the shift key',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 10 },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            type: { name: 'string', required: false },\n            description: 'Placeholder to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        min: {\n            name: 'min',\n            type: { name: 'number', required: false },\n            description: 'The minimum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        max: {\n            name: 'max',\n            type: { name: 'numer', required: false },\n            description: 'The maximum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n    },\n};\n\ninterface StoryArgs {\n    disabled?: boolean;\n    indeterminate?: boolean;\n    invalid?: boolean;\n    value?: number;\n    placeholder?: string;\n    max?: number;\n    min?: number;\n    hideStepper?: boolean;\n    readonly?: boolean;\n    step?: number;\n    [prop: string]: unknown;\n}\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"default\">Enter a number</sp-field-label>\n        <sp-number-field\n            id=\"default\"\n            ...=${spreadProps(args)}\n            style=\"width: 150px\"\n        ></sp-number-field>\n    `;\n};\n\nDefault.args = {\n    value: 100,\n};\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"default\">Enter a number</sp-field-label>\n        <sp-number-field\n            id=\"default\"\n            ...=${spreadProps(args)}\n            style=\"width: 150px\"\n        ></sp-number-field>\n    `;\n};\n\nquiet.args = {\n    quiet: true,\n    value: 100,\n};\n\nexport const indeterminate = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"default\">Enter a number</sp-field-label>\n        <sp-number-field\n            id=\"default\"\n            ...=${spreadProps(args)}\n            style=\"width: 150px\"\n        ></sp-number-field>\n    `;\n};\n\nindeterminate.args = {\n    value: 100,\n    indeterminate: true,\n};\n\nexport const decimals = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"decimals\">\n            Enter a number with visible decimals\n        </sp-field-label>\n        <sp-number-field\n            id=\"decimals\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            .formatOptions=${{\n                signDisplay: 'exceptZero',\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 2,\n            }}\n        ></sp-number-field>\n    `;\n};\n\ndecimals.args = {\n    value: 19.274,\n};\n\nexport const percents = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"percents\">Enter a percentage</sp-field-label>\n        <sp-number-field\n            id=\"percents\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            .formatOptions=${{\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }}\n        ></sp-number-field>\n    `;\n};\n\npercents.args = {\n    value: 0.372,\n};\n\nexport const currency = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"currency\">Enter a value in Euros</sp-field-label>\n        <sp-number-field\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            .formatOptions=${{\n                style: 'currency',\n                currency: 'EUR',\n                currencyDisplay: 'code',\n                currencySign: 'accounting',\n            }}\n        ></sp-number-field>\n    `;\n};\n\ncurrency.args = {\n    value: 23.19,\n};\n\nexport const units = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in inches</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'inch',\n                unitDisplay: 'long',\n            }}\n        ></sp-number-field>\n    `;\n};\n\nunits.args = {\n    value: 24,\n};\n\nexport const pixels = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in pixels</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'px',\n            }}\n            ...=${spreadProps(args)}\n        ></sp-number-field>\n    `;\n};\n\npixels.args = {\n    value: 800,\n};\n\nexport const minMax = (args: StoryArgs): TemplateResult => html`\n    <sp-field-label for=\"min-max\">\n        Enter a value between 0 and 255\n    </sp-field-label>\n    <sp-number-field\n        id=\"min-max\"\n        style=\"width: 200px\"\n        ...=${spreadProps(args)}\n    ></sp-number-field>\n`;\n\nminMax.args = {\n    value: 4,\n    min: 0,\n    max: 255,\n};\n\nexport const hideStepper = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n        ></sp-number-field>\n    `;\n};\nhideStepper.args = {\n    hideStepper: true,\n    value: 67,\n};\n\nexport const hideStepperQuiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n        ></sp-number-field>\n    `;\n};\nhideStepperQuiet.args = {\n    hideStepper: true,\n    value: 67,\n    quiet: true,\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"disabled\">\n            This Number Field is disabled\n        </sp-field-label>\n        <sp-number-field\n            id=\"disabled\"\n            ...=${spreadProps(args)}\n        ></sp-number-field>\n    `;\n};\ndisabled.args = {\n    disabled: true,\n    value: 892,\n};\n\nexport const readOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"readonly\">\n            You can only read the following value\n        </sp-field-label>\n        <sp-number-field\n            id=\"readonly\"\n            ...=${spreadProps(args)}\n        ></sp-number-field>\n    `;\n};\nreadOnly.args = {\n    readonly: true,\n    value: '15',\n};\n"]}
+{"version":3,"file":"number-field.stories.js","sourceRoot":"","sources":["number-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-number-field.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { NumberField } from '../src/NumberField.js';\n\nexport default {\n    title: 'Number Field',\n    component: 'sp-number-field',\n    args: {\n        disabled: false,\n        readonly: false,\n        quiet: false,\n        value: undefined,\n        placeholder: '',\n        min: undefined,\n        max: undefined,\n        step: undefined,\n    },\n    argTypes: {\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        indeterminate: {\n            name: 'indeterminate',\n            type: { name: 'boolean', required: false },\n            description:\n                'Whether the value of the Number Field can be determined for display.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        readonly: {\n            name: 'readonly',\n            type: { name: 'boolean', required: false },\n            description:\n                'When this control is read only, you will not be able to input an updated value.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description:\n                'An altered delivery with no background and only a bottom border.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        hideStepper: {\n            name: 'hide stepper',\n            type: { name: 'boolean', required: false },\n            description: 'Whether to remove the stepper UI from the control.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        value: {\n            name: 'value',\n            type: { name: 'number', required: false },\n            description: 'Value to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        step: {\n            name: 'step',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to change the value by when using the stepper or arrow key interactions.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        stepModifier: {\n            name: 'step modifier',\n            type: { name: 'number', required: false },\n            description:\n                'Amount to scale the step increment/decrement when holding the shift key',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 10 },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            type: { name: 'string', required: false },\n            description: 'Placeholder to apply to the control.',\n            table: {\n                type: { summary: 'string' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        min: {\n            name: 'min',\n            type: { name: 'number', required: false },\n            description: 'The minimum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        max: {\n            name: 'max',\n            type: { name: 'numer', required: false },\n            description: 'The maximum value the control can be set to.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n    },\n};\n\ninterface StoryArgs {\n    disabled?: boolean;\n    indeterminate?: boolean;\n    invalid?: boolean;\n    value?: number;\n    placeholder?: string;\n    max?: number;\n    min?: number;\n    hideStepper?: boolean;\n    readonly?: boolean;\n    step?: number;\n    onChange?: (value: number) => void;\n    onInput?: (value: number) => void;\n    [prop: string]: unknown;\n}\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n    const onChange =\n        (args.onChange as (value: number) => void) ||\n        (() => {\n            return;\n        });\n    const onInput =\n        (args.onInput as (value: number) => void) ||\n        (() => {\n            return;\n        });\n    return html`\n        <sp-field-label for=\"default\">Enter a number</sp-field-label>\n        <sp-number-field\n            id=\"default\"\n            ...=${spreadProps(args)}\n            @input=${(event: Event) =>\n                onInput((event.target as NumberField).value)}\n            @change=${(event: Event) =>\n                onChange((event.target as NumberField).value)}\n            style=\"width: 150px\"\n        ></sp-number-field>\n    `;\n};\n\nDefault.args = {\n    value: 100,\n};\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Default(args);\n\nquiet.args = {\n    quiet: true,\n    value: 100,\n};\n\nexport const indeterminate = (args: StoryArgs = {}): TemplateResult =>\n    Default(args);\n\nindeterminate.args = {\n    value: 100,\n    indeterminate: true,\n};\n\nexport const decimals = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"decimals\">\n            Enter a number with visible decimals\n        </sp-field-label>\n        <sp-number-field\n            id=\"decimals\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                signDisplay: 'exceptZero',\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 2,\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\ndecimals.args = {\n    value: 19.274,\n};\n\nexport const percents = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"percents\">Enter a percentage</sp-field-label>\n        <sp-number-field\n            id=\"percents\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'percent',\n                unitDisplay: 'narrow',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\npercents.args = {\n    value: 0.372,\n};\n\nexport const currency = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"currency\">Enter a value in Euros</sp-field-label>\n        <sp-number-field\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'currency',\n                currency: 'EUR',\n                currencyDisplay: 'code',\n                currencySign: 'accounting',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\ncurrency.args = {\n    value: 23.19,\n};\n\nexport const units = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in inches</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'inch',\n                unitDisplay: 'long',\n            } as unknown as Intl.NumberFormatOptions}\n        ></sp-number-field>\n    `;\n};\n\nunits.args = {\n    value: 24,\n};\n\nexport const pixels = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"units\">Enter a lengths in pixels</sp-field-label>\n        <sp-number-field\n            id=\"units\"\n            style=\"width: 200px\"\n            .formatOptions=${{\n                style: 'unit',\n                unit: 'px',\n            }}\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\n\npixels.args = {\n    value: 800,\n};\n\nexport const minMax = (args: StoryArgs): TemplateResult => html`\n    <sp-field-label for=\"min-max\">\n        Enter a value between 0 and 255\n    </sp-field-label>\n    <sp-number-field\n        id=\"min-max\"\n        style=\"width: 200px\"\n        ...=${spreadProps(args)}\n        @change=${args.onChange}\n    ></sp-number-field>\n`;\n\nminMax.args = {\n    value: 4,\n    min: 0,\n    max: 255,\n};\n\nexport const hideStepper = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nhideStepper.args = {\n    hideStepper: true,\n    value: 67,\n};\n\nexport const hideStepperQuiet = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"hideStepper\">\n            Enter a number without the stepper UI\n        </sp-field-label>\n        <sp-number-field\n            id=\"hideStepper\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nhideStepperQuiet.args = {\n    hideStepper: true,\n    value: 67,\n    quiet: true,\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"disabled\">\n            This Number Field is disabled\n        </sp-field-label>\n        <sp-number-field\n            id=\"disabled\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\ndisabled.args = {\n    disabled: true,\n    value: 892,\n};\n\nexport const readOnly = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-field-label for=\"readonly\">\n            You can only read the following value\n        </sp-field-label>\n        <sp-number-field\n            id=\"readonly\"\n            ...=${spreadProps(args)}\n            @change=${args.onChange}\n        ></sp-number-field>\n    `;\n};\nreadOnly.args = {\n    readonly: true,\n    value: '15',\n};\n"]}