@everymatrix/general-footer-template 1.80.12 → 1.80.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.
|
@@ -67,7 +67,7 @@ const UiImage = class {
|
|
|
67
67
|
};
|
|
68
68
|
UiImage.style = UiImageStyle0;
|
|
69
69
|
|
|
70
|
-
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.
|
|
70
|
+
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
71
71
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
72
72
|
|
|
73
73
|
const UiSkeleton = class {
|
|
@@ -81,7 +81,7 @@ const UiSkeleton = class {
|
|
|
81
81
|
marginTop: this.handleStylingProps(this.marginTop),
|
|
82
82
|
marginLeft: this.handleStylingProps(this.marginLeft),
|
|
83
83
|
marginRight: this.handleStylingProps(this.marginRight),
|
|
84
|
-
size: this.handleStylingProps(this.size)
|
|
84
|
+
size: this.handleStylingProps(this.size),
|
|
85
85
|
};
|
|
86
86
|
this.structure = undefined;
|
|
87
87
|
this.width = 'unset';
|
|
@@ -138,22 +138,22 @@ const UiSkeleton = class {
|
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
renderLogo() {
|
|
141
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: '
|
|
141
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
|
|
142
142
|
}
|
|
143
143
|
renderImage() {
|
|
144
|
-
return index.h("div", { class: '
|
|
144
|
+
return index.h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
|
|
145
145
|
}
|
|
146
146
|
renderTitle() {
|
|
147
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: '
|
|
147
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
|
|
148
148
|
}
|
|
149
149
|
renderText() {
|
|
150
|
-
return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: '
|
|
150
|
+
return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
|
|
151
151
|
}
|
|
152
152
|
renderRectangle() {
|
|
153
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: '
|
|
153
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
|
|
154
154
|
}
|
|
155
155
|
renderCircle() {
|
|
156
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: '
|
|
156
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
|
|
157
157
|
}
|
|
158
158
|
render() {
|
|
159
159
|
let styleBlock = '';
|
|
@@ -233,7 +233,7 @@ const UiSkeleton = class {
|
|
|
233
233
|
default:
|
|
234
234
|
styleBlock = '';
|
|
235
235
|
}
|
|
236
|
-
return (index.h(index.Host, { key: '
|
|
236
|
+
return (index.h(index.Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, index.h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
|
|
237
237
|
}
|
|
238
238
|
static get watchers() { return {
|
|
239
239
|
"structure": ["handleStructureChange"]
|
|
@@ -63,7 +63,7 @@ const UiImage = class {
|
|
|
63
63
|
};
|
|
64
64
|
UiImage.style = UiImageStyle0;
|
|
65
65
|
|
|
66
|
-
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.
|
|
66
|
+
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
67
67
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
68
68
|
|
|
69
69
|
const UiSkeleton = class {
|
|
@@ -77,7 +77,7 @@ const UiSkeleton = class {
|
|
|
77
77
|
marginTop: this.handleStylingProps(this.marginTop),
|
|
78
78
|
marginLeft: this.handleStylingProps(this.marginLeft),
|
|
79
79
|
marginRight: this.handleStylingProps(this.marginRight),
|
|
80
|
-
size: this.handleStylingProps(this.size)
|
|
80
|
+
size: this.handleStylingProps(this.size),
|
|
81
81
|
};
|
|
82
82
|
this.structure = undefined;
|
|
83
83
|
this.width = 'unset';
|
|
@@ -134,22 +134,22 @@ const UiSkeleton = class {
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
renderLogo() {
|
|
137
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: '
|
|
137
|
+
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
|
|
138
138
|
}
|
|
139
139
|
renderImage() {
|
|
140
|
-
return h("div", { class: '
|
|
140
|
+
return h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
|
|
141
141
|
}
|
|
142
142
|
renderTitle() {
|
|
143
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: '
|
|
143
|
+
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
|
|
144
144
|
}
|
|
145
145
|
renderText() {
|
|
146
|
-
return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: '
|
|
146
|
+
return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
|
|
147
147
|
}
|
|
148
148
|
renderRectangle() {
|
|
149
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: '
|
|
149
|
+
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
|
|
150
150
|
}
|
|
151
151
|
renderCircle() {
|
|
152
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: '
|
|
152
|
+
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
|
|
153
153
|
}
|
|
154
154
|
render() {
|
|
155
155
|
let styleBlock = '';
|
|
@@ -229,7 +229,7 @@ const UiSkeleton = class {
|
|
|
229
229
|
default:
|
|
230
230
|
styleBlock = '';
|
|
231
231
|
}
|
|
232
|
-
return (h(Host, { key: '
|
|
232
|
+
return (h(Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
|
|
233
233
|
}
|
|
234
234
|
static get watchers() { return {
|
|
235
235
|
"structure": ["handleStructureChange"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,h as t,H as i,g as
|
|
1
|
+
import{r as e,h as t,H as i,g as n}from"./index-2051e205.js";const s=class{constructor(t){e(this,t),this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.imgLoaded=!1,this.shouldLoad=!1}handleSrc(){if(!this.shouldLoad)return;const e=new Image;e.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0,e.onload=null)},e.src=this.src}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){const t=e.target.__uxComponent;t&&(t.shouldLoad=!0,t.handleSrc()),window.EMUxObserver.unobserve(e.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return t(i,{key:"f506ba73852f257ad80bf59ca177d2065a5f365e",class:"HostContainer"},!this.imgLoaded&&t("ui-skeleton",{key:"564ebfab701f827ddc2debccb7615926dbc9e876",class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{key:"2188ca4494c10587f064acc5459ffc468948f497",ref:e=>this.image=e,src:this.shouldLoad?this.src:void 0,onLoad:()=>this.imgLoaded=!0,style:this.styles,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}get el(){return n(this)}static get watchers(){return{src:["handleSrc"]}}};s.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";const r=class{constructor(t){e(this,t),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStylingProps(e){switch(typeof e){case"number":return 0===e?0:`${e}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(e)||e.endsWith("px")||e.endsWith("%")?e:"unset"}}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonLogo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"SkeletonImage "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonTitle "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,i)=>t("div",{key:i,class:"SkeletonText "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonRectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonCircle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.stylingValue.width};\n --emw-skeleton-logo-height: ${this.stylingValue.height};\n --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.stylingValue.width};\n --emw-skeleton-image-height: ${this.stylingValue.height};\n --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.stylingValue.width};\n --emw-skeleton-title-height: ${this.stylingValue.height};\n --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.stylingValue.width};\n --emw-skeleton-text-height: ${this.stylingValue.height};\n --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.stylingValue.size};\n }\n `;break;default:e=""}return t(i,{key:"c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8"},t("style",{key:"9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};r.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{s as ui_image,r as ui_skeleton}
|