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

Comparing version 0.42.4 to 0.42.5

custom-elements.json

@@ -641,3 +641,22 @@ {
             {
+              "kind": "field",
+              "name": "hasRecentlyReceivedPointerDown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
               "kind": "method",
+              "name": "handleInputElementPointerdown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
               "name": "handleInput",
@@ -644,0 +663,0 @@ "privacy": "protected",

package.json

 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.42.4",
+    "version": "0.42.5",
     "publishConfig": {
@@ -61,9 +61,9 @@ "access": "public"
         "@internationalized/number": "^3.1.0",
-        "@spectrum-web-components/base": "^0.42.4",
-        "@spectrum-web-components/icon": "^0.42.4",
-        "@spectrum-web-components/icons-ui": "^0.42.4",
-        "@spectrum-web-components/infield-button": "^0.42.4",
-        "@spectrum-web-components/reactive-controllers": "^0.42.4",
-        "@spectrum-web-components/shared": "^0.42.4",
-        "@spectrum-web-components/textfield": "^0.42.4"
+        "@spectrum-web-components/base": "^0.42.5",
+        "@spectrum-web-components/icon": "^0.42.5",
+        "@spectrum-web-components/icons-ui": "^0.42.5",
+        "@spectrum-web-components/infield-button": "^0.42.5",
+        "@spectrum-web-components/reactive-controllers": "^0.42.5",
+        "@spectrum-web-components/shared": "^0.42.5",
+        "@spectrum-web-components/textfield": "^0.42.5"
     },
@@ -80,3 +80,3 @@ "devDependencies": {
     ],
-    "gitHead": "4924ffd06681ced537edaed873a9ce8b42cf155c"
+    "gitHead": "f29fd737947945de8cd6f5bc03fb389d386c9c3a"
 }

src/NumberField.d.ts

@@ -91,2 +91,4 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     protected handleCompositionEnd(): void;
+    private hasRecentlyReceivedPointerDown;
+    protected handleInputElementPointerdown(): void;
     protected handleInput(event: Event): void;
@@ -93,0 +95,0 @@ private valueWithLimits;

src/NumberField.dev.js

@@ -98,2 +98,3 @@ "use strict";
     this.wasIndeterminate = false;
+    this.hasRecentlyReceivedPointerDown = false;
     this.applyFocusElementLabel = (value) => {
@@ -318,2 +319,10 @@ this.appliedLabel = value;
   }
+  handleInputElementPointerdown() {
+    this.hasRecentlyReceivedPointerDown = true;
+    this.updateComplete.then(() => {
+      requestAnimationFrame(() => {
+        this.hasRecentlyReceivedPointerDown = false;
+      });
+    });
+  }
   handleInput(event) {
@@ -594,2 +603,5 @@ var _a;
     }
+    if (changes.has("focused") && this.focused && !this.hasRecentlyReceivedPointerDown && !!this.formatOptions.unit) {
+      this.setSelectionRange(0, this.displayValue.length);
+    }
   }
@@ -596,0 +608,0 @@ }

src/NumberField.js

@@ -1,2 +0,2 @@
-"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var i=t>1?void 0:t?y(l,e):l,r=a.length-1,s;r>=0;r--)(s=a[r])&&(i=(t?s(l,e,i):s(i))||i);return t&&i&&g(l,e,i),i};import{html as h,nothing as F}from"@spectrum-web-components/base";import{property as o,query as C}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as _,languageResolverUpdatedSymbol as E}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as P}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as d,NumberParser as f}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";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/infield-button/sp-infield-button.js";import{isAndroid as V,isIPhone as v}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 b={s:a=>h`
+"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var i=t>1?void 0:t?y(l,e):l,s=a.length-1,r;s>=0;s--)(r=a[s])&&(i=(t?r(l,e,i):r(i))||i);return t&&i&&g(l,e,i),i};import{html as h,nothing as F}from"@spectrum-web-components/base";import{property as o,query as C}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as P,languageResolverUpdatedSymbol as _}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as E}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as p,NumberParser as f}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";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/infield-button/sp-infield-button.js";import{isAndroid as V,isIPhone as v}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 b={s:a=>h`
         <sp-icon-chevron50
