@fluid-topics/ft-ripple 1.1.70 → 1.1.71
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.
- package/build/ft-ripple.light.js +15 -15
- package/build/ft-ripple.min.js +217 -159
- package/package.json +3 -3
package/build/ft-ripple.light.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
"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`
|
|
2
2
|
:host {
|
|
3
3
|
display: contents;
|
|
4
4
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
.ft-ripple:not(.ft-ripple--unbounded) {
|
|
13
13
|
overflow: hidden;
|
|
14
|
-
border-radius: ${
|
|
14
|
+
border-radius: ${u.borderRadius};
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.ft-ripple .ft-ripple--background,
|
|
@@ -45,27 +45,27 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.ft-ripple .ft-ripple--background {
|
|
48
|
-
background-color: ${
|
|
48
|
+
background-color: ${u.backgroundColor};
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.ft-ripple .ft-ripple--effect {
|
|
52
|
-
background-color: ${
|
|
52
|
+
background-color: ${u.color};
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.ft-ripple.ft-ripple--secondary .ft-ripple--background {
|
|
56
|
-
background-color: ${
|
|
56
|
+
background-color: ${D.backgroundColor};
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.ft-ripple.ft-ripple--secondary .ft-ripple--effect {
|
|
60
|
-
background-color: ${
|
|
60
|
+
background-color: ${D.color};
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.ft-ripple.ft-ripple--primary .ft-ripple--background {
|
|
64
|
-
background-color: ${
|
|
64
|
+
background-color: ${w.backgroundColor};
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.ft-ripple.ft-ripple--primary .ft-ripple--effect {
|
|
68
|
-
background-color: ${
|
|
68
|
+
background-color: ${w.color};
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ft-ripple .ft-ripple--background {
|
|
@@ -95,30 +95,30 @@
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.ft-ripple.ft-ripple--hovered .ft-ripple--background {
|
|
98
|
-
opacity: ${
|
|
98
|
+
opacity: ${u.opacityContentOnSurfaceHover};
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.ft-ripple.ft-ripple--selected .ft-ripple--background {
|
|
102
|
-
opacity: ${
|
|
102
|
+
opacity: ${u.opacityContentOnSurfaceSelected};
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.ft-ripple.ft-ripple--focused .ft-ripple--background {
|
|
106
|
-
opacity: ${
|
|
106
|
+
opacity: ${u.opacityContentOnSurfaceFocused};
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
.ft-ripple.ft-ripple--pressed .ft-ripple--effect {
|
|
110
|
-
opacity: ${
|
|
110
|
+
opacity: ${u.opacityContentOnSurfacePressed};
|
|
111
111
|
transform: translate(-50%, -50%) scale(1);
|
|
112
112
|
}
|
|
113
|
-
`;var d=function(
|
|
113
|
+
`;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`
|
|
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="${
|
|
120
|
+
<div class="${(0,$.classMap)(e)}">
|
|
121
121
|
<div class="ft-ripple--background"></div>
|
|
122
122
|
<div class="ft-ripple--effect"></div>
|
|
123
123
|
</div>
|
|
124
|
-
`}contentAvailableCallback(
|
|
124
|
+
`}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);})();
|