maz-ui 3.5.0 → 3.6.1

package/components/MazAvatar.mjs

@@ -0,0 +1,656 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("@-webkit-keyframes maz-spin-503fe527{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes maz-spin-503fe527{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.m-spinner[data-v-503fe527]{-webkit-animation:maz-spin-503fe527 1s linear infinite;animation:maz-spin-503fe527 1s linear infinite;fill:currentColor;color:var(--maz-color-white);margin:0!important}.m-spinner--primary[data-v-503fe527]{color:var(--maz-color-primary)}.m-spinner--secondary[data-v-503fe527]{color:var(--maz-color-secondary)}.m-spinner--info[data-v-503fe527]{color:var(--maz-color-info)}.m-spinner--warning[data-v-503fe527]{color:var(--maz-color-warning)}.m-spinner--danger[data-v-503fe527]{color:var(--maz-color-danger)}.m-spinner--success[data-v-503fe527]{color:var(--maz-color-success)}.m-spinner--black[data-v-503fe527]{color:var(--maz-color-black)}.m-spinner--white[data-v-503fe527],.m-spinner--transparent[data-v-503fe527]{color:var(--maz-color-white)}.m-lazy-img-component[data-v-2dd96791]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background-color:var(--maz-color-bg-lighter);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-lazy-img-component-loader[data-v-2dd96791]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-lazy-img-component:not(.m-lazy-error,.m-lazy-no-photo) img[data-v-2dd96791]{height:100%;width:100%}.m-lazy-img-component.--height-full img[data-v-2dd96791]{max-height:100%!important;width:-webkit-min-content!important;width:-moz-min-content!important;width:min-content!important;max-width:-webkit-min-content!important;max-width:-moz-min-content!important;max-width:min-content!important}.m-lazy-img-component:not(.m-lazy-loaded,.m-lazy-no-photo) .m-lazy-img-component-loader[data-v-2dd96791]{display:-webkit-box;display:-ms-flexbox;display:flex}.m-avatar[data-v-319e07de]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration-line:none!important}.m-avatar__caption[data-v-319e07de]{margin-top:.5rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:1rem;line-height:1.5rem;font-weight:500;text-transform:capitalize}.m-avatar__initial[data-v-319e07de]{text-transform:capitalize;color:var(--maz-color-white);font-size:1.5em}.m-avatar__wrapper[data-v-319e07de]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:none;flex:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;border-radius:9999px;background-color:var(--maz-color-bg-lighter);height:3em;width:3em}.m-avatar__wrapper.--clickable .m-avatar__button[data-v-319e07de]{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;border-radius:var(--maz-border-radius);border-style:none;background-color:transparent;opacity:0;outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:scale(0);transform:scale(0)}.m-avatar__wrapper.--clickable .m-avatar__button__icon[data-v-319e07de]{color:var(--maz-color-white);height:1em;width:1em}.m-avatar__wrapper.--clickable:not(.--square) .m-avatar__button[data-v-319e07de]{border-radius:9999px}.m-avatar__wrapper.--clickable:hover .m-avatar__picture[data-v-319e07de],.m-avatar__wrapper.--clickable:focus .m-avatar__picture[data-v-319e07de]{-webkit-filter:blur(1.5px);filter:blur(1.5px)}.m-avatar__wrapper.--clickable:hover .m-avatar__button[data-v-319e07de],.m-avatar__wrapper.--clickable:focus .m-avatar__button[data-v-319e07de]{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}.m-avatar__wrapper.--bordered[data-v-319e07de]{border-width:2px;border-style:solid;border-color:var(--maz-color-white)}.m-avatar__wrapper.--square[data-v-319e07de]{border-radius:var(--maz-border-radius)}.m-avatar__wrapper.--has-shadow[data-v-319e07de]{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.m-avatar__wrapper.--has-initial[data-v-319e07de]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--maz-color-primary)}.m-avatar.--has-link[data-v-319e07de]{cursor:pointer}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, openBlock, createElementBlock, normalizeClass, pushScopeId, popScopeId, createElementVNode, computed, withDirectives, Fragment, renderList, unref, mergeProps, createVNode, createCommentVNode, renderSlot, inject, ref, onMounted, watchEffect, nextTick, createBlock, resolveDynamicComponent, withCtx, withKeys, toDisplayString, normalizeStyle } from "vue";
+const EMPTY_PHOTO = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const DEFAULT_OPTIONS = {
+  baseClass: "m-lazy-img",
+  loadedClass: "m-lazy-loaded",
+  loadingClass: "m-lazy-loading",
+  errorClass: "m-lazy-error",
+  noPhotoClass: "m-lazy-no-photo",
+  noPhoto: false,
+  observerOnce: true,
+  loadOnce: false,
+  noUseErrorPhoto: false,
+  observerOptions: {
+    threshold: 0.1
+  }
+};
+class LazyImg {
+  constructor(opts = {}) {
+    __publicField(this, "observers", []);
+    __publicField(this, "defaultOptions", DEFAULT_OPTIONS);
+    __publicField(this, "options");
+    __publicField(this, "onImgLoadedCallback");
+    __publicField(this, "onImgErrorCallback");
+    __publicField(this, "hasImgLoaded", false);
+    this.options = this.buildOptions(opts);
+    this.onImgLoadedCallback = this.imageIsLoaded.bind(this);
+    this.onImgErrorCallback = this.imageHasError.bind(this);
+  }
+  async loadErrorPhoto() {
+    const { default: photo } = await import("./no_photo-410a8f01.mjs");
+    return photo;
+  }
+  buildOptions(opts) {
+    return {
+      ...this.defaultOptions,
+      ...opts,
+      observerOptions: {
+        ...this.defaultOptions.observerOptions,
+        ...opts.observerOptions
+      }
+    };
+  }
+  removeClass(el, className) {
+    el.classList.remove(className);
+  }
+  addClass(el, className) {
+    el.classList.add(className);
+  }
+  removeAllStateClasses(el) {
+    this.removeClass(el, this.options.loadedClass);
+    this.removeClass(el, this.options.loadingClass);
+    this.removeClass(el, this.options.errorClass);
+    this.removeClass(el, this.options.noPhotoClass);
+  }
+  setBaseClass(el) {
+    this.addClass(el, this.options.baseClass);
+  }
+  imageIsLoading(el) {
+    var _a, _b;
+    this.addClass(el, this.options.loadingClass);
+    (_b = (_a = this.options).onLoading) == null ? void 0 : _b.call(_a, el);
+  }
+  imageHasNoPhoto(el) {
+    this.removeClass(el, this.options.loadingClass);
+    this.addClass(el, this.options.noPhotoClass);
+    this.setDefaultPhoto(el);
+  }
+  imageIsLoaded(el) {
+    var _a, _b;
+    this.hasImgLoaded = true;
+    this.removeClass(el, this.options.loadingClass);
+    this.addClass(el, this.options.loadedClass);
+    (_b = (_a = this.options).onLoaded) == null ? void 0 : _b.call(_a, el);
+  }
+  imageHasError(el, event) {
+    var _a, _b;
+    console.warn(`[maz-ui][MazLazyImg] Error while loading image`, event);
+    this.removeClass(el, this.options.loadingClass);
+    this.addClass(el, this.options.errorClass);
+    (_b = (_a = this.options).onError) == null ? void 0 : _b.call(_a, el);
+    this.setDefaultPhoto(el);
+  }
+  getImageUrl(el, binding) {
+    const dataSrc = this.getImgElement(el).getAttribute("data-src");
+    if (dataSrc)
+      return dataSrc;
+    const bindingSrc = typeof binding.value === "object" ? binding.value.src : binding.value;
+    if (!bindingSrc)
+      console.warn(`[maz-ui][MazLazyImg] src url is not defined`);
+    return bindingSrc;
+  }
+  async setPictureSourceUrls(el) {
+    const sourceElements = el.querySelectorAll("source");
+    if (sourceElements.length > 0) {
+      for await (const source of sourceElements) {
+        const srcSet = source.getAttribute("data-srcset");
+        if (srcSet) {
+          source.srcset = srcSet;
+        } else {
+          console.warn(
+            '[maz-ui][MazLazyImg] the "[data-srcset]" attribute is not provided on "<source />"'
+          );
+        }
+      }
+    } else {
+      console.warn(
+        '[maz-ui][MazLazyImg] No "<source />" elements provided into the "<picture />" element'
+      );
+      this.imageHasError(el);
+    }
+  }
+  hasBgImgMode(binding) {
+    return binding.arg === "bg-image";
+  }
+  isPictureElement(el) {
+    return el instanceof HTMLPictureElement;
+  }
+  getImgElement(el) {
+    const isPictureElement = this.isPictureElement(el);
+    return isPictureElement ? el.querySelector("img") : el;
+  }
+  async setDefaultPhoto(el) {
+    if (this.options.noUseErrorPhoto)
+      return;
+    const errorPhoto = this.options.errorPhoto ?? await this.loadErrorPhoto();
+    const sourceElements = el.querySelectorAll("source");
+    if (sourceElements.length > 0) {
+      for await (const source of sourceElements) {
+        source.srcset = errorPhoto;
+      }
+    } else {
+      this.setImgSrc(el, errorPhoto);
+    }
+  }
+  addEventListenerToImg(el) {
+    const imgElement = this.getImgElement(el);
+    imgElement.addEventListener("load", () => this.onImgLoadedCallback(el), {
+      once: true
+    });
+    imgElement.addEventListener(
+      "error",
+      (err) => this.onImgErrorCallback(el, err),
+      { once: true }
+    );
+  }
+  async loadImage(el, binding) {
+    this.imageIsLoading(el);
+    if (this.isPictureElement(el)) {
+      this.addEventListenerToImg(el);
+      await this.setPictureSourceUrls(el);
+    } else {
+      const imageUrl = this.getImageUrl(el, binding);
+      if (!imageUrl)
+        return this.imageHasError(el);
+      if (this.hasBgImgMode(binding)) {
+        el.style.backgroundImage = `url('${imageUrl}')`;
+        this.imageIsLoaded(el);
+      } else {
+        this.addEventListenerToImg(el);
+        this.setImgSrc(el, imageUrl);
+      }
+    }
+  }
+  setImgSrc(el, src) {
+    const imgElement = this.getImgElement(el);
+    imgElement.src = src;
+  }
+  handleIntersectionObserver(el, binding, entries, observer) {
+    var _a, _b;
+    this.observers.push(observer);
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        (_b = (_a = this.options).onIntersecting) == null ? void 0 : _b.call(_a, entry.target);
+        if (this.options.observerOnce) {
+          observer.unobserve(el);
+        }
+        if (this.options.loadOnce && this.hasImgLoaded)
+          return;
+        this.loadImage(el, binding);
+      }
+    }
+  }
+  createObserver(el, binding) {
+    const observerCallback = (entries, intersectionObserver) => {
+      this.handleIntersectionObserver(
+        el,
+        binding,
+        entries,
+        intersectionObserver
+      );
+    };
+    const observerOptions = this.options.observerOptions;
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    observer.observe(el);
+  }
+  async imageHandler(el, binding, type) {
+    if (type === "update") {
+      for await (const observer of this.observers)
+        observer.unobserve(el);
+    }
+    if (window.IntersectionObserver) {
+      this.createObserver(el, binding);
+    } else {
+      this.loadImage(el, binding);
+    }
+  }
+  async bindUpdateHandler(el, binding, type) {
+    if (this.options.noPhoto)
+      return this.imageHasNoPhoto(el);
+    await this.imageHandler(el, binding, type);
+  }
+  async add(el, binding) {
+    if (this.hasBgImgMode(binding) && this.isPictureElement(el)) {
+      throw new Error(
+        `[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`
+      );
+    }
+    setTimeout(() => this.setBaseClass(el), 0);
+    if (!el.getAttribute("src"))
+      this.setImgSrc(el, EMPTY_PHOTO);
+    await this.bindUpdateHandler(el, binding, "bind");
+  }
+  async update(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      this.hasImgLoaded = false;
+      this.removeAllStateClasses(el);
+      await this.bindUpdateHandler(el, binding, "update");
+    }
+  }
+  remove(el, binding) {
+    this.hasImgLoaded = false;
+    if (this.hasBgImgMode(binding))
+      el.style.backgroundImage = "";
+    this.removeAllStateClasses(el);
+    for (const observer of this.observers)
+      observer.unobserve(el);
+    this.observers = [];
+  }
+}
+let instance;
+const vLazyImg = {
+  created(el, binding) {
+    const options = typeof binding.value === "object" ? binding.value : {};
+    instance = new LazyImg(options);
+    instance.add(el, binding);
+  },
+  updated(el, binding) {
+    instance.update(el, binding);
+  },
+  unmounted(el, binding) {
+    instance.remove(el, binding);
+  }
+};
+const _withScopeId = (n) => (pushScopeId("data-v-503fe527"), n = n(), popScopeId(), n);
+const _hoisted_1$3 = ["width", "height"];
+const _hoisted_2$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, null, -1));
+const _hoisted_3$1 = [
+  _hoisted_2$2
+];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "MazSpinner",
+  props: {
+    size: { type: String, default: "2em" },
+    color: {
+      type: String,
+      default: "primary",
+      validator: (value) => {
+        return [
+          "info",
+          "white",
+          "success",
+          "warning",
+          "danger",
+          "primary",
+          "black",
+          "secondary",
+          "transparent"
+        ].includes(value);
+      }
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        width: __props.size,
+        height: __props.size,
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        x: "0px",
+        y: "0px",
+        viewBox: "0 0 50 50",
+        "xml:space": "preserve",
+        class: normalizeClass(["m-spinner", `m-spinner--${__props.color}`]),
+        style: { "enable-background": "new 0 0 50 50" }
+      }, _hoisted_3$1, 10, _hoisted_1$3);
+    };
+  }
+});
+const MazSpinner_vue_vue_type_style_index_0_scoped_503fe527_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const MazSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-503fe527"]]);
+const _hoisted_1$2 = ["data-srcset", "media"];
+const _hoisted_2$1 = {
+  key: 0,
+  class: "m-lazy-img-component-loader"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "MazLazyImg",
+  props: {
+    image: { type: [String, Object], default: void 0 },
+    noPhoto: { type: Boolean, default: false },
+    noLoader: { type: Boolean, default: false },
+    noObserverOnce: { type: Boolean, default: false },
+    loadOnce: { type: Boolean, default: false },
+    imageHeightFull: { type: Boolean, default: false },
+    observerOptions: { type: Object, default: null }
+  },
+  emits: ["intersecting", "loading", "loaded", "error"],
+  setup(__props) {
+    const props = __props;
+    const sources = computed(() => {
+      var _a;
+      return typeof props.image === "string" ? [{ srcset: props.image }] : (_a = props.image) == null ? void 0 : _a.sources;
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("picture", {
+        class: normalizeClass(["m-lazy-img-component", { "-use-loader": !__props.noLoader, "--height-full": __props.imageHeightFull }])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sources), ({ srcset, media }, sourceIndex) => {
+          return openBlock(), createElementBlock("source", {
+            key: sourceIndex,
+            "data-srcset": srcset,
+            media
+          }, null, 8, _hoisted_1$2);
+        }), 128)),
+        createElementVNode("img", mergeProps(_ctx.$attrs, { src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" }), null, 16),
+        !__props.noLoader ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          createVNode(MazSpinner, {
+            color: "black",
+            size: "2em"
+          })
+        ])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2)), [
+        [unref(vLazyImg), {
+          noPhoto: __props.noPhoto,
+          observerOnce: !__props.noObserverOnce,
+          loadOnce: __props.loadOnce,
+          onIntersecting: (el) => _ctx.$emit("intersecting", el),
+          onLoading: (el) => _ctx.$emit("loading", el),
+          onLoaded: (el) => _ctx.$emit("loaded", el),
+          onError: (el) => _ctx.$emit("error", el),
+          observerOptions: __props.observerOptions
+        }]
+      ]);
+    };
+  }
+});
+const MazLazyImg_vue_vue_type_style_index_0_scoped_2dd96791_lang = "";
+const MazLazyImg = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2dd96791"]]);
+function injectStrict(key, fallback) {
+  const resolved = inject(key, fallback);
+  if (!resolved) {
+    throw new Error(`[maz-ui](injectStrict) Could not resolve ${key}`);
+  }
+  return resolved;
+}
+const _hoisted_1$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MazIcon",
+  props: {
+    src: { type: String, default: void 0 },
+    path: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    size: { type: String, default: "1.5rem" },
+    title: { type: String, default: void 0 },
+    transformSource: {
+      type: Function,
+      default: (svg) => svg
+    }
+  },
+  emits: ["loaded", "unloaded", "error"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const cache = {};
+    const svgElSource = ref();
+    const svgElem = ref();
+    const getMazIconPath = () => {
+      try {
+        return injectStrict("mazIconPath");
+      } catch {
+        return void 0;
+      }
+    };
+    const iconPath = computed(() => props.path ?? getMazIconPath());
+    const fullSrc = computed(() => {
+      if (props.src) {
+        return props.src;
+      } else if (iconPath.value) {
+        return `${iconPath.value}/${props.name}.svg`;
+      } else {
+        return `/${props.name}.svg`;
+      }
+    });
+    onMounted(() => {
+      if (!props.name && !props.src) {
+        console.error(
+          '[maz-ui](MazIcon) you should provide "name" or "src" as prop'
+        );
+      }
+    });
+    const setTitle = (svg, title) => {
+      const titleTags = svg.querySelectorAll("title");
+      if (titleTags.length > 0) {
+        titleTags[0].textContent = title;
+      } else {
+        const titleEl = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "title"
+        );
+        titleEl.textContent = title;
+        svg.append(titleEl);
+      }
+    };
+    const filterAttrs = (attrs) => {
+      return Object.keys(attrs).reduce((result, key) => {
+        if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== void 0) {
+          result[key] = attrs[key];
+        }
+        return result;
+      }, {});
+    };
+    const getSvgAttrs = (svgEl) => {
+      const svgAttrs = {};
+      const attrs = svgEl.attributes;
+      if (!attrs) {
+        return svgAttrs;
+      }
+      for (let i = attrs.length - 1; i >= 0; i--) {
+        svgAttrs[attrs[i].name] = attrs[i].value;
+      }
+      return svgAttrs;
+    };
+    const getSvgContent = (svgEl) => {
+      let svgElNode = svgEl.cloneNode(true);
+      svgElNode = props.transformSource(svgEl);
+      if (props.title) {
+        setTitle(svgElNode, props.title);
+      }
+      return svgEl.innerHTML;
+    };
+    const getSource = async (src) => {
+      if (!cache[src]) {
+        cache[src] = download(src);
+      }
+      try {
+        svgElSource.value = await cache[src];
+        await nextTick();
+        emits("loaded", svgElem.value);
+      } catch (error) {
+        if (svgElSource.value) {
+          svgElSource.value = void 0;
+          emits("unloaded");
+        }
+        delete cache[src];
+        emits("error", error);
+      }
+    };
+    const download = (url) => {
+      return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.addEventListener("load", () => {
+          if (request.status >= 200 && request.status < 400) {
+            try {
+              const parser = new DOMParser();
+              const result = parser.parseFromString(
+                request.responseText,
+                "text/xml"
+              );
+              let svgEl = result.querySelectorAll("svg")[0];
+              if (svgEl) {
+                svgEl = props.transformSource(svgEl);
+                resolve(svgEl);
+              } else {
+                reject(new Error('Loaded file is not valid SVG"'));
+              }
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new Error("Error loading SVG"));
+          }
+        });
+        request.addEventListener("error", () => reject());
+        request.send();
+      });
+    };
+    watchEffect(() => getSource(fullSrc.value));
+    return (_ctx, _cache) => {
+      return svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
+        key: 0,
+        ref_key: "svgElem",
+        ref: svgElem,
+        width: "1em",
+        height: "1em"
+      }, {
+        ...getSvgAttrs(svgElSource.value),
+        ...filterAttrs(_ctx.$attrs)
+      }, {
+        style: `font-size: ${__props.size}`,
+        innerHTML: getSvgContent(svgElSource.value)
+      }), null, 16, _hoisted_1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+const PencilIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE1LjIzMiA1LjIzMmwzLjUzNiAzLjUzNm0tMi4wMzYtNS4wMzZhMi41IDIuNSAwIDExMy41MzYgMy41MzZMNi41IDIxLjAzNkgzdi0zLjU3MkwxNi43MzIgMy43MzJ6Ii8+Cjwvc3ZnPgo=";
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { class: "m-avatar__initial" };
+const _hoisted_3 = {
+  key: 0,
+  class: "m-avatar__caption"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazAvatar",
+  props: {
+    src: {
+      type: String,
+      default: void 0
+    },
+    caption: {
+      type: String,
+      default: void 0
+    },
+    href: { type: String, default: void 0 },
+    to: { type: Object, default: void 0 },
+    alt: { type: String, default: "avatar image" },
+    target: { type: String, default: "_self" },
+    size: { type: String, default: void 0 },
+    bordered: { type: Boolean, default: false },
+    clickable: { type: Boolean, default: false },
+    square: { type: Boolean, default: false },
+    noElevation: { type: Boolean, default: false },
+    showCaption: { type: Boolean, default: false },
+    imageHeightFull: { type: Boolean, default: false },
+    noLoader: { type: Boolean, default: false },
+    buttonColor: {
+      type: String,
+      default: "info",
+      validator: (value) => {
+        return [
+          "primary",
+          "secondary",
+          "info",
+          "success",
+          "warning",
+          "danger",
+          "white",
+          "black",
+          "transparent"
+        ].includes(value);
+      }
+    }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const componentType = computed(
+      () => props.to ? "RouterLink" : props.href ? "a" : "div"
+    );
+    const isLink = computed(() => !!props.to || !!props.href);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(componentType)), mergeProps({
+        style: { fontSize: __props.size },
+        class: ["m-avatar", [
+          {
+            "--has-link": unref(isLink)
+          }
+        ]]
+      }, _ctx.$attrs, {
+        href: __props.href,
+        to: __props.to,
+        target: unref(isLink) ? __props.target : void 0
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(["m-avatar__wrapper", {
+              "--has-shadow": !__props.noElevation,
+              "--bordered": __props.bordered,
+              "--clickable": __props.clickable,
+              "--square": __props.square,
+              "--has-initial": !__props.src && __props.caption
+            }]),
+            tabindex: __props.clickable ? 0 : -1,
+            onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => __props.clickable ? _ctx.$emit("click", $event) : void 0, ["enter"]))
+          }, [
+            __props.src ? (openBlock(), createBlock(MazLazyImg, {
+              key: 0,
+              class: "m-avatar__picture maz-max-w-full",
+              image: __props.src,
+              alt: __props.alt,
+              "image-height-full": "",
+              "no-loader": __props.noLoader,
+              onClick: _cache[0] || (_cache[0] = ($event) => __props.clickable ? _ctx.$emit("click", $event) : null)
+            }, null, 8, ["image", "alt", "no-loader"])) : createCommentVNode("", true),
+            __props.caption && !__props.src ? renderSlot(_ctx.$slots, "round-text", { key: 1 }, () => {
+              var _a;
+              return [
+                createElementVNode("span", _hoisted_2, toDisplayString((_a = __props.caption) == null ? void 0 : _a.charAt(0)), 1)
+              ];
+            }, true) : createCommentVNode("", true),
+            __props.clickable ? (openBlock(), createElementBlock("button", {
+              key: 2,
+              type: "button",
+              tabindex: "-1",
+              class: "m-avatar__button",
+              style: normalizeStyle({
+                backgroundColor: __props.src ? `var(--maz-color-${__props.buttonColor}-alpha)` : `var(--maz-color-${__props.buttonColor})`
+              }),
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
+            }, [
+              renderSlot(_ctx.$slots, "icon", {}, () => [
+                createVNode(_sfc_main$1, {
+                  src: unref(PencilIcon),
+                  class: "m-avatar__button__icon"
+                }, null, 8, ["src"])
+              ], true)
+            ], 4)) : createCommentVNode("", true)
+          ], 42, _hoisted_1),
+          renderSlot(_ctx.$slots, "caption", {}, () => [
+            __props.showCaption && __props.caption ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.caption), 1)) : createCommentVNode("", true)
+          ], true)
+        ]),
+        _: 3
+      }, 16, ["style", "class", "href", "to", "target"]);
+    };
+  }
+});
+const MazAvatar_vue_vue_type_style_index_0_scoped_319e07de_lang = "";
+const MazAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-319e07de"]]);
+export {
+  MazAvatar as default
+};