@fluid-topics/ft-skeleton 0.3.11 → 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-skeleton.css.d.ts +12 -0
  2. package/build/ft-skeleton.css.js +42 -0
  3. package/build/ft-skeleton.d.ts +1 -12
  4. package/build/ft-skeleton.js +4 -41
  5. package/build/ft-skeleton.light.js +27 -27
  6. package/build/ft-skeleton.min.js +27 -27
  7. package/build/ft-skeleton.properties.d.ts +3 -0
  8. package/build/ft-skeleton.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-skeleton.css.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const FtSkeletonCssVariables: {
2
+ display: import("@fluid-topics/ft-wc-utils").FtCssVariable;
3
+ width: import("@fluid-topics/ft-wc-utils").FtCssVariable;
4
+ height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
5
+ backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
6
+ glareWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
7
+ glareColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
8
+ animationDuration: import("@fluid-topics/ft-wc-utils").FtCssVariable;
9
+ borderRadiusM: import("@fluid-topics/ft-wc-utils").FtCssVariable;
10
+ };
11
+ export declare const styles: import("lit").CSSResult;
12
+ //# sourceMappingURL=ft-skeleton.css.d.ts.map
package/build/ft-skeleton.css.js ADDED
@@ -0,0 +1,42 @@
1
+ import { css } from "lit";
2
+ import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
3
+ export const FtSkeletonCssVariables = {
4
+ display: FtCssVariableFactory.create("--ft-skeleton--display", "DISPLAY", "block"),
5
+ width: FtCssVariableFactory.create("--ft-skeleton--width", "SIZE", "100%"),
6
+ height: FtCssVariableFactory.create("--ft-skeleton--height", "SIZE", "20px"),
7
+ backgroundColor: FtCssVariableFactory.create("--ft-skeleton--background-color", "COLOR", "#f1f1f1"),
8
+ glareWidth: FtCssVariableFactory.create("--ft-skeleton--glare-width", "SIZE", "200px"),
9
+ glareColor: FtCssVariableFactory.create("--ft-skeleton--glare-color", "COLOR", "rgba(255, 255, 255, .6)"),
10
+ animationDuration: FtCssVariableFactory.create("--ft-skeleton--animation-duration", "UNKNOWN", "2s"),
11
+ borderRadiusM: FtCssVariableFactory.external(designSystemVariables.borderRadiusM, "Design system"),
12
+ };
13
+ //language=css
14
+ export const styles = css `
15
+ :host {
16
+ width: ${FtSkeletonCssVariables.width};
17
+ height: ${FtSkeletonCssVariables.height};
18
+ display: ${FtSkeletonCssVariables.display};
19
+ overflow: hidden;
20
+ border-radius: ${FtSkeletonCssVariables.borderRadiusM};
21
+ background: linear-gradient(
22
+ 90deg,
23
+ transparent,
24
+ ${FtSkeletonCssVariables.glareColor} calc(0.45 * ${FtSkeletonCssVariables.glareWidth}),
25
+ ${FtSkeletonCssVariables.glareColor} calc(0.55 * ${FtSkeletonCssVariables.glareWidth}),
26
+ transparent ${FtSkeletonCssVariables.glareWidth}
27
+ ), ${FtSkeletonCssVariables.backgroundColor};
28
+ background-repeat: repeat-y;
29
+ background-size: 100vw 100vh;
30
+ background-attachment: fixed;
31
+ background-position: calc(${FtSkeletonCssVariables.glareWidth} * -1) 0;
32
+ animation: shine ${FtSkeletonCssVariables.animationDuration} infinite;
33
+ animation-timing-function: linear;
34
+ }
35
+
36
+ @keyframes shine {
37
+ to {
38
+ background-position: calc(100vw + ${FtSkeletonCssVariables.glareWidth}) 0, calc(${FtSkeletonCssVariables.glareWidth} * -1) 0;
39
+ }
40
+ }
41
+ `;
42
+ //# sourceMappingURL=ft-skeleton.css.js.map
package/build/ft-skeleton.d.ts CHANGED
@@ -1,16 +1,5 @@
1
1
  import { FtLitElement } from "@fluid-topics/ft-wc-utils";
