maz-ui 4.0.0-alpha.5 → 4.0.0-beta.1

package/dist/chunks/fullscreen-img.directive.CEBhPyiD.mjs

@@ -1,329 +0,0 @@
-import '../assets/fullscreen-img.Dnt1uj_5.css';var ue = Object.defineProperty;
-var ce = (l, e, s) => e in l ? ue(l, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[e] = s;
-var f = (l, e, s) => ce(l, typeof e != "symbol" ? e + "" : e, s);
-import { mount as me } from "../helpers/mountComponent.mjs";
-import { defineComponent as de, defineAsyncComponent as X, ref as u, reactive as ve, computed as j, watch as fe, onMounted as pe, onBeforeUnmount as he, openBlock as H, createElementBlock as $, withModifiers as h, withKeys as ge, createVNode as b, unref as _, createCommentVNode as Y, createElementVNode as B, normalizeClass as ye, withDirectives as we, vShow as Le } from "vue";
-import Ee from "../components/MazSpinner.mjs";
-import { checkAvailability as Ie } from "../helpers/checkAvailability.mjs";
-import { _ as be } from "./_plugin-vue_export-helper.CHgC5LLL.mjs";
-const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["src", "alt"], Ce = /* @__PURE__ */ de({
-  __name: "MazFullscreenImg",
-  props: {
-    src: {},
-    clickedElementBounds: { default: void 0 },
-    offset: { default: void 0 },
-    animation: { default: () => ({
-      duration: 300,
-      easing: "ease-in-out"
-    }) },
-    openInstanceClass: { default: "m-fullscreen-img-instance" },
-    clickedElement: {},
-    destroy: { type: Function, default: void 0 },
-    alt: { default: void 0 },
-    zoom: { type: Boolean, default: !0 }
-  },
-  emits: ["close", "previous", "next", "before-close"],
-  setup(l, { emit: e }) {
-    const s = l, r = e, k = X(() => import("./x-mark.DTWA3lfG.mjs")), g = X(() => import("./chevron-left.njfuF_Vt.mjs")), A = u(!1), y = u(!1), w = u(!1), C = u(!1), c = u(!1), v = ve({
-      running: !1,
-      ended: !1
-    }), z = u(s.clickedElement), G = j(() => s.clickedElement.getBoundingClientRect()), L = u(), P = u(s.src), M = u(s.alt), W = u(), a = u(), E = u(!0), J = j(() => ({
-      "--is-zoomed": c.value,
-      "--invisible": E.value,
-      "--absolute": !c.value
-    }));
-    function Q() {
-      var t, n;
-      a.value && (L.value = ((t = a.value) == null ? void 0 : t.naturalWidth) > ((n = a.value) == null ? void 0 : n.naturalHeight)), A.value = !0, y.value = !1, w.value = !0;
-    }
-    fe(
-      w,
-      (t) => {
-        t && re();
-      },
-      { immediate: !0 }
-    );
-    function I() {
-      r("before-close"), ie();
-    }
-    function D(t) {
-      t.key === "Escape" && (t.preventDefault(), I()), (t.key === "ArrowLeft" || t.key === "ArrowRight") && (t.preventDefault(), O(t.key === "ArrowRight" ? "next" : "previous"));
-    }
-    function ee() {
-      document.documentElement.classList.add("--m-fullscreen-open");
-    }
-    function te() {
-      document.documentElement.classList.remove("--m-fullscreen-open");
-    }
-    function N() {
-      return [...document.querySelectorAll(".m-fullscreen-img-instance")];
-    }
-    function ne(t, n) {
-      return n < 0 ? t.length - 1 : n >= t.length ? 0 : n;
-    }
-    function se(t, n) {
-      t.classList.remove(s.openInstanceClass), n.classList.add(s.openInstanceClass);
-      const o = n.getAttribute("data-src"), i = n.getAttribute("data-alt");
-      M.value = i, P.value = o ?? P.value;
-    }
-    function O(t) {
-      E.value = !0;
-      const n = document.querySelector(
-        `.m-fullscreen-img-instance.${s.openInstanceClass}`
-      );
-      if (n) {
-        const o = N(), i = o.indexOf(n), m = t === "next" ? i + 1 : i - 1, d = o[ne(o, m)];
-        z.value = d, d && se(n, d), r(t), A.value = !1, y.value = !0, Ie(() => A.value === !0, () => {
-          E.value = !1, c.value ? R() : p();
-        }, {
-          expectedValue: !0,
-          interval: 100,
-          maxAttempts: 50
-        });
-      }
-    }
-    function R() {
-      const t = a.value;
-      if (!t) {
-        console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");
-        return;
-      }
-      t.style.removeProperty("max-width"), t.style.removeProperty("max-height"), t == null || t.style.removeProperty("top"), t == null || t.style.removeProperty("left"), L.value ? (t.style.height = "100vh", t.style.removeProperty("width")) : (t.style.width = "100vw", t.style.removeProperty("height"));
-    }
-    function oe() {
-      c.value ? (c.value = !c.value, p()) : (c.value = !c.value, R());
-    }
-    function V(t) {
-      var o;
-      v.running = !0, E.value = !1;
-      const n = (o = a.value) == null ? void 0 : o.animate(t, {
-        duration: s.animation.duration,
-        easing: s.animation.easing
-      });
-      if (!n) {
-        console.error("[maz-ui](vFullscreenImg) animation is not defined"), v.running = !1, v.ended = !0;
-        return;
-      }
-      return n;
-    }
-    function Z(t = s.offset ?? 0) {
-      const n = z.value.clientWidth || 1, o = z.value.clientHeight || 1, i = window.innerWidth, m = window.innerHeight, d = Math.min(
-        (i - 2 * t) / n,
-        (m - 2 * t) / o
-      ), S = (i - n * d) / 2, F = (m - o * d) / 2;
-      return {
-        centerX: S,
-        centerY: F,
-        width: n,
-        height: o,
-        scale: d
-      };
-    }
-    function q({ trigger: t }) {
-      const { width: n, height: o, scale: i, centerX: m, centerY: d } = Z(), { top: S, left: F, width: le, height: ae } = G.value, T = [
-        {
-          top: `${S}px`,
-          left: `${F}px`,
-          width: `${le}px`,
-          height: `${ae}px`,
-          opacity: 0
-        },
-        {
-          top: `${d}px`,
-          left: `${m}px`,
-          width: `${n * i}px`,
-          height: `${o * i}px`,
-          opacity: 1
-        }
-      ];
-      return {
-        frames: t === "open" ? T : T.reverse()
-      };
-    }
-    function p() {
-      const { height: t, width: n, scale: o } = Z(), i = L.value ? {
-        width: `${n * o}px`,
-        maxHeight: `${t * o}px`
-      } : {
-        height: `${t * o}px`,
-        maxWidth: `${n * o}px`
-      };
-      if (!a.value) {
-        console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");
-        return;
-      }
-      L.value ? (a.value.style.removeProperty("height"), a.value.style.removeProperty("maxHeight")) : (a.value.style.removeProperty("width"), a.value.style.removeProperty("maxWidth")), Object.assign(a.value.style, i);
-    }
-    function re() {
-      const { frames: t } = q({
-        trigger: "open"
-      }), n = V(t);
-      if (!n) {
-        console.error("[maz-ui](vFullscreenImg) open animation is not defined"), p();
-        return;
-      }
-      n.onfinish = () => {
-        p(), v.running = !1, v.ended = !0;
-      };
-    }
-    function ie() {
-      const { frames: t } = q({
-        trigger: "close"
-      }), n = V(t);
-      function o() {
-        var i, m;
-        r("close"), (i = W.value) == null || i.remove(), (m = s.destroy) == null || m.call(s), v.running = !1, v.ended = !0;
-      }
-      if (!n) {
-        console.error("[maz-ui](vFullscreenImg) close animation is not defined"), o();
-        return;
-      }
-      n.onfinish = o;
-    }
-    function K() {
-      c.value || p();
-    }
-    return pe(() => {
-      y.value = !0, document.addEventListener("keydown", D), window.addEventListener("resize", K), ee(), C.value = N().length > 1;
-    }), he(() => {
-      document.removeEventListener("keydown", D), window.removeEventListener("resize", K), te();
-    }), (t, n) => (H(), $("div", {
-      ref_key: "FullscreenImgElement",
-      ref: W,
-      role: "button",
-      class: "m-fullscreen-img m-reset-css",
-      tabindex: "0",
-      onClick: h(I, ["stop"]),
-      onKeypress: ge(h(I, ["prevent"]), ["esc"])
-    }, [
-      w.value && C.value ? (H(), $("button", {
-        key: 0,
-        type: "button",
-        class: "m-fullscreen-btn --next",
-        onClick: n[0] || (n[0] = h((o) => O("next"), ["stop"]))
-      }, [
-        b(_(g), { class: "maz-rotate-180" })
-      ])) : Y("", !0),
-      w.value && C.value ? (H(), $("button", {
-        key: 1,
-        type: "button",
-        class: "m-fullscreen-btn --previous",
-        onClick: n[1] || (n[1] = h((o) => O("previous"), ["stop"]))
-      }, [
-        b(_(g))
-      ])) : Y("", !0),
-      B("button", {
-        type: "button",
-        class: "m-fullscreen-btn --close",
-        onClick: I
-      }, [
-        b(_(k))
-      ]),
-      B("div", ke, [
-        B("img", {
-          ref_key: "ImgElement",
-          ref: a,
-          src: P.value,
-          alt: M.value ?? void 0,
-          tabindex: "0",
-          class: ye([J.value]),
-          onLoad: Q,
-          onClick: n[2] || (n[2] = h((o) => t.zoom && oe(), ["stop"]))
-        }, null, 42, Ae),
-        we(b(Ee, { class: "m-fullscreen-img-loader" }, null, 512), [
-          [Le, y.value]
-        ])
-      ])
-    ], 40, xe));
-  }
-}), ze = /* @__PURE__ */ be(Ce, [["__scopeId", "data-v-9d1598d9"]]), U = "m-fullscreen-is-open";
-class Pe {
-  constructor() {
-    f(this, "options");
-    f(this, "defaultOptions", {
-      scaleOnHover: !1,
-      blurOnHover: !1,
-      disabled: !1,
-      zoom: !0,
-      offset: 80,
-      animation: {
-        duration: 300,
-        easing: "ease-in-out"
-      }
-    });
-    f(this, "mouseEnterListener");
-    f(this, "mouseLeaveListener");
-    f(this, "renderPreviewListener");
-  }
-  buildOptions(e, s) {
-    const r = typeof s.value == "object" ? s.value : { src: s.value, alt: void 0 }, k = (r == null ? void 0 : r.src) ?? this.getImgSrc(e), g = (r == null ? void 0 : r.alt) ?? this.getImgAlt(e);
-    return {
-      ...this.defaultOptions,
-      ...r,
-      src: k,
-      alt: g
-    };
-  }
-  get allInstances() {
-    return [...document.querySelectorAll(".m-fullscreen-img-instance")];
-  }
-  getImgSrc(e) {
-    var r;
-    const s = ((r = this.options) == null ? void 0 : r.src) || e.getAttribute("src") || e.getAttribute("data-src");
-    if (!s)
-      throw new Error(
-        '[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=""`, `v-fullscreen="{ src: "" }"`, `src=""` or `data-src=""` atributes'
-      );
-    return s;
-  }
-  getImgAlt(e) {
-    var s;
-    return ((s = this.options) == null ? void 0 : s.alt) || e.getAttribute("alt") || e.getAttribute("data-alt");
-  }
-  create(e, s) {
-    if (this.options = this.buildOptions(e, s), this.options.disabled)
-      return;
-    e.style.cursor = "move", (this.options.scaleOnHover || this.options.blurOnHover) && (e.style.transition = "all 200ms ease-in-out"), e.classList.add("m-fullscreen-img-instance"), e.setAttribute("data-src", this.getImgSrc(e));
-    const r = this.getImgAlt(e);
-    r && e.setAttribute("data-alt", r), this.mouseEnterListener = () => this.mouseEnter(e), this.mouseLeaveListener = () => this.mouseLeave(e), this.renderPreviewListener = () => this.renderPreview(e), e.addEventListener("mouseenter", this.mouseEnterListener), e.addEventListener("mouseleave", this.mouseLeaveListener), e.addEventListener("click", this.renderPreviewListener);
-  }
-  update(e, s) {
-    this.options = this.buildOptions(e, s);
-  }
-  remove(e) {
-    e.removeEventListener("mouseenter", this.mouseEnterListener), e.removeEventListener("mouseleave", this.mouseLeaveListener), e.removeEventListener("click", this.renderPreviewListener), e.classList.remove("m-fullscreen-img-instance"), e.style.cursor = "";
-  }
-  renderPreview(e) {
-    return e.classList.add(U), me(ze, {
-      props: {
-        ...this.options,
-        openInstanceClass: U,
-        clickedElement: e,
-        clickedElementBounds: e.getBoundingClientRect()
-      },
-      addDestroyInProps: !0
-    });
-  }
-  mouseLeave(e) {
-    this.options.scaleOnHover && (e.style.transform = ""), this.options.blurOnHover && (e.style.filter = ""), e.style.zIndex = "";
-  }
-  mouseEnter(e) {
-    e.style.zIndex = "1", this.options.scaleOnHover && (e.style.transform = "scale(1.04)"), this.options.blurOnHover && (e.style.filter = "blur(3px)");
-  }
-}
-let x;
-const Be = {
-  mounted(l, e) {
-    return x = new Pe(), x.create(l, e);
-  },
-  updated(l, e) {
-    return x.update(l, e);
-  },
-  unmounted(l) {
-    return x.remove(l);
-  }
-};
-export {
-  Be as d
-};
-//# sourceMappingURL=fullscreen-img.directive.CEBhPyiD.mjs.map

package/dist/chunks/fullscreen-img.directive.CEBhPyiD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"fullscreen-img.directive.CEBhPyiD.mjs","sources":["../../src/directives/vFullscreenImg/MazFullscreenImg.vue","../../src/directives/vFullscreenImg/fullscreen-img.handler.ts","../../src/directives/vFullscreenImg/fullscreen-img.directive.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport MazSpinner from '../../components/MazSpinner.vue'\n\nimport { checkAvailability } from '../../helpers/checkAvailability'\n\nconst props = withDefaults(defineProps<MazFullscreenImgProps>(), {\n  zoom: true,\n  offset: undefined,\n  destroy: undefined,\n  alt: undefined,\n  animation: () => ({\n    duration: 300,\n    easing: 'ease-in-out',\n  }),\n  clickedElementBounds: undefined,\n  openInstanceClass: 'm-fullscreen-img-instance',\n})\n\nconst emits = defineEmits(['close', 'previous', 'next', 'before-close'])\n\nconst XMark = defineAsyncComponent(() => import('../../../icons/x-mark.svg'))\nconst ChevronLeft = defineAsyncComponent(() => import('../../../icons/chevron-left.svg'))\n\nexport interface MazFullscreenImgProps {\n  src: string\n  clickedElementBounds?: {\n    top: number\n    left: number\n    height: number\n    width: number\n  }\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n  openInstanceClass?: string\n  clickedElement: HTMLElement\n  destroy?: () => void\n  alt?: string | null\n  zoom?: boolean\n}\n\nconst imageLoaded = ref(false)\nconst showLoader = ref(false)\nconst loadedOnce = ref(false)\nconst hasMultipleInstances = ref(false)\nconst isZoomed = ref(false)\nconst animationState = reactive({\n  running: false,\n  ended: false,\n})\n\nconst currentClickedElement = ref(props.clickedElement)\nconst currentClickedElementBounds = computed(() => props.clickedElement.getBoundingClientRect())\nconst isLandscapeImage = ref()\n\nconst currentSrc = ref(props.src)\nconst currentAlt = ref<string | null | undefined>(props.alt)\n\nconst FullscreenImgElement = ref<HTMLDivElement>()\nconst ImgElement = ref<HTMLImageElement>()\nconst hideImage = ref(true)\n\nconst imageZoomClasses = computed<HTMLAttributes['class']>(() => {\n  return {\n    '--is-zoomed': isZoomed.value,\n    '--invisible': hideImage.value,\n    '--absolute': !isZoomed.value,\n  }\n})\n\nfunction onImageLoaded() {\n  if (ImgElement.value) {\n    isLandscapeImage.value = ImgElement.value?.naturalWidth > ImgElement.value?.naturalHeight\n  }\n\n  imageLoaded.value = true\n  showLoader.value = false\n  loadedOnce.value = true\n}\n\nwatch(\n  loadedOnce,\n  (value) => {\n    if (value) {\n      openFullscreen()\n    }\n  },\n  { immediate: true },\n)\n\nfunction close() {\n  emits('before-close')\n  closeFullscreen()\n}\n\nfunction keydownLister(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    close()\n  }\n\n  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n    e.preventDefault()\n    nextPreviousImage(e.key === 'ArrowRight' ? 'next' : 'previous')\n  }\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--m-fullscreen-open')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--m-fullscreen-open')\n}\n\nfunction getAllInstances(): HTMLElement[] {\n  return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n}\n\nfunction getNewInstanceIndex(allInstances: HTMLElement[], newInstanceIndex: number): number {\n  if (newInstanceIndex < 0) {\n    return allInstances.length - 1\n  }\n  if (newInstanceIndex >= allInstances.length) {\n    return 0\n  }\n  return newInstanceIndex\n}\n\nfunction useNextInstance(currentInstance: HTMLElement, nextInstance: HTMLElement) {\n  currentInstance.classList.remove(props.openInstanceClass)\n  nextInstance.classList.add(props.openInstanceClass)\n\n  const src: string | null = nextInstance.getAttribute('data-src')\n  const alt: string | null = nextInstance.getAttribute('data-alt')\n\n  currentAlt.value = alt\n  currentSrc.value = src ?? currentSrc.value\n}\n\nfunction nextPreviousImage(which: 'next' | 'previous'): void {\n  hideImage.value = true\n\n  const currentInstance: HTMLElement | null = document.querySelector(\n    `.m-fullscreen-img-instance.${props.openInstanceClass}`,\n  )\n\n  if (currentInstance) {\n    const allInstances = getAllInstances()\n    const currentInstanceIndex = allInstances.indexOf(currentInstance)\n    const newInstanceIndex\n        = which === 'next' ? currentInstanceIndex + 1 : currentInstanceIndex - 1\n\n    const nextInstance = allInstances[getNewInstanceIndex(allInstances, newInstanceIndex)]\n    currentClickedElement.value = nextInstance\n\n    if (nextInstance) {\n      useNextInstance(currentInstance, nextInstance)\n    }\n\n    emits(which)\n\n    imageLoaded.value = false\n    showLoader.value = true\n\n    checkAvailability(() => imageLoaded.value === true, () => {\n      hideImage.value = false\n      if (isZoomed.value) {\n        setZoomStyles()\n      }\n      else {\n        setEndAnimationStyles()\n      }\n    }, {\n      expectedValue: true,\n      interval: 100,\n      maxAttempts: 50,\n    })\n  }\n}\n\nfunction setZoomStyles() {\n  const imgElement = ImgElement.value\n\n  if (!imgElement) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  imgElement.style.removeProperty('max-width')\n  imgElement.style.removeProperty('max-height')\n  imgElement?.style.removeProperty('top')\n  imgElement?.style.removeProperty('left')\n\n  if (!isLandscapeImage.value) {\n    imgElement.style.width = `100vw`\n    imgElement.style.removeProperty('height')\n  }\n  else {\n    imgElement.style.height = `100vh`\n    imgElement.style.removeProperty('width')\n  }\n}\n\nfunction toggleZoom() {\n  if (isZoomed.value) {\n    isZoomed.value = !isZoomed.value\n    setEndAnimationStyles()\n  }\n  else {\n    isZoomed.value = !isZoomed.value\n    setZoomStyles()\n  }\n}\n\nfunction runAnimation(frames: Keyframe[] | PropertyIndexedKeyframes) {\n  animationState.running = true\n  hideImage.value = false\n\n  const animation = ImgElement.value?.animate(frames, {\n    duration: props.animation.duration,\n    easing: props.animation.easing,\n  })\n\n  if (!animation) {\n    console.error('[maz-ui](vFullscreenImg) animation is not defined')\n    animationState.running = false\n    animationState.ended = true\n    return\n  }\n\n  return animation\n}\n\nfunction getPositionsOfClikedElement(offset = props.offset ?? 0) {\n  const width = currentClickedElement.value.clientWidth || 1\n  const height = currentClickedElement.value.clientHeight || 1\n\n  const windowWidth = window.innerWidth\n  const windowHeight = window.innerHeight\n\n  const scale = Math.min(\n    (windowWidth - 2 * offset) / width,\n    (windowHeight - 2 * offset) / height,\n  )\n\n  const centerX = (windowWidth - width * scale) / 2\n  const centerY = (windowHeight - height * scale) / 2\n\n  return {\n    centerX,\n    centerY,\n    width,\n    height,\n    scale,\n  }\n}\n\nfunction getAnimationFrames({ trigger }: { trigger: 'open' | 'close' }) {\n  const { width, height, scale, centerX, centerY } = getPositionsOfClikedElement()\n\n  const { top, left, width: clickedElementWidth, height: clickedElementHeight } = currentClickedElementBounds.value\n\n  const frames = [\n    {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${clickedElementWidth}px`,\n      height: `${clickedElementHeight}px`,\n      opacity: 0,\n    },\n    {\n      top: `${centerY}px`,\n      left: `${centerX}px`,\n      width: `${width * scale}px`,\n      height: `${height * scale}px`,\n      opacity: 1,\n    },\n  ]\n\n  return {\n    frames: trigger === 'open' ? frames : frames.reverse(),\n  }\n}\n\nfunction setEndAnimationStyles() {\n  const { height, width, scale } = getPositionsOfClikedElement()\n\n  const finalStyles = isLandscapeImage.value\n    ? {\n        width: `${width * scale}px`,\n        maxHeight: `${height * scale}px`,\n      }\n    : {\n        height: `${height * scale}px`,\n        maxWidth: `${width * scale}px`,\n      }\n\n  if (!ImgElement.value) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  if (isLandscapeImage.value) {\n    ImgElement.value.style.removeProperty('height')\n    ImgElement.value.style.removeProperty('maxHeight')\n  }\n  else {\n    ImgElement.value.style.removeProperty('width')\n    ImgElement.value.style.removeProperty('maxWidth')\n  }\n\n  Object.assign(ImgElement.value.style, finalStyles)\n}\n\nfunction openFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'open',\n  })\n\n  const openAnimation = runAnimation(frames)\n\n  if (!openAnimation) {\n    console.error('[maz-ui](vFullscreenImg) open animation is not defined')\n    setEndAnimationStyles()\n    return\n  }\n\n  openAnimation.onfinish = () => {\n    setEndAnimationStyles()\n    animationState.running = false\n    animationState.ended = true\n  }\n}\n\nfunction closeFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'close',\n  })\n\n  const closeAnimation = runAnimation(frames)\n\n  function onFinish() {\n    emits('close')\n    FullscreenImgElement.value?.remove()\n    props.destroy?.()\n    animationState.running = false\n    animationState.ended = true\n  }\n\n  if (!closeAnimation) {\n    console.error('[maz-ui](vFullscreenImg) close animation is not defined')\n    onFinish()\n    return\n  }\n\n  closeAnimation.onfinish = onFinish\n}\n\nfunction onResizeWindow() {\n  if (!isZoomed.value) {\n    setEndAnimationStyles()\n  }\n}\n\nonMounted(() => {\n  showLoader.value = true\n  document.addEventListener('keydown', keydownLister)\n  window.addEventListener('resize', onResizeWindow)\n  addClassToDocument()\n  hasMultipleInstances.value = getAllInstances().length > 1\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', keydownLister)\n  window.removeEventListener('resize', onResizeWindow)\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <div\n    ref=\"FullscreenImgElement\"\n    role=\"button\"\n    class=\"m-fullscreen-img m-reset-css\"\n    tabindex=\"0\"\n    @click.stop=\"close\"\n    @keypress.esc.prevent=\"close\"\n  >\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --next\"\n      @click.stop=\"nextPreviousImage('next')\"\n    >\n      <ChevronLeft class=\"maz-rotate-180\" />\n    </button>\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --previous\"\n      @click.stop=\"nextPreviousImage('previous')\"\n    >\n      <ChevronLeft />\n    </button>\n\n    <button type=\"button\" class=\"m-fullscreen-btn --close\" @click=\"close\">\n      <XMark />\n    </button>\n\n    <div class=\"m-fullscreen-img-scroller\">\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events -->\n      <img\n        ref=\"ImgElement\"\n        :src=\"currentSrc\"\n        :alt=\"currentAlt ?? undefined\"\n        tabindex=\"0\"\n        :class=\"[imageZoomClasses]\"\n        @load=\"onImageLoaded\"\n        @click.stop=\"zoom && toggleZoom()\"\n      >\n\n      <MazSpinner v-show=\"showLoader\" class=\"m-fullscreen-img-loader\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  html.--m-fullscreen-open {\n  @apply maz-h-screen maz-overflow-hidden;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n  .m-fullscreen-img {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-h-screen maz-w-screen maz-items-center maz-bg-overlay maz-outline-none maz-backdrop-blur;\n\n  .m-fullscreen-img-scroller {\n    @apply maz-flex maz-h-screen maz-w-screen maz-overflow-auto maz-flex-center;\n  }\n\n  img {\n    @apply maz-z-2 maz-outline-none maz-cursor-zoom-in maz-object-center maz-object-contain;\n\n    &.--is-zoomed {\n      @apply maz-cursor-zoom-out;\n    }\n\n    &.--invisible {\n      @apply maz-invisible;\n    }\n\n    &.--absolute {\n      @apply maz-absolute;\n    }\n  }\n\n  .m-fullscreen-img-loader {\n    @apply maz-absolute maz-text-2xl maz-z-15;\n  }\n\n  .m-fullscreen-btn {\n    @apply maz-absolute maz-z-15 maz-flex maz-h-20 maz-w-[7%] maz-min-w-[5em] maz-cursor-pointer maz-p-4 maz-transition-colors maz-duration-200;\n\n    svg {\n      @apply maz-text-3xl maz-transition-transform maz-duration-300 maz-ease-in-out;\n    }\n\n    &:hover {\n      svg {\n        @apply maz-scale-150;\n      }\n    }\n\n    &.--close {\n      @apply maz-right-0 maz-top-0 maz-items-start maz-justify-end;\n    }\n\n    &.--previous {\n      @apply maz-left-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-start;\n    }\n\n    &.--next {\n      @apply maz-right-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-end;\n    }\n  }\n}\n</style>\n","import type { DirectiveBinding } from 'vue'\n\nimport type { MazFullscreenImgProps } from './MazFullscreenImg.vue'\nimport { mount } from '../../helpers/mountComponent'\nimport MazFullscreenImg from './MazFullscreenImg.vue'\n\nexport interface vFullscreenImgOptions {\n  disabled?: boolean\n  scaleOnHover?: boolean\n  blurOnHover?: boolean\n  zoom?: boolean\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n}\n\ninterface vFullscreenImgBindingOptions extends vFullscreenImgOptions {\n  src: string\n  alt?: string | null\n}\n\nexport type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined\n\nexport type vFullscreenImgBinding = DirectiveBinding<vFullscreenImgBindingValue>\n\nconst STATE_OPEN_CLASS = 'm-fullscreen-is-open'\n\nexport class FullscreenImgHandler {\n  private options: vFullscreenImgBindingOptions\n  private defaultOptions: vFullscreenImgOptions = {\n    scaleOnHover: false,\n    blurOnHover: false,\n    disabled: false,\n    zoom: true,\n    offset: 80,\n    animation: {\n      duration: 300,\n      easing: 'ease-in-out',\n    },\n  }\n\n  private mouseEnterListener: () => void\n  private mouseLeaveListener: () => void\n  private renderPreviewListener: () => void\n\n  private buildOptions(\n    el: HTMLElement,\n    binding: vFullscreenImgBinding,\n  ): vFullscreenImgBindingOptions {\n    const options\n      = typeof binding.value === 'object' ? binding.value : { src: binding.value, alt: undefined }\n\n    const src = options?.src ?? this.getImgSrc(el)\n    const alt = options?.alt ?? this.getImgAlt(el)\n\n    return {\n      ...this.defaultOptions,\n      ...options,\n      src,\n      alt,\n    }\n  }\n\n  get allInstances(): HTMLElement[] {\n    return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n  }\n\n  private getImgSrc(el: HTMLElement) {\n    const imgSrc = this.options?.src || el.getAttribute('src') || el.getAttribute('data-src')\n\n    if (!imgSrc) {\n      throw new Error(\n        '[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=\"\"`, `v-fullscreen=\"{ src: \"\" }\"`, `src=\"\"` or `data-src=\"\"` atributes',\n      )\n    }\n\n    return imgSrc\n  }\n\n  private getImgAlt(el: HTMLElement) {\n    return this.options?.alt || el.getAttribute('alt') || el.getAttribute('data-alt')\n  }\n\n  public create(el: HTMLElement, binding: vFullscreenImgBinding) {\n    this.options = this.buildOptions(el, binding)\n\n    if (this.options.disabled)\n      return\n\n    el.style.cursor = 'move'\n\n    if (this.options.scaleOnHover || this.options.blurOnHover) {\n      el.style.transition = 'all 200ms ease-in-out'\n    }\n\n    /**\n     * Set class & data attribute to use it with previous & next functions\n     */\n    el.classList.add('m-fullscreen-img-instance')\n\n    el.setAttribute('data-src', this.getImgSrc(el))\n\n    const alt = this.getImgAlt(el)\n    if (alt) {\n      el.setAttribute('data-alt', alt)\n    }\n\n    this.mouseEnterListener = () => this.mouseEnter(el)\n    this.mouseLeaveListener = () => this.mouseLeave(el)\n    this.renderPreviewListener = () => this.renderPreview(el)\n\n    el.addEventListener('mouseenter', this.mouseEnterListener)\n    el.addEventListener('mouseleave', this.mouseLeaveListener)\n    el.addEventListener('click', this.renderPreviewListener)\n  }\n\n  public update(el: HTMLElement, binding: vFullscreenImgBinding): void {\n    this.options = this.buildOptions(el, binding)\n  }\n\n  public remove(el: HTMLElement): void {\n    el.removeEventListener('mouseenter', this.mouseEnterListener)\n    el.removeEventListener('mouseleave', this.mouseLeaveListener)\n    el.removeEventListener('click', this.renderPreviewListener)\n\n    el.classList.remove('m-fullscreen-img-instance')\n\n    el.style.cursor = ''\n  }\n\n  private renderPreview(el: HTMLElement) {\n    el.classList.add(STATE_OPEN_CLASS)\n\n    return mount<typeof MazFullscreenImg, MazFullscreenImgProps>(MazFullscreenImg, {\n      props: {\n        ...this.options,\n        openInstanceClass: STATE_OPEN_CLASS,\n        clickedElement: el,\n        clickedElementBounds: el.getBoundingClientRect(),\n      },\n      addDestroyInProps: true,\n    })\n  }\n\n  private mouseLeave(el: HTMLElement): void {\n    if (this.options.scaleOnHover)\n      el.style.transform = ''\n    if (this.options.blurOnHover)\n      el.style.filter = ''\n    el.style.zIndex = ''\n  }\n\n  private mouseEnter(el: HTMLElement): void {\n    el.style.zIndex = '1'\n    if (this.options.scaleOnHover)\n      el.style.transform = 'scale(1.04)'\n    if (this.options.blurOnHover)\n      el.style.filter = 'blur(3px)'\n  }\n}\n","import type { ObjectDirective } from 'vue'\nimport { FullscreenImgHandler, type vFullscreenImgBindingValue } from './fullscreen-img.handler'\n\nlet instance: FullscreenImgHandler\n\nconst directive = {\n  mounted(el: HTMLElement, binding) {\n    instance = new FullscreenImgHandler()\n    return instance.create(el, binding)\n  },\n  updated(el: HTMLElement, binding) {\n    return instance.update(el, binding)\n  },\n  unmounted(el: HTMLElement) {\n    return instance.remove(el)\n  },\n} satisfies ObjectDirective<HTMLElement, vFullscreenImgBindingValue>\n\nexport { directive as vFullscreenImg }\n"],"names":["props","__props","emits","__emit","XMark","defineAsyncComponent","ChevronLeft","imageLoaded","ref","showLoader","loadedOnce","hasMultipleInstances","isZoomed","animationState","reactive","currentClickedElement","currentClickedElementBounds","computed","isLandscapeImage","currentSrc","currentAlt","FullscreenImgElement","ImgElement","hideImage","imageZoomClasses","onImageLoaded","_a","_b","watch","value","openFullscreen","close","closeFullscreen","keydownLister","e","nextPreviousImage","addClassToDocument","removeClassFromDocument","getAllInstances","getNewInstanceIndex","allInstances","newInstanceIndex","useNextInstance","currentInstance","nextInstance","src","alt","which","currentInstanceIndex","checkAvailability","setZoomStyles","setEndAnimationStyles","imgElement","toggleZoom","runAnimation","frames","animation","getPositionsOfClikedElement","offset","width","height","windowWidth","windowHeight","scale","centerX","centerY","getAnimationFrames","trigger","top","left","clickedElementWidth","clickedElementHeight","finalStyles","openAnimation","closeAnimation","onFinish","onResizeWindow","onMounted","onBeforeUnmount","STATE_OPEN_CLASS","FullscreenImgHandler","__publicField","el","binding","options","imgSrc","mount","MazFullscreenImg","instance","directive"],"mappings":"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"}