@@ -17,3 +17,3 @@ class="stepper-icon spectrum-UIIcon-Chevron${a}50"
         ></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 _(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;this.lastCommitedValue=t;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}setValue(e=this.value){this.value=e,!(typeof this.lastCommitedValue=="undefined"||this.lastCommitedValue===this.value)&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.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(v()&&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.managedInput=!1,this.setValue()}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)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=i.toString(),this.inputElement.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.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();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.setValue()},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(e){super.onBlur(e),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.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInput(e){var c;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)){this.lastCommitedValue=(c=this.lastCommitedValue)!=null?c:this.value;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,m=(i||s)-(s-u);this.inputElement.setSelectionRange(m,m)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,r=parseFloat(this.valueFormatter.format((e-i)%this.step));if(r===0||(Math.round(r/this.step)===1?e+=this.step-r:e-=r),typeof this.max!="undefined")for(;e>this.max;)e-=this.step;e=parseFloat(this.valueFormatter.format(e))}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:i,...r}=this.formatOptions;e!=="unit"&&(r.style=e),this._numberFormatterFocused=new d(this.languageResolver.language,r);try{this._numberFormatter=new d(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}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){const e=this.step&&this.step!=Math.floor(this.step)?this.step.toString().split(".")[1].length:0;this._valueFormatter=new d(this.languageResolver.language,{maximumFractionDigits:e,useGrouping:!1})}return this._valueFormatter}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 f(this.languageResolver.language,r);try{this._numberParser=new f(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 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 P(this);this.wasIndeterminate=!1;this.hasRecentlyReceivedPointerDown=!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;this.lastCommitedValue=t;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}setValue(e=this.value){this.value=e,!(typeof this.lastCommitedValue=="undefined"||this.lastCommitedValue===this.value)&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.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(v()&&this.inputElement.inputMode==="decimal"){const i=this.numberFormatter.formatToParts(1000.1),s=e.split("").find(u=>u===","||u==="."),r=(t=i.find(u=>u.type==="decimal"))==null?void 0:t.value;s&&r&&(e=e.replace(s,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(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=s=>{s.clientX>=t.x&&s.clientY>=t.y&&s.clientX<=t.x+t.width&&s.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):s.clientX>=i.x&&s.clientY>=i.y&&s.clientX<=i.x+i.width&&s.clientY<=i.y+i.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.managedInput=!1,this.setValue()}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)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=i.toString(),this.inputElement.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.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();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.setValue()},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(e){super.onBlur(e),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.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInputElementPointerdown(){this.hasRecentlyReceivedPointerDown=!0,this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.hasRecentlyReceivedPointerDown=!1})})}handleInput(e){var c;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,s=t.split("").map(d=>remapMultiByteCharacters[d]||d).join("");if(this.numberParser.isValidPartialNumber(s)){this.lastCommitedValue=(c=this.lastCommitedValue)!=null?c:this.value;const d=this.convertValueToNumber(s);!s&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(d)),this._trackingValue=s,this.inputElement.value=s,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const r=s.length,u=this._trackingValue.length,m=(i||r)-(r-u);this.inputElement.setSelectionRange(m,m)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,s=parseFloat(this.valueFormatter.format((e-i)%this.step));if(s===0||(Math.round(s/this.step)===1?e+=this.step-s:e-=s),typeof this.max!="undefined")for(;e>this.max;)e-=this.step;e=parseFloat(this.valueFormatter.format(e))}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:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberFormatterFocused=new p(this.languageResolver.language,s);try{this._numberFormatter=new p(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}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){const e=this.step&&this.step!=Math.floor(this.step)?this.step.toString().split(".")[1].length:0;this._valueFormatter=new p(this.languageResolver.language,{maximumFractionDigits:e,useGrouping:!1})}return this._valueFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberParserFocused=new f(this.languageResolver.language,s);try{this._numberParser=new f(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()}
@@ -25,3 +25,3 @@ ${this.hideStepper?F:h`
                           @focusout=${this.handleFocusout}
-                          ${P({start:["pointerdown",this.handlePointerdown],streamInside:[["pointermove","pointerenter","pointerleave","pointerover","pointerout"],this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
+                          ${E({start:["pointerdown",this.handlePointerdown],streamInside:[["pointermove","pointerenter","pointerleave","pointerover","pointerout"],this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
                       >
@@ -58,3 +58,3 @@ <sp-infield-button
                   `}
-        `}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}e.has("step")&&this.clearValueFormatterCache(),super.update(e)}willUpdate(e){this.multiline=!1,e.has(E)&&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;v()?i?t="text":s&&(t="decimal"):V()&&(i?t="numeric":s&&(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);
+        `}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}e.has("step")&&this.clearValueFormatterCache(),super.update(e)}willUpdate(e){this.multiline=!1,e.has(_)&&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:s}=this.numberFormatter.resolvedOptions(),r=s>0;v()?i?t="text":r&&(t="decimal"):V()&&(i?t="numeric":r&&(t="decimal")),this.inputElement.inputMode=t}e.has("focused")&&this.focused&&!this.hasRecentlyReceivedPointerDown&&this.formatOptions.unit&&this.setSelectionRange(0,this.displayValue.length)}}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

@@ -7,3 +7,2 @@ "use strict";
   expect,
-  fixture,
   nextFrame,
@@ -38,3 +37,7 @@ oneEvent
 import { sendMouse } from "../../../test/plugins/browser.js";
-import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import {
+  fixture,
+  testForLitDevWarnings
+} from "../../../test/testing-helpers.js";
+import { isMac } from "@spectrum-web-components/shared/src/platform.js";
 describe("NumberField", () => {
@@ -843,2 +846,83 @@ before(async () => {
     });
+    it("does not select all on click based `focus`", async function() {
+      this.retries(0);
+      const modifier = isMac() ? "Meta" : "Control";
+      const el = await getElFrom(units({ value: 17 }));
+      expect(el.value).to.equal(17);
+      const rect = el.focusElement.getBoundingClientRect();
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              rect.left + rect.width / 8,
+              rect.top + rect.height / 2
+            ]
+          }
+        ]
+      });
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      await sendKeys({
+        press: `${modifier}+KeyC`
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: `${modifier}+KeyV`
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.value, "copy/paste changed the value").to.equal(17);
+    });
+    it("selects all on `Tab` based `focus`", async function() {
+      this.retries(0);
+      const modifier = isMac() ? "Meta" : "Control";
+      const el = await getElFrom(units({ value: 17 }));
+      const input = document.createElement("input");
+      el.insertAdjacentElement("beforebegin", input);
+      input.focus();
+      await sendKeys({
+        press: "Tab"
+      });
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      await sendKeys({
+        press: `${modifier}+KeyC`
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: `${modifier}+KeyV`
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.value, "copy/paste did not change the value").to.equal(
+        1717
+      );
+    });
     it("manages units not supported by the browser", async () => {
@@ -845,0 +929,0 @@ const el = await getElFrom(pixels({ value: 17 }));

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

569166

increased by1.88%

Lines of code

4966

increased by2.46%

Dependency changes

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

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

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

• Updated@spectrum-web-components/infield-button@^0.42.5

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

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

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