@fluid-topics/ft-snap-scroll 0.1.5 → 0.1.8
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-snap-scroll.light.js +713 -0
- package/build/ft-snap-scroll.min.js +473 -7
- package/package.json +4 -4
|
@@ -57,7 +57,21 @@ const et=t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e
|
|
|
57
57
|
* @license
|
|
58
58
|
* Copyright 2021 Google LLC
|
|
59
59
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
60
|
-
*/class ft extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:r}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const o=this.renderOptions.creationScope=this.attachShadow({...r,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Q)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),F
|
|
60
|
+
*/class ft extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:r}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const o=this.renderOptions.creationScope=this.attachShadow({...r,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Q)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),F`
|
|
61
|
+
${t.map((t=>F`
|
|
62
|
+
<style>${t}</style>
|
|
63
|
+
`))}
|
|
64
|
+
${this.getTemplate()}
|
|
65
|
+
`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}const mt=s`
|
|
66
|
+
.ft-no-text-select {
|
|
67
|
+
-webkit-touch-callout: none;
|
|
68
|
+
-webkit-user-select: none;
|
|
69
|
+
-khtml-user-select: none;
|
|
70
|
+
-moz-user-select: none;
|
|
71
|
+
-ms-user-select: none;
|
|
72
|
+
user-select: none;
|
|
73
|
+
}
|
|
74
|
+
`;var vt,yt,gt;const bt=navigator.vendor&&!!navigator.vendor.match(/apple/i)||"[object SafariRemoteNotification]"===(null!==(gt=null===(yt=null===(vt=window.safari)||void 0===vt?void 0:vt.pushNotification)||void 0===yt?void 0:yt.toString())&&void 0!==gt?gt:""),xt=1,wt=t=>(...e)=>({_$litDirective$:t,values:e});
|
|
61
75
|
/**
|
|
62
76
|
* @license
|
|
63
77
|
* Copyright 2017 Google LLC
|
|
@@ -193,13 +207,15 @@ const Lt=wt(class extends $t{constructor(t){var e;if(super(t),t.type!==xt||"styl
|
|
|
193
207
|
* @license
|
|
194
208
|
* Copyright 2018 Google LLC
|
|
195
209
|
* SPDX-License-Identifier: Apache-2.0
|
|
196
|
-
*/class It extends Nt{constructor(){super(...arguments),this.primary=!1,this.accent=!1,this.unbounded=!1,this.disabled=!1,this.activated=!1,this.selected=!1,this.internalUseStateLayerCustomProperties=!1,this.hovering=!1,this.bgFocused=!1,this.fgActivation=!1,this.fgDeactivation=!1,this.fgScale="",this.fgSize="",this.translateStart="",this.translateEnd="",this.leftPos="",this.topPos="",this.mdcFoundationClass=Dt}get isActive(){return t=this.parentElement||this,e=":active",(t.matches||t.webkitMatchesSelector||t.msMatchesSelector).call(t,e);var t,e}createAdapter(){return{browserSupportsCssVars:()=>!0,isUnbounded:()=>this.unbounded,isSurfaceActive:()=>this.isActive,isSurfaceDisabled:()=>this.disabled,addClass:t=>{switch(t){case"mdc-ripple-upgraded--background-focused":this.bgFocused=!0;break;case"mdc-ripple-upgraded--foreground-activation":this.fgActivation=!0;break;case"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation=!0}},removeClass:t=>{switch(t){case"mdc-ripple-upgraded--background-focused":this.bgFocused=!1;break;case"mdc-ripple-upgraded--foreground-activation":this.fgActivation=!1;break;case"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation=!1}},containsEventTarget:()=>!0,registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{},registerDocumentInteractionHandler:()=>{},deregisterDocumentInteractionHandler:()=>{},registerResizeHandler:()=>{},deregisterResizeHandler:()=>{},updateCssVariable:(t,e)=>{switch(t){case"--mdc-ripple-fg-scale":this.fgScale=e;break;case"--mdc-ripple-fg-size":this.fgSize=e;break;case"--mdc-ripple-fg-translate-end":this.translateEnd=e;break;case"--mdc-ripple-fg-translate-start":this.translateStart=e;break;case"--mdc-ripple-left":this.leftPos=e;break;case"--mdc-ripple-top":this.topPos=e}},computeBoundingRect:()=>(this.parentElement||this).getBoundingClientRect(),getWindowPageOffset:()=>({x:window.pageXOffset,y:window.pageYOffset})}}startPress(t){this.waitForFoundation((()=>{this.mdcFoundation.activate(t)}))}endPress(){this.waitForFoundation((()=>{this.mdcFoundation.deactivate()}))}startFocus(){this.waitForFoundation((()=>{this.mdcFoundation.handleFocus()}))}endFocus(){this.waitForFoundation((()=>{this.mdcFoundation.handleBlur()}))}startHover(){this.hovering=!0}endHover(){this.hovering=!1}waitForFoundation(t){this.mdcFoundation?t():this.updateComplete.then(t)}update(t){t.has("disabled")&&this.disabled&&this.endHover(),super.update(t)}render(){const t=this.activated&&(this.primary||!this.accent),e=this.selected&&(this.primary||!this.accent),i={"mdc-ripple-surface--accent":this.accent,"mdc-ripple-surface--primary--activated":t,"mdc-ripple-surface--accent--activated":this.accent&&this.activated,"mdc-ripple-surface--primary--selected":e,"mdc-ripple-surface--accent--selected":this.accent&&this.selected,"mdc-ripple-surface--disabled":this.disabled,"mdc-ripple-surface--hover":this.hovering,"mdc-ripple-surface--primary":this.primary,"mdc-ripple-surface--selected":this.selected,"mdc-ripple-upgraded--background-focused":this.bgFocused,"mdc-ripple-upgraded--foreground-activation":this.fgActivation,"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation,"mdc-ripple-upgraded--unbounded":this.unbounded,"mdc-ripple-surface--internal-use-state-layer-custom-properties":this.internalUseStateLayerCustomProperties};return F
|
|
210
|
+
*/class It extends Nt{constructor(){super(...arguments),this.primary=!1,this.accent=!1,this.unbounded=!1,this.disabled=!1,this.activated=!1,this.selected=!1,this.internalUseStateLayerCustomProperties=!1,this.hovering=!1,this.bgFocused=!1,this.fgActivation=!1,this.fgDeactivation=!1,this.fgScale="",this.fgSize="",this.translateStart="",this.translateEnd="",this.leftPos="",this.topPos="",this.mdcFoundationClass=Dt}get isActive(){return t=this.parentElement||this,e=":active",(t.matches||t.webkitMatchesSelector||t.msMatchesSelector).call(t,e);var t,e}createAdapter(){return{browserSupportsCssVars:()=>!0,isUnbounded:()=>this.unbounded,isSurfaceActive:()=>this.isActive,isSurfaceDisabled:()=>this.disabled,addClass:t=>{switch(t){case"mdc-ripple-upgraded--background-focused":this.bgFocused=!0;break;case"mdc-ripple-upgraded--foreground-activation":this.fgActivation=!0;break;case"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation=!0}},removeClass:t=>{switch(t){case"mdc-ripple-upgraded--background-focused":this.bgFocused=!1;break;case"mdc-ripple-upgraded--foreground-activation":this.fgActivation=!1;break;case"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation=!1}},containsEventTarget:()=>!0,registerInteractionHandler:()=>{},deregisterInteractionHandler:()=>{},registerDocumentInteractionHandler:()=>{},deregisterDocumentInteractionHandler:()=>{},registerResizeHandler:()=>{},deregisterResizeHandler:()=>{},updateCssVariable:(t,e)=>{switch(t){case"--mdc-ripple-fg-scale":this.fgScale=e;break;case"--mdc-ripple-fg-size":this.fgSize=e;break;case"--mdc-ripple-fg-translate-end":this.translateEnd=e;break;case"--mdc-ripple-fg-translate-start":this.translateStart=e;break;case"--mdc-ripple-left":this.leftPos=e;break;case"--mdc-ripple-top":this.topPos=e}},computeBoundingRect:()=>(this.parentElement||this).getBoundingClientRect(),getWindowPageOffset:()=>({x:window.pageXOffset,y:window.pageYOffset})}}startPress(t){this.waitForFoundation((()=>{this.mdcFoundation.activate(t)}))}endPress(){this.waitForFoundation((()=>{this.mdcFoundation.deactivate()}))}startFocus(){this.waitForFoundation((()=>{this.mdcFoundation.handleFocus()}))}endFocus(){this.waitForFoundation((()=>{this.mdcFoundation.handleBlur()}))}startHover(){this.hovering=!0}endHover(){this.hovering=!1}waitForFoundation(t){this.mdcFoundation?t():this.updateComplete.then(t)}update(t){t.has("disabled")&&this.disabled&&this.endHover(),super.update(t)}render(){const t=this.activated&&(this.primary||!this.accent),e=this.selected&&(this.primary||!this.accent),i={"mdc-ripple-surface--accent":this.accent,"mdc-ripple-surface--primary--activated":t,"mdc-ripple-surface--accent--activated":this.accent&&this.activated,"mdc-ripple-surface--primary--selected":e,"mdc-ripple-surface--accent--selected":this.accent&&this.selected,"mdc-ripple-surface--disabled":this.disabled,"mdc-ripple-surface--hover":this.hovering,"mdc-ripple-surface--primary":this.primary,"mdc-ripple-surface--selected":this.selected,"mdc-ripple-upgraded--background-focused":this.bgFocused,"mdc-ripple-upgraded--foreground-activation":this.fgActivation,"mdc-ripple-upgraded--foreground-deactivation":this.fgDeactivation,"mdc-ripple-upgraded--unbounded":this.unbounded,"mdc-ripple-surface--internal-use-state-layer-custom-properties":this.internalUseStateLayerCustomProperties};return F`
|
|
211
|
+
<div class="mdc-ripple-surface mdc-ripple-upgraded ${Ot(i)}"
|
|
212
|
+
style="${Lt({"--mdc-ripple-fg-scale":this.fgScale,"--mdc-ripple-fg-size":this.fgSize,"--mdc-ripple-fg-translate-end":this.translateEnd,"--mdc-ripple-fg-translate-start":this.translateStart,"--mdc-ripple-left":this.leftPos,"--mdc-ripple-top":this.topPos})}"></div>`}}Ct([st(".mdc-ripple-surface")],It.prototype,"mdcRoot",void 0),Ct([rt({type:Boolean})],It.prototype,"primary",void 0),Ct([rt({type:Boolean})],It.prototype,"accent",void 0),Ct([rt({type:Boolean})],It.prototype,"unbounded",void 0),Ct([rt({type:Boolean})],It.prototype,"disabled",void 0),Ct([rt({type:Boolean})],It.prototype,"activated",void 0),Ct([rt({type:Boolean})],It.prototype,"selected",void 0),Ct([rt({type:Boolean})],It.prototype,"internalUseStateLayerCustomProperties",void 0),Ct([ot()],It.prototype,"hovering",void 0),Ct([ot()],It.prototype,"bgFocused",void 0),Ct([ot()],It.prototype,"fgActivation",void 0),Ct([ot()],It.prototype,"fgDeactivation",void 0),Ct([ot()],It.prototype,"fgScale",void 0),Ct([ot()],It.prototype,"fgSize",void 0),Ct([ot()],It.prototype,"translateStart",void 0),Ct([ot()],It.prototype,"translateEnd",void 0),Ct([ot()],It.prototype,"leftPos",void 0),Ct([ot()],It.prototype,"topPos",void 0);
|
|
197
213
|
/**
|
|
198
214
|
* @license
|
|
199
215
|
* Copyright 2021 Google LLC
|
|
200
216
|
* SPDX-LIcense-Identifier: Apache-2.0
|
|
201
217
|
*/
|
|
202
|
-
const Pt=s`.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:block}:host .mdc-ripple-surface{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;will-change:unset}.mdc-ripple-surface--primary::after,.mdc-ripple-surface--primary::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-ripple-surface--primary.mdc-ripple-surface--hover::before,.mdc-ripple-surface--primary:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-ripple-surface--primary.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--primary--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}.mdc-ripple-surface--primary--activated::after,.mdc-ripple-surface--primary--activated::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-ripple-surface--primary--activated.mdc-ripple-surface--hover::before,.mdc-ripple-surface--primary--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--primary--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}.mdc-ripple-surface--primary--selected::after,.mdc-ripple-surface--primary--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-ripple-surface--primary--selected.mdc-ripple-surface--hover::before,.mdc-ripple-surface--primary--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--accent::after,.mdc-ripple-surface--accent::before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-ripple-surface--accent.mdc-ripple-surface--hover::before,.mdc-ripple-surface--accent:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-ripple-surface--accent.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--accent--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}.mdc-ripple-surface--accent--activated::after,.mdc-ripple-surface--accent--activated::before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-ripple-surface--accent--activated.mdc-ripple-surface--hover::before,.mdc-ripple-surface--accent--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--accent--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}.mdc-ripple-surface--accent--selected::after,.mdc-ripple-surface--accent--selected::before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-ripple-surface--accent--selected.mdc-ripple-surface--hover::before,.mdc-ripple-surface--accent--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--disabled{opacity:0}.mdc-ripple-surface--internal-use-state-layer-custom-properties::after,.mdc-ripple-surface--internal-use-state-layer-custom-properties::before{background-color:#000;background-color:var(--mdc-ripple-hover-state-layer-color,#000)}.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-surface--hover::before,.mdc-ripple-surface--internal-use-state-layer-custom-properties:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-state-layer-opacity,.04)}.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-state-layer-opacity,.12)}.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-pressed-state-layer-opacity,.12)}.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-pressed-state-layer-opacity, 0.12)}`
|
|
218
|
+
const Pt=s`.mdc-ripple-surface{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}:host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:block}:host .mdc-ripple-surface{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;will-change:unset}.mdc-ripple-surface--primary::before,.mdc-ripple-surface--primary::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary:hover::before,.mdc-ripple-surface--primary.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--primary.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--primary--activated::before{opacity:0.12;opacity:var(--mdc-ripple-activated-opacity, 0.12)}.mdc-ripple-surface--primary--activated::before,.mdc-ripple-surface--primary--activated::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary--activated:hover::before,.mdc-ripple-surface--primary--activated.mdc-ripple-surface--hover::before{opacity:0.16;opacity:var(--mdc-ripple-hover-opacity, 0.16)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--primary--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--primary--selected::before{opacity:0.08;opacity:var(--mdc-ripple-selected-opacity, 0.08)}.mdc-ripple-surface--primary--selected::before,.mdc-ripple-surface--primary--selected::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-ripple-surface--primary--selected:hover::before,.mdc-ripple-surface--primary--selected.mdc-ripple-surface--hover::before{opacity:0.12;opacity:var(--mdc-ripple-hover-opacity, 0.12)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--primary--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--primary--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--accent::before,.mdc-ripple-surface--accent::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent:hover::before,.mdc-ripple-surface--accent.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--accent.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface--accent--activated::before{opacity:0.12;opacity:var(--mdc-ripple-activated-opacity, 0.12)}.mdc-ripple-surface--accent--activated::before,.mdc-ripple-surface--accent--activated::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent--activated:hover::before,.mdc-ripple-surface--accent--activated.mdc-ripple-surface--hover::before{opacity:0.16;opacity:var(--mdc-ripple-hover-opacity, 0.16)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--activated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--accent--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-ripple-surface--accent--selected::before{opacity:0.08;opacity:var(--mdc-ripple-selected-opacity, 0.08)}.mdc-ripple-surface--accent--selected::before,.mdc-ripple-surface--accent--selected::after{background-color:#018786;background-color:var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786))}.mdc-ripple-surface--accent--selected:hover::before,.mdc-ripple-surface--accent--selected.mdc-ripple-surface--hover::before{opacity:0.12;opacity:var(--mdc-ripple-hover-opacity, 0.12)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--accent--selected:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--accent--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.mdc-ripple-surface--disabled{opacity:0}.mdc-ripple-surface--internal-use-state-layer-custom-properties::before,.mdc-ripple-surface--internal-use-state-layer-custom-properties::after{background-color:#000;background-color:var(--mdc-ripple-hover-state-layer-color, #000)}.mdc-ripple-surface--internal-use-state-layer-custom-properties:hover::before,.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-state-layer-opacity, 0.04)}.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-state-layer-opacity, 0.12)}.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface--internal-use-state-layer-custom-properties:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-pressed-state-layer-opacity, 0.12)}.mdc-ripple-surface--internal-use-state-layer-custom-properties.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-pressed-state-layer-opacity, 0.12)}`
|
|
203
219
|
/**
|
|
204
220
|
* @license
|
|
205
221
|
* Copyright 2018 Google LLC
|
|
@@ -210,7 +226,34 @@ const Pt=s`.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-
|
|
|
210
226
|
* Copyright 2020 Google LLC
|
|
211
227
|
* SPDX-License-Identifier: Apache-2.0
|
|
212
228
|
*/
|
|
213
|
-
class Wt{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var Vt=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Kt={color:dt.extend("--ft-ripple-color",ut.colorContent),primaryColor:dt.extend("--ft-ripple-primary-color",dt.extend("--ft-ripple-color",ut.colorPrimary)),secondaryColor:dt.extend("--ft-ripple-secondary-color",dt.extend("--ft-ripple-color",ut.colorSecondary)),opacityContentOnSurfacePressed:dt.external(ut.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:dt.external(ut.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:dt.external(ut.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:dt.external(ut.opacityContentOnSurfaceSelected,"Design system"),opacityContentOnSurfaceDragged:dt.external(ut.opacityContentOnSurfaceDragged,"Design system")};let Zt=class extends ft{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return s
|
|
229
|
+
class Wt{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var Vt=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Kt={color:dt.extend("--ft-ripple-color",ut.colorContent),primaryColor:dt.extend("--ft-ripple-primary-color",dt.extend("--ft-ripple-color",ut.colorPrimary)),secondaryColor:dt.extend("--ft-ripple-secondary-color",dt.extend("--ft-ripple-color",ut.colorSecondary)),opacityContentOnSurfacePressed:dt.external(ut.opacityContentOnSurfacePressed,"Design system"),opacityContentOnSurfaceHover:dt.external(ut.opacityContentOnSurfaceHover,"Design system"),opacityContentOnSurfaceFocused:dt.external(ut.opacityContentOnSurfaceFocused,"Design system"),opacityContentOnSurfaceSelected:dt.external(ut.opacityContentOnSurfaceSelected,"Design system"),opacityContentOnSurfaceDragged:dt.external(ut.opacityContentOnSurfaceDragged,"Design system")};let Zt=class extends ft{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return s`
|
|
230
|
+
:host {
|
|
231
|
+
display: contents;
|
|
232
|
+
|
|
233
|
+
--mdc-ripple-color: ${Kt.color};
|
|
234
|
+
--mdc-ripple-press-opacity: ${Kt.opacityContentOnSurfacePressed};
|
|
235
|
+
--mdc-ripple-hover-opacity: ${Kt.opacityContentOnSurfaceHover};
|
|
236
|
+
--mdc-ripple-focus-opacity: ${Kt.opacityContentOnSurfaceFocused};
|
|
237
|
+
--mdc-ripple-selected-opacity: ${Kt.opacityContentOnSurfaceSelected};
|
|
238
|
+
--mdc-ripple-activated-opacity: ${Kt.opacityContentOnSurfaceDragged};
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
mwc-ripple.ft-ripple--secondary {
|
|
242
|
+
--mdc-ripple-color: ${Kt.secondaryColor};
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
mwc-ripple.ft-ripple--primary {
|
|
246
|
+
--mdc-ripple-color: ${Kt.primaryColor};
|
|
247
|
+
}
|
|
248
|
+
`}getTemplate(){return F`
|
|
249
|
+
<mwc-ripple
|
|
250
|
+
class="${this.primary?"ft-ripple--primary":this.secondary?"ft-ripple--secondary":""}"
|
|
251
|
+
?unbounded=${this.unbounded}
|
|
252
|
+
?activated=${this.activated}
|
|
253
|
+
?selected=${this.selected}
|
|
254
|
+
?disabled=${this.disabled}
|
|
255
|
+
></mwc-ripple>
|
|
256
|
+
`}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple()}endRipple(){var t,e,i;null===(t=this.rippleHandlers)||void 0===t||t.endHover(),null===(e=this.rippleHandlers)||void 0===e||e.endFocus(),null===(i=this.rippleHandlers)||void 0===i||i.endPress()}connectedCallback(){var t;super.connectedCallback();const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentNode;if(e){const t=new Wt((async()=>this.mwcRipple)),i=(...e)=>i=>{e.forEach((e=>window.addEventListener(e,t.endPress,{once:!0}))),t.startPress(i)},r=i("mouseup"),o=i("touchend","touchcancel"),n=t=>{["Enter"," "].includes(t.key)&&i("keyup")()};e.addEventListener("mouseenter",t.startHover),e.addEventListener("mouseleave",t.endHover),e.addEventListener("mousedown",r),e.addEventListener("touchstart",o),e.addEventListener("keydown",n),e.addEventListener("focus",t.startFocus),e.addEventListener("blur",t.endFocus),this.onDisconnect=()=>{e.removeEventListener("mouseenter",t.startHover),e.removeEventListener("mouseleave",t.endHover),e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",o),e.removeEventListener("keydown",n),e.removeEventListener("focus",t.startFocus),e.removeEventListener("blur",t.endFocus)},this.rippleHandlers=t}}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};Zt.elementDefinitions={"mwc-ripple":Ht},Vt([rt({type:Boolean})],Zt.prototype,"primary",void 0),Vt([rt({type:Boolean})],Zt.prototype,"secondary",void 0),Vt([rt({type:Boolean})],Zt.prototype,"unbounded",void 0),Vt([rt({type:Boolean})],Zt.prototype,"activated",void 0),Vt([rt({type:Boolean})],Zt.prototype,"selected",void 0),Vt([rt({type:Boolean})],Zt.prototype,"disabled",void 0),Vt([st("mwc-ripple")],Zt.prototype,"mwcRipple",void 0),Zt=Vt([pt("ft-ripple")],Zt);
|
|
214
257
|
/**
|
|
215
258
|
* @license
|
|
216
259
|
* Copyright 2020 Google LLC
|
|
@@ -320,15 +363,438 @@ const qt=t=>({_$litStatic$:t}),Gt=new Map,Xt=(t=>(e,...i)=>{var r;const o=i.leng
|
|
|
320
363
|
* Copyright 2021 Google LLC
|
|
321
364
|
* SPDX-LIcense-Identifier: Apache-2.0
|
|
322
365
|
*/
|
|
323
|
-
const fi=s`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:
|
|
366
|
+
const fi=s`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}`
|
|
324
367
|
/**
|
|
325
368
|
* @license
|
|
326
369
|
* Copyright 2018 Google LLC
|
|
327
370
|
* SPDX-License-Identifier: Apache-2.0
|
|
328
|
-
*/;let mi=class extends Q{render(){return F`<span><slot></slot></span>`}};mi.styles=[fi],mi=Ct([et("mwc-icon")],mi);var vi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const yi=dt.create("--ft-tooltip-distance","SIZE","4px"),gi=dt.create("--ft-tooltip-color","COLOR","#FFFFFF"),bi=dt.create("--ft-tooltip-background-color","COLOR","#666666"),xi=dt.create("--ft-tooltip-z-index","NUMBER","1"),wi=dt.external(ut.borderRadiusS,"Design system");let $i=class extends ft{constructor(){super(...arguments),this.text="",this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.visible=!1,this.hideDebounce=new lt,this.revealDebouncer=new lt}getStyles(){return s
|
|
371
|
+
*/;let mi=class extends Q{render(){return F`<span><slot></slot></span>`}};mi.styles=[fi],mi=Ct([et("mwc-icon")],mi);var vi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const yi=dt.create("--ft-tooltip-distance","SIZE","4px"),gi=dt.create("--ft-tooltip-color","COLOR","#FFFFFF"),bi=dt.create("--ft-tooltip-background-color","COLOR","#666666"),xi=dt.create("--ft-tooltip-z-index","NUMBER","1"),wi=dt.external(ut.borderRadiusS,"Design system");let $i=class extends ft{constructor(){super(...arguments),this.text="",this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.visible=!1,this.hideDebounce=new lt,this.revealDebouncer=new lt}getStyles(){return s`
|
|
372
|
+
.ft-tooltip--container {
|
|
373
|
+
display: block;
|
|
374
|
+
position: relative;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.ft-tooltip--inline {
|
|
378
|
+
display: inline-block;
|
|
379
|
+
max-width: 100%;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.ft-tooltip {
|
|
383
|
+
position: absolute;
|
|
384
|
+
box-sizing: border-box;
|
|
385
|
+
overflow: hidden;
|
|
386
|
+
width: max-content;
|
|
387
|
+
max-width: 150px;
|
|
388
|
+
text-align: center;
|
|
389
|
+
padding: ${yi};
|
|
390
|
+
z-index: ${xi};
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.ft-tooltip--content {
|
|
394
|
+
padding: 4px 8px;
|
|
395
|
+
border-radius: ${wi};
|
|
396
|
+
background-color: ${bi};
|
|
397
|
+
color: ${gi};
|
|
398
|
+
top: -500px;
|
|
399
|
+
left: -500px;
|
|
400
|
+
position: relative;
|
|
401
|
+
word-break: break-word;
|
|
402
|
+
}
|
|
403
|
+
`}getTemplate(){return F`
|
|
404
|
+
<div part="container"
|
|
405
|
+
class="ft-tooltip--container ${this.inline?"ft-tooltip--inline":""}"
|
|
406
|
+
@mouseenter=${this.onHover}
|
|
407
|
+
@mouseleave=${this.onOut}
|
|
408
|
+
@focusin=${this.onHover}
|
|
409
|
+
@focusout=${this.onOut}
|
|
410
|
+
@touchstart=${this.onTouch}>
|
|
411
|
+
<div part="tooltip" class="ft-tooltip ft-tooltip--${this.position}" ?hidden=${!this.visible}>
|
|
412
|
+
<div part="tooltip-content" class="ft-tooltip--content">
|
|
413
|
+
<ft-typography variant="caption">${this.text}</ft-typography>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
<slot></slot>
|
|
417
|
+
</div>
|
|
418
|
+
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,r=(e.width-this.tooltip.clientWidth)/2,o=this.tooltip.style;switch(this.position){case"top":o.top=-this.tooltip.clientHeight+"px",o.left=r+"px";break;case"bottom":o.top=e.height+"px",o.left=r+"px";break;case"left":o.top=i+"px",o.left=-this.tooltip.clientWidth+"px";break;case"right":o.top=i+"px",o.left=e.width+"px"}o.maxWidth=Math.max(e.width,150)+"px"}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}};$i.elementDefinitions={"ft-typography":ui},vi([rt()],$i.prototype,"text",void 0),vi([rt({type:Boolean})],$i.prototype,"manual",void 0),vi([rt({type:Boolean})],$i.prototype,"inline",void 0),vi([rt({type:Number})],$i.prototype,"delay",void 0),vi([rt()],$i.prototype,"position",void 0),vi([
|
|
329
419
|
/**
|
|
330
420
|
* @license
|
|
331
421
|
* Copyright 2017 Google LLC
|
|
332
422
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
333
423
|
*/
|
|
334
|
-
function(t,e,i){let r,o=t;return"object"==typeof t?(o=t.slot,r=t):r={flatten:e},i?function(t){const{slot:e,selector:i}=null!=t?t:{};return nt({descriptor:r=>({get(){var r;const o="slot"+(e?`[name=${e}]`:":not([name])"),n=null===(r=this.renderRoot)||void 0===r?void 0:r.querySelector(o),s=null!=n?ct(n,t):[];return i?s.filter((t=>t.matches(i))):s},enumerable:!0,configurable:!0})})}({slot:o,flatten:e,selector:i}):nt({descriptor:t=>({get(){var t,e;const i="slot"+(o?`[name=${o}]`:":not([name])"),n=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(i);return null!==(e=null==n?void 0:n.assignedNodes(r))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}("",!0)],$i.prototype,"slotNodes",void 0),vi([st(".ft-tooltip--container")],$i.prototype,"container",void 0),vi([st("slot")],$i.prototype,"target",void 0),vi([st(".ft-tooltip")],$i.prototype,"tooltip",void 0),vi([st(".ft-tooltip--content")],$i.prototype,"tooltipContent",void 0),vi([ot()],$i.prototype,"visible",void 0),$i=vi([pt("ft-tooltip")],$i);var Oi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Si={color:dt.extend("--ft-loader-color",ut.colorPrimary),size:dt.create("--ft-loader-size","SIZE","80px")};let ki=class extends ft{getStyles(){return s`:host{line-height:0}.ft-loader{display:inline-block;position:relative;width:${Si.size};height:${Si.size}}.ft-loader div{position:absolute;top:37.5%;width:25%;height:25%;border-radius:50%;background:${Si.color};animation-timing-function:cubic-bezier(0,1,1,0)}.ft-loader div:nth-child(1){left:2.5%;animation:appear .6s infinite}.ft-loader div:nth-child(2){left:2.5%;animation:move .6s infinite}.ft-loader div:nth-child(3){left:37.5%;animation:move .6s infinite}.ft-loader div:nth-child(4){left:72.5%;animation:disappear .6s infinite}@keyframes appear{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes disappear{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes move{0%{transform:translate(0,0)}100%{transform:translate(calc(.35 * ${Si.size}),0)}}`}getTemplate(){return F`<div class="ft-loader"><div></div><div></div><div></div><div></div></div>`}};ki=Oi([pt("ft-loader")],ki);var Ci=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Ei=dt.extend("--ft-button-color",ut.colorPrimary),Ri={backgroundColor:dt.extend("--ft-button-background-color",ut.colorSurface),borderRadius:dt.extend("--ft-button-border-radius",ut.borderRadiusL),color:Ei,fontSize:dt.extend("--ft-button-font-size",ii.fontSize),iconSize:dt.create("--ft-button-icon-size","SIZE","24px"),rippleColor:dt.extend("--ft-button-ripple-color",Ei),opacityDisabled:dt.external(ut.colorOpacityDisabled,"Design system")},zi=dt.extend("--ft-button-primary-color",dt.extend("--ft-button-color",ut.colorOnPrimary)),Ni=dt.extend("--ft-button-primary-background-color",dt.extend("--ft-button-background-color",ut.colorPrimary)),Mi=zi,Ti=(dt.extend("--ft-button-primary-ripple-color",zi),dt.extend("--ft-button-dense-border-radius",dt.extend("--ft-button-border-radius",ut.borderRadiusM)));let Ai=class extends ft{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.disabled=!1,this.dense=!1,this.round=!1,this.label="",this.icon=void 0,this.trailingIcon=!1,this.loading=!1,this.tooltipPosition="bottom",this.onclick=t=>{this.isDisabled()&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}}getStyles(){return[mt,s`:host{display:inline-block;max-width:100%}button{box-shadow:0 0 0 transparent;border:0 solid transparent;text-shadow:0 0 0 transparent}button:hover{box-shadow:0 0 0 transparent;border:0 solid transparent;text-shadow:0 0 0 transparent}button:active{outline:0;border:none}button:focus{outline:0}.ft-button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;overflow:hidden;box-sizing:border-box;border:none;--ft-button-internal-font-size:${Ri.fontSize}--ft-button-internal-line-height:calc(var(--ft-button-internal-font-size) + 2px);--ft-button-internal-color:${Ri.color}--mdc-icon-size:${Ri.iconSize}--ft-button-internal-vertical-padding:6px;--ft-button-internal-horizontal-padding:8px;${ht(Kt.color,Ri.rippleColor)}--ft-button-internal-content-height:max(var(--ft-button-internal-line-height), var(--mdc-icon-size));border-radius:${Ri.borderRadius};padding:var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);background-color:${Ri.backgroundColor};color:var(--ft-button-internal-color);-webkit-mask-image:radial-gradient(white,#000)}.ft-button:not([disabled]):hover{cursor:pointer}.ft-button--dense{--ft-button-internal-vertical-padding:2px;--ft-button-internal-horizontal-padding:4px;border-radius:${Ti}}.ft-button--round{border-radius:calc(var(--ft-button-internal-content-height)/ 2 + var(--ft-button-internal-vertical-padding))}.ft-button[disabled]{filter:grayscale(1);opacity:${Ri.opacityDisabled}}.ft-button.ft-button--primary{background-color:${Ni};--ft-button-internal-color:${Mi}}.ft-button.ft-button--outlined{border:1px solid var(--ft-button-internal-color);padding:calc(var(--ft-button-internal-vertical-padding) - 1px) calc(var(--ft-button-internal-horizontal-padding) - 1px)}.ft-button:focus{outline:0}.ft-button--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;margin:0 var(--ft-button-internal-horizontal-padding);${ht(ii.fontSize,"var(--ft-button-internal-font-size)")}${ht(ii.lineHeight,"var(--ft-button-internal-content-height)")}}.ft-button--safari-fix .ft-button--label{margin-right:0}.ft-button--safari-fix .ft-button--label:after{content:"\\0000a0";display:inline-block;width:0}.ft-button--label[hidden]{display:none}mwc-icon{flex-shrink:0;width:var(--mdc-icon-size)}.ft-button--label[hidden]+mwc-icon{margin:0 calc(var(--ft-button-internal-horizontal-padding) * -1);padding:0 var(--ft-button-internal-vertical-padding)}.ft-button:not(.ft-button--trailing-icon) ft-loader,.ft-button:not(.ft-button--trailing-icon) mwc-icon{order:-1}ft-loader{${ht(Si.size,Ri.iconSize)}${ht(Si.color,"var(--ft-button-internal-color)")}}`]}getTemplate(){const t={"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-button--safari-fix":bt,"ft-no-text-select":!0};return this.addTooltip(F`<button class="${Ot(t)}" aria-label="${this.getLabel()}" ?disabled="${this.isDisabled()}"><ft-ripple ?disabled="${this.isDisabled()}"></ft-ripple><ft-typography variant="button" class="ft-button--label" ?hidden="${!this.hasTextContent()}"><slot @slotchange="${this.onSlotchange}"></slot></ft-typography>${this.resolveIcon()}</button>`)}addTooltip(t){return this.hasTextContent()||0===this.getLabel().trim().length?t:F`<ft-tooltip text="${this.getLabel()}" position="${this.tooltipPosition}">${t}</ft-tooltip>`}resolveIcon(){return this.loading?F`<ft-loader></ft-loader>`:this.icon?F`<mwc-icon>${this.icon}</mwc-icon>`:U}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};Ai.elementDefinitions={"ft-ripple":Zt,"ft-tooltip":$i,"ft-typography":ui,"mwc-icon":mi,"ft-loader":ki},Ci([rt({type:Boolean})],Ai.prototype,"primary",void 0),Ci([rt({type:Boolean})],Ai.prototype,"outlined",void 0),Ci([rt({type:Boolean})],Ai.prototype,"disabled",void 0),Ci([rt({type:Boolean})],Ai.prototype,"dense",void 0),Ci([rt({type:Boolean})],Ai.prototype,"round",void 0),Ci([rt({type:String})],Ai.prototype,"label",void 0),Ci([rt({type:String})],Ai.prototype,"icon",void 0),Ci([rt({type:Boolean})],Ai.prototype,"trailingIcon",void 0),Ci([rt({type:Boolean})],Ai.prototype,"loading",void 0),Ci([rt({type:String})],Ai.prototype,"tooltipPosition",void 0),Ci([st(".ft-button")],Ai.prototype,"button",void 0),Ci([st(".ft-button--label slot")],Ai.prototype,"slottedContent",void 0),Ai=Ci([pt("ft-button")],Ai);var Fi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const ji={buttonsColor:dt.extend("--ft-snap-scroll-buttons-color",ut.colorPrimary),buttonsZIndex:dt.create("--ft-snap-scroll-buttons-z-index","COLOR","1"),gap:dt.create("--ft-snap-scroll-gap","SIZE","0"),colorSurface:dt.external(ut.colorSurface,"Design system")};class Ui extends CustomEvent{constructor(t,e){super("current-element-change",{detail:{index:t,element:e}})}}t.FtSnapScroll=class extends ft{constructor(){super(...arguments),this.horizontal=!1,this.hideScrollbar=!1,this.controls=!1,this.limitSize=!1,this.elements=[],this.currentElement=0,this.withScroll=!1,this.startReached=!0,this.endReached=!0,this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight",this.updateScrollCallback=()=>this.onScroll(),this.resizeObserver=new ResizeObserver((()=>this.scheduleUpdateScroll())),this.scrollDebouncer=new lt(200),this.updateScrollDebouncer=new lt(100)}getStyles(){return s`.ft-snap-scroll{box-sizing:border-box;position:relative;display:flex;--ft-snap-scroll-transparent-color:transparent}.ft-snap-scroll.ft-snap-scroll--safari-fix{--ft-snap-scroll-transparent-color:rgba(255, 255, 255, 0)}.ft-snap-scroll,.ft-snap-scroll--content{overflow:hidden}.ft-snap-scroll--limit-size,.ft-snap-scroll--limit-size .ft-snap-scroll--content{width:100%;height:100%}.ft-snap-scroll--content{flex-grow:1;flex-shrink:1;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:${ji.gap}}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content::-webkit-scrollbar{display:none}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content{-ms-overflow-style:none;scrollbar-width:none}.ft-snap-scroll--content::slotted(*){flex-shrink:0;flex-grow:1;max-height:100%;max-width:100%}.ft-snap-scroll--horizontal,.ft-snap-scroll--horizontal .ft-snap-scroll--content{width:100%}.ft-snap-scroll--vertical,.ft-snap-scroll--vertical .ft-snap-scroll--content{height:100%}.ft-snap-scroll--horizontal .ft-snap-scroll--content{flex-direction:row;overflow-x:auto}.ft-snap-scroll--vertical .ft-snap-scroll--content{flex-direction:column;overflow-y:auto}.ft-snap-scroll--next,.ft-snap-scroll--previous{position:absolute;display:flex;z-index:${ji.buttonsZIndex};opacity:1;transition:background-color .5s ease-in-out,opacity .5s ease-in-out,z-index .5s ease-in-out;${ht(Ri.backgroundColor,"transparent")}${ht(Ri.color,ji.buttonsColor)}}.ft-snap-scroll--next[hidden],.ft-snap-scroll--previous[hidden]{z-index:-1;opacity:0}.ft-snap-scroll--horizontal .ft-snap-scroll--previous{top:0;left:-1px;bottom:0;background:linear-gradient(to right,${ji.colorSurface} 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--previous{top:-1px;left:0;right:0;background:linear-gradient(to bottom,${ji.colorSurface} 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next{top:0;right:-1px;bottom:0;background:linear-gradient(to left,${ji.colorSurface} 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--next{left:0;right:0;bottom:-1px;background:linear-gradient(to top,${ji.colorSurface} 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next:hover,.ft-snap-scroll--horizontal .ft-snap-scroll--previous:hover,.ft-snap-scroll--vertical .ft-snap-scroll--next:hover,.ft-snap-scroll--vertical .ft-snap-scroll--previous:hover{background-color:${ji.colorSurface}}`}scrollToIndex(t){this.scrollToElement(this.elements[t])}scrollIndexIntoView(t){let e=this.elements[t];if(e){const t=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.nextSize,i=this.contentSlot[this.scrollAttribute]+this.prevSize;(e[this.offsetAttribute]<i||e[this.offsetAttribute]+e[this.sizeAttribute]>t)&&this.scrollToElement(e)}}previous(){this.scrollToElement(this.elements[Math.max(0,this.closestIndexFromStart()-1)])}next(){this.scrollToElement(this.elements[Math.min(this.closestIndexFromStart()+1,this.elements.length-1)])}getTemplate(){const t=Ot({"ft-snap-scroll":!0,"ft-snap-scroll--horizontal":this.horizontal,"ft-snap-scroll--vertical":!this.horizontal,"ft-snap-scroll--hide-scrollbar":this.hideScrollbar,"ft-snap-scroll--limit-size":this.limitSize,"ft-snap-scroll--safari-fix":bt}),e=this.controls&&this.withScroll;return F`<div part="container" class="${t}"><ft-button class="ft-snap-scroll--previous" part="controls" primary icon="${this.horizontal?"arrow_back_ios_new":"expand_less"}" ?hidden="${!e||this.startReached}" ?disabled="${!e||this.startReached}" @click="${this.previous}"></ft-button><slot class="ft-snap-scroll--content" part="content" @slotchange="${this.onSlotChange}"></slot><ft-button class="ft-snap-scroll--next" part="controls" primary icon="${this.horizontal?"arrow_forward_ios":"expand_more"}" ?hidden="${!e||this.endReached}" ?disabled="${!e||this.endReached}" @click="${this.next}"></ft-button></div>`}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new Ui(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}},t.FtSnapScroll.elementDefinitions={"ft-button":Ai},Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"horizontal",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"hideScrollbar",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"controls",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"limitSize",void 0),Fi([ot()],t.FtSnapScroll.prototype,"elements",void 0),Fi([ot()],t.FtSnapScroll.prototype,"currentElement",void 0),Fi([ot()],t.FtSnapScroll.prototype,"withScroll",void 0),Fi([ot()],t.FtSnapScroll.prototype,"startReached",void 0),Fi([ot()],t.FtSnapScroll.prototype,"endReached",void 0),Fi([st(".ft-snap-scroll--content")],t.FtSnapScroll.prototype,"contentSlot",void 0),t.FtSnapScroll=Fi([pt("ft-snap-scroll")],t.FtSnapScroll),t.CurrentElementChange=Ui,t.FtSnapScrollCssVariables=ji,Object.defineProperty(t,"t",{value:!0})}({});
|
|
424
|
+
function(t,e,i){let r,o=t;return"object"==typeof t?(o=t.slot,r=t):r={flatten:e},i?function(t){const{slot:e,selector:i}=null!=t?t:{};return nt({descriptor:r=>({get(){var r;const o="slot"+(e?`[name=${e}]`:":not([name])"),n=null===(r=this.renderRoot)||void 0===r?void 0:r.querySelector(o),s=null!=n?ct(n,t):[];return i?s.filter((t=>t.matches(i))):s},enumerable:!0,configurable:!0})})}({slot:o,flatten:e,selector:i}):nt({descriptor:t=>({get(){var t,e;const i="slot"+(o?`[name=${o}]`:":not([name])"),n=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(i);return null!==(e=null==n?void 0:n.assignedNodes(r))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}("",!0)],$i.prototype,"slotNodes",void 0),vi([st(".ft-tooltip--container")],$i.prototype,"container",void 0),vi([st("slot")],$i.prototype,"target",void 0),vi([st(".ft-tooltip")],$i.prototype,"tooltip",void 0),vi([st(".ft-tooltip--content")],$i.prototype,"tooltipContent",void 0),vi([ot()],$i.prototype,"visible",void 0),$i=vi([pt("ft-tooltip")],$i);var Oi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Si={color:dt.extend("--ft-loader-color",ut.colorPrimary),size:dt.create("--ft-loader-size","SIZE","80px")};let ki=class extends ft{getStyles(){return s`
|
|
425
|
+
:host {
|
|
426
|
+
line-height: 0;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.ft-loader {
|
|
430
|
+
display: inline-block;
|
|
431
|
+
position: relative;
|
|
432
|
+
|
|
433
|
+
width: ${Si.size};
|
|
434
|
+
height: ${Si.size};
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.ft-loader div {
|
|
438
|
+
position: absolute;
|
|
439
|
+
top: 37.5%;
|
|
440
|
+
width: 25%;
|
|
441
|
+
height: 25%;
|
|
442
|
+
border-radius: 50%;
|
|
443
|
+
background: ${Si.color};
|
|
444
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.ft-loader div:nth-child(1) {
|
|
448
|
+
left: 2.5%;
|
|
449
|
+
animation: appear 0.6s infinite;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.ft-loader div:nth-child(2) {
|
|
453
|
+
left: 2.5%;
|
|
454
|
+
animation: move 0.6s infinite;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.ft-loader div:nth-child(3) {
|
|
458
|
+
left: 37.5%;
|
|
459
|
+
animation: move 0.6s infinite;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.ft-loader div:nth-child(4) {
|
|
463
|
+
left: 72.5%;
|
|
464
|
+
animation: disappear 0.6s infinite;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
@keyframes appear {
|
|
468
|
+
0% {
|
|
469
|
+
transform: scale(0);
|
|
470
|
+
}
|
|
471
|
+
100% {
|
|
472
|
+
transform: scale(1);
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
@keyframes disappear {
|
|
477
|
+
0% {
|
|
478
|
+
transform: scale(1);
|
|
479
|
+
}
|
|
480
|
+
100% {
|
|
481
|
+
transform: scale(0);
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
@keyframes move {
|
|
486
|
+
0% {
|
|
487
|
+
transform: translate(0, 0);
|
|
488
|
+
}
|
|
489
|
+
100% {
|
|
490
|
+
transform: translate(calc(0.35 * ${Si.size}), 0);
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
`}getTemplate(){return F`
|
|
494
|
+
<div class="ft-loader">
|
|
495
|
+
<div></div>
|
|
496
|
+
<div></div>
|
|
497
|
+
<div></div>
|
|
498
|
+
<div></div>
|
|
499
|
+
</div>
|
|
500
|
+
`}};ki=Oi([pt("ft-loader")],ki);var Ci=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const Ei=dt.extend("--ft-button-color",ut.colorPrimary),Ri={backgroundColor:dt.extend("--ft-button-background-color",ut.colorSurface),borderRadius:dt.extend("--ft-button-border-radius",ut.borderRadiusL),color:Ei,fontSize:dt.extend("--ft-button-font-size",ii.fontSize),iconSize:dt.create("--ft-button-icon-size","SIZE","24px"),rippleColor:dt.extend("--ft-button-ripple-color",Ei),opacityDisabled:dt.external(ut.colorOpacityDisabled,"Design system")},zi=dt.extend("--ft-button-primary-color",dt.extend("--ft-button-color",ut.colorOnPrimary)),Ni=dt.extend("--ft-button-primary-background-color",dt.extend("--ft-button-background-color",ut.colorPrimary)),Mi=zi,Ti=(dt.extend("--ft-button-primary-ripple-color",zi),dt.extend("--ft-button-dense-border-radius",dt.extend("--ft-button-border-radius",ut.borderRadiusM)));let Ai=class extends ft{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.disabled=!1,this.dense=!1,this.round=!1,this.label="",this.icon=void 0,this.trailingIcon=!1,this.loading=!1,this.tooltipPosition="bottom",this.onclick=t=>{this.isDisabled()&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}}getStyles(){return[mt,s`
|
|
501
|
+
:host {
|
|
502
|
+
display: inline-block;
|
|
503
|
+
max-width: 100%;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
button {
|
|
507
|
+
box-shadow: 0px 0px 0px transparent;
|
|
508
|
+
border: 0px solid transparent;
|
|
509
|
+
text-shadow: 0px 0px 0px transparent;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
button:hover {
|
|
513
|
+
box-shadow: 0px 0px 0px transparent;
|
|
514
|
+
border: 0px solid transparent;
|
|
515
|
+
text-shadow: 0px 0px 0px transparent;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
button:active {
|
|
519
|
+
outline: none;
|
|
520
|
+
border: none;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
button:focus {
|
|
524
|
+
outline: 0;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.ft-button {
|
|
528
|
+
position: relative;
|
|
529
|
+
display: flex;
|
|
530
|
+
justify-content: center;
|
|
531
|
+
align-items: center;
|
|
532
|
+
width: 100%;
|
|
533
|
+
overflow: hidden;
|
|
534
|
+
box-sizing: border-box;
|
|
535
|
+
border: none;
|
|
536
|
+
|
|
537
|
+
--ft-button-internal-font-size: ${Ri.fontSize};
|
|
538
|
+
--ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
|
|
539
|
+
--ft-button-internal-color: ${Ri.color};
|
|
540
|
+
--mdc-icon-size: ${Ri.iconSize};
|
|
541
|
+
--ft-button-internal-vertical-padding: 6px;
|
|
542
|
+
--ft-button-internal-horizontal-padding: 8px;
|
|
543
|
+
${ht(Kt.color,Ri.rippleColor)};
|
|
544
|
+
--ft-button-internal-content-height: max(var(--ft-button-internal-line-height), var(--mdc-icon-size));
|
|
545
|
+
|
|
546
|
+
border-radius: ${Ri.borderRadius};
|
|
547
|
+
padding: var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);
|
|
548
|
+
background-color: ${Ri.backgroundColor};
|
|
549
|
+
color: var(--ft-button-internal-color);
|
|
550
|
+
-webkit-mask-image: radial-gradient(white, black);
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.ft-button:not([disabled]):hover {
|
|
554
|
+
cursor: pointer;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.ft-button--dense {
|
|
558
|
+
--ft-button-internal-vertical-padding: 2px;
|
|
559
|
+
--ft-button-internal-horizontal-padding: 4px;
|
|
560
|
+
border-radius: ${Ti};
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.ft-button--round {
|
|
564
|
+
border-radius: calc(var(--ft-button-internal-content-height) / 2 + var(--ft-button-internal-vertical-padding));
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.ft-button[disabled] {
|
|
568
|
+
filter: grayscale(1);
|
|
569
|
+
opacity: ${Ri.opacityDisabled};
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.ft-button.ft-button--primary {
|
|
573
|
+
background-color: ${Ni};
|
|
574
|
+
--ft-button-internal-color: ${Mi};
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.ft-button.ft-button--outlined {
|
|
578
|
+
border: 1px solid var(--ft-button-internal-color);
|
|
579
|
+
padding: calc(var(--ft-button-internal-vertical-padding) - 1px) calc(var(--ft-button-internal-horizontal-padding) - 1px);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.ft-button:focus {
|
|
583
|
+
outline: none;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.ft-button--label {
|
|
587
|
+
overflow: hidden;
|
|
588
|
+
white-space: nowrap;
|
|
589
|
+
text-overflow: ellipsis;
|
|
590
|
+
display: block;
|
|
591
|
+
margin: 0 var(--ft-button-internal-horizontal-padding);
|
|
592
|
+
${ht(ii.fontSize,"var(--ft-button-internal-font-size)")};
|
|
593
|
+
${ht(ii.lineHeight,"var(--ft-button-internal-content-height)")};
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.ft-button--safari-fix .ft-button--label {
|
|
597
|
+
margin-right: 0;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.ft-button--safari-fix .ft-button--label:after {
|
|
601
|
+
content: "\\0000a0";
|
|
602
|
+
display: inline-block;
|
|
603
|
+
width: 0;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.ft-button--label[hidden] {
|
|
607
|
+
display: none;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
mwc-icon {
|
|
611
|
+
flex-shrink: 0;
|
|
612
|
+
width: var(--mdc-icon-size);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.ft-button--label[hidden] + mwc-icon {
|
|
616
|
+
margin: 0 calc(var(--ft-button-internal-horizontal-padding) * -1);
|
|
617
|
+
padding: 0 var(--ft-button-internal-vertical-padding);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.ft-button:not(.ft-button--trailing-icon) mwc-icon,
|
|
621
|
+
.ft-button:not(.ft-button--trailing-icon) ft-loader {
|
|
622
|
+
order: -1;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
ft-loader {
|
|
626
|
+
${ht(Si.size,Ri.iconSize)};
|
|
627
|
+
${ht(Si.color,"var(--ft-button-internal-color)")};
|
|
628
|
+
}
|
|
629
|
+
`]}getTemplate(){const t={"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-button--safari-fix":bt,"ft-no-text-select":!0};return this.addTooltip(F`
|
|
630
|
+
<button part="button"
|
|
631
|
+
class="${Ot(t)}"
|
|
632
|
+
aria-label="${this.getLabel()}"
|
|
633
|
+
?disabled=${this.isDisabled()}>
|
|
634
|
+
<ft-ripple part="ripple" ?disabled=${this.isDisabled()}></ft-ripple>
|
|
635
|
+
<ft-typography part="label"
|
|
636
|
+
variant="button"
|
|
637
|
+
class="ft-button--label"
|
|
638
|
+
?hidden=${!this.hasTextContent()}>
|
|
639
|
+
<slot @slotchange=${this.onSlotchange}></slot>
|
|
640
|
+
</ft-typography>
|
|
641
|
+
${this.resolveIcon()}
|
|
642
|
+
</button>
|
|
643
|
+
`)}addTooltip(t){return this.hasTextContent()||0===this.getLabel().trim().length?t:F`
|
|
644
|
+
<ft-tooltip part="tooltip"
|
|
645
|
+
text="${this.getLabel()}"
|
|
646
|
+
position="${this.tooltipPosition}">
|
|
647
|
+
${t}
|
|
648
|
+
</ft-tooltip>
|
|
649
|
+
`}resolveIcon(){return this.loading?F`
|
|
650
|
+
<ft-loader></ft-loader> `:this.icon?F`
|
|
651
|
+
<mwc-icon>${this.icon}</mwc-icon> `:U}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};Ai.elementDefinitions={"ft-ripple":Zt,"ft-tooltip":$i,"ft-typography":ui,"mwc-icon":mi,"ft-loader":ki},Ci([rt({type:Boolean})],Ai.prototype,"primary",void 0),Ci([rt({type:Boolean})],Ai.prototype,"outlined",void 0),Ci([rt({type:Boolean})],Ai.prototype,"disabled",void 0),Ci([rt({type:Boolean})],Ai.prototype,"dense",void 0),Ci([rt({type:Boolean})],Ai.prototype,"round",void 0),Ci([rt({type:String})],Ai.prototype,"label",void 0),Ci([rt({type:String})],Ai.prototype,"icon",void 0),Ci([rt({type:Boolean})],Ai.prototype,"trailingIcon",void 0),Ci([rt({type:Boolean})],Ai.prototype,"loading",void 0),Ci([rt({type:String})],Ai.prototype,"tooltipPosition",void 0),Ci([st(".ft-button")],Ai.prototype,"button",void 0),Ci([st(".ft-button--label slot")],Ai.prototype,"slottedContent",void 0),Ai=Ci([pt("ft-button")],Ai);var Fi=function(t,e,i,r){for(var o,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(n<3?o(s):n>3?o(e,i,s):o(e,i))||s);return n>3&&s&&Object.defineProperty(e,i,s),s};const ji={buttonsColor:dt.extend("--ft-snap-scroll-buttons-color",ut.colorPrimary),buttonsZIndex:dt.create("--ft-snap-scroll-buttons-z-index","COLOR","1"),gap:dt.create("--ft-snap-scroll-gap","SIZE","0"),colorSurface:dt.external(ut.colorSurface,"Design system")};class Ui extends CustomEvent{constructor(t,e){super("current-element-change",{detail:{index:t,element:e}})}}t.FtSnapScroll=class extends ft{constructor(){super(...arguments),this.horizontal=!1,this.hideScrollbar=!1,this.controls=!1,this.limitSize=!1,this.elements=[],this.currentElement=0,this.withScroll=!1,this.startReached=!0,this.endReached=!0,this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight",this.updateScrollCallback=()=>this.onScroll(),this.resizeObserver=new ResizeObserver((()=>this.scheduleUpdateScroll())),this.scrollDebouncer=new lt(200),this.updateScrollDebouncer=new lt(100)}getStyles(){return s`
|
|
652
|
+
.ft-snap-scroll {
|
|
653
|
+
box-sizing: border-box;
|
|
654
|
+
position: relative;
|
|
655
|
+
display: flex;
|
|
656
|
+
|
|
657
|
+
--ft-snap-scroll-transparent-color: transparent;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.ft-snap-scroll.ft-snap-scroll--safari-fix {
|
|
661
|
+
/* Safari handles "transparent" as rgba(0,0,0,0) so it's ugly in linear-gradiant with default --ft-color-surface */
|
|
662
|
+
/* this value should be overridden with --ft-color-surface with alpha set to 0 when needed */
|
|
663
|
+
--ft-snap-scroll-transparent-color: rgba(255, 255, 255, 0);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.ft-snap-scroll,
|
|
667
|
+
.ft-snap-scroll--content {
|
|
668
|
+
overflow: hidden;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.ft-snap-scroll--limit-size,
|
|
672
|
+
.ft-snap-scroll--limit-size .ft-snap-scroll--content {
|
|
673
|
+
width: 100%;
|
|
674
|
+
height: 100%;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.ft-snap-scroll--content {
|
|
678
|
+
flex-grow: 1;
|
|
679
|
+
flex-shrink: 1;
|
|
680
|
+
box-sizing: border-box;
|
|
681
|
+
scroll-snap-align: start;
|
|
682
|
+
display: flex;
|
|
683
|
+
flex-wrap: nowrap;
|
|
684
|
+
align-items: flex-start;
|
|
685
|
+
justify-content: flex-start;
|
|
686
|
+
gap: ${ji.gap};
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content::-webkit-scrollbar {
|
|
690
|
+
display: none;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content {
|
|
694
|
+
-ms-overflow-style: none;
|
|
695
|
+
scrollbar-width: none;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.ft-snap-scroll--content::slotted(*) {
|
|
699
|
+
flex-shrink: 0;
|
|
700
|
+
flex-grow: 1;
|
|
701
|
+
max-height: 100%;
|
|
702
|
+
max-width: 100%;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.ft-snap-scroll--horizontal,
|
|
706
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--content {
|
|
707
|
+
width: 100%;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.ft-snap-scroll--vertical,
|
|
711
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--content {
|
|
712
|
+
height: 100%;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--content {
|
|
716
|
+
flex-direction: row;
|
|
717
|
+
overflow-x: auto;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--content {
|
|
721
|
+
flex-direction: column;
|
|
722
|
+
overflow-y: auto;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.ft-snap-scroll--previous,
|
|
726
|
+
.ft-snap-scroll--next {
|
|
727
|
+
position: absolute;
|
|
728
|
+
display: flex;
|
|
729
|
+
z-index: ${ji.buttonsZIndex};
|
|
730
|
+
opacity: 1;
|
|
731
|
+
transition: background-color .5s ease-in-out, opacity .5s ease-in-out, z-index .5s ease-in-out;
|
|
732
|
+
${ht(Ri.backgroundColor,"transparent")};
|
|
733
|
+
${ht(Ri.color,ji.buttonsColor)};
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.ft-snap-scroll--previous[hidden],
|
|
737
|
+
.ft-snap-scroll--next[hidden] {
|
|
738
|
+
z-index: -1;
|
|
739
|
+
opacity: 0;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--previous {
|
|
743
|
+
top: 0;
|
|
744
|
+
left: -1px;
|
|
745
|
+
bottom: 0;
|
|
746
|
+
background: linear-gradient(to right, ${ji.colorSurface} 50%, var(--ft-snap-scroll-transparent-color));
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--previous {
|
|
750
|
+
top: -1px;
|
|
751
|
+
left: 0;
|
|
752
|
+
right: 0;
|
|
753
|
+
background: linear-gradient(to bottom, ${ji.colorSurface} 50%, var(--ft-snap-scroll-transparent-color));
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--next {
|
|
757
|
+
top: 0;
|
|
758
|
+
right: -1px;
|
|
759
|
+
bottom: 0;
|
|
760
|
+
background: linear-gradient(to left, ${ji.colorSurface} 50%, var(--ft-snap-scroll-transparent-color));
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--next {
|
|
764
|
+
left: 0;
|
|
765
|
+
right: 0;
|
|
766
|
+
bottom: -1px;
|
|
767
|
+
background: linear-gradient(to top, ${ji.colorSurface} 50%, var(--ft-snap-scroll-transparent-color));
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--previous:hover,
|
|
771
|
+
.ft-snap-scroll--horizontal .ft-snap-scroll--next:hover,
|
|
772
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--previous:hover,
|
|
773
|
+
.ft-snap-scroll--vertical .ft-snap-scroll--next:hover {
|
|
774
|
+
background-color: ${ji.colorSurface};
|
|
775
|
+
}
|
|
776
|
+
`}scrollToIndex(t){this.scrollToElement(this.elements[t])}scrollIndexIntoView(t){let e=this.elements[t];if(e){const t=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.nextSize,i=this.contentSlot[this.scrollAttribute]+this.prevSize;(e[this.offsetAttribute]<i||e[this.offsetAttribute]+e[this.sizeAttribute]>t)&&this.scrollToElement(e)}}previous(){this.scrollToElement(this.elements[Math.max(0,this.closestIndexFromStart()-1)])}next(){this.scrollToElement(this.elements[Math.min(this.closestIndexFromStart()+1,this.elements.length-1)])}getTemplate(){const t=Ot({"ft-snap-scroll":!0,"ft-snap-scroll--horizontal":this.horizontal,"ft-snap-scroll--vertical":!this.horizontal,"ft-snap-scroll--hide-scrollbar":this.hideScrollbar,"ft-snap-scroll--limit-size":this.limitSize,"ft-snap-scroll--safari-fix":bt}),e=this.controls&&this.withScroll;return F`
|
|
777
|
+
<div part="container" class="${t}">
|
|
778
|
+
<ft-button
|
|
779
|
+
class="ft-snap-scroll--previous"
|
|
780
|
+
part="controls"
|
|
781
|
+
primary
|
|
782
|
+
icon="${this.horizontal?"arrow_back_ios_new":"expand_less"}"
|
|
783
|
+
?hidden=${!e||this.startReached}
|
|
784
|
+
?disabled=${!e||this.startReached}
|
|
785
|
+
@click=${this.previous}
|
|
786
|
+
></ft-button>
|
|
787
|
+
<slot class="ft-snap-scroll--content"
|
|
788
|
+
part="content"
|
|
789
|
+
@slotchange=${this.onSlotChange}></slot>
|
|
790
|
+
<ft-button
|
|
791
|
+
class="ft-snap-scroll--next"
|
|
792
|
+
part="controls"
|
|
793
|
+
primary
|
|
794
|
+
icon="${this.horizontal?"arrow_forward_ios":"expand_more"}"
|
|
795
|
+
?hidden=${!e||this.endReached}
|
|
796
|
+
?disabled=${!e||this.endReached}
|
|
797
|
+
@click=${this.next}
|
|
798
|
+
></ft-button>
|
|
799
|
+
</div>
|
|
800
|
+
`}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new Ui(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}},t.FtSnapScroll.elementDefinitions={"ft-button":Ai},Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"horizontal",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"hideScrollbar",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"controls",void 0),Fi([rt({type:Boolean})],t.FtSnapScroll.prototype,"limitSize",void 0),Fi([ot()],t.FtSnapScroll.prototype,"elements",void 0),Fi([ot()],t.FtSnapScroll.prototype,"currentElement",void 0),Fi([ot()],t.FtSnapScroll.prototype,"withScroll",void 0),Fi([ot()],t.FtSnapScroll.prototype,"startReached",void 0),Fi([ot()],t.FtSnapScroll.prototype,"endReached",void 0),Fi([st(".ft-snap-scroll--content")],t.FtSnapScroll.prototype,"contentSlot",void 0),t.FtSnapScroll=Fi([pt("ft-snap-scroll")],t.FtSnapScroll),t.CurrentElementChange=Ui,t.FtSnapScrollCssVariables=ji,Object.defineProperty(t,"t",{value:!0})}({});
|