package/dist/chunks/fullscreen-img.directive.CK-8DToy.cjs

@@ -1,2 +0,0 @@
-"use strict";require('../assets/fullscreen-img.Dnt1uj_5.css');var ee=Object.defineProperty;var te=(a,e,r)=>e in a?ee(a,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[e]=r;var v=(a,e,r)=>te(a,typeof e!="symbol"?e+"":e,r);const ne=require("../helpers/mountComponent.cjs"),n=require("vue"),se=require("../components/MazSpinner.cjs"),re=require("../helpers/checkAvailability.cjs"),oe=require("./_plugin-vue_export-helper.BHFhmbuH.cjs"),ie=["onKeypress"],le={class:"m-fullscreen-img-scroller"},ae=["src","alt"],ue=n.defineComponent({__name:"MazFullscreenImg",props:{src:{},clickedElementBounds:{default:void 0},offset:{default:void 0},animation:{default:()=>({duration:300,easing:"ease-in-out"})},openInstanceClass:{default:"m-fullscreen-img-instance"},clickedElement:{},destroy:{type:Function,default:void 0},alt:{default:void 0},zoom:{type:Boolean,default:!0}},emits:["close","previous","next","before-close"],setup(a,{emit:e}){const r=a,i=e,I=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./x-mark.Dz-FO7Es.cjs"))),h=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./chevron-left.BYUi62el.cjs"))),k=n.ref(!1),g=n.ref(!1),y=n.ref(!1),x=n.ref(!1),c=n.ref(!1),f=n.reactive({running:!1,ended:!1}),A=n.ref(r.clickedElement),D=n.computed(()=>r.clickedElement.getBoundingClientRect()),w=n.ref(),C=n.ref(r.src),_=n.ref(r.alt),H=n.ref(),u=n.ref(),L=n.ref(!0),R=n.computed(()=>({"--is-zoomed":c.value,"--invisible":L.value,"--absolute":!c.value}));function Z(){var t,s;u.value&&(w.value=((t=u.value)==null?void 0:t.naturalWidth)>((s=u.value)==null?void 0:s.naturalHeight)),k.value=!0,g.value=!1,y.value=!0}n.watch(y,t=>{t&&U()},{immediate:!0});function E(){i("before-close"),G()}function S(t){t.key==="Escape"&&(t.preventDefault(),E()),(t.key==="ArrowLeft"||t.key==="ArrowRight")&&(t.preventDefault(),P(t.key==="ArrowRight"?"next":"previous"))}function K(){document.documentElement.classList.add("--m-fullscreen-open")}function T(){document.documentElement.classList.remove("--m-fullscreen-open")}function F(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}function X(t,s){return s<0?t.length-1:s>=t.length?0:s}function j(t,s){t.classList.remove(r.openInstanceClass),s.classList.add(r.openInstanceClass);const o=s.getAttribute("data-src"),l=s.getAttribute("data-alt");_.value=l,C.value=o??C.value}function P(t){L.value=!0;const s=document.querySelector(`.m-fullscreen-img-instance.${r.openInstanceClass}`);if(s){const o=F(),l=o.indexOf(s),m=t==="next"?l+1:l-1,d=o[X(o,m)];A.value=d,d&&j(s,d),i(t),k.value=!1,g.value=!0,re.checkAvailability(()=>k.value===!0,()=>{L.value=!1,c.value?$():p()},{expectedValue:!0,interval:100,maxAttempts:50})}}function $(){const t=u.value;if(!t){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}t.style.removeProperty("max-width"),t.style.removeProperty("max-height"),t==null||t.style.removeProperty("top"),t==null||t.style.removeProperty("left"),w.value?(t.style.height="100vh",t.style.removeProperty("width")):(t.style.width="100vw",t.style.removeProperty("height"))}function Y(){c.value?(c.value=!c.value,p()):(c.value=!c.value,$())}function B(t){var o;f.running=!0,L.value=!1;const s=(o=u.value)==null?void 0:o.animate(t,{duration:r.animation.duration,easing:r.animation.easing});if(!s){console.error("[maz-ui](vFullscreenImg) animation is not defined"),f.running=!1,f.ended=!0;return}return s}function M(t=r.offset??0){const s=A.value.clientWidth||1,o=A.value.clientHeight||1,l=window.innerWidth,m=window.innerHeight,d=Math.min((l-2*t)/s,(m-2*t)/o),z=(l-s*d)/2,O=(m-o*d)/2;return{centerX:z,centerY:O,width:s,height:o,scale:d}}function N({trigger:t}){const{width:s,height:o,scale:l,centerX:m,centerY:d}=M(),{top:z,left:O,width:J,height:Q}=D.value,q=[{top:`${z}px`,left:`${O}px`,width:`${J}px`,height:`${Q}px`,opacity:0},{top:`${d}px`,left:`${m}px`,width:`${s*l}px`,height:`${o*l}px`,opacity:1}];return{frames:t==="open"?q:q.reverse()}}function p(){const{height:t,width:s,scale:o}=M(),l=w.value?{width:`${s*o}px`,maxHeight:`${t*o}px`}:{height:`${t*o}px`,maxWidth:`${s*o}px`};if(!u.value){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}w.value?(u.value.style.removeProperty("height"),u.value.style.removeProperty("maxHeight")):(u.value.style.removeProperty("width"),u.value.style.removeProperty("maxWidth")),Object.assign(u.value.style,l)}function U(){const{frames:t}=N({trigger:"open"}),s=B(t);if(!s){console.error("[maz-ui](vFullscreenImg) open animation is not defined"),p();return}s.onfinish=()=>{p(),f.running=!1,f.ended=!0}}function G(){const{frames:t}=N({trigger:"close"}),s=B(t);function o(){var l,m;i("close"),(l=H.value)==null||l.remove(),(m=r.destroy)==null||m.call(r),f.running=!1,f.ended=!0}if(!s){console.error("[maz-ui](vFullscreenImg) close animation is not defined"),o();return}s.onfinish=o}function V(){c.value||p()}return n.onMounted(()=>{g.value=!0,document.addEventListener("keydown",S),window.addEventListener("resize",V),K(),x.value=F().length>1}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",S),window.removeEventListener("resize",V),T()}),(t,s)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"FullscreenImgElement",ref:H,role:"button",class:"m-fullscreen-img m-reset-css",tabindex:"0",onClick:n.withModifiers(E,["stop"]),onKeypress:n.withKeys(n.withModifiers(E,["prevent"]),["esc"])},[y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:0,type:"button",class:"m-fullscreen-btn --next",onClick:s[0]||(s[0]=n.withModifiers(o=>P("next"),["stop"]))},[n.createVNode(n.unref(h),{class:"maz-rotate-180"})])):n.createCommentVNode("",!0),y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:1,type:"button",class:"m-fullscreen-btn --previous",onClick:s[1]||(s[1]=n.withModifiers(o=>P("previous"),["stop"]))},[n.createVNode(n.unref(h))])):n.createCommentVNode("",!0),n.createElementVNode("button",{type:"button",class:"m-fullscreen-btn --close",onClick:E},[n.createVNode(n.unref(I))]),n.createElementVNode("div",le,[n.createElementVNode("img",{ref_key:"ImgElement",ref:u,src:C.value,alt:_.value??void 0,tabindex:"0",class:n.normalizeClass([R.value]),onLoad:Z,onClick:s[2]||(s[2]=n.withModifiers(o=>t.zoom&&Y(),["stop"]))},null,42,ae),n.withDirectives(n.createVNode(se.default,{class:"m-fullscreen-img-loader"},null,512),[[n.vShow,g.value]])])],40,ie))}}),ce=oe._export_sfc(ue,[["__scopeId","data-v-9d1598d9"]]),W="m-fullscreen-is-open";class me{constructor(){v(this,"options");v(this,"defaultOptions",{scaleOnHover:!1,blurOnHover:!1,disabled:!1,zoom:!0,offset:80,animation:{duration:300,easing:"ease-in-out"}});v(this,"mouseEnterListener");v(this,"mouseLeaveListener");v(this,"renderPreviewListener")}buildOptions(e,r){const i=typeof r.value=="object"?r.value:{src:r.value,alt:void 0},I=(i==null?void 0:i.src)??this.getImgSrc(e),h=(i==null?void 0:i.alt)??this.getImgAlt(e);return{...this.defaultOptions,...i,src:I,alt:h}}get allInstances(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}getImgSrc(e){var i;const r=((i=this.options)==null?void 0:i.src)||e.getAttribute("src")||e.getAttribute("data-src");if(!r)throw new Error('[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=""`, `v-fullscreen="{ src: "" }"`, `src=""` or `data-src=""` atributes');return r}getImgAlt(e){var r;return((r=this.options)==null?void 0:r.alt)||e.getAttribute("alt")||e.getAttribute("data-alt")}create(e,r){if(this.options=this.buildOptions(e,r),this.options.disabled)return;e.style.cursor="move",(this.options.scaleOnHover||this.options.blurOnHover)&&(e.style.transition="all 200ms ease-in-out"),e.classList.add("m-fullscreen-img-instance"),e.setAttribute("data-src",this.getImgSrc(e));const i=this.getImgAlt(e);i&&e.setAttribute("data-alt",i),this.mouseEnterListener=()=>this.mouseEnter(e),this.mouseLeaveListener=()=>this.mouseLeave(e),this.renderPreviewListener=()=>this.renderPreview(e),e.addEventListener("mouseenter",this.mouseEnterListener),e.addEventListener("mouseleave",this.mouseLeaveListener),e.addEventListener("click",this.renderPreviewListener)}update(e,r){this.options=this.buildOptions(e,r)}remove(e){e.removeEventListener("mouseenter",this.mouseEnterListener),e.removeEventListener("mouseleave",this.mouseLeaveListener),e.removeEventListener("click",this.renderPreviewListener),e.classList.remove("m-fullscreen-img-instance"),e.style.cursor=""}renderPreview(e){return e.classList.add(W),ne.mount(ce,{props:{...this.options,openInstanceClass:W,clickedElement:e,clickedElementBounds:e.getBoundingClientRect()},addDestroyInProps:!0})}mouseLeave(e){this.options.scaleOnHover&&(e.style.transform=""),this.options.blurOnHover&&(e.style.filter=""),e.style.zIndex=""}mouseEnter(e){e.style.zIndex="1",this.options.scaleOnHover&&(e.style.transform="scale(1.04)"),this.options.blurOnHover&&(e.style.filter="blur(3px)")}}let b;const de={mounted(a,e){return b=new me,b.create(a,e)},updated(a,e){return b.update(a,e)},unmounted(a){return b.remove(a)}};exports.directive=de;
-//# sourceMappingURL=fullscreen-img.directive.CK-8DToy.cjs.map

package/dist/chunks/fullscreen-img.directive.CK-8DToy.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"fullscreen-img.directive.CK-8DToy.cjs","sources":["../../src/directives/vFullscreenImg/MazFullscreenImg.vue","../../src/directives/vFullscreenImg/fullscreen-img.handler.ts","../../src/directives/vFullscreenImg/fullscreen-img.directive.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport MazSpinner from '../../components/MazSpinner.vue'\n\nimport { checkAvailability } from '../../helpers/checkAvailability'\n\nconst props = withDefaults(defineProps<MazFullscreenImgProps>(), {\n  zoom: true,\n  offset: undefined,\n  destroy: undefined,\n  alt: undefined,\n  animation: () => ({\n    duration: 300,\n    easing: 'ease-in-out',\n  }),\n  clickedElementBounds: undefined,\n  openInstanceClass: 'm-fullscreen-img-instance',\n})\n\nconst emits = defineEmits(['close', 'previous', 'next', 'before-close'])\n\nconst XMark = defineAsyncComponent(() => import('../../../icons/x-mark.svg'))\nconst ChevronLeft = defineAsyncComponent(() => import('../../../icons/chevron-left.svg'))\n\nexport interface MazFullscreenImgProps {\n  src: string\n  clickedElementBounds?: {\n    top: number\n    left: number\n    height: number\n    width: number\n  }\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n  openInstanceClass?: string\n  clickedElement: HTMLElement\n  destroy?: () => void\n  alt?: string | null\n  zoom?: boolean\n}\n\nconst imageLoaded = ref(false)\nconst showLoader = ref(false)\nconst loadedOnce = ref(false)\nconst hasMultipleInstances = ref(false)\nconst isZoomed = ref(false)\nconst animationState = reactive({\n  running: false,\n  ended: false,\n})\n\nconst currentClickedElement = ref(props.clickedElement)\nconst currentClickedElementBounds = computed(() => props.clickedElement.getBoundingClientRect())\nconst isLandscapeImage = ref()\n\nconst currentSrc = ref(props.src)\nconst currentAlt = ref<string | null | undefined>(props.alt)\n\nconst FullscreenImgElement = ref<HTMLDivElement>()\nconst ImgElement = ref<HTMLImageElement>()\nconst hideImage = ref(true)\n\nconst imageZoomClasses = computed<HTMLAttributes['class']>(() => {\n  return {\n    '--is-zoomed': isZoomed.value,\n    '--invisible': hideImage.value,\n    '--absolute': !isZoomed.value,\n  }\n})\n\nfunction onImageLoaded() {\n  if (ImgElement.value) {\n    isLandscapeImage.value = ImgElement.value?.naturalWidth > ImgElement.value?.naturalHeight\n  }\n\n  imageLoaded.value = true\n  showLoader.value = false\n  loadedOnce.value = true\n}\n\nwatch(\n  loadedOnce,\n  (value) => {\n    if (value) {\n      openFullscreen()\n    }\n  },\n  { immediate: true },\n)\n\nfunction close() {\n  emits('before-close')\n  closeFullscreen()\n}\n\nfunction keydownLister(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    close()\n  }\n\n  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n    e.preventDefault()\n    nextPreviousImage(e.key === 'ArrowRight' ? 'next' : 'previous')\n  }\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--m-fullscreen-open')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--m-fullscreen-open')\n}\n\nfunction getAllInstances(): HTMLElement[] {\n  return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n}\n\nfunction getNewInstanceIndex(allInstances: HTMLElement[], newInstanceIndex: number): number {\n  if (newInstanceIndex < 0) {\n    return allInstances.length - 1\n  }\n  if (newInstanceIndex >= allInstances.length) {\n    return 0\n  }\n  return newInstanceIndex\n}\n\nfunction useNextInstance(currentInstance: HTMLElement, nextInstance: HTMLElement) {\n  currentInstance.classList.remove(props.openInstanceClass)\n  nextInstance.classList.add(props.openInstanceClass)\n\n  const src: string | null = nextInstance.getAttribute('data-src')\n  const alt: string | null = nextInstance.getAttribute('data-alt')\n\n  currentAlt.value = alt\n  currentSrc.value = src ?? currentSrc.value\n}\n\nfunction nextPreviousImage(which: 'next' | 'previous'): void {\n  hideImage.value = true\n\n  const currentInstance: HTMLElement | null = document.querySelector(\n    `.m-fullscreen-img-instance.${props.openInstanceClass}`,\n  )\n\n  if (currentInstance) {\n    const allInstances = getAllInstances()\n    const currentInstanceIndex = allInstances.indexOf(currentInstance)\n    const newInstanceIndex\n        = which === 'next' ? currentInstanceIndex + 1 : currentInstanceIndex - 1\n\n    const nextInstance = allInstances[getNewInstanceIndex(allInstances, newInstanceIndex)]\n    currentClickedElement.value = nextInstance\n\n    if (nextInstance) {\n      useNextInstance(currentInstance, nextInstance)\n    }\n\n    emits(which)\n\n    imageLoaded.value = false\n    showLoader.value = true\n\n    checkAvailability(() => imageLoaded.value === true, () => {\n      hideImage.value = false\n      if (isZoomed.value) {\n        setZoomStyles()\n      }\n      else {\n        setEndAnimationStyles()\n      }\n    }, {\n      expectedValue: true,\n      interval: 100,\n      maxAttempts: 50,\n    })\n  }\n}\n\nfunction setZoomStyles() {\n  const imgElement = ImgElement.value\n\n  if (!imgElement) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  imgElement.style.removeProperty('max-width')\n  imgElement.style.removeProperty('max-height')\n  imgElement?.style.removeProperty('top')\n  imgElement?.style.removeProperty('left')\n\n  if (!isLandscapeImage.value) {\n    imgElement.style.width = `100vw`\n    imgElement.style.removeProperty('height')\n  }\n  else {\n    imgElement.style.height = `100vh`\n    imgElement.style.removeProperty('width')\n  }\n}\n\nfunction toggleZoom() {\n  if (isZoomed.value) {\n    isZoomed.value = !isZoomed.value\n    setEndAnimationStyles()\n  }\n  else {\n    isZoomed.value = !isZoomed.value\n    setZoomStyles()\n  }\n}\n\nfunction runAnimation(frames: Keyframe[] | PropertyIndexedKeyframes) {\n  animationState.running = true\n  hideImage.value = false\n\n  const animation = ImgElement.value?.animate(frames, {\n    duration: props.animation.duration,\n    easing: props.animation.easing,\n  })\n\n  if (!animation) {\n    console.error('[maz-ui](vFullscreenImg) animation is not defined')\n    animationState.running = false\n    animationState.ended = true\n    return\n  }\n\n  return animation\n}\n\nfunction getPositionsOfClikedElement(offset = props.offset ?? 0) {\n  const width = currentClickedElement.value.clientWidth || 1\n  const height = currentClickedElement.value.clientHeight || 1\n\n  const windowWidth = window.innerWidth\n  const windowHeight = window.innerHeight\n\n  const scale = Math.min(\n    (windowWidth - 2 * offset) / width,\n    (windowHeight - 2 * offset) / height,\n  )\n\n  const centerX = (windowWidth - width * scale) / 2\n  const centerY = (windowHeight - height * scale) / 2\n\n  return {\n    centerX,\n    centerY,\n    width,\n    height,\n    scale,\n  }\n}\n\nfunction getAnimationFrames({ trigger }: { trigger: 'open' | 'close' }) {\n  const { width, height, scale, centerX, centerY } = getPositionsOfClikedElement()\n\n  const { top, left, width: clickedElementWidth, height: clickedElementHeight } = currentClickedElementBounds.value\n\n  const frames = [\n    {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${clickedElementWidth}px`,\n      height: `${clickedElementHeight}px`,\n      opacity: 0,\n    },\n    {\n      top: `${centerY}px`,\n      left: `${centerX}px`,\n      width: `${width * scale}px`,\n      height: `${height * scale}px`,\n      opacity: 1,\n    },\n  ]\n\n  return {\n    frames: trigger === 'open' ? frames : frames.reverse(),\n  }\n}\n\nfunction setEndAnimationStyles() {\n  const { height, width, scale } = getPositionsOfClikedElement()\n\n  const finalStyles = isLandscapeImage.value\n    ? {\n        width: `${width * scale}px`,\n        maxHeight: `${height * scale}px`,\n      }\n    : {\n        height: `${height * scale}px`,\n        maxWidth: `${width * scale}px`,\n      }\n\n  if (!ImgElement.value) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  if (isLandscapeImage.value) {\n    ImgElement.value.style.removeProperty('height')\n    ImgElement.value.style.removeProperty('maxHeight')\n  }\n  else {\n    ImgElement.value.style.removeProperty('width')\n    ImgElement.value.style.removeProperty('maxWidth')\n  }\n\n  Object.assign(ImgElement.value.style, finalStyles)\n}\n\nfunction openFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'open',\n  })\n\n  const openAnimation = runAnimation(frames)\n\n  if (!openAnimation) {\n    console.error('[maz-ui](vFullscreenImg) open animation is not defined')\n    setEndAnimationStyles()\n    return\n  }\n\n  openAnimation.onfinish = () => {\n    setEndAnimationStyles()\n    animationState.running = false\n    animationState.ended = true\n  }\n}\n\nfunction closeFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'close',\n  })\n\n  const closeAnimation = runAnimation(frames)\n\n  function onFinish() {\n    emits('close')\n    FullscreenImgElement.value?.remove()\n    props.destroy?.()\n    animationState.running = false\n    animationState.ended = true\n  }\n\n  if (!closeAnimation) {\n    console.error('[maz-ui](vFullscreenImg) close animation is not defined')\n    onFinish()\n    return\n  }\n\n  closeAnimation.onfinish = onFinish\n}\n\nfunction onResizeWindow() {\n  if (!isZoomed.value) {\n    setEndAnimationStyles()\n  }\n}\n\nonMounted(() => {\n  showLoader.value = true\n  document.addEventListener('keydown', keydownLister)\n  window.addEventListener('resize', onResizeWindow)\n  addClassToDocument()\n  hasMultipleInstances.value = getAllInstances().length > 1\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', keydownLister)\n  window.removeEventListener('resize', onResizeWindow)\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <div\n    ref=\"FullscreenImgElement\"\n    role=\"button\"\n    class=\"m-fullscreen-img m-reset-css\"\n    tabindex=\"0\"\n    @click.stop=\"close\"\n    @keypress.esc.prevent=\"close\"\n  >\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --next\"\n      @click.stop=\"nextPreviousImage('next')\"\n    >\n      <ChevronLeft class=\"maz-rotate-180\" />\n    </button>\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --previous\"\n      @click.stop=\"nextPreviousImage('previous')\"\n    >\n      <ChevronLeft />\n    </button>\n\n    <button type=\"button\" class=\"m-fullscreen-btn --close\" @click=\"close\">\n      <XMark />\n    </button>\n\n    <div class=\"m-fullscreen-img-scroller\">\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events -->\n      <img\n        ref=\"ImgElement\"\n        :src=\"currentSrc\"\n        :alt=\"currentAlt ?? undefined\"\n        tabindex=\"0\"\n        :class=\"[imageZoomClasses]\"\n        @load=\"onImageLoaded\"\n        @click.stop=\"zoom && toggleZoom()\"\n      >\n\n      <MazSpinner v-show=\"showLoader\" class=\"m-fullscreen-img-loader\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  html.--m-fullscreen-open {\n  @apply maz-h-screen maz-overflow-hidden;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n  .m-fullscreen-img {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-h-screen maz-w-screen maz-items-center maz-bg-overlay maz-outline-none maz-backdrop-blur;\n\n  .m-fullscreen-img-scroller {\n    @apply maz-flex maz-h-screen maz-w-screen maz-overflow-auto maz-flex-center;\n  }\n\n  img {\n    @apply maz-z-2 maz-outline-none maz-cursor-zoom-in maz-object-center maz-object-contain;\n\n    &.--is-zoomed {\n      @apply maz-cursor-zoom-out;\n    }\n\n    &.--invisible {\n      @apply maz-invisible;\n    }\n\n    &.--absolute {\n      @apply maz-absolute;\n    }\n  }\n\n  .m-fullscreen-img-loader {\n    @apply maz-absolute maz-text-2xl maz-z-15;\n  }\n\n  .m-fullscreen-btn {\n    @apply maz-absolute maz-z-15 maz-flex maz-h-20 maz-w-[7%] maz-min-w-[5em] maz-cursor-pointer maz-p-4 maz-transition-colors maz-duration-200;\n\n    svg {\n      @apply maz-text-3xl maz-transition-transform maz-duration-300 maz-ease-in-out;\n    }\n\n    &:hover {\n      svg {\n        @apply maz-scale-150;\n      }\n    }\n\n    &.--close {\n      @apply maz-right-0 maz-top-0 maz-items-start maz-justify-end;\n    }\n\n    &.--previous {\n      @apply maz-left-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-start;\n    }\n\n    &.--next {\n      @apply maz-right-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-end;\n    }\n  }\n}\n</style>\n","import type { DirectiveBinding } from 'vue'\n\nimport type { MazFullscreenImgProps } from './MazFullscreenImg.vue'\nimport { mount } from '../../helpers/mountComponent'\nimport MazFullscreenImg from './MazFullscreenImg.vue'\n\nexport interface vFullscreenImgOptions {\n  disabled?: boolean\n  scaleOnHover?: boolean\n  blurOnHover?: boolean\n  zoom?: boolean\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n}\n\ninterface vFullscreenImgBindingOptions extends vFullscreenImgOptions {\n  src: string\n  alt?: string | null\n}\n\nexport type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined\n\nexport type vFullscreenImgBinding = DirectiveBinding<vFullscreenImgBindingValue>\n\nconst STATE_OPEN_CLASS = 'm-fullscreen-is-open'\n\nexport class FullscreenImgHandler {\n  private options: vFullscreenImgBindingOptions\n  private defaultOptions: vFullscreenImgOptions = {\n    scaleOnHover: false,\n    blurOnHover: false,\n    disabled: false,\n    zoom: true,\n    offset: 80,\n    animation: {\n      duration: 300,\n      easing: 'ease-in-out',\n    },\n  }\n\n  private mouseEnterListener: () => void\n  private mouseLeaveListener: () => void\n  private renderPreviewListener: () => void\n\n  private buildOptions(\n    el: HTMLElement,\n    binding: vFullscreenImgBinding,\n  ): vFullscreenImgBindingOptions {\n    const options\n      = typeof binding.value === 'object' ? binding.value : { src: binding.value, alt: undefined }\n\n    const src = options?.src ?? this.getImgSrc(el)\n    const alt = options?.alt ?? this.getImgAlt(el)\n\n    return {\n      ...this.defaultOptions,\n      ...options,\n      src,\n      alt,\n    }\n  }\n\n  get allInstances(): HTMLElement[] {\n    return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n  }\n\n  private getImgSrc(el: HTMLElement) {\n    const imgSrc = this.options?.src || el.getAttribute('src') || el.getAttribute('data-src')\n\n    if (!imgSrc) {\n      throw new Error(\n        '[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=\"\"`, `v-fullscreen=\"{ src: \"\" }\"`, `src=\"\"` or `data-src=\"\"` atributes',\n      )\n    }\n\n    return imgSrc\n  }\n\n  private getImgAlt(el: HTMLElement) {\n    return this.options?.alt || el.getAttribute('alt') || el.getAttribute('data-alt')\n  }\n\n  public create(el: HTMLElement, binding: vFullscreenImgBinding) {\n    this.options = this.buildOptions(el, binding)\n\n    if (this.options.disabled)\n      return\n\n    el.style.cursor = 'move'\n\n    if (this.options.scaleOnHover || this.options.blurOnHover) {\n      el.style.transition = 'all 200ms ease-in-out'\n    }\n\n    /**\n     * Set class & data attribute to use it with previous & next functions\n     */\n    el.classList.add('m-fullscreen-img-instance')\n\n    el.setAttribute('data-src', this.getImgSrc(el))\n\n    const alt = this.getImgAlt(el)\n    if (alt) {\n      el.setAttribute('data-alt', alt)\n    }\n\n    this.mouseEnterListener = () => this.mouseEnter(el)\n    this.mouseLeaveListener = () => this.mouseLeave(el)\n    this.renderPreviewListener = () => this.renderPreview(el)\n\n    el.addEventListener('mouseenter', this.mouseEnterListener)\n    el.addEventListener('mouseleave', this.mouseLeaveListener)\n    el.addEventListener('click', this.renderPreviewListener)\n  }\n\n  public update(el: HTMLElement, binding: vFullscreenImgBinding): void {\n    this.options = this.buildOptions(el, binding)\n  }\n\n  public remove(el: HTMLElement): void {\n    el.removeEventListener('mouseenter', this.mouseEnterListener)\n    el.removeEventListener('mouseleave', this.mouseLeaveListener)\n    el.removeEventListener('click', this.renderPreviewListener)\n\n    el.classList.remove('m-fullscreen-img-instance')\n\n    el.style.cursor = ''\n  }\n\n  private renderPreview(el: HTMLElement) {\n    el.classList.add(STATE_OPEN_CLASS)\n\n    return mount<typeof MazFullscreenImg, MazFullscreenImgProps>(MazFullscreenImg, {\n      props: {\n        ...this.options,\n        openInstanceClass: STATE_OPEN_CLASS,\n        clickedElement: el,\n        clickedElementBounds: el.getBoundingClientRect(),\n      },\n      addDestroyInProps: true,\n    })\n  }\n\n  private mouseLeave(el: HTMLElement): void {\n    if (this.options.scaleOnHover)\n      el.style.transform = ''\n    if (this.options.blurOnHover)\n      el.style.filter = ''\n    el.style.zIndex = ''\n  }\n\n  private mouseEnter(el: HTMLElement): void {\n    el.style.zIndex = '1'\n    if (this.options.scaleOnHover)\n      el.style.transform = 'scale(1.04)'\n    if (this.options.blurOnHover)\n      el.style.filter = 'blur(3px)'\n  }\n}\n","import type { ObjectDirective } from 'vue'\nimport { FullscreenImgHandler, type vFullscreenImgBindingValue } from './fullscreen-img.handler'\n\nlet instance: FullscreenImgHandler\n\nconst directive = {\n  mounted(el: HTMLElement, binding) {\n    instance = new FullscreenImgHandler()\n    return instance.create(el, binding)\n  },\n  updated(el: HTMLElement, binding) {\n    return instance.update(el, binding)\n  },\n  unmounted(el: HTMLElement) {\n    return instance.remove(el)\n  },\n} satisfies ObjectDirective<HTMLElement, vFullscreenImgBindingValue>\n\nexport { directive as vFullscreenImg }\n"],"names":["props","__props","emits","__emit","XMark","defineAsyncComponent","ChevronLeft","imageLoaded","ref","showLoader","loadedOnce","hasMultipleInstances","isZoomed","animationState","reactive","currentClickedElement","currentClickedElementBounds","computed","isLandscapeImage","currentSrc","currentAlt","FullscreenImgElement","ImgElement","hideImage","imageZoomClasses","onImageLoaded","_a","_b","watch","value","openFullscreen","close","closeFullscreen","keydownLister","e","nextPreviousImage","addClassToDocument","removeClassFromDocument","getAllInstances","getNewInstanceIndex","allInstances","newInstanceIndex","useNextInstance","currentInstance","nextInstance","src","alt","which","currentInstanceIndex","checkAvailability","setZoomStyles","setEndAnimationStyles","imgElement","toggleZoom","runAnimation","frames","animation","getPositionsOfClikedElement","offset","width","height","windowWidth","windowHeight","scale","centerX","centerY","getAnimationFrames","trigger","top","left","clickedElementWidth","clickedElementHeight","finalStyles","openAnimation","closeAnimation","onFinish","onResizeWindow","onMounted","onBeforeUnmount","STATE_OPEN_CLASS","FullscreenImgHandler","__publicField","el","binding","options","imgSrc","mount","MazFullscreenImg","instance","directive"],"mappings":"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"}

package/dist/chunks/information-circle.89FseEuJ.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 24 24"};function r(l,t){return e.openBlock(),e.createElementBlock("svg",o,t[0]||(t[0]=[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",d:"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"},null,-1)]))}const n={render:r};exports.default=n;exports.render=r;
-//# sourceMappingURL=information-circle.89FseEuJ.cjs.map

