maz-ui 3.22.3 → 3.23.0

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, 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,690 +126,496 @@ 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 lazyImgArgument = "bg-image";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, F = { class: "maz-text-2xl maz-text-white" }, W = /* @__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' }]`
+    /**
+     *  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)
+    /** Images count shown (max: 5) */
     imagesShownCount: { type: Number, default: 5 },
-    // Remove transparent layer with the remain count (ex: +2)
-    noRemaining: { type: Boolean, default: false },
-    // Height of gallery
+    /** 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: false },
-    // Width of gallery
+    /** Remove default height */
+    noHeight: { type: Boolean, default: !1 },
+    /** Width of gallery */
     width: { type: [Number, String], default: "100%" },
-    // Remove default width
-    noWidth: { type: Boolean, default: false },
-    // Add the default border radius to gallery
-    noRadius: { type: Boolean, default: false },
-    // Add feature to show the carousel images on click
-    noZoom: { type: Boolean, default: false },
-    // Layer with photography icon when no images is provided
-    hasEmptyLayer: { type: Boolean, default: true },
-    // Lazy load image - if false, images are directly loaded
-    lazy: { type: Boolean, default: true },
-    // Blur animation effect on image hover
-    blur: { type: Boolean, default: true },
-    // Scale animation effect on image hover
-    scale: { type: Boolean, default: true }
+    /** 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(__props) {
-    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');
+  setup(o) {
+    S((n) => ({
+      "7a2c056e": o.separatorColor
+    }));
+    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 { height, width, noWidth, noHeight } = props;
+    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 }, lazyImgArgument],
-                      [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(["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_3710617f_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-3710617f"]]);
+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
 };