@fluid-topics/ft-ripple/build/ft-ripple.light.js

A custom Fluid Topics ripple component

"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`
    :host {
        display: contents;
    }

    .ft-ripple {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .ft-ripple:not(.ft-ripple--unbounded) {
        overflow: hidden;
        border-radius: ${u.borderRadius};
    }

    .ft-ripple .ft-ripple--background,
    .ft-ripple .ft-ripple--effect {
        position: absolute;
        opacity: 0;
    }

    .ft-ripple .ft-ripple--effect {
        aspect-ratio: 1;
        width: auto;
        height: auto;
        min-width: 170%;
        min-height: 170%;
    }

    .ft-ripple .ft-ripple--background{
        width: 100%;
        height: 100%;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        aspect-ratio: 1;
        width: auto;
        height: auto;
        max-width: unset;
        max-height: unset;
        min-width: 100%;
        min-height: 100%;
    }

    .ft-ripple .ft-ripple--background {
        background-color: ${u.backgroundColor};
    }

    .ft-ripple .ft-ripple--effect {
        background-color: ${u.color};
    }

    .ft-ripple.ft-ripple--secondary .ft-ripple--background {
        background-color: ${D.backgroundColor};
    }

    .ft-ripple.ft-ripple--secondary .ft-ripple--effect {
        background-color: ${D.color};
    }

    .ft-ripple.ft-ripple--primary .ft-ripple--background {
        background-color: ${w.backgroundColor};
    }

    .ft-ripple.ft-ripple--primary .ft-ripple--effect {
        background-color: ${w.color};
    }

    .ft-ripple .ft-ripple--background {
        top: 0;
        left: 0;
        transition: opacity 75ms linear;
    }

    .ft-ripple .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        border-radius: 50%;
    }

    .ft-ripple .ft-ripple--effect {
        transform: translate(-50%, -50%) scale(0.15);
        transition: transform 300ms ease, opacity 75ms linear;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        left: 50%;
        top: 50%;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        transform: translate(-50%, -50%);
    }

    .ft-ripple.ft-ripple--hovered .ft-ripple--background {
        opacity: ${u.opacityContentOnSurfaceHover};
    }

    .ft-ripple.ft-ripple--selected .ft-ripple--background {
        opacity: ${u.opacityContentOnSurfaceSelected};
    }

    .ft-ripple.ft-ripple--focused .ft-ripple--background {
        opacity: ${u.opacityContentOnSurfaceFocused};
    }

    .ft-ripple.ft-ripple--pressed .ft-ripple--effect {
        opacity: ${u.opacityContentOnSurfacePressed};
        transform: translate(-50%, -50%) scale(1);
    }
`;var d=function(l,e,t,o){var r=arguments.length,p=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")p=Reflect.decorate(l,e,t,o);else for(var c=l.length-1;c>=0;c--)(i=l[c])&&(p=(r<3?i(p):r>3?i(e,t,p):i(e,t))||p);return r>3&&p&&Object.defineProperty(e,t,p),p},n=class extends h.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 h.Debouncer(1e3),this.onTransitionStart=e=>{e.propertyName==="transform"&&(this.rippling=this.pressed,this.debouncer.run(()=>this.rippling=!1))},this.onTransitionEnd=e=>{e.propertyName==="transform"&&(this.rippling=!1)},this.setupDebouncer=new h.Debouncer(10),this.moveRipple=e=>{var t,o;let{x:r,y:p}=this.getCoordinates(e),i=(o=(t=this.ripple)===null||t===void 0?void 0:t.getBoundingClientRect())!==null&&o!==void 0?o:{x:0,y:0,width:0,height:0};this.originX=Math.round(r!=null?r-i.x:i.width/2),this.originY=Math.round(p!=null?p-i.y:i.height/2)},this.startPress=e=>{this.moveRipple(e),this.pressed=!this.isIgnored(e)},this.endPress=()=>{this.pressed=!1},this.startHover=e=>{this.hovered=!this.isIgnored(e)},this.endHover=()=>{this.hovered=!1},this.startFocus=e=>{this.focused=this.isFocusVisible(e?.target)&&!this.isIgnored(e)},this.endFocus=()=>{this.focused=!1}}render(){let e={"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 P.html`
            <style>
                .ft-ripple .ft-ripple--effect {
                    left: ${this.originX}px;
                    top: ${this.originY}px;
                }
            </style>
            <div class="${(0,$.classMap)(e)}">
                <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);})();