import { r as g, c as r, h as o, H as u, g as f } from "./index.61732cef.js";
import { d as x, e as m } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
import { c as p } from "./index-orsBiyT_.fc4357c3.js";
import { t as h } from "./index.esm-DBTxpXCn.fccbd562.js";
import { q as v } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const S = () => ":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}}", _ = class {
  constructor(t) {
    g(this, t), this.activeSlideChange = r(this, "activeSlideChange", 7), this.lightboxClose = r(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.componentLoaded = !1, this.dragging = !1, this.onKeyDown = (e) => {
      e.code === "Escape" ? (e.stopImmediatePropagation(), e.preventDefault(), this.close()) : e.code === "ArrowLeft" ? this.onPreviousSlideClick() : e.code === "ArrowRight" && this.onNextSlideClick();
    }, this.preventDragStart = (e) => {
      e.preventDefault();
    }, this.onCloseButtonClick = () => {
      this.close();
    }, this.onDownloadButtonClick = () => {
      var e;
      (e = this.slides[this.activeSlideIndex]) == null || e.download();
    }, this.onNextSlideClick = () => {
      var e;
      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1)), this.activeSlideIndex === this.slides.length - 1 && (this.slides.length > 1 ? this.previousSlideButton.focus() : (e = h(this.modalEl).at(0)) == null || e.focus());
    }, this.onPreviousSlideClick = () => {
      var e;
      this.activateSlide(Math.max(0, this.activeSlideIndex - 1)), this.activeSlideIndex === 0 && (this.slides.length > 1 ? this.nextSlideButton.focus() : (e = h(this.modalEl).at(0)) == null || e.focus());
    }, this.registerSlides = () => {
      this.removeSlideListeners(), this.slides = Array.from(this.el.children).filter((e) => e.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes();
    }, this.onPointerDown = (e) => {
      this.slides.length <= 1 || (this.dragging = !0, this.dragStartPosition = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX, this.slides.forEach((i) => {
        i.style.transition = "none";
      }));
    }, this.onPointerMove = async (e) => {
      var l, n;
      if (!this.dragging)
        return;
      const i = !(e instanceof MouseEvent) && e.touches.length > 1, s = (n = (l = this.slides[this.activeSlideIndex]) == null ? void 0 : l.shadowRoot) == null ? void 0 : n.querySelector("swirl-file-viewer-image"), a = Boolean(s) ? await s.getZoom() > 1 : !1;
      if (i || a)
        return;
      e.preventDefault();
      const c = e instanceof MouseEvent ? e.clientX - this.dragStartPosition : e.touches[0].clientX - this.dragStartPosition;
      this.slides.forEach((d) => {
        const b = this.activeSlideIndex * d.getBoundingClientRect().width;
        this.dragDelta = c, d.style.transform = `translate3d(${(-b + this.dragDelta) / 16}rem, 0, 0)`;
      });
    }, this.onPointerUp = () => {
      if (!this.dragging)
        return;
      this.dragging = !1, this.dragStartPosition = void 0;
      const e = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
      this.dragDelta = 0;
      const i = e > 0.2, s = e < -0.2;
      this.slides.forEach((a) => {
        a.style.transition = "";
      }), i ? this.onPreviousSlideClick() : s ? this.onNextSlideClick() : this.resetSlidePositions();
    }, this.onBackdropClick = (e) => {
      e.target === this.slidesContainer && this.close();
    }, this.onContextMenu = (e) => {
      this.downloadButtonEnabled || e.preventDefault();
    };
  }
  connectedCallback() {
    this.componentLoaded && this.registerSlides();
  }
  componentWillLoad() {
    this.registerSlides();
  }
  componentDidLoad() {
    this.ensureOpening(), this.setDialogCustomProps(), this.activateSlide(0), this.componentLoaded = !0;
  }
  disconnectedCallback() {
    var t;
    this.unlockBodyScroll(), this.removeSlideListeners(), this.activateSlideTimeout && clearTimeout(this.activateSlideTimeout), this.closingTimeout && clearTimeout(this.closingTimeout), (t = this.modalEl) != null && t.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((e, i) => {
      i === this.activeSlideIndex ? (e.removeAttribute("aria-hidden"), e.setAttribute("active", "true")) : i === this.activeSlideIndex - 1 || i === this.activeSlideIndex + 1 ? (e.setAttribute("aria-hidden", "true"), e.setAttribute("active", "true")) : e.setAttribute("aria-hidden", "true"), e.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
    }), this.activateSlideTimeout && (clearTimeout(this.activateSlideTimeout), this.activateSlideTimeout = void 0), this.activateSlideTimeout = setTimeout(() => {
      this.slides.forEach((e, i) => {
        i !== this.activeSlideIndex && i !== this.activeSlideIndex - 1 && i !== this.activeSlideIndex + 1 && e.setAttribute("active", "false");
      });
    }, 300), this.stopAllMediaPlayers(), this.resetImageZoom();
  }
  ensureOpening() {
    var t;
    this.opening && !((t = this.modalEl) != null && t.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", this.preventDragStart);
    });
  }
  removeSlideListeners() {
    var t;
    (t = this.slides) == null || t.forEach((e) => {
      e.removeEventListener("dragstart", this.preventDragStart);
    });
  }
  resetSlidePositions() {
    this.slides.forEach((t) => {
      t.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
    });
  }
  lockBodyScroll() {
    x(this.el);
  }
  unlockBodyScroll() {
    m(this.el);
  }
  getMediaPlayers() {
    return v(this.el, "video");
  }
  stopAllMediaPlayers() {
    this.getMediaPlayers().forEach((t) => t.pause());
  }
  resetImageZoom() {
    this.slides.forEach((t) => {
      var i;
      const e = (i = t == null ? void 0 : t.shadowRoot) == null ? void 0 : i.querySelector("swirl-file-viewer-image");
      Boolean(e) && e.resetZoom();
    });
  }
  render() {
    const t = this.slides.length > 1, e = p("lightbox", {
      "lightbox--closing": this.closing
    });
    return o(u, { key: "606cdd94bb39e3dabdaed8e8883c389b564c74b1" }, o("dialog", { key: "ce57afaa04c6ee047a8f44cd3e5529f4e68035b4", "aria-label": this.label, class: e, 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: (i) => this.modalEl = i }, o("div", { key: "dfd69e4353d8d07456561328d488a4a457e6d968", class: "lightbox__body", role: "document" }, o("header", { key: "1db5c52f87bf74175da4a0ac0601fa3bff5eea9e", class: "lightbox__header" }, o("div", { key: "da32272bcd8b509c31aedb5e0f8500f8da762ffc", class: "lightbox__toolbar" }, o("slot", { key: "1c119c9bf17a0fae5d21454a996ab0ae127c3939", name: "toolbar" }), this.downloadButtonEnabled && o("button", { key: "04b9749b7f5d0e32444e601e500b7a58c60f5798", "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, o("swirl-icon-download", { key: "9946c721e760d4473dcca277a24a9c452b86ebfc" }))), o("button", { key: "c52032ccb18aeb9244f9aea968897e5b17ff3868", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, o("swirl-icon-close", { key: "6b1fe28447fd512719a3be94c39a9764e6f6faf2" }))), o("div", { key: "5ad706cee87f020ac88a89cea236a62c0ccb6699", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, o("div", { key: "5a1bc157642bd91d3ac99ce18bc83ad8a646bd60", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (i) => this.slidesContainer = i }, o("slot", { key: "3287dc2fe1451480c2908950dfa357ab8b82f49e", onSlotchange: this.registerSlides }))), o("div", { key: "cc917bfdcf4db59ad0942cddc2b87e4004572dee", class: "lightbox__controls" }, o("button", { key: "59a93291d5421bd8f7f32dd5fe75b912cef275a4", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (i) => this.previousSlideButton = i }, o("swirl-icon-arrow-left", { key: "9dbd523b663fa0c5165cc0e81ba8b575f3e43034" })), o("button", { key: "d183ee28972de205685177c58b146437fcc5b333", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (i) => this.nextSlideButton = i }, o("swirl-icon-arrow-right", { key: "872881ff1e26df26dab6ac3f4ee4ed9f261c6d31" }))), t && o("span", { key: "51d91fb703f0754088d895748d0357774f9705f7", class: "lightbox__pagination" }, o("span", { key: "e1957f08111ff4c968b3eb5313c97fc0cb87d08a", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))));
  }
  get el() {
    return f(this);
  }
  static get watchers() {
    return {
      activeSlideIndex: [{
        watchActiveSlideIndex: 0
      }]
    };
  }
};
_.style = S();
export {
  _ as swirl_lightbox
};
