@getflip/swirl-components-react 0.204.1 → 0.205.1

package/dist/swirl-lightbox.entry.aebfcaab.js

@@ -1,136 +0,0 @@
-import { r as h, h as i, H as b, g as f } from "./index.385abe8b.js";
-import { A as u } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
-import { d as g, e as m } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
-import { c as x } from "./index-267776a4.6beb4f4b.js";
-import { q as p } from "./utils-aab10c80.240adddc.js";
-import "react";
-import "react-dom";
-const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@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--hide-menu .lightbox__menu{display: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);justify-content:space-between;align-items:flex-start;pointer-events:none}.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__menu-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__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.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}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}', v = y, _ = class {
-  constructor(e) {
-    h(this, e), this.dragging = !1, this.onCloseButtonClick = () => {
-      this.close();
-    }, this.onDownloadButtonClick = () => {
-      var t;
-      (t = this.slides[this.activeSlideIndex]) == null || t.download(), this.menu.close();
-    }, this.onNextSlideClick = () => {
-      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
-    }, this.onPreviousSlideClick = () => {
-      this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
-    }, this.registerSlides = () => {
-      this.slides = Array.from(this.el.children).filter((t) => t.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes();
-    }, this.onPointerDown = (t) => {
-      this.dragging = !0, this.dragStartPosition = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, this.slides.forEach((a) => {
-        a.style.transition = "none";
-      });
-    }, this.onPointerMove = async (t) => {
-      var n, l;
-      const a = !(t instanceof MouseEvent) && t.touches.length > 1, o = (l = (n = this.slides[this.activeSlideIndex]) == null ? void 0 : n.shadowRoot) == null ? void 0 : l.querySelector("swirl-file-viewer-image"), s = Boolean(o) ? await o.getZoom() > 1 : !1;
-      if (!(a || s) && this.dragging) {
-        t.preventDefault();
-        const r = t instanceof MouseEvent ? t.clientX - this.dragStartPosition : t.touches[0].clientX - this.dragStartPosition;
-        this.slides.forEach((d) => {
-          const c = this.activeSlideIndex * d.getBoundingClientRect().width;
-          this.dragDelta = r, d.style.transform = `translate3d(${(-c + this.dragDelta) / 16}rem, 0, 0)`;
-        });
-      }
-    }, this.onPointerUp = () => {
-      this.dragging = !1, this.dragStartPosition = void 0;
-      const t = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
-      this.dragDelta = 0;
-      const a = t > 0.2, o = t < -0.2;
-      this.slides.forEach((s) => {
-        s.style.transition = "";
-      }), a ? this.onPreviousSlideClick() : o ? this.onNextSlideClick() : this.resetSlidePositions();
-    }, this.onBackdropClick = (t) => {
-      t.target === this.slidesContainer && this.close();
-    }, this.onContextMenu = (t) => {
-      this.downloadButtonEnabled || t.preventDefault();
-    }, this.closeButtonLabel = "Close modal", this.downloadButtonEnabled = !0, this.downloadButtonLabel = "Download", this.hideMenu = void 0, this.label = void 0, this.menuLabel = "Slide options", this.menuTriggerLabel = "Open slide menu", this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.activeSlideIndex = 0, this.closing = !1, this.slides = void 0;
-  }
-  componentWillLoad() {
-    this.registerSlides();
-  }
-  componentDidLoad() {
-    this.modal = new u(this.modalEl), this.activateSlide(0);
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this.modal) == null || e.destroy(), this.unlockBodyScroll();
-  }
-  onKeyDown(e) {
-    !this.modal.shown || (e.code === "Escape" ? (e.stopImmediatePropagation(), this.close()) : e.code === "ArrowLeft" ? this.onPreviousSlideClick() : e.code === "ArrowRight" && this.onNextSlideClick());
-  }
-  async open() {
-    this.modal.show(), this.lockBodyScroll(), this.activateSlide(this.activeSlideIndex || 0);
-  }
-  async close() {
-    this.closing || (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
-      this.modal.hide(), this.resetImageZoom(), this.stopAllMediaPlayers(), this.closing = !1;
-    }, 150));
-  }
-  async activateSlide(e) {
-    var t, a;
-    (a = (t = this.menu) == null ? void 0 : t.close) == null || a.call(t), this.dragging = !1, this.activeSlideIndex = e, this.slides.forEach((o, s) => {
-      s === this.activeSlideIndex ? (o.removeAttribute("aria-hidden"), o.setAttribute("active", "true")) : s === this.activeSlideIndex - 1 || s === this.activeSlideIndex + 1 ? (o.setAttribute("aria-hidden", "true"), o.setAttribute("active", "true")) : o.setAttribute("aria-hidden", "true"), o.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
-    }), setTimeout(() => {
-      this.slides.forEach((o, s) => {
-        s !== this.activeSlideIndex && s !== this.activeSlideIndex - 1 && s !== this.activeSlideIndex + 1 && o.setAttribute("active", "false");
-      });
-    }, 300), this.stopAllMediaPlayers(), this.resetImageZoom();
-  }
-  setSlideAttributes() {
-    this.slides.forEach((e) => {
-      e.setAttribute("active", "false"), e.setAttribute("aria-label", e.file), e.setAttribute("aria-roledescription", "slide"), e.setAttribute("role", "group");
-    });
-  }
-  resetSlidePositions() {
-    this.slides.forEach((e) => {
-      e.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
-    });
-  }
-  getCurrentFileName() {
-    var e, t;
-    return (t = (e = this.slides[this.activeSlideIndex]) == null ? void 0 : e.file) == null ? void 0 : t.split("/").pop();
-  }
-  getCurrentFileType() {
-    var e;
-    return (e = this.slides[this.activeSlideIndex]) == null ? void 0 : e.type;
-  }
-  getCurrentThumbnailUrl() {
-    var e;
-    return (e = this.slides[this.activeSlideIndex]) == null ? void 0 : e.thumbnailUrl;
-  }
-  lockBodyScroll() {
-    g(this.el);
-  }
-  unlockBodyScroll() {
-    m(this.el);
-  }
-  getMediaPlayers() {
-    return p(this.el, "video");
-  }
-  stopAllMediaPlayers() {
-    this.getMediaPlayers().forEach((e) => e.pause());
-  }
-  resetImageZoom() {
-    this.slides.forEach((e) => {
-      var a;
-      const t = (a = e == null ? void 0 : e.shadowRoot) == null ? void 0 : a.querySelector("swirl-file-viewer-image");
-      Boolean(t) && t.resetZoom();
-    });
-  }
-  render() {
-    const e = this.slides.length > 1, t = this.getCurrentFileName(), a = this.getCurrentFileType(), o = this.getCurrentThumbnailUrl(), s = Boolean(this.el.querySelector("[slot='menu-items']")) || this.downloadButtonEnabled, n = x("lightbox", {
-      "lightbox--closing": this.closing,
-      "lightbox--hide-menu": !s
-    });
-    return i(b, { key: "9b151d3fd07f79011554e26d7b44842a5c5277ce" }, i("section", { key: "36ed16824620602651bdbfdd85deffbeb1de915e", "aria-hidden": "true", "aria-label": this.label, class: n, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (l) => this.modalEl = l }, i("div", { key: "3bddaea824c7c1783f21300395aef06e91b988dc", class: "lightbox__body", role: "document" }, i("header", { key: "18c2955250104cf5b3fadf9ca2a50ee83c4f102a", class: "lightbox__header" }, i("button", { key: "e2687585a52c9cb50dfcbc2dc3d693f881074ac9", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "c93ea099d1ebbbf873658ed8beab779c1370d265" })), !this.hideMenu && i("swirl-popover-trigger", { key: "99d5cabd37749e3d67a415029321b53f54a2fbd2", swirlPopover: this.menu }, i("button", { key: "8c182257ca377e61d47902790dcc74b3ac8fafc3", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "f418d69408ff8a5528152498f7f1a746c28b7309" })))), i("div", { key: "298305cf88f6bd94e222eb51228a51668ec875fa", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "b47d3a82c3f7bba61a859f7e8ccc84d06dc8fefb", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (l) => this.slidesContainer = l }, i("slot", { key: "6837b5f05916e3a046adc83091def8fc5aeba029", onSlotchange: this.registerSlides }))), i("div", { key: "0a602fa1f79698403c6ff6feef1b77ba2e4f98a4", class: "lightbox__controls" }, i("button", { key: "5b6b26275497fb1c5bf3c9daec017d919b214118", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "85ac2719ee73b6fa83188df426f95d31ead72982" })), i("button", { key: "6454503b8b33e8a6d026810585c95b1e57d0f477", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, i("swirl-icon-arrow-right", { key: "5df4e35d7d22ca3bee26c3536a36bab60dbd0888" }))), e && i("span", { key: "e0495dfcb5ecc5b92fce69e33100a438e94bb68b", class: "lightbox__pagination" }, i("span", { key: "0b586dcb9d4fccd1ff8d4685b8b1aa8949508630", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "b49f052e70d3b3ff371488adccdb6d228954c812", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (l) => this.menu = l }, i("swirl-stack", { key: "ca19940afb176d6ecc3d0bfc75b32af9f3fda885" }, i("div", { key: "967b223edff36dd1afc3bf0818d1aad6601440d0", class: "lightbox__meta" }, o && i("div", { key: "a5e76405625ec9c72c56e7eb2e7de96a0ae8cfa8", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "4f21f0e9f22fda76e2b9fc98b3e5f08b55c0c596", alt: "", src: o })), i("div", { key: "1e63292856513519fa525a29c1ebe52c8bc4fc49", class: "lightbox__file-info" }, i("swirl-text", { key: "189da696210cef80a8aab1abd1ccc6612947db9e", truncate: !0, weight: "semibold" }, t), i("swirl-text", { key: "0300dcd09c28ec5c7227366df7d14eba012b1455", color: "subdued", size: "sm", truncate: !0 }, a))), s && i("swirl-separator", { key: "dd93e615d0a1012d2824d04750571496aa7d4f2f" }), i("swirl-action-list", { key: "f97591239b8b3c973c7fd51b32ee915604de0dc9" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "1a13179fe3186de98254aa504b4729183159fd18", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "062b797a704f9df398b29b59d359c15e850eed32", name: "menu-items" }))))));
-  }
-  get el() {
-    return f(this);
-  }
-};
-_.style = v;
-export {
-  _ as swirl_lightbox
-};