@fluid-topics/ft-ripple 1.1.4 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -146,30 +146,31 @@ class FtRipple extends FtLitElement {
146
146
  startPress("keyup")(e);
147
147
  }
148
148
  };
149
- target.addEventListener("mouseover", this.startHover);
150
- target.addEventListener("mousemove", this.moveRipple);
151
- target.addEventListener("mouseleave", this.endHover);
152
- target.addEventListener("mousedown", mouseDownHandler);
153
- target.addEventListener("touchstart", touchStartHandler);
154
- target.addEventListener("touchmove", this.moveRipple);
155
- target.addEventListener("keydown", keyDownHandler);
156
- target.addEventListener("focus", this.startFocus);
157
- target.addEventListener("blur", this.endFocus);
158
- target.addEventListener("focusin", this.startFocus);
159
- target.addEventListener("focusout", this.endFocus);
149
+ const options = { passive: true };
150
+ target.addEventListener("mouseover", this.startHover, options);
151
+ target.addEventListener("mousemove", this.moveRipple, options);
152
+ target.addEventListener("mouseleave", this.endHover, options);
153
+ target.addEventListener("mousedown", mouseDownHandler, options);
154
+ target.addEventListener("touchstart", touchStartHandler, options);
155
+ target.addEventListener("touchmove", this.moveRipple, options);
156
+ target.addEventListener("keydown", keyDownHandler, options);
157
+ target.addEventListener("focus", this.startFocus, options);
158
+ target.addEventListener("blur", this.endFocus, options);
159
+ target.addEventListener("focusin", this.startFocus, options);
160
+ target.addEventListener("focusout", this.endFocus, options);
160
161
  this.onDisconnect = () => {
161
162
  target.removeAttribute("data-is-ft-ripple-target");
162
- target.removeEventListener("mouseover", this.startHover);
163
- target.removeEventListener("mousemove", this.moveRipple);
164
- target.removeEventListener("mouseleave", this.endHover);
165
- target.removeEventListener("mousedown", mouseDownHandler);
166
- target.removeEventListener("touchstart", touchStartHandler);
167
- target.removeEventListener("touchmove", this.moveRipple);
168
- target.removeEventListener("keydown", keyDownHandler);
169
- target.removeEventListener("focus", this.startFocus);
170
- target.removeEventListener("blur", this.endFocus);
171
- target.removeEventListener("focusin", this.startFocus);
172
- target.removeEventListener("focusout", this.endFocus);
163
+ target.removeEventListener("mouseover", this.startHover, options);
164
+ target.removeEventListener("mousemove", this.moveRipple, options);
165
+ target.removeEventListener("mouseleave", this.endHover, options);
166
+ target.removeEventListener("mousedown", mouseDownHandler, options);
167
+ target.removeEventListener("touchstart", touchStartHandler, options);
168
+ target.removeEventListener("touchmove", this.moveRipple, options);
169
+ target.removeEventListener("keydown", keyDownHandler, options);
170
+ target.removeEventListener("focus", this.startFocus, options);
171
+ target.removeEventListener("blur", this.endFocus, options);
172
+ target.removeEventListener("focusin", this.startFocus, options);
173
+ target.removeEventListener("focusout", this.endFocus, options);
173
174
  this.onDisconnect = undefined;
174
175
  this.target = undefined;
175
176
  };
