@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-lightbox.js

@@ -1,347 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
-import { c as classNames } from './index2.js';
-import { t as tabbable } from './index.esm.js';
-import { q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$5 } from './swirl-icon-arrow-left2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-arrow-right2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$2 } from './swirl-icon-download2.js';
-
-const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
-
-const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.activeSlideChange = createEvent(this, "activeSlideChange", 7);
-        this.lightboxClose = createEvent(this, "lightboxClose", 7);
-        this.closeButtonLabel = "Close modal";
-        this.downloadButtonEnabled = true;
-        this.downloadButtonLabel = "Download";
-        this.nextSlideButtonLabel = "Next slide";
-        this.previousSlideButtonLabel = "Previous slide";
-        this.activeSlideIndex = 0;
-        this.closing = false;
-        this.opening = false;
-        this.dragging = false;
-        this.onKeyDown = (event) => {
-            if (event.code === "Escape") {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                this.close();
-            }
-            else if (event.code === "ArrowLeft") {
-                this.onPreviousSlideClick();
-            }
-            else if (event.code === "ArrowRight") {
-                this.onNextSlideClick();
-            }
-        };
-        this.onCloseButtonClick = () => {
-            this.close();
-        };
-        this.onDownloadButtonClick = () => {
-            this.slides[this.activeSlideIndex]?.download();
-        };
-        this.onNextSlideClick = () => {
-            this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
-            if (this.activeSlideIndex === this.slides.length - 1) {
-                if (this.slides.length > 1) {
-                    this.previousSlideButton.focus();
-                }
-                else {
-                    tabbable(this.modalEl).at(0)?.focus();
-                }
-            }
-        };
-        this.onPreviousSlideClick = () => {
-            this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
-            if (this.activeSlideIndex === 0) {
-                if (this.slides.length > 1) {
-                    this.nextSlideButton.focus();
-                }
-                else {
-                    tabbable(this.modalEl).at(0)?.focus();
-                }
-            }
-        };
-        this.registerSlides = () => {
-            this.slides = Array.from(this.el.children).filter((el) => el.tagName === "SWIRL-FILE-VIEWER");
-            this.setSlideAttributes();
-        };
-        this.onPointerDown = (event) => {
-            if (this.slides.length <= 1) {
-                return;
-            }
-            this.dragging = true;
-            this.dragStartPosition =
-                event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-            this.slides.forEach((slide) => {
-                slide.style.transition = "none";
-            });
-        };
-        this.onPointerMove = async (event) => {
-            if (!this.dragging) {
-                return;
-            }
-            const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
-            const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
-            const showsZoomedImage = Boolean(imageViewer)
-                ? (await imageViewer.getZoom()) > 1
-                : false;
-            if (isMultiTouch || showsZoomedImage) {
-                return;
-            }
-            event.preventDefault();
-            const deltaX = event instanceof MouseEvent
-                ? event.clientX - this.dragStartPosition
-                : event.touches[0].clientX - this.dragStartPosition;
-            this.slides.forEach((slide) => {
-                const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
-                this.dragDelta = deltaX;
-                slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
-            });
-        };
-        this.onPointerUp = () => {
-            if (!this.dragging) {
-                return;
-            }
-            this.dragging = false;
-            this.dragStartPosition = undefined;
-            const dragRatio = this.dragDelta /
-                this.slides[this.activeSlideIndex].getBoundingClientRect().width;
-            this.dragDelta = 0;
-            const shouldMoveToPreviousSlide = dragRatio > 0.2;
-            const shouldMoveToNextSlide = dragRatio < -0.2;
-            this.slides.forEach((slide) => {
-                slide.style.transition = "";
-            });
-            if (shouldMoveToPreviousSlide) {
-                this.onPreviousSlideClick();
-            }
-            else if (shouldMoveToNextSlide) {
-                this.onNextSlideClick();
-            }
-            else {
-                this.resetSlidePositions();
-            }
-        };
-        this.onBackdropClick = (event) => {
-            if (event.target !== this.slidesContainer) {
-                return;
-            }
-            this.close();
-        };
-        this.onContextMenu = (event) => {
-            if (!this.downloadButtonEnabled) {
-                event.preventDefault();
-            }
-        };
-    }
-    componentWillLoad() {
-        this.registerSlides();
-    }
-    componentDidLoad() {
-        this.ensureOpening();
-        this.setDialogCustomProps();
-        this.activateSlide(0);
-    }
-    disconnectedCallback() {
-        this.unlockBodyScroll();
-        if (this.activateSlideTimeout) {
-            clearTimeout(this.activateSlideTimeout);
-        }
-        if (this.closingTimeout) {
-            clearTimeout(this.closingTimeout);
-        }
-        if (this.modalEl?.open) {
-            this.modalEl.close();
-        }
-    }
-    watchActiveSlideIndex() {
-        this.activeSlideChange.emit(this.activeSlideIndex);
-    }
-    /**
-     * Open the lightbox.
-     */
-    async open() {
-        this.opening = true;
-        if (!this.modalEl) {
-            return;
-        }
-        this.modalEl.showModal();
-        this.lockBodyScroll();
-        this.activateSlide(this.activeSlideIndex || 0);
-    }
-    /**
-     * Close the lightbox.
-     */
-    async close() {
-        if (this.closing) {
-            return;
-        }
-        this.closing = true;
-        this.unlockBodyScroll();
-        if (this.closingTimeout) {
-            clearTimeout(this.closingTimeout);
-            this.closingTimeout = undefined;
-        }
-        this.closingTimeout = setTimeout(() => {
-            this.resetImageZoom();
-            this.stopAllMediaPlayers();
-            this.modalEl.close();
-            this.closing = false;
-            this.lightboxClose.emit();
-        }, 150);
-    }
-    /**
-     * Activate a slide.
-     * @param newActiveSlideIndex
-     */
-    async activateSlide(newActiveSlideIndex) {
-        this.dragging = false;
-        this.activeSlideIndex = newActiveSlideIndex;
-        this.slides.forEach((slide, index) => {
-            if (index === this.activeSlideIndex) {
-                slide.removeAttribute("aria-hidden");
-                slide.setAttribute("active", "true");
-            }
-            else if (index === this.activeSlideIndex - 1 ||
-                index === this.activeSlideIndex + 1) {
-                slide.setAttribute("aria-hidden", "true");
-                slide.setAttribute("active", "true");
-            }
-            else {
-                slide.setAttribute("aria-hidden", "true");
-            }
-            slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
-        });
-        if (this.activateSlideTimeout) {
-            clearTimeout(this.activateSlideTimeout);
-            this.activateSlideTimeout = undefined;
-        }
-        // wait for slide animation before deactivating the slide
-        this.activateSlideTimeout = setTimeout(() => {
-            this.slides.forEach((slide, index) => {
-                if (index !== this.activeSlideIndex &&
-                    index !== this.activeSlideIndex - 1 &&
-                    index !== this.activeSlideIndex + 1) {
-                    slide.setAttribute("active", "false");
-                }
-            });
-        }, 300);
-        this.stopAllMediaPlayers();
-        this.resetImageZoom();
-    }
-    ensureOpening() {
-        if (this.opening && !this.modalEl?.open) {
-            this.open();
-        }
-    }
-    setDialogCustomProps() {
-        this.modalEl.setAttribute("closedby", "none");
-    }
-    setSlideAttributes() {
-        this.slides.forEach((slide) => {
-            slide.setAttribute("active", "false");
-            slide.setAttribute("aria-label", slide.file);
-            slide.setAttribute("aria-roledescription", "slide");
-            slide.setAttribute("role", "group");
-            slide.addEventListener("dragstart", (event) => event.preventDefault());
-        });
-    }
-    resetSlidePositions() {
-        this.slides.forEach((slide) => {
-            slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
-        });
-    }
-    lockBodyScroll() {
-        disableBodyScroll(this.el);
-    }
-    unlockBodyScroll() {
-        enableBodyScroll(this.el);
-    }
-    getMediaPlayers() {
-        const mediaPlayers = querySelectorAllDeep(this.el, "video");
-        return mediaPlayers;
-    }
-    stopAllMediaPlayers() {
-        this.getMediaPlayers().forEach((mediaPlayer) => mediaPlayer.pause());
-    }
-    resetImageZoom() {
-        this.slides.forEach((slide) => {
-            const imageViewer = slide?.shadowRoot?.querySelector("swirl-file-viewer-image");
-            if (Boolean(imageViewer)) {
-                imageViewer.resetZoom();
-            }
-        });
-    }
-    render() {
-        const showPagination = this.slides.length > 1;
-        const className = classNames("lightbox", {
-            "lightbox--closing": this.closing,
-        });
-        return (h(Host, { key: 'caadbd78ee4e9e9c5b7264745167bfe8a1663103' }, h("dialog", { key: '59b8f72b6e0622cada0b0fcd3187e1e1a7335b5c', "aria-label": this.label, class: className, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'fcd0ade89641546bf6d9fa221ed150c9e9496829', class: "lightbox__body", role: "document" }, h("header", { key: 'f2e20c1b3377ae036f1c4d79ae852285c279299f', class: "lightbox__header" }, h("div", { key: '3925b60332f25ebf68ffccf71e950760ac604e50', class: "lightbox__toolbar" }, h("slot", { key: '2cfc6e04a8d1baf92d84609bf686e040246364c4', name: "toolbar" }), this.downloadButtonEnabled && (h("button", { key: 'f9d6311f83d88022a22fb03f3c79fdf7a4385f8d', "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, h("swirl-icon-download", { key: '93993a97b686bb632ed90673e61e0854bf7de20a' })))), h("button", { key: '3f856522c482e48c0c96566c881d7e98cf6f0eac', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, h("swirl-icon-close", { key: 'fe6719a907b995b2a73075e6b221ac0ed31c081a' }))), h("div", { key: '59383f367adf0448ef2d37ae66985b841c7a3c21', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '2351f3e8a522378ef905165ec9ae90f94eea4ac5', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'e9556e519a32d1f52307039ced390c69324507cc', onSlotchange: this.registerSlides }))), h("div", { key: '137b240eeb19979747a40ac42035da9dfd97a5c6', class: "lightbox__controls" }, h("button", { key: '5f854a218990aed479729120a3914292f5b4c9e5', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (el) => (this.previousSlideButton = el) }, h("swirl-icon-arrow-left", { key: '64c9f4385d557505c3322473e17ad2074d94232b' })), h("button", { key: 'aa5a754b64ce224d0718d06128c65d4fab224670', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (el) => (this.nextSlideButton = el) }, h("swirl-icon-arrow-right", { key: '36f20cacded3de1c48deec4f9b2a82bd80ff3e13' }))), showPagination && (h("span", { key: '08745aad05e12802fa74696df1a9819b05c47fdd', class: "lightbox__pagination" }, h("span", { key: '0ff0bd2935928000c4dfe2f5ecad1d0f610dfd56', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "activeSlideIndex": ["watchActiveSlideIndex"]
-    }; }
-    static get style() { return swirlLightboxCss; }
-}, [1, "swirl-lightbox", {
-        "closeButtonLabel": [1, "close-button-label"],
-        "downloadButtonEnabled": [4, "download-button-enabled"],
-        "downloadButtonLabel": [1, "download-button-label"],
-        "label": [1],
-        "nextSlideButtonLabel": [1, "next-slide-button-label"],
-        "previousSlideButtonLabel": [1, "previous-slide-button-label"],
-        "activeSlideIndex": [32],
-        "closing": [32],
-        "opening": [32],
-        "slides": [32],
-        "open": [64],
-        "close": [64],
-        "activateSlide": [64]
-    }, undefined, {
-        "activeSlideIndex": ["watchActiveSlideIndex"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-lightbox", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-download"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-lightbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlLightbox$1);
-            }
-            break;
-        case "swirl-icon-arrow-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-icon-arrow-right":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-icon-download":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlLightbox = SwirlLightbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlLightbox, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as n,e as l}from"./bodyScrollLock.esm.js";import{c as h}from"./index2.js";import{t as d}from"./index.esm.js";import{q as r}from"./utils.js";import{d as c}from"./swirl-icon-arrow-left2.js";import{d as b}from"./swirl-icon-arrow-right2.js";import{d as g}from"./swirl-icon-close2.js";import{d as f}from"./swirl-icon-download2.js";const u=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeSlideChange=e(this,"activeSlideChange",7),this.lightboxClose=e(this,"lightboxClose",7),this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.opening=!1,this.dragging=!1,this.onKeyDown=t=>{"Escape"===t.code?(t.stopImmediatePropagation(),t.preventDefault(),this.close()):"ArrowLeft"===t.code?this.onPreviousSlideClick():"ArrowRight"===t.code&&this.onNextSlideClick()},this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1)),this.activeSlideIndex===this.slides.length-1&&(this.slides.length>1?this.previousSlideButton.focus():d(this.modalEl).at(0)?.focus())},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1)),0===this.activeSlideIndex&&(this.slides.length>1?this.nextSlideButton.focus():d(this.modalEl).at(0)?.focus())},this.registerSlides=()=>{this.slides=Array.from(this.el.children).filter((t=>"SWIRL-FILE-VIEWER"===t.tagName)),this.setSlideAttributes()},this.onPointerDown=t=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=t instanceof MouseEvent?t.clientX:t.touches[0].clientX,this.slides.forEach((t=>{t.style.transition="none"})))},this.onPointerMove=async t=>{if(!this.dragging)return;const i=!(t instanceof MouseEvent)&&t.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!e&&await e.getZoom()>1;if(i||s)return;t.preventDefault();const o=t instanceof MouseEvent?t.clientX-this.dragStartPosition:t.touches[0].clientX-this.dragStartPosition;this.slides.forEach((t=>{const i=this.activeSlideIndex*t.getBoundingClientRect().width;this.dragDelta=o,t.style.transform=`translate3d(${(-i+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const t=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const i=t>.2,e=t<-.2;this.slides.forEach((t=>{t.style.transition=""})),i?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=t=>{t.target===this.slidesContainer&&this.close()},this.onContextMenu=t=>{this.downloadButtonEnabled||t.preventDefault()}}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.activateSlide(0)}disconnectedCallback(){this.unlockBodyScroll(),this.activateSlideTimeout&&clearTimeout(this.activateSlideTimeout),this.closingTimeout&&clearTimeout(this.closingTimeout),this.modalEl?.open&&this.modalEl.close()}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0))}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),this.closingTimeout&&(clearTimeout(this.closingTimeout),this.closingTimeout=void 0),this.closingTimeout=setTimeout((()=>{this.resetImageZoom(),this.stopAllMediaPlayers(),this.modalEl.close(),this.closing=!1,this.lightboxClose.emit()}),150))}async activateSlide(t){this.dragging=!1,this.activeSlideIndex=t,this.slides.forEach(((t,i)=>{i===this.activeSlideIndex?(t.removeAttribute("aria-hidden"),t.setAttribute("active","true")):i===this.activeSlideIndex-1||i===this.activeSlideIndex+1?(t.setAttribute("aria-hidden","true"),t.setAttribute("active","true")):t.setAttribute("aria-hidden","true"),t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),this.activateSlideTimeout&&(clearTimeout(this.activateSlideTimeout),this.activateSlideTimeout=void 0),this.activateSlideTimeout=setTimeout((()=>{this.slides.forEach(((t,i)=>{i!==this.activeSlideIndex&&i!==this.activeSlideIndex-1&&i!==this.activeSlideIndex+1&&t.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}setSlideAttributes(){this.slides.forEach((t=>{t.setAttribute("active","false"),t.setAttribute("aria-label",t.file),t.setAttribute("aria-roledescription","slide"),t.setAttribute("role","group"),t.addEventListener("dragstart",(t=>t.preventDefault()))}))}resetSlidePositions(){this.slides.forEach((t=>{t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}lockBodyScroll(){n(this.el)}unlockBodyScroll(){l(this.el)}getMediaPlayers(){return r(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((t=>t.pause()))}resetImageZoom(){this.slides.forEach((t=>{const i=t?.shadowRoot?.querySelector("swirl-file-viewer-image");i&&i.resetZoom()}))}render(){const t=this.slides.length>1,i=h("lightbox",{"lightbox--closing":this.closing});return s(o,{key:"cf6f6d7abd1f3fb5e2f9769c21f829d80557ad44"},s("dialog",{key:"89f94eda06bf90dea70b87381aecb2365b4fade3","aria-label":this.label,class:i,id:"lightbox",onKeyDown:this.onKeyDown,onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:t=>this.modalEl=t},s("div",{key:"d098147a11d84bf9a06ce0d9b1a53106cd79724a",class:"lightbox__body",role:"document"},s("header",{key:"6f0fceb8782cec90bd0642439c227c4bfefebe5a",class:"lightbox__header"},s("div",{key:"7844450e9891b0c850a5f80976da33cde4a36050",class:"lightbox__toolbar"},s("slot",{key:"b28f19529feda7db00928033f1afc9b575a63aed",name:"toolbar"}),this.downloadButtonEnabled&&s("button",{key:"a9031f5b62c1e4e46dbf2ab48c79935968e59cb7","aria-label":this.downloadButtonLabel,class:"lightbox__download-button",onClick:this.onDownloadButtonClick,type:"button"},s("swirl-icon-download",{key:"7d63ddf171b0dcc7d18aa110759cef8fddd19b07"}))),s("button",{key:"cd821ad8092cdb51ddd7ce7bc72eccd6887cabeb","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick,type:"button"},s("swirl-icon-close",{key:"3b56834e74120dfacce910df890ed2d05ea1dba1"}))),s("div",{key:"4c7db70c404d2fae2f2de8d8baaab38fc6f28c53","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},s("div",{key:"8964109347c86af8aa0982474672d830b2396049","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:t=>this.slidesContainer=t},s("slot",{key:"9b4074e3fe5f47db791ade8095e1a15f4914fc4c",onSlotchange:this.registerSlides}))),s("div",{key:"9c5e848e1663ad5790790aa763b688d401d1f142",class:"lightbox__controls"},s("button",{key:"ca010b94aa5ccc31b216eeed19700733f2650331","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick,ref:t=>this.previousSlideButton=t},s("swirl-icon-arrow-left",{key:"4c9a00731fdabf37d5b6b51377cd5ddfbfe5f449"})),s("button",{key:"ecb49d5db425fb948614e72609034eb2a77076f4","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick,ref:t=>this.nextSlideButton=t},s("swirl-icon-arrow-right",{key:"bb2d38a2dadbde31ffc97c75eb067907ac4b6b71"}))),t&&s("span",{key:"15394638842b1564672d34ea9fb10a06ac4c9b30",class:"lightbox__pagination"},s("span",{key:"795a0ffc875f42caa41df7b96f2fe6c6c96dea21","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length))))}get el(){return this}static get watchers(){return{activeSlideIndex:[{watchActiveSlideIndex:0}]}}static get style(){return":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}"}},[257,"swirl-lightbox",{closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],activeSlideIndex:[32],closing:[32],opening:[32],slides:[32],open:[64],close:[64],activateSlide:[64]},void 0,{activeSlideIndex:[{watchActiveSlideIndex:0}]}]),x=u,p=function(){"undefined"!=typeof customElements&&["swirl-lightbox","swirl-icon-arrow-left","swirl-icon-arrow-right","swirl-icon-close","swirl-icon-download"].forEach((t=>{switch(t){case"swirl-lightbox":customElements.get(a(t))||customElements.define(a(t),u);break;case"swirl-icon-arrow-left":customElements.get(a(t))||c();break;case"swirl-icon-arrow-right":customElements.get(a(t))||b();break;case"swirl-icon-close":customElements.get(a(t))||g();break;case"swirl-icon-download":customElements.get(a(t))||f()}}))};export{x as SwirlLightbox,p as defineCustomElement}

package/dist/components/swirl-link.js

@@ -1,41 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlLinkCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}";
-
-const SwirlLink$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLink extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.color = "default";
-    }
-    render() {
-        const className = classNames("link", `link--color-${this.color}`);
-        return (h(Host, { key: 'c64f20c3eae2d9a9009f40ea6ffb056ad1a5d710' }, h("a", { key: '5b0f5102b6946580849bc0c407478976c367507e', class: className, href: this.href, part: "link", target: this.target }, this.label)));
-    }
-    static get style() { return swirlLinkCss; }
-}, [1, "swirl-link", {
-        "color": [1],
-        "href": [1],
-        "label": [1],
-        "target": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlLink$1);
-            }
-            break;
-    } });
-}
-
-const SwirlLink = SwirlLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlLink, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.color="default"}render(){const e=s("link","link--color-"+this.color);return i(r,{key:"c64f20c3eae2d9a9009f40ea6ffb056ad1a5d710"},i("a",{key:"5b0f5102b6946580849bc0c407478976c367507e",class:e,href:this.href,part:"link",target:this.target},this.label))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}"}},[1,"swirl-link",{color:[1],href:[1],label:[1],target:[1]}]),l=o,a=function(){"undefined"!=typeof customElements&&["swirl-link"].forEach((e=>{"swirl-link"===e&&(customElements.get(n(e))||customElements.define(n(e),o))}))};export{l as SwirlLink,a as defineCustomElement}

