@fluid-topics/ft-loader
Advanced tools
Comparing version 0.1.6 to 0.1.7
@@ -34,2 +34,92 @@ !function(t){ | ||
* SPDX-License-Identifier: BSD-3-Clause | ||
*/class ot extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:n}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const o=this.renderOptions.creationScope=this.attachShadow({...n,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Y)){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]),L`${t.map((t=>L`<style>${t}</style>`))} ${this.getTemplate()}`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var rt,st;s`.ft-no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(st=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===st||st.toString());var at=function(t,i,e,n){for(var o,r=arguments.length,s=r<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(i,e,s):o(i,e))||s);return r>3&&s&&Object.defineProperty(i,e,s),s};const lt={color:et.extend("--ft-loader-color",nt.colorPrimary),size:et.create("--ft-loader-size","SIZE","80px")};var ct;t.FtLoader=class extends ot{getStyles(){return s`:host{line-height:0}.ft-loader{display:inline-block;position:relative;width:${lt.size};height:${lt.size}}.ft-loader div{position:absolute;top:37.5%;width:25%;height:25%;border-radius:50%;background:${lt.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 * ${lt.size}),0)}}`}getTemplate(){return L`<div class="ft-loader"><div></div><div></div><div></div><div></div></div>`}},t.FtLoader=at([(ct="ft-loader",t=>{window.customElements.get(ct)||window.customElements.define(ct,t)})],t.FtLoader),t.FtLoaderCssVariables=lt,Object.defineProperty(t,"t",{value:!0})}({}); | ||
*/class ot extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:n}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const o=this.renderOptions.creationScope=this.attachShadow({...n,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Y)){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]),L` | ||
${t.map((t=>L` | ||
<style>${t}</style> | ||
`))} | ||
${this.getTemplate()} | ||
`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var rt,st;s` | ||
.ft-no-text-select { | ||
-webkit-touch-callout: none; | ||
-webkit-user-select: none; | ||
-khtml-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; | ||
} | ||
`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(st=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===st||st.toString());var at=function(t,i,e,n){for(var o,r=arguments.length,s=r<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(i,e,s):o(i,e))||s);return r>3&&s&&Object.defineProperty(i,e,s),s};const lt={color:et.extend("--ft-loader-color",nt.colorPrimary),size:et.create("--ft-loader-size","SIZE","80px")};var ct;t.FtLoader=class extends ot{getStyles(){return s` | ||
:host { | ||
line-height: 0; | ||
} | ||
.ft-loader { | ||
display: inline-block; | ||
position: relative; | ||
width: ${lt.size}; | ||
height: ${lt.size}; | ||
} | ||
.ft-loader div { | ||
position: absolute; | ||
top: 37.5%; | ||
width: 25%; | ||
height: 25%; | ||
border-radius: 50%; | ||
background: ${lt.color}; | ||
animation-timing-function: cubic-bezier(0, 1, 1, 0); | ||
} | ||
.ft-loader div:nth-child(1) { | ||
left: 2.5%; | ||
animation: appear 0.6s infinite; | ||
} | ||
.ft-loader div:nth-child(2) { | ||
left: 2.5%; | ||
animation: move 0.6s infinite; | ||
} | ||
.ft-loader div:nth-child(3) { | ||
left: 37.5%; | ||
animation: move 0.6s infinite; | ||
} | ||
.ft-loader div:nth-child(4) { | ||
left: 72.5%; | ||
animation: disappear 0.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(0.35 * ${lt.size}), 0); | ||
} | ||
} | ||
`}getTemplate(){return L` | ||
<div class="ft-loader"> | ||
<div></div> | ||
<div></div> | ||
<div></div> | ||
<div></div> | ||
</div> | ||
`}},t.FtLoader=at([(ct="ft-loader",t=>{window.customElements.get(ct)||window.customElements.define(ct,t)})],t.FtLoader),t.FtLoaderCssVariables=lt,Object.defineProperty(t,"t",{value:!0})}({}); |
{ | ||
"name": "@fluid-topics/ft-loader", | ||
"version": "0.1.6", | ||
"version": "0.1.7", | ||
"description": "A fluid-topics loader component", | ||
@@ -22,6 +22,6 @@ "keywords": [ | ||
"dependencies": { | ||
"@fluid-topics/ft-wc-utils": "^0.1.6", | ||
"@fluid-topics/ft-wc-utils": "^0.1.7", | ||
"lit": "^2.0.2" | ||
}, | ||
"gitHead": "c441937eb1375dc40ff477dec50b917f2adf3b38" | ||
"gitHead": "78397cca67971191c46739cfb6c87481aaa65745" | ||
} |
44125
6
409