maz-ui 3.46.1-beta.3 → 3.46.1-beta.4

package/components/chunks/MazPhoneNumberInput-BbeofPj5.mjs

@@ -0,0 +1,1821 @@
+import '../assets/MazPhoneNumberInput.css';var Ge = Object.defineProperty;
+var Je = (n, o, e) => o in n ? Ge(n, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[o] = e;
+var _ = (n, o, e) => Je(n, typeof o != "symbol" ? o + "" : o, e);
+import { useId as Ze, computed as h, inject as Xe, defineComponent as se, defineAsyncComponent as q, withDirectives as ze, openBlock as b, createElementBlock as L, normalizeClass as F, normalizeStyle as ee, Fragment as be, renderList as Be, createElementVNode as j, mergeProps as oe, createVNode as H, unref as E, createCommentVNode as z, renderSlot as N, ref as k, onMounted as Ie, useSlots as xe, createBlock as U, resolveDynamicComponent as Pe, toHandlers as _e, vModelDynamic as eo, createTextVNode as oo, toDisplayString as ue, withModifiers as ae, withCtx as G, useCssVars as to, onBeforeMount as lo, nextTick as ie, Transition as no, mergeModels as Ee, useModel as ao, provide as so, watch as he } from "vue";
+import { getCountries as Oe, getCountryCallingCode as ce, isSupportedCountry as ro, parsePhoneNumberFromString as io, AsYouType as uo, getExampleNumber as co } from "libphonenumber-js";
+function Ae({
+  componentName: n,
+  providedId: o
+}) {
+  const e = Ze();
+  return h(() => o ?? `${n}-${e}`);
+}
+function ke(n, o = "20x15") {
+  return `https://flagcdn.com/${o}/${n.toLowerCase()}.png`;
+}
+function Me(n, o) {
+  const e = Xe(n, o);
+  if (!e)
+    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${n}`);
+  return e;
+}
+function mo(n) {
+  return !!n;
+}
+const po = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", fo = {
+  baseClass: "m-lazy-img",
+  loadedClass: "m-lazy-loaded",
+  loadingClass: "m-lazy-loading",
+  errorClass: "m-lazy-error",
+  noPhotoClass: "m-lazy-no-photo",
+  noPhoto: !1,
+  observerOnce: !0,
+  loadOnce: !1,
+  noUseErrorPhoto: !1,
+  observerOptions: {
+    threshold: 0.1
+  }
+};
+class ho {
+  constructor(o = {}) {
+    _(this, "observers", []);
+    _(this, "defaultOptions", fo);
+    _(this, "options");
+    _(this, "onImgLoadedCallback");
+    _(this, "onImgErrorCallback");
+    _(this, "hasImgLoaded", !1);
+    this.options = this.buildOptions(o), this.onImgLoadedCallback = this.imageIsLoaded.bind(this), this.onImgErrorCallback = this.imageHasError.bind(this);
+  }
+  async loadErrorPhoto() {
+    const { default: o } = await import("./no-photography-BJX8HSus.mjs");
+    return o;
+  }
+  buildOptions(o) {
+    return {
+      ...this.defaultOptions,
+      ...o,
+      observerOptions: {
+        ...this.defaultOptions.observerOptions,
+        ...o.observerOptions
+      }
+    };
+  }
+  removeClass(o, e) {
+    o.classList.remove(e);
+  }
+  addClass(o, e) {
+    o.classList.add(e);
+  }
+  removeAllStateClasses(o) {
+    this.removeClass(o, this.options.loadedClass), this.removeClass(o, this.options.loadingClass), this.removeClass(o, this.options.errorClass), this.removeClass(o, this.options.noPhotoClass);
+  }
+  setBaseClass(o) {
+    this.addClass(o, this.options.baseClass);
+  }
+  imageIsLoading(o) {
+    var e, t;
+    this.addClass(o, this.options.loadingClass), (t = (e = this.options).onLoading) == null || t.call(e, o);
+  }
+  imageHasNoPhoto(o) {
+    this.removeClass(o, this.options.loadingClass), this.addClass(o, this.options.noPhotoClass), this.setDefaultPhoto(o);
+  }
+  imageIsLoaded(o) {
+    var e, t;
+    this.hasImgLoaded = !0, this.removeClass(o, this.options.loadingClass), this.addClass(o, this.options.loadedClass), (t = (e = this.options).onLoaded) == null || t.call(e, o);
+  }
+  imageHasError(o) {
+    var e, t;
+    this.removeClass(o, this.options.loadingClass), this.addClass(o, this.options.errorClass), (t = (e = this.options).onError) == null || t.call(e, o), this.setDefaultPhoto(o);
+  }
+  getSrc(o) {
+    return typeof o.value == "object" ? o.value.src : o.value;
+  }
+  getImageUrl(o, e) {
+    const t = this.getImgElement(o).getAttribute("data-lazy-src");
+    return t || this.getSrc(e);
+  }
+  async setPictureSourceUrls(o) {
+    const e = o.querySelectorAll("source");
+    if (e.length > 0)
+      for await (const t of e) {
+        const r = t.getAttribute("data-lazy-srcset");
+        if (r)
+          t.srcset = r;
+        else
+          return this.imageHasError(o);
+      }
+    else
+      this.imageHasError(o);
+  }
+  hasBgImgMode(o) {
+    return o.arg === "bg-image";
+  }
+  isPictureElement(o) {
+    return o instanceof HTMLPictureElement;
+  }
+  getImgElement(o) {
+    return this.isPictureElement(o) ? o.querySelector("img") : o;
+  }
+  async setDefaultPhoto(o) {
+    if (this.options.noUseErrorPhoto)
+      return;
+    const e = this.options.fallbackSrc ?? this.options.errorPhoto;
+    typeof e == "string" && this.addClass(o, this.options.noPhotoClass);
+    const t = e ?? await this.loadErrorPhoto(), r = o.querySelectorAll("source");
+    if (r.length > 0)
+      for await (const u of r)
+        u.srcset = t;
+    else
+      this.setImgSrc(o, t);
+  }
+  addEventListenerToImg(o) {
+    const e = this.getImgElement(o);
+    e.addEventListener("load", () => this.onImgLoadedCallback(o), {
+      once: !0
+    }), e.addEventListener("error", (t) => this.onImgErrorCallback(o, t), { once: !0 });
+  }
+  async loadImage(o, e) {
+    if (this.imageIsLoading(o), this.isPictureElement(o))
+      this.addEventListenerToImg(o), await this.setPictureSourceUrls(o);
+    else {
+      const t = this.getImageUrl(o, e);
+      if (!t)
+        return this.imageHasError(o);
+      this.hasBgImgMode(e) ? (o.style.backgroundImage = `url('${t}')`, this.imageIsLoaded(o)) : (this.addEventListenerToImg(o), this.setImgSrc(o, t));
+    }
+  }
+  setImgSrc(o, e) {
+    const t = this.getImgElement(o);
+    t.src = e;
+  }
+  handleIntersectionObserver(o, e, t, r) {
+    var u, y;
+    this.observers.push(r);
+    for (const p of t)
+      if (p.isIntersecting) {
+        if ((y = (u = this.options).onIntersecting) == null || y.call(u, p.target), this.options.observerOnce && r.unobserve(o), this.options.loadOnce && this.hasImgLoaded)
+          return;
+        this.loadImage(o, e);
+      }
+  }
+  createObserver(o, e) {
+    const t = (y, p) => {
+      this.handleIntersectionObserver(o, e, y, p);
+    }, r = this.options.observerOptions;
+    new IntersectionObserver(t, r).observe(o);
+  }
+  async imageHandler(o, e, t) {
+    if (t === "update")
+      for await (const r of this.observers) r.unobserve(o);
+    window.IntersectionObserver ? this.createObserver(o, e) : this.loadImage(o, e);
+  }
+  async bindUpdateHandler(o, e, t) {
+    if (this.options.noPhoto)
+      return this.imageHasNoPhoto(o);
+    await this.imageHandler(o, e, t);
+  }
+  async add(o, e) {
+    if (this.hasBgImgMode(e) && this.isPictureElement(o))
+      throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);
+    setTimeout(() => this.setBaseClass(o), 0), o.getAttribute("src") || this.setImgSrc(o, po), await this.bindUpdateHandler(o, e, "bind");
+  }
+  async update(o, e) {
+    e.value !== e.oldValue && (this.hasImgLoaded = !1, this.removeAllStateClasses(o), await this.bindUpdateHandler(o, e, "update"));
+  }
+  remove(o, e) {
+    this.hasImgLoaded = !1, this.hasBgImgMode(e) && (o.style.backgroundImage = ""), this.removeAllStateClasses(o);
+    for (const t of this.observers)
+      t.unobserve(o);
+    this.observers = [];
+  }
+}
+let de;
+const yo = {
+  created(n, o) {
+    const e = typeof o.value == "object" ? o.value : {};
+    de = new ho(e), de.add(n, o);
+  },
+  updated(n, o) {
+    de.update(n, o);
+  },
+  unmounted(n, o) {
+    de.remove(n, o);
+  }
+}, vo = ["data-lazy-srcset", "media"], go = ["alt"], bo = {
+  key: 0,
+  class: "m-lazy-img-component-loader"
+}, Co = /* @__PURE__ */ se({
+  inheritAttrs: !1,
+  __name: "MazLazyImg",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    image: { default: void 0 },
+    src: { default: void 0 },
+    alt: { default: void 0 },
+    noPhoto: { type: Boolean },
+    noLoader: { type: Boolean },
+    noObserverOnce: { type: Boolean },
+    loadOnce: { type: Boolean },
+    imageHeightFull: { type: Boolean },
+    observerOptions: { default: void 0 },
+    fallbackSrc: { default: void 0 },
+    imgClass: {}
+  },
+  emits: ["intersecting", "loading", "loaded", "error"],
+  setup(n) {
+    const o = n, e = q(() => import("./MazSpinner-mCkWhiVE.mjs")), t = h(() => o.image || o.src), r = h(() => {
+      var u;
+      return typeof t.value == "string" ? [{ srcset: t.value }] : (u = t.value) == null ? void 0 : u.sources;
+    });
+    return (u, y) => ze((b(), L(
+      "picture",
+      {
+        class: F(["m-lazy-img-component", [{ "--use-loader": !u.noLoader, "--height-full": u.imageHeightFull }, o.class]]),
+        style: ee(u.style)
+      },
+      [
+        (b(!0), L(
+          be,
+          null,
+          Be(r.value, ({ srcset: p, media: O }, $) => (b(), L("source", {
+            key: $,
+            "data-lazy-srcset": p,
+            media: O
+          }, null, 8, vo))),
+          128
+          /* KEYED_FRAGMENT */
+        )),
+        j("img", oe(u.$attrs, {
+          src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+          loading: "lazy",
+          alt: u.alt,
+          class: u.imgClass
+        }), null, 16, go),
+        u.noLoader ? z("v-if", !0) : (b(), L("div", bo, [
+          H(E(e), { size: "2em" })
+        ])),
+        N(u.$slots, "default", {}, void 0, !0)
+      ],
+      6
+      /* CLASS, STYLE */
+    )), [
+      [E(yo), {
+        noPhoto: u.noPhoto,
+        loadOnce: u.loadOnce,
+        observerOptions: u.observerOptions,
+        fallbackSrc: u.fallbackSrc,
+        observerOnce: !u.noObserverOnce,
+        onIntersecting: (p) => u.$emit("intersecting", p),
+        onLoading: (p) => u.$emit("loading", p),
+        onLoaded: (p) => u.$emit("loaded", p),
+        onError: (p) => u.$emit("error", p)
+      }]
+    ]);
+  }
+}), re = (n, o) => {
+  const e = n.__vccOpts || n;
+  for (const [t, r] of o)
+    e[t] = r;
+  return e;
+}, Le = /* @__PURE__ */ re(Co, [["__scopeId", "data-v-f94782ce"]]), zo = {
+  removeAccents: !0,
+  caseSensitive: !1,
+  replaceSpaces: !0,
+  removeSpecialCharacters: !1,
+  trim: !0,
+  normalizeSpaces: !0,
+  removeNumbers: !1,
+  customNormalizationForms: ["NFC", "NFKD"]
+};
+function me(n, o) {
+  const e = { ...zo, ...o }, t = {
+    À: "A",
+    Á: "A",
+    Â: "A",
+    Ã: "A",
+    Ä: "A",
+    Å: "A",
+    à: "a",
+    á: "a",
+    â: "a",
+    ã: "a",
+    ä: "a",
+    å: "a",
+    È: "E",
+    É: "E",
+    Ê: "E",
+    Ë: "E",
+    è: "e",
+    é: "e",
+    ê: "e",
+    ë: "e",
+    Î: "I",
+    Ï: "I",
+    í: "I",
+    î: "i",
+    ï: "i",
+    Ô: "O",
+    Õ: "O",
+    Ö: "O",
+    Ø: "O",
+    ô: "o",
+    õ: "o",
+    ö: "o",
+    ø: "o",
+    Ù: "U",
+    Ú: "U",
+    Û: "U",
+    Ü: "U",
+    ù: "u",
+    ú: "u",
+    û: "u",
+    ü: "u",
+    Ç: "C",
+    ç: "c",
+    ÿ: "y",
+    Ñ: "N",
+    ñ: "n",
+    ó: "o"
+  };
+  let r = n.toString();
+  if (e.trim && (r = r.trim()), e.normalizeSpaces && (r = r.replaceAll(/\s+/g, " ")), e.replaceSpaces && (r = r.replaceAll(" ", "-")), e.removeNumbers && (r = r.replaceAll(/\d/g, "")), e.removeAccents && (r = r.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (u) => t[u] || u), r = r.replaceAll(/[\u0300-\u036F]/g, "")), e.caseSensitive === !1 && (r = r.toLowerCase()), e.removeSpecialCharacters && (r = r.replaceAll(/[^\dA-Z-]/gi, "")), e.trim && (r = r.trim()), e.customNormalizationForms)
+    for (const u of e.customNormalizationForms)
+      r = r.normalize(u);
+  return r;
+}
+function Io(n, o) {
+  const e = n.length, t = o.length, r = [];
+  for (let u = 0; u <= e; u++)
+    r[u] = [u];
+  for (let u = 0; u <= t; u++)
+    r[0][u] = u;
+  for (let u = 1; u <= e; u++)
+    for (let y = 1; y <= t; y++) {
+      const p = n[u - 1] === o[y - 1] ? 0 : 1;
+      r[u][y] = Math.min(
+        r[u - 1][y] + 1,
+        r[u][y - 1] + 1,
+        r[u - 1][y - 1] + p
+      );
+    }
+  return r[e][t];
+}
+function Te(n, o) {
+  const e = Io(n, o), t = Math.max(n.length, o.length);
+  return 1 - e / t;
+}
+function Ao(n, o, e = 0.75) {
+  return Te(n, o) >= e;
+}
+function ye(n, o, e = 0.75) {
+  const t = h(
+    () => me(typeof n == "string" ? n : n.value)
+  ), r = h(
+    () => me(typeof o == "string" ? o : o.value)
+  ), u = h(() => typeof e == "number" ? e : e.value), y = h(() => Te(t.value, r.value));
+  return {
+    isMatching: h(
+      () => Ao(t.value, r.value, u.value)
+    ),
+    score: y
+  };
+}
+function Fe(n, o, e) {
+  var y;
+  n.stopPropagation();
+  const t = typeof e.value == "function" ? e.value : e.value.handler, r = typeof e.value == "object" ? e.value.exclude : void 0;
+  let u = !1;
+  if (r && r.length > 0) {
+    for (const p of r)
+      if (!u && n.target instanceof HTMLElement) {
+        const O = (y = document.querySelector(p)) == null ? void 0 : y.getAttribute("id");
+        u = n.target.getAttribute("id") === O;
+      }
+  }
+  !o.contains(n.target) && !u && (t == null || t());
+}
+function Ne() {
+  return document.ontouchstart === null ? "touchstart" : "click";
+}
+function wo(n, o) {
+  const e = Ne();
+  document.removeEventListener(e, (t) => Fe(t, n, o));
+}
+function So(n, o) {
+  if (typeof o.value != "function" && typeof o.value == "object" && typeof o.value.handler != "function") {
+    console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
+    return;
+  }
+  const e = Ne();
+  document.addEventListener(e, (t) => Fe(t, n, o));
+}
+const Vo = {
+  mounted: So,
+  unmounted: wo
+};
+let ve = null;
+function Po(n, o) {
+  ve && clearTimeout(ve), ve = setTimeout(n, o);
+}
+function Eo(n, o) {
+  let e;
+  return function(...t) {
+    clearTimeout(e), e = setTimeout(() => {
+      n.apply(this, t);
+    }, o);
+  };
+}
+const ko = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, Lo = { class: "m-input-wrapper-input" }, $o = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], Bo = { key: 0 }, Oo = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, Mo = /* @__PURE__ */ se({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    color: { default: "primary" },
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { default: void 0 },
+    inputClasses: { default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    inputmode: { default: "text" },
+    size: { default: "md" },
+    debounce: { type: [Boolean, Number], default: !1 },
+    debounceDelay: { default: 500 },
+    validButton: { type: Boolean, default: !1 },
+    validButtonLoading: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    borderActive: { type: Boolean, default: !1 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    roundedSize: { default: void 0 },
+    block: { type: Boolean }
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
+  setup(n, { emit: o }) {
+    const e = n, t = o, r = q(() => import("./MazBtn-DHFCbHI5.mjs")), u = q(() => import("./MazIcon-wDqK0Xre.mjs")), y = q(() => import("./eye-slash-BoO00xzs.mjs")), p = q(() => import("./eye-f8zAUc30.mjs")), O = q(() => import("./check-C9Q_W85g.mjs")), $ = k(!1), v = k(!1), P = k(), i = Ae({
+      componentName: "MazInput",
+      providedId: e.id
+    });
+    Ie(() => {
+      var s;
+      e.autoFocus && ((s = P.value) == null || s.focus());
+    });
+    const f = h(() => e.type === "password"), I = h(() => $.value ? "text" : e.type), S = h(() => {
+      if (!e.noBorder) {
+        if (e.error)
+          return "maz-border-danger";
+        if (e.success)
+          return "maz-border-success";
+        if (e.warning)
+          return "maz-border-warning";
+        if (v.value || e.borderActive) {
+          if (e.color === "black")
+            return "maz-border-black";
+          if (e.color === "danger")
+            return "maz-border-danger";
+          if (e.color === "info")
+            return "maz-border-info";
+          if (e.color === "primary")
+            return "maz-border-primary";
+          if (e.color === "secondary")
+            return "maz-border-secondary";
+          if (e.color === "success")
+            return "maz-border-success";
+          if (e.color === "warning")
+            return "maz-border-warning";
+          if (e.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), R = xe(), Y = h(() => {
+      const { required: s, placeholder: M } = e;
+      if (M)
+        return s ? `${M} *` : M;
+    }), J = h(() => C.value !== void 0 && C.value !== ""), g = Eo(
+      (s) => {
+        t("update:model-value", s);
+      },
+      typeof e.debounce == "number" ? e.debounce : e.debounceDelay ?? 500
+    );
+    function V(s) {
+      if (e.debounce)
+        return g(s);
+      t("update:model-value", s);
+    }
+    const C = h({
+      get: () => e.modelValue,
+      set: (s) => V(s)
+    }), W = h(() => (!!e.label || !!e.hint) && (v.value || !!J.value || !!e.placeholder || ["date", "month", "week"].includes(e.type))), Z = h(() => !!e.label || !!e.hint);
+    function a() {
+      return !!R["right-icon"] || f.value || !!R["valid-button"] || e.validButton || !!e.rightIcon;
+    }
+    function w() {
+      return !!R["left-icon"] || !!e.leftIcon;
+    }
+    function K(s) {
+      t("focus", s), v.value = !0;
+    }
+    function T(s) {
+      t("blur", s), v.value = !1;
+    }
+    function te(s) {
+      return t("change", s);
+    }
+    function X(s) {
+      return t("input", s);
+    }
+    return (s, M) => (b(), L(
+      "div",
+      {
+        class: F(["m-input", [
+          {
+            "--is-focused": v.value || s.borderActive,
+            "--should-up": W.value,
+            "--has-label": Z.value,
+            "--is-disabled": s.disabled,
+            "--is-readonly": s.readonly,
+            "--has-z-2": s.error || s.warning || s.success,
+            "--has-state": s.error || s.warning || s.success,
+            "--block": s.block
+          },
+          e.class,
+          `--${s.color}`,
+          `--${s.size}`
+        ]]),
+        style: ee(s.style)
+      },
+      [
+        j(
+          "div",
+          {
+            class: F(["m-input-wrapper", [
+              s.inputClasses,
+              S.value,
+              s.roundedSize ? `--rounded-${s.roundedSize}` : { "maz-rounded": !s.noRadius }
+            ]])
+          },
+          [
+            w() ? (b(), L("div", ko, [
+              z(`
+          @slot left-icon - The icon to display on the left of the input
+        `),
+              s.$slots["left-icon"] || s.leftIcon ? N(s.$slots, "left-icon", { key: 0 }, () => [
+                typeof s.leftIcon == "string" ? (b(), U(E(u), {
+                  key: 0,
+                  name: s.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : s.leftIcon ? (b(), U(Pe(s.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : z("v-if", !0)
+              ], !0) : z("v-if", !0)
+            ])) : z("v-if", !0),
+            j("div", Lo, [
+              ze(j("input", oe({
+                id: E(i),
+                ref_key: "input",
+                ref: P,
+                "onUpdate:modelValue": M[0] || (M[0] = (x) => C.value = x),
+                type: I.value,
+                name: s.name
+              }, s.$attrs, {
+                inputmode: s.inputmode,
+                placeholder: Y.value,
+                "aria-label": s.label || s.placeholder,
+                disabled: s.disabled,
+                readonly: s.readonly,
+                required: s.required,
+                class: "m-input-input"
+              }, _e({
+                blur: T,
+                focus: K,
+                change: te,
+                input: X
+              }, !0), {
+                onClick: M[1] || (M[1] = (x) => s.$emit("click", x))
+              }), null, 16, $o), [
+                [eo, C.value]
+              ]),
+              s.label || s.hint ? (b(), L(
+                "span",
+                {
+                  key: 0,
+                  class: F(["m-input-label", [
+                    {
+                      "maz-text-danger-600": s.error,
+                      "maz-text-success-600": s.success,
+                      "maz-text-warning-600": s.warning
+                    }
+                  ]])
+                },
+                [
+                  oo(
+                    ue(s.hint || s.label) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  s.required ? (b(), L("sup", Bo, "*")) : z("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )) : z("v-if", !0)
+            ]),
+            a() ? (b(), L("div", Oo, [
+              z(`
+          @slot right-icon - The icon to display on the right of the input
+        `),
+              s.$slots["right-icon"] || s.rightIcon ? N(s.$slots, "right-icon", { key: 0 }, () => [
+                typeof s.rightIcon == "string" ? (b(), U(E(u), {
+                  key: 0,
+                  name: s.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : s.rightIcon ? (b(), U(Pe(s.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : z("v-if", !0)
+              ], !0) : z("v-if", !0),
+              f.value ? (b(), U(E(r), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: M[2] || (M[2] = ae((x) => $.value = !$.value, ["stop"]))
+              }, {
+                default: G(() => [
+                  $.value ? (b(), U(E(y), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (b(), U(E(p), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : z("v-if", !0),
+              z(`
+          @slot valid-button - Replace the valid button by your own
+        `),
+              s.$slots["valid-button"] || s.validButton ? N(s.$slots, "valid-button", { key: 2 }, () => [
+                H(E(r), {
+                  color: "transparent",
+                  disabled: s.disabled,
+                  tabindex: "-1",
+                  loading: s.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: G(() => [
+                    H(E(O), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : z("v-if", !0)
+            ])) : z("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), Ce = /* @__PURE__ */ re(Mo, [["__scopeId", "data-v-b3e1e126"]]), To = ["aria-label"], Fo = { class: "m-select-list__no-results" }, No = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, Ko = { class: "m-select-list-optgroup" }, Uo = ["onClick"], Ho = /* @__PURE__ */ se({
+  inheritAttrs: !1,
+  __name: "MazSelect",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    id: { default: void 0 },
+    modelValue: { default: void 0 },
+    options: { default: void 0 },
+    optionValueKey: { default: "value" },
+    optionLabelKey: { default: "label" },
+    optionInputValueKey: { default: "label" },
+    listPosition: { default: "bottom left" },
+    itemHeight: { default: void 0 },
+    maxListHeight: { default: 240 },
+    maxListWidth: { default: void 0 },
+    minListHeight: { default: void 0 },
+    minListWidth: { default: void 0 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    search: { type: Boolean },
+    searchPlaceholder: { default: "Search in options" },
+    searchThreshold: { default: 0.75 },
+    open: { type: Boolean },
+    multiple: { type: Boolean, default: void 0 },
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    block: { type: Boolean },
+    excludeSelectors: { default: void 0 },
+    autocomplete: { default: "off" }
+  },
+  emits: ["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"],
+  setup(n, { expose: o, emit: e }) {
+    to((l) => ({
+      cb149e58: I.value,
+      "215ff493": i.value,
+      "64d6cfbb": f.value
+    }));
+    const t = n, r = e, u = q(() => import("./MazCheckbox-DOYkVPMK.mjs")), y = q(() => import("./magnifying-glass--nBiyXot.mjs")), p = q(() => import("./chevron-down-BkvtON3b.mjs")), O = q(() => import("./no-symbol-CIgKzsrB.mjs"));
+    o({
+      /** Method to open the option list */
+      openList: ne,
+      /** Method to close the option list */
+      closeList: le
+    });
+    const $ = k(!1), v = k(), P = h(
+      () => ["black", "transparent", "white"].includes(t.color)
+    ), i = h(
+      () => P.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
+    ), f = h(
+      () => P.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
+    ), I = h(
+      () => P.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
+    ), S = h(() => $.value || t.open), R = Ae({
+      componentName: "MazSelect",
+      providedId: t.id
+    });
+    function Y(l) {
+      return {
+        [t.optionValueKey]: l,
+        [t.optionLabelKey]: l,
+        [t.optionInputValueKey]: l
+      };
+    }
+    function J(l) {
+      return {
+        ...l,
+        [t.optionValueKey]: l[t.optionValueKey],
+        [t.optionLabelKey]: l[t.optionLabelKey],
+        [t.optionInputValueKey]: l[t.optionInputValueKey]
+      };
+    }
+    const g = h(() => {
+      var d;
+      const l = [];
+      if (!((d = t.options) != null && d.length))
+        return [];
+      for (const m of t.options)
+        typeof m == "string" || typeof m == "number" || typeof m == "boolean" ? l.push(Y(m)) : typeof m == "object" && "options" in m && Array.isArray(m.options) ? l.push(
+          { label: m.label, isOptGroup: !0 },
+          ...m.options.map(
+            (c) => typeof c == "string" || typeof c == "number" || typeof c == "boolean" ? Y(c) : J(c)
+          )
+        ) : l.push(J(m));
+      return l;
+    }), V = h(
+      () => {
+        var l;
+        return ((l = g.value) == null ? void 0 : l.filter((d) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(d[t.optionValueKey]) && !w(d[t.optionValueKey]) : !1 : t.modelValue === d[t.optionValueKey] && !w(d[t.optionValueKey]))) ?? [];
+      }
+    );
+    lo(() => {
+      var l;
+      (l = t.options) != null && l.length || console.warn("[maz-ui](MazSelect) you must provide options"), fe();
+    });
+    const C = k(), W = k(), Z = k(), a = k();
+    function w(l) {
+      return l == null;
+    }
+    function K(l) {
+      var m;
+      return (((m = V.value) == null ? void 0 : m.some(
+        (c) => c[t.optionValueKey] === l[t.optionValueKey]
+      )) ?? !1) && !w(l[t.optionValueKey]);
+    }
+    const T = h(() => {
+      var d;
+      if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
+        return t.modelValue.map(
+          (m) => {
+            var c, A;
+            return (A = (c = g.value) == null ? void 0 : c.find((B) => B[t.optionValueKey] === m)) == null ? void 0 : A[t.optionInputValueKey];
+          }
+        ).join(", ");
+      const l = (d = g.value) == null ? void 0 : d.find(
+        (m) => m[t.optionValueKey] === t.modelValue
+      );
+      return w(t.modelValue) || l == null ? void 0 : l[t.optionInputValueKey];
+    }), te = h(
+      () => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), X = k(""), s = k("");
+    function M(l, d) {
+      return d && l && me(l).includes(me(d));
+    }
+    function x(l) {
+      var d;
+      return l ? (d = g.value) == null ? void 0 : d.filter((m) => {
+        const c = m[t.optionLabelKey], A = m[t.optionValueKey], B = m[t.optionInputValueKey], D = t.searchThreshold;
+        return M(c, l) || M(B, l) || M(A, l) || typeof c == "string" && ye(c, l, D).isMatching.value || typeof B == "string" && ye(B, l, D).isMatching.value || typeof A == "string" && ye(A, l, D).isMatching.value;
+      }) : g.value;
+    }
+    const Q = h(() => x(X.value));
+    async function le(l) {
+      var m, c;
+      if (!S.value)
+        return;
+      if (l && ("relatedTarget" in l && ((m = C.value) != null && m.contains(l.relatedTarget)) || l.type === "keydown"))
+        return l.preventDefault();
+      const d = l && "relatedTarget" in l && l.relatedTarget instanceof HTMLElement && l.relatedTarget.getAttribute("id");
+      if ((c = t.excludeSelectors) != null && c.includes(`#${d}`))
+        return l == null ? void 0 : l.preventDefault();
+      await ie(), $.value = !1, v.value = 0, r("close", l);
+    }
+    async function ne(l) {
+      t.disabled || S.value || (l == null || l.preventDefault(), $.value = !0, await pe(), r("focus", l), r("open", $.value));
+    }
+    function we() {
+      var l, d;
+      (d = ((l = W.value) == null ? void 0 : l.$el).querySelector("input")) == null || d.focus();
+    }
+    function Re() {
+      var l, d;
+      (d = ((l = W.value) == null ? void 0 : l.$el).querySelector("input")) == null || d.dispatchEvent(new Event("input"));
+    }
+    function De(l) {
+      $.value ? le(l) : we();
+    }
+    function qe(l) {
+      var d, m;
+      X.value = l, (m = ((d = Z.value) == null ? void 0 : d.$el).querySelector("input")) == null || m.focus();
+    }
+    function je(l) {
+      var m;
+      l === "Backspace" && s.value.length > 0 ? s.value = s.value.slice(0, -1) : s.value += l;
+      const d = x(s.value);
+      d != null && d.length && (v.value = (m = Q.value) == null ? void 0 : m.findIndex(
+        (c) => c[t.optionValueKey] === d[0][t.optionValueKey]
+      ), typeof v.value == "number" && v.value >= 0 && pe(v.value)), Po(() => {
+        s.value = "";
+      }, 1e3);
+    }
+    function Ye(l) {
+      const d = l.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(d) ? (l.preventDefault(), ne(l), t.search ? qe(d) : je(d)) : Se(l);
+    }
+    function Se(l, d = !0) {
+      const m = l.code, c = ["ArrowUp", "ArrowDown"].includes(m), A = (d ? ["Enter", "Space"] : ["Enter"]).includes(m), B = m === "Escape" && S.value;
+      c ? We(l, v.value) : A ? Qe(l, v.value) : B && le(l);
+    }
+    function We(l, d) {
+      var A;
+      l.preventDefault();
+      const m = l.code;
+      S.value || ne(l);
+      const c = (A = Q.value) == null ? void 0 : A.length;
+      c && (typeof d == "number" ? d === c - 1 && m === "ArrowDown" ? v.value = 0 : d === 0 && m === "ArrowUp" ? v.value = c - 1 : v.value = m === "ArrowDown" ? d + 1 : d - 1 : v.value = m === "ArrowDown" ? 0 : c - 1, pe(v.value));
+    }
+    function Qe(l, d) {
+      var c, A, B;
+      if (l.preventDefault(), !S.value)
+        return ne(l);
+      const m = d ? ((c = Q.value) == null ? void 0 : c[d]) ?? ((A = Q.value) == null ? void 0 : A[0]) : (B = Q.value) == null ? void 0 : B[0];
+      w(m) || Ve(m);
+    }
+    async function pe(l) {
+      var m, c;
+      await ie(), typeof l != "number" && fe();
+      const d = l ?? v.value;
+      if (typeof d == "number" && d >= 0) {
+        const A = (m = a.value) == null ? void 0 : m.querySelectorAll(".m-select-list-item");
+        (c = A == null ? void 0 : A[d]) == null || c.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "start"
+        });
+      }
+    }
+    function fe(l) {
+      var m;
+      const d = (m = Q.value) == null ? void 0 : m.findIndex((c) => {
+        var A, B;
+        return t.multiple && Array.isArray(t.modelValue) ? l ? l[t.optionValueKey] === c[t.optionValueKey] : [...t.modelValue].reverse()[0] === c[t.optionValueKey] : ((B = (A = V.value) == null ? void 0 : A[0]) == null ? void 0 : B[t.optionValueKey]) === c[t.optionValueKey];
+      });
+      v.value = d && d >= 0 ? d : 0;
+    }
+    function Ve(l, d = !0) {
+      var B;
+      d && !t.multiple && ie(() => le()), X.value = "";
+      const m = (B = V.value) == null ? void 0 : B.some(
+        (D) => D[t.optionValueKey] === l[t.optionValueKey]
+      );
+      let c = V.value;
+      m && t.multiple ? c = c == null ? void 0 : c.filter(
+        (D) => D[t.optionValueKey] !== l[t.optionValueKey]
+      ) : t.multiple ? c.push(l) : c = [l];
+      const A = c.map((D) => D[t.optionValueKey]);
+      r("update:model-value", t.multiple ? A : A[0]), r("selected-option", l), Re(), fe(l), we();
+    }
+    return (l, d) => {
+      var m;
+      return ze((b(), L(
+        "div",
+        {
+          ref_key: "mazSelectElement",
+          ref: C,
+          class: F(["m-select", [
+            { "--is-open": S.value, "--disabled": l.disabled, "--block": l.block },
+            t.class,
+            `--${l.size}`
+          ]]),
+          style: ee(l.style)
+        },
+        [
+          H(Ce, oe({
+            id: E(R),
+            ref_key: "mazInputComponent",
+            ref: W,
+            class: "m-select-input"
+          }, l.$attrs, {
+            required: l.required,
+            "border-active": $.value,
+            color: l.color,
+            "model-value": T.value,
+            size: l.size,
+            block: "",
+            autocomplete: l.autocomplete,
+            disabled: l.disabled,
+            onFocus: ae(ne, ["prevent", "stop"]),
+            onBlur: ae(le, ["prevent", "stop"]),
+            onClick: ae(ne, ["prevent", "stop"]),
+            onChange: d[0] || (d[0] = (c) => r("change", c)),
+            onInput: d[1] || (d[1] = (c) => r("input", c)),
+            onKeydown: Ye
+          }), {
+            "right-icon": G(() => [
+              j("button", {
+                tabindex: "-1",
+                type: "button",
+                class: "m-select-input__toggle-button maz-custom",
+                "aria-label": `${S.value ? "collapse" : "expand"} list of options`,
+                onClick: ae(De, ["stop"])
+              }, [
+                H(E(p), { class: "m-select-chevron maz-text-xl" })
+              ], 8, To)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
+          H(no, { name: te.value }, {
+            default: G(() => [
+              S.value ? (b(), L(
+                "div",
+                {
+                  key: 0,
+                  ref_key: "optionsListElement",
+                  ref: a,
+                  class: F(["m-select-list", {
+                    "--top": l.listPosition.includes("top"),
+                    "--left": l.listPosition.includes("left"),
+                    "--right": l.listPosition.includes("right"),
+                    "--bottom": l.listPosition.includes("bottom")
+                  }]),
+                  style: ee({
+                    maxHeight: `${l.maxListHeight}px`,
+                    maxWidth: `${l.maxListWidth}px`,
+                    minHeight: `${l.minListHeight}px`,
+                    minWidth: `${l.minListWidth}px`
+                  })
+                },
+                [
+                  l.search ? (b(), U(Ce, {
+                    key: 0,
+                    ref_key: "searchInputComponent",
+                    ref: Z,
+                    modelValue: X.value,
+                    "onUpdate:modelValue": [
+                      d[2] || (d[2] = (c) => X.value = c),
+                      d[4] || (d[4] = (c) => v.value = 0)
+                    ],
+                    size: "sm",
+                    color: l.color,
+                    placeholder: l.searchPlaceholder,
+                    name: "search",
+                    inputmode: "search",
+                    autocomplete: "off",
+                    tabindex: "-1",
+                    class: "m-select-list__search-input maz-flex-none",
+                    "left-icon": E(y),
+                    onKeydown: d[3] || (d[3] = (c) => Se(c, !1))
+                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : z("v-if", !0),
+                  z(`
+          @slot No results slot - Displayed when no results corresponding with search query
+        `),
+                  !Q.value || Q.value.length <= 0 ? N(l.$slots, "no-results", { key: 1 }, () => [
+                    j("span", Fo, [
+                      H(E(O), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                    ])
+                  ], !0) : (b(), L("div", No, [
+                    (b(!0), L(
+                      be,
+                      null,
+                      Be(Q.value, (c, A) => (b(), L(
+                        be,
+                        { key: A },
+                        [
+                          z(`
+              @slot Custom optgroup label
+                @binding {String} label - the label of the optgroup
+            `),
+                          c.label && c.isOptGroup ? N(l.$slots, "optgroup", {
+                            key: 0,
+                            label: c.label
+                          }, () => [
+                            j(
+                              "span",
+                              Ko,
+                              ue(c.label),
+                              1
+                              /* TEXT */
+                            )
+                          ], !0) : (b(), L("button", {
+                            key: 1,
+                            tabindex: "-1",
+                            type: "button",
+                            class: F(["m-select-list-item maz-custom maz-flex-none", [
+                              {
+                                "--is-keyboard-selected": v.value === A,
+                                "--is-selected": K(c),
+                                "--is-none-value": w(c[l.optionValueKey])
+                              }
+                            ]]),
+                            style: ee(l.itemHeight ? { height: `${l.itemHeight}px` } : void 0),
+                            onClick: ae((B) => Ve(c), ["prevent", "stop"])
+                          }, [
+                            l.multiple ? (b(), U(E(u), {
+                              key: 0,
+                              tabindex: "-1",
+                              "model-value": K(c),
+                              size: "sm",
+                              color: l.color
+                            }, null, 8, ["model-value", "color"])) : z("v-if", !0),
+                            z(`
+                @slot Custom option
+                  @binding {Object} option - the option object
+                  @binding {Boolean} is-selected - if the option is selected
+              `),
+                            N(l.$slots, "default", {
+                              option: c,
+                              isSelected: K(c)
+                            }, () => [
+                              j(
+                                "span",
+                                null,
+                                ue(c[l.optionLabelKey]),
+                                1
+                                /* TEXT */
+                              )
+                            ], !0)
+                          ], 14, Uo))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]))
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : z("v-if", !0)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"])
+        ],
+        6
+        /* CLASS, STYLE */
+      )), [
+        [E(Vo), {
+          exclude: (m = l.excludeSelectors) != null && m.length ? l.excludeSelectors : [],
+          handler: le
+        }]
+      ]);
+    };
+  }
+}), Ro = /* @__PURE__ */ re(Ho, [["__scopeId", "data-v-e35a36a6"]]);
+function Ke() {
+  if (typeof window > "u")
+    return;
+  const n = window.navigator.language;
+  if (!n)
+    return;
+  let o = n.slice(3, 7).toUpperCase();
+  return o === "" && (o = n.slice(0, 2).toUpperCase()), o === "EN" && (o = "US"), o === "JA" && (o = "JP"), {
+    locale: o,
+    browserLocale: n
+  };
+}
+let ge, $e;
+function Do(n, o, e) {
+  return e != null && e[o] ? e[o] : (($e !== n || !ge) && ($e = n, ge = new Intl.DisplayNames([n], { type: "region" })), ge.of(o));
+}
+function qo(n, o) {
+  var r;
+  const e = [], t = Oe();
+  n = n ?? ((r = Ke()) == null ? void 0 : r.browserLocale) ?? "en-US";
+  for (const u of t) {
+    const y = Do(n, u, o);
+    if (y)
+      try {
+        const p = ce(u);
+        e.push({
+          iso2: u,
+          dialCode: p,
+          name: y
+        });
+      } catch (p) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${p}`);
+      }
+  }
+  return e;
+}
+async function jo() {
+  try {
+    const n = await fetch("https://ipwho.is"), { country_code: o } = await n.json();
+    return o;
+  } catch (n) {
+    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${n}`);
+  }
+}
+function Yo(n) {
+  if (!n)
+    return "";
+  const o = new RegExp(/[^\d ()+-]/g);
+  return n.replaceAll(o, "").trim();
+}
+function Ue() {
+  return {
+    sanitizePhoneNumber: Yo,
+    fetchCountryCode: jo,
+    getBrowserLocale: Ke,
+    getCountriesList: qo
+  };
+}
+const Wo = ["id"], Qo = {
+  key: 0,
+  class: "m-country-selector__select__item__flag-container"
+}, Go = /* @__PURE__ */ se({
+  __name: "CountrySelector",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    id: {},
+    color: {},
+    size: {},
+    preferredCountries: { default: void 0 },
+    ignoredCountries: { default: void 0 },
+    onlyCountries: { default: void 0 },
+    customCountriesList: { default: void 0 },
+    locales: {},
+    listPosition: { default: "bottom left" },
+    noFlags: { type: Boolean },
+    noSearch: { type: Boolean },
+    disabled: { type: Boolean },
+    showCodeOnList: { type: Boolean },
+    countryLocale: { default: void 0 },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    countrySelectorDisplayName: { type: Boolean },
+    searchThreshold: {},
+    width: { default: "9rem" },
+    excludeSelectors: { default: void 0 }
+  },
+  emits: ["update:model-value"],
+  setup(n) {
+    const o = n, { phoneNumber: e } = Me("data"), t = k(), { getCountriesList: r } = Ue(), u = h(() => r(o.countryLocale, o.customCountriesList)), y = h(
+      () => {
+        var i;
+        return (i = u.value) == null ? void 0 : i.filter((f) => {
+          var I;
+          return !((I = o.ignoredCountries) != null && I.includes(f.iso2));
+        });
+      }
+    ), p = h(() => {
+      const i = o.onlyCountries || o.preferredCountries;
+      return i == null ? void 0 : i.map(
+        (f) => {
+          var I;
+          return (I = y.value) == null ? void 0 : I.find((S) => S.iso2.includes(f));
+        }
+      );
+    }), O = h(
+      () => {
+        var i;
+        return (i = y.value) == null ? void 0 : i.filter((f) => {
+          var I;
+          return !((I = o.preferredCountries) != null && I.includes(f.iso2));
+        });
+      }
+    ), $ = h(
+      () => o.preferredCountries ? [...p.value ?? [], ...O.value ?? []] : o.onlyCountries ? p.value : y.value
+    ), v = h(
+      () => {
+        var i;
+        return (i = $.value) == null ? void 0 : i.map(
+          (f) => f ? {
+            ...f,
+            dialCode: `+${f.dialCode}`
+          } : void 0
+        ).filter(mo);
+      }
+    );
+    async function P() {
+      var i, f;
+      (f = (i = t.value) == null ? void 0 : i.$el.querySelector("input")) == null || f.focus();
+    }
+    return (i, f) => (b(), L(
+      "div",
+      {
+        class: F(["m-country-selector", [o.class, { "--no-flags": i.noFlags }]]),
+        style: ee(i.style)
+      },
+      [
+        i.modelValue && !i.noFlags ? (b(), L("button", {
+          key: 0,
+          id: `country-selector-flag-button-${i.id}`,
+          class: F(["m-country-selector__country-flag", {
+            "--should-have-bottom-flag": i.locales.countrySelector.placeholder.length > 0
+          }]),
+          tabindex: "-1",
+          type: "button",
+          onClick: P
+        }, [
+          z(`
+        @slot Country selector flag
+          @binding {String} country-code - current selected country code - Ex: \`"FR"\`
+      `),
+          N(i.$slots, "selector-flag", { countryCode: i.modelValue }, () => [
+            H(Le, {
+              src: E(ke)(i.modelValue, "h20"),
+              alt: i.modelValue,
+              width: "20",
+              height: "20",
+              "img-class": "maz-w-5 maz-h-4 maz-rounded-sm"
+            }, null, 8, ["src", "alt"])
+          ], !0)
+        ], 10, Wo)) : z("v-if", !0),
+        H(Ro, oe({
+          id: `country-selector-${i.id}`,
+          ref_key: "CountrySelectorRef",
+          ref: t,
+          "model-value": i.modelValue
+        }, { ...i.$attrs }, {
+          class: "m-country-selector__select",
+          "option-value-key": "iso2",
+          "option-label-key": "name",
+          "option-input-value-key": i.countrySelectorDisplayName ? "name" : "dialCode",
+          "max-list-width": 250,
+          "min-list-width": 200,
+          disabled: i.disabled,
+          color: i.color,
+          size: i.size,
+          error: i.error,
+          "list-position": i.listPosition,
+          "item-height": 38,
+          success: i.success,
+          search: !i.noSearch,
+          "search-placeholder": i.locales.countrySelector.searchPlaceholder,
+          "search-threshold": i.searchThreshold,
+          options: v.value,
+          hint: E(e) && !i.modelValue ? i.locales.countrySelector.error : void 0,
+          label: i.locales.countrySelector.placeholder,
+          style: {
+            width: i.width
+          },
+          "exclude-selectors": [`#country-selector-flag-button-${i.id}`, ...i.excludeSelectors ?? []],
+          "onUpdate:modelValue": f[0] || (f[0] = (I) => i.$emit("update:model-value", I))
+        }), {
+          "no-results": G(() => [
+            N(i.$slots, "no-results", {}, void 0, !0)
+          ]),
+          default: G(({ option: I, isSelected: S }) => [
+            j(
+              "div",
+              {
+                class: F(["m-country-selector__select__item", {
+                  "m-country-selector__select__item--selected": S
+                }])
+              },
+              [
+                !i.noFlags && typeof I.iso2 == "string" ? (b(), L("span", Qo, [
+                  z(`
+              @slot Country list flag
+                @binding {String} country-code - country code of option - Ex: \`"FR"\`
+                @binding {{ iso2: string; dialCode: string; name: string; }} option - country data
+                @binding {Boolean} is-selected - \`true\` if option is selected
+            `),
+                  N(i.$slots, "country-list-flag", {
+                    countryCode: I.iso2,
+                    option: I,
+                    isSelected: S
+                  }, () => [
+                    H(Le, {
+                      src: E(ke)(I.iso2, "h20"),
+                      alt: `${I.name} flag`,
+                      width: "20",
+                      height: "20",
+                      "img-class": "maz-rounded-full maz-w-5 maz-h-5"
+                    }, null, 8, ["src", "alt"])
+                  ], !0)
+                ])) : z("v-if", !0),
+                i.showCodeOnList ? (b(), L(
+                  "span",
+                  {
+                    key: 1,
+                    class: F(["maz-w-9 maz-flex-none", { "maz-text-muted": !S }])
+                  },
+                  ue(I.dialCode),
+                  3
+                  /* TEXT, CLASS */
+                )) : z("v-if", !0),
+                j(
+                  "span",
+                  {
+                    class: F(["maz-flex-1 maz-truncate", { "maz-font-semibold": S }])
+                  },
+                  ue(I.name),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 16, ["id", "model-value", "option-input-value-key", "disabled", "color", "size", "error", "list-position", "success", "search", "search-placeholder", "search-threshold", "options", "hint", "label", "style", "exclude-selectors"])
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), Jo = /* @__PURE__ */ re(Go, [["__scopeId", "data-v-382b69af"]]), Zo = {
+  countrySelector: {
+    placeholder: "Country code",
+    error: "Choose country",
+    searchPlaceholder: "Search the country"
+  },
+  phoneInput: {
+    placeholder: "Phone number",
+    example: "Example:"
+  }
+};
+function Xo(n) {
+  try {
+    const o = ro(n);
+    return o || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${n}" is not available`), !1);
+  } catch (o) {
+    return console.error(`[maz-ui](MazPhoneNumberInput) ${o}`), !1;
+  }
+}
+function xo({
+  phoneNumber: n,
+  countryCode: o
+}) {
+  try {
+    if (!n)
+      return {
+        isValid: !1,
+        countryCode: o
+      };
+    const e = io(n, o);
+    return {
+      countryCode: (e == null ? void 0 : e.country) ?? o,
+      isValid: (e == null ? void 0 : e.isValid()) ?? !1,
+      isPossible: e == null ? void 0 : e.isPossible(),
+      countryCallingCode: e == null ? void 0 : e.countryCallingCode,
+      nationalNumber: e == null ? void 0 : e.nationalNumber,
+      type: e == null ? void 0 : e.getType(),
+      formatInternational: e == null ? void 0 : e.formatInternational(),
+      formatNational: e == null ? void 0 : e.formatNational(),
+      uri: e == null ? void 0 : e.getURI(),
+      e164: e == null ? void 0 : e.format("E.164"),
+      rfc3966: e == null ? void 0 : e.format("RFC3966"),
+      phoneNumber: n
+    };
+  } catch (e) {
+    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${e}`);
+  }
+}
+function _o(n, o) {
+  try {
+    return o ? new uo(n).input(o) : "";
+  } catch (e) {
+    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${e}`);
+  }
+}
+async function et() {
+  const { default: n } = await import("./examples.mobile.json-JpNGylGv.mjs");
+  return n;
+}
+function ot(n, o) {
+  var e;
+  try {
+    return n && o ? (e = co(o, n)) == null ? void 0 : e.formatNational() : void 0;
+  } catch (t) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${t}`);
+  }
+}
+function He() {
+  function n(o, e) {
+    return ce(o) === ce(e);
+  }
+  return {
+    getAsYouTypeFormat: _o,
+    getPhoneNumberResults: xo,
+    getPhoneNumberExamplesFile: et,
+    getPhoneNumberExample: ot,
+    isSameCountryCallingCode: n,
+    isCountryAvailable: Xo,
+    getCountries: Oe,
+    getCountryCallingCode: ce
+  };
+}
+const tt = /* @__PURE__ */ se({
+  __name: "PhoneInput",
+  props: /* @__PURE__ */ Ee({
+    id: {},
+    color: {},
+    size: {},
+    locales: {},
+    label: { default: void 0 },
+    placeholder: { default: void 0 },
+    noExample: { type: Boolean },
+    disabled: { type: Boolean },
+    hasRadius: { type: Boolean },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    autoFormat: { type: Boolean },
+    noFormattingAsYouType: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Ee(["update:model-value"], ["update:modelValue"]),
+  setup(n, { emit: o }) {
+    const e = n, t = o, r = ao(n, "modelValue"), { getPhoneNumberExamplesFile: u, getPhoneNumberExample: y } = He(), { selectionRange: p, results: O, selectedCountry: $ } = Me("data"), v = k(), P = k(!1);
+    function i(g, V) {
+      const C = y(g, V);
+      return C ? `${e.locales.phoneInput.example} ${C}` : void 0;
+    }
+    const f = h(() => {
+      var V;
+      if (e.label || e.placeholder)
+        return e.label || e.placeholder;
+      const g = e.locales.phoneInput.placeholder;
+      if (e.noExample || !v.value)
+        return g;
+      {
+        const C = i(v.value, $.value);
+        return (V = O.value) != null && V.isValid || !C ? g : C;
+      }
+    }), I = h(() => e.placeholder ? {
+      placeholder: f.value
+    } : {
+      label: f.value
+    }), S = k();
+    async function R() {
+      try {
+        if (v.value)
+          return;
+        v.value = await u();
+      } catch (g) {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", g);
+      }
+    }
+    async function Y(g) {
+      S.value && g && J(S.value, g), await ie(), t("update:model-value", g);
+    }
+    function J(g, V) {
+      const C = g.$el.querySelector("input");
+      p.value.start = C == null ? void 0 : C.selectionStart, p.value.end = C == null ? void 0 : C.selectionEnd, p.value.cursorAtEnd = V && typeof p.value.start == "number" && V.length > 0 ? p.value.start >= V.length : !0;
+    }
+    return Ie(() => {
+      e.noExample || R();
+    }), (g, V) => (b(), U(Ce, oe({
+      id: g.id,
+      ref_key: "PhoneInputRef",
+      ref: S,
+      "model-value": r.value
+    }, { ...g.$attrs, ...I.value }, {
+      disabled: g.disabled,
+      color: g.color,
+      error: g.error,
+      size: g.size,
+      success: g.success,
+      class: ["m-phone-input", [
+        {
+          "--border-radius": g.hasRadius,
+          "--error": g.error || !E(O).isValid,
+          "--focused": P.value
+        }
+      ]],
+      onFocus: V[0] || (V[0] = (C) => P.value = !0),
+      onBlur: V[1] || (V[1] = (C) => P.value = !1),
+      "onUpdate:modelValue": V[2] || (V[2] = (C) => Y(C))
+    }), null, 16, ["id", "model-value", "disabled", "color", "error", "size", "success", "class"]));
+  }
+}), lt = /* @__PURE__ */ re(tt, [["__scopeId", "data-v-ebe8f08f"]]), nt = /* @__PURE__ */ se({
+  name: "MazPhoneNumberInput",
+  inheritAttrs: !1,
+  __name: "MazPhoneNumberInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    defaultPhoneNumber: { default: void 0 },
+    countryCode: { default: void 0 },
+    defaultCountryCode: { default: void 0 },
+    id: { default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    preferredCountries: { default: void 0 },
+    ignoredCountries: { default: void 0 },
+    onlyCountries: { default: void 0 },
+    translations: { default: void 0 },
+    listPosition: { default: "bottom left" },
+    color: { default: "primary" },
+    size: { default: "md" },
+    noFlags: { type: Boolean },
+    disabled: { type: Boolean },
+    noExample: { type: Boolean },
+    noSearch: { type: Boolean },
+    searchThreshold: { default: 0.75 },
+    noUseBrowserLocale: { type: Boolean },
+    fetchCountry: { type: Boolean },
+    noCountrySelector: { type: Boolean },
+    showCodeOnList: { type: Boolean },
+    customCountriesList: { default: void 0 },
+    autoFormat: { type: Boolean, default: !0 },
+    noFormattingAsYouType: { type: Boolean, default: !1 },
+    countryLocale: { default: void 0 },
+    noValidationError: { type: Boolean },
+    noValidationSuccess: { type: Boolean },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    countrySelectorDisplayName: { type: Boolean },
+    countrySelectorWidth: { default: "9rem" },
+    block: { type: Boolean },
+    excludeSelectors: { default: void 0 },
+    orientation: { default: "responsive" },
+    countrySelectAttributes: { default: () => ({
+      name: "country",
+      autocomplete: "off"
+    }) },
+    phoneInputAttributes: { default: () => ({
+      name: "phone",
+      autocomplete: "tel",
+      inputmode: "tel"
+    }) }
+  },
+  emits: ["update:model-value", "country-code", "update:country-code", "update", "data"],
+  setup(n, { emit: o }) {
+    const e = n, t = o, { fetchCountryCode: r, sanitizePhoneNumber: u, getBrowserLocale: y } = Ue(), { isCountryAvailable: p, getPhoneNumberResults: O, getAsYouTypeFormat: $ } = He(), v = Ae({
+      componentName: "MazPhoneNumberInput",
+      providedId: e.id
+    }), P = k(""), i = k(), f = k({
+      isValid: !1,
+      countryCode: void 0
+    }), I = k(), S = k({
+      start: 0,
+      end: 0,
+      cursorAtEnd: !0
+    });
+    so("data", {
+      selectedCountry: i,
+      phoneNumber: P,
+      results: f,
+      selectionRange: S
+    });
+    const R = h(() => ({
+      ...Zo,
+      ...e.translations
+    }));
+    Ie(async () => {
+      var a;
+      if (C(e.countryCode ?? e.defaultCountryCode), e.fetchCountry && !i.value) {
+        const w = await r();
+        C(w);
+      }
+      if (!e.defaultCountryCode && !e.noUseBrowserLocale && !i.value) {
+        const w = (a = y()) == null ? void 0 : a.locale;
+        C(w);
+      }
+    });
+    const Y = k();
+    function J() {
+      var a;
+      return (a = Y.value) == null ? void 0 : a.$el.querySelector("input");
+    }
+    async function g() {
+      var a;
+      await ie(), (a = J()) == null || a.select();
+    }
+    function V(a) {
+      Z({
+        countryCode: a
+      }), g();
+    }
+    function C(a) {
+      if (a) {
+        if (!p(a)) {
+          i.value = void 0;
+          return;
+        }
+        i.value = a;
+      }
+    }
+    function W({
+      newPhoneNumber: a,
+      updateResults: w = !0
+    }) {
+      const K = u(a);
+      if (w && (f.value = O({
+        phoneNumber: K,
+        countryCode: i.value
+      })), S.value.cursorAtEnd && !e.noFormattingAsYouType && e.autoFormat) {
+        const T = f.value.isValid ? f.value.formatNational : K;
+        I.value = $(i.value, T), P.value = I.value;
+      }
+      f.value.countryCode && f.value.countryCode !== i.value && Z({
+        countryCode: f.value.countryCode,
+        updateResults: !1
+      });
+    }
+    function Z({
+      countryCode: a,
+      updateResults: w = !0
+    }) {
+      if (!a) {
+        i.value = void 0;
+        return;
+      }
+      a !== i.value && C(a), w && (f.value = O({
+        phoneNumber: P.value,
+        countryCode: a
+      })), W({
+        newPhoneNumber: P.value,
+        updateResults: !1
+      });
+    }
+    return he(
+      () => e.modelValue ?? e.defaultPhoneNumber,
+      (a, w) => {
+        a !== w && a !== P.value && W({
+          newPhoneNumber: a
+        });
+      },
+      {
+        immediate: !0
+      }
+    ), he(
+      () => e.countryCode ?? e.defaultCountryCode,
+      (a, w) => {
+        a && a !== w && a !== i.value && Z({
+          countryCode: a
+        });
+      },
+      {
+        immediate: !0
+      }
+    ), he(
+      f,
+      (a) => {
+        t("update", a), t("data", a), a.e164 && a.isValid ? t("update:model-value", a.e164) : t("update:model-value", P.value), t("country-code", i.value), t("update:country-code", i.value);
+      },
+      {
+        immediate: !0
+      }
+    ), (a, w) => {
+      var K;
+      return b(), L(
+        "div",
+        {
+          class: F(["m-phone-number-input", [e.class, { "--block": a.block }, a.orientation ? `--${a.orientation}` : void 0]]),
+          style: ee(a.style)
+        },
+        [
+          a.noCountrySelector ? z("v-if", !0) : (b(), U(Jo, oe({
+            key: 0,
+            id: E(v)
+          }, a.countrySelectAttributes, {
+            "model-value": i.value,
+            color: a.color,
+            size: a.size,
+            "country-locale": a.countryLocale,
+            "country-selector-display-name": a.countrySelectorDisplayName,
+            "custom-countries-list": a.customCountriesList,
+            "ignored-countries": a.ignoredCountries,
+            "list-position": a.listPosition,
+            "no-flags": a.noFlags,
+            "no-search": a.noSearch,
+            "exclude-selectors": a.excludeSelectors,
+            error: a.error || (a.noValidationError ? !1 : !!P.value && !i.value),
+            success: a.success || (a.noValidationSuccess ? !1 : (K = f.value) == null ? void 0 : K.isValid),
+            locales: R.value,
+            disabled: a.disabled,
+            "search-threshold": a.searchThreshold,
+            "show-code-on-list": a.showCodeOnList,
+            "only-countries": a.onlyCountries,
+            "preferred-countries": a.preferredCountries,
+            width: a.countrySelectorWidth,
+            "onUpdate:modelValue": V
+          }), {
+            "no-results": G(() => [
+              z(`
+          @slot Replace the "no results" icon in the country selector list
+        `),
+              N(a.$slots, "no-results", {}, void 0, !0)
+            ]),
+            "selector-flag": G(({ countryCode: T }) => [
+              z(`
+          @slot Country selector flag
+            @binding {String} country-code - current selected country code - Ex: \`"FR"\`
+        `),
+              N(a.$slots, "selector-flag", { countryCode: T }, void 0, !0)
+            ]),
+            "country-list-flag": G(({ isSelected: T, option: te }) => [
+              z(`
+          @slot Country list flag
+            @binding {String} country-code - country code of option - Ex: \`"FR"\`
+            @binding {{ iso2: string; dialCode: string; name: string; }} option - country data
+            @binding {Boolean} is-selected - \`true\` if option is selected
+        `),
+              N(a.$slots, "country-list-flag", {
+                countryCode: te.iso2,
+                option: te,
+                isSelected: T
+              }, void 0, !0)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["id", "model-value", "color", "size", "country-locale", "country-selector-display-name", "custom-countries-list", "ignored-countries", "list-position", "no-flags", "no-search", "exclude-selectors", "error", "success", "locales", "disabled", "search-threshold", "show-code-on-list", "only-countries", "preferred-countries", "width"])),
+          H(lt, oe({
+            id: E(v),
+            ref_key: "PhoneInputRef",
+            ref: Y,
+            modelValue: P.value,
+            "onUpdate:modelValue": w[0] || (w[0] = (T) => P.value = T)
+          }, { ...a.$attrs, ...a.phoneInputAttributes }, {
+            color: a.color,
+            size: a.size,
+            "no-example": a.noExample,
+            block: "",
+            disabled: a.disabled,
+            "has-radius": !a.noCountrySelector,
+            success: a.success || (a.noValidationSuccess ? !1 : f.value.isValid),
+            error: a.error || (a.noValidationError ? !1 : !!P.value && !f.value.isValid),
+            locales: R.value,
+            "no-formatting-as-you-type": a.noFormattingAsYouType,
+            "auto-format": a.autoFormat,
+            label: a.label,
+            placeholder: a.placeholder,
+            "onUpdate:modelValue": w[1] || (w[1] = (T) => W({
+              newPhoneNumber: T
+            }))
+          }), null, 16, ["id", "modelValue", "color", "size", "no-example", "disabled", "has-radius", "success", "error", "locales", "no-formatting-as-you-type", "auto-format", "label", "placeholder"])
+        ],
+        6
+        /* CLASS, STYLE */
+      );
+    };
+  }
+}), it = /* @__PURE__ */ re(nt, [["__scopeId", "data-v-420d6d4a"]]);
+export {
+  it as M,
+  re as _,
+  Me as i,
+  Ae as u
+};