maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazGallery-b2dc4286.mjs

@@ -1,821 +0,0 @@
-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 "../assets/MazGallery.css";
-import { defineComponent, useCssVars, defineAsyncComponent, onBeforeMount, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createCommentVNode, createVNode } from "vue";
-import { _ as _export_sfc } from "./MazCard-4331dca0.mjs";
-const style = `
-.maz-zoom-img {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 1rem;
-  z-index: 1050;
-  background-color: hsla(238, 15%, 40%, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.maz-zoom-img,
-.maz-zoom-img * {
-  box-sizing: border-box;
-}
-
-.maz-zoom-img .maz-zoom-img__wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 0;
-  min-height: 0;
-  max-width: 100%;
-  max-height: 100%;
-  transition: all 300ms ease-in-out;
-  opacity: 0;
-  transform: scale(0.5);
-}
-
-.maz-zoom-img.maz-animate .maz-zoom-img__wrapper {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.maz-zoom-img.maz-animate .maz-zoom-img__loader {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: hsla(238, 15%, 40%, 0.7);
-  border-radius: 1rem;
-  z-index: 2;
-  min-width: 60px;
-  min-height: 60px;
-}
-.maz-zoom-img.maz-animate .maz-zoom-img__loader[hidden] {
-  display: none;
-}
-
-@-webkit-keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.maz-zoom-img.maz-animate .maz-zoom-img__loader__svg {
-  animation: spin .6s linear infinite;
-}
-
-.maz-zoom-img img {
-  max-width: 100%;
-  max-height: 100%;
-  min-width: 0;
-  border-radius: 1rem;
-}
-
-.maz-zoom-img .maz-zoom-btn {
-  margin: 0 auto;
-  border: none;
-  background-color: hsla(0, 0%, 7%, 0.5);
-  box-shadow: 0 0 0.5rem 0 hsla(0, 0%, 0%, 0.2);
-  height: 2.2rem;
-  min-height: 2.2rem;
-  width: 2.2rem;
-  min-width: 2.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2.2rem;
-  cursor: pointer;
-  flex: 0 0 auto;
-  outline: none;
-}
-
-.maz-zoom-img .maz-zoom-btn svg {
-  fill: white;
-}
-
-.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 1;
-}
-
-.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--previous {
-  position: absolute;
-  left: 0.5rem;
-  z-index: 1;
-}
-
-.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--next {
-  position: absolute;
-  right: 0.5rem;
-  z-index: 1;
-}
-
-.maz-zoom-img .maz-zoom-btn:hover {
-  background-color: hsl(0, 0%, 0%);
-}`;
-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-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(
-      "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");
-    }, 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"
-        /* 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"
-      /* OPEN */
-    );
-    nextInstance.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)
-      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-photography-7f2be516.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-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 />"'
-          );
-        }
-      }
-    } 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);
-  }
-};
-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" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MazGallery",
-  props: {
-    /**
-     *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
-     * */
-    images: {
-      type: Array,
-      default: () => []
-    },
-    /** Images count shown (max: 5) */
-    imagesShownCount: { type: Number, default: 5 },
-    /** Remove transparent layer with the remain count (ex: +2) */
-    noRemaining: { type: Boolean, default: false },
-    /** Height of gallery */
-    height: { type: [Number, String], default: 150 },
-    /** Remove default height */
-    noHeight: { type: Boolean, default: false },
-    /** Width of gallery */
-    width: { type: [Number, String], default: "100%" },
-    /** Remove default width */
-    noWidth: { type: Boolean, default: false },
-    /** Disable the border radius of the gallery */
-    noRadius: { type: Boolean, default: false },
-    /** Disable full size display when clicking on image */
-    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 },
-    /** Disable blur effect on image hover */
-    blur: { type: Boolean, default: true },
-    /** Disable scale animation effect on image hover */
-    scale: { type: Boolean, default: true },
-    /** 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
-    }));
-    const NoPhotographyIcon = defineAsyncComponent(() => import("./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 sizeStyle = computed(() => {
-      const noWidth = props.noWidth;
-      const width = props.width;
-      const noHeight = props.noHeight;
-      const height = props.height;
-      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, 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",
-              {
-                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])
-              },
-              [
-                createVNode(unref(NoPhotographyIcon), { class: "maz-h-8 maz-w-8" })
-              ],
-              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 }]
-              ]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : createCommentVNode("v-if", true);
-    };
-  }
-});
-const MazGallery_vue_vue_type_style_index_0_scoped_4e6fbc0c_lang = "";
-const MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e6fbc0c"]]);
-export {
-  MazGallery as default
-};