@fluid-topics/ft-loader 0.1.3 → 0.1.7
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-loader.light.js +77 -0
- package/build/ft-loader.min.js +91 -1
- package/package.json +3 -3
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
!function(i,e,t){var a=function(i,e,t,a){for(var n,r=arguments.length,o=r<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,t):a,l=i.length-1;l>=0;l--)(n=i[l])&&(o=(r<3?n(o):r>3?n(e,t,o):n(e,t))||o);return r>3&&o&&Object.defineProperty(e,t,o),o};const n={color:t.FtCssVariable.extend("--ft-loader-color",t.designSystemVariables.colorPrimary),size:t.FtCssVariable.create("--ft-loader-size","SIZE","80px")};i.FtLoader=class extends t.FtLitElement{getStyles(){return e.css`
|
|
2
|
+
:host {
|
|
3
|
+
line-height: 0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.ft-loader {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
position: relative;
|
|
9
|
+
|
|
10
|
+
width: ${n.size};
|
|
11
|
+
height: ${n.size};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ft-loader div {
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 37.5%;
|
|
17
|
+
width: 25%;
|
|
18
|
+
height: 25%;
|
|
19
|
+
border-radius: 50%;
|
|
20
|
+
background: ${n.color};
|
|
21
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ft-loader div:nth-child(1) {
|
|
25
|
+
left: 2.5%;
|
|
26
|
+
animation: appear 0.6s infinite;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ft-loader div:nth-child(2) {
|
|
30
|
+
left: 2.5%;
|
|
31
|
+
animation: move 0.6s infinite;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ft-loader div:nth-child(3) {
|
|
35
|
+
left: 37.5%;
|
|
36
|
+
animation: move 0.6s infinite;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ft-loader div:nth-child(4) {
|
|
40
|
+
left: 72.5%;
|
|
41
|
+
animation: disappear 0.6s infinite;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes appear {
|
|
45
|
+
0% {
|
|
46
|
+
transform: scale(0);
|
|
47
|
+
}
|
|
48
|
+
100% {
|
|
49
|
+
transform: scale(1);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@keyframes disappear {
|
|
54
|
+
0% {
|
|
55
|
+
transform: scale(1);
|
|
56
|
+
}
|
|
57
|
+
100% {
|
|
58
|
+
transform: scale(0);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@keyframes move {
|
|
63
|
+
0% {
|
|
64
|
+
transform: translate(0, 0);
|
|
65
|
+
}
|
|
66
|
+
100% {
|
|
67
|
+
transform: translate(calc(0.35 * ${n.size}), 0);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
`}getTemplate(){return e.html`
|
|
71
|
+
<div class="ft-loader">
|
|
72
|
+
<div></div>
|
|
73
|
+
<div></div>
|
|
74
|
+
<div></div>
|
|
75
|
+
<div></div>
|
|
76
|
+
</div>
|
|
77
|
+
`}},i.FtLoader=a([t.customElement("ft-loader")],i.FtLoader),i.FtLoaderCssVariables=n,Object.defineProperty(i,"i",{value:!0})}({},ftGlobals.lit,ftGlobals.wcUtils);
|
package/build/ft-loader.min.js
CHANGED
|
@@ -31,4 +31,94 @@ var G,Q;null==q||q(D,K),(null!==(b=globalThis.litHtmlVersions)&&void 0!==b?b:glo
|
|
|
31
31
|
* @license
|
|
32
32
|
* Copyright 2021 Google LLC
|
|
33
33
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
34
|
-
*/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
|
|
34
|
+
*/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`
|
|
35
|
+
${t.map((t=>L`
|
|
36
|
+
<style>${t}</style>
|
|
37
|
+
`))}
|
|
38
|
+
${this.getTemplate()}
|
|
39
|
+
`}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`
|
|
40
|
+
.ft-no-text-select {
|
|
41
|
+
-webkit-touch-callout: none;
|
|
42
|
+
-webkit-user-select: none;
|
|
43
|
+
-khtml-user-select: none;
|
|
44
|
+
-moz-user-select: none;
|
|
45
|
+
-ms-user-select: none;
|
|
46
|
+
user-select: none;
|
|
47
|
+
}
|
|
48
|
+
`,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`
|
|
49
|
+
:host {
|
|
50
|
+
line-height: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ft-loader {
|
|
54
|
+
display: inline-block;
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
width: ${lt.size};
|
|
58
|
+
height: ${lt.size};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ft-loader div {
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 37.5%;
|
|
64
|
+
width: 25%;
|
|
65
|
+
height: 25%;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
background: ${lt.color};
|
|
68
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.ft-loader div:nth-child(1) {
|
|
72
|
+
left: 2.5%;
|
|
73
|
+
animation: appear 0.6s infinite;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ft-loader div:nth-child(2) {
|
|
77
|
+
left: 2.5%;
|
|
78
|
+
animation: move 0.6s infinite;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.ft-loader div:nth-child(3) {
|
|
82
|
+
left: 37.5%;
|
|
83
|
+
animation: move 0.6s infinite;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ft-loader div:nth-child(4) {
|
|
87
|
+
left: 72.5%;
|
|
88
|
+
animation: disappear 0.6s infinite;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes appear {
|
|
92
|
+
0% {
|
|
93
|
+
transform: scale(0);
|
|
94
|
+
}
|
|
95
|
+
100% {
|
|
96
|
+
transform: scale(1);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@keyframes disappear {
|
|
101
|
+
0% {
|
|
102
|
+
transform: scale(1);
|
|
103
|
+
}
|
|
104
|
+
100% {
|
|
105
|
+
transform: scale(0);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes move {
|
|
110
|
+
0% {
|
|
111
|
+
transform: translate(0, 0);
|
|
112
|
+
}
|
|
113
|
+
100% {
|
|
114
|
+
transform: translate(calc(0.35 * ${lt.size}), 0);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
`}getTemplate(){return L`
|
|
118
|
+
<div class="ft-loader">
|
|
119
|
+
<div></div>
|
|
120
|
+
<div></div>
|
|
121
|
+
<div></div>
|
|
122
|
+
<div></div>
|
|
123
|
+
</div>
|
|
124
|
+
`}},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})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-loader",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "A fluid-topics loader component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "^0.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.1.7",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
|
|
26
26
|
}
|