@getflip/swirl-components 0.300.0 → 0.300.2
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/components.json +1 -1
- package/dist/cjs/swirl-app-icon.cjs.entry.js +14 -1
- package/dist/cjs/swirl-avatar.cjs.entry.js +12 -1
- package/dist/cjs/swirl-file-viewer_8.cjs.entry.js +17 -6
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +14 -3
- package/dist/collection/components/swirl-app-icon/swirl-app-icon.js +14 -1
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +12 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.js +14 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js +3 -5
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +14 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-app-icon.js +14 -1
- package/dist/components/swirl-avatar.js +12 -1
- package/dist/components/swirl-file-viewer-image2.js +14 -1
- package/dist/components/swirl-file-viewer-pdf2.js +3 -5
- package/dist/components/swirl-image-grid-item.js +14 -3
- package/dist/esm/swirl-app-icon.entry.js +14 -1
- package/dist/esm/swirl-avatar.entry.js +12 -1
- package/dist/esm/swirl-file-viewer_8.entry.js +17 -6
- package/dist/esm/swirl-image-grid-item.entry.js +14 -3
- package/dist/swirl-components/p-329a4a15.entry.js +1 -0
- package/dist/swirl-components/p-9356e017.entry.js +1 -0
- package/dist/swirl-components/p-93767851.entry.js +1 -0
- package/dist/swirl-components/{p-791bc845.entry.js → p-f5a753c6.entry.js} +2 -2
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-app-icon/swirl-app-icon.d.ts +3 -0
- package/dist/types/components/swirl-avatar/swirl-avatar.d.ts +2 -0
- package/dist/types/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.d.ts +2 -0
- package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts +2 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-0a9f3263.entry.js +0 -1
- package/dist/swirl-components/p-2f44dd71.entry.js +0 -1
- package/dist/swirl-components/p-613a263e.entry.js +0 -1
|
@@ -15,10 +15,23 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
|
|
|
15
15
|
this.setImageUnavailable = () => {
|
|
16
16
|
this.imageAvailable = false;
|
|
17
17
|
};
|
|
18
|
+
this.onImageElementUpdate = (el) => {
|
|
19
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
20
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
21
|
+
this.imgEl = el;
|
|
22
|
+
if (this.imgEl) {
|
|
23
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
24
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
18
27
|
this.icon = undefined;
|
|
19
28
|
this.src = undefined;
|
|
20
29
|
this.imageAvailable = undefined;
|
|
21
30
|
}
|
|
31
|
+
disconnectedCallback() {
|
|
32
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
33
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
34
|
+
}
|
|
22
35
|
render() {
|
|
23
36
|
const showImage = Boolean(this.src) &&
|
|
24
37
|
(this.imageAvailable || this.imageAvailable === undefined);
|
|
@@ -27,7 +40,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
|
|
|
27
40
|
const className = classNames("app-icon", {
|
|
28
41
|
"app-icon--has-icon": showIcon || showFallbackIcon,
|
|
29
42
|
});
|
|
30
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '4c903c83af417365577fa87cf0aa4311c5a88b4d' }, h("span", { key: 'fe288c3715c20fa504329100d08faa2027723204', class: className }, showImage && (h("img", { key: '7e6ed8864f1551bcfed28911010f952b67659e74', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'ac54a7dbb1b26d035a9b24c63667c21d9b37fec7', class: "app-icon__icon", innerHTML: this.icon })))));
|
|
31
44
|
}
|
|
32
45
|
static get style() { return SwirlAppIconStyle0; }
|
|
33
46
|
}, [1, "swirl-app-icon", {
|
|
@@ -23,6 +23,15 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
|
|
|
23
23
|
this.imageError = createEvent(this, "imageError", 7);
|
|
24
24
|
this.imageLoad = createEvent(this, "imageLoad", 7);
|
|
25
25
|
this.componentLoaded = false;
|
|
26
|
+
this.onImageElementUpdate = (el) => {
|
|
27
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
28
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
29
|
+
this.imgEl = el;
|
|
30
|
+
if (this.imgEl) {
|
|
31
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
32
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
26
35
|
this.setImageAvailable = () => {
|
|
27
36
|
this.imageAvailable = true;
|
|
28
37
|
this.loadingError = false;
|
|
@@ -83,6 +92,8 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
|
|
|
83
92
|
}
|
|
84
93
|
disconnectedCallback() {
|
|
85
94
|
this.intersectionObserver?.disconnect();
|
|
95
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
96
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
86
97
|
}
|
|
87
98
|
watchSrcProp() {
|
|
88
99
|
this.imageAvailable = undefined;
|
|
@@ -116,7 +127,7 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
|
|
|
116
127
|
});
|
|
117
128
|
const badgeClassName = classNames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
118
129
|
const toolClassName = classNames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
119
|
-
return (h(Host, { key: '
|
|
130
|
+
return (h(Host, { key: '3c36f09dcdb6b1f6f56e3dbfb7a673e77b3ef6f9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '21057a05d374a8803a8c28b9a5ff133146a5806f', class: className, part: "avatar" }, showImage && (h("span", { key: '99c45973ba401b828bb140a5d61bfd9929340033', class: "avatar__image" }, h("img", { key: '95ad28f353923ceb60205f36086784c733ef461b', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '66de0845df06e63d53d6dc86223aff7da3a46bb7', class: "avatar__initials" }, h("span", { key: '28ca37f08266223e3ecfa461eb4c100a4b3adc41' }, this.initials))), showIcon && h("span", { key: '404230c35d5a1272ef94ae82a56391832904183f', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '90677bfa3d90d817357ced9087ccadf18644ff10', class: "avatar__icon" }, h("swirl-icon-person", { key: 'ddc8abcba3e8679aa16786cde144ce1fc2238460' }))), showBadge && (h("span", { key: '49a10edded6458c1eba7590e355a77e9d35e921f', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '267f7ed319a57f571bf0d5d9b26877ce8ac69e9c', class: toolClassName }, h("slot", { key: '07f809b1dd6d911428daaddb626f75b7cf6ec40a', name: "tool" }))), this.showLabel && (h("span", { key: '5bfdcf03b6afedc2778009c898a3cde10c1959b3', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
120
131
|
}
|
|
121
132
|
get element() { return this; }
|
|
122
133
|
static get watchers() { return {
|
|
@@ -160,6 +160,15 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
|
|
|
160
160
|
this.endPan = () => {
|
|
161
161
|
this.panning = false;
|
|
162
162
|
};
|
|
163
|
+
this.onImageElementUpdate = (el) => {
|
|
164
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
165
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
166
|
+
this.imageEl = el;
|
|
167
|
+
if (this.imageEl) {
|
|
168
|
+
this.imageEl.addEventListener("load", this.onLoad);
|
|
169
|
+
this.imageEl.addEventListener("error", this.onError);
|
|
170
|
+
}
|
|
171
|
+
};
|
|
163
172
|
this.description = "";
|
|
164
173
|
this.errorMessage = "File could not be loaded.";
|
|
165
174
|
this.file = undefined;
|
|
@@ -170,6 +179,10 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
|
|
|
170
179
|
componentDidLoad() {
|
|
171
180
|
this.activate.emit(this.el);
|
|
172
181
|
}
|
|
182
|
+
disconnectedCallback() {
|
|
183
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
184
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
185
|
+
}
|
|
173
186
|
watchFile() {
|
|
174
187
|
this.error = false;
|
|
175
188
|
this.loading = true;
|
|
@@ -189,7 +202,7 @@ const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileVie
|
|
|
189
202
|
return this.updateZoomAndPan(1);
|
|
190
203
|
}
|
|
191
204
|
render() {
|
|
192
|
-
return (h(Host, { key: '
|
|
205
|
+
return (h(Host, { key: 'dee1710566cedea2b677f25cf816d879a9de66f4', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'd29984d319144f8d4ff276a9f5502e14e6b0fdaf', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'd303129a6ba1f537c02b39b3fd0dfa63b82c85f3', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'd96bf98483c7e71bfeca5636547b2bddbe7463fe', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'a6cf23493fc08e24cfd0e4c5cd2e42f06866a3b4' })))));
|
|
193
206
|
}
|
|
194
207
|
get el() { return this; }
|
|
195
208
|
static get watchers() { return {
|
|
@@ -29744,7 +29744,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
|
|
|
29744
29744
|
.filter(({ visibleHeight }) => visibleHeight > 0);
|
|
29745
29745
|
visiblePages = visiblePagesVisibleHeight.map((page) => page.pageNumber);
|
|
29746
29746
|
if (visiblePagesVisibleHeight.length > 0) {
|
|
29747
|
-
const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous,
|
|
29747
|
+
const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous, visiblePagesVisibleHeight[0]);
|
|
29748
29748
|
currentPage = firstMostVisiblePage.pageNumber;
|
|
29749
29749
|
}
|
|
29750
29750
|
}
|
|
@@ -29819,8 +29819,6 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
|
|
|
29819
29819
|
win.document.write(html);
|
|
29820
29820
|
win.focus();
|
|
29821
29821
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
29822
|
-
// var wnd = window.open("about:blank", "", "_blank");
|
|
29823
|
-
// wnd.document.write(html);
|
|
29824
29822
|
win.print();
|
|
29825
29823
|
iframe.remove();
|
|
29826
29824
|
}
|
|
@@ -29844,7 +29842,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
|
|
|
29844
29842
|
const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
|
|
29845
29843
|
const showSpinner = this.loading;
|
|
29846
29844
|
const className = classNames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
|
|
29847
|
-
return (h(Host, { key: '
|
|
29845
|
+
return (h(Host, { key: 'fc44bde6b49ee1fcf3283f03cd92a0ca2df2fd89', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '51731c3e8a10fc9c23f617948af158eef59a7c71', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'f3a1c104d2bd73bd9271310b53c333f9a69695e3', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
|
|
29848
29846
|
const viewport = page.getViewport({
|
|
29849
29847
|
scale: this.getScale(page),
|
|
29850
29848
|
});
|
|
@@ -29858,7 +29856,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
|
|
|
29858
29856
|
width: `${width}px`,
|
|
29859
29857
|
height: `${height}px`,
|
|
29860
29858
|
}, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
|
|
29861
|
-
})), showPagination && (h("span", { key: '
|
|
29859
|
+
})), showPagination && (h("span", { key: '6c21f44b36b998d10beb38b9c758b1931c3f0bab', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '3629ad2f2da41395d4089a20174ec815ffb45c1d', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '4e41abc8439c59dcc389a6bdd47538b4592c7915', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a391c38d897af60076a0d30977a2c82434a88c71' })))));
|
|
29862
29860
|
}
|
|
29863
29861
|
get el() { return this; }
|
|
29864
29862
|
static get watchers() { return {
|
|
@@ -44,6 +44,15 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
|
|
|
44
44
|
event.stopImmediatePropagation();
|
|
45
45
|
this.gifPaused ? this.playGif() : this.pauseGif();
|
|
46
46
|
};
|
|
47
|
+
this.onImageElementUpdate = (el) => {
|
|
48
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
49
|
+
this.img?.removeEventListener("error", this.onError);
|
|
50
|
+
this.img = el;
|
|
51
|
+
if (this.img) {
|
|
52
|
+
this.img.addEventListener("load", this.onLoad);
|
|
53
|
+
this.img.addEventListener("error", this.onError);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
47
56
|
this.alt = undefined;
|
|
48
57
|
this.gifPauseLabel = "Pause GIF playback";
|
|
49
58
|
this.gifPlayLabel = "Continue GIF playback";
|
|
@@ -94,6 +103,8 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
|
|
|
94
103
|
disconnectedCallback() {
|
|
95
104
|
this.intersectionObserver?.disconnect();
|
|
96
105
|
this.computedSrc = "";
|
|
106
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
107
|
+
this.img?.removeEventListener("error", this.onError);
|
|
97
108
|
}
|
|
98
109
|
setupIntersectionObserver() {
|
|
99
110
|
if (this.loading !== "intersecting") {
|
|
@@ -137,16 +148,16 @@ const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGr
|
|
|
137
148
|
"image-grid-item--has-error": this.error,
|
|
138
149
|
"image-grid-item--has-overlay": this.overlay,
|
|
139
150
|
});
|
|
140
|
-
return (h(Host, { key: '
|
|
151
|
+
return (h(Host, { key: 'e4eb2be265d838cddced2108c1b75a240b1400e9', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '008dffd8c7773f259de22d9028e0c2e078f8be2f', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '9fc0c346e2af3ad14ecc213d5e3c6e6f49aa195d', class: "image-grid-item__background", style: {
|
|
141
152
|
backgroundImage: showBlurredBackground
|
|
142
153
|
? `url(${this.computedSrc})`
|
|
143
154
|
: undefined,
|
|
144
155
|
} }), this.loading !== "intersecting" ||
|
|
145
156
|
this.inViewport ||
|
|
146
|
-
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined,
|
|
157
|
+
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '1b23ab0aa255e665a82ba90cb7d96a6576d2d685', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'f6c56c8da07bbf1d19391b741b7d434b6c7b2972', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '4acb33cd6af6e5ee61bab268cdea740b247bef30', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'e3ea89bf918b1fdf754bb81536ba389730788a4f', size: 20 })))), this.loaded &&
|
|
147
158
|
!this.error &&
|
|
148
159
|
this.icon &&
|
|
149
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
160
|
+
!Boolean(this.overlay) && (h("div", { key: 'd3696b2335bad01ffd36c0aaddd2dedf71a8f7fa', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '0cdacacd44ff79c1043e605e62b31da990a11ea0', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '2107c59c6d08c54a9ae7489602b62655e7f8d879', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '9d26ca3e44db026a02b0a331bf4fb9b563e99d1c' }))), this.loaded && this.error && (h("div", { key: '75d83a68fdb8721c11e1a81059da66421408d25a', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '454d1fb81c377b3d6c6291c77d479aada8b04b70', color: "critical" }))))));
|
|
150
161
|
}
|
|
151
162
|
get el() { return this; }
|
|
152
163
|
static get watchers() { return {
|
|
@@ -13,10 +13,23 @@ const SwirlAppIcon = class {
|
|
|
13
13
|
this.setImageUnavailable = () => {
|
|
14
14
|
this.imageAvailable = false;
|
|
15
15
|
};
|
|
16
|
+
this.onImageElementUpdate = (el) => {
|
|
17
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
18
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
19
|
+
this.imgEl = el;
|
|
20
|
+
if (this.imgEl) {
|
|
21
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
22
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
16
25
|
this.icon = undefined;
|
|
17
26
|
this.src = undefined;
|
|
18
27
|
this.imageAvailable = undefined;
|
|
19
28
|
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
31
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
32
|
+
}
|
|
20
33
|
render() {
|
|
21
34
|
const showImage = Boolean(this.src) &&
|
|
22
35
|
(this.imageAvailable || this.imageAvailable === undefined);
|
|
@@ -25,7 +38,7 @@ const SwirlAppIcon = class {
|
|
|
25
38
|
const className = classnames("app-icon", {
|
|
26
39
|
"app-icon--has-icon": showIcon || showFallbackIcon,
|
|
27
40
|
});
|
|
28
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: '4c903c83af417365577fa87cf0aa4311c5a88b4d' }, h("span", { key: 'fe288c3715c20fa504329100d08faa2027723204', class: className }, showImage && (h("img", { key: '7e6ed8864f1551bcfed28911010f952b67659e74', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: 'ac54a7dbb1b26d035a9b24c63667c21d9b37fec7', class: "app-icon__icon", innerHTML: this.icon })))));
|
|
29
42
|
}
|
|
30
43
|
};
|
|
31
44
|
SwirlAppIcon.style = SwirlAppIconStyle0;
|
|
@@ -20,6 +20,15 @@ const SwirlAvatar = class {
|
|
|
20
20
|
this.imageError = createEvent(this, "imageError", 7);
|
|
21
21
|
this.imageLoad = createEvent(this, "imageLoad", 7);
|
|
22
22
|
this.componentLoaded = false;
|
|
23
|
+
this.onImageElementUpdate = (el) => {
|
|
24
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
25
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
26
|
+
this.imgEl = el;
|
|
27
|
+
if (this.imgEl) {
|
|
28
|
+
this.imgEl.addEventListener("load", this.setImageAvailable);
|
|
29
|
+
this.imgEl.addEventListener("error", this.setImageUnavailable);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
23
32
|
this.setImageAvailable = () => {
|
|
24
33
|
this.imageAvailable = true;
|
|
25
34
|
this.loadingError = false;
|
|
@@ -80,6 +89,8 @@ const SwirlAvatar = class {
|
|
|
80
89
|
}
|
|
81
90
|
disconnectedCallback() {
|
|
82
91
|
this.intersectionObserver?.disconnect();
|
|
92
|
+
this.imgEl?.removeEventListener("load", this.setImageAvailable);
|
|
93
|
+
this.imgEl?.removeEventListener("error", this.setImageUnavailable);
|
|
83
94
|
}
|
|
84
95
|
watchSrcProp() {
|
|
85
96
|
this.imageAvailable = undefined;
|
|
@@ -113,7 +124,7 @@ const SwirlAvatar = class {
|
|
|
113
124
|
});
|
|
114
125
|
const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
115
126
|
const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
116
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: '3c36f09dcdb6b1f6f56e3dbfb7a673e77b3ef6f9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '21057a05d374a8803a8c28b9a5ff133146a5806f', class: className, part: "avatar" }, showImage && (h("span", { key: '99c45973ba401b828bb140a5d61bfd9929340033', class: "avatar__image" }, h("img", { key: '95ad28f353923ceb60205f36086784c733ef461b', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '66de0845df06e63d53d6dc86223aff7da3a46bb7', class: "avatar__initials" }, h("span", { key: '28ca37f08266223e3ecfa461eb4c100a4b3adc41' }, this.initials))), showIcon && h("span", { key: '404230c35d5a1272ef94ae82a56391832904183f', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '90677bfa3d90d817357ced9087ccadf18644ff10', class: "avatar__icon" }, h("swirl-icon-person", { key: 'ddc8abcba3e8679aa16786cde144ce1fc2238460' }))), showBadge && (h("span", { key: '49a10edded6458c1eba7590e355a77e9d35e921f', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '267f7ed319a57f571bf0d5d9b26877ce8ac69e9c', class: toolClassName }, h("slot", { key: '07f809b1dd6d911428daaddb626f75b7cf6ec40a', name: "tool" }))), this.showLabel && (h("span", { key: '5bfdcf03b6afedc2778009c898a3cde10c1959b3', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
117
128
|
}
|
|
118
129
|
get element() { return getElement(this); }
|
|
119
130
|
static get watchers() { return {
|
|
@@ -336,6 +336,15 @@ const SwirlFileViewerImage = class {
|
|
|
336
336
|
this.endPan = () => {
|
|
337
337
|
this.panning = false;
|
|
338
338
|
};
|
|
339
|
+
this.onImageElementUpdate = (el) => {
|
|
340
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
341
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
342
|
+
this.imageEl = el;
|
|
343
|
+
if (this.imageEl) {
|
|
344
|
+
this.imageEl.addEventListener("load", this.onLoad);
|
|
345
|
+
this.imageEl.addEventListener("error", this.onError);
|
|
346
|
+
}
|
|
347
|
+
};
|
|
339
348
|
this.description = "";
|
|
340
349
|
this.errorMessage = "File could not be loaded.";
|
|
341
350
|
this.file = undefined;
|
|
@@ -346,6 +355,10 @@ const SwirlFileViewerImage = class {
|
|
|
346
355
|
componentDidLoad() {
|
|
347
356
|
this.activate.emit(this.el);
|
|
348
357
|
}
|
|
358
|
+
disconnectedCallback() {
|
|
359
|
+
this.imageEl?.removeEventListener("load", this.onLoad);
|
|
360
|
+
this.imageEl?.removeEventListener("error", this.onError);
|
|
361
|
+
}
|
|
349
362
|
watchFile() {
|
|
350
363
|
this.error = false;
|
|
351
364
|
this.loading = true;
|
|
@@ -365,7 +378,7 @@ const SwirlFileViewerImage = class {
|
|
|
365
378
|
return this.updateZoomAndPan(1);
|
|
366
379
|
}
|
|
367
380
|
render() {
|
|
368
|
-
return (h(Host, { key: '
|
|
381
|
+
return (h(Host, { key: 'dee1710566cedea2b677f25cf816d879a9de66f4', class: "file-viewer-image", onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'd29984d319144f8d4ff276a9f5502e14e6b0fdaf', class: "file-viewer-image__error", message: this.errorMessage })), h("img", { key: 'd303129a6ba1f537c02b39b3fd0dfa63b82c85f3', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), this.loading && (h("div", { key: 'd96bf98483c7e71bfeca5636547b2bddbe7463fe', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'a6cf23493fc08e24cfd0e4c5cd2e42f06866a3b4' })))));
|
|
369
382
|
}
|
|
370
383
|
get el() { return getElement(this); }
|
|
371
384
|
static get watchers() { return {
|
|
@@ -30109,7 +30122,7 @@ const SwirlFileViewerPdf = class {
|
|
|
30109
30122
|
.filter(({ visibleHeight }) => visibleHeight > 0);
|
|
30110
30123
|
visiblePages = visiblePagesVisibleHeight.map((page) => page.pageNumber);
|
|
30111
30124
|
if (visiblePagesVisibleHeight.length > 0) {
|
|
30112
|
-
const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous,
|
|
30125
|
+
const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous, visiblePagesVisibleHeight[0]);
|
|
30113
30126
|
currentPage = firstMostVisiblePage.pageNumber;
|
|
30114
30127
|
}
|
|
30115
30128
|
}
|
|
@@ -30184,8 +30197,6 @@ const SwirlFileViewerPdf = class {
|
|
|
30184
30197
|
win.document.write(html);
|
|
30185
30198
|
win.focus();
|
|
30186
30199
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
30187
|
-
// var wnd = window.open("about:blank", "", "_blank");
|
|
30188
|
-
// wnd.document.write(html);
|
|
30189
30200
|
win.print();
|
|
30190
30201
|
iframe.remove();
|
|
30191
30202
|
}
|
|
@@ -30209,7 +30220,7 @@ const SwirlFileViewerPdf = class {
|
|
|
30209
30220
|
const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
|
|
30210
30221
|
const showSpinner = this.loading;
|
|
30211
30222
|
const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
|
|
30212
|
-
return (h(Host, { key: '
|
|
30223
|
+
return (h(Host, { key: 'fc44bde6b49ee1fcf3283f03cd92a0ca2df2fd89', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '51731c3e8a10fc9c23f617948af158eef59a7c71', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: 'f3a1c104d2bd73bd9271310b53c333f9a69695e3', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
|
|
30213
30224
|
const viewport = page.getViewport({
|
|
30214
30225
|
scale: this.getScale(page),
|
|
30215
30226
|
});
|
|
@@ -30223,7 +30234,7 @@ const SwirlFileViewerPdf = class {
|
|
|
30223
30234
|
width: `${width}px`,
|
|
30224
30235
|
height: `${height}px`,
|
|
30225
30236
|
}, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
|
|
30226
|
-
})), showPagination && (h("span", { key: '
|
|
30237
|
+
})), showPagination && (h("span", { key: '6c21f44b36b998d10beb38b9c758b1931c3f0bab', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '3629ad2f2da41395d4089a20174ec815ffb45c1d', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '4e41abc8439c59dcc389a6bdd47538b4592c7915', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a391c38d897af60076a0d30977a2c82434a88c71' })))));
|
|
30227
30238
|
}
|
|
30228
30239
|
get el() { return getElement(this); }
|
|
30229
30240
|
static get watchers() { return {
|
|
@@ -35,6 +35,15 @@ const SwirlImageGridItem = class {
|
|
|
35
35
|
event.stopImmediatePropagation();
|
|
36
36
|
this.gifPaused ? this.playGif() : this.pauseGif();
|
|
37
37
|
};
|
|
38
|
+
this.onImageElementUpdate = (el) => {
|
|
39
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
40
|
+
this.img?.removeEventListener("error", this.onError);
|
|
41
|
+
this.img = el;
|
|
42
|
+
if (this.img) {
|
|
43
|
+
this.img.addEventListener("load", this.onLoad);
|
|
44
|
+
this.img.addEventListener("error", this.onError);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
38
47
|
this.alt = undefined;
|
|
39
48
|
this.gifPauseLabel = "Pause GIF playback";
|
|
40
49
|
this.gifPlayLabel = "Continue GIF playback";
|
|
@@ -85,6 +94,8 @@ const SwirlImageGridItem = class {
|
|
|
85
94
|
disconnectedCallback() {
|
|
86
95
|
this.intersectionObserver?.disconnect();
|
|
87
96
|
this.computedSrc = "";
|
|
97
|
+
this.img?.removeEventListener("load", this.onLoad);
|
|
98
|
+
this.img?.removeEventListener("error", this.onError);
|
|
88
99
|
}
|
|
89
100
|
setupIntersectionObserver() {
|
|
90
101
|
if (this.loading !== "intersecting") {
|
|
@@ -128,16 +139,16 @@ const SwirlImageGridItem = class {
|
|
|
128
139
|
"image-grid-item--has-error": this.error,
|
|
129
140
|
"image-grid-item--has-overlay": this.overlay,
|
|
130
141
|
});
|
|
131
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: 'e4eb2be265d838cddced2108c1b75a240b1400e9', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '008dffd8c7773f259de22d9028e0c2e078f8be2f', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '9fc0c346e2af3ad14ecc213d5e3c6e6f49aa195d', class: "image-grid-item__background", style: {
|
|
132
143
|
backgroundImage: showBlurredBackground
|
|
133
144
|
? `url(${this.computedSrc})`
|
|
134
145
|
: undefined,
|
|
135
146
|
} }), this.loading !== "intersecting" ||
|
|
136
147
|
this.inViewport ||
|
|
137
|
-
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined,
|
|
148
|
+
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '1b23ab0aa255e665a82ba90cb7d96a6576d2d685', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'f6c56c8da07bbf1d19391b741b7d434b6c7b2972', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '4acb33cd6af6e5ee61bab268cdea740b247bef30', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'e3ea89bf918b1fdf754bb81536ba389730788a4f', size: 20 })))), this.loaded &&
|
|
138
149
|
!this.error &&
|
|
139
150
|
this.icon &&
|
|
140
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
151
|
+
!Boolean(this.overlay) && (h("div", { key: 'd3696b2335bad01ffd36c0aaddd2dedf71a8f7fa', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '0cdacacd44ff79c1043e605e62b31da990a11ea0', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '2107c59c6d08c54a9ae7489602b62655e7f8d879', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '9d26ca3e44db026a02b0a331bf4fb9b563e99d1c' }))), this.loaded && this.error && (h("div", { key: '75d83a68fdb8721c11e1a81059da66421408d25a', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '454d1fb81c377b3d6c6291c77d479aada8b04b70', color: "critical" }))))));
|
|
141
152
|
}
|
|
142
153
|
get el() { return getElement(this); }
|
|
143
154
|
static get watchers() { return {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,h as s,H as t}from"./p-944f8a36.js";import{c as o}from"./p-a5dce9e6.js";const e=class{constructor(s){i(this,s),this.setImageAvailable=()=>{this.imageAvailable=!0},this.setImageUnavailable=()=>{this.imageAvailable=!1},this.onImageElementUpdate=i=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=i,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.icon=void 0,this.src=void 0,this.imageAvailable=void 0}disconnectedCallback(){this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}render(){const i=Boolean(this.src)&&(this.imageAvailable||void 0===this.imageAvailable),e=!i&&Boolean(this.icon),a=o("app-icon",{"app-icon--has-icon":e||!i&&!e});return s(t,{key:"4c903c83af417365577fa87cf0aa4311c5a88b4d"},s("span",{key:"fe288c3715c20fa504329100d08faa2027723204",class:a},i&&s("img",{key:"7e6ed8864f1551bcfed28911010f952b67659e74",alt:"",height:"256",ref:this.onImageElementUpdate,src:this.src,width:"256"}),e&&s("span",{key:"ac54a7dbb1b26d035a9b24c63667c21d9b37fec7",class:"app-icon__icon",innerHTML:this.icon})))}};e.style=":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}";export{e as swirl_app_icon}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as s,g as o}from"./p-944f8a36.js";import{c as r}from"./p-a5dce9e6.js";import{d as a}from"./p-5136b9f9.js";const d=class{constructor(e){i(this,e),this.gifStarted=t(this,"gifStarted",7),this.gifStopped=t(this,"gifStopped",7),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.handleIntersectionEntries=a((i=>{const t=[...i].sort(((i,t)=>i.time-t.time));this.inViewport=t.at(-1).isIntersecting}),250),this.onLoad=()=>{this.error=!1,this.loaded=!0,this.imageLoad.emit()},this.onError=()=>{this.loaded=!0,this.error=!0,this.imageError.emit()},this.playGif=()=>{this.gifPaused=!1,this.computedSrc=this.src,this.gifStarted.emit()},this.handleControlClick=i=>{i.stopImmediatePropagation(),this.gifPaused?this.playGif():this.pauseGif()},this.onImageElementUpdate=i=>{this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError),this.img=i,this.img&&(this.img.addEventListener("load",this.onLoad),this.img.addEventListener("error",this.onError))},this.alt=void 0,this.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.icon=void 0,this.interactive=void 0,this.loading=void 0,this.overlay=void 0,this.showGifControls=void 0,this.src=void 0,this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.computedSrc=void 0}async play(){this.playGif()}async pause(){this.pauseGif()}watchSrcProp(){this.computedSrc=this.src,this.gifPaused=!1}componentWillLoad(){this.computedSrc=this.src}componentDidLoad(){this.setupIntersectionObserver(),this.img?.complete&&(this.loaded=!0)}componentDidRender(){this.img?.complete&&!this.loaded&&(this.loaded=!0)}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.computedSrc="",this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError)}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver((i=>{this.handleIntersectionEntries(i)})),this.intersectionObserver.observe(this.el))}async pauseGif(){const i=this.img,t=await this.readImageFromCanvas(i.src);this.gifPaused=!0,this.computedSrc=t,this.gifStopped.emit()}readImageFromCanvas(i){return new Promise(((t,e)=>{const s=new Image;s.src=i,s.onload=i=>{const e=i.target,s=document.createElement("canvas"),o=s.getContext("2d");s.width=e.width,s.height=e.height,o.drawImage(e,0,0,e.width,e.height),t(s.toDataURL("image/jpeg"))},s.onerror=()=>e()}))}render(){const i=this.interactive?"button":"div",t=this.gifPaused||!Boolean(this.loading)||"eager"===this.loading||this.loaded&&("intersecting"!==this.loading||this.inViewport),o=Math.min(this.el.parentElement?.children.length,4)??1,a=r("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay});return e(s,{key:"e4eb2be265d838cddced2108c1b75a240b1400e9","data-sibling-count":o,role:"listitem"},e(i,{key:"008dffd8c7773f259de22d9028e0c2e078f8be2f",class:a,type:this.interactive?"button":void 0},e("div",{key:"9fc0c346e2af3ad14ecc213d5e3c6e6f49aa195d",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),"intersecting"!==this.loading||this.inViewport||this.gifPaused?e("img",{alt:this.alt,class:"image-grid-item__image",loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.computedSrc}):e("div",{class:"image-grid-item__loading-placeholder"}),this.showGifControls&&e("swirl-stack",{key:"1b23ab0aa255e665a82ba90cb7d96a6576d2d685",class:"image-grid-item__gif-controls",orientation:"horizontal",spacing:"4"},e("button",{key:"f6c56c8da07bbf1d19391b741b7d434b6c7b2972",class:"image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button",onClick:this.handleControlClick,type:"button","aria-label":this.gifPaused?this.gifPlayLabel:this.gifPauseLabel},e(this.gifPaused?"swirl-icon-play-arrow":"swirl-icon-pause",{size:20})),e("div",{key:"4acb33cd6af6e5ee61bab268cdea740b247bef30",class:"image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label"},e("swirl-icon-gif",{key:"e3ea89bf918b1fdf754bb81536ba389730788a4f",size:20}))),this.loaded&&!this.error&&this.icon&&!Boolean(this.overlay)&&e("div",{key:"d3696b2335bad01ffd36c0aaddd2dedf71a8f7fa",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&e("div",{key:"0cdacacd44ff79c1043e605e62b31da990a11ea0",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&e("div",{key:"2107c59c6d08c54a9ae7489602b62655e7f8d879",class:"image-grid-item__spinner"},e("swirl-spinner",{key:"9d26ca3e44db026a02b0a331bf4fb9b563e99d1c"})),this.loaded&&this.error&&e("div",{key:"75d83a68fdb8721c11e1a81059da66421408d25a",class:"image-grid-item__error"},e("swirl-icon-error",{key:"454d1fb81c377b3d6c6291c77d479aada8b04b70",color:"critical"}))))}get el(){return o(this)}static get watchers(){return{src:["watchSrcProp"]}}};d.style=':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:"";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:"";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}';export{d as swirl_image_grid_item}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as t,h as i,H as r,g as e}from"./p-944f8a36.js";import{c as s}from"./p-a5dce9e6.js";const o={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},n=class{constructor(i){a(this,i),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())},this.badge=void 0,this.badgePosition="bottom",this.color="kiwi",this.icon=void 0,this.initials=void 0,this.interactive=!1,this.label=void 0,this.loading=void 0,this.showLabel=!1,this.size="m",this.src=void 0,this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.imageAvailable=void 0,this.inViewport=!1}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=Boolean(this.src)&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),t=(!a||!this.loaded&&!this.loadingError)&&Boolean(this.initials),e=!a&&!t&&Boolean(this.icon),n=!a&&!t&&!e,v=Boolean(this.badge)&&"m"===this.size,d=this.interactive?"button":void 0,h=s("avatar",`avatar--color-${this.color}`,`avatar--size-${this.size}`,`avatar--variant-${this.variant}`,{"avatar--has-icon":e||n,"avatar--has-initials":t,"avatar--interactive":this.interactive}),c=s("avatar__badge",`avatar__badge--position-${this.badgePosition}`),l=s("avatar__tool",`avatar__tool--position-${this.toolPosition}`);return i(r,{key:"3c36f09dcdb6b1f6f56e3dbfb7a673e77b3ef6f9","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:d,tabIndex:this.interactive?0:void 0},i("span",{key:"21057a05d374a8803a8c28b9a5ff133146a5806f",class:h,part:"avatar"},a&&i("span",{key:"99c45973ba401b828bb140a5d61bfd9929340033",class:"avatar__image"},i("img",{key:"95ad28f353923ceb60205f36086784c733ef461b",alt:"",height:o[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:o[this.size]})),t&&i("span",{key:"66de0845df06e63d53d6dc86223aff7da3a46bb7",class:"avatar__initials"},i("span",{key:"28ca37f08266223e3ecfa461eb4c100a4b3adc41"},this.initials)),e&&i("span",{key:"404230c35d5a1272ef94ae82a56391832904183f",class:"avatar__icon",innerHTML:this.icon}),n&&i("span",{key:"90677bfa3d90d817357ced9087ccadf18644ff10",class:"avatar__icon"},i("swirl-icon-person",{key:"ddc8abcba3e8679aa16786cde144ce1fc2238460"})),v&&i("span",{key:"49a10edded6458c1eba7590e355a77e9d35e921f",class:c,innerHTML:this.badge}),i("span",{key:"267f7ed319a57f571bf0d5d9b26877ce8ac69e9c",class:l},i("slot",{key:"07f809b1dd6d911428daaddb626f75b7cf6ec40a",name:"tool"}))),this.showLabel&&i("span",{key:"5bfdcf03b6afedc2778009c898a3cde10c1959b3","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return e(this)}static get watchers(){return{src:["watchSrcProp"]}}};n.style=":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";export{n as swirl_avatar}
|