package/dist/chunks/information-circle.89FseEuJ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"information-circle.89FseEuJ.cjs","sources":["../../icons/information-circle.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"1em\",\n  height: \"1em\",\n  fill: \"none\",\n  viewBox: \"0 0 24 24\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      stroke: \"currentColor\",\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      \"stroke-width\": \"1.5\",\n      d: \"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0m-9-3.75h.008v.008H12z\"\n    }, null, -1)\n  ])))\n}\nexport default { render: render }"],"names":["_hoisted_1","render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","informationCircle"],"mappings":"uGAEMA,EAAa,CACjB,MAAO,6BACP,MAAO,MACP,OAAQ,MACR,KAAM,OACN,QAAS,WACX,EAEO,SAASC,EAAOC,EAAMC,EAAQ,CACnC,OAAQC,EAAU,UAAA,EAAIC,EAAmB,mBAAC,MAAOL,EAAYG,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAI,CACrFG,EAAAA,mBAAoB,OAAQ,CAC1B,OAAQ,eACR,iBAAkB,QAClB,kBAAmB,QACnB,eAAgB,MAChB,EAAG,oJACT,EAAO,KAAM,EAAE,CACf,EAAI,CACJ,CACA,MAAeC,EAAA,CAAE,OAAQN,CAAM"}

