@fluid-topics/ft-loader 0.3.12 → 0.3.13

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.
Files changed (11) hide show
  1. package/build/ft-loader.css.d.ts +6 -0
  2. package/build/ft-loader.css.js +78 -0
  3. package/build/ft-loader.d.ts +2 -7
  4. package/build/ft-loader.js +4 -79
  5. package/build/ft-loader.light.js +61 -61
  6. package/build/ft-loader.min.js +61 -61
  7. package/build/ft-loader.properties.d.ts +3 -0
  8. package/build/ft-loader.properties.js +2 -0
  9. package/build/index.d.ts +2 -0
  10. package/build/index.js +2 -0
  11. package/package.json +3 -3
package/build/ft-loader.css.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const FtLoaderCssVariables: {
2
+ color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
3
+ size: import("@fluid-topics/ft-wc-utils").FtCssVariable;
4
+ };
5
+ export declare const styles: import("lit").CSSResult;
6
+ //# sourceMappingURL=ft-loader.css.d.ts.map
package/build/ft-loader.css.js ADDED
@@ -0,0 +1,78 @@
1
+ import { css } from "lit";
2
+ import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
3
+ export const FtLoaderCssVariables = {
4
+ color: FtCssVariableFactory.extend("--ft-loader-color", designSystemVariables.colorPrimary),
5
+ size: FtCssVariableFactory.create("--ft-loader-size", "SIZE", "80px"),
6
+ };
7
+ // language=CSS
8
+ export const styles = css `
9
+ :host {
10
+ line-height: 0;
11
+ }
12
+
13
+ .ft-loader {
14
+ display: inline-block;
15
+ position: relative;
16
+
17
+ width: ${FtLoaderCssVariables.size};
18
+ height: ${FtLoaderCssVariables.size};
19
+ }
20
+
21
+ .ft-loader div {
22
+ position: absolute;
23
+ top: 37.5%;
24
+ width: 25%;
25
+ height: 25%;
26
+ border-radius: 50%;
27
+ background: ${FtLoaderCssVariables.color};
28
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
29
+ }
30
+
31
+ .ft-loader div:nth-child(1) {
32
+ left: 2.5%;
33
+ animation: appear 0.6s infinite;
34
+ }
35
+
36
+ .ft-loader div:nth-child(2) {
37
+ left: 2.5%;
38
+ animation: move 0.6s infinite;
39
+ }
40
+
41
+ .ft-loader div:nth-child(3) {
42
+ left: 37.5%;
43
+ animation: move 0.6s infinite;
44
+ }
45
+
46
+ .ft-loader div:nth-child(4) {
47
+ left: 72.5%;
48
+ animation: disappear 0.6s infinite;
49
+ }
50
+
51
+ @keyframes appear {
52
+ 0% {
53
+ transform: scale(0);
54
+ }
55
+ 100% {
56
+ transform: scale(1);
57
+ }
58
+ }
59
+
60
+ @keyframes disappear {
61
+ 0% {
62
+ transform: scale(1);
63
+ }
64
+ 100% {
65
+ transform: scale(0);
66
+ }
67
+ }
68
+
69
+ @keyframes move {
70
+ 0% {
71
+ transform: translate(0, 0);
72
+ }
73
+ 100% {
74
+ transform: translate(calc(0.35 * ${FtLoaderCssVariables.size}), 0);
75
+ }
76
+ }
77
+ `;
78
+ //# sourceMappingURL=ft-loader.css.js.map
package/build/ft-loader.d.ts CHANGED
@@ -1,12 +1,7 @@
1
1
  import { FtLitElement } from "@fluid-topics/ft-wc-utils";
2
- export interface FtLoaderProperties {
3
- }
4
- export declare const FtLoaderCssVariables: {
5
- color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
6
- size: import("@fluid-topics/ft-wc-utils").FtCssVariable;
7
- };
2
+ import { FtLoaderProperties } from "./ft-loader.properties";
8
3
  export declare class FtLoader extends FtLitElement implements FtLoaderProperties {
9
- static get styles(): import("lit").CSSResult;
4
+ static styles: import("lit").CSSResult;
10
5
  render(): import("lit-html").TemplateResult<1>;
11
6
  }
12
7
  //# sourceMappingURL=ft-loader.d.ts.map
