@spectrum-web-components/action-button
Advanced tools
Comparing version 0.35.1-rc.34 to 0.35.1-rc.41
{ | ||
"name": "@spectrum-web-components/action-button", | ||
"version": "0.35.1-rc.34+2cc53a49a", | ||
"version": "0.35.1-rc.41+6ac4e82f0", | ||
"publishConfig": { | ||
@@ -60,7 +60,7 @@ "access": "public" | ||
"dependencies": { | ||
"@spectrum-web-components/base": "^0.35.1-rc.34+2cc53a49a", | ||
"@spectrum-web-components/button": "^0.35.1-rc.34+2cc53a49a", | ||
"@spectrum-web-components/icon": "^0.35.1-rc.34+2cc53a49a", | ||
"@spectrum-web-components/icons-ui": "^0.35.1-rc.34+2cc53a49a", | ||
"@spectrum-web-components/shared": "^0.35.1-rc.34+2cc53a49a" | ||
"@spectrum-web-components/base": "^0.35.1-rc.41+6ac4e82f0", | ||
"@spectrum-web-components/button": "^0.35.1-rc.41+6ac4e82f0", | ||
"@spectrum-web-components/icon": "^0.35.1-rc.41+6ac4e82f0", | ||
"@spectrum-web-components/icons-ui": "^0.35.1-rc.41+6ac4e82f0", | ||
"@spectrum-web-components/shared": "^0.35.1-rc.41+6ac4e82f0" | ||
}, | ||
@@ -76,3 +76,3 @@ "devDependencies": { | ||
], | ||
"gitHead": "2cc53a49a9491e4d86ed3c39ab430fda8a7a5b96" | ||
"gitHead": "6ac4e82f0a4a68eb50b5dd4b96a562060162ac6f" | ||
} |
@@ -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 |
@@ -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 @@ } |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
408004
71
3041
Updated@spectrum-web-components/base@^0.35.1-rc.41+6ac4e82f0
Updated@spectrum-web-components/button@^0.35.1-rc.41+6ac4e82f0
Updated@spectrum-web-components/icon@^0.35.1-rc.41+6ac4e82f0
Updated@spectrum-web-components/icons-ui@^0.35.1-rc.41+6ac4e82f0
Updated@spectrum-web-components/shared@^0.35.1-rc.41+6ac4e82f0