@fluid-topics/ft-ripple 0.3.54 → 0.3.56

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.
@@ -30,6 +30,7 @@ export declare class FtRipple extends FtLitElement implements FtRippleProperties
30
30
  protected updated(props: PropertyValues): void;
31
31
  private endRipple;
32
32
  private setRippleSize;
33
+ private setupDebouncer;
33
34
  connectedCallback(): void;
34
35
  setupFor(target: HTMLElement): void;
35
36
  private moveRipple;
@@ -38,6 +38,7 @@ export class FtRipple extends FtLitElement {
38
38
  this.rippling = false;
39
39
  }
40
40
  };
41
+ this.setupDebouncer = new Debouncer(10);
41
42
  this.moveRipple = (e) => {
42
43
  var _a, _b;
43
44
  let { x, y } = this.getCoordinates(e);
@@ -134,13 +135,15 @@ export class FtRipple extends FtLitElement {
134
135
  }
135
136
  }
136
137
  connectedCallback() {
137
- var _a;
138
138
  super.connectedCallback();
139
- const parent = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.host.parentElement;
140
- if (parent) {
141
- this.setupFor(parent);
142
- }
143
- this.setRippleSize();
139
+ this.setupDebouncer.run(() => {
140
+ var _a;
141
+ const parent = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.host.parentElement;
142
+ if (parent) {
143
+ this.setupFor(parent);
144
+ }
145
+ this.setRippleSize();
146
+ });
144
147
  }
