@spectrum-web-components/number-field - npm Package Compare versions

Comparing version 0.39.0 to 0.39.1

custom-elements.json

@@ -226,2 +226,8 @@ {
               "kind": "field",
+              "name": "lastCommitedValue",
+              "privacy": "private",
+              "default": "NaN"
+            },
+            {
+              "kind": "field",
               "name": "valueAsString",
@@ -228,0 +234,0 @@ "type": {

package.json

 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.39.0",
+    "version": "0.39.1",
     "publishConfig": {
@@ -61,9 +61,9 @@ "access": "public"
         "@internationalized/number": "^3.1.0",
-        "@spectrum-web-components/action-button": "^0.39.0",
-        "@spectrum-web-components/base": "^0.39.0",
-        "@spectrum-web-components/icon": "^0.39.0",
-        "@spectrum-web-components/icons-ui": "^0.39.0",
-        "@spectrum-web-components/reactive-controllers": "^0.39.0",
-        "@spectrum-web-components/shared": "^0.39.0",
-        "@spectrum-web-components/textfield": "^0.39.0"
+        "@spectrum-web-components/action-button": "^0.39.1",
+        "@spectrum-web-components/base": "^0.39.1",
+        "@spectrum-web-components/icon": "^0.39.1",
+        "@spectrum-web-components/icons-ui": "^0.39.1",
+        "@spectrum-web-components/reactive-controllers": "^0.39.1",
+        "@spectrum-web-components/shared": "^0.39.1",
+        "@spectrum-web-components/textfield": "^0.39.1"
     },
@@ -80,3 +80,3 @@ "devDependencies": {
     ],
-    "gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
+    "gitHead": "d374f8645b54b978d830c95ff777b5b1e9172ac7"
 }

src/NumberField.d.ts

@@ -53,2 +53,3 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     private _trackingValue;
+    private lastCommitedValue;
     /**
@@ -55,0 +56,0 @@ * Retreive the value of the element parsed to a Number.

src/NumberField.dev.js

@@ -99,2 +99,3 @@ "use strict";
     this._trackingValue = "";
+    this.lastCommitedValue = NaN;
     this.changeCount = 0;
@@ -118,2 +119,8 @@ this.languageResolver = new LanguageResolutionController(this);
     this._value = value;
+    if (!this.managedInput && this.lastCommitedValue !== this.value) {
+      this.dispatchEvent(
+        new Event("change", { bubbles: true, composed: true })
+      );
+      this.lastCommitedValue = this.value;
+    }
     this.requestUpdate("value", oldValue);
@@ -201,5 +208,8 @@ }
     clearTimeout(this.safty);
-    this.dispatchEvent(
-      new Event("change", { bubbles: true, composed: true })
-    );
+    if (this.lastCommitedValue !== this.value) {
+      this.dispatchEvent(
+        new Event("change", { bubbles: true, composed: true })
+      );
+      this.lastCommitedValue = this.value;
+    }
     this.managedInput = false;
@@ -247,5 +257,2 @@ }
         this.increment(event.shiftKey ? this.stepModifier : 1);
-        this.dispatchEvent(
-          new Event("change", { bubbles: true, composed: true })
-        );
         break;
@@ -255,5 +262,2 @@ case "ArrowDown":
         this.decrement(event.shiftKey ? this.stepModifier : 1);
-        this.dispatchEvent(
-          new Event("change", { bubbles: true, composed: true })
-        );
         break;
@@ -273,2 +277,3 @@ }
         );
+        this.lastCommitedValue = this.value;
       }, CHANGE_DEBOUNCE_MS);
@@ -308,3 +313,7 @@ }
     this.value = value;
-    super.handleChange();
+    this.inputElement.value = this.formattedValue;
+    if (this.lastCommitedValue !== this.value) {
+      this.lastCommitedValue = this.value;
+      super.handleChange();
+    }
   }
@@ -362,2 +371,4 @@ handleCompositionStart() {
   validateInput(value) {
+    const signMultiplier = value < 0 ? -1 : 1;
+    value *= signMultiplier;
     if (typeof this.min !== "undefined") {
@@ -387,2 +398,3 @@ value = Math.max(this.min, value);
     }
+    value *= signMultiplier;
     return value;
@@ -389,0 +401,0 @@ }

src/NumberField.js

@@ -1,22 +0,22 @@
-"use strict";var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(o,l,e,t)=>{for(var i=t>1?void 0:t?g(l,e):l,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(t?s(l,e,i):s(i))||i);return t&&i&&b(l,e,i),i};import{html as h,nothing as y}from"@spectrum-web-components/base";import{property as a,query as E}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as C,languageResolverUpdatedSymbol as P}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as _}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as c,NumberParser as m}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/action-button/sp-action-button.js";import{isAndroid as F,isIPhone as f}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as w}from"@spectrum-web-components/textfield";import x from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import N from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,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:"-"};const v={s:o=>h`
+"use strict";var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var s=t>1?void 0:t?g(l,e):l,i=a.length-1,r;i>=0;i--)(r=a[i])&&(s=(t?r(l,e,s):r(s))||s);return t&&s&&b(l,e,s),s};import{html as h,nothing as y}from"@spectrum-web-components/base";import{property as o,query as C}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as E,languageResolverUpdatedSymbol as P}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as _}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as m,NumberParser as c}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/action-button/sp-action-button.js";import{isAndroid as F,isIPhone as f}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as V}from"@spectrum-web-components/textfield";import w from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import N from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,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:"-"};const v={s:a=>h`
         <sp-icon-chevron75
             slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${o}75"
+            class="stepper-icon spectrum-UIIcon-Chevron${a}75"
         ></sp-icon-chevron75>
-    `,m:o=>h`
+    `,m:a=>h`
         <sp-icon-chevron75
             slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${o}75"
+            class="stepper-icon spectrum-UIIcon-Chevron${a}75"
         ></sp-icon-chevron75>
-    `,l:o=>h`
+    `,l:a=>h`
         <sp-icon-chevron100
             slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${o}100"
+            class="stepper-icon spectrum-UIIcon-Chevron${a}100"
         ></sp-icon-chevron100>
-    `,xl:o=>h`
+    `,xl:a=>h`
         <sp-icon-chevron200
             slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${o}200"
+            class="stepper-icon spectrum-UIIcon-Chevron${a}200"
         ></sp-icon-chevron200>
-    `};export class NumberField extends w{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.changeCount=0;this.languageResolver=new C(this);this.wasIndeterminate=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,N,x]}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){var t;if(f()&&this.inputElement.inputMode==="decimal"){const i=this.numberFormatter.formatToParts(1000.1),r=e.split("").find(u=>u===","||u==="."),s=(t=i.find(u=>u.type==="decimal"))==null?void 0:t.value;r&&s&&(e=e.replace(r,s))}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.managedInput=!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.managedInput=!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){if(!this.isComposing)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(),this.managedInput=!0;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)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))},CHANGE_DEBOUNCE_MS)),this.managedInput=!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()}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInput(e){if(this.isComposing){e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,""));const{value:t,selectionStart:i}=this.inputElement,r=t.split("").map(p=>remapMultiByteCharacters[p]||p).join("");if(this.numberParser.isValidPartialNumber(r)){const p=this.convertValueToNumber(r);!r&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(p)),this._trackingValue=r,this.inputElement.value=r,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const s=r.length,u=this._trackingValue.length,d=(i||s)-(s-u);this.inputElement.setSelectionRange(d,d)}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 c(this.languageResolver.language,r);try{this._numberFormatter=new c(this.languageResolver.language,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 m(this.languageResolver.language,r);try{this._numberParser=new m(this.languageResolver.language,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",h`
+    `};export class NumberField extends V{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.lastCommitedValue=NaN;this.changeCount=0;this.languageResolver=new E(this);this.wasIndeterminate=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,N,w]}set value(e){const t=this.validateInput(e);if(t===this.value)return;const s=this._value;this._value=t,!this.managedInput&&this.lastCommitedValue!==this.value&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.value),this.requestUpdate("value",s)}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){var t;if(f()&&this.inputElement.inputMode==="decimal"){const s=this.numberFormatter.formatToParts(1000.1),i=e.split("").find(u=>u===","||u==="."),r=(t=s.find(u=>u.type==="decimal"))==null?void 0:t.value;i&&r&&(e=e.replace(i,r))}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.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),s=this.buttons.children[1].getBoundingClientRect();this.findChange=i=>{i.clientX>=t.x&&i.clientY>=t.y&&i.clientX<=t.x+t.width&&i.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):i.clientX>=s.x&&i.clientY>=s.y&&i.clientX<=s.x+s.width&&i.clientY<=s.y+s.height&&(this.change=r=>this.decrement(r.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.lastCommitedValue!==this.value&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.value),this.managedInput=!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 s=this.value;s+=e*this._step,isNaN(this.value)?this.value=t:this.value=s,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){if(!this.isComposing)switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1);break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1);break}}onScroll(e){e.preventDefault(),this.managedInput=!0;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)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.value},CHANGE_DEBOUNCE_MS)),this.managedInput=!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,this.inputElement.value=this.formattedValue,this.lastCommitedValue!==this.value&&(this.lastCommitedValue=this.value,super.handleChange())}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInput(e){if(this.isComposing){e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,""));const{value:t,selectionStart:s}=this.inputElement,i=t.split("").map(d=>remapMultiByteCharacters[d]||d).join("");if(this.numberParser.isValidPartialNumber(i)){const d=this.convertValueToNumber(i);!i&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(d)),this._trackingValue=i,this.inputElement.value=i,this.inputElement.setSelectionRange(s,s);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const r=i.length,u=this._trackingValue.length,p=(s||r)-(r-u);this.inputElement.setSelectionRange(p,p)}validateInput(e){const t=e<0?-1:1;if(e*=t,typeof this.min!="undefined"&&(e=Math.max(this.min,e)),typeof this.max!="undefined"&&(e=Math.min(this.max,e)),this.step){const s=typeof this.min!="undefined"?this.min:0,i=(e-s)%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*=t,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:s,...i}=this.formatOptions;e!=="unit"&&(i.style=e),this._numberFormatterFocused=new m(this.languageResolver.language,i);try{this._numberFormatter=new m(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(r){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:s,...i}=this.formatOptions;e!=="unit"&&(i.style=e),this._numberParserFocused=new c(this.languageResolver.language,i);try{this._numberParser=new c(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",h`
             ${super.renderField()}
@@ -54,3 +54,3 @@ ${this.hideStepper?y:h`
                   `}
-        `}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(e){this.multiline=!1,e.has(P)&&this.clearNumberFormatterCache()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("compositionstart",this.handleCompositionStart),this.addEventListener("compositionend",this.handleCompositionEnd)}updated(e){if(e.has("min")||e.has("formatOptions")){let t="numeric";const i=typeof this.min!="undefined"&&this.min<0,{maximumFractionDigits:r}=this.numberFormatter.resolvedOptions(),s=r>0;f()?i?t="text":s&&(t="decimal"):F()&&(i?t="numeric":s&&(t="decimal")),this.inputElement.inputMode=t}}}n([E(".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({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);
+        `}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(e){this.multiline=!1,e.has(P)&&this.clearNumberFormatterCache()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("compositionstart",this.handleCompositionStart),this.addEventListener("compositionend",this.handleCompositionEnd)}updated(e){if(e.has("min")||e.has("formatOptions")){let t="numeric";const s=typeof this.min!="undefined"&&this.min<0,{maximumFractionDigits:i}=this.numberFormatter.resolvedOptions(),r=i>0;f()?s?t="text":r&&(t="decimal"):F()&&(s?t="numeric":r&&(t="decimal")),this.inputElement.inputMode=t}}}n([C(".buttons")],NumberField.prototype,"buttons",2),n([o({type:Boolean,reflect:!0})],NumberField.prototype,"focused",2),n([o({type:Object,attribute:"format-options"})],NumberField.prototype,"formatOptions",2),n([o({type:Boolean,reflect:!0,attribute:"hide-stepper"})],NumberField.prototype,"hideStepper",2),n([o({type:Boolean,reflect:!0})],NumberField.prototype,"indeterminate",2),n([o({type:Boolean,reflect:!0,attribute:"keyboard-focused"})],NumberField.prototype,"keyboardFocused",2),n([o({type:Number})],NumberField.prototype,"max",2),n([o({type:Number})],NumberField.prototype,"min",2),n([o({type:Number})],NumberField.prototype,"step",2),n([o({type:Number,reflect:!0,attribute:"step-modifier"})],NumberField.prototype,"stepModifier",2),n([o({type:Number})],NumberField.prototype,"value",1);
 //# sourceMappingURL=NumberField.js.map

test/number-field.test.js

@@ -115,2 +115,15 @@ "use strict";
     });
+    it("supports both positive and negative decimal values", async () => {
+      const el = await getElFrom(
+        Default({
+          step: 1e-3,
+          min: -10,
+          max: 10,
+          value: -2.4
+        })
+      );
+      el.size = "xl";
+      expect(el.value).to.equal(-2.4);
+      expect(el.valueAsString).to.equal("-2.4");
+    });
   });
@@ -352,2 +365,12 @@ describe("Increments", () => {
     });
+    it("on changing `value`", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.value = 51;
+      expect(changeSpy.callCount).to.equal(1);
+      await elementUpdated(el);
+      el.value = 52;
+      expect(changeSpy.callCount).to.equal(2);
+    });
     it("via scroll", async () => {
@@ -525,2 +548,6 @@ el.focus();
       expect(changeSpy.callCount).to.equal(0);
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(53);
+      expect(inputSpy.callCount).to.equal(3);
+      expect(changeSpy.callCount).to.equal(0);
       sendMouse({
@@ -539,2 +566,63 @@ steps: [
       }
+      expect(inputSpy.callCount).to.equal(5);
+      expect(changeSpy.callCount).to.equal(0);
+      await sendMouse({
+        steps: [
+          {
+            type: "up"
+          }
+        ]
+      });
+      expect(inputSpy.callCount).to.equal(5);
+      expect(changeSpy.callCount).to.equal(1);
+    });
+    it("no change in committed value - using buttons", async () => {
+      const buttonUp = el.shadowRoot.querySelector(
+        ".step-up"
+      );
+      const buttonUpRect = buttonUp.getBoundingClientRect();
+      const buttonUpPosition = [
+        buttonUpRect.x + buttonUpRect.width / 2,
+        buttonUpRect.y + buttonUpRect.height / 2
+      ];
+      const buttonDown = el.shadowRoot.querySelector(
+        ".step-down"
+      );
+      const buttonDownRect = buttonDown.getBoundingClientRect();
+      const buttonDownPosition = [
+        buttonDownRect.x + buttonDownRect.width / 2,
+        buttonDownRect.y + buttonDownRect.height / 2
+      ];
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonUpPosition
+          },
+          {
+            type: "down"
+          }
+        ]
+      });
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(51);
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(0);
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(52);
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(0);
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonDownPosition
+          }
+        ]
+      });
+      let framesToWait = FRAMES_PER_CHANGE * 2;
+      while (framesToWait) {
+        framesToWait -= 1;
+        await nextFrame();
+      }
       expect(inputSpy.callCount).to.equal(4);
@@ -550,3 +638,6 @@ expect(changeSpy.callCount).to.equal(0);
       expect(inputSpy.callCount).to.equal(4);
-      expect(changeSpy.callCount).to.equal(1);
+      expect(
+        changeSpy.callCount,
+        'value does not change from initial value so no "change" event is dispatched'
+      ).to.equal(0);
     });
@@ -735,3 +826,6 @@ });
       expect(lastInputValue, "last input value").to.equal(10);
-      expect(lastChangeValue, "last change value").to.equal(10);
+      expect(lastChangeValue, "last change value").to.equal(
+        0,
+        'value does not change from initial value so no "change" event is dispatched'
+      );
       expect(el.formattedValue).to.equal("10");
@@ -770,2 +864,10 @@ expect(el.valueAsString).to.equal("10");
     });
+    it("dispatches onchange on setting max value", async () => {
+      el.value = 5;
+      await elementUpdated(el);
+      expect(lastChangeValue, "last change value").to.equal(5);
+      el.value = 15;
+      await elementUpdated(el);
+      expect(lastChangeValue, "last change value").to.equal(10);
+    });
   });
@@ -797,3 +899,6 @@ describe("min", () => {
       expect(lastInputValue, "last input value").to.equal(10);
-      expect(lastChangeValue, "last change value").to.equal(10);
+      expect(lastChangeValue, "last change value").to.equal(
+        0,
+        'value does not change from initial value so no "change" event is dispatched'
+      );
       expect(el.formattedValue).to.equal("10");
@@ -803,2 +908,10 @@ expect(el.valueAsString).to.equal("10");
     });
+    it("dispatches onchange on setting min value", async () => {
+      el.value = 15;
+      await elementUpdated(el);
+      expect(lastChangeValue, "last change value").to.equal(15);
+      el.value = 5;
+      await elementUpdated(el);
+      expect(lastChangeValue, "last change value").to.equal(10);
+    });
     xit("manages `inputMode` in iPhone", async () => {
@@ -805,0 +918,0 @@ await setUserAgent(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

611652

increased by2.18%

Lines of code

5411

increased by2.54%

Dependency changes

• Updated@spectrum-web-components/action-button@^0.39.1

• Updated@spectrum-web-components/base@^0.39.1

• Updated@spectrum-web-components/icon@^0.39.1

• Updated@spectrum-web-components/icons-ui@^0.39.1

• Updated@spectrum-web-components/reactive-controllers@^0.39.1

• Updated@spectrum-web-components/shared@^0.39.1

• Updated@spectrum-web-components/textfield@^0.39.1