maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazGallery-6b8ecedf.mjs

@@ -0,0 +1,617 @@
+var _ = Object.defineProperty;
+var H = (o, e, t) => e in o ? _(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var i = (o, e, t) => (H(o, typeof e != "symbol" ? e + "" : e, t), t);
+import "../assets/MazGallery.css";
+import { defineComponent as B, useCssVars as S, defineAsyncComponent as O, onBeforeMount as M, computed as p, openBlock as u, createElementBlock as g, normalizeClass as y, normalizeStyle as E, createElementVNode as b, Fragment as x, renderList as C, withDirectives as w, unref as v, toDisplayString as T, createCommentVNode as L, createVNode as N } from "vue";
+import { _ as R } from "./MazCard-bcc36489.mjs";
+const U = `
+.maz-zoom-img {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  z-index: 1050;
+  background-color: hsla(238, 15%, 40%, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.maz-zoom-img,
+.maz-zoom-img * {
+  box-sizing: border-box;
+}
+
+.maz-zoom-img .maz-zoom-img__wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  transition: all 300ms ease-in-out;
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.maz-zoom-img.maz-animate .maz-zoom-img__wrapper {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.maz-zoom-img.maz-animate .maz-zoom-img__loader {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: hsla(238, 15%, 40%, 0.7);
+  border-radius: 1rem;
+  z-index: 2;
+  min-width: 60px;
+  min-height: 60px;
+}
+.maz-zoom-img.maz-animate .maz-zoom-img__loader[hidden] {
+  display: none;
+}
+
+@-webkit-keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.maz-zoom-img.maz-animate .maz-zoom-img__loader__svg {
+  animation: spin .6s linear infinite;
+}
+
+.maz-zoom-img img {
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  border-radius: 1rem;
+}
+
+.maz-zoom-img .maz-zoom-btn {
+  margin: 0 auto;
+  border: none;
+  background-color: hsla(0, 0%, 7%, 0.5);
+  box-shadow: 0 0 0.5rem 0 hsla(0, 0%, 0%, 0.2);
+  height: 2.2rem;
+  min-height: 2.2rem;
+  width: 2.2rem;
+  min-width: 2.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2.2rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+  outline: none;
+}
+
+.maz-zoom-img .maz-zoom-btn svg {
+  fill: white;
+}
+
+.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+}
+
+.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--previous {
+  position: absolute;
+  left: 0.5rem;
+  z-index: 1;
+}
+
+.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--next {
+  position: absolute;
+  right: 0.5rem;
+  z-index: 1;
+}
+
+.maz-zoom-img .maz-zoom-btn:hover {
+  background-color: hsl(0, 0%, 0%);
+}`, P = {
+  close: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+  next: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>',
+  previous: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>',
+  spinner: '<svg width="40px" height="40px" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve" class="maz-zoom-img__loader__svg" data-v-6d1cb50c=""><path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"></path></svg>'
+};
+class $ {
+  constructor(e) {
+    i(this, "options");
+    i(this, "loader");
+    i(this, "wrapper");
+    i(this, "img");
+    i(this, "keydownHandler");
+    i(this, "onImgLoadedCallback");
+    i(this, "buttonsAdded");
+    i(this, "defaultOptions", {
+      scale: !0,
+      blur: !0,
+      disabled: !1
+    });
+    i(this, "mouseEnterListener");
+    i(this, "mouseLeaveListener");
+    i(this, "renderPreviewListener");
+    if (!e.value)
+      throw new Error(
+        '[MazUI](zoom-img) Image path must be defined. Ex: `v-zoom-img="<PATH_TO_IMAGE>"`'
+      );
+    if (typeof e.value == "object" && !e.value.src)
+      throw new Error("[maz-ui](zoom-img) src of image must be provided");
+    this.buttonsAdded = !1, this.options = this.buildOptions(e), this.keydownHandler = this.keydownLister.bind(this), this.loader = this.getLoader(), this.wrapper = document.createElement("div"), this.wrapper.classList.add("maz-zoom-img__wrapper"), this.wrapper.prepend(this.loader), this.img = document.createElement("img"), this.onImgLoadedCallback = this.onImgLoaded.bind(this), this.imgEventHandler(!0);
+  }
+  buildOptions(e) {
+    return {
+      ...this.defaultOptions,
+      ...typeof e.value == "object" ? e.value : { src: e.value }
+    };
+  }
+  get allInstances() {
+    return [...document.querySelectorAll(".maz-zoom-img-instance")];
+  }
+  create(e) {
+    this.options.disabled || (e.style.cursor = "pointer", setTimeout(() => e.classList.add("maz-zoom-img-instance")), e.setAttribute("data-zoom-src", this.options.src), this.options.alt && e.setAttribute("data-zoom-alt", this.options.alt), e.style.transition = "all 300ms ease-in-out", this.mouseEnterListener = () => this.mouseEnter(e), this.mouseLeaveListener = () => this.mouseLeave(e), this.renderPreviewListener = () => this.renderPreview(e, this.options), e.addEventListener("mouseenter", this.mouseEnterListener), e.addEventListener("mouseleave", this.mouseLeaveListener), e.addEventListener("click", this.renderPreviewListener));
+  }
+  update(e) {
+    this.options = this.buildOptions(e);
+  }
+  remove(e) {
+    this.imgEventHandler(!1), e.removeEventListener("mouseenter", this.mouseEnterListener), e.removeEventListener("mouseleave", this.mouseLeaveListener), e.removeEventListener("click", this.renderPreviewListener), e.classList.remove("maz-zoom-img-instance"), e.removeAttribute("data-zoom-src"), e.removeAttribute("data-zoom-alt"), e.style.cursor = "";
+  }
+  renderPreview(e, t) {
+    e.classList.add(
+      "maz-is-open"
+      /* OPEN */
+    ), this.addStyle(U);
+    const s = document.createElement("div");
+    s.classList.add("maz-zoom-img"), s.setAttribute("id", "MazImgPreviewFullsize"), s.addEventListener("click", (a) => {
+      s.isEqualNode(a.target) && this.closePreview();
+    }), typeof t == "object" && (this.img.setAttribute("src", t.src), t.alt && this.img.setAttribute("alt", t.alt), this.img.id = "MazImgElement"), this.wrapper.append(this.img), s.append(this.wrapper), document.body.append(s), this.keyboardEventHandler(!0), setTimeout(() => {
+      s && s.classList.add("maz-animate");
+    }, 100);
+  }
+  onImgLoaded() {
+    this.wrapper.style.width = `${this.img.width}px`, this.wrapper.style.minWidth = "200px", this.loader.hidden = !0;
+    const e = this.getButton(), t = [], s = this.allInstances.length > 1;
+    if (!this.buttonsAdded) {
+      if (this.buttonsAdded = !0, s) {
+        const a = this.getButton("previous"), l = this.getButton("next");
+        t.push(a, l);
+      }
+      this.wrapper.append(e), s && (this.wrapper.prepend(t[0]), this.wrapper.append(t[1]));
+    }
+  }
+  getLoader() {
+    const e = document.createElement("div");
+    return e.classList.add("maz-zoom-img__loader"), e.innerHTML = P.spinner, e;
+  }
+  mouseLeave(e) {
+    this.options.scale && (e.style.transform = ""), this.options.blur && (e.style.filter = ""), e.style.zIndex = "";
+  }
+  mouseEnter(e) {
+    e.style.zIndex = "1", this.options.scale && (e.style.transform = "scale(1.1)"), this.options.blur && (e.style.filter = "blur(2px)");
+  }
+  keydownLister(e) {
+    e.preventDefault(), (e.key === "Escape" || e.key === " ") && this.closePreview(), (e.key === "ArrowLeft" || e.key === "ArrowRight") && this.nextPreviousImage(e.key === "ArrowRight");
+  }
+  getButton(e = "close") {
+    const t = document.createElement("button");
+    return t.innerHTML = P[e], t.addEventListener("click", () => {
+      e === "close" ? this.closePreview() : this.allInstances && this.nextPreviousImage(e === "next");
+    }), t.classList.add("maz-zoom-btn"), t.classList.add(`maz-zoom-btn--${e}`), t;
+  }
+  closePreview() {
+    const e = document.querySelector("#MazImgPreviewFullsize"), t = document.querySelector("#MazPreviewStyle"), s = document.querySelector(
+      ".maz-zoom-img-instance.maz-is-open"
+    );
+    s && s.classList.remove(
+      "maz-is-open"
+      /* OPEN */
+    ), e && e.classList.remove("maz-animate"), this.keyboardEventHandler(!1), setTimeout(() => {
+      e && e.remove(), t && t.remove();
+    }, 300);
+  }
+  getNewInstanceIndex(e) {
+    return e < 0 ? this.allInstances.length - 1 : e >= this.allInstances.length ? 0 : e;
+  }
+  nextPreviousImage(e) {
+    const t = e, s = document.querySelector(
+      ".maz-zoom-img-instance.maz-is-open"
+    );
+    if (s) {
+      const a = this.allInstances.indexOf(s), l = t ? a + 1 : a - 1, m = this.allInstances[this.getNewInstanceIndex(l)];
+      m && this.useNextInstance(s, m);
+    }
+  }
+  useNextInstance(e, t) {
+    e.classList.remove(
+      "maz-is-open"
+      /* OPEN */
+    ), t.classList.add(
+      "maz-is-open"
+      /* OPEN */
+    );
+    const s = t.getAttribute("data-zoom-src"), a = t.getAttribute("data-zoom-alt");
+    this.wrapper.style.width = "", this.loader.hidden = !1, s && this.img.setAttribute("src", s), a && this.img.setAttribute("alt", a);
+  }
+  addStyle(e) {
+    const t = document.createElement("style");
+    t.id = "MazPreviewStyle", t.textContent = e, document.head.append(t);
+  }
+  keyboardEventHandler(e) {
+    if (e)
+      return document.addEventListener("keydown", this.keydownHandler);
+    document.removeEventListener("keydown", this.keydownHandler);
+  }
+  imgEventHandler(e) {
+    if (e)
+      return this.img.addEventListener("load", this.onImgLoadedCallback);
+    this.img.removeEventListener("load", this.onImgLoadedCallback);
+  }
+}
+let z;
+const I = {
+  created(o, e) {
+    z = new $(e), z.create(o);
+  },
+  updated(o, e) {
+    z.update(e);
+  },
+  unmounted(o) {
+    z.remove(o);
+  }
+}, j = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", q = {
+  baseClass: "m-lazy-img",
+  loadedClass: "m-lazy-loaded",
+  loadingClass: "m-lazy-loading",
+  errorClass: "m-lazy-error",
+  noPhotoClass: "m-lazy-no-photo",
+  noPhoto: !1,
+  observerOnce: !0,
+  loadOnce: !1,
+  noUseErrorPhoto: !1,
+  observerOptions: {
+    threshold: 0.1
+  }
+};
+class D {
+  constructor(e = {}) {
+    i(this, "observers", []);
+    i(this, "defaultOptions", q);
+    i(this, "options");
+    i(this, "onImgLoadedCallback");
+    i(this, "onImgErrorCallback");
+    i(this, "hasImgLoaded", !1);
+    this.options = this.buildOptions(e), this.onImgLoadedCallback = this.imageIsLoaded.bind(this), this.onImgErrorCallback = this.imageHasError.bind(this);
+  }
+  async loadErrorPhoto() {
+    const { default: e } = await import("./no-photography-4c6c77cf.mjs");
+    return e;
+  }
+  buildOptions(e) {
+    return {
+      ...this.defaultOptions,
+      ...e,
+      observerOptions: {
+        ...this.defaultOptions.observerOptions,
+        ...e.observerOptions
+      }
+    };
+  }
+  removeClass(e, t) {
+    e.classList.remove(t);
+  }
+  addClass(e, t) {
+    e.classList.add(t);
+  }
+  removeAllStateClasses(e) {
+    this.removeClass(e, this.options.loadedClass), this.removeClass(e, this.options.loadingClass), this.removeClass(e, this.options.errorClass), this.removeClass(e, this.options.noPhotoClass);
+  }
+  setBaseClass(e) {
+    this.addClass(e, this.options.baseClass);
+  }
+  imageIsLoading(e) {
+    var t, s;
+    this.addClass(e, this.options.loadingClass), (s = (t = this.options).onLoading) == null || s.call(t, e);
+  }
+  imageHasNoPhoto(e) {
+    this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.noPhotoClass), this.setDefaultPhoto(e);
+  }
+  imageIsLoaded(e) {
+    var t, s;
+    this.hasImgLoaded = !0, this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.loadedClass), (s = (t = this.options).onLoaded) == null || s.call(t, e);
+  }
+  imageHasError(e, t) {
+    var s, a;
+    console.warn("[maz-ui][MazLazyImg] Error while loading image", t), this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.errorClass), (a = (s = this.options).onError) == null || a.call(s, e), this.setDefaultPhoto(e);
+  }
+  getImageUrl(e, t) {
+    const s = this.getImgElement(e).getAttribute("data-lazy-src");
+    if (s)
+      return s;
+    t.value;
+    const a = typeof t.value == "object" ? t.value.src : t.value;
+    return a || console.warn("[maz-ui][MazLazyImg] src url is not defined"), a;
+  }
+  async setPictureSourceUrls(e) {
+    const t = e.querySelectorAll("source");
+    if (t.length > 0)
+      for await (const s of t) {
+        const a = s.getAttribute("data-lazy-srcset");
+        a ? s.srcset = a : console.warn(
+          '[maz-ui][MazLazyImg] the "[data-lazy-srcset]" attribute is not provided on "<source />"'
+        );
+      }
+    else
+      console.warn(
+        '[maz-ui][MazLazyImg] No "<source />" elements provided into the "<picture />" element'
+      ), this.imageHasError(e);
+  }
+  hasBgImgMode(e) {
+    return e.arg === "bg-image";
+  }
+  isPictureElement(e) {
+    return e instanceof HTMLPictureElement;
+  }
+  getImgElement(e) {
+    return this.isPictureElement(e) ? e.querySelector("img") : e;
+  }
+  async setDefaultPhoto(e) {
+    if (this.options.noUseErrorPhoto)
+      return;
+    const t = this.options.errorPhoto ?? await this.loadErrorPhoto(), s = e.querySelectorAll("source");
+    if (s.length > 0)
+      for await (const a of s)
+        a.srcset = t;
+    else
+      this.setImgSrc(e, t);
+  }
+  addEventListenerToImg(e) {
+    const t = this.getImgElement(e);
+    t.addEventListener("load", () => this.onImgLoadedCallback(e), {
+      once: !0
+    }), t.addEventListener("error", (s) => this.onImgErrorCallback(e, s), { once: !0 });
+  }
+  async loadImage(e, t) {
+    if (this.imageIsLoading(e), this.isPictureElement(e))
+      this.addEventListenerToImg(e), await this.setPictureSourceUrls(e);
+    else {
+      const s = this.getImageUrl(e, t);
+      if (!s)
+        return this.imageHasError(e);
+      this.hasBgImgMode(t) ? (e.style.backgroundImage = `url('${s}')`, this.imageIsLoaded(e)) : (this.addEventListenerToImg(e), this.setImgSrc(e, s));
+    }
+  }
+  setImgSrc(e, t) {
+    const s = this.getImgElement(e);
+    s.src = t;
+  }
+  handleIntersectionObserver(e, t, s, a) {
+    var l, m;
+    this.observers.push(a);
+    for (const c of s)
+      if (c.isIntersecting) {
+        if ((m = (l = this.options).onIntersecting) == null || m.call(l, c.target), this.options.observerOnce && a.unobserve(e), this.options.loadOnce && this.hasImgLoaded)
+          return;
+        this.loadImage(e, t);
+      }
+  }
+  createObserver(e, t) {
+    const s = (m, c) => {
+      this.handleIntersectionObserver(e, t, m, c);
+    }, a = this.options.observerOptions;
+    new IntersectionObserver(s, a).observe(e);
+  }
+  async imageHandler(e, t, s) {
+    if (s === "update")
+      for await (const a of this.observers)
+        a.unobserve(e);
+    window.IntersectionObserver ? this.createObserver(e, t) : this.loadImage(e, t);
+  }
+  async bindUpdateHandler(e, t, s) {
+    if (this.options.noPhoto)
+      return this.imageHasNoPhoto(e);
+    await this.imageHandler(e, t, s);
+  }
+  async add(e, t) {
+    if (this.hasBgImgMode(t) && this.isPictureElement(e))
+      throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);
+    setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, j), await this.bindUpdateHandler(e, t, "bind");
+  }
+  async update(e, t) {
+    t.value !== t.oldValue && (this.hasImgLoaded = !1, this.removeAllStateClasses(e), await this.bindUpdateHandler(e, t, "update"));
+  }
+  remove(e, t) {
+    this.hasImgLoaded = !1, this.hasBgImgMode(t) && (e.style.backgroundImage = ""), this.removeAllStateClasses(e);
+    for (const s of this.observers)
+      s.unobserve(e);
+    this.observers = [];
+  }
+}
+let f;
+const G = {
+  created(o, e) {
+    const t = typeof e.value == "object" ? e.value : {};
+    f = new D(t), f.add(o, e);
+  },
+  updated(o, e) {
+    f.update(o, e);
+  },
+  unmounted(o, e) {
+    f.remove(o, e);
+  }
+}, V = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, Z = ["alt"], F = {
+  key: 0,
+  class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
+}, W = { class: "maz-text-2xl maz-text-white" }, Q = /* @__PURE__ */ B({
+  __name: "MazGallery",
+  props: {
+    /**
+     *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
+     * */
+    images: {
+      type: Array,
+      default: () => []
+    },
+    /** Images count shown (max: 5) */
+    imagesShownCount: { type: Number, default: 5 },
+    /** Remove transparent layer with the remain count (ex: +2) */
+    noRemaining: { type: Boolean, default: !1 },
+    /** Height of gallery */
+    height: { type: [Number, String], default: 150 },
+    /** Remove default height */
+    noHeight: { type: Boolean, default: !1 },
+    /** Width of gallery */
+    width: { type: [Number, String], default: "100%" },
+    /** Remove default width */
+    noWidth: { type: Boolean, default: !1 },
+    /** Disable the border radius of the gallery */
+    noRadius: { type: Boolean, default: !1 },
+    /** Disable full size display when clicking on image */
+    noZoom: { type: Boolean, default: !1 },
+    /** Layer with photography icon when no images is provided */
+    hasEmptyLayer: { type: Boolean, default: !0 },
+    /** Lazy load image - if false, images are directly loaded */
+    lazy: { type: Boolean, default: !0 },
+    /** Disable blur effect on image hover */
+    blur: { type: Boolean, default: !0 },
+    /** Disable scale animation effect on image hover */
+    scale: { type: Boolean, default: !0 },
+    /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
+    separatorColor: { type: String, default: "transparent" }
+  },
+  setup(o) {
+    S((n) => ({
+      "7a2c056e": o.separatorColor
+    }));
+    const e = O(() => import("./no-photography-be94ddda.mjs")), t = o;
+    M(() => {
+      t.imagesShownCount > 5 && console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
+    });
+    const s = p(() => {
+      const n = t.noWidth, h = t.width, d = t.noHeight, r = t.height;
+      return {
+        ...n ? {} : {
+          flex: "0 0 " + typeof h == "number" ? `${h}px` : h,
+          width: typeof h == "number" ? `${h}px` : h
+        },
+        ...d ? {} : {
+          height: typeof r == "number" ? `${r}px` : `${r}`,
+          minHeight: typeof r == "number" ? `${r}px` : `${r}`
+        }
+      };
+    }), a = p(() => t.imagesShownCount <= 5 ? t.imagesShownCount : 5), l = p(() => t.images.length - (t.images.length < a.value ? t.images.length : a.value)), m = p(() => t.images.map(
+      (n) => typeof n == "object" ? { ...n, thumbnail: n.thumbnail ?? n.src } : { src: n, thumbnail: n, alt: void 0 }
+    )), c = p(() => m.value.slice(0, a.value)), k = p(() => m.value.slice(a.value, t.images.length)), A = (n) => l.value && n + 1 === c.value.length && !t.noRemaining;
+    return (n, h) => o.images.length > 0 || o.hasEmptyLayer ? (u(), g(
+      "div",
+      {
+        key: 0,
+        class: y(["m-gallery maz-flex", { "maz-rounded": !o.noRadius }]),
+        style: E([s.value])
+      },
+      [
+        b("section", V, [
+          (u(!0), g(
+            x,
+            null,
+            C(c.value, (d, r) => (u(), g(
+              "figure",
+              {
+                key: r,
+                class: y(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${r + 1}`]])
+              },
+              [
+                w(b("img", {
+                  class: "m-gallery__item__image maz-flex-1",
+                  src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+                  alt: d.alt,
+                  loading: "lazy"
+                }, null, 8, Z), [
+                  [v(G), { src: d.thumbnail, disabled: !o.lazy }, "bg-image"],
+                  [v(I), {
+                    src: d.src,
+                    alt: d.alt,
+                    disabled: o.noZoom || A(r),
+                    blur: o.blur,
+                    scale: o.scale
+                  }]
+                ]),
+                A(r) ? w((u(), g("div", F, [
+                  b(
+                    "span",
+                    W,
+                    "+" + T(l.value),
+                    1
+                    /* TEXT */
+                  )
+                ])), [
+                  [v(I), {
+                    src: d.src,
+                    alt: d.alt,
+                    disabled: o.noZoom,
+                    blur: !1,
+                    scale: o.scale
+                  }]
+                ]) : L("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          o.hasEmptyLayer && o.images.length === 0 ? (u(), g(
+            "div",
+            {
+              key: 0,
+              class: y(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !o.noRadius }]),
+              style: E([s.value])
+            },
+            [
+              N(v(e), { class: "maz-h-8 maz-w-8" })
+            ],
+            6
+            /* CLASS, STYLE */
+          )) : L("v-if", !0)
+        ]),
+        (u(!0), g(
+          x,
+          null,
+          C(k.value, (d, r) => w((u(), g("div", {
+            key: r,
+            class: "m-gallery__hidden"
+          })), [
+            [v(I), { src: d.src, disabled: o.noZoom }]
+          ])),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      6
+      /* CLASS, STYLE */
+    )) : L("v-if", !0);
+  }
+});
+const ee = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-4e6fbc0c"]]);
+export {
+  ee as default
+};