@@ -1,4 +1,4 @@
1
- !function(t,i,e,r,p){const s=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorContent),o={color:s,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",s),opacityContentOnSurfacePressed:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),borderRadius:i.FtCssVariableFactory.create("--ft-ripple-border-radius","","SIZE","0px")},l=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorPrimary),n={color:l,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",l)},f=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorSecondary),a={color:f,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",f)},h=e.css`
1
+ !function(t,i,e,r,s){const p=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorContent),o={color:p,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",p),opacityContentOnSurfacePressed:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:i.FtCssVariableFactory.external(i.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),borderRadius:i.FtCssVariableFactory.create("--ft-ripple-border-radius","","SIZE","0px")},l=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorPrimary),n={color:l,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",l)},f=i.FtCssVariableFactory.extend("--ft-ripple-color","",i.designSystemVariables.colorSecondary),a={color:f,backgroundColor:i.FtCssVariableFactory.extend("--ft-ripple-background-color","",f)},h=e.css`
2
2
  :host {
3
3
  display: contents;
4
4
  }
@@ -110,15 +110,15 @@
110
110
  opacity: ${o.opacityContentOnSurfacePressed};
111
111
  transform: translate(-50%, -50%) scale(1);
112
112
  }
113
- `;var d=function(t,i,e,r){for(var p,s=arguments.length,o=s<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,e):r,l=t.length-1;l>=0;l--)(p=t[l])&&(o=(s<3?p(o):s>3?p(i,e,o):p(i,e))||o);return s>3&&o&&Object.defineProperty(i,e,o),o};class u extends i.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.originX=0,this.originY=0,this.debouncer=new i.Debouncer(1e3),this.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed,this.debouncer.run((()=>this.rippling=!1)))},this.onTransitionEnd=t=>{"transform"===t.propertyName&&(this.rippling=!1)},this.setupDebouncer=new i.Debouncer(10),this.moveRipple=t=>{var i,e;let{x:r,y:p}=this.getCoordinates(t),s=null!==(e=null===(i=this.ripple)||void 0===i?void 0:i.getBoundingClientRect())&&void 0!==e?e:{x:0,y:0,width:0,height:0};this.originX=Math.round(null!=r?r-s.x:s.width/2),this.originY=Math.round(null!=p?p-s.y:s.height/2)},this.startPress=t=>{this.moveRipple(t),this.pressed=!this.isIgnored(t)},this.endPress=()=>{this.pressed=!1},this.startHover=t=>{this.hovered=!this.isIgnored(t)},this.endHover=()=>{this.hovered=!1},this.startFocus=t=>{this.focused=this.isFocusVisible(null==t?void 0:t.target)&&!this.isIgnored(t)},this.endFocus=()=>{this.focused=!1}}render(){let t={"ft-ripple":!0,"ft-ripple--primary":this.primary,"ft-ripple--secondary":this.secondary,"ft-ripple--unbounded":this.unbounded,"ft-ripple--selected":(this.selected||this.activated)&&!this.disabled,"ft-ripple--pressed":(this.pressed||this.rippling)&&!this.disabled,"ft-ripple--hovered":this.hovered&&!this.disabled,"ft-ripple--focused":this.focused&&!this.disabled};return e.html`
113
+ `;var d=function(t,i,e,r){for(var s,p=arguments.length,o=p<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,e):r,l=t.length-1;l>=0;l--)(s=t[l])&&(o=(p<3?s(o):p>3?s(i,e,o):s(i,e))||o);return p>3&&o&&Object.defineProperty(i,e,o),o};class u extends i.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.originX=0,this.originY=0,this.debouncer=new i.Debouncer(1e3),this.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed,this.debouncer.run((()=>this.rippling=!1)))},this.onTransitionEnd=t=>{"transform"===t.propertyName&&(this.rippling=!1)},this.setupDebouncer=new i.Debouncer(10),this.moveRipple=t=>{var i,e;let{x:r,y:s}=this.getCoordinates(t),p=null!==(e=null===(i=this.ripple)||void 0===i?void 0:i.getBoundingClientRect())&&void 0!==e?e:{x:0,y:0,width:0,height:0};this.originX=Math.round(null!=r?r-p.x:p.width/2),this.originY=Math.round(null!=s?s-p.y:p.height/2)},this.startPress=t=>{this.moveRipple(t),this.pressed=!this.isIgnored(t)},this.endPress=()=>{this.pressed=!1},this.startHover=t=>{this.hovered=!this.isIgnored(t)},this.endHover=()=>{this.hovered=!1},this.startFocus=t=>{this.focused=this.isFocusVisible(null==t?void 0:t.target)&&!this.isIgnored(t)},this.endFocus=()=>{this.focused=!1}}render(){let t={"ft-ripple":!0,"ft-ripple--primary":this.primary,"ft-ripple--secondary":this.secondary,"ft-ripple--unbounded":this.unbounded,"ft-ripple--selected":(this.selected||this.activated)&&!this.disabled,"ft-ripple--pressed":(this.pressed||this.rippling)&&!this.disabled,"ft-ripple--hovered":this.hovered&&!this.disabled,"ft-ripple--focused":this.focused&&!this.disabled};return e.html`
114
114
  <style>
115
115
  .ft-ripple .ft-ripple--effect {
116
116
  left: ${this.originX}px;
117
117
  top: ${this.originY}px;
118
118
  }
119
119
  </style>
120
- <div class="${p.classMap(t)}">
120
+ <div class="${s.classMap(t)}">
121
121
  <div class="ft-ripple--background"></div>
122
122
  <div class="ft-ripple--effect"></div>
123
123
  </div>
124
- `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var i,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(i=this.target)||void 0===i||i.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,i;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(i=this.target)&&void 0!==i?i:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const i=(...t)=>i=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(i)},e=i("mouseup","contextmenu"),r=i("touchend","touchcancel"),p=t=>{["Enter"," "].includes(t.key)&&i("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",e),t.addEventListener("touchstart",r),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",p),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",e),t.removeEventListener("touchstart",r),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",p),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const i=t,e=t;let r,p;return null!=i.x?({x:r,y:p}=i):null!=e.touches&&(r=e.touches[0].clientX,p=e.touches[0].clientY),{x:r,y:p}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let i of t.composedPath()){if(i===this.target)break;if("hasAttribute"in i&&i.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}u.elementDefinitions={},u.styles=h,d([r.property({type:Boolean})],u.prototype,"primary",void 0),d([r.property({type:Boolean})],u.prototype,"secondary",void 0),d([r.property({type:Boolean})],u.prototype,"unbounded",void 0),d([r.property({type:Boolean})],u.prototype,"activated",void 0),d([r.property({type:Boolean})],u.prototype,"selected",void 0),d([r.property({type:Boolean})],u.prototype,"disabled",void 0),d([r.state()],u.prototype,"hovered",void 0),d([r.state()],u.prototype,"focused",void 0),d([r.state()],u.prototype,"pressed",void 0),d([r.state()],u.prototype,"rippling",void 0),d([r.state()],u.prototype,"originX",void 0),d([r.state()],u.prototype,"originY",void 0),d([r.query(".ft-ripple")],u.prototype,"ripple",void 0),d([r.query(".ft-ripple--effect")],u.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(u),t.FtRipple=u,t.FtRippleCssVariables=o,t.FtRipplePrimaryCssVariables=n,t.FtRippleSecondaryCssVariables=a,t.styles=h}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
124
+ `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var i,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(i=this.target)||void 0===i||i.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,i;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(i=this.target)&&void 0!==i?i:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const i=(...t)=>i=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(i)},e=i("mouseup","contextmenu"),r=i("touchend","touchcancel"),s=t=>{["Enter"," "].includes(t.key)&&i("keyup")(t)},p={passive:!0};t.addEventListener("mouseover",this.startHover,p),t.addEventListener("mousemove",this.moveRipple,p),t.addEventListener("mouseleave",this.endHover,p),t.addEventListener("mousedown",e,p),t.addEventListener("touchstart",r,p),t.addEventListener("touchmove",this.moveRipple,p),t.addEventListener("keydown",s,p),t.addEventListener("focus",this.startFocus,p),t.addEventListener("blur",this.endFocus,p),t.addEventListener("focusin",this.startFocus,p),t.addEventListener("focusout",this.endFocus,p),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover,p),t.removeEventListener("mousemove",this.moveRipple,p),t.removeEventListener("mouseleave",this.endHover,p),t.removeEventListener("mousedown",e,p),t.removeEventListener("touchstart",r,p),t.removeEventListener("touchmove",this.moveRipple,p),t.removeEventListener("keydown",s,p),t.removeEventListener("focus",this.startFocus,p),t.removeEventListener("blur",this.endFocus,p),t.removeEventListener("focusin",this.startFocus,p),t.removeEventListener("focusout",this.endFocus,p),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const i=t,e=t;let r,s;return null!=i.x?({x:r,y:s}=i):null!=e.touches&&(r=e.touches[0].clientX,s=e.touches[0].clientY),{x:r,y:s}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let i of t.composedPath()){if(i===this.target)break;if("hasAttribute"in i&&i.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}u.elementDefinitions={},u.styles=h,d([r.property({type:Boolean})],u.prototype,"primary",void 0),d([r.property({type:Boolean})],u.prototype,"secondary",void 0),d([r.property({type:Boolean})],u.prototype,"unbounded",void 0),d([r.property({type:Boolean})],u.prototype,"activated",void 0),d([r.property({type:Boolean})],u.prototype,"selected",void 0),d([r.property({type:Boolean})],u.prototype,"disabled",void 0),d([r.state()],u.prototype,"hovered",void 0),d([r.state()],u.prototype,"focused",void 0),d([r.state()],u.prototype,"pressed",void 0),d([r.state()],u.prototype,"rippling",void 0),d([r.state()],u.prototype,"originX",void 0),d([r.state()],u.prototype,"originY",void 0),d([r.query(".ft-ripple")],u.prototype,"ripple",void 0),d([r.query(".ft-ripple--effect")],u.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(u),t.FtRipple=u,t.FtRippleCssVariables=o,t.FtRipplePrimaryCssVariables=n,t.FtRippleSecondaryCssVariables=a,t.styles=h}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
@@ -247,4 +247,4 @@ const Ko=1;class Zo{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,o,e)
247
247
  <div class="ft-ripple--background"></div>
248
248
  <div class="ft-ripple--effect"></div>
249
249
  </div>
250
- `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var o,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(o=this.target)||void 0===o||o.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,o;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(o=this.target)&&void 0!==o?o:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const o=(...t)=>o=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(o)},e=o("mouseup","contextmenu"),r=o("touchend","touchcancel"),i=t=>{["Enter"," "].includes(t.key)&&o("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",e),t.addEventListener("touchstart",r),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",i),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",e),t.removeEventListener("touchstart",r),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",i),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const o=t,e=t;let r,i;return null!=o.x?({x:r,y:i}=o):null!=e.touches&&(r=e.touches[0].clientX,i=e.touches[0].clientY),{x:r,y:i}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let o of t.composedPath()){if(o===this.target)break;if("hasAttribute"in o&&o.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}Go.elementDefinitions={},Go.styles=zo,Ho([w({type:Boolean})],Go.prototype,"primary",void 0),Ho([w({type:Boolean})],Go.prototype,"secondary",void 0),Ho([w({type:Boolean})],Go.prototype,"unbounded",void 0),Ho([w({type:Boolean})],Go.prototype,"activated",void 0),Ho([w({type:Boolean})],Go.prototype,"selected",void 0),Ho([w({type:Boolean})],Go.prototype,"disabled",void 0),Ho([x()],Go.prototype,"hovered",void 0),Ho([x()],Go.prototype,"focused",void 0),Ho([x()],Go.prototype,"pressed",void 0),Ho([x()],Go.prototype,"rippling",void 0),Ho([x()],Go.prototype,"originX",void 0),Ho([x()],Go.prototype,"originY",void 0),Ho([U(".ft-ripple")],Go.prototype,"ripple",void 0),Ho([U(".ft-ripple--effect")],Go.prototype,"rippleEffect",void 0),(_o="ft-ripple",t=>{window.customElements.get(_o)||window.customElements.define(_o,t)})(Go),t.FtRipple=Go,t.FtRippleCssVariables=Fo,t.FtRipplePrimaryCssVariables=Bo,t.FtRippleSecondaryCssVariables=Do,t.styles=zo}({});
250
+ `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var o,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(o=this.target)||void 0===o||o.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,o;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(o=this.target)&&void 0!==o?o:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const o=(...t)=>o=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(o)},e=o("mouseup","contextmenu"),r=o("touchend","touchcancel"),i=t=>{["Enter"," "].includes(t.key)&&o("keyup")(t)},a={passive:!0};t.addEventListener("mouseover",this.startHover,a),t.addEventListener("mousemove",this.moveRipple,a),t.addEventListener("mouseleave",this.endHover,a),t.addEventListener("mousedown",e,a),t.addEventListener("touchstart",r,a),t.addEventListener("touchmove",this.moveRipple,a),t.addEventListener("keydown",i,a),t.addEventListener("focus",this.startFocus,a),t.addEventListener("blur",this.endFocus,a),t.addEventListener("focusin",this.startFocus,a),t.addEventListener("focusout",this.endFocus,a),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover,a),t.removeEventListener("mousemove",this.moveRipple,a),t.removeEventListener("mouseleave",this.endHover,a),t.removeEventListener("mousedown",e,a),t.removeEventListener("touchstart",r,a),t.removeEventListener("touchmove",this.moveRipple,a),t.removeEventListener("keydown",i,a),t.removeEventListener("focus",this.startFocus,a),t.removeEventListener("blur",this.endFocus,a),t.removeEventListener("focusin",this.startFocus,a),t.removeEventListener("focusout",this.endFocus,a),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const o=t,e=t;let r,i;return null!=o.x?({x:r,y:i}=o):null!=e.touches&&(r=e.touches[0].clientX,i=e.touches[0].clientY),{x:r,y:i}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let o of t.composedPath()){if(o===this.target)break;if("hasAttribute"in o&&o.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}Go.elementDefinitions={},Go.styles=zo,Ho([w({type:Boolean})],Go.prototype,"primary",void 0),Ho([w({type:Boolean})],Go.prototype,"secondary",void 0),Ho([w({type:Boolean})],Go.prototype,"unbounded",void 0),Ho([w({type:Boolean})],Go.prototype,"activated",void 0),Ho([w({type:Boolean})],Go.prototype,"selected",void 0),Ho([w({type:Boolean})],Go.prototype,"disabled",void 0),Ho([x()],Go.prototype,"hovered",void 0),Ho([x()],Go.prototype,"focused",void 0),Ho([x()],Go.prototype,"pressed",void 0),Ho([x()],Go.prototype,"rippling",void 0),Ho([x()],Go.prototype,"originX",void 0),Ho([x()],Go.prototype,"originY",void 0),Ho([U(".ft-ripple")],Go.prototype,"ripple",void 0),Ho([U(".ft-ripple--effect")],Go.prototype,"rippleEffect",void 0),(_o="ft-ripple",t=>{window.customElements.get(_o)||window.customElements.define(_o,t)})(Go),t.FtRipple=Go,t.FtRippleCssVariables=Fo,t.FtRipplePrimaryCssVariables=Bo,t.FtRippleSecondaryCssVariables=Do,t.styles=zo}({});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-ripple",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "description": "A custom Fluid Topics ripple component",
5
5
  "keywords": [
6
6
  "Lit"
@@ -19,8 +19,8 @@
19
19
  "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
20
20
  },
21
21
  "dependencies": {
22
- "@fluid-topics/ft-wc-utils": "1.1.4",
22
+ "@fluid-topics/ft-wc-utils": "1.1.5",
23
23
  "lit": "3.1.0"
24
24
  },
25
- "gitHead": "b13ddd3359734158be660854f9ffe5fc5880c430"
25
+ "gitHead": "334ea71061e13d064f1f59b0f75d84c46d32d860"
26
26
  }