package/dist/components/swirl-list.js

@@ -1,38 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
-
-const SwirlList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    componentDidRender() {
-        const children = Array.from(this.containerEl.children);
-        if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
-            console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
-        }
-    }
-    render() {
-        return (h(Host, { key: '957dafe714e338cddcc7b2bf8ad16a94ee53c4e6' }, h("div", { key: '09be997bd062d45f3faaa0bc10816a6b0dfb76e7', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: 'c458f5304714b9ddab49626b3de3ee6ae5b94e31' }))));
-    }
-    static get style() { return swirlListCss; }
-}, [4, "swirl-list"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlList$1);
-            }
-            break;
-    } });
-}
-
-const SwirlList = SwirlList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlList, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as l,transformTag as s}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}componentDidRender(){Array.from(this.containerEl.children).some((e=>!["UL","OL"].includes(e.tagName)))&&console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.")}render(){return i(l,{key:"957dafe714e338cddcc7b2bf8ad16a94ee53c4e6"},i("div",{key:"09be997bd062d45f3faaa0bc10816a6b0dfb76e7",class:"swirl-list",ref:e=>this.containerEl=e},i("slot",{key:"c458f5304714b9ddab49626b3de3ee6ae5b94e31"})))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"•"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[260,"swirl-list"]),n=r,o=function(){"undefined"!=typeof customElements&&["swirl-list"].forEach((e=>{"swirl-list"===e&&(customElements.get(s(e))||customElements.define(s(e),r))}))};export{n as SwirlList,o as defineCustomElement}