package/dist/chunks/information-circle.CEsJ8VHx.mjs

@@ -1,25 +0,0 @@
-import { openBlock as o, createElementBlock as t, createElementVNode as r } from "vue";
-const n = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 24 24"
-};
-function l(i, e) {
-  return o(), t("svg", n, e[0] || (e[0] = [
-    r("path", {
-      stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      "stroke-width": "1.5",
-      d: "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"
-    }, null, -1)
-  ]));
-}
-const d = { render: l };
-export {
-  d as default,
-  l as render
-};
-//# sourceMappingURL=information-circle.CEsJ8VHx.mjs.map

package/dist/chunks/information-circle.CEsJ8VHx.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"information-circle.CEsJ8VHx.mjs","sources":["../../icons/information-circle.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"1em\",\n  height: \"1em\",\n  fill: \"none\",\n  viewBox: \"0 0 24 24\"\n}\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _cache[0] || (_cache[0] = [\n    _createElementVNode(\"path\", {\n      stroke: \"currentColor\",\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      \"stroke-width\": \"1.5\",\n      d: \"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0m-9-3.75h.008v.008H12z\"\n    }, null, -1)\n  ])))\n}\nexport default { render: render }"],"names":["_hoisted_1","render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","informationCircle"],"mappings":";AAEA,MAAMA,IAAa;AAAA,EACjB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AACX;AAEO,SAASC,EAAOC,GAAMC,GAAQ;AACnC,SAAQC,EAAU,GAAIC,EAAoB,OAAOL,GAAYG,EAAO,CAAC,MAAMA,EAAO,CAAC,IAAI;AAAA,IACrFG,EAAoB,QAAQ;AAAA,MAC1B,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACT,GAAO,MAAM,EAAE;AAAA,EACf,EAAI;AACJ;AACA,MAAeC,IAAA,EAAE,QAAQN,EAAM;"}

