@everymatrix/ui-image 1.77.12 → 1.77.14
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/dist/cjs/{index-1708bce9.js → index-e835971b.js} +3 -8
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/ui-image-e0b0f5e5.js +68 -0
- package/dist/cjs/ui-image.cjs.js +2 -2
- package/dist/cjs/ui-image_2.cjs.entry.js +2 -2
- package/dist/collection/components/ui-image/ui-image.js +35 -117
- package/dist/esm/{index-256b7d4e.js → index-97d17652.js} +3 -8
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/ui-image-b7b48fe5.js +66 -0
- package/dist/esm/ui-image.js +3 -3
- package/dist/esm/ui-image_2.entry.js +2 -2
- package/dist/types/components/ui-image/ui-image.d.ts +3 -16
- package/dist/types/components.d.ts +0 -8
- package/dist/ui-image/{index-256b7d4e.js → index-97d17652.js} +2 -2
- package/dist/ui-image/index.esm.js +1 -1
- package/dist/ui-image/ui-image-b7b48fe5.js +1 -0
- package/dist/ui-image/ui-image.esm.js +1 -1
- package/dist/ui-image/ui-image_2.entry.js +1 -1
- package/package.json +2 -2
- package/dist/cjs/ui-image-3dc9dc43.js +0 -126
- package/dist/esm/ui-image-ae115205.js +0 -124
- package/dist/ui-image/ui-image-ae115205.js +0 -1
|
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
const NAMESPACE = 'ui-image';
|
|
24
|
-
const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback:
|
|
24
|
+
const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
|
|
25
25
|
|
|
26
26
|
/*
|
|
27
27
|
Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -1045,17 +1045,12 @@ var connectedCallback = (elm) => {
|
|
|
1045
1045
|
}
|
|
1046
1046
|
};
|
|
1047
1047
|
var disconnectInstance = (instance) => {
|
|
1048
|
-
{
|
|
1049
|
-
safeCall(instance, "disconnectedCallback");
|
|
1050
|
-
}
|
|
1051
1048
|
};
|
|
1052
1049
|
var disconnectedCallback = async (elm) => {
|
|
1053
1050
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1054
1051
|
const hostRef = getHostRef(elm);
|
|
1055
|
-
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
1056
|
-
|
|
1057
|
-
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
1058
|
-
hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
|
|
1052
|
+
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
1053
|
+
hostRef.$onReadyPromise$.then(() => disconnectInstance());
|
|
1059
1054
|
}
|
|
1060
1055
|
}
|
|
1061
1056
|
};
|
package/dist/cjs/index.cjs.js
CHANGED
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-e835971b.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"
|
|
11
|
+
return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-e835971b.js');
|
|
4
|
+
|
|
5
|
+
const uiImageCss = ".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}";
|
|
6
|
+
const UiImageStyle0 = uiImageCss;
|
|
7
|
+
|
|
8
|
+
const UiImage = class {
|
|
9
|
+
constructor(hostRef) {
|
|
10
|
+
index.registerInstance(this, hostRef);
|
|
11
|
+
this.src = undefined;
|
|
12
|
+
this.width = undefined;
|
|
13
|
+
this.height = undefined;
|
|
14
|
+
this.alt = undefined;
|
|
15
|
+
this.styles = undefined;
|
|
16
|
+
this.detectDistance = '200px';
|
|
17
|
+
this.imgLoaded = false;
|
|
18
|
+
this.shouldLoad = false;
|
|
19
|
+
}
|
|
20
|
+
handleSrc() {
|
|
21
|
+
if (!this.shouldLoad) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
const preloadedImage = new Image();
|
|
25
|
+
preloadedImage.onload = () => {
|
|
26
|
+
if (this.image) {
|
|
27
|
+
this.image.src = this.src;
|
|
28
|
+
this.imgLoaded = true;
|
|
29
|
+
preloadedImage.onload = null;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
preloadedImage.src = this.src;
|
|
33
|
+
}
|
|
34
|
+
componentDidLoad() {
|
|
35
|
+
if ('IntersectionObserver' in window) {
|
|
36
|
+
this.el.__uxComponent = this;
|
|
37
|
+
if (!window.EMUxObserver) {
|
|
38
|
+
window.EMUxObserver = new IntersectionObserver((entries) => {
|
|
39
|
+
entries.forEach(entry => {
|
|
40
|
+
if (entry.isIntersecting) {
|
|
41
|
+
const comp = entry.target.__uxComponent;
|
|
42
|
+
if (comp) {
|
|
43
|
+
comp.shouldLoad = true;
|
|
44
|
+
comp.handleSrc();
|
|
45
|
+
}
|
|
46
|
+
window.EMUxObserver.unobserve(entry.target);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}, { rootMargin: this.detectDistance });
|
|
50
|
+
}
|
|
51
|
+
window.EMUxObserver.observe(this.el);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
this.shouldLoad = true;
|
|
55
|
+
this.handleSrc();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
return (index.h(index.Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (index.h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { key: '2188ca4494c10587f064acc5459ffc468948f497', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
|
|
60
|
+
}
|
|
61
|
+
get el() { return index.getElement(this); }
|
|
62
|
+
static get watchers() { return {
|
|
63
|
+
"src": ["handleSrc"]
|
|
64
|
+
}; }
|
|
65
|
+
};
|
|
66
|
+
UiImage.style = UiImageStyle0;
|
|
67
|
+
|
|
68
|
+
exports.UiImage = UiImage;
|
package/dist/cjs/ui-image.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-e835971b.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"
|
|
22
|
+
return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const uiImage = require('./ui-image-
|
|
6
|
-
const index = require('./index-
|
|
5
|
+
const uiImage = require('./ui-image-e0b0f5e5.js');
|
|
6
|
+
const index = require('./index-e835971b.js');
|
|
7
7
|
|
|
8
8
|
const uiSkeletonCss = ":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)}}";
|
|
9
9
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
@@ -2,112 +2,55 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
import "../../../../../ui-skeleton/dist/types/index";
|
|
3
3
|
export class UiImage {
|
|
4
4
|
constructor() {
|
|
5
|
-
this._onLoad = () => {
|
|
6
|
-
this.imgLoaded = true;
|
|
7
|
-
};
|
|
8
5
|
this.src = undefined;
|
|
9
6
|
this.width = undefined;
|
|
10
7
|
this.height = undefined;
|
|
11
8
|
this.alt = undefined;
|
|
12
9
|
this.styles = undefined;
|
|
13
10
|
this.detectDistance = '200px';
|
|
14
|
-
this.loading = 'lazy';
|
|
15
11
|
this.imgLoaded = false;
|
|
12
|
+
this.shouldLoad = false;
|
|
16
13
|
}
|
|
17
|
-
|
|
18
|
-
if (this.
|
|
14
|
+
handleSrc() {
|
|
15
|
+
if (!this.shouldLoad) {
|
|
19
16
|
return;
|
|
20
|
-
this.imgLoaded = false;
|
|
21
|
-
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
22
|
-
this.beginLoad();
|
|
23
17
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
if (this.imgEl && this.src) {
|
|
31
|
-
this.imgEl.src = this.src;
|
|
18
|
+
const preloadedImage = new Image();
|
|
19
|
+
preloadedImage.onload = () => {
|
|
20
|
+
if (this.image) {
|
|
21
|
+
this.image.src = this.src;
|
|
22
|
+
this.imgLoaded = true;
|
|
23
|
+
preloadedImage.onload = null;
|
|
32
24
|
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
this.imgLoaded = false;
|
|
36
|
-
this.setupObserver();
|
|
37
|
-
}
|
|
25
|
+
};
|
|
26
|
+
preloadedImage.src = this.src;
|
|
38
27
|
}
|
|
39
28
|
componentDidLoad() {
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (!this.canUseIO()) {
|
|
56
|
-
this.beginLoad();
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
this.io = new IntersectionObserver((entries) => {
|
|
60
|
-
var _a;
|
|
61
|
-
for (const entry of entries) {
|
|
62
|
-
if (entry.isIntersecting) {
|
|
63
|
-
this.beginLoad();
|
|
64
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
|
|
65
|
-
this.cleanupObserver();
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
29
|
+
if ('IntersectionObserver' in window) {
|
|
30
|
+
this.el.__uxComponent = this;
|
|
31
|
+
if (!window.EMUxObserver) {
|
|
32
|
+
window.EMUxObserver = new IntersectionObserver((entries) => {
|
|
33
|
+
entries.forEach(entry => {
|
|
34
|
+
if (entry.isIntersecting) {
|
|
35
|
+
const comp = entry.target.__uxComponent;
|
|
36
|
+
if (comp) {
|
|
37
|
+
comp.shouldLoad = true;
|
|
38
|
+
comp.handleSrc();
|
|
39
|
+
}
|
|
40
|
+
window.EMUxObserver.unobserve(entry.target);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}, { rootMargin: this.detectDistance });
|
|
68
44
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
75
|
-
this.io = undefined;
|
|
76
|
-
}
|
|
77
|
-
beginLoad() {
|
|
78
|
-
this.preloadAndSetSrc();
|
|
79
|
-
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
80
|
-
this.imgLoaded = true;
|
|
45
|
+
window.EMUxObserver.observe(this.el);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
this.shouldLoad = true;
|
|
49
|
+
this.handleSrc();
|
|
81
50
|
}
|
|
82
|
-
}
|
|
83
|
-
preloadAndSetSrc() {
|
|
84
|
-
if (!this.src || !this.imgEl)
|
|
85
|
-
return;
|
|
86
|
-
const preloaded = new Image();
|
|
87
|
-
preloaded.onload = () => {
|
|
88
|
-
if (this.imgEl) {
|
|
89
|
-
this.imgEl.src = preloaded.src;
|
|
90
|
-
this.imgLoaded = true;
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
preloaded.onerror = () => {
|
|
94
|
-
if (this.imgEl) {
|
|
95
|
-
this.imgEl.src = this.src;
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
preloaded.src = this.src;
|
|
99
|
-
}
|
|
100
|
-
get showSkeleton() {
|
|
101
|
-
return this.loading !== 'eager' && !this.imgLoaded;
|
|
102
|
-
}
|
|
103
|
-
renderEager() {
|
|
104
|
-
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" })));
|
|
105
|
-
}
|
|
106
|
-
renderLazy() {
|
|
107
|
-
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" })));
|
|
108
51
|
}
|
|
109
52
|
render() {
|
|
110
|
-
return this.
|
|
53
|
+
return (h(Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '2188ca4494c10587f064acc5459ffc468948f497', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
|
|
111
54
|
}
|
|
112
55
|
static get is() { return "ui-image"; }
|
|
113
56
|
static get originalStyleUrls() {
|
|
@@ -224,45 +167,20 @@ export class UiImage {
|
|
|
224
167
|
"attribute": "detect-distance",
|
|
225
168
|
"reflect": false,
|
|
226
169
|
"defaultValue": "'200px'"
|
|
227
|
-
},
|
|
228
|
-
"loading": {
|
|
229
|
-
"type": "string",
|
|
230
|
-
"mutable": false,
|
|
231
|
-
"complexType": {
|
|
232
|
-
"original": "HTMLImageElement['loading']",
|
|
233
|
-
"resolved": "\"eager\" | \"lazy\"",
|
|
234
|
-
"references": {
|
|
235
|
-
"HTMLImageElement": {
|
|
236
|
-
"location": "global",
|
|
237
|
-
"id": "global::HTMLImageElement"
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
},
|
|
241
|
-
"required": false,
|
|
242
|
-
"optional": false,
|
|
243
|
-
"docs": {
|
|
244
|
-
"tags": [],
|
|
245
|
-
"text": "Loading type"
|
|
246
|
-
},
|
|
247
|
-
"attribute": "loading",
|
|
248
|
-
"reflect": false,
|
|
249
|
-
"defaultValue": "'lazy'"
|
|
250
170
|
}
|
|
251
171
|
};
|
|
252
172
|
}
|
|
253
173
|
static get states() {
|
|
254
174
|
return {
|
|
255
|
-
"imgLoaded": {}
|
|
175
|
+
"imgLoaded": {},
|
|
176
|
+
"shouldLoad": {}
|
|
256
177
|
};
|
|
257
178
|
}
|
|
258
179
|
static get elementRef() { return "el"; }
|
|
259
180
|
static get watchers() {
|
|
260
181
|
return [{
|
|
261
182
|
"propName": "src",
|
|
262
|
-
"methodName": "
|
|
263
|
-
}, {
|
|
264
|
-
"propName": "loading",
|
|
265
|
-
"methodName": "onLoadingChange"
|
|
183
|
+
"methodName": "handleSrc"
|
|
266
184
|
}];
|
|
267
185
|
}
|
|
268
186
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const NAMESPACE = 'ui-image';
|
|
2
|
-
const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback:
|
|
2
|
+
const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -1023,17 +1023,12 @@ var connectedCallback = (elm) => {
|
|
|
1023
1023
|
}
|
|
1024
1024
|
};
|
|
1025
1025
|
var disconnectInstance = (instance) => {
|
|
1026
|
-
{
|
|
1027
|
-
safeCall(instance, "disconnectedCallback");
|
|
1028
|
-
}
|
|
1029
1026
|
};
|
|
1030
1027
|
var disconnectedCallback = async (elm) => {
|
|
1031
1028
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1032
1029
|
const hostRef = getHostRef(elm);
|
|
1033
|
-
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
1034
|
-
|
|
1035
|
-
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
1036
|
-
hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
|
|
1030
|
+
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
1031
|
+
hostRef.$onReadyPromise$.then(() => disconnectInstance());
|
|
1037
1032
|
}
|
|
1038
1033
|
}
|
|
1039
1034
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { U as UiImage } from './ui-image-
|
|
2
|
-
import './index-
|
|
1
|
+
export { U as UiImage } from './ui-image-b7b48fe5.js';
|
|
2
|
+
import './index-97d17652.js';
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { b as bootstrapLazy } from './index-97d17652.js';
|
|
2
|
+
export { s as setNonce } from './index-97d17652.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"
|
|
8
|
+
return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-97d17652.js';
|
|
2
|
+
|
|
3
|
+
const uiImageCss = ".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}";
|
|
4
|
+
const UiImageStyle0 = uiImageCss;
|
|
5
|
+
|
|
6
|
+
const UiImage = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.src = undefined;
|
|
10
|
+
this.width = undefined;
|
|
11
|
+
this.height = undefined;
|
|
12
|
+
this.alt = undefined;
|
|
13
|
+
this.styles = undefined;
|
|
14
|
+
this.detectDistance = '200px';
|
|
15
|
+
this.imgLoaded = false;
|
|
16
|
+
this.shouldLoad = false;
|
|
17
|
+
}
|
|
18
|
+
handleSrc() {
|
|
19
|
+
if (!this.shouldLoad) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const preloadedImage = new Image();
|
|
23
|
+
preloadedImage.onload = () => {
|
|
24
|
+
if (this.image) {
|
|
25
|
+
this.image.src = this.src;
|
|
26
|
+
this.imgLoaded = true;
|
|
27
|
+
preloadedImage.onload = null;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
preloadedImage.src = this.src;
|
|
31
|
+
}
|
|
32
|
+
componentDidLoad() {
|
|
33
|
+
if ('IntersectionObserver' in window) {
|
|
34
|
+
this.el.__uxComponent = this;
|
|
35
|
+
if (!window.EMUxObserver) {
|
|
36
|
+
window.EMUxObserver = new IntersectionObserver((entries) => {
|
|
37
|
+
entries.forEach(entry => {
|
|
38
|
+
if (entry.isIntersecting) {
|
|
39
|
+
const comp = entry.target.__uxComponent;
|
|
40
|
+
if (comp) {
|
|
41
|
+
comp.shouldLoad = true;
|
|
42
|
+
comp.handleSrc();
|
|
43
|
+
}
|
|
44
|
+
window.EMUxObserver.unobserve(entry.target);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}, { rootMargin: this.detectDistance });
|
|
48
|
+
}
|
|
49
|
+
window.EMUxObserver.observe(this.el);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
this.shouldLoad = true;
|
|
53
|
+
this.handleSrc();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
render() {
|
|
57
|
+
return (h(Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '2188ca4494c10587f064acc5459ffc468948f497', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
|
|
58
|
+
}
|
|
59
|
+
get el() { return getElement(this); }
|
|
60
|
+
static get watchers() { return {
|
|
61
|
+
"src": ["handleSrc"]
|
|
62
|
+
}; }
|
|
63
|
+
};
|
|
64
|
+
UiImage.style = UiImageStyle0;
|
|
65
|
+
|
|
66
|
+
export { UiImage as U };
|
package/dist/esm/ui-image.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-97d17652.js';
|
|
2
|
+
export { s as setNonce } from './index-97d17652.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"
|
|
19
|
+
return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
|
|
20
20
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { U as ui_image } from './ui-image-
|
|
2
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
export { U as ui_image } from './ui-image-b7b48fe5.js';
|
|
2
|
+
import { r as registerInstance, h, H as Host } from './index-97d17652.js';
|
|
3
3
|
|
|
4
4
|
const uiSkeletonCss = ":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)}}";
|
|
5
5
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
@@ -12,24 +12,11 @@ export declare class UiImage {
|
|
|
12
12
|
styles: any;
|
|
13
13
|
/** Distance for the image to be detected */
|
|
14
14
|
detectDistance: string;
|
|
15
|
-
/** Loading type */
|
|
16
|
-
loading: HTMLImageElement['loading'];
|
|
17
15
|
private imgLoaded;
|
|
16
|
+
private shouldLoad;
|
|
18
17
|
el: HTMLElement;
|
|
19
|
-
private
|
|
20
|
-
|
|
21
|
-
onSrcChange(): void;
|
|
22
|
-
onLoadingChange(newVal: HTMLImageElement['loading'], oldVal: HTMLImageElement['loading']): void;
|
|
18
|
+
private image;
|
|
19
|
+
handleSrc(): void;
|
|
23
20
|
componentDidLoad(): void;
|
|
24
|
-
disconnectedCallback(): void;
|
|
25
|
-
private canUseIO;
|
|
26
|
-
private setupObserver;
|
|
27
|
-
private cleanupObserver;
|
|
28
|
-
private _onLoad;
|
|
29
|
-
private beginLoad;
|
|
30
|
-
private preloadAndSetSrc;
|
|
31
|
-
private get showSkeleton();
|
|
32
|
-
private renderEager;
|
|
33
|
-
private renderLazy;
|
|
34
21
|
render(): any;
|
|
35
22
|
}
|
|
@@ -19,10 +19,6 @@ export namespace Components {
|
|
|
19
19
|
* Height of the image
|
|
20
20
|
*/
|
|
21
21
|
"height": string;
|
|
22
|
-
/**
|
|
23
|
-
* Loading type
|
|
24
|
-
*/
|
|
25
|
-
"loading": HTMLImageElement['loading'];
|
|
26
22
|
/**
|
|
27
23
|
* Source of the image
|
|
28
24
|
*/
|
|
@@ -62,10 +58,6 @@ declare namespace LocalJSX {
|
|
|
62
58
|
* Height of the image
|
|
63
59
|
*/
|
|
64
60
|
"height"?: string;
|
|
65
|
-
/**
|
|
66
|
-
* Loading type
|
|
67
|
-
*/
|
|
68
|
-
"loading"?: HTMLImageElement['loading'];
|
|
69
61
|
/**
|
|
70
62
|
* Source of the image
|
|
71
63
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),m=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),
|
|
2
|
-
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.L}" was not found`);l.isProxied||(n.R=l.watchers,ue(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=L(n);if(!r.has(t)){const l=()=>{};((e,t,n)=>{let l=r.get(e);m&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,r.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>Z(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)
|
|
1
|
+
var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),m=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,d=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?b(w):f.raf(w))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},w=()=>{v(d),v(y),(p=d.length>0)&&f.raf(w)},b=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>x});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,P=e=>{if(e.isOk)return e.value;throw e.value},x=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,i=!1;const r=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&i?r[r.length-1].i+=l:r.push(s?T(null,l):l),i=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,r.length>0&&(u.h=r),u.m=o,u},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},F=e=>n(e).$hostElement$,H=new WeakMap,L=e=>"sc-"+e.v,N=(e,t,n,l,s,i)=>{if(n!==l){let r=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=U(n),s=U(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(r||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((r||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?r=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&i||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(W);t=t.replace(q,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},D=/\s/,U=e=>e?e.split(D):[],W="Capture",q=RegExp(W+"$"),G=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of V(Object.keys(o)))e in s||N(l,e,o[e],void 0,n,t.l);for(const e of V(Object.keys(s)))N(l,e,o[e],s[e],n,t.l)};function V(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var _=!1,z=(e,t,n)=>{const l=t.h[n];let o,s,i=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.p),G(null,l,_),l.h)for(i=0;i<l.h.length;++i)s=z(e,l,i),s&&o.appendChild(s);return o["s-hn"]=M,o},B=(e,t,n,l,o,s)=>{let i,r=e;for(;o<=s;++o)l[o]&&(i=z(null,n,o),i&&(l[o].$=i,X(r,i,t)))},I=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Q(t),e&&e.remove()}}},J=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),K=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,i=t.i;null===i?(G(e,t,_),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,i,r=0,c=0,u=0,a=0,f=t.length-1,h=t[0],m=t[f],p=l.length-1,d=l[0],y=l[p];for(;r<=f&&c<=p;)if(null==h)h=t[++r];else if(null==m)m=t[--f];else if(null==d)d=l[++c];else if(null==y)y=l[--p];else if(J(h,d,o))K(h,d,o),h=t[++r],d=l[++c];else if(J(m,y,o))K(m,y,o),m=t[--f],y=l[--p];else if(J(h,y,o))K(h,y,o),X(e,h.$,m.$.nextSibling),h=t[++r],y=l[--p];else if(J(m,d,o))K(m,d,o),X(e,m.$,h.$),m=t[--f],d=l[++c];else{for(u=-1,a=r;a<=f;++a)if(t[a]&&null!==t[a].m&&t[a].m===d.m){u=a;break}u>=0?(i=t[u],i.p!==d.p?s=z(t&&t[c],n,u):(K(i,d,o),t[u]=void 0,s=i.$),d=l[++c]):(s=z(t&&t[c],n,c),d=l[++c]),s&&X(h.$.parentNode,s,h.$)}r>f?B(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&I(t,r,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),B(l,null,t,s,0,s.length-1)):null!==o&&I(o,0,o.length-1)):e.i!==i&&(l.data=i)},Q=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Q)},X=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Y=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},Z=(e,t)=>{if(e.l|=16,!(4&e.l))return Y(e,e.j),g((()=>ee(e,t)));e.l|=512},ee=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return te(void 0,(()=>le(e,n,t)))},te=(e,t)=>ne(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),ne=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,le=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k;((e,t)=>{var n;const l=L(t),o=r.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,i=H.get(e=e.head||e);if(i||H.set(e,i=new Set),!i.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),i&&i.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o])})(e.$hostElement$.getRootNode(),t)})(e);oe(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>se(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},oe=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.C||T(null,null),s=(e=>e&&e.p===A)(t)?t:R(null,null,t);if(M=l.tagName,n&&s.u)for(const e of Object.keys(s.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(s.u[e]=l[e]);s.p=null,s.l|=4,e.C=s,s.$=o.$=l,K(o,s,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},se=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ce(t),re(n,"componentDidLoad"),e.M(t),l||ie()),e.S&&(e.S(),e.S=void 0),512&e.l&&b((()=>Z(e,!1))),e.l&=-517},ie=()=>{ce(a.documentElement),b((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"ui-image"}});return e.dispatchEvent(t),t})(u)))},re=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ce=e=>e.classList.add("hydrated"),ue=(e,t,l)=>{var o,i;const r=e.prototype;if(t.P||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.P)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(r,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const i=n(e);if(!i)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const r=i.$hostElement$,c=i.T.get(t),u=i.l,a=i.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.P[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(i.T.set(t,l),a)){if(o.R&&128&u){const e=o.R[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,r)}}))}2==(18&u)&&Z(i,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;r.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var i;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(r.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),r=null==l?void 0:l.l;if(r&&!(8&r)&&128&r&&s!==o){const n=l.t,r=null==(i=t.R)?void 0:i[e];null==r||r.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(i=t.R)?i:{}),...c.filter((([e,t])=>15&t[0])).map((([e,t])=>{const n=t[1]||e;return l.set(n,e),n}))]))}}return e},ae=(e,l={})=>{var o;const h=[],p=l.exclude||[],d=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),v=a.createElement("style"),w=[];let b,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],P:l[2],A:l[3]};4&c.l&&(S=!0),c.P=l[2],c.R=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.F=new Promise((e=>l.M=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c)}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?w.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.F)&&t.F.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Y(t,t.j=n);break}}l.P&&Object.entries(l.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.H){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.H;if(!n)return;const l=i.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(i.set(n,e),e[t])),s)
|
|
2
|
+
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.L}" was not found`);l.isProxied||(n.R=l.watchers,ue(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=L(n);if(!r.has(t)){const l=()=>{};((e,t,n)=>{let l=r.get(e);m&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,r.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>Z(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)||(null==e?void 0:e.F)&&e.F.then((()=>{}))}})()))}componentOnReady(){return n(this).F}};c.H=e[0],p.includes(u)||d.get(u)||(h.push(u),d.define(u,ue(a,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}g=!1,w.length?w.map((e=>e.connectedCallback())):f.jmp((()=>b=setTimeout(ie,30)))},fe=e=>f.O=e;export{A as H,ae as b,F as g,R as h,h as p,l as r,fe as s}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{U as UiImage}from"./ui-image-
|
|
1
|
+
export{U as UiImage}from"./ui-image-b7b48fe5.js";import"./index-97d17652.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,h as t,H as s,g as e}from"./index-97d17652.js";const r=class{constructor(t){i(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 i=new Image;i.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0,i.onload=null)},i.src=this.src}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const t=i.target.__uxComponent;t&&(t.shouldLoad=!0,t.handleSrc()),window.EMUxObserver.unobserve(i.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return t(s,{key:"f506ba73852f257ad80bf59ca177d2065a5f365e",class:"HostContainer"},!this.imgLoaded&&t("ui-skeleton",{key:"564ebfab701f827ddc2debccb7615926dbc9e876",class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{key:"2188ca4494c10587f064acc5459ffc468948f497",ref:i=>this.image=i,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 e(this)}static get watchers(){return{src:["handleSrc"]}}};r.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}";export{r as U}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,b as e}from"./index-
|
|
1
|
+
import{p as t,b as e}from"./index-97d17652.js";export{s as setNonce}from"./index-97d17652.js";import{g as i}from"./app-globals-0f993ce5.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((async t=>(await i(),e([["ui-image_2",[[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],styles:[8],detectDistance:[1,"detect-distance"],imgLoaded:[32],shouldLoad:[32]},null,{src:["handleSrc"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1]},null,{structure:["handleStructureChange"]}]]]],t))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{U as ui_image}from"./ui-image-
|
|
1
|
+
export{U as ui_image}from"./ui-image-b7b48fe5.js";import{r as e,h as t,H as n}from"./index-97d17652.js";const i=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,n)=>t("div",{key:n,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(n,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};i.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{i as ui_skeleton}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everymatrix/ui-image",
|
|
3
|
-
"version": "1.77.
|
|
3
|
+
"version": "1.77.14",
|
|
4
4
|
"main": "./dist/index.cjs.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"es2015": "./dist/esm/index.mjs",
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@everymatrix/ui-skeleton": "1.77.
|
|
27
|
+
"@everymatrix/ui-skeleton": "1.77.14"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-1708bce9.js');
|
|
4
|
-
|
|
5
|
-
const uiImageCss = ".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}";
|
|
6
|
-
const UiImageStyle0 = uiImageCss;
|
|
7
|
-
|
|
8
|
-
const UiImage = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
index.registerInstance(this, hostRef);
|
|
11
|
-
this._onLoad = () => {
|
|
12
|
-
this.imgLoaded = true;
|
|
13
|
-
};
|
|
14
|
-
this.src = undefined;
|
|
15
|
-
this.width = undefined;
|
|
16
|
-
this.height = undefined;
|
|
17
|
-
this.alt = undefined;
|
|
18
|
-
this.styles = undefined;
|
|
19
|
-
this.detectDistance = '200px';
|
|
20
|
-
this.loading = 'lazy';
|
|
21
|
-
this.imgLoaded = false;
|
|
22
|
-
}
|
|
23
|
-
onSrcChange() {
|
|
24
|
-
if (this.loading === 'eager')
|
|
25
|
-
return;
|
|
26
|
-
this.imgLoaded = false;
|
|
27
|
-
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
28
|
-
this.beginLoad();
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
onLoadingChange(newVal, oldVal) {
|
|
32
|
-
if (newVal === oldVal)
|
|
33
|
-
return;
|
|
34
|
-
this.cleanupObserver();
|
|
35
|
-
if (newVal === 'eager') {
|
|
36
|
-
if (this.imgEl && this.src) {
|
|
37
|
-
this.imgEl.src = this.src;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
this.imgLoaded = false;
|
|
42
|
-
this.setupObserver();
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
componentDidLoad() {
|
|
46
|
-
if (this.loading === 'eager')
|
|
47
|
-
return;
|
|
48
|
-
this.setupObserver();
|
|
49
|
-
}
|
|
50
|
-
disconnectedCallback() {
|
|
51
|
-
this.cleanupObserver();
|
|
52
|
-
if (this.imgEl)
|
|
53
|
-
this.imgEl.src = '';
|
|
54
|
-
}
|
|
55
|
-
canUseIO() {
|
|
56
|
-
return typeof window !== 'undefined' && 'IntersectionObserver' in window;
|
|
57
|
-
}
|
|
58
|
-
setupObserver() {
|
|
59
|
-
if (this.loading === 'eager')
|
|
60
|
-
return;
|
|
61
|
-
if (!this.canUseIO()) {
|
|
62
|
-
this.beginLoad();
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
this.io = new IntersectionObserver((entries) => {
|
|
66
|
-
var _a;
|
|
67
|
-
for (const entry of entries) {
|
|
68
|
-
if (entry.isIntersecting) {
|
|
69
|
-
this.beginLoad();
|
|
70
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
|
|
71
|
-
this.cleanupObserver();
|
|
72
|
-
break;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}, { root: null, rootMargin: this.detectDistance, threshold: 0 });
|
|
76
|
-
this.io.observe(this.el);
|
|
77
|
-
}
|
|
78
|
-
cleanupObserver() {
|
|
79
|
-
var _a;
|
|
80
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
81
|
-
this.io = undefined;
|
|
82
|
-
}
|
|
83
|
-
beginLoad() {
|
|
84
|
-
this.preloadAndSetSrc();
|
|
85
|
-
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
86
|
-
this.imgLoaded = true;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
preloadAndSetSrc() {
|
|
90
|
-
if (!this.src || !this.imgEl)
|
|
91
|
-
return;
|
|
92
|
-
const preloaded = new Image();
|
|
93
|
-
preloaded.onload = () => {
|
|
94
|
-
if (this.imgEl) {
|
|
95
|
-
this.imgEl.src = preloaded.src;
|
|
96
|
-
this.imgLoaded = true;
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
preloaded.onerror = () => {
|
|
100
|
-
if (this.imgEl) {
|
|
101
|
-
this.imgEl.src = this.src;
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
preloaded.src = this.src;
|
|
105
|
-
}
|
|
106
|
-
get showSkeleton() {
|
|
107
|
-
return this.loading !== 'eager' && !this.imgLoaded;
|
|
108
|
-
}
|
|
109
|
-
renderEager() {
|
|
110
|
-
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" })));
|
|
111
|
-
}
|
|
112
|
-
renderLazy() {
|
|
113
|
-
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" })));
|
|
114
|
-
}
|
|
115
|
-
render() {
|
|
116
|
-
return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
|
|
117
|
-
}
|
|
118
|
-
get el() { return index.getElement(this); }
|
|
119
|
-
static get watchers() { return {
|
|
120
|
-
"src": ["onSrcChange"],
|
|
121
|
-
"loading": ["onLoadingChange"]
|
|
122
|
-
}; }
|
|
123
|
-
};
|
|
124
|
-
UiImage.style = UiImageStyle0;
|
|
125
|
-
|
|
126
|
-
exports.UiImage = UiImage;
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-256b7d4e.js';
|
|
2
|
-
|
|
3
|
-
const uiImageCss = ".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}";
|
|
4
|
-
const UiImageStyle0 = uiImageCss;
|
|
5
|
-
|
|
6
|
-
const UiImage = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this._onLoad = () => {
|
|
10
|
-
this.imgLoaded = true;
|
|
11
|
-
};
|
|
12
|
-
this.src = undefined;
|
|
13
|
-
this.width = undefined;
|
|
14
|
-
this.height = undefined;
|
|
15
|
-
this.alt = undefined;
|
|
16
|
-
this.styles = undefined;
|
|
17
|
-
this.detectDistance = '200px';
|
|
18
|
-
this.loading = 'lazy';
|
|
19
|
-
this.imgLoaded = false;
|
|
20
|
-
}
|
|
21
|
-
onSrcChange() {
|
|
22
|
-
if (this.loading === 'eager')
|
|
23
|
-
return;
|
|
24
|
-
this.imgLoaded = false;
|
|
25
|
-
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
26
|
-
this.beginLoad();
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
onLoadingChange(newVal, oldVal) {
|
|
30
|
-
if (newVal === oldVal)
|
|
31
|
-
return;
|
|
32
|
-
this.cleanupObserver();
|
|
33
|
-
if (newVal === 'eager') {
|
|
34
|
-
if (this.imgEl && this.src) {
|
|
35
|
-
this.imgEl.src = this.src;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
this.imgLoaded = false;
|
|
40
|
-
this.setupObserver();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
componentDidLoad() {
|
|
44
|
-
if (this.loading === 'eager')
|
|
45
|
-
return;
|
|
46
|
-
this.setupObserver();
|
|
47
|
-
}
|
|
48
|
-
disconnectedCallback() {
|
|
49
|
-
this.cleanupObserver();
|
|
50
|
-
if (this.imgEl)
|
|
51
|
-
this.imgEl.src = '';
|
|
52
|
-
}
|
|
53
|
-
canUseIO() {
|
|
54
|
-
return typeof window !== 'undefined' && 'IntersectionObserver' in window;
|
|
55
|
-
}
|
|
56
|
-
setupObserver() {
|
|
57
|
-
if (this.loading === 'eager')
|
|
58
|
-
return;
|
|
59
|
-
if (!this.canUseIO()) {
|
|
60
|
-
this.beginLoad();
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
this.io = new IntersectionObserver((entries) => {
|
|
64
|
-
var _a;
|
|
65
|
-
for (const entry of entries) {
|
|
66
|
-
if (entry.isIntersecting) {
|
|
67
|
-
this.beginLoad();
|
|
68
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
|
|
69
|
-
this.cleanupObserver();
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}, { root: null, rootMargin: this.detectDistance, threshold: 0 });
|
|
74
|
-
this.io.observe(this.el);
|
|
75
|
-
}
|
|
76
|
-
cleanupObserver() {
|
|
77
|
-
var _a;
|
|
78
|
-
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
79
|
-
this.io = undefined;
|
|
80
|
-
}
|
|
81
|
-
beginLoad() {
|
|
82
|
-
this.preloadAndSetSrc();
|
|
83
|
-
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
84
|
-
this.imgLoaded = true;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
preloadAndSetSrc() {
|
|
88
|
-
if (!this.src || !this.imgEl)
|
|
89
|
-
return;
|
|
90
|
-
const preloaded = new Image();
|
|
91
|
-
preloaded.onload = () => {
|
|
92
|
-
if (this.imgEl) {
|
|
93
|
-
this.imgEl.src = preloaded.src;
|
|
94
|
-
this.imgLoaded = true;
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
preloaded.onerror = () => {
|
|
98
|
-
if (this.imgEl) {
|
|
99
|
-
this.imgEl.src = this.src;
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
preloaded.src = this.src;
|
|
103
|
-
}
|
|
104
|
-
get showSkeleton() {
|
|
105
|
-
return this.loading !== 'eager' && !this.imgLoaded;
|
|
106
|
-
}
|
|
107
|
-
renderEager() {
|
|
108
|
-
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" })));
|
|
109
|
-
}
|
|
110
|
-
renderLazy() {
|
|
111
|
-
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" })));
|
|
112
|
-
}
|
|
113
|
-
render() {
|
|
114
|
-
return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
|
|
115
|
-
}
|
|
116
|
-
get el() { return getElement(this); }
|
|
117
|
-
static get watchers() { return {
|
|
118
|
-
"src": ["onSrcChange"],
|
|
119
|
-
"loading": ["onLoadingChange"]
|
|
120
|
-
}; }
|
|
121
|
-
};
|
|
122
|
-
UiImage.style = UiImageStyle0;
|
|
123
|
-
|
|
124
|
-
export { UiImage as U };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,h as t,H as s,g as e}from"./index-256b7d4e.js";const r=class{constructor(t){i(this,t),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,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(i,t){i!==t&&(this.cleanupObserver(),"eager"===i?this.imgEl&&this.src&&(this.imgEl.src=this.src):(this.imgLoaded=!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((i=>{var t;for(const s of i)if(s.isIntersecting){this.beginLoad(),null===(t=this.io)||void 0===t||t.unobserve(s.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var i;null===(i=this.io)||void 0===i||i.disconnect(),this.io=void 0}beginLoad(){this.preloadAndSetSrc(),this.imgEl&&this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0)}preloadAndSetSrc(){if(!this.src||!this.imgEl)return;const i=new Image;i.onload=()=>{this.imgEl&&(this.imgEl.src=i.src,this.imgLoaded=!0)},i.onerror=()=>{this.imgEl&&(this.imgEl.src=this.src)},i.src=this.src}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(s,{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(s,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:i=>this.imgEl=i,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 e(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};r.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}";export{r as U}
|