maz-ui 3.22.4 → 3.23.1

package/components/MazGallery.mjs

@@ -1,12 +1,9 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+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, useCssVars, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
-const style = `
+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";
+const R = `
 .maz-zoom-img {
   position: fixed;
   top: 0;
@@ -129,512 +126,341 @@ const style = `
 
 .maz-zoom-img .maz-zoom-btn:hover {
   background-color: hsl(0, 0%, 0%);
-}`;
-const svgs = {
+}`, 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 VueZoomImg {
-  constructor(binding) {
-    __publicField(this, "options");
-    __publicField(this, "loader");
-    __publicField(this, "wrapper");
-    __publicField(this, "img");
-    __publicField(this, "keydownHandler");
-    __publicField(this, "onImgLoadedCallback");
-    __publicField(this, "buttonsAdded");
-    __publicField(this, "defaultOptions", {
-      scale: true,
-      blur: true,
-      disabled: false
+class U {
+  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
     });
-    __publicField(this, "mouseEnterListener");
-    __publicField(this, "mouseLeaveListener");
-    __publicField(this, "renderPreviewListener");
-    if (!binding.value) {
+    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 binding.value === "object" && !binding.value.src) {
+    if (typeof e.value == "object" && !e.value.src)
       throw new Error("[maz-ui](zoom-img) src of image must be provided");
-    }
-    this.buttonsAdded = false;
-    this.options = this.buildOptions(binding);
-    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(true);
-  }
-  buildOptions(binding) {
+    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 binding.value === "object" ? binding.value : { src: binding.value }
+      ...typeof e.value == "object" ? e.value : { src: e.value }
     };
   }
   get allInstances() {
     return [...document.querySelectorAll(".maz-zoom-img-instance")];
   }
-  create(el) {
-    if (this.options.disabled)
-      return;
-    el.style.cursor = "pointer";
-    setTimeout(() => el.classList.add("maz-zoom-img-instance"));
-    el.setAttribute("data-zoom-src", this.options.src);
-    if (this.options.alt)
-      el.setAttribute("data-zoom-alt", this.options.alt);
-    el.style.transition = "all 300ms ease-in-out";
-    this.mouseEnterListener = () => this.mouseEnter(el);
-    this.mouseLeaveListener = () => this.mouseLeave(el);
-    this.renderPreviewListener = () => this.renderPreview(el, this.options);
-    el.addEventListener("mouseenter", this.mouseEnterListener);
-    el.addEventListener("mouseleave", this.mouseLeaveListener);
-    el.addEventListener("click", this.renderPreviewListener);
-  }
-  update(binding) {
-    this.options = this.buildOptions(binding);
-  }
-  remove(el) {
-    this.imgEventHandler(false);
-    el.removeEventListener("mouseenter", this.mouseEnterListener);
-    el.removeEventListener("mouseleave", this.mouseLeaveListener);
-    el.removeEventListener("click", this.renderPreviewListener);
-    el.classList.remove("maz-zoom-img-instance");
-    el.removeAttribute("data-zoom-src");
-    el.removeAttribute("data-zoom-alt");
-    el.style.cursor = "";
-  }
-  renderPreview(el, options) {
-    el.classList.add(
+  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(style);
-    const container = document.createElement("div");
-    container.classList.add("maz-zoom-img");
-    container.setAttribute("id", "MazImgPreviewFullsize");
-    container.addEventListener("click", (e) => {
-      if (container.isEqualNode(e.target)) {
-        this.closePreview();
-      }
-    });
-    if (typeof options === "object") {
-      this.img.setAttribute("src", options.src);
-      if (options.alt)
-        this.img.setAttribute("alt", options.alt);
-      this.img.id = "MazImgElement";
-    }
-    this.wrapper.append(this.img);
-    container.append(this.wrapper);
-    document.body.append(container);
-    this.keyboardEventHandler(true);
-    setTimeout(() => {
-      if (container)
-        container.classList.add("maz-animate");
+    ), this.addStyle(R);
+    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 = true;
-    const closeButton = this.getButton();
-    const buttons = [];
-    const hasMultipleInstance = this.allInstances.length > 1;
+    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) {
-      this.buttonsAdded = true;
-      if (hasMultipleInstance) {
-        const previousButton = this.getButton("previous");
-        const nextButton = this.getButton("next");
-        buttons.push(previousButton, nextButton);
-      }
-      this.wrapper.append(closeButton);
-      if (hasMultipleInstance) {
-        this.wrapper.prepend(buttons[0]);
-        this.wrapper.append(buttons[1]);
+      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 loader = document.createElement("div");
-    loader.classList.add("maz-zoom-img__loader");
-    loader.innerHTML = svgs.spinner;
-    return loader;
-  }
-  mouseLeave(el) {
-    if (this.options.scale)
-      el.style.transform = "";
-    if (this.options.blur)
-      el.style.filter = "";
-    el.style.zIndex = "";
-  }
-  mouseEnter(el) {
-    el.style.zIndex = "1";
-    if (this.options.scale)
-      el.style.transform = "scale(1.1)";
-    if (this.options.blur)
-      el.style.filter = "blur(2px)";
+    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();
-    if (e.key === "Escape" || e.key === " ") {
-      this.closePreview();
-    }
-    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      this.nextPreviousImage(e.key === "ArrowRight");
-    }
+    e.preventDefault(), (e.key === "Escape" || e.key === " ") && this.closePreview(), (e.key === "ArrowLeft" || e.key === "ArrowRight") && this.nextPreviousImage(e.key === "ArrowRight");
   }
-  getButton(iconName = "close") {
-    const button = document.createElement("button");
-    button.innerHTML = svgs[iconName];
-    button.addEventListener("click", () => {
-      iconName === "close" ? this.closePreview() : this.allInstances ? this.nextPreviousImage(iconName === "next") : null;
-    });
-    button.classList.add("maz-zoom-btn");
-    button.classList.add(`maz-zoom-btn--${iconName}`);
-    return button;
+  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 container = document.querySelector("#MazImgPreviewFullsize");
-    const style2 = document.querySelector("#MazPreviewStyle");
-    const instance2 = document.querySelector(
+    const e = document.querySelector("#MazImgPreviewFullsize"), t = document.querySelector("#MazPreviewStyle"), s = document.querySelector(
       ".maz-zoom-img-instance.maz-is-open"
     );
-    if (instance2)
-      instance2.classList.remove(
-        "maz-is-open"
-        /* OPEN */
-      );
-    if (container)
-      container.classList.remove("maz-animate");
-    this.keyboardEventHandler(false);
-    setTimeout(() => {
-      if (container)
-        container.remove();
-      if (style2)
-        style2.remove();
+    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(newInstanceIndex) {
-    return newInstanceIndex < 0 ? this.allInstances.length - 1 : newInstanceIndex >= this.allInstances.length ? 0 : newInstanceIndex;
+  getNewInstanceIndex(e) {
+    return e < 0 ? this.allInstances.length - 1 : e >= this.allInstances.length ? 0 : e;
   }
-  nextPreviousImage(isNext) {
-    const selectNextInstance = isNext;
-    const currentInstance = document.querySelector(
+  nextPreviousImage(e) {
+    const t = e, s = document.querySelector(
       ".maz-zoom-img-instance.maz-is-open"
     );
-    if (currentInstance) {
-      const currentInstanceIndex = this.allInstances.indexOf(currentInstance);
-      const newInstanceIndex = selectNextInstance ? currentInstanceIndex + 1 : currentInstanceIndex - 1;
-      const nextInstance = this.allInstances[this.getNewInstanceIndex(newInstanceIndex)];
-      if (nextInstance) {
-        this.useNextInstance(currentInstance, nextInstance);
-      }
+    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(currentInstance, nextInstance) {
-    currentInstance.classList.remove(
+  useNextInstance(e, t) {
+    e.classList.remove(
       "maz-is-open"
       /* OPEN */
-    );
-    nextInstance.classList.add(
+    ), t.classList.add(
       "maz-is-open"
       /* OPEN */
     );
-    const src = nextInstance.getAttribute("data-zoom-src");
-    const alt = nextInstance.getAttribute("data-zoom-alt");
-    this.wrapper.style.width = "";
-    this.loader.hidden = false;
-    if (src)
-      this.img.setAttribute("src", src);
-    if (alt)
-      this.img.setAttribute("alt", alt);
-  }
-  addStyle(styleString) {
-    const style2 = document.createElement("style");
-    style2.id = "MazPreviewStyle";
-    style2.textContent = styleString;
-    document.head.append(style2);
-  }
-  keyboardEventHandler(add) {
-    if (add)
+    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(add) {
-    if (add)
+  imgEventHandler(e) {
+    if (e)
       return this.img.addEventListener("load", this.onImgLoadedCallback);
     this.img.removeEventListener("load", this.onImgLoadedCallback);
   }
 }
-let instance$1;
-const vZoomImg = {
-  created(el, binding) {
-    instance$1 = new VueZoomImg(binding);
-    instance$1.create(el);
+let z;
+const I = {
+  created(o, e) {
+    z = new U(e), z.create(o);
   },
-  updated(_el, binding) {
-    instance$1.update(binding);
+  updated(o, e) {
+    z.update(e);
   },
-  unmounted(el) {
-    instance$1.remove(el);
+  unmounted(o) {
+    z.remove(o);
   }
-};
-const EMPTY_PHOTO = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-const DEFAULT_OPTIONS = {
+}, $ = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", j = {
   baseClass: "m-lazy-img",
   loadedClass: "m-lazy-loaded",
   loadingClass: "m-lazy-loading",
   errorClass: "m-lazy-error",
   noPhotoClass: "m-lazy-no-photo",
-  noPhoto: false,
-  observerOnce: true,
-  loadOnce: false,
-  noUseErrorPhoto: false,
+  noPhoto: !1,
+  observerOnce: !0,
+  loadOnce: !1,
+  noUseErrorPhoto: !1,
   observerOptions: {
     threshold: 0.1
   }
 };
-class LazyImg {
-  constructor(opts = {}) {
-    __publicField(this, "observers", []);
-    __publicField(this, "defaultOptions", DEFAULT_OPTIONS);
-    __publicField(this, "options");
-    __publicField(this, "onImgLoadedCallback");
-    __publicField(this, "onImgErrorCallback");
-    __publicField(this, "hasImgLoaded", false);
-    this.options = this.buildOptions(opts);
-    this.onImgLoadedCallback = this.imageIsLoaded.bind(this);
-    this.onImgErrorCallback = this.imageHasError.bind(this);
+class q {
+  constructor(e = {}) {
+    i(this, "observers", []);
+    i(this, "defaultOptions", j);
+    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: photo } = await import("./chunks/no-photography-7f2be516.mjs");
-    return photo;
+    const { default: e } = await import("./chunks/no-photography-4c6c77cf.mjs");
+    return e;
   }
-  buildOptions(opts) {
+  buildOptions(e) {
     return {
       ...this.defaultOptions,
-      ...opts,
+      ...e,
       observerOptions: {
         ...this.defaultOptions.observerOptions,
-        ...opts.observerOptions
+        ...e.observerOptions
       }
     };
   }
-  removeClass(el, className) {
-    el.classList.remove(className);
-  }
-  addClass(el, className) {
-    el.classList.add(className);
-  }
-  removeAllStateClasses(el) {
-    this.removeClass(el, this.options.loadedClass);
-    this.removeClass(el, this.options.loadingClass);
-    this.removeClass(el, this.options.errorClass);
-    this.removeClass(el, this.options.noPhotoClass);
-  }
-  setBaseClass(el) {
-    this.addClass(el, this.options.baseClass);
-  }
-  imageIsLoading(el) {
-    var _a, _b;
-    this.addClass(el, this.options.loadingClass);
-    (_b = (_a = this.options).onLoading) == null ? void 0 : _b.call(_a, el);
-  }
-  imageHasNoPhoto(el) {
-    this.removeClass(el, this.options.loadingClass);
-    this.addClass(el, this.options.noPhotoClass);
-    this.setDefaultPhoto(el);
-  }
-  imageIsLoaded(el) {
-    var _a, _b;
-    this.hasImgLoaded = true;
-    this.removeClass(el, this.options.loadingClass);
-    this.addClass(el, this.options.loadedClass);
-    (_b = (_a = this.options).onLoaded) == null ? void 0 : _b.call(_a, el);
-  }
-  imageHasError(el, event) {
-    var _a, _b;
-    console.warn(`[maz-ui][MazLazyImg] Error while loading image`, event);
-    this.removeClass(el, this.options.loadingClass);
-    this.addClass(el, this.options.errorClass);
-    (_b = (_a = this.options).onError) == null ? void 0 : _b.call(_a, el);
-    this.setDefaultPhoto(el);
-  }
-  getImageUrl(el, binding) {
-    const dataSrc = this.getImgElement(el).getAttribute("data-lazy-src");
-    if (dataSrc)
-      return dataSrc;
-    binding.value;
-    const bindingSrc = typeof binding.value === "object" ? binding.value.src : binding.value;
-    if (!bindingSrc)
-      console.warn(`[maz-ui][MazLazyImg] src url is not defined`);
-    return bindingSrc;
-  }
-  async setPictureSourceUrls(el) {
-    const sourceElements = el.querySelectorAll("source");
-    if (sourceElements.length > 0) {
-      for await (const source of sourceElements) {
-        const srcSet = source.getAttribute("data-lazy-srcset");
-        if (srcSet) {
-          source.srcset = srcSet;
-        } else {
-          console.warn(
-            '[maz-ui][MazLazyImg] the "[data-lazy-srcset]" attribute is not provided on "<source />"'
-          );
-        }
+  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 {
+    else
       console.warn(
         '[maz-ui][MazLazyImg] No "<source />" elements provided into the "<picture />" element'
-      );
-      this.imageHasError(el);
-    }
+      ), this.imageHasError(e);
   }
-  hasBgImgMode(binding) {
-    return binding.arg === "bg-image";
+  hasBgImgMode(e) {
+    return e.arg === "bg-image";
   }
-  isPictureElement(el) {
-    return el instanceof HTMLPictureElement;
+  isPictureElement(e) {
+    return e instanceof HTMLPictureElement;
   }
-  getImgElement(el) {
-    const isPictureElement = this.isPictureElement(el);
-    return isPictureElement ? el.querySelector("img") : el;
+  getImgElement(e) {
+    return this.isPictureElement(e) ? e.querySelector("img") : e;
   }
-  async setDefaultPhoto(el) {
+  async setDefaultPhoto(e) {
     if (this.options.noUseErrorPhoto)
       return;
-    const errorPhoto = this.options.errorPhoto ?? await this.loadErrorPhoto();
-    const sourceElements = el.querySelectorAll("source");
-    if (sourceElements.length > 0) {
-      for await (const source of sourceElements) {
-        source.srcset = errorPhoto;
-      }
-    } else {
-      this.setImgSrc(el, errorPhoto);
+    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));
     }
   }
-  addEventListenerToImg(el) {
-    const imgElement = this.getImgElement(el);
-    imgElement.addEventListener("load", () => this.onImgLoadedCallback(el), {
-      once: true
-    });
-    imgElement.addEventListener("error", (err) => this.onImgErrorCallback(el, err), { once: true });
-  }
-  async loadImage(el, binding) {
-    this.imageIsLoading(el);
-    if (this.isPictureElement(el)) {
-      this.addEventListenerToImg(el);
-      await this.setPictureSourceUrls(el);
-    } else {
-      const imageUrl = this.getImageUrl(el, binding);
-      if (!imageUrl)
-        return this.imageHasError(el);
-      if (this.hasBgImgMode(binding)) {
-        el.style.backgroundImage = `url('${imageUrl}')`;
-        this.imageIsLoaded(el);
-      } else {
-        this.addEventListenerToImg(el);
-        this.setImgSrc(el, imageUrl);
-      }
-    }
+  setImgSrc(e, t) {
+    const s = this.getImgElement(e);
+    s.src = t;
   }
-  setImgSrc(el, src) {
-    const imgElement = this.getImgElement(el);
-    imgElement.src = src;
-  }
-  handleIntersectionObserver(el, binding, entries, observer) {
-    var _a, _b;
-    this.observers.push(observer);
-    for (const entry of entries) {
-      if (entry.isIntersecting) {
-        (_b = (_a = this.options).onIntersecting) == null ? void 0 : _b.call(_a, entry.target);
-        if (this.options.observerOnce) {
-          observer.unobserve(el);
-        }
-        if (this.options.loadOnce && this.hasImgLoaded)
+  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(el, binding);
+        this.loadImage(e, t);
       }
-    }
   }
-  createObserver(el, binding) {
-    const observerCallback = (entries, intersectionObserver) => {
-      this.handleIntersectionObserver(el, binding, entries, intersectionObserver);
-    };
-    const observerOptions = this.options.observerOptions;
-    const observer = new IntersectionObserver(observerCallback, observerOptions);
-    observer.observe(el);
-  }
-  async imageHandler(el, binding, type) {
-    if (type === "update") {
-      for await (const observer of this.observers)
-        observer.unobserve(el);
-    }
-    if (window.IntersectionObserver) {
-      this.createObserver(el, binding);
-    } else {
-      this.loadImage(el, binding);
-    }
+  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(el, binding, type) {
+  async bindUpdateHandler(e, t, s) {
     if (this.options.noPhoto)
-      return this.imageHasNoPhoto(el);
-    await this.imageHandler(el, binding, type);
+      return this.imageHasNoPhoto(e);
+    await this.imageHandler(e, t, s);
   }
-  async add(el, binding) {
-    if (this.hasBgImgMode(binding) && this.isPictureElement(el)) {
+  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(el), 0);
-    if (!el.getAttribute("src"))
-      this.setImgSrc(el, EMPTY_PHOTO);
-    await this.bindUpdateHandler(el, binding, "bind");
-  }
-  async update(el, binding) {
-    if (binding.value !== binding.oldValue) {
-      this.hasImgLoaded = false;
-      this.removeAllStateClasses(el);
-      await this.bindUpdateHandler(el, binding, "update");
-    }
+    setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, $), await this.bindUpdateHandler(e, t, "bind");
   }
-  remove(el, binding) {
-    this.hasImgLoaded = false;
-    if (this.hasBgImgMode(binding))
-      el.style.backgroundImage = "";
-    this.removeAllStateClasses(el);
-    for (const observer of this.observers)
-      observer.unobserve(el);
+  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 instance;
-const vLazyImg = {
-  created(el, binding) {
-    const options = typeof binding.value === "object" ? binding.value : {};
-    instance = new LazyImg(options);
-    instance.add(el, binding);
+let f;
+const D = {
+  created(o, e) {
+    const t = typeof e.value == "object" ? e.value : {};
+    f = new q(t), f.add(o, e);
   },
-  updated(el, binding) {
-    instance.update(el, binding);
+  updated(o, e) {
+    f.update(o, e);
   },
-  unmounted(el, binding) {
-    instance.remove(el, binding);
+  unmounted(o, e) {
+    f.remove(o, e);
   }
-};
-const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" };
-const _hoisted_2 = ["alt"];
-const _hoisted_3 = {
+}, G = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, V = ["alt"], Z = {
   key: 0,
   class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
-};
-const _hoisted_4 = { class: "maz-text-2xl maz-text-white" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, F = { class: "maz-text-2xl maz-text-white" }, W = /* @__PURE__ */ B({
   __name: "MazGallery",
   props: {
     /**
@@ -647,181 +473,149 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     /** Images count shown (max: 5) */
     imagesShownCount: { type: Number, default: 5 },
     /** Remove transparent layer with the remain count (ex: +2) */
-    noRemaining: { type: Boolean, default: false },
+    noRemaining: { type: Boolean, default: !1 },
     /** Height of gallery */
     height: { type: [Number, String], default: 150 },
     /** Remove default height */
-    noHeight: { type: Boolean, default: false },
+    noHeight: { type: Boolean, default: !1 },
     /** Width of gallery */
     width: { type: [Number, String], default: "100%" },
     /** Remove default width */
-    noWidth: { type: Boolean, default: false },
+    noWidth: { type: Boolean, default: !1 },
     /** Disable the border radius of the gallery */
-    noRadius: { type: Boolean, default: false },
+    noRadius: { type: Boolean, default: !1 },
     /** Disable full size display when clicking on image */
-    noZoom: { type: Boolean, default: false },
+    noZoom: { type: Boolean, default: !1 },
     /** Layer with photography icon when no images is provided */
-    hasEmptyLayer: { type: Boolean, default: true },
+    hasEmptyLayer: { type: Boolean, default: !0 },
     /** Lazy load image - if false, images are directly loaded */
-    lazy: { type: Boolean, default: true },
+    lazy: { type: Boolean, default: !0 },
     /** Disable blur effect on image hover */
-    blur: { type: Boolean, default: true },
+    blur: { type: Boolean, default: !0 },
     /** Disable scale animation effect on image hover */
-    scale: { type: Boolean, default: true },
+    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(__props) {
-    useCssVars((_ctx) => ({
-      "7a2c056e": __props.separatorColor
+  setup(o) {
+    S((n) => ({
+      "7a2c056e": o.separatorColor
     }));
-    const NoPhotographyIcon = defineAsyncComponent(() => import("./chunks/no-photography-b0d08d6f.mjs"));
-    const props = __props;
-    onBeforeMount(() => {
-      if (props.imagesShownCount > 5)
-        console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
+    const e = O(() => import("./chunks/no-photography-be94ddda.mjs")), t = o;
+    M(() => {
+      t.imagesShownCount > 5 && console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
     });
-    const sizeStyle = computed(() => {
-      const noWidth = props.noWidth;
-      const width = props.width;
-      const noHeight = props.noHeight;
-      const height = props.height;
+    const s = p(() => {
+      const n = t.noWidth, h = t.width, d = t.noHeight, r = t.height;
       return {
-        ...noWidth ? {} : {
-          flex: "0 0 " + typeof width === "number" ? `${width}px` : width,
-          width: typeof width === "number" ? `${width}px` : width
+        ...n ? {} : {
+          flex: "0 0 " + typeof h == "number" ? `${h}px` : h,
+          width: typeof h == "number" ? `${h}px` : h
         },
-        ...noHeight ? {} : {
-          height: typeof height === "number" ? `${height}px` : `${height}`,
-          minHeight: typeof height === "number" ? `${height}px` : `${height}`
+        ...d ? {} : {
+          height: typeof r == "number" ? `${r}px` : `${r}`,
+          minHeight: typeof r == "number" ? `${r}px` : `${r}`
         }
       };
-    });
-    const imagesCount = computed(() => {
-      return props.imagesShownCount <= 5 ? props.imagesShownCount : 5;
-    });
-    const numberImagesRemaining = computed(() => {
-      return props.images.length - (props.images.length < imagesCount.value ? props.images.length : imagesCount.value);
-    });
-    const imagesNormalized = computed(() => {
-      return props.images.map(
-        (image) => typeof image === "object" ? { ...image, thumbnail: image.thumbnail ?? image.src } : { src: image, thumbnail: image, alt: void 0 }
-      );
-    });
-    const imagesShown = computed(() => {
-      return imagesNormalized.value.slice(0, imagesCount.value);
-    });
-    const imagesHidden = computed(() => {
-      return imagesNormalized.value.slice(imagesCount.value, props.images.length);
-    });
-    const shouldHaveRemainingLayer = (index) => {
-      return numberImagesRemaining.value && index + 1 === imagesShown.value.length && !props.noRemaining;
-    };
-    return (_ctx, _cache) => {
-      return __props.images.length > 0 || __props.hasEmptyLayer ? (openBlock(), createElementBlock(
-        "div",
-        {
-          key: 0,
-          class: normalizeClass(["m-gallery maz-flex", { "maz-rounded": !__props.noRadius }]),
-          style: normalizeStyle([sizeStyle.value])
-        },
-        [
-          createElementVNode("section", _hoisted_1, [
-            (openBlock(true), createElementBlock(
-              Fragment,
-              null,
-              renderList(imagesShown.value, (image, i) => {
-                return openBlock(), createElementBlock(
-                  "figure",
-                  {
-                    key: i,
-                    class: normalizeClass(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${i + 1}`]])
-                  },
-                  [
-                    withDirectives(createElementVNode("img", {
-                      class: "m-gallery__item__image maz-flex-1",
-                      src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
-                      alt: image.alt,
-                      loading: "lazy"
-                    }, null, 8, _hoisted_2), [
-                      [unref(vLazyImg), { src: image.thumbnail, disabled: !__props.lazy }, "bg-image"],
-                      [unref(vZoomImg), {
-                        src: image.src,
-                        alt: image.alt,
-                        disabled: __props.noZoom || shouldHaveRemainingLayer(i),
-                        blur: __props.blur,
-                        scale: __props.scale
-                      }]
-                    ]),
-                    shouldHaveRemainingLayer(i) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
-                      createElementVNode(
-                        "span",
-                        _hoisted_4,
-                        "+" + toDisplayString(numberImagesRemaining.value),
-                        1
-                        /* TEXT */
-                      )
-                    ])), [
-                      [unref(vZoomImg), {
-                        src: image.src,
-                        alt: image.alt,
-                        disabled: __props.noZoom,
-                        blur: false,
-                        scale: __props.scale
-                      }]
-                    ]) : createCommentVNode("v-if", true)
-                  ],
-                  2
-                  /* CLASS */
-                );
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            )),
-            __props.hasEmptyLayer && __props.images.length === 0 ? (openBlock(), createElementBlock(
-              "div",
+    }), 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", G, [
+          (u(!0), g(
+            x,
+            null,
+            C(c.value, (d, r) => (u(), g(
+              "figure",
               {
-                key: 0,
-                class: normalizeClass(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !__props.noRadius }]),
-                style: normalizeStyle([sizeStyle.value])
+                key: r,
+                class: y(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${r + 1}`]])
               },
               [
-                createVNode(unref(NoPhotographyIcon), { class: "maz-h-8 maz-w-8" })
+                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, V), [
+                  [v(D), { 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", Z, [
+                  b(
+                    "span",
+                    F,
+                    "+" + 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)
               ],
-              6
-              /* CLASS, STYLE */
-            )) : createCommentVNode("v-if", true)
-          ]),
-          (openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(imagesHidden.value, (image, i) => {
-              return withDirectives((openBlock(), createElementBlock("div", {
-                key: i,
-                class: "m-gallery__hidden"
-              })), [
-                [unref(vZoomImg), { src: image.src, disabled: __props.noZoom }]
-              ]);
-            }),
+              2
+              /* CLASS */
+            ))),
             128
             /* KEYED_FRAGMENT */
-          ))
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : createCommentVNode("v-if", true);
-    };
+          )),
+          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 MazGallery_vue_vue_type_style_index_0_scoped_4e6fbc0c_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e6fbc0c"]]);
+const Q = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [s, a] of e)
+    t[s] = a;
+  return t;
+}, X = /* @__PURE__ */ Q(W, [["__scopeId", "data-v-4e6fbc0c"]]);
 export {
-  MazGallery as default
+  X as default
 };