2
- export interface FtSkeletonProperties {
3
- }
4
- export declare const FtSkeletonCssVariables: {
5
- display: import("@fluid-topics/ft-wc-utils").FtCssVariable;
6
- width: import("@fluid-topics/ft-wc-utils").FtCssVariable;
7
- height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
8
- backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
9
- glareWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
10
- glareColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
11
- animationDuration: import("@fluid-topics/ft-wc-utils").FtCssVariable;
12
- borderRadiusM: import("@fluid-topics/ft-wc-utils").FtCssVariable;
13
- };
2
+ import { FtSkeletonProperties } from "./ft-skeleton.properties";
14
3
  export declare class FtSkeleton extends FtLitElement implements FtSkeletonProperties {
15
4
  static elementDefinitions: {};
16
5
  static styles: import("lit").CSSResult;
package/build/ft-skeleton.js CHANGED
@@ -1,15 +1,6 @@
1
- import { css, html } from "lit";
2
- import { designSystemVariables, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
3
- export const FtSkeletonCssVariables = {
4
- display: FtCssVariableFactory.create("--ft-skeleton--display", "DISPLAY", "block"),
5
- width: FtCssVariableFactory.create("--ft-skeleton--width", "SIZE", "100%"),
6
- height: FtCssVariableFactory.create("--ft-skeleton--height", "SIZE", "20px"),
7
- backgroundColor: FtCssVariableFactory.create("--ft-skeleton--background-color", "COLOR", "#f1f1f1"),
8
- glareWidth: FtCssVariableFactory.create("--ft-skeleton--glare-width", "SIZE", "200px"),
9
- glareColor: FtCssVariableFactory.create("--ft-skeleton--glare-color", "COLOR", "rgba(255, 255, 255, .6)"),
10
- animationDuration: FtCssVariableFactory.create("--ft-skeleton--animation-duration", "UNKNOWN", "2s"),
11
- borderRadiusM: FtCssVariableFactory.external(designSystemVariables.borderRadiusM, "Design system"),
12
- };
1
+ import { html } from "lit";
2
+ import { FtLitElement } from "@fluid-topics/ft-wc-utils";
3
+ import { styles } from "./ft-skeleton.css";
13
4
  export class FtSkeleton extends FtLitElement {
14
5
  render() {
15
6
  return html `
@@ -17,33 +8,5 @@ export class FtSkeleton extends FtLitElement {
17
8
  }
18
9
  }
19
10
  FtSkeleton.elementDefinitions = {};
20
- // language=CSS
21
- FtSkeleton.styles = css `
22
- :host {
23
- width: ${FtSkeletonCssVariables.width};
24
- height: ${FtSkeletonCssVariables.height};
25
- display: ${FtSkeletonCssVariables.display};
26
- overflow: hidden;
27
- border-radius: ${FtSkeletonCssVariables.borderRadiusM};
28
- background: linear-gradient(
29
- 90deg,
30
- transparent,
31
- ${FtSkeletonCssVariables.glareColor} calc(0.45 * ${FtSkeletonCssVariables.glareWidth}),
32
- ${FtSkeletonCssVariables.glareColor} calc(0.55 * ${FtSkeletonCssVariables.glareWidth}),
33
- transparent ${FtSkeletonCssVariables.glareWidth}
34
- ), ${FtSkeletonCssVariables.backgroundColor};
35
- background-repeat: repeat-y;
36
- background-size: 100vw 100vh;
37
- background-attachment: fixed;
38
- background-position: calc(${FtSkeletonCssVariables.glareWidth} * -1) 0;
39
- animation: shine ${FtSkeletonCssVariables.animationDuration} infinite;
40
- animation-timing-function: linear;
41
- }
42
-
43
- @keyframes shine {
44
- to {
45
- background-position: calc(100vw + ${FtSkeletonCssVariables.glareWidth}) 0, calc(${FtSkeletonCssVariables.glareWidth} * -1) 0;
46
- }
47
- }
48
- `;
11
+ FtSkeleton.styles = styles;
49
12
  //# sourceMappingURL=ft-skeleton.js.map
package/build/ft-skeleton.light.js CHANGED
@@ -1,29 +1,29 @@
1
- !function(e,t,n){const a={display:t.FtCssVariableFactory.create("--ft-skeleton--display","DISPLAY","block"),width:t.FtCssVariableFactory.create("--ft-skeleton--width","SIZE","100%"),height:t.FtCssVariableFactory.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:t.FtCssVariableFactory.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:t.FtCssVariableFactory.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:t.FtCssVariableFactory.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:t.FtCssVariableFactory.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:t.FtCssVariableFactory.external(t.designSystemVariables.borderRadiusM,"Design system")};class o extends t.FtLitElement{render(){return n.html`
2
- `}}o.elementDefinitions={},o.styles=n.css`
3
- :host {
4
- width: ${a.width};
5
- height: ${a.height};
6
- display: ${a.display};
7
- overflow: hidden;
8
- border-radius: ${a.borderRadiusM};
9
- background: linear-gradient(
10
- 90deg,
11
- transparent,
12
- ${a.glareColor} calc(0.45 * ${a.glareWidth}),
13
- ${a.glareColor} calc(0.55 * ${a.glareWidth}),
14
- transparent ${a.glareWidth}
15
- ), ${a.backgroundColor};
16
- background-repeat: repeat-y;
17
- background-size: 100vw 100vh;
18
- background-attachment: fixed;
19
- background-position: calc(${a.glareWidth} * -1) 0;
20
- animation: shine ${a.animationDuration} infinite;
21
- animation-timing-function: linear;
22
- }
1
+ !function(e,t,n){const a={display:t.FtCssVariableFactory.create("--ft-skeleton--display","DISPLAY","block"),width:t.FtCssVariableFactory.create("--ft-skeleton--width","SIZE","100%"),height:t.FtCssVariableFactory.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:t.FtCssVariableFactory.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:t.FtCssVariableFactory.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:t.FtCssVariableFactory.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:t.FtCssVariableFactory.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:t.FtCssVariableFactory.external(t.designSystemVariables.borderRadiusM,"Design system")},o=n.css`
2
+ :host {
3
+ width: ${a.width};
4
+ height: ${a.height};
5
+ display: ${a.display};
6
+ overflow: hidden;
7
+ border-radius: ${a.borderRadiusM};
8
+ background: linear-gradient(
9
+ 90deg,
10
+ transparent,
11
+ ${a.glareColor} calc(0.45 * ${a.glareWidth}),
12
+ ${a.glareColor} calc(0.55 * ${a.glareWidth}),
13
+ transparent ${a.glareWidth}
14
+ ), ${a.backgroundColor};
15
+ background-repeat: repeat-y;
16
+ background-size: 100vw 100vh;
17
+ background-attachment: fixed;
18
+ background-position: calc(${a.glareWidth} * -1) 0;
19
+ animation: shine ${a.animationDuration} infinite;
20
+ animation-timing-function: linear;
21
+ }
23
22
 
24
- @keyframes shine {
25
- to {
26
- background-position: calc(100vw + ${a.glareWidth}) 0, calc(${a.glareWidth} * -1) 0;
27
- }
23
+ @keyframes shine {
24
+ to {
25
+ background-position: calc(100vw + ${a.glareWidth}) 0, calc(${a.glareWidth} * -1) 0;
28
26
  }
29
- `,t.customElement("ft-skeleton")(o),e.FtSkeleton=o,e.FtSkeletonCssVariables=a,Object.defineProperty(e,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit);
27
+ }
28
+ `;class i extends t.FtLitElement{render(){return n.html`
29
+ `}}i.elementDefinitions={},i.styles=o,t.customElement("ft-skeleton")(i),e.FtSkeleton=i,e.FtSkeletonCssVariables=a,e.styles=o,Object.defineProperty(e,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit);
package/build/ft-skeleton.min.js CHANGED
@@ -66,32 +66,32 @@ var tt,et;null==Q||Q(K,Z),(null!==(x=globalThis.litHtmlVersions)&&void 0!==x?x: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={display:st.create("--ft-skeleton--display","DISPLAY","block"),width:st.create("--ft-skeleton--width","SIZE","100%"),height:st.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:st.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:st.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:st.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:st.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:st.external(nt.borderRadiusM,"Design system")};class ut extends ct{render(){return B`
70
- `}}var dt;ut.elementDefinitions={},ut.styles=c`
71
- :host {
72
- width: ${ht.width};
73
- height: ${ht.height};
74
- display: ${ht.display};
75
- overflow: hidden;
76
- border-radius: ${ht.borderRadiusM};
77
- background: linear-gradient(
78
- 90deg,
79
- transparent,
80
- ${ht.glareColor} calc(0.45 * ${ht.glareWidth}),
81
- ${ht.glareColor} calc(0.55 * ${ht.glareWidth}),
82
- transparent ${ht.glareWidth}
83
- ), ${ht.backgroundColor};
84
- background-repeat: repeat-y;
85
- background-size: 100vw 100vh;
86
- background-attachment: fixed;
87
- background-position: calc(${ht.glareWidth} * -1) 0;
88
- animation: shine ${ht.animationDuration} infinite;
89
- animation-timing-function: linear;
90
- }
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={display:st.create("--ft-skeleton--display","DISPLAY","block"),width:st.create("--ft-skeleton--width","SIZE","100%"),height:st.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:st.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:st.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:st.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:st.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:st.external(nt.borderRadiusM,"Design system")},ut=c`
70
+ :host {
71
+ width: ${ht.width};
72
+ height: ${ht.height};
73
+ display: ${ht.display};
74
+ overflow: hidden;
75
+ border-radius: ${ht.borderRadiusM};
76
+ background: linear-gradient(
77
+ 90deg,
78
+ transparent,
79
+ ${ht.glareColor} calc(0.45 * ${ht.glareWidth}),
80
+ ${ht.glareColor} calc(0.55 * ${ht.glareWidth}),
81
+ transparent ${ht.glareWidth}
82
+ ), ${ht.backgroundColor};
83
+ background-repeat: repeat-y;
84
+ background-size: 100vw 100vh;
85
+ background-attachment: fixed;
86
+ background-position: calc(${ht.glareWidth} * -1) 0;
87
+ animation: shine ${ht.animationDuration} infinite;
88
+ animation-timing-function: linear;
89
+ }
91
90
 
92
- @keyframes shine {
93
- to {
94
- background-position: calc(100vw + ${ht.glareWidth}) 0, calc(${ht.glareWidth} * -1) 0;
95
- }
91
+ @keyframes shine {
92
+ to {
93
+ background-position: calc(100vw + ${ht.glareWidth}) 0, calc(${ht.glareWidth} * -1) 0;
96
94
  }
97
- `,(dt="ft-skeleton",t=>{window.customElements.get(dt)||window.customElements.define(dt,t)})(ut),t.FtSkeleton=ut,t.FtSkeletonCssVariables=ht,Object.defineProperty(t,"i",{value:!0})}({});
95
+ }
96
+ `;class dt extends ct{render(){return B`
97
+ `}}var pt;dt.elementDefinitions={},dt.styles=ut,(pt="ft-skeleton",t=>{window.customElements.get(pt)||window.customElements.define(pt,t)})(dt),t.FtSkeleton=dt,t.FtSkeletonCssVariables=ht,t.styles=ut,Object.defineProperty(t,"i",{value:!0})}({});
package/build/ft-skeleton.properties.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export interface FtSkeletonProperties {
2
+ }
3
+ //# sourceMappingURL=ft-skeleton.properties.d.ts.map
package/build/ft-skeleton.properties.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ft-skeleton.properties.js.map
package/build/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export * from "./ft-skeleton";
2
+ export * from "./ft-skeleton.css";
3
+ export * from "./ft-skeleton.properties";
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 { FtSkeleton } from "./ft-skeleton";
3
3
  export * from "./ft-skeleton";
4
+ export * from "./ft-skeleton.css";
5
+ export * from "./ft-skeleton.properties";
4
6
  customElement("ft-skeleton")(FtSkeleton);
5
7
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-skeleton",
3
- "version": "0.3.11",
3
+ "version": "0.3.13",
4
4
  "description": "Placeholder for loading content",
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.11",
22
+ "@fluid-topics/ft-wc-utils": "0.3.13",
23
23
  "lit": "2.2.8"
24
24
  },
25
- "gitHead": "35c790329a8e7f9902aad2ea8d41386e5c0b36c9"
25
+ "gitHead": "84b5fc920bc5d2bdb646b5da8815ad51caaf228e"
26
26
  }