@fluid-topics/ft-skeleton 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-skeleton.light.js +29 -0
- package/build/ft-skeleton.min.js +43 -1
- package/package.json +3 -3
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
!function(t,e,n){var a=function(t,e,n,a){for(var o,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,n):a,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(i<3?o(r):i>3?o(e,n,r):o(e,n))||r);return i>3&&r&&Object.defineProperty(e,n,r),r};const o={display:n.FtCssVariable.create("--ft-skeleton--display","DISPLAY","block"),width:n.FtCssVariable.create("--ft-skeleton--width","SIZE","100%"),height:n.FtCssVariable.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:n.FtCssVariable.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:n.FtCssVariable.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:n.FtCssVariable.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:n.FtCssVariable.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:n.FtCssVariable.external(n.designSystemVariables.borderRadiusM,"Design system")};t.FtSkeleton=class extends n.FtLitElement{getStyles(){return e.css`
|
|
2
|
+
:host {
|
|
3
|
+
width: ${o.width};
|
|
4
|
+
height: ${o.height};
|
|
5
|
+
display: ${o.display};
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
border-radius: ${o.borderRadiusM};
|
|
8
|
+
background: linear-gradient(
|
|
9
|
+
90deg,
|
|
10
|
+
transparent,
|
|
11
|
+
${o.glareColor} calc(0.45 * ${o.glareWidth}),
|
|
12
|
+
${o.glareColor} calc(0.55 * ${o.glareWidth}),
|
|
13
|
+
transparent ${o.glareWidth}
|
|
14
|
+
), ${o.backgroundColor};
|
|
15
|
+
background-repeat: repeat-y;
|
|
16
|
+
background-size: 100vw 100vh;
|
|
17
|
+
background-attachment: fixed;
|
|
18
|
+
background-position: calc(${o.glareWidth} * -1) 0;
|
|
19
|
+
animation: shine ${o.animationDuration} infinite;
|
|
20
|
+
animation-timing-function: linear;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes shine {
|
|
24
|
+
to {
|
|
25
|
+
background-position: calc(100vw + ${o.glareWidth}) 0, calc(${o.glareWidth} * -1) 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
`}getTemplate(){return e.html`
|
|
29
|
+
`}},t.FtSkeleton.elementDefinitions={},t.FtSkeleton=a([n.customElement("ft-skeleton")],t.FtSkeleton),t.FtSkeletonCssVariables=o,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.wcUtils);
|
package/build/ft-skeleton.min.js
CHANGED
|
@@ -31,4 +31,46 @@ var Y,G;null==q||q(D,K),(null!==(y=globalThis.litHtmlVersions)&&void 0!==y?y: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:e,elementDefinitions:i,shadowRootOptions:n}=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({...n,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]),L
|
|
34
|
+
*/class ot extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:n}=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({...n,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]),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,e,i,n){for(var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(e,i,s):o(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};const lt={display:it.create("--ft-skeleton--display","DISPLAY","block"),width:it.create("--ft-skeleton--width","SIZE","100%"),height:it.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:it.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:it.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:it.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:it.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:it.external(nt.borderRadiusM,"Design system")};var ct;t.FtSkeleton=class extends ot{getStyles(){return s`
|
|
49
|
+
:host {
|
|
50
|
+
width: ${lt.width};
|
|
51
|
+
height: ${lt.height};
|
|
52
|
+
display: ${lt.display};
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
border-radius: ${lt.borderRadiusM};
|
|
55
|
+
background: linear-gradient(
|
|
56
|
+
90deg,
|
|
57
|
+
transparent,
|
|
58
|
+
${lt.glareColor} calc(0.45 * ${lt.glareWidth}),
|
|
59
|
+
${lt.glareColor} calc(0.55 * ${lt.glareWidth}),
|
|
60
|
+
transparent ${lt.glareWidth}
|
|
61
|
+
), ${lt.backgroundColor};
|
|
62
|
+
background-repeat: repeat-y;
|
|
63
|
+
background-size: 100vw 100vh;
|
|
64
|
+
background-attachment: fixed;
|
|
65
|
+
background-position: calc(${lt.glareWidth} * -1) 0;
|
|
66
|
+
animation: shine ${lt.animationDuration} infinite;
|
|
67
|
+
animation-timing-function: linear;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes shine {
|
|
71
|
+
to {
|
|
72
|
+
background-position: calc(100vw + ${lt.glareWidth}) 0, calc(${lt.glareWidth} * -1) 0;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
`}getTemplate(){return L`
|
|
76
|
+
`}},t.FtSkeleton.elementDefinitions={},t.FtSkeleton=at([(ct="ft-skeleton",t=>{window.customElements.get(ct)||window.customElements.define(ct,t)})],t.FtSkeleton),t.FtSkeletonCssVariables=lt,Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-skeleton",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
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.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.1.8",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "45fdf008556920bbd5fcc2e766c273aed959178d"
|
|
26
26
|
}
|