maz-ui 3.47.2-beta.2 → 3.47.2-beta.21

package/components/chunks/MazPhoneNumberInput-BQjByOtQ.mjs

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