xv-webcomponents 1.17.9-qa.0 → 1.17.10-qa.0
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/xv-accordion-v2_48.cjs.entry.js +19 -2
- package/dist/collection/components/xv-image-viewer/xv-image-viewer.css +14 -8
- package/dist/collection/components/xv-image-viewer/xv-image-viewer.js +18 -1
- package/dist/esm/xv-accordion-v2_48.entry.js +19 -2
- package/dist/types/components/xv-image-viewer/xv-image-viewer.d.ts +3 -0
- package/dist/xv-webcomponents/{p-aa302ea5.entry.js → p-db756be1.entry.js} +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
|
@@ -81388,7 +81388,7 @@ const XvHeader = class {
|
|
|
81388
81388
|
};
|
|
81389
81389
|
XvHeader.style = xvHeaderCss();
|
|
81390
81390
|
|
|
81391
|
-
const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host(.image-wrapper){display:inline-flex;position:relative;cursor:pointer;max-width:100%;height:auto;flex:1;align-self:center;align-items:center;justify-content:center}:host(.image-wrapper) .image{width:inherit;height:inherit;max-height:inherit;max-width:inherit;object-fit:inherit;transition:opacity 0.3s ease}:host(.image-wrapper) .loading{align-self:center;margin:0 auto;text-align:center;color:var(--text-placeholder);display:inline-flex;justify-content:center;align-items:center;height:100%;width:100%;position:absolute}:host(.image-wrapper) .fullscreen-
|
|
81391
|
+
const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host(.image-wrapper){display:inline-flex;position:relative;cursor:pointer;max-width:100%;height:auto;flex:1;align-self:center;align-items:center;justify-content:center}:host(.image-wrapper) .image{width:inherit;height:inherit;max-height:inherit;max-width:inherit;object-fit:inherit;transition:opacity 0.3s ease}:host(.image-wrapper) .loading{align-self:center;margin:0 auto;text-align:center;color:var(--text-placeholder);display:inline-flex;justify-content:center;align-items:center;height:100%;width:100%;position:absolute}:host(.image-wrapper) .fullscreen-dialog{border:0;padding:0;margin:0;background:transparent;width:100vw;height:100vh;max-width:100vw;max-height:100vh}:host(.image-wrapper) .fullscreen-dialog[open]{display:flex;justify-content:center;align-items:center;animation:fadeIn 0.3s ease forwards}:host(.image-wrapper) .fullscreen-dialog::backdrop{background:rgba(0, 0, 0, 0.9)}:host(.image-wrapper) .fullscreen-dialog .fullscreen-image{max-width:90%;max-height:90%;opacity:0;transition:opacity 0.3s ease}:host(.image-wrapper) .fullscreen-dialog .fullscreen-image.loaded{opacity:1}:host(.errored){cursor:default}@keyframes fadeIn{from{opacity:0}to{opacity:1}}`;
|
|
81392
81392
|
|
|
81393
81393
|
const XvImageViewer = class {
|
|
81394
81394
|
constructor(hostRef) {
|
|
@@ -81411,6 +81411,12 @@ const XvImageViewer = class {
|
|
|
81411
81411
|
this.closeFullscreen = () => {
|
|
81412
81412
|
this.isFullscreen = false;
|
|
81413
81413
|
};
|
|
81414
|
+
this.handleDialogClick = (e) => {
|
|
81415
|
+
// Close only when the click lands on the dialog/backdrop, not on the image.
|
|
81416
|
+
if (e.target === this.dialogEl) {
|
|
81417
|
+
this.closeFullscreen();
|
|
81418
|
+
}
|
|
81419
|
+
};
|
|
81414
81420
|
this.handleError = () => {
|
|
81415
81421
|
this.errored = true;
|
|
81416
81422
|
this.imageError.emit();
|
|
@@ -81432,8 +81438,19 @@ const XvImageViewer = class {
|
|
|
81432
81438
|
this.loaded = true;
|
|
81433
81439
|
}
|
|
81434
81440
|
}
|
|
81441
|
+
componentDidRender() {
|
|
81442
|
+
var _a;
|
|
81443
|
+
// A modal <dialog> lives in the top layer, so its containing block is the
|
|
81444
|
+
// viewport regardless of any ancestor `transform` (e.g. CDK virtual scroll).
|
|
81445
|
+
if (this.isFullscreen && this.dialogEl && !this.dialogEl.open) {
|
|
81446
|
+
this.dialogEl.showModal();
|
|
81447
|
+
}
|
|
81448
|
+
else if (!this.isFullscreen && ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)) {
|
|
81449
|
+
this.dialogEl.close();
|
|
81450
|
+
}
|
|
81451
|
+
}
|
|
81435
81452
|
render() {
|
|
81436
|
-
return (index$1.h(index$1.Host, { key: '
|
|
81453
|
+
return (index$1.h(index$1.Host, { key: '5dc1ddc1442f6e02f9935e39989a997ee71fe7a7', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && index$1.h("xv-loader-v2", { key: '0cbf1f8e66e16f02472a2a2d5377462c19231189', class: "loading" }, this.placeholder), this.loaded && this.errored && index$1.h("slot", { key: 'f514a0ac91e8f0fc7f6db05454d827e7eff0667f', name: "fallback" }), this.loaded && !this.errored && (index$1.h("img", { key: 'a8e778738af2a042f9e212efbf8a559387e52caf', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (index$1.h("dialog", { key: 'bc052e28843a443b11d7b9c9ab5950f7ba47a7d0', class: "fullscreen-dialog", ref: el => (this.dialogEl = el), onClick: this.handleDialogClick, onClose: this.closeFullscreen }, !this.fullscreenLoaded && index$1.h("xv-loader-v2", { key: 'f88011636374a59ba201fc1d3780fbafe27c3dbd', class: "loading", size: _vars.SIZE_VAR.LG }, this.placeholder), index$1.h("img", { key: '2c2913b88c710e6e80e1448e33a5a41f01ff95da', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
81437
81454
|
'fullscreen-image': true,
|
|
81438
81455
|
loaded: this.fullscreenLoaded,
|
|
81439
81456
|
} })))));
|
|
@@ -156,26 +156,32 @@
|
|
|
156
156
|
width: 100%;
|
|
157
157
|
position: absolute;
|
|
158
158
|
}
|
|
159
|
-
:host(.image-wrapper) .fullscreen-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
159
|
+
:host(.image-wrapper) .fullscreen-dialog {
|
|
160
|
+
border: 0;
|
|
161
|
+
padding: 0;
|
|
162
|
+
margin: 0;
|
|
163
|
+
background: transparent;
|
|
163
164
|
width: 100vw;
|
|
164
165
|
height: 100vh;
|
|
165
|
-
|
|
166
|
+
max-width: 100vw;
|
|
167
|
+
max-height: 100vh;
|
|
168
|
+
}
|
|
169
|
+
:host(.image-wrapper) .fullscreen-dialog[open] {
|
|
166
170
|
display: flex;
|
|
167
171
|
justify-content: center;
|
|
168
172
|
align-items: center;
|
|
169
|
-
z-index: 9999;
|
|
170
173
|
animation: fadeIn 0.3s ease forwards;
|
|
171
174
|
}
|
|
172
|
-
:host(.image-wrapper) .fullscreen-
|
|
175
|
+
:host(.image-wrapper) .fullscreen-dialog::backdrop {
|
|
176
|
+
background: rgba(0, 0, 0, 0.9);
|
|
177
|
+
}
|
|
178
|
+
:host(.image-wrapper) .fullscreen-dialog .fullscreen-image {
|
|
173
179
|
max-width: 90%;
|
|
174
180
|
max-height: 90%;
|
|
175
181
|
opacity: 0;
|
|
176
182
|
transition: opacity 0.3s ease;
|
|
177
183
|
}
|
|
178
|
-
:host(.image-wrapper) .fullscreen-
|
|
184
|
+
:host(.image-wrapper) .fullscreen-dialog .fullscreen-image.loaded {
|
|
179
185
|
opacity: 1;
|
|
180
186
|
}
|
|
181
187
|
|
|
@@ -19,6 +19,12 @@ export class XvImageViewer {
|
|
|
19
19
|
this.closeFullscreen = () => {
|
|
20
20
|
this.isFullscreen = false;
|
|
21
21
|
};
|
|
22
|
+
this.handleDialogClick = (e) => {
|
|
23
|
+
// Close only when the click lands on the dialog/backdrop, not on the image.
|
|
24
|
+
if (e.target === this.dialogEl) {
|
|
25
|
+
this.closeFullscreen();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
22
28
|
this.handleError = () => {
|
|
23
29
|
this.errored = true;
|
|
24
30
|
this.imageError.emit();
|
|
@@ -40,8 +46,19 @@ export class XvImageViewer {
|
|
|
40
46
|
this.loaded = true;
|
|
41
47
|
}
|
|
42
48
|
}
|
|
49
|
+
componentDidRender() {
|
|
50
|
+
var _a;
|
|
51
|
+
// A modal <dialog> lives in the top layer, so its containing block is the
|
|
52
|
+
// viewport regardless of any ancestor `transform` (e.g. CDK virtual scroll).
|
|
53
|
+
if (this.isFullscreen && this.dialogEl && !this.dialogEl.open) {
|
|
54
|
+
this.dialogEl.showModal();
|
|
55
|
+
}
|
|
56
|
+
else if (!this.isFullscreen && ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)) {
|
|
57
|
+
this.dialogEl.close();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
43
60
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '5dc1ddc1442f6e02f9935e39989a997ee71fe7a7', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && h("xv-loader-v2", { key: '0cbf1f8e66e16f02472a2a2d5377462c19231189', class: "loading" }, this.placeholder), this.loaded && this.errored && h("slot", { key: 'f514a0ac91e8f0fc7f6db05454d827e7eff0667f', name: "fallback" }), this.loaded && !this.errored && (h("img", { key: 'a8e778738af2a042f9e212efbf8a559387e52caf', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (h("dialog", { key: 'bc052e28843a443b11d7b9c9ab5950f7ba47a7d0', class: "fullscreen-dialog", ref: el => (this.dialogEl = el), onClick: this.handleDialogClick, onClose: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: 'f88011636374a59ba201fc1d3780fbafe27c3dbd', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '2c2913b88c710e6e80e1448e33a5a41f01ff95da', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
45
62
|
'fullscreen-image': true,
|
|
46
63
|
loaded: this.fullscreenLoaded,
|
|
47
64
|
} })))));
|
|
@@ -81386,7 +81386,7 @@ const XvHeader = class {
|
|
|
81386
81386
|
};
|
|
81387
81387
|
XvHeader.style = xvHeaderCss();
|
|
81388
81388
|
|
|
81389
|
-
const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host(.image-wrapper){display:inline-flex;position:relative;cursor:pointer;max-width:100%;height:auto;flex:1;align-self:center;align-items:center;justify-content:center}:host(.image-wrapper) .image{width:inherit;height:inherit;max-height:inherit;max-width:inherit;object-fit:inherit;transition:opacity 0.3s ease}:host(.image-wrapper) .loading{align-self:center;margin:0 auto;text-align:center;color:var(--text-placeholder);display:inline-flex;justify-content:center;align-items:center;height:100%;width:100%;position:absolute}:host(.image-wrapper) .fullscreen-
|
|
81389
|
+
const xvImageViewerCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host(.image-wrapper){display:inline-flex;position:relative;cursor:pointer;max-width:100%;height:auto;flex:1;align-self:center;align-items:center;justify-content:center}:host(.image-wrapper) .image{width:inherit;height:inherit;max-height:inherit;max-width:inherit;object-fit:inherit;transition:opacity 0.3s ease}:host(.image-wrapper) .loading{align-self:center;margin:0 auto;text-align:center;color:var(--text-placeholder);display:inline-flex;justify-content:center;align-items:center;height:100%;width:100%;position:absolute}:host(.image-wrapper) .fullscreen-dialog{border:0;padding:0;margin:0;background:transparent;width:100vw;height:100vh;max-width:100vw;max-height:100vh}:host(.image-wrapper) .fullscreen-dialog[open]{display:flex;justify-content:center;align-items:center;animation:fadeIn 0.3s ease forwards}:host(.image-wrapper) .fullscreen-dialog::backdrop{background:rgba(0, 0, 0, 0.9)}:host(.image-wrapper) .fullscreen-dialog .fullscreen-image{max-width:90%;max-height:90%;opacity:0;transition:opacity 0.3s ease}:host(.image-wrapper) .fullscreen-dialog .fullscreen-image.loaded{opacity:1}:host(.errored){cursor:default}@keyframes fadeIn{from{opacity:0}to{opacity:1}}`;
|
|
81390
81390
|
|
|
81391
81391
|
const XvImageViewer = class {
|
|
81392
81392
|
constructor(hostRef) {
|
|
@@ -81409,6 +81409,12 @@ const XvImageViewer = class {
|
|
|
81409
81409
|
this.closeFullscreen = () => {
|
|
81410
81410
|
this.isFullscreen = false;
|
|
81411
81411
|
};
|
|
81412
|
+
this.handleDialogClick = (e) => {
|
|
81413
|
+
// Close only when the click lands on the dialog/backdrop, not on the image.
|
|
81414
|
+
if (e.target === this.dialogEl) {
|
|
81415
|
+
this.closeFullscreen();
|
|
81416
|
+
}
|
|
81417
|
+
};
|
|
81412
81418
|
this.handleError = () => {
|
|
81413
81419
|
this.errored = true;
|
|
81414
81420
|
this.imageError.emit();
|
|
@@ -81430,8 +81436,19 @@ const XvImageViewer = class {
|
|
|
81430
81436
|
this.loaded = true;
|
|
81431
81437
|
}
|
|
81432
81438
|
}
|
|
81439
|
+
componentDidRender() {
|
|
81440
|
+
var _a;
|
|
81441
|
+
// A modal <dialog> lives in the top layer, so its containing block is the
|
|
81442
|
+
// viewport regardless of any ancestor `transform` (e.g. CDK virtual scroll).
|
|
81443
|
+
if (this.isFullscreen && this.dialogEl && !this.dialogEl.open) {
|
|
81444
|
+
this.dialogEl.showModal();
|
|
81445
|
+
}
|
|
81446
|
+
else if (!this.isFullscreen && ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)) {
|
|
81447
|
+
this.dialogEl.close();
|
|
81448
|
+
}
|
|
81449
|
+
}
|
|
81433
81450
|
render() {
|
|
81434
|
-
return (h(Host, { key: '
|
|
81451
|
+
return (h(Host, { key: '5dc1ddc1442f6e02f9935e39989a997ee71fe7a7', class: { 'image-wrapper': true, errored: this.errored } }, !this.loaded && h("xv-loader-v2", { key: '0cbf1f8e66e16f02472a2a2d5377462c19231189', class: "loading" }, this.placeholder), this.loaded && this.errored && h("slot", { key: 'f514a0ac91e8f0fc7f6db05454d827e7eff0667f', name: "fallback" }), this.loaded && !this.errored && (h("img", { key: 'a8e778738af2a042f9e212efbf8a559387e52caf', src: this.src, alt: this.alt, class: "image", onClick: this.handleClick, onError: this.handleError })), this.isFullscreen && (h("dialog", { key: 'bc052e28843a443b11d7b9c9ab5950f7ba47a7d0', class: "fullscreen-dialog", ref: el => (this.dialogEl = el), onClick: this.handleDialogClick, onClose: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: 'f88011636374a59ba201fc1d3780fbafe27c3dbd', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '2c2913b88c710e6e80e1448e33a5a41f01ff95da', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
|
|
81435
81452
|
'fullscreen-image': true,
|
|
81436
81453
|
loaded: this.fullscreenLoaded,
|
|
81437
81454
|
} })))));
|
|
@@ -13,9 +13,12 @@ export declare class XvImageViewer {
|
|
|
13
13
|
fullscreenLoaded: boolean;
|
|
14
14
|
errored: boolean;
|
|
15
15
|
private observer;
|
|
16
|
+
private dialogEl?;
|
|
16
17
|
componentDidLoad(): void;
|
|
18
|
+
componentDidRender(): void;
|
|
17
19
|
private handleClick;
|
|
18
20
|
private closeFullscreen;
|
|
21
|
+
private handleDialogClick;
|
|
19
22
|
private handleError;
|
|
20
23
|
render(): any;
|
|
21
24
|
}
|