package/build/ft-loader.js CHANGED
@@ -1,83 +1,7 @@
1
- import { css, html } from "lit";
2
- import { designSystemVariables, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
3
- export const FtLoaderCssVariables = {
4
- color: FtCssVariableFactory.extend("--ft-loader-color", designSystemVariables.colorPrimary),
5
- size: FtCssVariableFactory.create("--ft-loader-size", "SIZE", "80px"),
6
- };
1
+ import { html } from "lit";
2
+ import { FtLitElement } from "@fluid-topics/ft-wc-utils";
3
+ import { styles } from "./ft-loader.css";
7
4
  export class FtLoader extends FtLitElement {
8
- static get styles() {
9
- // language=CSS
10
- return css `
11
- :host {
12
- line-height: 0;
13
- }
14
-
15
- .ft-loader {
16
- display: inline-block;
17
- position: relative;
18
-
19
- width: ${FtLoaderCssVariables.size};
20
- height: ${FtLoaderCssVariables.size};
21
- }
22
-
23
- .ft-loader div {
24
- position: absolute;
25
- top: 37.5%;
26
- width: 25%;
27
- height: 25%;
28
- border-radius: 50%;
29
- background: ${FtLoaderCssVariables.color};
30
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
31
- }
32
-
33
- .ft-loader div:nth-child(1) {
34
- left: 2.5%;
35
- animation: appear 0.6s infinite;
36
- }
37
-
38
- .ft-loader div:nth-child(2) {
39
- left: 2.5%;
40
- animation: move 0.6s infinite;
41
- }
42
-
43
- .ft-loader div:nth-child(3) {
44
- left: 37.5%;
45
- animation: move 0.6s infinite;
46
- }
47
-
48
- .ft-loader div:nth-child(4) {
49
- left: 72.5%;
50
- animation: disappear 0.6s infinite;
51
- }
52
-
53
- @keyframes appear {
54
- 0% {
55
- transform: scale(0);
56
- }
57
- 100% {
58
- transform: scale(1);
59
- }
60
- }
61
-
62
- @keyframes disappear {
63
- 0% {
64
- transform: scale(1);
65
- }
66
- 100% {
67
- transform: scale(0);
68
- }
69
- }
70
-
71
- @keyframes move {
72
- 0% {
73
- transform: translate(0, 0);
74
- }
75
- 100% {
76
- transform: translate(calc(0.35 * ${FtLoaderCssVariables.size}), 0);
77
- }
78
- }
79
- `;
80
- }
81
5
  render() {
82
6
  return html `
83
7
  <div class="ft-loader">
@@ -89,4 +13,5 @@ export class FtLoader extends FtLitElement {
89
13
  `;
90
14
  }
91
15
  }
16
+ FtLoader.styles = styles;
92
17
  //# sourceMappingURL=ft-loader.js.map
package/build/ft-loader.light.js CHANGED
@@ -1,77 +1,77 @@
1
- !function(i,e,t){const a={color:e.FtCssVariableFactory.extend("--ft-loader-color",e.designSystemVariables.colorPrimary),size:e.FtCssVariableFactory.create("--ft-loader-size","SIZE","80px")};class n extends e.FtLitElement{static get styles(){return t.css`
2
- :host {
3
- line-height: 0;
4
- }
1
+ !function(i,e,t){const a={color:e.FtCssVariableFactory.extend("--ft-loader-color",e.designSystemVariables.colorPrimary),size:e.FtCssVariableFactory.create("--ft-loader-size","SIZE","80px")},n=t.css`
2
+ :host {
3
+ line-height: 0;
4
+ }
5
5
 
6
- .ft-loader {
7
- display: inline-block;
8
- position: relative;
6
+ .ft-loader {
7
+ display: inline-block;
8
+ position: relative;
9
9
 
10
- width: ${a.size};
11
- height: ${a.size};
12
- }
10
+ width: ${a.size};
11
+ height: ${a.size};
12
+ }
13
13
 
14
- .ft-loader div {
15
- position: absolute;
16
- top: 37.5%;
17
- width: 25%;
18
- height: 25%;
19
- border-radius: 50%;
20
- background: ${a.color};
21
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
22
- }
14
+ .ft-loader div {
15
+ position: absolute;
16
+ top: 37.5%;
17
+ width: 25%;
18
+ height: 25%;
19
+ border-radius: 50%;
20
+ background: ${a.color};
21
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
22
+ }
23
23
 
24
- .ft-loader div:nth-child(1) {
25
- left: 2.5%;
26
- animation: appear 0.6s infinite;
27
- }
24
+ .ft-loader div:nth-child(1) {
25
+ left: 2.5%;
26
+ animation: appear 0.6s infinite;
27
+ }
28
28
 
29
- .ft-loader div:nth-child(2) {
30
- left: 2.5%;
31
- animation: move 0.6s infinite;
32
- }
29
+ .ft-loader div:nth-child(2) {
30
+ left: 2.5%;
31
+ animation: move 0.6s infinite;
32
+ }
33
33
 
34
- .ft-loader div:nth-child(3) {
35
- left: 37.5%;
36
- animation: move 0.6s infinite;
37
- }
34
+ .ft-loader div:nth-child(3) {
35
+ left: 37.5%;
36
+ animation: move 0.6s infinite;
37
+ }
38
38
 
39
- .ft-loader div:nth-child(4) {
40
- left: 72.5%;
41
- animation: disappear 0.6s infinite;
42
- }
39
+ .ft-loader div:nth-child(4) {
40
+ left: 72.5%;
41
+ animation: disappear 0.6s infinite;
42
+ }
43
43
 
44
- @keyframes appear {
45
- 0% {
46
- transform: scale(0);
47
- }
48
- 100% {
49
- transform: scale(1);
50
- }
51
- }
44
+ @keyframes appear {
45
+ 0% {
46
+ transform: scale(0);
47
+ }
48
+ 100% {
49
+ transform: scale(1);
50
+ }
51
+ }
52
52
 
53
- @keyframes disappear {
54
- 0% {
55
- transform: scale(1);
56
- }
57
- 100% {
58
- transform: scale(0);
59
- }
60
- }
53
+ @keyframes disappear {
54
+ 0% {
55
+ transform: scale(1);
56
+ }
57
+ 100% {
58
+ transform: scale(0);
59
+ }
60
+ }
61
61
 
62
- @keyframes move {
63
- 0% {
64
- transform: translate(0, 0);
65
- }
66
- 100% {
67
- transform: translate(calc(0.35 * ${a.size}), 0);
68
- }
69
- }
70
- `}render(){return t.html`
62
+ @keyframes move {
63
+ 0% {
64
+ transform: translate(0, 0);
65
+ }
66
+ 100% {
67
+ transform: translate(calc(0.35 * ${a.size}), 0);
68
+ }
69
+ }
70
+ `;class o extends e.FtLitElement{render(){return t.html`
71
71
  <div class="ft-loader">
72
72
  <div></div>
73
73
  <div></div>
74
74
  <div></div>
75
75
  <div></div>
76
76
  </div>
77
- `}}e.customElement("ft-loader")(n),i.FtLoader=n,i.FtLoaderCssVariables=a,Object.defineProperty(i,"i",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit);
77
+ `}}o.styles=n,e.customElement("ft-loader")(o),i.FtLoader=o,i.FtLoaderCssVariables=a,i.styles=n,Object.defineProperty(i,"i",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit);
package/build/ft-loader.min.js CHANGED
@@ -66,80 +66,80 @@ var tt,et;null==Y||Y(K,V),(null!==(g=globalThis.litHtmlVersions)&&void 0!==g?g:g
66
66
  -ms-user-select: none;
67
67
  user-select: none;
68
68
  }
69
- `,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===at||at.toString());const ht={color:st.extend("--ft-loader-color",nt.colorPrimary),size:st.create("--ft-loader-size","SIZE","80px")};class dt extends ct{static get styles(){return c`
70
- :host {
71
- line-height: 0;
72
- }
69
+ `,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===at||at.toString());const ht={color:st.extend("--ft-loader-color",nt.colorPrimary),size:st.create("--ft-loader-size","SIZE","80px")},dt=c`
70
+ :host {
71
+ line-height: 0;
72
+ }
73
73
 
74
- .ft-loader {
75
- display: inline-block;
76
- position: relative;
74
+ .ft-loader {
75
+ display: inline-block;
76
+ position: relative;
77
77
 
78
- width: ${ht.size};
79
- height: ${ht.size};
80
- }
78
+ width: ${ht.size};
79
+ height: ${ht.size};
80
+ }
81
81
 
82
- .ft-loader div {
83
- position: absolute;
84
- top: 37.5%;
85
- width: 25%;
86
- height: 25%;
87
- border-radius: 50%;
88
- background: ${ht.color};
89
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
90
- }
82
+ .ft-loader div {
83
+ position: absolute;
84
+ top: 37.5%;
85
+ width: 25%;
86
+ height: 25%;
87
+ border-radius: 50%;
88
+ background: ${ht.color};
89
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
90
+ }
91
91
 
92
- .ft-loader div:nth-child(1) {
93
- left: 2.5%;
94
- animation: appear 0.6s infinite;
95
- }
92
+ .ft-loader div:nth-child(1) {
93
+ left: 2.5%;
94
+ animation: appear 0.6s infinite;
95
+ }
96
96
 
97
- .ft-loader div:nth-child(2) {
98
- left: 2.5%;
99
- animation: move 0.6s infinite;
100
- }
97
+ .ft-loader div:nth-child(2) {
98
+ left: 2.5%;
99
+ animation: move 0.6s infinite;
100
+ }
101
101
 
102
- .ft-loader div:nth-child(3) {
103
- left: 37.5%;
104
- animation: move 0.6s infinite;
105
- }
102
+ .ft-loader div:nth-child(3) {
103
+ left: 37.5%;
104
+ animation: move 0.6s infinite;
105
+ }
106
106
 
107
- .ft-loader div:nth-child(4) {
108
- left: 72.5%;
109
- animation: disappear 0.6s infinite;
110
- }
107
+ .ft-loader div:nth-child(4) {
108
+ left: 72.5%;
109
+ animation: disappear 0.6s infinite;
110
+ }
111
111
 
112
- @keyframes appear {
113
- 0% {
114
- transform: scale(0);
115
- }
116
- 100% {
117
- transform: scale(1);
118
- }
119
- }
112
+ @keyframes appear {
113
+ 0% {
114
+ transform: scale(0);
115
+ }
116
+ 100% {
117
+ transform: scale(1);
118
+ }
119
+ }
120
120
 
121
- @keyframes disappear {
122
- 0% {
123
- transform: scale(1);
124
- }
125
- 100% {
126
- transform: scale(0);
127
- }
128
- }
121
+ @keyframes disappear {
122
+ 0% {
123
+ transform: scale(1);
124
+ }
125
+ 100% {
126
+ transform: scale(0);
127
+ }
128
+ }
129
129
 
130
- @keyframes move {
131
- 0% {
132
- transform: translate(0, 0);
133
- }
134
- 100% {
135
- transform: translate(calc(0.35 * ${ht.size}), 0);
136
- }
137
- }
138
- `}render(){return B`
130
+ @keyframes move {
131
+ 0% {
132
+ transform: translate(0, 0);
133
+ }
134
+ 100% {
135
+ transform: translate(calc(0.35 * ${ht.size}), 0);
136
+ }
137
+ }
138
+ `;class ut extends ct{render(){return B`
139
139
  <div class="ft-loader">
140
140
  <div></div>
141
141
  <div></div>
142
142
  <div></div>
143
143
  <div></div>
144
144
  </div>
145
- `}}var ut;(ut="ft-loader",t=>{window.customElements.get(ut)||window.customElements.define(ut,t)})(dt),t.FtLoader=dt,t.FtLoaderCssVariables=ht,Object.defineProperty(t,"i",{value:!0})}({});
145
+ `}}var pt;ut.styles=dt,(pt="ft-loader",t=>{window.customElements.get(pt)||window.customElements.define(pt,t)})(ut),t.FtLoader=ut,t.FtLoaderCssVariables=ht,t.styles=dt,Object.defineProperty(t,"i",{value:!0})}({});
package/build/ft-loader.properties.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export interface FtLoaderProperties {
2
+ }
3
+ //# sourceMappingURL=ft-loader.properties.d.ts.map
package/build/ft-loader.properties.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ft-loader.properties.js.map
package/build/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
+ export * from "./ft-loader.css";
2
+ export * from "./ft-loader.properties";
1
3
  export * from "./ft-loader";
2
4
  //# sourceMappingURL=index.d.ts.map
package/build/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { customElement } from "@fluid-topics/ft-wc-utils";
2
2
  import { FtLoader } from "./ft-loader";
3
+ export * from "./ft-loader.css";
4
+ export * from "./ft-loader.properties";
3
5
  export * from "./ft-loader";
4
6
  customElement("ft-loader")(FtLoader);
5
7
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-loader",
3
- "version": "0.3.12",
3
+ "version": "0.3.13",
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.3.12",
22
+ "@fluid-topics/ft-wc-utils": "0.3.13",
23
23
  "lit": "2.2.8"
24
24
  },
25
- "gitHead": "126fc60c5ec4b89c3897901d1a92ee9b17286686"
25
+ "gitHead": "84b5fc920bc5d2bdb646b5da8815ad51caaf228e"
26
26
  }