maz-ui 4.0.0-alpha.2 → 4.0.0-alpha.3

package/dist/components/MazAnimatedCounter.mjs

@@ -0,0 +1,78 @@
+import { defineComponent as B, ref as v, onMounted as C, onBeforeUnmount as T, watch as V, openBlock as $, createElementBlock as k, createElementVNode as z, renderSlot as i, createTextVNode as r, toDisplayString as a } from "vue";
+import { isClient as w } from "../helpers/isClient.mjs";
+import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazAnimatedCounter.DYYlw_wl.css';const I = { class: "maz-sr-only" }, R = /* @__PURE__ */ B({
+  __name: "MazAnimatedCounter",
+  props: {
+    count: {},
+    duration: { default: 1e3 },
+    prefix: { default: void 0 },
+    suffix: { default: void 0 },
+    delay: { default: 100 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(A) {
+    const o = A, s = v(0), u = v(null);
+    function g() {
+      return !w() || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
+    }
+    function h(e, n, l, x) {
+      const c = g();
+      if (!w()) {
+        s.value = n;
+        return;
+      }
+      s.value = e, setTimeout(() => {
+        const y = performance.now(), m = (M = performance.now()) => {
+          const _ = M - y, d = Math.min(_ / l, 1), q = (p) => p * (2 - p);
+          s.value = Math.round(
+            e + (n - e) * q(d)
+          ), d < 1 && c(m);
+        };
+        c(m);
+      }, x);
+    }
+    function f(e, n) {
+      h(e, n, o.duration, o.delay);
+    }
+    let t = null;
+    return C(() => {
+      o.once || (t = new IntersectionObserver(([e]) => {
+        e.isIntersecting && (f(0, o.count), o.once && (t == null || t.unobserve(e.target)));
+      }), u.value && t.observe(u.value));
+    }), T(() => t == null ? void 0 : t.disconnect()), V(
+      () => o.count,
+      (e, n) => {
+        if (e === n)
+          return;
+        f(n ?? 0, e);
+      },
+      { immediate: !0 }
+    ), (e, n) => ($(), k("span", {
+      ref_key: "elementRef",
+      ref: u,
+      class: "m-animated-counter m-reset-css"
+    }, [
+      z("span", I, [
+        i(e.$slots, "prefix", {}, () => [
+          r(a(e.prefix), 1)
+        ], !0),
+        r(a(e.count), 1),
+        i(e.$slots, "suffix", {}, () => [
+          r(a(e.suffix), 1)
+        ], !0)
+      ]),
+      i(e.$slots, "prefix", {}, () => [
+        r(a(e.prefix), 1)
+      ], !0),
+      r(a(s.value), 1),
+      i(e.$slots, "suffix", {}, () => [
+        r(a(e.suffix), 1)
+      ], !0)
+    ], 512));
+  }
+}), S = /* @__PURE__ */ F(R, [["__scopeId", "data-v-12027d34"]]);
+export {
+  S as default
+};
+//# sourceMappingURL=MazAnimatedCounter.mjs.map