package/dist/chunks/lazy-img.directive.BeENE6S9.cjs

@@ -1,2 +0,0 @@
-"use strict";var m=Object.defineProperty;var g=(o,s,t)=>s in o?m(o,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[s]=t;var a=(o,s,t)=>g(o,typeof s!="symbol"?s+"":s,t);const u="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",d={baseClass:"m-lazy-img",loadedClass:"m-lazy-loaded",loadingClass:"m-lazy-loading",errorClass:"m-lazy-error",noPhotoClass:"m-lazy-no-photo",noPhoto:!1,observerOnce:!0,loadOnce:!1,noUseErrorPhoto:!1,observerOptions:{threshold:.1}};class c{constructor(s={}){a(this,"observers",[]);a(this,"defaultOptions",d);a(this,"options");a(this,"onImgLoadedCallback");a(this,"onImgErrorCallback");a(this,"hasImgLoaded",!1);this.options=this.buildOptions(s),this.onImgLoadedCallback=this.imageIsLoaded.bind(this),this.onImgErrorCallback=this.imageHasError.bind(this)}async loadErrorPhoto(){const{default:s}=await Promise.resolve().then(()=>require("./no-photography.CLNgmzDi.cjs"));return s}buildOptions(s){return{...this.defaultOptions,...s,observerOptions:{...this.defaultOptions.observerOptions,...s.observerOptions}}}removeClass(s,t){s.classList.remove(t)}addClass(s,t){s.classList.add(t)}removeAllStateClasses(s){this.removeClass(s,this.options.loadedClass),this.removeClass(s,this.options.loadingClass),this.removeClass(s,this.options.errorClass),this.removeClass(s,this.options.noPhotoClass)}setBaseClass(s){this.addClass(s,this.options.baseClass)}imageIsLoading(s){var t,e;this.addClass(s,this.options.loadingClass),(e=(t=this.options).onLoading)==null||e.call(t,s)}imageHasNoPhoto(s){this.removeClass(s,this.options.loadingClass),this.addClass(s,this.options.noPhotoClass),this.setDefaultPhoto(s)}imageIsLoaded(s){var t,e;this.hasImgLoaded=!0,this.removeClass(s,this.options.loadingClass),this.addClass(s,this.options.loadedClass),(e=(t=this.options).onLoaded)==null||e.call(t,s)}imageHasError(s){var t,e;this.removeClass(s,this.options.loadingClass),this.addClass(s,this.options.errorClass),(e=(t=this.options).onError)==null||e.call(t,s),this.setDefaultPhoto(s)}getSrc(s){return typeof s.value=="object"?s.value.src:s.value}getImageUrl(s,t){const e=this.getImgElement(s).getAttribute("data-lazy-src");return e||this.getSrc(t)}async setPictureSourceUrls(s){const t=s.querySelectorAll("source");if(t.length>0)for await(const e of t){const r=e.getAttribute("data-lazy-srcset");if(r)e.srcset=r;else return this.imageHasError(s)}else this.imageHasError(s)}hasBgImgMode(s){return s.arg==="bg-image"}isPictureElement(s){return s instanceof HTMLPictureElement}getImgElement(s){return this.isPictureElement(s)?s.querySelector("img"):s}async setDefaultPhoto(s){if(this.options.noUseErrorPhoto)return;const t=this.options.fallbackSrc??this.options.errorPhoto;typeof t=="string"&&this.addClass(s,this.options.noPhotoClass);const e=t??await this.loadErrorPhoto(),r=s.querySelectorAll("source");if(r.length>0)for await(const i of r)i.srcset=e;else this.setImgSrc(s,e)}addEventListenerToImg(s){const t=this.getImgElement(s);t.addEventListener("load",()=>this.onImgLoadedCallback(s),{once:!0}),t.addEventListener("error",e=>this.onImgErrorCallback(s,e),{once:!0})}async loadImage(s,t){if(this.imageIsLoading(s),this.isPictureElement(s))this.addEventListenerToImg(s),await this.setPictureSourceUrls(s);else{const e=this.getImageUrl(s,t);if(!e)return this.imageHasError(s);this.hasBgImgMode(t)?(s.style.backgroundImage=`url('${e}')`,this.imageIsLoaded(s)):(this.addEventListenerToImg(s),this.setImgSrc(s,e))}}setImgSrc(s,t){const e=this.getImgElement(s);e.src=t}handleIntersectionObserver(s,t,e,r){var i,n;this.observers.push(r);for(const h of e)if(h.isIntersecting){if((n=(i=this.options).onIntersecting)==null||n.call(i,h.target),this.options.observerOnce&&r.unobserve(s),this.options.loadOnce&&this.hasImgLoaded)return;this.loadImage(s,t)}}createObserver(s,t){const e=(n,h)=>{this.handleIntersectionObserver(s,t,n,h)},r=this.options.observerOptions;new IntersectionObserver(e,r).observe(s)}async imageHandler(s,t,e){if(e==="update")for await(const r of this.observers)r.unobserve(s);window.IntersectionObserver?this.createObserver(s,t):this.loadImage(s,t)}async bindUpdateHandler(s,t,e){if(this.options.noPhoto)return this.imageHasNoPhoto(s);await this.imageHandler(s,t,e)}async add(s,t){if(this.hasBgImgMode(t)&&this.isPictureElement(s))throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);setTimeout(()=>this.setBaseClass(s),0),s.getAttribute("src")||this.setImgSrc(s,u),await this.bindUpdateHandler(s,t,"bind")}async update(s,t){t.value!==t.oldValue&&(this.hasImgLoaded=!1,this.removeAllStateClasses(s),await this.bindUpdateHandler(s,t,"update"))}remove(s,t){this.hasImgLoaded=!1,this.hasBgImgMode(t)&&(s.style.backgroundImage=""),this.removeAllStateClasses(s);for(const e of this.observers)e.unobserve(s);this.observers=[]}}let l;const v={created(o,s){const t=typeof s.value=="object"?s.value:{};l=new c(t),l.add(o,s)},updated(o,s){l.update(o,s)},unmounted(o,s){l.remove(o,s)}};exports.DEFAULT_OPTIONS=d;exports.LazyImg=c;exports.directive=v;
-//# sourceMappingURL=lazy-img.directive.BeENE6S9.cjs.map

