@getflip/swirl-components 0.451.0 → 0.451.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-file-viewer_8.cjs.entry.js +1 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.css +2 -2
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-file-viewer-image2.js +1 -1
- package/dist/components/swirl-image-grid-item.js +1 -1
- package/dist/esm/swirl-file-viewer_8.entry.js +1 -1
- package/dist/esm/swirl-image-grid-item.entry.js +1 -1
- package/dist/swirl-components/{p-e2a272a2.entry.js → p-73f3058f.entry.js} +1 -1
- package/dist/swirl-components/{p-c2332dc1.entry.js → p-d9f80fc3.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
|
|
|
5
5
|
import { d as defineCustomElement$2 } from './swirl-spinner2.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
|
|
7
7
|
|
|
8
|
-
const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;
|
|
8
|
+
const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;top:var(--s-space-12);right:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
|
|
9
9
|
|
|
10
10
|
const SwirlFileViewerImage = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerImage extends HTMLElement {
|
|
11
11
|
constructor() {
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './swirl-skeleton-box2.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
|
|
8
8
|
|
|
9
|
-
const swirlImageGridItemCss = ":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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;
|
|
9
|
+
const swirlImageGridItemCss = ":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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.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-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.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__skeleton{position:absolute;z-index:3;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}";
|
|
10
10
|
|
|
11
11
|
const SwirlImageGridItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGridItem extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
@@ -171,7 +171,7 @@ const SwirlFileViewerFallback = class {
|
|
|
171
171
|
};
|
|
172
172
|
SwirlFileViewerFallback.style = swirlFileViewerFallbackCss;
|
|
173
173
|
|
|
174
|
-
const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;
|
|
174
|
+
const swirlFileViewerImageCss = ":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;top:var(--s-space-12);right:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
|
|
175
175
|
|
|
176
176
|
const SwirlFileViewerImage = class {
|
|
177
177
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, d
|
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
import { d as debounce } from './utils-Dn2SWlGn.js';
|
|
4
4
|
|
|
5
|
-
const swirlImageGridItemCss = ":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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;
|
|
5
|
+
const swirlImageGridItemCss = ":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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:\"\";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:\"\";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.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-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.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__skeleton{position:absolute;z-index:3;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}";
|
|
6
6
|
|
|
7
7
|
const SwirlImageGridItem = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Papa Parse
|
|
|
4
4
|
v5.3.2
|
|
5
5
|
https://github.com/mholt/PapaParse
|
|
6
6
|
License: MIT
|
|
7
|
-
*/const w=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.errorMessage="File could not be loaded."}componentWillLoad(){this.updateTable()}componentDidLoad(){this.activate.emit(this.el)}async updateTable(){this.error=!1,this.loading=!0;try{const t=await fetch(this.file),i=g.parse(await t.text(),{dynamicTyping:!0,fastMode:!1,skipEmptyLines:!0});if(i.errors?.length>0)return this.error=!0,void(this.loading=!1);this.data=i.data,this.loading=!1}catch(t){this.loading=!1,this.error=!0}}render(){return e(s,{key:"2d998d2f6003691285c7e4be4bbc24c0fc82134c",class:"file-viewer-csv",exportparts:"file-viewer-csv__table"},this.error&&e("swirl-inline-error",{key:"4a495b4447de40e933c4cdc3e4c441844d1276ae",class:"file-viewer-csv__error",message:this.errorMessage}),e("div",{key:"c3a9f2dde498ea23702992d1f626d608329a1047",class:"file-viewer-csv__csv",tabIndex:0},e("table",{key:"362004a62f6563b78959832cad1968a20d9987ac",class:"file-viewer-csv__table",part:"file-viewer-csv__table"},e("tbody",{key:"4c3080cf1fed3ed520002329c013a28f418aa99e"},this.data?.map(((t,i)=>e("tr",{class:"file-viewer-csv__row",key:`row-${i}`},t.map(((t,s)=>e("td",{class:"file-viewer-csv__cell",key:`cell-${i}-${s}`},t))))))))),this.loading&&e("div",{key:"f4b6a5121e5162b4ac4e1bc915f99e7cd443b78a",class:"file-viewer-csv__spinner"},e("swirl-spinner",{key:"c5d87eb9a9d93ccf574e4286f16708eb4093ed59"})))}get el(){return n(this)}static get watchers(){return{file:["updateTable"]}}};w.style=":host{position:relative;display:inline-flex;width:100%;max-height:100%;pointer-events:auto}:host *{box-sizing:border-box}.file-viewer-csv__csv{overflow:auto;width:100%;max-height:100%;padding:var(--s-space-16);background-color:var(--s-background-default)}.file-viewer-csv__table{margin-right:auto;margin-left:auto;border-collapse:collapse;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-csv__table{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.file-viewer-csv__cell{padding:var(--s-space-8);border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-csv__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-csv__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";const m=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.download=i(this,"download",7),this.downloadButtonLabel="Download",this.onDownload=t=>{t.preventDefault(),this.download.emit()}}componentDidLoad(){this.activate.emit(this.el)}render(){return e(s,{key:"9ae57c373cfe95bb269a0de5e0fd253351e8b60a",class:"file-viewer-fallback"},e("swirl-stack",{key:"f3449cd17e622019ebd8f0712c3be63878e5addf",align:"center",height:"100%",justify:"center",spacing:"16"},e("swirl-icon-file",{key:"020abb149ed805422c6ea09a1c96ca79ac45f4de",class:"file-viewer-fallback__icon",color:"on-image",size:28}),this.fileName&&e("swirl-text",{key:"3a169edc718d41d7200cbfd8db61f658f566dac3",color:"on-image",size:"lg",weight:"medium"},this.fileName),!this.disableDownload&&e("swirl-button",{key:"1e85b6d3db7f9ecbb33f302152d0367c47515923",download:this.fileName,href:this.file,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownload,variant:"on-image"})))}get el(){return n(this)}};m.style=":host{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;pointer-events:auto}:host *{box-sizing:border-box}.file-viewer-fallback__icon::part(icon){height:2.875rem;width:2.875rem}";const A=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.description="",this.errorMessage="File could not be loaded.",this.maxZoom=3,this.loading=!0,this.transformed=!1,this.panX=0,this.panY=0,this.zoom=1,this.onError=()=>{this.error=!0,this.loading=!1},this.onLoad=()=>{this.error=!1,this.loading=!1},this.onDblClick=t=>{this.clickToZoom(t)},this.onWheel=t=>{t.preventDefault();const i=Math.min(Math.max(1,this.zoom+-1*t.deltaY/100),this.maxZoom);i!==this.zoom&&(this.updateTransformOrigin(t.offsetX,t.offsetY),this.updateZoomAndPan(i,0,0))},this.onPointerDown=t=>{this.startPan(t)},this.onPointerMove=t=>{this.pan(t)},this.onPointerUp=()=>{this.endPan()},this.onTouchStart=t=>{t.preventDefault(),2===t.touches.length&&this.startPinchToZoom(t)},this.onTouchMove=t=>{t.preventDefault(),this.pinching&&this.pinchToZoom(t)},this.onTouchEnd=t=>{t.preventDefault(),this.pinching&&this.endPinchToZoom()},this.startPinchToZoom=t=>{Boolean(this.imageEl)&&(this.pinchDistance=this.getPinchDistance(t),this.pinching=!0)},this.pinchToZoom=t=>{const i=this.getPinchDistance(t)-this.pinchDistance,e=Math.min(Math.max(1,this.zoom+i/100),this.maxZoom);this.zoom!==e&&(this.pinchDistance=this.getPinchDistance(t),this.updateZoomAndPan(e))},this.endPinchToZoom=()=>{this.pinching=!1,Math.abs(this.zoom-1)<.2&&(this.zoom=1,this.imageEl.style.transform="")},this.getPinchDistance=t=>Math.hypot(t.touches[0].pageX-t.touches[1].pageX,t.touches[0].pageY-t.touches[1].pageY),this.clickToZoom=t=>{if(!(navigator.maxTouchPoints>1))if(1===this.zoom){const i=t.pageX-this.el.getBoundingClientRect().x,e=t.pageY-this.el.getBoundingClientRect().y;this.updateTransformOrigin(i,e),this.updateZoomAndPan(2)}else this.updateZoomAndPan(1)},this.updateZoomAndPan=(t,i,e)=>{const s=void 0===t?this.zoom:t,n=s-this.zoom,r=void 0===i?this.panX+this.panX*n:i,o=void 0===i?this.panY+this.panY*n:e,h=this.panX,a=this.panY;this.zoom=s,this.panX=r,this.panY=o;const c=(this.el.parentElement||this.el).getBoundingClientRect(),l=this.imageEl.getBoundingClientRect(),u=l.bottom<c.bottom&&o<a||l.top>c.top&&o>a;(l.right<c.right&&r<h||l.left>c.left&&r>h)&&(this.panX=h),u&&(this.panY=a),1===this.zoom&&(this.panX=0,this.panY=0),this.imageEl.style.transform=`matrix(${this.zoom}, 0, 0, ${this.zoom}, ${this.panX}, ${this.panY})`;const d=1!==this.zoom||0!==this.panX||0!==this.panY;d!==this.transformed&&(this.transformed=d)},this.updateTransformOrigin=(t,i)=>{this.transformOriginX=t,this.transformOriginY=i,this.imageEl.style.transformOrigin=`${this.transformOriginX}px ${this.transformOriginY}px`},this.startPan=t=>{this.panning=!0,this.previousScreenX=t.screenX,this.previousScreenY=t.screenY},this.pan=t=>{const i=this.previousScreenX||0,e=this.previousScreenY||0;this.previousScreenX=t.screenX,this.previousScreenY=t.screenY,this.panning&&!this.pinching&&(t.preventDefault(),this.updateZoomAndPan(this.zoom,this.panX+t.screenX-i,this.panY+t.screenY-e))},this.endPan=()=>{this.panning=!1},this.onImageElementUpdate=t=>{this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError),this.imageEl=t,this.imageEl&&(this.imageEl.addEventListener("load",this.onLoad),this.imageEl.addEventListener("error",this.onError))}}componentDidLoad(){this.activate.emit(this.el)}disconnectedCallback(){this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError)}watchFile(){this.error=!1,this.loading=!0}async getZoom(){return this.zoom}async resetZoom(){return this.updateZoomAndPan(1)}render(){const t=!!this.el.querySelector('[slot="watermark"]'),i=l("file-viewer-image",{"file-viewer-image--show-watermark":t&&!this.transformed&&!this.loading});return e(s,{key:"01004c2e08ca3cff4ddb6cfb2bec1bad1340af1c",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&&e("swirl-inline-error",{key:"8fe6777ef8b2c9856640b9b6ae0b9bd977558d4e",class:"file-viewer-image__error",message:this.errorMessage}),e("figure",{key:"3db39a3d7991601d221b6ff79d44fd3669768a4d",class:i},e("span",{key:"d0340a38c9ddc0201d7c4440db93868b77925fa8",class:"file-viewer-image__container"},e("img",{key:"63e65ed5449c69a86f929b9d8a3eccf63b3363a6",alt:this.description,class:"file-viewer-image__image",ref:this.onImageElementUpdate,src:this.file}),e("span",{key:"11a3872b9a2e9847afcfb47cf8041c1133268bae",class:"file-viewer-image__watermark"},e("slot",{key:"9ca6c46d5f46b5bde9605b7aacbcd3149a4d252d",name:"watermark"}))),this.loading&&e("div",{key:"29d2552021da3885cbba1e15cf3139a6a1598c99",class:"file-viewer-image__spinner"},e("swirl-spinner",{key:"c06ed312551b0e4a233cddadc8d945880531254f"}))))}get el(){return n(this)}static get watchers(){return{file:["watchFile"]}}};A.style=":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;
|
|
7
|
+
*/const w=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.errorMessage="File could not be loaded."}componentWillLoad(){this.updateTable()}componentDidLoad(){this.activate.emit(this.el)}async updateTable(){this.error=!1,this.loading=!0;try{const t=await fetch(this.file),i=g.parse(await t.text(),{dynamicTyping:!0,fastMode:!1,skipEmptyLines:!0});if(i.errors?.length>0)return this.error=!0,void(this.loading=!1);this.data=i.data,this.loading=!1}catch(t){this.loading=!1,this.error=!0}}render(){return e(s,{key:"2d998d2f6003691285c7e4be4bbc24c0fc82134c",class:"file-viewer-csv",exportparts:"file-viewer-csv__table"},this.error&&e("swirl-inline-error",{key:"4a495b4447de40e933c4cdc3e4c441844d1276ae",class:"file-viewer-csv__error",message:this.errorMessage}),e("div",{key:"c3a9f2dde498ea23702992d1f626d608329a1047",class:"file-viewer-csv__csv",tabIndex:0},e("table",{key:"362004a62f6563b78959832cad1968a20d9987ac",class:"file-viewer-csv__table",part:"file-viewer-csv__table"},e("tbody",{key:"4c3080cf1fed3ed520002329c013a28f418aa99e"},this.data?.map(((t,i)=>e("tr",{class:"file-viewer-csv__row",key:`row-${i}`},t.map(((t,s)=>e("td",{class:"file-viewer-csv__cell",key:`cell-${i}-${s}`},t))))))))),this.loading&&e("div",{key:"f4b6a5121e5162b4ac4e1bc915f99e7cd443b78a",class:"file-viewer-csv__spinner"},e("swirl-spinner",{key:"c5d87eb9a9d93ccf574e4286f16708eb4093ed59"})))}get el(){return n(this)}static get watchers(){return{file:["updateTable"]}}};w.style=":host{position:relative;display:inline-flex;width:100%;max-height:100%;pointer-events:auto}:host *{box-sizing:border-box}.file-viewer-csv__csv{overflow:auto;width:100%;max-height:100%;padding:var(--s-space-16);background-color:var(--s-background-default)}.file-viewer-csv__table{margin-right:auto;margin-left:auto;border-collapse:collapse;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-csv__table{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.file-viewer-csv__cell{padding:var(--s-space-8);border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-csv__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-csv__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";const m=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.download=i(this,"download",7),this.downloadButtonLabel="Download",this.onDownload=t=>{t.preventDefault(),this.download.emit()}}componentDidLoad(){this.activate.emit(this.el)}render(){return e(s,{key:"9ae57c373cfe95bb269a0de5e0fd253351e8b60a",class:"file-viewer-fallback"},e("swirl-stack",{key:"f3449cd17e622019ebd8f0712c3be63878e5addf",align:"center",height:"100%",justify:"center",spacing:"16"},e("swirl-icon-file",{key:"020abb149ed805422c6ea09a1c96ca79ac45f4de",class:"file-viewer-fallback__icon",color:"on-image",size:28}),this.fileName&&e("swirl-text",{key:"3a169edc718d41d7200cbfd8db61f658f566dac3",color:"on-image",size:"lg",weight:"medium"},this.fileName),!this.disableDownload&&e("swirl-button",{key:"1e85b6d3db7f9ecbb33f302152d0367c47515923",download:this.fileName,href:this.file,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownload,variant:"on-image"})))}get el(){return n(this)}};m.style=":host{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;pointer-events:auto}:host *{box-sizing:border-box}.file-viewer-fallback__icon::part(icon){height:2.875rem;width:2.875rem}";const A=class{constructor(e){t(this,e),this.activate=i(this,"activate",7),this.description="",this.errorMessage="File could not be loaded.",this.maxZoom=3,this.loading=!0,this.transformed=!1,this.panX=0,this.panY=0,this.zoom=1,this.onError=()=>{this.error=!0,this.loading=!1},this.onLoad=()=>{this.error=!1,this.loading=!1},this.onDblClick=t=>{this.clickToZoom(t)},this.onWheel=t=>{t.preventDefault();const i=Math.min(Math.max(1,this.zoom+-1*t.deltaY/100),this.maxZoom);i!==this.zoom&&(this.updateTransformOrigin(t.offsetX,t.offsetY),this.updateZoomAndPan(i,0,0))},this.onPointerDown=t=>{this.startPan(t)},this.onPointerMove=t=>{this.pan(t)},this.onPointerUp=()=>{this.endPan()},this.onTouchStart=t=>{t.preventDefault(),2===t.touches.length&&this.startPinchToZoom(t)},this.onTouchMove=t=>{t.preventDefault(),this.pinching&&this.pinchToZoom(t)},this.onTouchEnd=t=>{t.preventDefault(),this.pinching&&this.endPinchToZoom()},this.startPinchToZoom=t=>{Boolean(this.imageEl)&&(this.pinchDistance=this.getPinchDistance(t),this.pinching=!0)},this.pinchToZoom=t=>{const i=this.getPinchDistance(t)-this.pinchDistance,e=Math.min(Math.max(1,this.zoom+i/100),this.maxZoom);this.zoom!==e&&(this.pinchDistance=this.getPinchDistance(t),this.updateZoomAndPan(e))},this.endPinchToZoom=()=>{this.pinching=!1,Math.abs(this.zoom-1)<.2&&(this.zoom=1,this.imageEl.style.transform="")},this.getPinchDistance=t=>Math.hypot(t.touches[0].pageX-t.touches[1].pageX,t.touches[0].pageY-t.touches[1].pageY),this.clickToZoom=t=>{if(!(navigator.maxTouchPoints>1))if(1===this.zoom){const i=t.pageX-this.el.getBoundingClientRect().x,e=t.pageY-this.el.getBoundingClientRect().y;this.updateTransformOrigin(i,e),this.updateZoomAndPan(2)}else this.updateZoomAndPan(1)},this.updateZoomAndPan=(t,i,e)=>{const s=void 0===t?this.zoom:t,n=s-this.zoom,r=void 0===i?this.panX+this.panX*n:i,o=void 0===i?this.panY+this.panY*n:e,h=this.panX,a=this.panY;this.zoom=s,this.panX=r,this.panY=o;const c=(this.el.parentElement||this.el).getBoundingClientRect(),l=this.imageEl.getBoundingClientRect(),u=l.bottom<c.bottom&&o<a||l.top>c.top&&o>a;(l.right<c.right&&r<h||l.left>c.left&&r>h)&&(this.panX=h),u&&(this.panY=a),1===this.zoom&&(this.panX=0,this.panY=0),this.imageEl.style.transform=`matrix(${this.zoom}, 0, 0, ${this.zoom}, ${this.panX}, ${this.panY})`;const d=1!==this.zoom||0!==this.panX||0!==this.panY;d!==this.transformed&&(this.transformed=d)},this.updateTransformOrigin=(t,i)=>{this.transformOriginX=t,this.transformOriginY=i,this.imageEl.style.transformOrigin=`${this.transformOriginX}px ${this.transformOriginY}px`},this.startPan=t=>{this.panning=!0,this.previousScreenX=t.screenX,this.previousScreenY=t.screenY},this.pan=t=>{const i=this.previousScreenX||0,e=this.previousScreenY||0;this.previousScreenX=t.screenX,this.previousScreenY=t.screenY,this.panning&&!this.pinching&&(t.preventDefault(),this.updateZoomAndPan(this.zoom,this.panX+t.screenX-i,this.panY+t.screenY-e))},this.endPan=()=>{this.panning=!1},this.onImageElementUpdate=t=>{this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError),this.imageEl=t,this.imageEl&&(this.imageEl.addEventListener("load",this.onLoad),this.imageEl.addEventListener("error",this.onError))}}componentDidLoad(){this.activate.emit(this.el)}disconnectedCallback(){this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError)}watchFile(){this.error=!1,this.loading=!0}async getZoom(){return this.zoom}async resetZoom(){return this.updateZoomAndPan(1)}render(){const t=!!this.el.querySelector('[slot="watermark"]'),i=l("file-viewer-image",{"file-viewer-image--show-watermark":t&&!this.transformed&&!this.loading});return e(s,{key:"01004c2e08ca3cff4ddb6cfb2bec1bad1340af1c",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&&e("swirl-inline-error",{key:"8fe6777ef8b2c9856640b9b6ae0b9bd977558d4e",class:"file-viewer-image__error",message:this.errorMessage}),e("figure",{key:"3db39a3d7991601d221b6ff79d44fd3669768a4d",class:i},e("span",{key:"d0340a38c9ddc0201d7c4440db93868b77925fa8",class:"file-viewer-image__container"},e("img",{key:"63e65ed5449c69a86f929b9d8a3eccf63b3363a6",alt:this.description,class:"file-viewer-image__image",ref:this.onImageElementUpdate,src:this.file}),e("span",{key:"11a3872b9a2e9847afcfb47cf8041c1133268bae",class:"file-viewer-image__watermark"},e("slot",{key:"9ca6c46d5f46b5bde9605b7aacbcd3149a4d252d",name:"watermark"}))),this.loading&&e("div",{key:"29d2552021da3885cbba1e15cf3139a6a1598c99",class:"file-viewer-image__spinner"},e("swirl-spinner",{key:"c06ed312551b0e4a233cddadc8d945880531254f"}))))}get el(){return n(this)}static get watchers(){return{file:["watchFile"]}}};A.style=":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;top:var(--s-space-12);right:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
|
|
8
8
|
/**
|
|
9
9
|
* @licstart The following is the entire license notice for the
|
|
10
10
|
* JavaScript code in this page
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,F as s,H as o,d as r}from"./p-9hghByCV.js";import{c as a}from"./p-orsBiyT_.js";import{d as n}from"./p-Dn2SWlGn.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.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.handleIntersectionEntries=n((i=>{const t=[...i].sort(((i,t)=>i.time-t.time));this.inViewport=t.at(-1).isIntersecting,this.inViewport||(this.loaded=!1)}),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))}}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||"intersecting"!==this.loading||this.inViewport,r=Math.min(this.el.parentElement?.children.length,4)??1,n=!!this.el.querySelector('[slot="watermark"]'),d=a("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay,"image-grid-item--has-watermark":n,"image-grid-item--loaded":this.loaded,"image-grid-item--gif-paused":this.gifPaused});return e(o,{key:"b1e6a7691679cd62b40a89286cc09b76c324092b","data-sibling-count":r,role:"listitem"},e(i,{key:"ddf31a4c753f6b6a25757af83936f5c42f9d8bdc",class:d,type:this.interactive?"button":void 0},e("div",{key:"b439123b20fc175ef2c5e65d17a690987ba117d3",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),t?e(s,null,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("span",{class:"image-grid-item__watermark"},e("slot",{name:"watermark"}))):e("div",{class:"image-grid-item__loading-placeholder"},e("swirl-visually-hidden",null,this.alt)),this.showGifControls&&e("swirl-button",{key:"693047349e5ab1dd6d64c2e239bbac1d313252cd",class:"image-grid-item__gif-control-button",label:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,icon:"<swirl-icon-gif></swirl-icon-gif>",variant:"on-image",pill:!0,hideLabel:!0,swirlAriaLabel:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,onClick:this.handleControlClick}),this.loaded&&!this.error&&this.icon&&!Boolean(this.overlay)&&e("div",{key:"99349d6bbd19474b29b7e2494060083b14d42902",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&e("div",{key:"c1deda79c1b14bec3e138508da066d57b5854825",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&e("swirl-skeleton-box",{key:"f159576ca7b1fe237d57fe75a55144065f9eba6b",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&e("div",{key:"c0a9a220a5c71e7c7d36ba09c1147c1cc01bbefd",class:"image-grid-item__error"},e("swirl-icon-error",{key:"8453382ed698cbb1ebec592010876d9581ff1686",color:"critical"}))))}get el(){return r(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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:"";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:"";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;
|
|
1
|
+
import{r as i,c as t,h as e,F as s,H as o,d as r}from"./p-9hghByCV.js";import{c as a}from"./p-orsBiyT_.js";import{d as n}from"./p-Dn2SWlGn.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.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.handleIntersectionEntries=n((i=>{const t=[...i].sort(((i,t)=>i.time-t.time));this.inViewport=t.at(-1).isIntersecting,this.inViewport||(this.loaded=!1)}),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))}}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||"intersecting"!==this.loading||this.inViewport,r=Math.min(this.el.parentElement?.children.length,4)??1,n=!!this.el.querySelector('[slot="watermark"]'),d=a("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay,"image-grid-item--has-watermark":n,"image-grid-item--loaded":this.loaded,"image-grid-item--gif-paused":this.gifPaused});return e(o,{key:"b1e6a7691679cd62b40a89286cc09b76c324092b","data-sibling-count":r,role:"listitem"},e(i,{key:"ddf31a4c753f6b6a25757af83936f5c42f9d8bdc",class:d,type:this.interactive?"button":void 0},e("div",{key:"b439123b20fc175ef2c5e65d17a690987ba117d3",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),t?e(s,null,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("span",{class:"image-grid-item__watermark"},e("slot",{name:"watermark"}))):e("div",{class:"image-grid-item__loading-placeholder"},e("swirl-visually-hidden",null,this.alt)),this.showGifControls&&e("swirl-button",{key:"693047349e5ab1dd6d64c2e239bbac1d313252cd",class:"image-grid-item__gif-control-button",label:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,icon:"<swirl-icon-gif></swirl-icon-gif>",variant:"on-image",pill:!0,hideLabel:!0,swirlAriaLabel:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,onClick:this.handleControlClick}),this.loaded&&!this.error&&this.icon&&!Boolean(this.overlay)&&e("div",{key:"99349d6bbd19474b29b7e2494060083b14d42902",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&e("div",{key:"c1deda79c1b14bec3e138508da066d57b5854825",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&e("swirl-skeleton-box",{key:"f159576ca7b1fe237d57fe75a55144065f9eba6b",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&e("div",{key:"c0a9a220a5c71e7c7d36ba09c1147c1cc01bbefd",class:"image-grid-item__error"},e("swirl-icon-error",{key:"8453382ed698cbb1ebec592010876d9581ff1686",color:"critical"}))))}get el(){return r(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{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:"";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:"";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.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-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.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__skeleton{position:absolute;z-index:3;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}
|