@fluid-topics/ft-ripple 1.2.48 → 1.2.50

package/build/ft-ripple.d.ts

@@ -30,6 +30,7 @@ export declare class FtRipple extends FtLitElement implements FtRippleProperties
     private setupDebouncer;
     connectedCallback(): void;
     private defaultSetup;
+    forceFocusUpdate(): void;
     setupFor(target: HTMLElement): void;
     private moveRipple;
     private getCoordinates;

package/build/ft-ripple.js

@@ -125,6 +125,15 @@ class FtRipple extends FtLitElement {
             this.setupFor((_b = this.target) !== null && _b !== void 0 ? _b : parent);
         }
     }
+    forceFocusUpdate() {
+        var _a;
+        if ((_a = this.target) === null || _a === void 0 ? void 0 : _a.matches(":focus-within")) {
+            this.startFocus();
+        }
+        else {
+            this.endFocus();
+        }
+    }
     setupFor(target) {
         this.setupDebouncer.cancel();
         if (this.target === target) {

package/build/ft-ripple.light.js

@@ -1,4 +1,4 @@
-"use strict";(()=>{var B=Object.create;var y=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);var Y=(l,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!X.call(l,r)&&r!==t&&y(l,r,{get:()=>e[r],enumerable:!(o=T(e,r))||o.enumerable});return l};var f=(l,e,t)=>(t=l!=null?B(M(l)):{},Y(e||!l||!l.__esModule?y(t,"default",{value:l,enumerable:!0}):t,l));var m=v((j,g)=>{g.exports=ftGlobals.wcUtils});var b=v((N,E)=>{E.exports=ftGlobals.lit});var k=v((q,C)=>{C.exports=ftGlobals.litDecorators});var L=v((U,x)=>{x.exports=ftGlobals.litClassMap});var V=f(m());var P=f(b()),a=f(k()),$=f(L()),h=f(m());var O=f(b()),s=f(m()),S=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorContent),u={color:S,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",S),opacityContentOnSurfacePressed:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),borderRadius:s.FtCssVariableFactory.create("--ft-ripple-border-radius","","SIZE","0px")},F=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorPrimary),w={color:F,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",F)},R=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorSecondary),D={color:R,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",R)},H=O.css`
+"use strict";(()=>{var B=Object.create;var y=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);var Y=(l,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!X.call(l,r)&&r!==t&&y(l,r,{get:()=>e[r],enumerable:!(o=T(e,r))||o.enumerable});return l};var f=(l,e,t)=>(t=l!=null?B(M(l)):{},Y(e||!l||!l.__esModule?y(t,"default",{value:l,enumerable:!0}):t,l));var m=v((j,g)=>{g.exports=ftGlobals.wcUtils});var b=v((N,E)=>{E.exports=ftGlobals.lit});var k=v((U,C)=>{C.exports=ftGlobals.litDecorators});var F=v((q,x)=>{x.exports=ftGlobals.litClassMap});var _=f(m());var P=f(b()),a=f(k()),$=f(F()),h=f(m());var O=f(b()),s=f(m()),L=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorContent),u={color:L,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",L),opacityContentOnSurfacePressed:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:s.FtCssVariableFactory.external(s.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),borderRadius:s.FtCssVariableFactory.create("--ft-ripple-border-radius","","SIZE","0px")},S=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorPrimary),w={color:S,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",S)},R=s.FtCssVariableFactory.extend("--ft-ripple-color","",s.designSystemVariables.colorSecondary),D={color:R,backgroundColor:s.FtCssVariableFactory.extend("--ft-ripple-background-color","",R)},H=O.css`
     :host {
         display: contents;
     }
@@ -121,4 +121,4 @@
                 <div class="ft-ripple--background"></div>
                 <div class="ft-ripple--effect"></div>
             </div>
-        `}contentAvailableCallback(e){super.contentAvailableCallback(e),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(e){var t,o;super.update(e),e.has("disabled")&&(this.disabled?(this.endRipple(),(t=this.target)===null||t===void 0||t.removeAttribute("data-is-ft-ripple-target")):(o=this.target)===null||o===void 0||o.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 e,t;let o=(e=this.shadowRoot)===null||e===void 0?void 0:e.host.parentElement;o&&this.setupFor((t=this.target)!==null&&t!==void 0?t:o)}setupFor(e){if(this.setupDebouncer.cancel(),this.target===e)return;this.onDisconnect&&this.onDisconnect(),this.target=e,e.setAttribute("data-is-ft-ripple-target","true");let t=(...c)=>_=>{c.forEach(A=>window.addEventListener(A,this.endPress,{once:!0})),this.startPress(_)},o=t("mouseup","contextmenu"),r=t("touchend","touchcancel"),p=c=>{["Enter"," "].includes(c.key)&&t("keyup")(c)},i={passive:!0};e.addEventListener("mouseover",this.startHover,i),e.addEventListener("mousemove",this.moveRipple,i),e.addEventListener("mouseleave",this.endHover,i),e.addEventListener("mousedown",o,i),e.addEventListener("touchstart",r,i),e.addEventListener("touchmove",this.moveRipple,i),e.addEventListener("keydown",p,i),e.addEventListener("focus",this.startFocus,i),e.addEventListener("blur",this.endFocus,i),e.addEventListener("focusin",this.startFocus,i),e.addEventListener("focusout",this.endFocus,i),this.onDisconnect=()=>{e.removeAttribute("data-is-ft-ripple-target"),e.removeEventListener("mouseover",this.startHover,i),e.removeEventListener("mousemove",this.moveRipple,i),e.removeEventListener("mouseleave",this.endHover,i),e.removeEventListener("mousedown",o,i),e.removeEventListener("touchstart",r,i),e.removeEventListener("touchmove",this.moveRipple,i),e.removeEventListener("keydown",p,i),e.removeEventListener("focus",this.startFocus,i),e.removeEventListener("blur",this.endFocus,i),e.removeEventListener("focusin",this.startFocus,i),e.removeEventListener("focusout",this.endFocus,i),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(e){let t=e,o=e,r,p;return t.x!=null?{x:r,y:p}=t:o.touches!=null&&(r=o.touches[0].clientX,p=o.touches[0].clientY),{x:r,y:p}}isFocusVisible(e){return e instanceof HTMLElement?e.matches(":focus-visible"):!0}isIgnored(e){if(this.disabled)return!0;if(e!=null)for(let t of e.composedPath()){if(t===this.target)break;if("hasAttribute"in t&&t.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};n.elementDefinitions={};n.styles=H;d([(0,a.property)({type:Boolean})],n.prototype,"primary",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"secondary",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"unbounded",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"activated",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"selected",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"disabled",void 0);d([(0,a.state)()],n.prototype,"hovered",void 0);d([(0,a.state)()],n.prototype,"focused",void 0);d([(0,a.state)()],n.prototype,"pressed",void 0);d([(0,a.state)()],n.prototype,"rippling",void 0);d([(0,a.state)()],n.prototype,"originX",void 0);d([(0,a.state)()],n.prototype,"originY",void 0);d([(0,a.query)(".ft-ripple")],n.prototype,"ripple",void 0);d([(0,a.query)(".ft-ripple--effect")],n.prototype,"rippleEffect",void 0);(0,V.customElement)("ft-ripple")(n);})();
+        `}contentAvailableCallback(e){super.contentAvailableCallback(e),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(e){var t,o;super.update(e),e.has("disabled")&&(this.disabled?(this.endRipple(),(t=this.target)===null||t===void 0||t.removeAttribute("data-is-ft-ripple-target")):(o=this.target)===null||o===void 0||o.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 e,t;let o=(e=this.shadowRoot)===null||e===void 0?void 0:e.host.parentElement;o&&this.setupFor((t=this.target)!==null&&t!==void 0?t:o)}forceFocusUpdate(){var e;!((e=this.target)===null||e===void 0)&&e.matches(":focus-within")?this.startFocus():this.endFocus()}setupFor(e){if(this.setupDebouncer.cancel(),this.target===e)return;this.onDisconnect&&this.onDisconnect(),this.target=e,e.setAttribute("data-is-ft-ripple-target","true");let t=(...c)=>V=>{c.forEach(A=>window.addEventListener(A,this.endPress,{once:!0})),this.startPress(V)},o=t("mouseup","contextmenu"),r=t("touchend","touchcancel"),p=c=>{["Enter"," "].includes(c.key)&&t("keyup")(c)},i={passive:!0};e.addEventListener("mouseover",this.startHover,i),e.addEventListener("mousemove",this.moveRipple,i),e.addEventListener("mouseleave",this.endHover,i),e.addEventListener("mousedown",o,i),e.addEventListener("touchstart",r,i),e.addEventListener("touchmove",this.moveRipple,i),e.addEventListener("keydown",p,i),e.addEventListener("focus",this.startFocus,i),e.addEventListener("blur",this.endFocus,i),e.addEventListener("focusin",this.startFocus,i),e.addEventListener("focusout",this.endFocus,i),this.onDisconnect=()=>{e.removeAttribute("data-is-ft-ripple-target"),e.removeEventListener("mouseover",this.startHover,i),e.removeEventListener("mousemove",this.moveRipple,i),e.removeEventListener("mouseleave",this.endHover,i),e.removeEventListener("mousedown",o,i),e.removeEventListener("touchstart",r,i),e.removeEventListener("touchmove",this.moveRipple,i),e.removeEventListener("keydown",p,i),e.removeEventListener("focus",this.startFocus,i),e.removeEventListener("blur",this.endFocus,i),e.removeEventListener("focusin",this.startFocus,i),e.removeEventListener("focusout",this.endFocus,i),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(e){let t=e,o=e,r,p;return t.x!=null?{x:r,y:p}=t:o.touches!=null&&(r=o.touches[0].clientX,p=o.touches[0].clientY),{x:r,y:p}}isFocusVisible(e){return e instanceof HTMLElement?e.matches(":focus-visible"):!0}isIgnored(e){if(this.disabled)return!0;if(e!=null)for(let t of e.composedPath()){if(t===this.target)break;if("hasAttribute"in t&&t.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};n.elementDefinitions={};n.styles=H;d([(0,a.property)({type:Boolean})],n.prototype,"primary",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"secondary",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"unbounded",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"activated",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"selected",void 0);d([(0,a.property)({type:Boolean})],n.prototype,"disabled",void 0);d([(0,a.state)()],n.prototype,"hovered",void 0);d([(0,a.state)()],n.prototype,"focused",void 0);d([(0,a.state)()],n.prototype,"pressed",void 0);d([(0,a.state)()],n.prototype,"rippling",void 0);d([(0,a.state)()],n.prototype,"originX",void 0);d([(0,a.state)()],n.prototype,"originY",void 0);d([(0,a.query)(".ft-ripple")],n.prototype,"ripple",void 0);d([(0,a.query)(".ft-ripple--effect")],n.prototype,"rippleEffect",void 0);(0,_.customElement)("ft-ripple")(n);})();