@everymatrix/general-footer-template 1.77.5 → 1.77.7

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 (16) hide show
  1. package/dist/cjs/ui-image_2.cjs.entry.js +6 -35
  2. package/dist/esm/ui-image_2.entry.js +6 -35
  3. package/dist/general-footer-template/ui-image_2.entry.js +1 -1
  4. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/stencil.config.d.ts +2 -0
  5. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/stencil.config.dev.d.ts +2 -0
  6. package/package.json +1 -1
  7. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/stencil.config.d.ts +0 -2
  8. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/stencil.config.dev.d.ts +0 -2
  9. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
  10. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/storybook/main.d.ts +0 -0
  11. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/packages/stencil/general-footer-template/storybook/preview.d.ts +0 -0
  12. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/tools/plugins/index.d.ts +0 -0
  13. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +0 -0
  14. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
  15. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
  16. /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/general-footer-template/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
@@ -11,6 +11,9 @@ const UiImage = class {
11
11
  constructor(hostRef) {
12
12
  index.registerInstance(this, hostRef);
13
13
  this.hasStarted = false;
14
+ this._onLoad = () => {
15
+ this.imgLoaded = true;
16
+ };
14
17
  this.src = undefined;
15
18
  this.width = undefined;
16
19
  this.height = undefined;
@@ -33,7 +36,6 @@ const UiImage = class {
33
36
  if (newVal === oldVal)
34
37
  return;
35
38
  this.cleanupObserver();
36
- this.detachImgHandlers();
37
39
  if (newVal === 'eager') {
38
40
  if (this.imgEl && this.src) {
39
41
  this.imgEl.src = this.src;
@@ -53,7 +55,8 @@ const UiImage = class {
53
55
  }
54
56
  disconnectedCallback() {
55
57
  this.cleanupObserver();
56
- this.detachImgHandlers();
58
+ if (this.imgEl)
59
+ this.imgEl.src = '';
57
60
  }
58
61
  canUseIO() {
59
62
  return typeof window !== 'undefined' && 'IntersectionObserver' in window;
@@ -83,32 +86,6 @@ const UiImage = class {
83
86
  (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
84
87
  this.io = undefined;
85
88
  }
86
- wireOnceHandlers() {
87
- if (!this.imgEl)
88
- return;
89
- this.detachImgHandlers();
90
- this._onLoad = () => {
91
- var _a;
92
- if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
93
- return;
94
- this.imgLoaded = true;
95
- };
96
- this._onError = () => {
97
- console.error('Load image failed:', this.src);
98
- };
99
- this.imgEl.addEventListener('load', this._onLoad, { once: true });
100
- this.imgEl.addEventListener('error', this._onError, { once: true });
101
- }
102
- detachImgHandlers() {
103
- if (!this.imgEl)
104
- return;
105
- if (this._onLoad)
106
- this.imgEl.removeEventListener('load', this._onLoad);
107
- if (this._onError)
108
- this.imgEl.removeEventListener('error', this._onError);
109
- this._onLoad = undefined;
110
- this._onError = undefined;
111
- }
112
89
  beginLoad() {
113
90
  if (this.hasStarted)
114
91
  return;
@@ -117,12 +94,6 @@ const UiImage = class {
117
94
  if (!this.src)
118
95
  return;
119
96
  this.hasStarted = true;
120
- this.wireOnceHandlers();
121
- if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
122
- this.imgLoaded = true;
123
- return;
124
- }
125
- this.currentSrc = this.src;
126
97
  this.imgEl.src = this.src;
127
98
  if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
128
99
  this.imgLoaded = true;
@@ -135,7 +106,7 @@ const UiImage = class {
135
106
  return (index.h(index.Host, { class: "HostContainer" }, index.h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
136
107
  }
137
108
  renderLazy() {
138
- return (index.h(index.Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (index.h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
109
+ return (index.h(index.Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (index.h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, onLoad: this._onLoad, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
139
110
  }
140
111
  render() {
141
112
  return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
@@ -7,6 +7,9 @@ const UiImage = class {
7
7
  constructor(hostRef) {
8
8
  registerInstance(this, hostRef);
9
9
  this.hasStarted = false;
10
+ this._onLoad = () => {
11
+ this.imgLoaded = true;
12
+ };
10
13
  this.src = undefined;
11
14
  this.width = undefined;
12
15
  this.height = undefined;
@@ -29,7 +32,6 @@ const UiImage = class {
29
32
  if (newVal === oldVal)
30
33
  return;
31
34
  this.cleanupObserver();
32
- this.detachImgHandlers();
33
35
  if (newVal === 'eager') {
34
36
  if (this.imgEl && this.src) {
35
37
  this.imgEl.src = this.src;
@@ -49,7 +51,8 @@ const UiImage = class {
49
51
  }
50
52
  disconnectedCallback() {
51
53
  this.cleanupObserver();
52
- this.detachImgHandlers();
54
+ if (this.imgEl)
55
+ this.imgEl.src = '';
53
56
  }
54
57
  canUseIO() {
55
58
  return typeof window !== 'undefined' && 'IntersectionObserver' in window;
@@ -79,32 +82,6 @@ const UiImage = class {
79
82
  (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
80
83
  this.io = undefined;
81
84
  }
82
- wireOnceHandlers() {
83
- if (!this.imgEl)
84
- return;
85
- this.detachImgHandlers();
86
- this._onLoad = () => {
87
- var _a;
88
- if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
89
- return;
90
- this.imgLoaded = true;
91
- };
92
- this._onError = () => {
93
- console.error('Load image failed:', this.src);
94
- };
95
- this.imgEl.addEventListener('load', this._onLoad, { once: true });
96
- this.imgEl.addEventListener('error', this._onError, { once: true });
97
- }
98
- detachImgHandlers() {
99
- if (!this.imgEl)
100
- return;
101
- if (this._onLoad)
102
- this.imgEl.removeEventListener('load', this._onLoad);
103
- if (this._onError)
104
- this.imgEl.removeEventListener('error', this._onError);
105
- this._onLoad = undefined;
106
- this._onError = undefined;
107
- }
108
85
  beginLoad() {
109
86
  if (this.hasStarted)
110
87
  return;
@@ -113,12 +90,6 @@ const UiImage = class {
113
90
  if (!this.src)
114
91
  return;
115
92
  this.hasStarted = true;
116
- this.wireOnceHandlers();
117
- if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
118
- this.imgLoaded = true;
119
- return;
120
- }
121
- this.currentSrc = this.src;
122
93
  this.imgEl.src = this.src;
123
94
  if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
124
95
  this.imgLoaded = true;
@@ -131,7 +102,7 @@ const UiImage = class {
131
102
  return (h(Host, { class: "HostContainer" }, h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
132
103
  }
133
104
  renderLazy() {
134
- return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
105
+ return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, onLoad: this._onLoad, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
135
106
  }
136
107
  render() {
137
108
  return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
@@ -1 +1 @@
1
- import{r as e,h as t,H as i,g as s}from"./index-4b819858.js";const n=class{constructor(t){e(this,t),this.hasStarted=!1,this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,this.hasStarted=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(e,t){e!==t&&(this.cleanupObserver(),this.detachImgHandlers(),"eager"===e?(this.imgEl&&this.src&&(this.imgEl.src=this.src),this.hasStarted=!0):(this.imgLoaded=!1,this.hasStarted=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.detachImgHandlers()}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((e=>{var t;for(const i of e)if(i.isIntersecting){this.beginLoad(),null===(t=this.io)||void 0===t||t.unobserve(i.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var e;null===(e=this.io)||void 0===e||e.disconnect(),this.io=void 0}wireOnceHandlers(){this.imgEl&&(this.detachImgHandlers(),this._onLoad=()=>{var e;this.currentSrc&&(null===(e=this.imgEl)||void 0===e?void 0:e.currentSrc)&&!this.imgEl.currentSrc.includes(this.currentSrc)||(this.imgLoaded=!0)},this._onError=()=>{console.error("Load image failed:",this.src)},this.imgEl.addEventListener("load",this._onLoad,{once:!0}),this.imgEl.addEventListener("error",this._onError,{once:!0}))}detachImgHandlers(){this.imgEl&&(this._onLoad&&this.imgEl.removeEventListener("load",this._onLoad),this._onError&&this.imgEl.removeEventListener("error",this._onError),this._onLoad=void 0,this._onError=void 0)}beginLoad(){this.hasStarted||this.imgEl&&this.src&&(this.hasStarted=!0,this.wireOnceHandlers(),this.imgEl.complete&&this.imgEl.naturalWidth>0?this.imgLoaded=!0:(this.currentSrc=this.src,this.imgEl.src=this.src,this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0)))}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(i,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(i,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:e=>this.imgEl=e,src:void 0,decoding:"async",style:this.styles,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return s(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};n.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:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(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:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(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:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};r.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{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)}.Circle{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%}.Text{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)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{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)}.Image{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)}.Logo{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{n as ui_image,r as ui_skeleton}
1
+ import{r as e,h as t,H as i,g as s}from"./index-4b819858.js";const n=class{constructor(t){e(this,t),this.hasStarted=!1,this._onLoad=()=>{this.imgLoaded=!0},this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,this.hasStarted=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(e,t){e!==t&&(this.cleanupObserver(),"eager"===e?(this.imgEl&&this.src&&(this.imgEl.src=this.src),this.hasStarted=!0):(this.imgLoaded=!1,this.hasStarted=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.imgEl&&(this.imgEl.src="")}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((e=>{var t;for(const i of e)if(i.isIntersecting){this.beginLoad(),null===(t=this.io)||void 0===t||t.unobserve(i.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var e;null===(e=this.io)||void 0===e||e.disconnect(),this.io=void 0}beginLoad(){this.hasStarted||this.imgEl&&this.src&&(this.hasStarted=!0,this.imgEl.src=this.src,this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0))}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(i,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(i,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:e=>this.imgEl=e,src:void 0,decoding:"async",style:this.styles,onLoad:this._onLoad,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return s(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};n.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:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(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:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(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:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};r.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{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)}.Circle{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%}.Text{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)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{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)}.Image{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)}.Logo{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{n as ui_image,r as ui_skeleton}
@@ -0,0 +1,2 @@
1
+ import { Config } from '../../../../../../../../../../stencil-public-runtime';
2
+ export declare const config: Config;
@@ -0,0 +1,2 @@
1
+ import { Config } from '../../../../../../../../../../stencil-public-runtime';
2
+ export declare const config: Config;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-footer-template",
3
- "version": "1.77.5",
3
+ "version": "1.77.7",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
@@ -1,2 +0,0 @@
1
- import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
2
- export declare const config: Config;
@@ -1,2 +0,0 @@
1
- import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
2
- export declare const config: Config;