@aejkatappaja/phantom-ui 0.5.0 → 0.5.1
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/custom-elements.json +4 -4
- package/dist/phantom-ui.cdn.js +3 -5
- package/dist/phantom-ui.js +6 -8
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": {
|
|
29
29
|
"text": "string"
|
|
30
30
|
},
|
|
31
|
-
"default": "\"rgba(
|
|
31
|
+
"default": "\"rgba(128, 128, 128, 0.3)\"",
|
|
32
32
|
"description": "Color of the animated shimmer gradient wave",
|
|
33
33
|
"attribute": "shimmer-color"
|
|
34
34
|
},
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"type": {
|
|
39
39
|
"text": "string"
|
|
40
40
|
},
|
|
41
|
-
"default": "\"rgba(
|
|
41
|
+
"default": "\"rgba(128, 128, 128, 0.2)\"",
|
|
42
42
|
"description": "Background color of each shimmer block",
|
|
43
43
|
"attribute": "background-color"
|
|
44
44
|
},
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
"type": {
|
|
248
248
|
"text": "string"
|
|
249
249
|
},
|
|
250
|
-
"default": "\"rgba(
|
|
250
|
+
"default": "\"rgba(128, 128, 128, 0.3)\"",
|
|
251
251
|
"description": "Color of the animated shimmer gradient wave",
|
|
252
252
|
"fieldName": "shimmerColor"
|
|
253
253
|
},
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
"type": {
|
|
257
257
|
"text": "string"
|
|
258
258
|
},
|
|
259
|
-
"default": "\"rgba(
|
|
259
|
+
"default": "\"rgba(128, 128, 128, 0.2)\"",
|
|
260
260
|
"description": "Background color of each shimmer block",
|
|
261
261
|
"fieldName": "backgroundColor"
|
|
262
262
|
},
|
package/dist/phantom-ui.cdn.js
CHANGED
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
display: block;
|
|
6
6
|
position: relative;
|
|
7
7
|
overflow: hidden;
|
|
8
|
-
--shimmer-color: rgba(
|
|
8
|
+
--shimmer-color: rgba(128, 128, 128, 0.3);
|
|
9
9
|
--shimmer-duration: 1.5s;
|
|
10
|
-
--shimmer-bg: rgba(
|
|
10
|
+
--shimmer-bg: rgba(128, 128, 128, 0.2);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
:host([loading]) ::slotted(*) {
|
|
14
|
-
color: transparent !important;
|
|
15
14
|
-webkit-text-fill-color: transparent !important;
|
|
16
15
|
pointer-events: none;
|
|
17
16
|
user-select: none;
|
|
@@ -111,7 +110,6 @@
|
|
|
111
110
|
}
|
|
112
111
|
`;var Ot="phantom-ui-loading-styles";function Zt(){if(document.getElementById(Ot))return;let r=document.createElement("style");r.id=Ot,r.textContent=`
|
|
113
112
|
phantom-ui[loading] * {
|
|
114
|
-
color: transparent !important;
|
|
115
113
|
-webkit-text-fill-color: transparent !important;
|
|
116
114
|
pointer-events: none;
|
|
117
115
|
user-select: none;
|
|
@@ -122,7 +120,7 @@
|
|
|
122
120
|
phantom-ui[loading] canvas {
|
|
123
121
|
opacity: 0 !important;
|
|
124
122
|
}
|
|
125
|
-
`,document.head.appendChild(r)}var p=class extends b{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(
|
|
123
|
+
`,document.head.appendChild(r)}var p=class extends b{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(128, 128, 128, 0.3)";this.backgroundColor="rgba(128, 128, 128, 0.2)";this.duration=1.5;this.fallbackRadius=4;this.animation="shimmer";this.stagger=0;this.reveal=0;this.count=1;this.countGap=0;this._blocks=[];this._revealing=!1;this._resizeObserver=null;this._mutationObserver=null;this._loadHandler=null;this._measureScheduled=!1;this._revealTimeout=null}connectedCallback(){super.connectedCallback(),Zt()}disconnectedCallback(){super.disconnectedCallback(),this._teardownObservers(),this._clearRevealTimeout()}willUpdate(e){e.has("loading")&&!this.loading&&this.reveal>0&&this._blocks.length>0&&(this._revealing=!0)}updated(e){(e.has("count")||e.has("countGap"))&&this.loading&&this._scheduleMeasure(),e.has("loading")&&(this.setAttribute("aria-busy",String(this.loading)),this.loading?(this._revealing=!1,this._clearRevealTimeout(),this._scheduleMeasure(),this._setupObservers()):this._revealing?(this._teardownObservers(),this._revealTimeout=setTimeout(()=>{this._revealing=!1,this._blocks=[],this._revealTimeout=null,this.style.minHeight=""},this.reveal*1e3)):(this._blocks=[],this._teardownObservers(),this.style.minHeight=""))}render(){let e=xt({"--shimmer-color":this.shimmerColor,"--shimmer-duration":`${this.duration}s`,"--shimmer-bg":this.backgroundColor,"--reveal-duration":`${this.reveal}s`}),s=this.loading||this._revealing;return j`
|
|
126
124
|
<slot></slot>
|
|
127
125
|
${s?j`
|
|
128
126
|
<div
|
package/dist/phantom-ui.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s)=>{for(var t=s>1?void 0:s?k(r,e):r,i=n.length-1,l;i>=0;i--)(l=n[i])&&(t=(s?l(r,e,t):l(t))||t);return s&&t&&_(r,e,t),t};import{LitElement as T,html as p}from"lit";import{customElement as C,property as
|
|
1
|
+
var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s)=>{for(var t=s>1?void 0:s?k(r,e):r,i=n.length-1,l;i>=0;i--)(l=n[i])&&(t=(s?l(r,e,t):l(t))||t);return s&&t&&_(r,e,t),t};import{LitElement as T,html as p}from"lit";import{customElement as C,property as h,state as f}from"lit/decorators.js";import{styleMap as S}from"lit/directives/style-map.js";var w=new Set(["IMG","SVG","VIDEO","CANVAS","IFRAME","INPUT","TEXTAREA","BUTTON","HR"]),E=new Set(["BR","WBR","HR"]);function x(n){if(w.has(n.tagName))return!0;for(let r of n.children)if(!E.has(r.tagName))return!1;return!0}function O(n){for(let r of n.childNodes)if(r.nodeType===Node.TEXT_NODE&&r.textContent?.trim())return!0;return!1}function b(n,r){let e=[];function s(t){let i=t.getBoundingClientRect();if(i.width===0||i.height===0||t.hasAttribute("data-shimmer-ignore"))return;if(t.hasAttribute("data-shimmer-no-children")||x(t)){let d=getComputedStyle(t).borderRadius;if((t.tagName==="TD"||t.tagName==="TH")&&O(t)){let u=document.createElement("span");u.style.visibility="hidden",u.style.position="absolute",u.textContent=t.textContent,t.appendChild(u);let c=u.getBoundingClientRect();t.removeChild(u),e.push({x:i.left-r.left,y:i.top-r.top,width:Math.min(c.width,i.width),height:i.height,tag:t.tagName.toLowerCase(),borderRadius:d==="0px"?"":d});return}e.push({x:i.left-r.left,y:i.top-r.top,width:i.width,height:i.height,tag:t.tagName.toLowerCase(),borderRadius:d==="0px"?"":d});return}for(let m of t.children)s(m)}return s(n),e}function v(n,r){let e=null,s=new ResizeObserver(()=>{e!==null&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{e=null,r()})});return s.observe(n),s}import{css as R}from"lit";var g=R`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|
|
5
5
|
overflow: hidden;
|
|
6
|
-
--shimmer-color: rgba(
|
|
6
|
+
--shimmer-color: rgba(128, 128, 128, 0.3);
|
|
7
7
|
--shimmer-duration: 1.5s;
|
|
8
|
-
--shimmer-bg: rgba(
|
|
8
|
+
--shimmer-bg: rgba(128, 128, 128, 0.2);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
:host([loading]) ::slotted(*) {
|
|
12
|
-
color: transparent !important;
|
|
13
12
|
-webkit-text-fill-color: transparent !important;
|
|
14
13
|
pointer-events: none;
|
|
15
14
|
user-select: none;
|
|
@@ -109,7 +108,6 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
109
108
|
}
|
|
110
109
|
`;var y="phantom-ui-loading-styles";function A(){if(document.getElementById(y))return;let n=document.createElement("style");n.id=y,n.textContent=`
|
|
111
110
|
phantom-ui[loading] * {
|
|
112
|
-
color: transparent !important;
|
|
113
111
|
-webkit-text-fill-color: transparent !important;
|
|
114
112
|
pointer-events: none;
|
|
115
113
|
user-select: none;
|
|
@@ -120,7 +118,7 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
120
118
|
phantom-ui[loading] canvas {
|
|
121
119
|
opacity: 0 !important;
|
|
122
120
|
}
|
|
123
|
-
`,document.head.appendChild(n)}var o=class extends T{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(
|
|
121
|
+
`,document.head.appendChild(n)}var o=class extends T{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(128, 128, 128, 0.3)";this.backgroundColor="rgba(128, 128, 128, 0.2)";this.duration=1.5;this.fallbackRadius=4;this.animation="shimmer";this.stagger=0;this.reveal=0;this.count=1;this.countGap=0;this._blocks=[];this._revealing=!1;this._resizeObserver=null;this._mutationObserver=null;this._loadHandler=null;this._measureScheduled=!1;this._revealTimeout=null}connectedCallback(){super.connectedCallback(),A()}disconnectedCallback(){super.disconnectedCallback(),this._teardownObservers(),this._clearRevealTimeout()}willUpdate(e){e.has("loading")&&!this.loading&&this.reveal>0&&this._blocks.length>0&&(this._revealing=!0)}updated(e){(e.has("count")||e.has("countGap"))&&this.loading&&this._scheduleMeasure(),e.has("loading")&&(this.setAttribute("aria-busy",String(this.loading)),this.loading?(this._revealing=!1,this._clearRevealTimeout(),this._scheduleMeasure(),this._setupObservers()):this._revealing?(this._teardownObservers(),this._revealTimeout=setTimeout(()=>{this._revealing=!1,this._blocks=[],this._revealTimeout=null,this.style.minHeight=""},this.reveal*1e3)):(this._blocks=[],this._teardownObservers(),this.style.minHeight=""))}render(){let e=S({"--shimmer-color":this.shimmerColor,"--shimmer-duration":`${this.duration}s`,"--shimmer-bg":this.backgroundColor,"--reveal-duration":`${this.reveal}s`}),s=this.loading||this._revealing;return p`
|
|
124
122
|
<slot></slot>
|
|
125
123
|
${s?p`
|
|
126
124
|
<div
|
|
@@ -131,7 +129,7 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
131
129
|
${this._renderBlocks()}
|
|
132
130
|
</div>
|
|
133
131
|
`:""}
|
|
134
|
-
`}_scheduleMeasure(){this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))}_measure(){if(!this.loading)return;let e=this.getBoundingClientRect();if(e.width===0||e.height===0)return;let s=this.shadowRoot?.querySelector("slot");if(!s)return;let t=s.assignedElements({flatten:!0}),i=[];for(let l of t){let
|
|
132
|
+
`}_scheduleMeasure(){this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))}_measure(){if(!this.loading)return;let e=this.getBoundingClientRect();if(e.width===0||e.height===0)return;let s=this.shadowRoot?.querySelector("slot");if(!s)return;let t=s.assignedElements({flatten:!0}),i=[];for(let l of t){let m=b(l,e);i.push(...m)}if(this.count>1&&i.length>0){let l=0;for(let u of t){let c=u.getBoundingClientRect();l=Math.max(l,c.bottom-e.top)}let m=[...i];for(let u=1;u<this.count;u++)for(let c of m)i.push({...c,y:c.y+u*(l+this.countGap)});let d=this.count*l+(this.count-1)*this.countGap;this.style.minHeight=`${d}px`}else this.style.minHeight="";this._blocks=i}_setupObservers(){this._teardownObservers(),this._resizeObserver=v(this,()=>{this._scheduleMeasure()}),this._mutationObserver=new MutationObserver(()=>{this._scheduleMeasure()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0}),this._loadHandler=()=>this._scheduleMeasure(),this.addEventListener("load",this._loadHandler,!0)}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null),this._loadHandler&&(this.removeEventListener("load",this._loadHandler,!0),this._loadHandler=null)}_clearRevealTimeout(){this._revealTimeout!==null&&(clearTimeout(this._revealTimeout),this._revealTimeout=null)}_renderBlocks(){return this._blocks.map((e,s)=>{let t=e.borderRadius||`${this.fallbackRadius}px`,i=this.stagger,l=i>0?`animation-delay: ${s*i}s;`:"";return p`
|
|
135
133
|
<div
|
|
136
134
|
class="shimmer-block"
|
|
137
135
|
style="
|
|
@@ -144,4 +142,4 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
144
142
|
${l}
|
|
145
143
|
"
|
|
146
144
|
></div>
|
|
147
|
-
`})}};o.styles=g,a([
|
|
145
|
+
`})}};o.styles=g,a([h({type:Boolean,reflect:!0})],o.prototype,"loading",2),a([h({attribute:"shimmer-color"})],o.prototype,"shimmerColor",2),a([h({attribute:"background-color"})],o.prototype,"backgroundColor",2),a([h({type:Number})],o.prototype,"duration",2),a([h({type:Number,attribute:"fallback-radius"})],o.prototype,"fallbackRadius",2),a([h({reflect:!0})],o.prototype,"animation",2),a([h({type:Number})],o.prototype,"stagger",2),a([h({type:Number})],o.prototype,"reveal",2),a([h({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],o.prototype,"count",2),a([h({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],o.prototype,"countGap",2),a([f()],o.prototype,"_blocks",2),a([f()],o.prototype,"_revealing",2),o=a([C("phantom-ui")],o);export{o as PhantomUi};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aejkatappaja/phantom-ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Structure-aware shimmer skeleton loader as a universal Web Component built with Lit. Works with React, Vue, Svelte, Angular, Solid, or vanilla JS.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|