145
148
  setupFor(target) {
146
149
  if (this.target === target) {
@@ -187,6 +190,7 @@ export class FtRipple extends FtLitElement {
187
190
  target.removeEventListener("focusin", this.startFocus);
188
191
  target.removeEventListener("focusout", this.endFocus);
189
192
  this.onDisconnect = undefined;
193
+ this.target = undefined;
190
194
  };
191
195
  }
192
196
  getCoordinates(e) {
@@ -87,7 +87,7 @@
87
87
  opacity: ${o.opacityContentOnSurfacePressed};
88
88
  transform: translate(-50%, -50%) scale(1);
89
89
  }
90
- `;var d=function(t,i,e,s){for(var r,p=arguments.length,o=p<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(p<3?r(o):p>3?r(i,e,o):r(i,e))||o);return p>3&&o&&Object.defineProperty(i,e,o),o};class c 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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),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.moveRipple=t=>{var i,e;let{x:s,y:r}=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!=s?s-p.x:p.width/2),this.originY=Math.round(null!=r?r-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.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`
90
+ `;var d=function(t,i,e,s){for(var r,p=arguments.length,o=p<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(p<3?r(o):p>3?r(i,e,o):r(i,e))||o);return p>3&&o&&Object.defineProperty(i,e,o),o};class c 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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),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:s,y:r}=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!=s?s-p.x:p.width/2),this.originY=Math.round(null!=r?r-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.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`
91
91
  <style>
92
92
  .ft-ripple .ft-ripple--effect,
93
93
  .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
@@ -104,4 +104,4 @@
104
104
  <div class="ft-ripple--background"></div>
105
105
  <div class="ft-ripple--effect"></div>
106
106
  </div>
107
- `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var i,e;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){var t;super.connectedCallback();const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}setupFor(t){if(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"),s=i("touchend","touchcancel"),r=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",s),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",r),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",s),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",r),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0}}getCoordinates(t){const i=t,e=t;let s,r;return null!=i.x?({x:s,y:r}=i):null!=e.touches&&(s=e.touches[0].clientX,r=e.touches[0].clientY),{x:s,y:r}}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.resizeObserver.disconnect(),this.endRipple()}}c.elementDefinitions={},c.styles=a,d([s.property({type:Boolean})],c.prototype,"primary",void 0),d([s.property({type:Boolean})],c.prototype,"secondary",void 0),d([s.property({type:Boolean})],c.prototype,"unbounded",void 0),d([s.property({type:Boolean})],c.prototype,"activated",void 0),d([s.property({type:Boolean})],c.prototype,"selected",void 0),d([s.property({type:Boolean})],c.prototype,"disabled",void 0),d([s.state()],c.prototype,"hovered",void 0),d([s.state()],c.prototype,"focused",void 0),d([s.state()],c.prototype,"pressed",void 0),d([s.state()],c.prototype,"rippling",void 0),d([s.state()],c.prototype,"rippleSize",void 0),d([s.state()],c.prototype,"originX",void 0),d([s.state()],c.prototype,"originY",void 0),d([s.query(".ft-ripple")],c.prototype,"ripple",void 0),d([s.query(".ft-ripple--effect")],c.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(c),t.FtRipple=c,t.FtRippleCssVariables=o,t.FtRipplePrimaryCssVariables=n,t.FtRippleSecondaryCssVariables=h,t.styles=a,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
107
+ `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var i,e;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>{var t;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}))}setupFor(t){if(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"),s=i("touchend","touchcancel"),r=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",s),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",r),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",s),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",r),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 s,r;return null!=i.x?({x:s,y:r}=i):null!=e.touches&&(s=e.touches[0].clientX,r=e.touches[0].clientY),{x:s,y:r}}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.resizeObserver.disconnect(),this.endRipple()}}c.elementDefinitions={},c.styles=a,d([s.property({type:Boolean})],c.prototype,"primary",void 0),d([s.property({type:Boolean})],c.prototype,"secondary",void 0),d([s.property({type:Boolean})],c.prototype,"unbounded",void 0),d([s.property({type:Boolean})],c.prototype,"activated",void 0),d([s.property({type:Boolean})],c.prototype,"selected",void 0),d([s.property({type:Boolean})],c.prototype,"disabled",void 0),d([s.state()],c.prototype,"hovered",void 0),d([s.state()],c.prototype,"focused",void 0),d([s.state()],c.prototype,"pressed",void 0),d([s.state()],c.prototype,"rippling",void 0),d([s.state()],c.prototype,"rippleSize",void 0),d([s.state()],c.prototype,"originX",void 0),d([s.state()],c.prototype,"originY",void 0),d([s.query(".ft-ripple")],c.prototype,"ripple",void 0),d([s.query(".ft-ripple--effect")],c.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(c),t.FtRipple=c,t.FtRippleCssVariables=o,t.FtRipplePrimaryCssVariables=n,t.FtRippleSecondaryCssVariables=h,t.styles=a,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
@@ -94,6 +94,17 @@ var nt,lt;class at extends C{constructor(){super(...arguments),this.renderOption
94
94
  -webkit-hyphens: auto;
95
95
  hyphens: auto
96
96
  }
97
+ `,d`
98
+ .ft-safari-ellipsis-fix {
99
+ margin-right: 0;
100
+
101
+ }
102
+
103
+ .ft-safari-ellipsis-fix:after {
104
+ content: "\\0000a0";
105
+ display: inline-block;
106
+ width: 0;
107
+ }
97
108
  `,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(dt=null===(pt=window.safari)||void 0===pt?void 0:pt.pushNotification)||void 0===dt||dt.toString());
98
109
  /**
99
110
  * @license
@@ -194,7 +205,7 @@ const yt=1;class bt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,e)
194
205
  opacity: ${xt.opacityContentOnSurfacePressed};
195
206
  transform: translate(-50%, -50%) scale(1);
196
207
  }
197
- `;var Nt,Rt=function(t,i,e,s){for(var o,r=arguments.length,n=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(i,e,n):o(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Et extends vt{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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),this.debouncer=new i(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.moveRipple=t=>{var i,e;let{x:s,y:o}=this.getCoordinates(t),r=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!=s?s-r.x:r.width/2),this.originY=Math.round(null!=o?o-r.y:r.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.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 K`
208
+ `;var Nt,Rt=function(t,i,e,s){for(var o,r=arguments.length,n=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(i,e,n):o(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Et extends vt{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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),this.debouncer=new i(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(10),this.moveRipple=t=>{var i,e;let{x:s,y:o}=this.getCoordinates(t),r=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!=s?s-r.x:r.width/2),this.originY=Math.round(null!=o?o-r.y:r.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.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 K`
198
209
  <style>
199
210
  .ft-ripple .ft-ripple--effect,
200
211
  .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
@@ -211,4 +222,4 @@ const yt=1;class bt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,e)
211
222
  <div class="ft-ripple--background"></div>
212
223
  <div class="ft-ripple--effect"></div>
213
224
  </div>
214
- `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var i,e;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){var t;super.connectedCallback();const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}setupFor(t){if(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"),s=i("touchend","touchcancel"),o=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",s),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",o),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",s),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",o),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0}}getCoordinates(t){const i=t,e=t;let s,o;return null!=i.x?({x:s,y:o}=i):null!=e.touches&&(s=e.touches[0].clientX,o=e.touches[0].clientY),{x:s,y:o}}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.resizeObserver.disconnect(),this.endRipple()}}Et.elementDefinitions={},Et.styles=kt,Rt([s({type:Boolean})],Et.prototype,"primary",void 0),Rt([s({type:Boolean})],Et.prototype,"secondary",void 0),Rt([s({type:Boolean})],Et.prototype,"unbounded",void 0),Rt([s({type:Boolean})],Et.prototype,"activated",void 0),Rt([s({type:Boolean})],Et.prototype,"selected",void 0),Rt([s({type:Boolean})],Et.prototype,"disabled",void 0),Rt([o()],Et.prototype,"hovered",void 0),Rt([o()],Et.prototype,"focused",void 0),Rt([o()],Et.prototype,"pressed",void 0),Rt([o()],Et.prototype,"rippling",void 0),Rt([o()],Et.prototype,"rippleSize",void 0),Rt([o()],Et.prototype,"originX",void 0),Rt([o()],Et.prototype,"originY",void 0),Rt([r(".ft-ripple")],Et.prototype,"ripple",void 0),Rt([r(".ft-ripple--effect")],Et.prototype,"rippleEffect",void 0),(Nt="ft-ripple",t=>{window.customElements.get(Nt)||window.customElements.define(Nt,t)})(Et),t.FtRipple=Et,t.FtRippleCssVariables=xt,t.FtRipplePrimaryCssVariables=Ot,t.FtRippleSecondaryCssVariables=Ct,t.styles=kt,Object.defineProperty(t,"i",{value:!0})}({});
225
+ `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var i,e;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>{var t;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}))}setupFor(t){if(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"),s=i("touchend","touchcancel"),o=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",s),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",o),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",s),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",o),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 s,o;return null!=i.x?({x:s,y:o}=i):null!=e.touches&&(s=e.touches[0].clientX,o=e.touches[0].clientY),{x:s,y:o}}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.resizeObserver.disconnect(),this.endRipple()}}Et.elementDefinitions={},Et.styles=kt,Rt([s({type:Boolean})],Et.prototype,"primary",void 0),Rt([s({type:Boolean})],Et.prototype,"secondary",void 0),Rt([s({type:Boolean})],Et.prototype,"unbounded",void 0),Rt([s({type:Boolean})],Et.prototype,"activated",void 0),Rt([s({type:Boolean})],Et.prototype,"selected",void 0),Rt([s({type:Boolean})],Et.prototype,"disabled",void 0),Rt([o()],Et.prototype,"hovered",void 0),Rt([o()],Et.prototype,"focused",void 0),Rt([o()],Et.prototype,"pressed",void 0),Rt([o()],Et.prototype,"rippling",void 0),Rt([o()],Et.prototype,"rippleSize",void 0),Rt([o()],Et.prototype,"originX",void 0),Rt([o()],Et.prototype,"originY",void 0),Rt([r(".ft-ripple")],Et.prototype,"ripple",void 0),Rt([r(".ft-ripple--effect")],Et.prototype,"rippleEffect",void 0),(Nt="ft-ripple",t=>{window.customElements.get(Nt)||window.customElements.define(Nt,t)})(Et),t.FtRipple=Et,t.FtRippleCssVariables=xt,t.FtRipplePrimaryCssVariables=Ot,t.FtRippleSecondaryCssVariables=Ct,t.styles=kt,Object.defineProperty(t,"i",{value:!0})}({});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-ripple",
3
- "version": "0.3.54",
3
+ "version": "0.3.56",
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": "0.3.54",
22
+ "@fluid-topics/ft-wc-utils": "0.3.56",
23
23
  "lit": "2.2.8"
24
24
  },
25
- "gitHead": "a44cb80b87fa9a6a35c255f4e37a75af484b443a"
25
+ "gitHead": "e86edee2b2660d806320bacca5c5156bb94ca2d6"
26
26
  }