maz-ui 3.4.5 → 3.6.1

package/components/MazGallery.mjs

@@ -0,0 +1,948 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var a=document.createElement("style");a.appendChild(document.createTextNode(".m-gallery[data-v-680a27a0]{position:relative;overflow:hidden}.m-gallery__hidden[data-v-680a27a0]{display:none}.m-gallery__item[data-v-680a27a0]{position:absolute;top:0px;margin:0;height:50%;width:100%;overflow:hidden;border-left-width:2px;border-color:transparent;padding:0}.m-gallery__item--1[data-v-680a27a0]{left:0;height:100%}.m-gallery__item--1[data-v-680a27a0]:not(:last-child){width:50%}.m-gallery__item--2[data-v-680a27a0]{left:50%;width:50%;height:50%}.m-gallery__item--2[data-v-680a27a0]:last-child{height:100%}.m-gallery__item--2[data-v-680a27a0]:nth-last-child(4){width:25%}.m-gallery__item--3[data-v-680a27a0]{top:50%;left:50%;width:25%}.m-gallery__item--3[data-v-680a27a0]:last-child{width:50%}.m-gallery__item--3[data-v-680a27a0]:nth-last-child(3){top:0;left:75%}.m-gallery__item--4[data-v-680a27a0]{border-top-width:2px;border-color:transparent;top:50%;left:50%;width:25%}.m-gallery__item--4[data-v-680a27a0]:last-child{left:75%;width:25%}.m-gallery__item--5[data-v-680a27a0]{border-top-width:2px;border-color:transparent;top:50%;left:75%;width:25%}.m-gallery__item[data-v-680a27a0]:first-child{border-left:0}.m-gallery__item--3[data-v-680a27a0]:last-child,.m-gallery__item--3[data-v-680a27a0]:nth-last-child(2),.m-gallery__item--4[data-v-680a27a0]:last-child,.m-gallery__item--5[data-v-680a27a0]{border-top-width:2px;border-color:transparent}.m-gallery__item__image[data-v-680a27a0]{height:100%;max-width:100%;width:100%;background-position:center center;background-size:cover;background-repeat:no-repeat;background-color:#0000007f}.m-gallery__remaining-layer[data-v-680a27a0]{position:absolute;top:0;bottom:0;right:0;left:0}.m-gallery__remaining-layer a span[data-v-680a27a0]{color:#fff;font-size:2rem}")),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+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;
+};
+import { inject, defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, mergeProps, createCommentVNode, nextTick, onBeforeMount, resolveComponent, resolveDirective, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, toDisplayString, createVNode } from "vue";
+const style = `
+.maz-zoom-img {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2.5rem;
+  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%);
+}`;
+const svgs = {
+  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
+    });
+    __publicField(this, "mouseEnterListener");
+    __publicField(this, "mouseLeaveListener");
+    __publicField(this, "renderPreviewListener");
+    if (!binding.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) {
+      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) {
+    return {
+      ...this.defaultOptions,
+      ...typeof binding.value === "object" ? binding.value : { src: binding.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-src", this.options.src);
+    if (this.options.alt)
+      el.setAttribute("data-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-src");
+    el.removeAttribute("data-alt");
+    el.style.cursor = "";
+  }
+  renderPreview(el, options) {
+    el.classList.add("maz-is-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");
+    }, 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;
+    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]);
+      }
+    }
+  }
+  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)";
+  }
+  keydownLister(e) {
+    e.preventDefault();
+    if (e.key === "Escape" || e.key === " ") {
+      this.closePreview();
+    }
+    if (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;
+  }
+  closePreview() {
+    const container = document.querySelector(
+      "#MazImgPreviewFullsize"
+    );
+    const style2 = document.querySelector("#MazPreviewStyle");
+    const instance2 = document.querySelector(
+      ".maz-zoom-img-instance.maz-is-open"
+    );
+    if (instance2)
+      instance2.classList.remove("maz-is-open");
+    if (container)
+      container.classList.remove("maz-animate");
+    this.keyboardEventHandler(false);
+    setTimeout(() => {
+      if (container)
+        container.remove();
+      if (style2)
+        style2.remove();
+    }, 300);
+  }
+  getNewInstanceIndex(newInstanceIndex) {
+    return newInstanceIndex < 0 ? this.allInstances.length - 1 : newInstanceIndex >= this.allInstances.length ? 0 : newInstanceIndex;
+  }
+  nextPreviousImage(isNext) {
+    const selectNextInstance = isNext;
+    const currentInstance = 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);
+      }
+    }
+  }
+  useNextInstance(currentInstance, nextInstance) {
+    currentInstance.classList.remove("maz-is-open");
+    nextInstance.classList.add("maz-is-open");
+    const src = nextInstance.getAttribute("data-src");
+    const alt = nextInstance.getAttribute("data-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)
+      return document.addEventListener("keydown", this.keydownHandler);
+    document.removeEventListener("keydown", this.keydownHandler);
+  }
+  imgEventHandler(add) {
+    if (add)
+      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);
+  },
+  updated(_el, binding) {
+    instance$1.update(binding);
+  },
+  unmounted(el) {
+    instance$1.remove(el);
+  }
+};
+const EMPTY_PHOTO = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const DEFAULT_OPTIONS = {
+  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,
+  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);
+  }
+  async loadErrorPhoto() {
+    const { default: photo } = await import("./no_photo-410a8f01.mjs");
+    return photo;
+  }
+  buildOptions(opts) {
+    return {
+      ...this.defaultOptions,
+      ...opts,
+      observerOptions: {
+        ...this.defaultOptions.observerOptions,
+        ...opts.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-src");
+    if (dataSrc)
+      return dataSrc;
+    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-srcset");
+        if (srcSet) {
+          source.srcset = srcSet;
+        } else {
+          console.warn(
+            '[maz-ui][MazLazyImg] the "[data-srcset]" attribute is not provided on "<source />"'
+          );
+        }
+      }
+    } else {
+      console.warn(
+        '[maz-ui][MazLazyImg] No "<source />" elements provided into the "<picture />" element'
+      );
+      this.imageHasError(el);
+    }
+  }
+  hasBgImgMode(binding) {
+    return binding.arg === "bg-image";
+  }
+  isPictureElement(el) {
+    return el instanceof HTMLPictureElement;
+  }
+  getImgElement(el) {
+    const isPictureElement = this.isPictureElement(el);
+    return isPictureElement ? el.querySelector("img") : el;
+  }
+  async setDefaultPhoto(el) {
+    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);
+    }
+  }
+  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(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)
+          return;
+        this.loadImage(el, binding);
+      }
+    }
+  }
+  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);
+    }
+  }
+  async bindUpdateHandler(el, binding, type) {
+    if (this.options.noPhoto)
+      return this.imageHasNoPhoto(el);
+    await this.imageHandler(el, binding, type);
+  }
+  async add(el, binding) {
+    if (this.hasBgImgMode(binding) && this.isPictureElement(el)) {
+      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");
+    }
+  }
+  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);
+    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);
+  },
+  updated(el, binding) {
+    instance.update(el, binding);
+  },
+  unmounted(el, binding) {
+    instance.remove(el, binding);
+  }
+};
+function injectStrict(key, fallback) {
+  const resolved = inject(key, fallback);
+  if (!resolved) {
+    throw new Error(`[maz-ui](injectStrict) Could not resolve ${key}`);
+  }
+  return resolved;
+}
+const _hoisted_1$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MazIcon",
+  props: {
+    src: { type: String, default: void 0 },
+    path: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    size: { type: String, default: "1.5rem" },
+    title: { type: String, default: void 0 },
+    transformSource: {
+      type: Function,
+      default: (svg) => svg
+    }
+  },
+  emits: ["loaded", "unloaded", "error"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const cache = {};
+    const svgElSource = ref();
+    const svgElem = ref();
+    const getMazIconPath = () => {
+      try {
+        return injectStrict("mazIconPath");
+      } catch {
+        return void 0;
+      }
+    };
+    const iconPath = computed(() => props.path ?? getMazIconPath());
+    const fullSrc = computed(() => {
+      if (props.src) {
+        return props.src;
+      } else if (iconPath.value) {
+        return `${iconPath.value}/${props.name}.svg`;
+      } else {
+        return `/${props.name}.svg`;
+      }
+    });
+    onMounted(() => {
+      if (!props.name && !props.src) {
+        console.error(
+          '[maz-ui](MazIcon) you should provide "name" or "src" as prop'
+        );
+      }
+    });
+    const setTitle = (svg, title) => {
+      const titleTags = svg.querySelectorAll("title");
+      if (titleTags.length > 0) {
+        titleTags[0].textContent = title;
+      } else {
+        const titleEl = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "title"
+        );
+        titleEl.textContent = title;
+        svg.append(titleEl);
+      }
+    };
+    const filterAttrs = (attrs) => {
+      return Object.keys(attrs).reduce((result, key) => {
+        if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== void 0) {
+          result[key] = attrs[key];
+        }
+        return result;
+      }, {});
+    };
+    const getSvgAttrs = (svgEl) => {
+      const svgAttrs = {};
+      const attrs = svgEl.attributes;
+      if (!attrs) {
+        return svgAttrs;
+      }
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        svgAttrs[attrs[i].name] = attrs[i].value;
+      }
+      return svgAttrs;
+    };
+    const getSvgContent = (svgEl) => {
+      let svgElNode = svgEl.cloneNode(true);
+      svgElNode = props.transformSource(svgEl);
+      if (props.title) {
+        setTitle(svgElNode, props.title);
+      }
+      return svgEl.innerHTML;
+    };
+    const getSource = async (src) => {
+      if (!cache[src]) {
+        cache[src] = download(src);
+      }
+      try {
+        svgElSource.value = await cache[src];
+        await nextTick();
+        emits("loaded", svgElem.value);
+      } catch (error) {
+        if (svgElSource.value) {
+          svgElSource.value = void 0;
+          emits("unloaded");
+        }
+        delete cache[src];
+        emits("error", error);
+      }
+    };
+    const download = (url) => {
+      return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.addEventListener("load", () => {
+          if (request.status >= 200 && request.status < 400) {
+            try {
+              const parser = new DOMParser();
+              const result = parser.parseFromString(
+                request.responseText,
+                "text/xml"
+              );
+              let svgEl = result.querySelectorAll("svg")[0];
+              if (svgEl) {
+                svgEl = props.transformSource(svgEl);
+                resolve(svgEl);
+              } else {
+                reject(new Error('Loaded file is not valid SVG"'));
+              }
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new Error("Error loading SVG"));
+          }
+        });
+        request.addEventListener("error", () => reject());
+        request.send();
+      });
+    };
+    watchEffect(() => getSource(fullSrc.value));
+    return (_ctx, _cache) => {
+      return svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
+        key: 0,
+        ref_key: "svgElem",
+        ref: svgElem,
+        width: "1em",
+        height: "1em"
+      }, {
+        ...getSvgAttrs(svgElSource.value),
+        ...filterAttrs(_ctx.$attrs)
+      }, {
+        style: `font-size: ${__props.size}`,
+        innerHTML: getSvgContent(svgElSource.value)
+      }), null, 16, _hoisted_1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+const NoPhotographyIcon = "data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0iY3VycmVudENvbG9yIgo+CiAgPGc+CiAgICA8cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIC8+CiAgICA8Zz4KICAgICAgPHBhdGgKICAgICAgICBkPSJNOC45LDYuMDdMNy40OCw0LjY2TDksM2g2bDEuODMsMkgyMGMxLjEsMCwyLDAuOSwyLDJ2MTJjMCwwLjA1LTAuMDEsMC4xLTAuMDIsMC4xNkwyMCwxNy4xN1Y3aC00LjA1bC0xLjgzLTJIOS44OCBMOC45LDYuMDd6IE0yMC40OSwyMy4zMUwxOC4xNywyMUg0Yy0xLjEsMC0yLTAuOS0yLTJWN2MwLTAuNTksMC4yNy0xLjEyLDAuNjgtMS40OWwtMi0yTDIuMSwyLjFsMTkuOCwxOS44TDIwLjQ5LDIzLjMxeiBNOS4xOSwxMi4wMkM5LjA4LDEyLjMzLDksMTIuNjUsOSwxM2MwLDEuNjYsMS4zNCwzLDMsM2MwLjM1LDAsMC42Ny0wLjA4LDAuOTgtMC4xOUw5LjE5LDEyLjAyeiBNMTYuMTcsMTlsLTEuNjgtMS42OCBDMTMuNzYsMTcuNzUsMTIuOTEsMTgsMTIsMThjLTIuNzYsMC01LTIuMjQtNS01YzAtMC45MSwwLjI1LTEuNzYsMC42OC0yLjQ5TDQuMTcsN0g0djEySDE2LjE3eiBNMTQuODEsMTEuOThsMi4wNywyLjA3IEMxNi45NiwxMy43MSwxNywxMy4zNiwxNywxM2MwLTIuNzYtMi4yNC01LTUtNWMtMC4zNiwwLTAuNzEsMC4wNC0xLjA2LDAuMTJsMi4wNywyLjA3QzEzLjg1LDEwLjQ5LDE0LjUxLDExLjE1LDE0LjgxLDExLjk4eiIKICAgICAgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=";
+const _sfc_main = defineComponent({
+  components: { MazIcon: _sfc_main$1 },
+  directives: {
+    "zoom-img": vZoomImg,
+    "lazy-img": vLazyImg
+  },
+  props: {
+    images: {
+      type: Array,
+      default: () => []
+    },
+    imagesShownCount: { type: Number, default: 5 },
+    noRemaining: { type: Boolean, default: false },
+    height: { type: [Number, String], default: 150 },
+    noHeight: { type: Boolean, default: false },
+    width: { type: [Number, String], default: "100%" },
+    noWidth: { type: Boolean, default: false },
+    noRadius: { type: Boolean, default: false },
+    noZoom: { type: Boolean, default: false },
+    hasEmptyLayer: { type: Boolean, default: true },
+    lazy: { type: Boolean, default: true },
+    blur: { type: Boolean, default: true },
+    scale: { type: Boolean, default: true }
+  },
+  setup(props) {
+    onBeforeMount(() => {
+      if (props.imagesShownCount > 5)
+        console.warn(
+          '[MazUI](m-gallery) The maximum of "images-shown-count" is 5'
+        );
+    });
+    const sizeStyle = computed(() => {
+      const { height, width, noWidth, noHeight } = props;
+      return {
+        ...noWidth ? {} : {
+          flex: "0 0 " + typeof width === "number" ? `${width}px` : width,
+          width: typeof width === "number" ? `${width}px` : width
+        },
+        ...noHeight ? {} : {
+          height: typeof height === "number" ? `${height}px` : `${height}`,
+          minHeight: typeof height === "number" ? `${height}px` : `${height}`
+        }
+      };
+    });
+    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 : { src: 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 {
+      sizeStyle,
+      imagesCount,
+      shouldHaveRemainingLayer,
+      imagesShown,
+      numberImagesRemaining,
+      imagesHidden,
+      NoPhotographyIcon
+    };
+  }
+});
+const MazGallery_vue_vue_type_style_index_0_scoped_680a27a0_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" };
+const _hoisted_2 = ["alt"];
+const _hoisted_3 = {
+  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" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MazIcon = resolveComponent("MazIcon");
+  const _directive_zoom_img = resolveDirective("zoom-img");
+  const _directive_lazy_img = resolveDirective("lazy-img");
+  return _ctx.images.length > 0 || _ctx.hasEmptyLayer ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(["m-gallery maz-flex", { "maz-rounded-xl": !_ctx.noRadius }]),
+    style: normalizeStyle([_ctx.sizeStyle])
+  }, [
+    createElementVNode("section", _hoisted_1, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.imagesShown, (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
+          }, null, 8, _hoisted_2), [
+            [_directive_zoom_img, {
+              src: image.src,
+              alt: image.alt,
+              disabled: _ctx.noZoom || _ctx.shouldHaveRemainingLayer(i),
+              blur: _ctx.blur,
+              scale: _ctx.scale
+            }],
+            [_directive_lazy_img, { src: image.src, disabled: !_ctx.lazy }, "bg-image"]
+          ]),
+          _ctx.shouldHaveRemainingLayer(i) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("span", _hoisted_4, "+" + toDisplayString(_ctx.numberImagesRemaining), 1)
+          ])), [
+            [_directive_zoom_img, {
+              src: image.src,
+              alt: image.alt,
+              disabled: _ctx.noZoom,
+              blur: false,
+              scale: _ctx.scale
+            }]
+          ]) : createCommentVNode("", true)
+        ], 2);
+      }), 128)),
+      _ctx.hasEmptyLayer && _ctx.images.length === 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["flex-center maz-flex maz-w-full maz-bg-color-light maz-text-normal", { "maz-rounded-xl": !_ctx.noRadius }]),
+        style: normalizeStyle([_ctx.sizeStyle])
+      }, [
+        createVNode(_component_MazIcon, {
+          src: _ctx.NoPhotographyIcon,
+          size: "2rem"
+        }, null, 8, ["src"])
+      ], 6)) : createCommentVNode("", true)
+    ]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.imagesHidden, (image, i) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        key: i,
+        class: "m-gallery__hidden"
+      })), [
+        [_directive_zoom_img, { src: image.src, disabled: _ctx.noZoom }]
+      ]);
+    }), 128))
+  ], 6)) : createCommentVNode("", true);
+}
+const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-680a27a0"]]);
+export {
+  MazGallery as default
+};