@spectrum-web-components/action-button - npm Package Compare versions

Comparing version 0.36.0 to 0.37.0

custom-elements.json

@@ -169,3 +169,3 @@ {
               "kind": "method",
-              "name": "onPointerdown",
+              "name": "handlePointerdownHoldAffordance",
               "privacy": "private",
@@ -188,3 +188,3 @@ "return": {
               "kind": "method",
-              "name": "onPointerup",
+              "name": "handlePointerupHoldAffordance",
               "privacy": "private",
@@ -191,0 +191,0 @@ "return": {

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.36.0",
+    "version": "0.37.0",
     "publishConfig": {
@@ -60,7 +60,7 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.36.0",
-        "@spectrum-web-components/button": "^0.36.0",
-        "@spectrum-web-components/icon": "^0.36.0",
-        "@spectrum-web-components/icons-ui": "^0.36.0",
-        "@spectrum-web-components/shared": "^0.36.0"
+        "@spectrum-web-components/base": "^0.37.0",
+        "@spectrum-web-components/button": "^0.37.0",
+        "@spectrum-web-components/icon": "^0.37.0",
+        "@spectrum-web-components/icons-ui": "^0.37.0",
+        "@spectrum-web-components/shared": "^0.37.0"
     },
@@ -76,3 +76,3 @@ "devDependencies": {
     ],
-    "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
+    "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
 }

src/ActionButton.d.ts

@@ -50,4 +50,4 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     private onClick;
-    private onPointerdown;
-    private onPointerup;
+    private handlePointerdownHoldAffordance;
+    private handlePointerupHoldAffordance;
     /**
@@ -54,0 +54,0 @@ * @private

src/ActionButton.dev.js

@@ -58,3 +58,2 @@ "use strict";
     this.addEventListener("click", this.onClick);
-    this.addEventListener("pointerdown", this.onPointerdown);
   }
@@ -85,7 +84,10 @@ static get styles() {
   }
-  onPointerdown(event) {
+  handlePointerdownHoldAffordance(event) {
     if (event.button !== 0)
       return;
-    this.addEventListener("pointerup", this.onPointerup);
-    this.addEventListener("pointercancel", this.onPointerup);
+    this.addEventListener("pointerup", this.handlePointerupHoldAffordance);
+    this.addEventListener(
+      "pointercancel",
+      this.handlePointerupHoldAffordance
+    );
     LONGPRESS_TIMEOUT = setTimeout(() => {
@@ -103,6 +105,12 @@ this.dispatchEvent(
   }
-  onPointerup() {
+  handlePointerupHoldAffordance() {
     clearTimeout(LONGPRESS_TIMEOUT);
-    this.removeEventListener("pointerup", this.onPointerup);
-    this.removeEventListener("pointercancel", this.onPointerup);
+    this.removeEventListener(
+      "pointerup",
+      this.handlePointerupHoldAffordance
+    );
+    this.removeEventListener(
+      "pointercancel",
+      this.handlePointerupHoldAffordance
+    );
   }
@@ -187,2 +195,16 @@ /**
     }
+    if (changes.has("holdAffordance")) {
+      if (this.holdAffordance) {
+        this.addEventListener(
+          "pointerdown",
+          this.handlePointerdownHoldAffordance
+        );
+      } else {
+        this.removeEventListener(
+          "pointerdown",
+          this.handlePointerdownHoldAffordance
+        );
+        this.handlePointerupHoldAffordance();
+      }
+    }
   }
@@ -189,0 +211,0 @@ }

src/ActionButton.js

@@ -1,6 +0,6 @@
-"use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=(n,o,e,t)=>{for(var r=t>1?void 0:t?d(o,e):o,a=n.length-1,l;a>=0;a--)(l=n[a])&&(r=(t?l(o,e,r):l(r))||r);return t&&r&&u(o,e,r),r};import{html as c,SizedMixin as h}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import b from"@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";const m={xs:"spectrum-UIIcon-CornerTriangle75",s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"};export const LONGPRESS_DURATION=300;let p;export class ActionButton extends h(f,{validSizes:["xs","s","m","l","xl"]}){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick),this.addEventListener("pointerdown",this.onPointerdown)}static get styles(){return[...super.styles,v,b]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}onPointerdown(e){e.button===0&&(this.addEventListener("pointerup",this.onPointerup),this.addEventListener("pointercancel",this.onPointerup),p=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},LONGPRESS_DURATION))}onPointerup(){clearTimeout(p),this.removeEventListener("pointerup",this.onPointerup),this.removeEventListener("pointercancel",this.onPointerup)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.preventDefault(),t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(c`
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(a,o,e,t)=>{for(var r=t>1?void 0:t?u(o,e):o,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(o,e,r):l(r))||r);return t&&r&&p(o,e,r),r};import{html as c,SizedMixin as h}from"@spectrum-web-components/base";import{property as s}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import b from"@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";const m={xs:"spectrum-UIIcon-CornerTriangle75",s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"};export const LONGPRESS_DURATION=300;let d;export class ActionButton extends h(f,{validSizes:["xs","s","m","l","xl"]}){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick)}static get styles(){return[...super.styles,v,b]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}handlePointerdownHoldAffordance(e){e.button===0&&(this.addEventListener("pointerup",this.handlePointerupHoldAffordance),this.addEventListener("pointercancel",this.handlePointerupHoldAffordance),d=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},LONGPRESS_DURATION))}handlePointerupHoldAffordance(){clearTimeout(d),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.preventDefault(),t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(c`
                 <sp-icon-corner-triangle300
                     class="hold-affordance ${m[this.size]}"
                 ></sp-icon-corner-triangle300>
-            `),e}updated(e){super.updated(e);const t=this.role==="button",r=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),e.has("variant")&&(this.variant||typeof e.get("variant"))&&(this.static=this.variant)}}s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),s([i({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),s([i({reflect:!0})],ActionButton.prototype,"role",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),s([i({reflect:!0})],ActionButton.prototype,"static",2),s([i({reflect:!0})],ActionButton.prototype,"variant",2),s([i({type:String})],ActionButton.prototype,"value",1);
+            `),e}updated(e){super.updated(e);const t=this.role==="button",r=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),e.has("variant")&&(this.variant||typeof e.get("variant"))&&(this.static=this.variant),e.has("holdAffordance")&&(this.holdAffordance?this.addEventListener("pointerdown",this.handlePointerdownHoldAffordance):(this.removeEventListener("pointerdown",this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}}i([s({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),i([s({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),i([s({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),i([s({reflect:!0})],ActionButton.prototype,"role",2),i([s({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),i([s({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),i([s({reflect:!0})],ActionButton.prototype,"static",2),i([s({reflect:!0})],ActionButton.prototype,"variant",2),i([s({type:String})],ActionButton.prototype,"value",1);
 //# sourceMappingURL=ActionButton.js.map

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

418057

increased by0.58%

Lines of code

3402

increased by0.68%

Dependency changes

• + Added@spectrum-web-components/base@0.37.0(transitive)

• + Added@spectrum-web-components/button@0.37.0(transitive)

• + Added@spectrum-web-components/clear-button@0.37.0(transitive)

• + Added@spectrum-web-components/close-button@0.37.0(transitive)

• + Added@spectrum-web-components/icon@0.37.0(transitive)

• + Added@spectrum-web-components/icons-ui@0.37.0(transitive)

• + Added@spectrum-web-components/iconset@0.37.0(transitive)

• + Added@spectrum-web-components/shared@0.37.0(transitive)

• - Removed@spectrum-web-components/base@0.36.0(transitive)

• - Removed@spectrum-web-components/button@0.36.0(transitive)

• - Removed@spectrum-web-components/clear-button@0.36.0(transitive)

• - Removed@spectrum-web-components/close-button@0.36.0(transitive)

• - Removed@spectrum-web-components/icon@0.36.0(transitive)

• - Removed@spectrum-web-components/icons-ui@0.36.0(transitive)

• - Removed@spectrum-web-components/iconset@0.36.0(transitive)

• - Removed@spectrum-web-components/shared@0.36.0(transitive)

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

• Updated@spectrum-web-components/button@^0.37.0

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

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

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