package/dist/chunks/lazy-img.directive.BeENE6S9.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"lazy-img.directive.BeENE6S9.cjs","sources":["../../src/directives/vLazyImg/lazy-img.handler.ts","../../src/directives/vLazyImg/lazy-img.directive.ts"],"sourcesContent":["import type { ClassOptions, vLazyImgBinding, vLazyImgOptions } from './types'\n\nexport * from './types'\n\nconst EMPTY_PHOTO = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'\n\nexport const DEFAULT_OPTIONS: ClassOptions = {\n  baseClass: 'm-lazy-img',\n  loadedClass: 'm-lazy-loaded',\n  loadingClass: 'm-lazy-loading',\n  errorClass: 'm-lazy-error',\n  noPhotoClass: 'm-lazy-no-photo',\n  noPhoto: false,\n  observerOnce: true,\n  loadOnce: false,\n  noUseErrorPhoto: false,\n  observerOptions: {\n    threshold: 0.1,\n  },\n}\n\nexport class LazyImg {\n  private observers: IntersectionObserver[] = []\n  private readonly defaultOptions: ClassOptions = DEFAULT_OPTIONS\n  private options: ClassOptions\n  private onImgLoadedCallback: (el: HTMLElement) => void\n  private onImgErrorCallback: (el: HTMLElement, err: ErrorEvent) => void\n  private hasImgLoaded = false\n\n  constructor(opts: vLazyImgOptions = {}) {\n    this.options = this.buildOptions(opts)\n    this.onImgLoadedCallback = this.imageIsLoaded.bind(this)\n    this.onImgErrorCallback = this.imageHasError.bind(this)\n  }\n\n  private async loadErrorPhoto() {\n    const { default: photo } = await import('../../../icons/no-photography.svg?url')\n    return photo\n  }\n\n  private buildOptions(opts: vLazyImgOptions): ClassOptions {\n    return {\n      ...this.defaultOptions,\n      ...opts,\n      observerOptions: {\n        ...this.defaultOptions.observerOptions,\n        ...opts.observerOptions,\n      },\n    }\n  }\n\n  private removeClass(el: HTMLElement, className: string) {\n    el.classList.remove(className)\n  }\n\n  private addClass(el: HTMLElement, className: string) {\n    el.classList.add(className)\n  }\n\n  private removeAllStateClasses(el: HTMLElement) {\n    this.removeClass(el, this.options.loadedClass)\n    this.removeClass(el, this.options.loadingClass)\n    this.removeClass(el, this.options.errorClass)\n    this.removeClass(el, this.options.noPhotoClass)\n  }\n\n  private setBaseClass(el: HTMLElement) {\n    this.addClass(el, this.options.baseClass)\n  }\n\n  private imageIsLoading(el: HTMLElement) {\n    this.addClass(el, this.options.loadingClass)\n    this.options.onLoading?.(el)\n  }\n\n  private imageHasNoPhoto(el: HTMLElement) {\n    this.removeClass(el, this.options.loadingClass)\n    this.addClass(el, this.options.noPhotoClass)\n\n    this.setDefaultPhoto(el)\n  }\n\n  private imageIsLoaded(el: HTMLElement): void {\n    this.hasImgLoaded = true\n    this.removeClass(el, this.options.loadingClass)\n    this.addClass(el, this.options.loadedClass)\n    this.options.onLoaded?.(el)\n  }\n\n  private imageHasError(el: HTMLElement): void {\n    this.removeClass(el, this.options.loadingClass)\n    this.addClass(el, this.options.errorClass)\n\n    this.options.onError?.(el)\n\n    this.setDefaultPhoto(el)\n  }\n\n  private getSrc(binding: vLazyImgBinding) {\n    return typeof binding.value === 'object' ? binding.value.src : binding.value\n  }\n\n  private getImageUrl(el: HTMLElement, binding: vLazyImgBinding): string | null | undefined {\n    const dataSrc = this.getImgElement(el).getAttribute('data-lazy-src')\n    if (dataSrc)\n      return dataSrc\n\n    return this.getSrc(binding)\n  }\n\n  private async setPictureSourceUrls(el: HTMLElement): Promise<void> {\n    const sourceElements = el.querySelectorAll('source')\n\n    if (sourceElements.length > 0) {\n      for await (const source of sourceElements) {\n        const srcSet = source.getAttribute('data-lazy-srcset')\n        if (srcSet) {\n          source.srcset = srcSet\n        }\n        else {\n          return this.imageHasError(el)\n        }\n      }\n    }\n    else {\n      this.imageHasError(el)\n    }\n  }\n\n  private hasBgImgMode(binding: vLazyImgBinding): boolean {\n    return binding.arg === 'bg-image'\n  }\n\n  private isPictureElement(el: HTMLElement): boolean {\n    return el instanceof HTMLPictureElement\n  }\n\n  private getImgElement(el: HTMLElement): HTMLImageElement {\n    const isPictureElement = this.isPictureElement(el)\n    return (isPictureElement ? el.querySelector('img') : el) as HTMLImageElement\n  }\n\n  private async setDefaultPhoto(el: HTMLElement) {\n    if (this.options.noUseErrorPhoto)\n      return\n\n    const fallbackSrc = this.options.fallbackSrc ?? this.options.errorPhoto\n\n    if (typeof fallbackSrc === 'string') {\n      this.addClass(el, this.options.noPhotoClass)\n    }\n\n    const errorPhoto = fallbackSrc ?? (await this.loadErrorPhoto())\n\n    const sourceElements = el.querySelectorAll('source')\n    if (sourceElements.length > 0) {\n      for await (const source of sourceElements) {\n        source.srcset = errorPhoto\n      }\n    }\n    else {\n      this.setImgSrc(el, errorPhoto)\n    }\n  }\n\n  private addEventListenerToImg(el: HTMLElement) {\n    const imgElement = this.getImgElement(el)\n    imgElement.addEventListener('load', () => this.onImgLoadedCallback(el), {\n      once: true,\n    })\n    imgElement.addEventListener('error', err => this.onImgErrorCallback(el, err), { once: true })\n  }\n\n  private async loadImage(el: HTMLElement, binding: vLazyImgBinding): Promise<void> {\n    this.imageIsLoading(el)\n\n    if (this.isPictureElement(el)) {\n      this.addEventListenerToImg(el)\n\n      await this.setPictureSourceUrls(el)\n    }\n    else {\n      const imageUrl = this.getImageUrl(el, binding)\n\n      if (!imageUrl)\n        return this.imageHasError(el)\n\n      if (this.hasBgImgMode(binding)) {\n        el.style.backgroundImage = `url('${imageUrl}')`\n        this.imageIsLoaded(el)\n      }\n      else {\n        this.addEventListenerToImg(el)\n\n        this.setImgSrc(el, imageUrl)\n      }\n    }\n  }\n\n  public setImgSrc(el: HTMLElement, src: string) {\n    const imgElement = this.getImgElement(el)\n    imgElement.src = src\n  }\n\n  private handleIntersectionObserver(\n    el: HTMLElement,\n    binding: vLazyImgBinding,\n    entries: IntersectionObserverEntry[],\n    observer: IntersectionObserver,\n  ) {\n    this.observers.push(observer)\n\n    for (const entry of entries) {\n      if (entry.isIntersecting) {\n        this.options.onIntersecting?.(entry.target)\n\n        if (this.options.observerOnce) {\n          observer.unobserve(el)\n        }\n\n        if (this.options.loadOnce && this.hasImgLoaded)\n          return\n        this.loadImage(el, binding)\n      }\n    }\n  }\n\n  private createObserver(el: HTMLElement, binding: vLazyImgBinding) {\n    const observerCallback = (\n      entries: IntersectionObserverEntry[],\n      intersectionObserver: IntersectionObserver,\n    ) => {\n      this.handleIntersectionObserver(el, binding, entries, intersectionObserver)\n    }\n\n    const observerOptions: ClassOptions['observerOptions'] = this.options.observerOptions\n    const observer = new IntersectionObserver(observerCallback, observerOptions)\n\n    observer.observe(el)\n  }\n\n  private async imageHandler(\n    el: HTMLElement,\n    binding: vLazyImgBinding,\n    type: 'bind' | 'update',\n  ): Promise<void> {\n    if (type === 'update') {\n      // Clean all previous observers\n      for await (const observer of this.observers) observer.unobserve(el)\n    }\n\n    if (window.IntersectionObserver) {\n      this.createObserver(el, binding)\n    }\n    else {\n      this.loadImage(el, binding)\n    }\n  }\n\n  private async bindUpdateHandler(\n    el: HTMLElement,\n    binding: vLazyImgBinding,\n    type: 'bind' | 'update',\n  ): Promise<void> {\n    if (this.options.noPhoto)\n      return this.imageHasNoPhoto(el)\n\n    await this.imageHandler(el, binding, type)\n  }\n\n  public async add(el: HTMLElement, binding: vLazyImgBinding): Promise<void> {\n    if (this.hasBgImgMode(binding) && this.isPictureElement(el)) {\n      throw new Error(`[MazLazyImg] You can't use the \"bg-image\" mode with \"<picture />\" element`)\n    }\n\n    setTimeout(() => this.setBaseClass(el), 0)\n\n    if (!el.getAttribute('src')) {\n      this.setImgSrc(el, EMPTY_PHOTO)\n    }\n\n    await this.bindUpdateHandler(el, binding, 'bind')\n  }\n\n  public async update(el: HTMLElement, binding: vLazyImgBinding): Promise<void> {\n    if (binding.value !== binding.oldValue) {\n      this.hasImgLoaded = false\n      this.removeAllStateClasses(el)\n\n      await this.bindUpdateHandler(el, binding, 'update')\n    }\n  }\n\n  public remove(el: HTMLElement, binding: vLazyImgBinding) {\n    this.hasImgLoaded = false\n    if (this.hasBgImgMode(binding)) {\n      el.style.backgroundImage = ''\n    }\n\n    this.removeAllStateClasses(el)\n\n    for (const observer of this.observers) {\n      observer.unobserve(el)\n    }\n\n    this.observers = []\n  }\n}\n","import type { ObjectDirective } from 'vue'\nimport { LazyImg, type vLazyImgBindingValue } from './lazy-img.handler'\n\nlet instance: LazyImg\n\nconst directive = {\n  created(el, binding) {\n    const options = typeof binding.value === 'object' ? binding.value : {}\n    instance = new LazyImg(options)\n    instance.add(el, binding)\n  },\n  updated(el, binding): void {\n    instance.update(el, binding)\n  },\n  unmounted(el, binding): void {\n    instance.remove(el, binding)\n  },\n} satisfies ObjectDirective<HTMLElement, vLazyImgBindingValue>\n\nexport { directive as vLazyImg }\n"],"names":["EMPTY_PHOTO","DEFAULT_OPTIONS","LazyImg","opts","__publicField","photo","el","className","_b","_a","binding","dataSrc","sourceElements","source","srcSet","fallbackSrc","errorPhoto","imgElement","err","imageUrl","src","entries","observer","entry","observerCallback","intersectionObserver","observerOptions","type","instance","directive","options"],"mappings":"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"}