package/dist/components/MazAnimatedCounter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAnimatedCounter.mjs","sources":["../../src/components/MazAnimatedCounter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { isClient } from '@helpers/isClient'\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nexport interface MazAnimatedCounterProps {\n  /**\n   * The number to animate\n   */\n  count: number\n  /**\n   * Duration of the animation in milliseconds\n   * @default 1000\n   */\n  duration?: number\n  /**\n   * Suffix to display next to the number\n   */\n  prefix?: string\n  /**\n   * Suffix to display next to the number\n   */\n  suffix?: string\n  /**\n   * Delay before the animation starts in milliseconds\n   * @default 100\n   */\n  delay?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<MazAnimatedCounterProps>(),\n  {\n    duration: 1000,\n    prefix: undefined,\n    suffix: undefined,\n    delay: 100,\n    once: true,\n  },\n)\n\nconst currentCount = ref(0)\n\nconst elementRef = ref<HTMLElement | null>(null)\n\nfunction getRequestAnimationFrame() {\n  /* Polyfill for server-side rendering */\n  if (!isClient() || !window.requestAnimationFrame) {\n    return (callback: FrameRequestCallback): number => {\n      setTimeout(callback, 1000 / 60)\n      return 0\n    }\n  }\n\n  return window.requestAnimationFrame.bind(window)\n}\n\nfunction animate(start: number, end: number, duration: number, delay: number) {\n  const requestAnim = getRequestAnimationFrame()\n\n  if (!isClient()) {\n    currentCount.value = end\n    return\n  }\n\n  currentCount.value = start\n  setTimeout(() => {\n    const startTime = performance.now()\n\n    const updateCount = (currentTime: number = performance.now()) => {\n      const elapsed = currentTime - startTime\n      const progress = Math.min(elapsed / duration, 1)\n\n      const easeOutQuad = (t: number) => t * (2 - t)\n\n      currentCount.value = Math.round(\n        start + (end - start) * easeOutQuad(progress),\n      )\n\n      if (progress < 1) {\n        requestAnim(updateCount)\n      }\n    }\n\n    requestAnim(updateCount)\n  }, delay)\n}\n\nfunction startAnimation(start: number, end: number) {\n  animate(start, end, props.duration, props.delay)\n}\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  if (props.once)\n    return\n\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      startAnimation(0, props.count)\n\n      if (props.once) {\n        observer?.unobserve(entry.target)\n      }\n    }\n  })\n\n  if (elementRef.value) {\n    observer.observe(elementRef.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nwatch(\n  () => props.count,\n  (newCount, oldCount) => {\n    if (newCount === oldCount) {\n      return\n    }\n\n    const startValue = oldCount ?? 0\n    startAnimation(startValue, newCount)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span ref=\"elementRef\" class=\"m-animated-counter m-reset-css\">\n    <span class=\"maz-sr-only\">\n      <slot name=\"prefix\">{{ prefix }}</slot>{{ count }}<slot name=\"suffix\">{{ suffix }}</slot>\n    </span>\n\n    <!-- Keep this on one line to avoid spacing issues (space between elements) -->\n    <slot name=\"prefix\">{{ prefix }}</slot>{{ currentCount }}<slot name=\"suffix\">{{ suffix }}</slot>\n  </span>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-animated-counter {\n  @apply maz-whitespace-nowrap maz-tabular-nums;\n}\n</style>\n"],"names":["props","__props","currentCount","ref","elementRef","getRequestAnimationFrame","isClient","callback","animate","start","end","duration","delay","requestAnim","startTime","updateCount","currentTime","elapsed","progress","easeOutQuad","t","startAnimation","observer","onMounted","entry","onBeforeUnmount","watch","newCount","oldCount"],"mappings":";;;;;;;;;;;;;;AAkCA,UAAMA,IAAQC,GAWRC,IAAeC,EAAI,CAAC,GAEpBC,IAAaD,EAAwB,IAAI;AAE/C,aAASE,IAA2B;AAElC,aAAI,CAACC,EAAA,KAAc,CAAC,OAAO,wBAClB,CAACC,OACK,WAAAA,GAAU,MAAO,EAAE,GACvB,KAIJ,OAAO,sBAAsB,KAAK,MAAM;AAAA,IAAA;AAGjD,aAASC,EAAQC,GAAeC,GAAaC,GAAkBC,GAAe;AAC5E,YAAMC,IAAcR,EAAyB;AAEzC,UAAA,CAACC,KAAY;AACf,QAAAJ,EAAa,QAAQQ;AACrB;AAAA,MAAA;AAGF,MAAAR,EAAa,QAAQO,GACrB,WAAW,MAAM;AACT,cAAAK,IAAY,YAAY,IAAI,GAE5BC,IAAc,CAACC,IAAsB,YAAY,UAAU;AAC/D,gBAAMC,IAAUD,IAAcF,GACxBI,IAAW,KAAK,IAAID,IAAUN,GAAU,CAAC,GAEzCQ,IAAc,CAACC,MAAcA,KAAK,IAAIA;AAE5C,UAAAlB,EAAa,QAAQ,KAAK;AAAA,YACxBO,KAASC,IAAMD,KAASU,EAAYD,CAAQ;AAAA,UAC9C,GAEIA,IAAW,KACbL,EAAYE,CAAW;AAAA,QAE3B;AAEA,QAAAF,EAAYE,CAAW;AAAA,SACtBH,CAAK;AAAA,IAAA;AAGD,aAAAS,EAAeZ,GAAeC,GAAa;AAClD,MAAAF,EAAQC,GAAOC,GAAKV,EAAM,UAAUA,EAAM,KAAK;AAAA,IAAA;AAGjD,QAAIsB,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAIvB,EAAM,SAGVsB,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAIA,EAAM,mBACOH,EAAA,GAAGrB,EAAM,KAAK,GAEzBA,EAAM,SACEsB,KAAA,QAAAA,EAAA,UAAUE,EAAM;AAAA,MAE9B,CACD,GAEGpB,EAAW,SACJkB,EAAA,QAAQlB,EAAW,KAAK;AAAA,IACnC,CACD,GAEeqB,EAAA,MAAMH,KAAA,gBAAAA,EAAU,YAAY,GAE5CI;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,CAAC2B,GAAUC,MAAa;AACtB,YAAID,MAAaC;AACf;AAIF,QAAAP,EADmBO,KAAY,GACJD,CAAQ;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazAnimatedElement.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAnimatedElement.BIRRN8k1.css');const t=require("vue"),s=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),o=t.defineComponent({__name:"MazAnimatedElement",props:{direction:{default:"up"},delay:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0}},setup(n){const l=t.computed(()=>`animate-slide-${n.direction}-blur`),i=t.ref();let a=null;return t.onMounted(()=>{a=new IntersectionObserver(([e])=>{e.isIntersecting?(e.target.classList.remove("--invisible"),e.target.classList.add(l.value),n.once===!0&&(a==null||a.unobserve(e.target))):n.once===!1&&(e.target.classList.add("--invisible"),e.target.classList.remove(l.value))}),i.value&&a.observe(i.value)}),t.onBeforeUnmount(()=>a==null?void 0:a.disconnect()),(e,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"element",ref:i,class:"m-animated-element m-reset-css --invisible",style:t.normalizeStyle({animationDuration:`${e.duration}ms`,animationDelay:`${e.delay}ms`})},[t.renderSlot(e.$slots,"default",{},void 0,!0)],4))}}),u=s._export_sfc(o,[["__scopeId","data-v-ce70833e"]]);exports.default=u;
+//# sourceMappingURL=MazAnimatedElement.cjs.map

package/dist/components/MazAnimatedElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAnimatedElement.cjs","sources":["../../src/components/MazAnimatedElement.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedElementProps {\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\nconst { direction = 'up', delay = 0, duration = 2000, once = true } = defineProps<MazAnimatedElementProps>()\n\nconst animatedClass = computed(() => `animate-slide-${direction}-blur`)\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      entry.target.classList.remove('--invisible')\n      entry.target.classList.add(animatedClass.value)\n      if (once === true) {\n        observer?.unobserve(entry.target)\n      }\n    }\n    else if (once === false) {\n      entry.target.classList.add('--invisible')\n      entry.target.classList.remove(animatedClass.value)\n    }\n  })\n\n  if (element.value) {\n    observer.observe(element.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div\n    ref=\"element\"\n    class=\"m-animated-element m-reset-css --invisible\" :style=\"{\n      animationDuration: `${duration}ms`,\n      animationDelay: `${delay}ms`,\n    }\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-element {\n  &.--invisible {\n    @apply maz-invisible;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-up-blur,\n.animate-slide-down-blur,\n.animate-slide-left-blur,\n.animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["animatedClass","computed","__props","element","ref","observer","onMounted","entry","onBeforeUnmount"],"mappings":"oWA6BA,MAAMA,EAAgBC,EAAAA,SAAS,IAAM,iBAAiBC,EAAA,SAAS,OAAO,EAEhEC,EAAUC,EAAAA,IAAoB,EAEpC,IAAIC,EAAwC,KAE5CC,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,IAAM,CAC3CA,EAAM,gBACFA,EAAA,OAAO,UAAU,OAAO,aAAa,EAC3CA,EAAM,OAAO,UAAU,IAAIP,EAAc,KAAK,EAC1CE,EAAA,OAAS,KACDG,GAAA,MAAAA,EAAA,UAAUE,EAAM,UAGrBL,SAAS,KACVK,EAAA,OAAO,UAAU,IAAI,aAAa,EACxCA,EAAM,OAAO,UAAU,OAAOP,EAAc,KAAK,EACnD,CACD,EAEGG,EAAQ,OACDE,EAAA,QAAQF,EAAQ,KAAK,CAChC,CACD,EAEeK,kBAAA,IAAMH,GAAA,YAAAA,EAAU,YAAY"}

package/dist/components/MazAnimatedElement.mjs

@@ -0,0 +1,34 @@
+import { defineComponent as l, computed as s, ref as o, onMounted as d, onBeforeUnmount as m, openBlock as r, createElementBlock as c, normalizeStyle as u, renderSlot as f } from "vue";
+import { _ as v } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazAnimatedElement.BIRRN8k1.css';const p = /* @__PURE__ */ l({
+  __name: "MazAnimatedElement",
+  props: {
+    direction: { default: "up" },
+    delay: { default: 0 },
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const i = s(() => `animate-slide-${a.direction}-blur`), n = o();
+    let t = null;
+    return d(() => {
+      t = new IntersectionObserver(([e]) => {
+        e.isIntersecting ? (e.target.classList.remove("--invisible"), e.target.classList.add(i.value), a.once === !0 && (t == null || t.unobserve(e.target))) : a.once === !1 && (e.target.classList.add("--invisible"), e.target.classList.remove(i.value));
+      }), n.value && t.observe(n.value);
+    }), m(() => t == null ? void 0 : t.disconnect()), (e, g) => (r(), c("div", {
+      ref_key: "element",
+      ref: n,
+      class: "m-animated-element m-reset-css --invisible",
+      style: u({
+        animationDuration: `${e.duration}ms`,
+        animationDelay: `${e.delay}ms`
+      })
+    }, [
+      f(e.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), B = /* @__PURE__ */ v(p, [["__scopeId", "data-v-ce70833e"]]);
+export {
+  B as default
+};
+//# sourceMappingURL=MazAnimatedElement.mjs.map

package/dist/components/MazAnimatedElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAnimatedElement.mjs","sources":["../../src/components/MazAnimatedElement.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, defineProps, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedElementProps {\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\nconst { direction = 'up', delay = 0, duration = 2000, once = true } = defineProps<MazAnimatedElementProps>()\n\nconst animatedClass = computed(() => `animate-slide-${direction}-blur`)\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      entry.target.classList.remove('--invisible')\n      entry.target.classList.add(animatedClass.value)\n      if (once === true) {\n        observer?.unobserve(entry.target)\n      }\n    }\n    else if (once === false) {\n      entry.target.classList.add('--invisible')\n      entry.target.classList.remove(animatedClass.value)\n    }\n  })\n\n  if (element.value) {\n    observer.observe(element.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div\n    ref=\"element\"\n    class=\"m-animated-element m-reset-css --invisible\" :style=\"{\n      animationDuration: `${duration}ms`,\n      animationDelay: `${delay}ms`,\n    }\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-element {\n  &.--invisible {\n    @apply maz-invisible;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.animate-slide-up-blur,\n.animate-slide-down-blur,\n.animate-slide-left-blur,\n.animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["animatedClass","computed","__props","element","ref","observer","onMounted","entry","onBeforeUnmount"],"mappings":";;;;;;;;;;;AA6BA,UAAMA,IAAgBC,EAAS,MAAM,iBAAiBC,EAAA,SAAS,OAAO,GAEhEC,IAAUC,EAAoB;AAEpC,QAAIC,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAAD,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAIA,EAAM,kBACFA,EAAA,OAAO,UAAU,OAAO,aAAa,GAC3CA,EAAM,OAAO,UAAU,IAAIP,EAAc,KAAK,GAC1CE,EAAA,SAAS,OACDG,KAAA,QAAAA,EAAA,UAAUE,EAAM,YAGrBL,WAAS,OACVK,EAAA,OAAO,UAAU,IAAI,aAAa,GACxCA,EAAM,OAAO,UAAU,OAAOP,EAAc,KAAK;AAAA,MACnD,CACD,GAEGG,EAAQ,SACDE,EAAA,QAAQF,EAAQ,KAAK;AAAA,IAChC,CACD,GAEeK,EAAA,MAAMH,KAAA,gBAAAA,EAAU,YAAY;;;;;;;;;;;;;"}

package/dist/components/MazAnimatedText.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAnimatedText.Dk4QO4xF.css');const e=require("vue"),p=require("../helpers/checkAvailability.cjs"),y=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),f={class:"m-reset-css m-animated-text"},k={class:"m-animated-text__last-word-inner"},v={class:"m-animated-text__last-word-inner-text"},g=e.defineComponent({inheritAttrs:!1,__name:"MazAnimatedText",props:{text:{},lastWord:{},delay:{default:0},direction:{default:"up"},tag:{default:"span"},wordDelay:{default:75},columnGap:{default:.5},rowGap:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0}},setup(l){const o=e.computed(()=>l.text.split(" ")),c=e.computed(()=>o.value.length),s=e.ref(!1),r=e.ref(!1),i=e.computed(()=>s.value?`maz-animate-slide-${l.direction}-blur`:"maz-invisible"),n=e.ref();let a=null;return e.onMounted(()=>{r.value=!0,a=new IntersectionObserver(([t])=>{s.value=t.isIntersecting,l.once&&n.value&&(a==null||a.unobserve(n.value))}),p.checkAvailability(()=>n.value,t=>{a==null||a.observe(t)})}),e.onBeforeUnmount(()=>a==null?void 0:a.disconnect()),(t,m)=>(e.openBlock(),e.createElementBlock("div",f,[r.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:0,ref_key:"element",ref:n},t.$attrs,{class:"m-animated-text__root",style:{columnGap:`${t.columnGap}rem`,rowGap:`${t.rowGap}rem`}}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(d,u)=>(e.openBlock(),e.createElementBlock("span",{key:d+u,class:"m-animated-text__word"},[e.createElementVNode("span",{class:e.normalizeClass(["m-animated-text__word-inner",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+u*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},e.toDisplayString(d),7)]))),128)),t.lastWord?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["m-animated-text__last-word",i.value]),style:e.normalizeStyle({animationDelay:`${t.delay+c.value*(t.wordDelay??150)}ms`,animationDuration:`${t.duration}ms`})},[e.createElementVNode("span",k,[m[0]||(m[0]=e.createElementVNode("span",{class:"m-animated-text__last-word-inner-gradient"},null,-1)),e.createElementVNode("span",v,e.toDisplayString(t.lastWord),1)])],6)):e.createCommentVNode("",!0)]),_:1},16,["style"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),e.mergeProps({key:1},t.$attrs,{class:"maz-invisible maz-inline-flex"}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text)+" ",1),t.lastWord?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.lastWord),1)],64)):e.createCommentVNode("",!0)]),_:1},16))]))}}),w=y._export_sfc(g,[["__scopeId","data-v-429dbc75"]]);exports.default=w;
+//# sourceMappingURL=MazAnimatedText.cjs.map

package/dist/components/MazAnimatedText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAnimatedText.cjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { checkAvailability } from '@helpers/checkAvailability'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":"gpBA2EA,MAAMA,EAAQC,EAAAA,SAAS,IAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,EAEtCC,EAAYF,EAAA,SAAS,IAAMD,EAAM,MAAM,MAAM,EAE7CI,EAAYC,MAAI,EAAK,EACrBC,EAAWD,MAAI,EAAK,EAEpBE,EAAgBN,EAAAA,SAAS,IAAMG,EAAU,MAAQ,qBAAqBF,EAAA,SAAS,QAAU,eAAe,EAExGM,EAAUH,EAAAA,IAAoB,EAEpC,IAAII,EAAwC,KAE5CC,OAAAA,EAAAA,UAAU,IAAM,CACdJ,EAAS,MAAQ,GAEjBG,EAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,IAAM,CAC/CP,EAAU,MAAQO,EAAM,eAEpBT,EAAI,MAAIM,EAAQ,QACRC,GAAA,MAAAA,EAAA,UAAUD,EAAQ,OAC9B,CACD,EAEDI,EAAAA,kBAAkB,IAAMJ,EAAQ,MAAQA,GAAY,CAClDC,GAAA,MAAAA,EAAU,QAAQD,EAAO,CAC1B,CAAA,CACF,EAEeK,kBAAA,IAAMJ,GAAA,YAAAA,EAAU,YAAY"}

package/dist/components/MazAnimatedText.mjs

@@ -0,0 +1,80 @@
+import { defineComponent as B, computed as r, ref as d, onMounted as W, onBeforeUnmount as b, openBlock as a, createElementBlock as n, createBlock as w, resolveDynamicComponent as _, mergeProps as k, withCtx as g, Fragment as D, renderList as A, createElementVNode as s, normalizeClass as $, normalizeStyle as z, toDisplayString as o, createCommentVNode as C, createTextVNode as h } from "vue";
+import { checkAvailability as V } from "../helpers/checkAvailability.mjs";
+import { _ as I } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazAnimatedText.Dk4QO4xF.css';const M = { class: "m-reset-css m-animated-text" }, N = { class: "m-animated-text__last-word-inner" }, T = { class: "m-animated-text__last-word-inner-text" }, x = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "MazAnimatedText",
+  props: {
+    text: {},
+    lastWord: {},
+    delay: { default: 0 },
+    direction: { default: "up" },
+    tag: { default: "span" },
+    wordDelay: { default: 75 },
+    columnGap: { default: 0.5 },
+    rowGap: { default: 0 },
+    duration: { default: 2e3 },
+    once: { type: Boolean, default: !0 }
+  },
+  setup(i) {
+    const m = r(() => i.text.split(" ")), G = r(() => m.value.length), u = d(!1), c = d(!1), p = r(() => u.value ? `maz-animate-slide-${i.direction}-blur` : "maz-invisible"), l = d();
+    let t = null;
+    return W(() => {
+      c.value = !0, t = new IntersectionObserver(([e]) => {
+        u.value = e.isIntersecting, i.once && l.value && (t == null || t.unobserve(l.value));
+      }), V(() => l.value, (e) => {
+        t == null || t.observe(e);
+      });
+    }), b(() => t == null ? void 0 : t.disconnect()), (e, f) => (a(), n("div", M, [
+      c.value ? (a(), w(_(e.tag), k({
+        key: 0,
+        ref_key: "element",
+        ref: l
+      }, e.$attrs, {
+        class: "m-animated-text__root",
+        style: { columnGap: `${e.columnGap}rem`, rowGap: `${e.rowGap}rem` }
+      }), {
+        default: g(() => [
+          (a(!0), n(D, null, A(m.value, (y, v) => (a(), n("span", {
+            key: y + v,
+            class: "m-animated-text__word"
+          }, [
+            s("span", {
+              class: $(["m-animated-text__word-inner", p.value]),
+              style: z({
+                animationDelay: `${e.delay + v * (e.wordDelay ?? 150)}ms`,
+                animationDuration: `${e.duration}ms`
+              })
+            }, o(y), 7)
+          ]))), 128)),
+          e.lastWord ? (a(), n("span", {
+            key: 0,
+            class: $(["m-animated-text__last-word", p.value]),
+            style: z({
+              animationDelay: `${e.delay + G.value * (e.wordDelay ?? 150)}ms`,
+              animationDuration: `${e.duration}ms`
+            })
+          }, [
+            s("span", N, [
+              f[0] || (f[0] = s("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
+              s("span", T, o(e.lastWord), 1)
+            ])
+          ], 6)) : C("", !0)
+        ]),
+        _: 1
+      }, 16, ["style"])) : (a(), w(_(e.tag), k({ key: 1 }, e.$attrs, { class: "maz-invisible maz-inline-flex" }), {
+        default: g(() => [
+          h(o(e.text) + " ", 1),
+          e.lastWord ? (a(), n(D, { key: 0 }, [
+            h(o(e.lastWord), 1)
+          ], 64)) : C("", !0)
+        ]),
+        _: 1
+      }, 16))
+    ]));
+  }
+}), L = /* @__PURE__ */ I(x, [["__scopeId", "data-v-429dbc75"]]);
+export {
+  L as default
+};
+//# sourceMappingURL=MazAnimatedText.mjs.map

package/dist/components/MazAnimatedText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAnimatedText.mjs","sources":["../../src/components/MazAnimatedText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { checkAvailability } from '@helpers/checkAvailability'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nexport interface MazAnimatedTextProps {\n  /**\n   * The text to animate\n   * @example \"Hello\"\n   */\n  text: string\n  /**\n   * The last word(s) to be highlighted\n   * @example \"world\"\n   */\n  lastWord?: string\n  /**\n   * The delay of the animation\n   * @default 0\n   */\n  delay?: number\n  /**\n   * The direction of the animation\n   * @default \"up\"\n   * @values \"up\", \"down\", \"left\", \"right\"\n   */\n  direction?: 'up' | 'down' | 'left' | 'right'\n  /**\n   * The tag to use for the text\n   * @default \"span\"\n   */\n  tag?: string\n  /**\n   * The delay between each word\n   * @default 75\n   */\n  wordDelay?: number\n  /**\n   * The column gap between each word\n   * @default 0.5\n   */\n  columnGap?: number\n  /**\n   * The row gap between each word\n   * @default 0\n   */\n  rowGap?: number\n  /**\n   * The duration of the animation\n   * @default 2000\n   */\n  duration?: number\n  /**\n   * Play the animation only once\n   * @default true\n   */\n  once?: boolean\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  text,\n  lastWord,\n  delay = 0,\n  wordDelay = 75,\n  direction = 'up',\n  tag = 'span',\n  columnGap = 0.5,\n  rowGap = 0,\n  duration = 2000,\n  once = true,\n} = defineProps<MazAnimatedTextProps>()\n\nconst words = computed(() => text.split(' '))\n\nconst wordCount = computed(() => words.value.length)\n\nconst isVisible = ref(false)\nconst isClient = ref(false)\n\nconst animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${direction}-blur` : 'maz-invisible')\n\nconst element = ref<HTMLDivElement>()\n\nlet observer: IntersectionObserver | null = null\n\nonMounted(() => {\n  isClient.value = true\n\n  observer = new IntersectionObserver(([entry]) => {\n    isVisible.value = entry.isIntersecting\n\n    if (once && element.value) {\n      observer?.unobserve(element.value)\n    }\n  })\n\n  checkAvailability(() => element.value, (element) => {\n    observer?.observe(element)\n  })\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div class=\"m-reset-css m-animated-text\">\n    <template v-if=\"isClient\">\n      <Component :is=\"tag\" ref=\"element\" v-bind=\"$attrs\" class=\"m-animated-text__root\" :style=\"{ columnGap: `${columnGap}rem`, rowGap: `${rowGap}rem` }\">\n        <span\n          v-for=\"(word, index) in words\"\n          :key=\"word + index\"\n          class=\"m-animated-text__word\"\n        >\n          <span\n            class=\"m-animated-text__word-inner\"\n            :class=\"animatedClass\"\n            :style=\"{\n              animationDelay: `${delay + (index * (wordDelay ?? 150))}ms`,\n              animationDuration: `${duration}ms`,\n            }\"\n          >\n            {{ word }}\n          </span>\n\n        </span>\n\n        <span\n          v-if=\"lastWord\"\n          class=\"m-animated-text__last-word\"\n          :class=\"animatedClass\"\n          :style=\"{\n            animationDelay: `${delay + (wordCount * (wordDelay ?? 150))}ms`,\n            animationDuration: `${duration}ms`,\n          }\"\n        >\n          <span class=\"m-animated-text__last-word-inner\">\n            <span class=\"m-animated-text__last-word-inner-gradient\" />\n            <span class=\"m-animated-text__last-word-inner-text\">{{ lastWord }}</span>\n          </span>\n        </span>\n      </Component>\n    </template>\n\n    <template v-else>\n      <component :is=\"tag\" v-bind=\"$attrs\" class=\"maz-invisible maz-inline-flex\">\n        {{ text }}\n\n        <template v-if=\"lastWord\">\n          {{ lastWord }}\n        </template>\n      </component>\n    </template>\n  </div>\n</template>\n\n<style scoped lang=\"postcss\">\n.m-animated-text {\n  &__root {\n    @apply maz-inline-flex maz-flex-wrap;\n  }\n\n  &__word {\n    @apply maz-inline-flex;\n  }\n\n  &__word-inner {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word {\n    @apply maz-inline-flex;\n  }\n\n  &__last-word-inner {\n    @apply maz-relative maz-inline-flex;\n  }\n\n  &__last-word-inner-gradient {\n    @apply maz-absolute maz-inset-0 maz-size-full maz-bg-gradient-to-r maz-from-primary maz-via-info maz-to-secondary maz-opacity-30 maz-blur-lg;\n  }\n\n  &__last-word-inner-text {\n    @apply maz-relative;\n  }\n}\n\n@keyframes slide-up-blur {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-down-blur {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-left-blur {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slide-right-blur {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n    filter: blur(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n.maz-animate-slide-up-blur {\n  animation: slide-up-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-down-blur {\n  animation: slide-down-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-left-blur {\n  animation: slide-left-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-right-blur {\n  animation: slide-right-blur cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n.maz-animate-slide-up-blur,\n.maz-animate-slide-down-blur,\n.maz-animate-slide-left-blur,\n.maz-animate-slide-right-blur {\n  opacity: 0;\n}\n</style>\n"],"names":["words","computed","__props","wordCount","isVisible","ref","isClient","animatedClass","element","observer","onMounted","entry","checkAvailability","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;AA2EA,UAAMA,IAAQC,EAAS,MAAMC,EAAI,KAAC,MAAM,GAAG,CAAC,GAEtCC,IAAYF,EAAS,MAAMD,EAAM,MAAM,MAAM,GAE7CI,IAAYC,EAAI,EAAK,GACrBC,IAAWD,EAAI,EAAK,GAEpBE,IAAgBN,EAAS,MAAMG,EAAU,QAAQ,qBAAqBF,EAAA,SAAS,UAAU,eAAe,GAExGM,IAAUH,EAAoB;AAEpC,QAAII,IAAwC;AAE5C,WAAAC,EAAU,MAAM;AACd,MAAAJ,EAAS,QAAQ,IAEjBG,IAAW,IAAI,qBAAqB,CAAC,CAACE,CAAK,MAAM;AAC/C,QAAAP,EAAU,QAAQO,EAAM,gBAEpBT,EAAI,QAAIM,EAAQ,UACRC,KAAA,QAAAA,EAAA,UAAUD,EAAQ;AAAA,MAC9B,CACD,GAEDI,EAAkB,MAAMJ,EAAQ,OAAO,CAACA,MAAY;AAClD,QAAAC,KAAA,QAAAA,EAAU,QAAQD;AAAAA,MAAO,CAC1B;AAAA,IAAA,CACF,GAEeK,EAAA,MAAMJ,KAAA,gBAAAA,EAAU,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazAvatar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazAvatar.L1UreldR.css');const o=require("vue"),g=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),b=["tabindex"],v=["src","alt","loading"],y={class:"m-avatar__initial"},C={key:0,class:"m-avatar__caption"},B=o.defineComponent({__name:"MazAvatar",props:{style:{},class:{},src:{default:void 0},caption:{default:void 0},href:{default:void 0},to:{default:void 0},alt:{default:"avatar image"},target:{default:"_self"},size:{default:void 0},bordered:{type:Boolean},clickable:{type:Boolean},square:{type:Boolean},noElevation:{type:Boolean},showCaption:{type:Boolean},imageHeightFull:{type:Boolean},noLoader:{type:Boolean},buttonColor:{default:"info"},noClickableIcon:{type:Boolean},letterCount:{default:void 0},roundedSize:{default:"full"},fallbackSrc:{default:void 0},noPhoto:{type:Boolean},loading:{default:"intersecting"}},emits:["click","intersecting","loading","loaded","error"],setup(n,{emit:i}){const l=n,s=i,c=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazLazyImg.cjs"))),d=o.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/pencil.TIXFeSep.cjs"))),u=o.computed(()=>l.to?"RouterLink":l.href?"a":"div"),r=o.computed(()=>!!l.to||!!l.href);function m(e,t=l.letterCount){return e.split(" ").map(k=>k[0]).join("").slice(0,t)}const p=o.computed(()=>l.src||!l.src&&!l.caption);function f(e){if(s("error",e.target),l.fallbackSrc&&e.target instanceof HTMLImageElement){const t=new URL(e.target.src),a=new URL(l.fallbackSrc);if(t.href===a.href)return;e.target.src=l.fallbackSrc}}return(e,t)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(u.value),{style:o.normalizeStyle([{fontSize:e.size},e.style]),class:o.normalizeClass(["m-avatar m-reset-css",[{"--has-link":r.value},l.class]]),href:e.href,to:e.to,target:r.value?e.target:void 0},{default:o.withCtx(()=>[o.createElementVNode("div",{class:o.normalizeClass(["m-avatar__wrapper",[{"--has-shadow":!e.noElevation,"--bordered":e.bordered,"--clickable":e.clickable,"--has-initial":!e.src&&e.caption},`--rounded-${e.square?"none":e.roundedSize}`]]),tabindex:e.clickable?0:-1},[p.value?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[e.loading==="intersecting"?(o.openBlock(),o.createBlock(o.unref(c),o.mergeProps({key:0},e.$attrs,{class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src,alt:e.alt,"no-photo":e.noPhoto,"image-height-full":"","no-loader":e.noLoader,"fallback-src":e.fallbackSrc,onClick:t[0]||(t[0]=a=>e.clickable?e.$emit("click",a):null),onError:t[1]||(t[1]=a=>e.$emit("error",a)),onLoaded:t[2]||(t[2]=a=>e.$emit("loaded",a)),onLoading:t[3]||(t[3]=a=>e.$emit("loading",a)),onIntersecting:t[4]||(t[4]=a=>e.$emit("intersecting",a))}),null,16,["src","alt","no-photo","no-loader","fallback-src"])):(o.openBlock(),o.createElementBlock("img",{key:1,class:"m-avatar__picture maz-w-full maz-max-w-full",src:e.src??e.fallbackSrc,alt:e.alt,loading:e.loading,onError:f},null,40,v))],64)):o.createCommentVNode("",!0),e.caption&&!e.src?o.renderSlot(e.$slots,"round-text",{key:1},()=>[o.createElementVNode("span",y,o.toDisplayString(m(e.caption)),1)],!0):o.createCommentVNode("",!0),e.clickable?(o.openBlock(),o.createElementBlock("button",{key:2,type:"button",tabindex:"-1",class:"m-avatar__button",style:o.normalizeStyle({backgroundColor:e.src?`var(--maz-color-${e.buttonColor}-alpha)`:`var(--maz-color-${e.buttonColor})`}),onClick:t[5]||(t[5]=a=>e.$emit("click",a))},[e.noClickableIcon?o.createCommentVNode("",!0):o.renderSlot(e.$slots,"icon",{key:0},()=>[o.createVNode(o.unref(d),{class:"m-avatar__button__icon"})],!0)],4)):o.createCommentVNode("",!0)],10,b),o.renderSlot(e.$slots,"caption",{},()=>[e.showCaption&&e.caption?(o.openBlock(),o.createElementBlock("p",C,o.toDisplayString(e.caption),1)):o.createCommentVNode("",!0)],!0)]),_:3},8,["style","class","href","to","target"]))}}),h=g._export_sfc(B,[["__scopeId","data-v-ba997cf5"]]);exports.default=h;
+//# sourceMappingURL=MazAvatar.cjs.map

package/dist/components/MazAvatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAvatar.cjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport type { HTMLAttributes } from 'vue'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('@components/MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('@icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":"69BAMA,MAAMA,EAAQC,EAeRC,EAAQC,EAaRC,EAAaC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAC5EC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAmB,CAAA,CAAC,EA0DnEE,EAAgBC,EAAAA,SAAS,IACzBR,EAAM,GACD,aACLA,EAAM,KACD,IACF,KACR,EACKS,EAASD,EAAS,SAAA,IAAM,CAAC,CAACR,EAAM,IAAM,CAAC,CAACA,EAAM,IAAI,EAExD,SAASU,EAAYC,EAAcC,EAAeZ,EAAM,YAAa,CAO5D,OANOW,EAAK,MAAM,GAAG,EAEL,IAAYE,GAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,EAAGD,CAAY,CAAA,CAGhC,MAAAE,EAAmBN,WAAS,IAAMR,EAAM,KAAQ,CAACA,EAAM,KAAO,CAACA,EAAM,OAAQ,EAEnF,SAASe,EAAiBC,EAAc,CAGtC,GAFMd,EAAA,QAASc,EAAM,MAAiB,EAElChB,EAAM,aAAegB,EAAM,kBAAkB,iBAAkB,CACjE,MAAMC,EAAa,IAAI,IAAID,EAAM,OAAO,GAAG,EACrCE,EAAc,IAAI,IAAIlB,EAAM,WAAW,EAEzC,GAAAiB,EAAW,OAASC,EAAY,KAClC,OAGIF,EAAA,OAAO,IAAMhB,EAAM,WAAA,CAC3B"}

package/dist/components/MazAvatar.mjs

@@ -0,0 +1,125 @@
+import { defineComponent as I, defineAsyncComponent as u, computed as i, openBlock as l, createBlock as c, resolveDynamicComponent as L, normalizeStyle as m, normalizeClass as f, withCtx as E, createElementVNode as p, createElementBlock as n, Fragment as M, unref as g, mergeProps as P, createCommentVNode as r, renderSlot as s, toDisplayString as k, createVNode as A } from "vue";
+import { _ as D } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazAvatar.L1UreldR.css';const N = ["tabindex"], R = ["src", "alt", "loading"], V = { class: "m-avatar__initial" }, q = {
+  key: 0,
+  class: "m-avatar__caption"
+}, F = /* @__PURE__ */ I({
+  __name: "MazAvatar",
+  props: {
+    style: {},
+    class: {},
+    src: { default: void 0 },
+    caption: { default: void 0 },
+    href: { default: void 0 },
+    to: { default: void 0 },
+    alt: { default: "avatar image" },
+    target: { default: "_self" },
+    size: { default: void 0 },
+    bordered: { type: Boolean },
+    clickable: { type: Boolean },
+    square: { type: Boolean },
+    noElevation: { type: Boolean },
+    showCaption: { type: Boolean },
+    imageHeightFull: { type: Boolean },
+    noLoader: { type: Boolean },
+    buttonColor: { default: "info" },
+    noClickableIcon: { type: Boolean },
+    letterCount: { default: void 0 },
+    roundedSize: { default: "full" },
+    fallbackSrc: { default: void 0 },
+    noPhoto: { type: Boolean },
+    loading: { default: "intersecting" }
+  },
+  emits: ["click", "intersecting", "loading", "loaded", "error"],
+  setup(b, { emit: y }) {
+    const t = b, v = y, h = u(() => import("./MazLazyImg.mjs")), C = u(() => import("../chunks/pencil.Cl_0Egfc.mjs")), z = i(() => t.to ? "RouterLink" : t.href ? "a" : "div"), d = i(() => !!t.to || !!t.href);
+    function S(e, o = t.letterCount) {
+      return e.split(" ").map((B) => B[0]).join("").slice(0, o);
+    }
+    const w = i(() => t.src || !t.src && !t.caption);
+    function $(e) {
+      if (v("error", e.target), t.fallbackSrc && e.target instanceof HTMLImageElement) {
+        const o = new URL(e.target.src), a = new URL(t.fallbackSrc);
+        if (o.href === a.href)
+          return;
+        e.target.src = t.fallbackSrc;
+      }
+    }
+    return (e, o) => (l(), c(L(z.value), {
+      style: m([{ fontSize: e.size }, e.style]),
+      class: f(["m-avatar m-reset-css", [
+        {
+          "--has-link": d.value
+        },
+        t.class
+      ]]),
+      href: e.href,
+      to: e.to,
+      target: d.value ? e.target : void 0
+    }, {
+      default: E(() => [
+        p("div", {
+          class: f(["m-avatar__wrapper", [
+            {
+              "--has-shadow": !e.noElevation,
+              "--bordered": e.bordered,
+              "--clickable": e.clickable,
+              "--has-initial": !e.src && e.caption
+            },
+            `--rounded-${e.square ? "none" : e.roundedSize}`
+          ]]),
+          tabindex: e.clickable ? 0 : -1
+        }, [
+          w.value ? (l(), n(M, { key: 0 }, [
+            e.loading === "intersecting" ? (l(), c(g(h), P({ key: 0 }, e.$attrs, {
+              class: "m-avatar__picture maz-w-full maz-max-w-full",
+              src: e.src,
+              alt: e.alt,
+              "no-photo": e.noPhoto,
+              "image-height-full": "",
+              "no-loader": e.noLoader,
+              "fallback-src": e.fallbackSrc,
+              onClick: o[0] || (o[0] = (a) => e.clickable ? e.$emit("click", a) : null),
+              onError: o[1] || (o[1] = (a) => e.$emit("error", a)),
+              onLoaded: o[2] || (o[2] = (a) => e.$emit("loaded", a)),
+              onLoading: o[3] || (o[3] = (a) => e.$emit("loading", a)),
+              onIntersecting: o[4] || (o[4] = (a) => e.$emit("intersecting", a))
+            }), null, 16, ["src", "alt", "no-photo", "no-loader", "fallback-src"])) : (l(), n("img", {
+              key: 1,
+              class: "m-avatar__picture maz-w-full maz-max-w-full",
+              src: e.src ?? e.fallbackSrc,
+              alt: e.alt,
+              loading: e.loading,
+              onError: $
+            }, null, 40, R))
+          ], 64)) : r("", !0),
+          e.caption && !e.src ? s(e.$slots, "round-text", { key: 1 }, () => [
+            p("span", V, k(S(e.caption)), 1)
+          ], !0) : r("", !0),
+          e.clickable ? (l(), n("button", {
+            key: 2,
+            type: "button",
+            tabindex: "-1",
+            class: "m-avatar__button",
+            style: m({
+              backgroundColor: e.src ? `var(--maz-color-${e.buttonColor}-alpha)` : `var(--maz-color-${e.buttonColor})`
+            }),
+            onClick: o[5] || (o[5] = (a) => e.$emit("click", a))
+          }, [
+            e.noClickableIcon ? r("", !0) : s(e.$slots, "icon", { key: 0 }, () => [
+              A(g(C), { class: "m-avatar__button__icon" })
+            ], !0)
+          ], 4)) : r("", !0)
+        ], 10, N),
+        s(e.$slots, "caption", {}, () => [
+          e.showCaption && e.caption ? (l(), n("p", q, k(e.caption), 1)) : r("", !0)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["style", "class", "href", "to", "target"]));
+  }
+}), G = /* @__PURE__ */ D(F, [["__scopeId", "data-v-ba997cf5"]]);
+export {
+  G as default
+};
+//# sourceMappingURL=MazAvatar.mjs.map

package/dist/components/MazAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazAvatar.mjs","sources":["../../src/components/MazAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport type { HTMLAttributes } from 'vue'\n\nimport { computed, defineAsyncComponent } from 'vue'\n\nconst props = withDefaults(defineProps<MazAvatarProps>(), {\n  src: undefined,\n  caption: undefined,\n  href: undefined,\n  to: undefined,\n  alt: 'avatar image',\n  target: '_self',\n  size: undefined,\n  buttonColor: 'info',\n  letterCount: undefined,\n  roundedSize: 'full',\n  fallbackSrc: undefined,\n  loading: 'intersecting',\n})\n\nconst emits = defineEmits<{\n  /** Emitted when the avatar is clicked */\n  (name: 'click', event: MouseEvent): void\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazLazyImg = defineAsyncComponent(() => import('@components/MazLazyImg.vue'))\nconst PencilIcon = defineAsyncComponent(() => import('@icons/pencil.svg'))\n\nexport interface MazAvatarProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** The source of the image */\n  src?: string | null\n  /** The caption of the avatar */\n  caption?: string | null\n  /** The link of the avatar */\n  href?: string\n  /** The link (router-link) of the avatar */\n  to?: string | Record<string, unknown>\n  /** The alt of the image */\n  alt?: string\n  /** The target of the link */\n  target?: string\n  /** The size of the avatar */\n  size?: string\n  /** Add a border to the avatar */\n  bordered?: boolean\n  /** Make the avatar clickable */\n  clickable?: boolean\n  /** Make the avatar square */\n  square?: boolean\n  /** Remove the shadow */\n  noElevation?: boolean\n  /** Show the caption */\n  showCaption?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** The color of the clickable button */\n  buttonColor?: Color\n  /** Remove the icon on hover when component is clickable */\n  noClickableIcon?: boolean\n  /** Number of letters to display in the round text */\n  letterCount?: number\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** Load the fallback image by default */\n  noPhoto?: boolean\n  /**\n   * The loading strategy of the image - lazy, eager or intersecting\n   * @default 'intersecting'\n   * @values `'lazy' | 'eager' | 'intersecting'`\n   */\n  loading?: 'lazy' | 'eager' | 'intersecting'\n}\n\nconst componentType = computed(() => {\n  if (props.to)\n    return 'RouterLink'\n  if (props.href)\n    return 'a'\n  return 'div'\n})\nconst isLink = computed(() => !!props.to || !!props.href)\n\nfunction getInitials(name: string, lettersCount = props.letterCount) {\n  const words = name.split(' ')\n\n  const initials = words.map(word => word[0])\n\n  const letters = initials.join('')\n\n  return letters.slice(0, lettersCount)\n}\n\nconst shouldDisplayImg = computed(() => props.src || (!props.src && !props.caption))\n\nfunction handleImageError(event: Event) {\n  emits('error', event.target as Element)\n\n  if (props.fallbackSrc && event.target instanceof HTMLImageElement) {\n    const currentSrc = new URL(event.target.src)\n    const fallbackSrc = new URL(props.fallbackSrc)\n\n    if (currentSrc.href === fallbackSrc.href) {\n      return\n    }\n\n    event.target.src = props.fallbackSrc\n  }\n}\n</script>\n\n<template>\n  <Component\n    :is=\"componentType\"\n    :style=\"[{ fontSize: size }, style]\"\n    class=\"m-avatar m-reset-css\"\n    :class=\"[\n      {\n        '--has-link': isLink,\n      },\n      props.class,\n    ]\"\n    :href\n    :to=\"to\"\n    :target=\"isLink ? target : undefined\"\n  >\n    <div\n      class=\"m-avatar__wrapper\"\n      :tabindex=\"clickable ? 0 : -1\"\n      :class=\"[\n        {\n          '--has-shadow': !noElevation,\n          '--bordered': bordered,\n          '--clickable': clickable,\n          '--has-initial': !src && caption,\n        },\n        `--rounded-${square ? 'none' : roundedSize}`,\n      ]\"\n    >\n      <template v-if=\"shouldDisplayImg\">\n        <MazLazyImg\n          v-if=\"loading === 'intersecting'\"\n          v-bind=\"$attrs\"\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src\n          :alt\n          :no-photo\n          image-height-full\n          :no-loader\n          :fallback-src\n          @click=\"clickable ? $emit('click', $event) : null\"\n          @error=\"$emit('error', $event)\"\n          @loaded=\"$emit('loaded', $event)\"\n          @loading=\"$emit('loading', $event)\"\n          @intersecting=\"$emit('intersecting', $event)\"\n        />\n        <img\n          v-else\n          class=\"m-avatar__picture maz-w-full maz-max-w-full\"\n          :src=\"src ?? fallbackSrc\"\n          :alt=\"alt\"\n          :loading\n          @error=\"handleImageError\"\n        >\n      </template>\n      <slot v-if=\"caption && !src\" name=\"round-text\">\n        <span class=\"m-avatar__initial\"> {{ getInitials(caption) }} </span>\n      </slot>\n\n      <button\n        v-if=\"clickable\"\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"m-avatar__button\"\n        :style=\"{\n          backgroundColor: src\n            ? `var(--maz-color-${buttonColor}-alpha)`\n            : `var(--maz-color-${buttonColor})`,\n        }\"\n        @click=\"$emit('click', $event)\"\n      >\n        <slot v-if=\"!noClickableIcon\" name=\"icon\">\n          <PencilIcon class=\"m-avatar__button__icon\" />\n        </slot>\n      </button>\n    </div>\n    <slot name=\"caption\">\n      <p v-if=\"showCaption && caption\" class=\"m-avatar__caption\">\n        {{ caption }}\n      </p>\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-avatar {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top maz-flex-center;\n  @apply !maz-no-underline;\n\n  &__caption {\n    @apply maz-w-full maz-truncate maz-text-center maz-font-medium maz-capitalize;\n  }\n\n  &__initial {\n    @apply maz-text-[1.5em] maz-capitalize maz-text-white;\n  }\n\n  &__wrapper {\n    @apply maz-relative maz-flex maz-h-[3em] maz-w-[3em] maz-flex-none maz-justify-center maz-overflow-hidden;\n\n    &.--clickable {\n      & .m-avatar__button {\n        @apply maz-absolute maz-inset-0 maz-flex maz-w-full\n            maz-cursor-pointer maz-border-none maz-bg-transparent\n            maz-opacity-0 maz-transition-all maz-duration-200 maz-flex-center;\n\n        transform: scale(0);\n\n        &__icon {\n          @apply maz-text-white;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        & .m-avatar__picture {\n          filter: blur(1.5px);\n        }\n\n        & .m-avatar__button {\n          @apply maz-opacity-100;\n\n          transform: scale(1.05);\n        }\n      }\n    }\n\n    &.--bordered {\n      @apply maz-border maz-border-solid maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n\n        .m-avatar__button {\n          @apply maz-rounded-sm;\n        }\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n\n        .m-avatar__button {\n          @apply maz-rounded-md;\n        }\n      }\n\n      &-lg {\n        @apply maz-rounded;\n\n        .m-avatar__button {\n          @apply maz-rounded-lg;\n        }\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n\n        .m-avatar__button {\n          @apply maz-rounded-xl;\n        }\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n\n        .m-avatar__button {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    &.--has-shadow {\n      @apply maz-shadow;\n    }\n\n    &.--has-initial {\n      @apply maz-items-center maz-bg-primary;\n    }\n  }\n\n  &.--has-link {\n    @apply maz-cursor-pointer;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazLazyImg","defineAsyncComponent","PencilIcon","componentType","computed","isLink","getInitials","name","lettersCount","word","shouldDisplayImg","handleImageError","event","currentSrc","fallbackSrc"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAeRC,IAAQC,GAaRC,IAAaC,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAC5EC,IAAaD,EAAqB,MAAM,OAAO,+BAAmB,CAAC,GA0DnEE,IAAgBC,EAAS,MACzBR,EAAM,KACD,eACLA,EAAM,OACD,MACF,KACR,GACKS,IAASD,EAAS,MAAM,CAAC,CAACR,EAAM,MAAM,CAAC,CAACA,EAAM,IAAI;AAExD,aAASU,EAAYC,GAAcC,IAAeZ,EAAM,aAAa;AAO5D,aANOW,EAAK,MAAM,GAAG,EAEL,IAAI,CAAQE,MAAAA,EAAK,CAAC,CAAC,EAEjB,KAAK,EAAE,EAEjB,MAAM,GAAGD,CAAY;AAAA,IAAA;AAGhC,UAAAE,IAAmBN,EAAS,MAAMR,EAAM,OAAQ,CAACA,EAAM,OAAO,CAACA,EAAM,OAAQ;AAEnF,aAASe,EAAiBC,GAAc;AAGtC,UAFMd,EAAA,SAASc,EAAM,MAAiB,GAElChB,EAAM,eAAegB,EAAM,kBAAkB,kBAAkB;AACjE,cAAMC,IAAa,IAAI,IAAID,EAAM,OAAO,GAAG,GACrCE,IAAc,IAAI,IAAIlB,EAAM,WAAW;AAEzC,YAAAiB,EAAW,SAASC,EAAY;AAClC;AAGI,QAAAF,EAAA,OAAO,MAAMhB,EAAM;AAAA,MAAA;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBackdrop.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBackdrop.C72SNI28.css');const t=require("vue"),A=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),V={role:"dialog",class:"m-backdrop-container","aria-modal":"true"},w={class:"m-backdrop-wrapper"},C="--backdrop-present",L=t.defineComponent({inheritAttrs:!1,__name:"MazBackdrop",props:{modelValue:{type:Boolean,default:!1},teleportSelector:{default:"body"},beforeClose:{type:Function,default:void 0},persistent:{type:Boolean,default:!1},noCloseOnEscKey:{type:Boolean,default:!1},transitionName:{default:"backdrop-anim"},backdropClass:{default:()=>{}},backdropContentClass:{default:()=>{}},contentPadding:{type:Boolean,default:!1},justify:{default:"none"},align:{default:"none"},variant:{}},emits:["open","close","update:model-value","before-close"],setup(o,{expose:E,emit:g}){const a=g;function B(){document.documentElement.classList.add(C)}function h(){document.querySelector(".m-backdrop.--present")||document.documentElement.classList.remove(C)}const s=t.ref(o.modelValue);function l(){m(!1)}async function m(e){var n;e||(a("before-close"),await((n=o.beforeClose)==null?void 0:n.call(o))),s.value=e}function p(){a("open")}function k(){a("update:model-value",!1),a("close"),i()}function c(){o.persistent||l()}function d(e){!o.noCloseOnEscKey&&e.key==="Escape"&&!o.persistent&&l()}function v(){B(),document.addEventListener("keyup",d,!1)}function i(){document.removeEventListener("keyup",d),h()}t.onMounted(()=>{o.modelValue?v():i()});let r=null;function S(e){const n=document.querySelector(e),u=n&&Array.from(n.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')),f=u==null?void 0:u.filter(b=>{const y=window.getComputedStyle(b);return y.display!=="none"&&y.visibility!=="hidden"&&!b.disabled});return f&&f.length>0?f[0]:null}return t.watch(()=>o.modelValue,async e=>{if(s.value=e,e){v(),r=document.activeElement,await t.nextTick();const n=S(".m-backdrop-content");n==null||n.focus()}else i(),await t.nextTick(),r==null||r.focus()}),E({onBackdropAnimationEnter:p,onBackdropAnimationLeave:k,onBackdropClicked:c,close:l,present:s,toggleModal:m,onKeyPress:d}),(e,n)=>(t.openBlock(),t.createBlock(t.Teleport,{to:e.teleportSelector},[t.createVNode(t.Transition,{appear:"",name:e.transitionName,onAfterEnter:p,onAfterLeave:k},{default:t.withCtx(()=>[s.value?(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:0,class:"m-backdrop --present m-reset-css"},e.$attrs,{class:[e.backdropClass,e.variant&&`--variant-${e.variant}`,{"--persistent":e.persistent}]}),[t.createElementVNode("div",V,[t.createElementVNode("div",w,[t.createElementVNode("div",{class:t.normalizeClass(["m-backdrop-content",[e.backdropContentClass,`--justify-${e.justify}`,`--align-${e.align}`,{"--padding":e.contentPadding}]]),role:"button",tabindex:"-1",onClick:t.withModifiers(c,["self"])},[t.renderSlot(e.$slots,"default",{close:l,onBackdropClicked:c},void 0,!0)],2)])])],16)):t.createCommentVNode("",!0)]),_:3},8,["name"])],8,["to"]))}}),M=A._export_sfc(L,[["__scopeId","data-v-f2ffa088"]]);exports.default=M;
+//# sourceMappingURL=MazBackdrop.cjs.map

package/dist/components/MazBackdrop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBackdrop.cjs","sources":["../../src/components/MazBackdrop.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type HTMLAttributes, nextTick, onMounted, ref, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  modelValue = false,\n  teleportSelector = 'body',\n  beforeClose = undefined,\n  persistent = false,\n  noCloseOnEscKey = false,\n  transitionName = 'backdrop-anim',\n  backdropClass = undefined,\n  backdropContentClass = undefined,\n  contentPadding = false,\n  justify = 'none',\n  align = 'none',\n} = defineProps<MazBackdropProps>()\n\nconst emits = defineEmits<{\n  /** emitted when modal is open */\n  'open': [value: void]\n  /** emitted when modal is close */\n  'close': [value: void]\n  /** emitted when modal is open or close */\n  'update:model-value': [value: boolean]\n  /** emitted before modal is close */\n  'before-close': [value: void]\n}>()\n\nconst MODAL_OPENED_CLASS = '--backdrop-present'\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add(MODAL_OPENED_CLASS)\n}\n\nfunction removeClassFromDocument() {\n  const backdropPresents = document.querySelector('.m-backdrop.--present')\n\n  if (!backdropPresents) {\n    document.documentElement.classList.remove(MODAL_OPENED_CLASS)\n  }\n}\n\nexport interface MazBackdropProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Teleport selector */\n  teleportSelector?: string\n  /** Function called before modal is close */\n  beforeClose?: () => Promise<void> | void\n  /** Persistent dialog (not closable by clicking outside and remove close button) */\n  persistent?: boolean\n  /** Prevent close on escape key */\n  noCloseOnEscKey?: boolean\n  /** Transition name */\n  transitionName?: string\n  /** Backdrop class */\n  backdropClass?: HTMLAttributes['class']\n  /** Backdrop content class */\n  backdropContentClass?: HTMLAttributes['class']\n  /** Add padding to the content */\n  contentPadding?: boolean\n  /** Justify content */\n  justify?: 'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'none'\n  /** Align content */\n  align?: 'center' | 'end' | 'start' | 'none'\n  /** Variant */\n  variant?: 'bottom-sheet' | 'dialog' | 'drawer'\n}\n\nconst present = ref(modelValue)\n\nfunction close() {\n  toggleModal(false)\n}\n\nasync function toggleModal(value) {\n  if (!value) {\n    emits('before-close')\n    await beforeClose?.()\n  }\n\n  present.value = value\n}\n\nfunction onBackdropAnimationEnter() {\n  emits('open')\n}\n\nfunction onBackdropAnimationLeave() {\n  emits('update:model-value', false)\n  emits('close')\n  removeClassAndEventToDocument()\n}\n\nfunction onBackdropClicked() {\n  if (!persistent) {\n    close()\n  }\n}\n\nfunction onKeyPress(event: KeyboardEvent) {\n  if (!noCloseOnEscKey && event.key === 'Escape' && !persistent) {\n    close()\n  }\n}\n\nfunction addClassAndEventToDocument() {\n  addClassToDocument()\n  document.addEventListener('keyup', onKeyPress, false)\n}\n\nfunction removeClassAndEventToDocument() {\n  document.removeEventListener('keyup', onKeyPress)\n  removeClassFromDocument()\n}\n\nonMounted(() => {\n  if (modelValue) {\n    addClassAndEventToDocument()\n  }\n  else {\n    removeClassAndEventToDocument()\n  }\n})\n\nlet initialFocusableElement: HTMLElement | null = null\n\nfunction findFirstFocusableElement(selector: string) {\n  const modal = document.querySelector(selector)\n  const focusableElements = 'a[href], button, textarea, input[type=\"text\"], input[type=\"radio\"], input[type=\"checkbox\"], select'\n\n  const focusableElementsArray = modal && Array.from(modal.querySelectorAll<HTMLLinkElement | HTMLButtonElement | HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement>(focusableElements))\n\n  const visibleFocusableElements = focusableElementsArray?.filter((el) => {\n    const style = window.getComputedStyle(el)\n    return style.display !== 'none' && style.visibility !== 'hidden' && !el.disabled\n  })\n\n  return visibleFocusableElements && visibleFocusableElements.length > 0 ? visibleFocusableElements[0] : null\n}\n\nwatch(\n  () => modelValue,\n  async (value) => {\n    present.value = value\n\n    if (value) {\n      addClassAndEventToDocument()\n\n      initialFocusableElement = document.activeElement as HTMLElement | null\n\n      await nextTick()\n      const firstFocusableElement = findFirstFocusableElement('.m-backdrop-content')\n      firstFocusableElement?.focus()\n    }\n    else {\n      removeClassAndEventToDocument()\n\n      await nextTick()\n      initialFocusableElement?.focus()\n    }\n  },\n)\n\ndefineExpose({\n  onBackdropAnimationEnter,\n  onBackdropAnimationLeave,\n  onBackdropClicked,\n  close,\n  present,\n  toggleModal,\n  onKeyPress,\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportSelector\">\n    <Transition\n      appear\n      :name=\"transitionName\"\n      @after-enter=\"onBackdropAnimationEnter\"\n      @after-leave=\"onBackdropAnimationLeave\"\n    >\n      <div v-if=\"present\" class=\"m-backdrop --present m-reset-css\" v-bind=\"$attrs\" :class=\"[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]\">\n        <div role=\"dialog\" class=\"m-backdrop-container\" aria-modal=\"true\">\n          <div class=\"m-backdrop-wrapper\">\n            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->\n            <div\n              class=\"m-backdrop-content\"\n              :class=\"[backdropContentClass, `--justify-${justify}`, `--align-${align}`, { '--padding': contentPadding }]\"\n              role=\"button\"\n              tabindex=\"-1\"\n              @click.self=\"onBackdropClicked\"\n            >\n              <!-- @slot Place your content here\n                @binding {Function} close close function\n                @binding {Function} on-backdrop-clicked onBackdropClicked function (respects persistent prop)\n              -->\n              <slot :close=\"close\" :on-backdrop-clicked=\"onBackdropClicked\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style lang=\"postcss\">\nhtml.--backdrop-present {\n  overflow-y: hidden;\n  height: 100vh !important;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n.m-backdrop {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-bg-overlay;\n\n  backdrop-filter: blur(4px);\n\n  &.--persistent {\n    & .m-backdrop-content {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &-container {\n    @apply maz-fixed maz-inset-0 maz-z-default-backdrop;\n  }\n\n  &-wrapper {\n    @apply maz-fixed maz-inset-0 maz-overflow-y-auto;\n  }\n\n  &-content {\n    @apply maz-flex maz-min-h-full tab-s:maz-items-center tab-s:maz-p-0 maz-items-end;\n\n    &.--padding {\n      @apply maz-p-4;\n    }\n\n    &.--justify-center {\n      @apply maz-justify-center;\n    }\n\n    &.--justify-end {\n      @apply maz-justify-end;\n    }\n\n    &.--justify-start {\n      @apply maz-justify-start;\n    }\n\n    &.--justify-space-between {\n      @apply maz-justify-between;\n    }\n\n    &.--justify-space-around {\n      @apply maz-justify-around;\n    }\n\n    &.--align-center {\n      @apply maz-items-center;\n    }\n\n    &.--align-end {\n      @apply maz-items-end;\n    }\n\n    &.--align-start {\n      @apply maz-items-start;\n    }\n\n    > * {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &.--variant-bottom-sheet {\n    .m-backdrop-content {\n      @apply maz-fixed maz-inset-0;\n    }\n  }\n\n  &.--variant-drawer {\n    .m-backdrop-content {\n      @apply maz-fixed maz-inset-0;\n    }\n  }\n\n  /*\n* Animations\n*/\n  &.bottom-sheet-anim-enter-active,\n  &.bottom-sheet-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.bottom-sheet-anim-enter-from,\n  &.bottom-sheet-anim-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(100%);\n    }\n  }\n\n  &.modal-anim-enter-active,\n  &.modal-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.modal-anim-enter-from,\n  &.modal-anim-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: scale(0.5);\n    }\n  }\n\n  &.drawer-anim-top-enter-active,\n  &.drawer-anim-top-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-top-enter-from,\n  &.drawer-anim-top-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(-100%);\n    }\n  }\n\n  &.drawer-anim-bottom-enter-active,\n  &.drawer-anim-bottom-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-bottom-enter-from,\n  &.drawer-anim-bottom-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(100%);\n    }\n  }\n\n  &.drawer-anim-left-enter-active,\n  &.drawer-anim-left-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-left-enter-from,\n  &.drawer-anim-left-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateX(-100%);\n    }\n  }\n\n  &.drawer-anim-right-enter-active,\n  &.drawer-anim-right-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-right-enter-from,\n  &.drawer-anim-right-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateX(100%);\n    }\n  }\n\n  &.backdrop-anim-enter-active,\n  &.backdrop-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n  }\n\n  &.backdrop-anim-enter-from,\n  &.backdrop-anim-leave-to {\n    opacity: 0;\n  }\n}\n</style>\n"],"names":["MODAL_OPENED_CLASS","emits","__emit","addClassToDocument","removeClassFromDocument","present","ref","__props","close","toggleModal","value","_a","onBackdropAnimationEnter","onBackdropAnimationLeave","removeClassAndEventToDocument","onBackdropClicked","onKeyPress","event","addClassAndEventToDocument","onMounted","initialFocusableElement","findFirstFocusableElement","selector","modal","focusableElementsArray","visibleFocusableElements","el","style","watch","nextTick","firstFocusableElement","__expose"],"mappings":"mSAgCMA,EAAqB,gkBAX3B,MAAMC,EAAQC,EAad,SAASC,GAAqB,CACnB,SAAA,gBAAgB,UAAU,IAAIH,CAAkB,CAAA,CAG3D,SAASI,GAA0B,CACR,SAAS,cAAc,uBAAuB,GAG5D,SAAA,gBAAgB,UAAU,OAAOJ,CAAkB,CAC9D,CA8BI,MAAAK,EAAUC,EAAAA,IAAIC,EAAU,UAAA,EAE9B,SAASC,GAAQ,CACfC,EAAY,EAAK,CAAA,CAGnB,eAAeA,EAAYC,EAAO,OAC3BA,IACHT,EAAM,cAAc,EACpB,OAAMU,EAAAJ,EAAA,cAAA,YAAAI,EAAA,KAAAJ,KAGRF,EAAQ,MAAQK,CAAA,CAGlB,SAASE,GAA2B,CAClCX,EAAM,MAAM,CAAA,CAGd,SAASY,GAA2B,CAClCZ,EAAM,qBAAsB,EAAK,EACjCA,EAAM,OAAO,EACiBa,EAAA,CAAA,CAGhC,SAASC,GAAoB,CACtBR,EAAA,YACGC,EAAA,CACR,CAGF,SAASQ,EAAWC,EAAsB,CACpC,CAACV,mBAAmBU,EAAM,MAAQ,UAAY,CAACV,EAAA,YAC3CC,EAAA,CACR,CAGF,SAASU,GAA6B,CACjBf,EAAA,EACV,SAAA,iBAAiB,QAASa,EAAY,EAAK,CAAA,CAGtD,SAASF,GAAgC,CAC9B,SAAA,oBAAoB,QAASE,CAAU,EACxBZ,EAAA,CAAA,CAG1Be,EAAAA,UAAU,IAAM,CACVZ,EAAA,WACyBW,EAAA,EAGGJ,EAAA,CAChC,CACD,EAED,IAAIM,EAA8C,KAElD,SAASC,EAA0BC,EAAkB,CAC7C,MAAAC,EAAQ,SAAS,cAAcD,CAAQ,EAGvCE,EAAyBD,GAAS,MAAM,KAAKA,EAAM,iBAF/B,oGAEmK,CAAC,EAExLE,EAA2BD,GAAA,YAAAA,EAAwB,OAAQE,GAAO,CAChE,MAAAC,EAAQ,OAAO,iBAAiBD,CAAE,EACxC,OAAOC,EAAM,UAAY,QAAUA,EAAM,aAAe,UAAY,CAACD,EAAG,QAAA,GAG1E,OAAOD,GAA4BA,EAAyB,OAAS,EAAIA,EAAyB,CAAC,EAAI,IAAA,CAGzGG,OAAAA,EAAA,MACE,IAAMrB,EAAU,WAChB,MAAOG,GAAU,CAGf,GAFAL,EAAQ,MAAQK,EAEZA,EAAO,CACkBQ,EAAA,EAE3BE,EAA0B,SAAS,cAEnC,MAAMS,WAAS,EACT,MAAAC,EAAwBT,EAA0B,qBAAqB,EAC7ES,GAAA,MAAAA,EAAuB,OAAM,MAGChB,EAAA,EAE9B,MAAMe,WAAS,EACfT,GAAA,MAAAA,EAAyB,OAC3B,CAEJ,EAEaW,EAAA,CACX,yBAAAnB,EACA,yBAAAC,EACA,kBAAAE,EACA,MAAAP,EACA,QAAAH,EACA,YAAAI,EACA,WAAAO,CAAA,CACD"}