maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazPhoneNumberInput-e1bf46f9.mjs

@@ -0,0 +1,1216 @@
+import "../assets/MazPhoneNumberInput.css";
+import { computed as c, defineComponent as xe, defineAsyncComponent as U, ref as m, getCurrentInstance as Ie, onMounted as Be, useSlots as Fe, openBlock as v, createElementBlock as C, normalizeClass as E, normalizeStyle as ee, createElementVNode as H, renderSlot as J, createVNode as L, unref as z, createCommentVNode as h, withDirectives as Ee, mergeProps as ke, toHandlers as Ne, vModelDynamic as Ke, createTextVNode as Ce, toDisplayString as _, createBlock as ue, withModifiers as re, withCtx as te, useCssVars as Me, onBeforeMount as Te, Transition as De, Fragment as Ue, renderList as Oe, nextTick as G, reactive as Re, watch as ve } from "vue";
+import { isSupportedCountry as qe, getCountryCallingCode as Se, getExampleNumber as He, getCountries as je, parsePhoneNumberFromString as We, AsYouType as Ye } from "libphonenumber-js";
+function Qe(e) {
+  return !!e;
+}
+const Pe = ({
+  componentName: e,
+  instance: u,
+  providedId: n
+}) => c(() => n ?? `${e}-${u == null ? void 0 : u.uid}`), Ge = {
+  countrySelector: {
+    placeholder: "Country code",
+    error: "Choose country",
+    searchPlaceholder: "Search the country"
+  },
+  phoneInput: {
+    placeholder: "Phone number",
+    example: "Example:"
+  }
+};
+function Ae(e) {
+  return [...e].map((n) => n.charCodeAt(0) % 32 + 127461).map((n) => String.fromCodePoint(n)).join("");
+}
+let ge;
+function Je(e, u, n) {
+  return n != null && n[u] ? n[u] : (ge || (ge = new Intl.DisplayNames([e], { type: "region" })), ge.of(u));
+}
+const Xe = /^[\d ().-]+$/, Ze = /^[^a-z]+$/i;
+let Ve;
+async function _e() {
+  const { default: e } = await import("./examples.mobile.json-f63d22fb.mjs");
+  return Ve = e, Ve;
+}
+function et(e, u) {
+  return Se(e) === Se(u);
+}
+function tt(e) {
+  var u;
+  try {
+    return e ? (u = He(e, Ve)) == null ? void 0 : u.formatNational() : void 0;
+  } catch (n) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${n}`);
+  }
+}
+function ot(e) {
+  if (!e)
+    return "";
+  const u = Ze.test(e), n = Xe.test(e);
+  return !u && !n ? e.replaceAll(/[^\d.]/g, "") : e;
+}
+function lt(e, u) {
+  const n = [], P = je();
+  e = e ?? Le().browserLocale ?? "en-US";
+  for (const x of P) {
+    const O = Je(e, x, u);
+    if (O)
+      try {
+        const N = Se(x);
+        n.push({
+          iso2: x,
+          dialCode: N,
+          name: O
+        });
+      } catch (N) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${N}`);
+      }
+  }
+  return n;
+}
+function Le() {
+  if (typeof window > "u")
+    return {};
+  const e = window.navigator.language;
+  if (!e)
+    return {};
+  let u = e.slice(3, 7).toUpperCase();
+  return u === "" && (u = e.slice(0, 2).toUpperCase()), u === "EN" && (u = "US"), u === "JA" && (u = "JP"), { locale: u, browserLocale: e };
+}
+function be(e) {
+  try {
+    const u = qe(e);
+    return u || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${e}" is not available`), !1);
+  } catch (u) {
+    return console.error(`[maz-ui](MazPhoneNumberInput) ${u}`), !1;
+  }
+}
+const at = ({
+  phoneNumber: e,
+  countryCode: u
+}) => {
+  try {
+    if (!e)
+      return {
+        isValid: !1,
+        countryCode: u
+      };
+    const n = We(e, u);
+    return {
+      isValid: (n == null ? void 0 : n.isValid()) ?? !1,
+      isPossible: n == null ? void 0 : n.isPossible(),
+      countryCode: n == null ? void 0 : n.country,
+      countryCallingCode: n == null ? void 0 : n.countryCallingCode,
+      nationalNumber: n == null ? void 0 : n.nationalNumber,
+      type: n == null ? void 0 : n.getType(),
+      formatInternational: n == null ? void 0 : n.formatInternational(),
+      formatNational: n == null ? void 0 : n.formatNational(),
+      uri: n == null ? void 0 : n.getURI(),
+      e164: n == null ? void 0 : n.format("E.164"),
+      rfc3966: n == null ? void 0 : n.format("RFC3966")
+    };
+  } catch (n) {
+    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${n}`);
+  }
+};
+function nt(e, u) {
+  try {
+    return u ? new Ye(e).input(u) : void 0;
+  } catch (n) {
+    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${n}`);
+  }
+}
+async function rt() {
+  try {
+    const e = await fetch("https://ipwho.is"), { country_code: u } = await e.json();
+    return u;
+  } catch (e) {
+    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${e}`);
+  }
+}
+function ut() {
+  return {
+    fetchCountryCode: rt,
+    getAsYouTypeFormat: nt,
+    getResultsFromPhoneNumber: at,
+    loadPhoneNumberExamplesFile: _e,
+    getPhoneNumberExample: tt,
+    sanitizePhoneNumber: ot,
+    getCountriesList: lt,
+    browserLocale: Le,
+    isSameCountryCallingCode: et
+  };
+}
+function it(e, u) {
+  let n;
+  return function(...P) {
+    clearTimeout(n), n = setTimeout(() => {
+      e.apply(this, P);
+    }, u);
+  };
+}
+const st = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, ct = { class: "m-input-wrapper-input" }, dt = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"], ft = { key: 0 }, mt = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, yt = /* @__PURE__ */ xe({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { type: [String, Array, Object], default: void 0 },
+    class: { type: String, default: void 0 },
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: void 0
+    },
+    placeholder: { type: String, default: void 0 },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    label: { type: String, default: void 0 },
+    name: { type: String, default: "input" },
+    type: {
+      type: String,
+      default: "text",
+      validator: (e) => [
+        "text",
+        "date",
+        "number",
+        "tel",
+        "search",
+        "url",
+        "password",
+        "month",
+        "time",
+        "week",
+        "email"
+      ].includes(e)
+    },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { type: String, default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { type: String, default: void 0 },
+    inputClasses: { type: String, default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["mini", "xs", "sm", "md", "lg", "xl"].includes(e)
+    },
+    debounce: { type: Boolean, default: !1 },
+    debounceDelay: { type: Number, 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, default: void 0 },
+    rightIcon: { type: String, default: void 0 }
+  },
+  emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
+  setup(e, { emit: u }) {
+    const n = U(() => import("./MazBtn-2d1d1ba5.mjs")), P = U(() => import("./MazIcon-52a76873.mjs")), x = U(() => import("./eye-slash-fa42a017.mjs")), O = U(() => import("./eye-dc12ce09.mjs")), N = U(() => import("./check-31d7ba2f.mjs")), o = e, S = u, I = m(!1), f = m(!1), s = m(), oe = Ie(), le = Pe({
+      componentName: "MazInput",
+      instance: oe,
+      providedId: o.id
+    });
+    Be(() => {
+      var i;
+      o.autoFocus && ((i = s.value) == null || i.focus());
+    });
+    const X = c(() => o.class), $ = c(() => o.type === "password"), V = c(() => I.value ? "text" : o.type), F = c(() => {
+      if (!o.noBorder) {
+        if (o.error)
+          return "maz-border-danger";
+        if (o.success)
+          return "maz-border-success";
+        if (o.warning)
+          return "maz-border-warning";
+        if (f.value || o.borderActive) {
+          if (o.color === "black")
+            return "maz-border-black";
+          if (o.color === "danger")
+            return "maz-border-danger";
+          if (o.color === "info")
+            return "maz-border-info";
+          if (o.color === "primary")
+            return "maz-border-primary";
+          if (o.color === "secondary")
+            return "maz-border-secondary";
+          if (o.color === "success")
+            return "maz-border-success";
+          if (o.color === "warning")
+            return "maz-border-warning";
+          if (o.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), B = Fe(), Z = c(() => {
+      const { required: i, placeholder: g } = o;
+      if (g)
+        return i ? `${g} *` : g;
+    }), R = c(() => o.modelValue !== void 0 && o.modelValue !== ""), q = c({
+      get: () => o.modelValue,
+      set: (i) => A(i)
+    }), K = c(() => (!!o.label || !!o.hint) && (f.value || !!R.value || !!o.placeholder || ["date", "month", "week"].includes(o.type))), j = c(() => !!o.label || !!o.hint), ae = () => !!B["right-icon"] || $.value || !!B["valid-button"] || o.validButton || !!o.rightIcon, M = () => !!B["left-icon"] || !!o.leftIcon, T = (i) => {
+      S("focus", i), f.value = !0;
+    }, w = (i) => {
+      S("blur", i), f.value = !1;
+    }, W = (i) => S("change", i), y = it((i) => {
+      S("update:model-value", i);
+    }, o.debounceDelay), A = (i) => {
+      if (o.debounce)
+        return y(i);
+      S("update:model-value", i);
+    };
+    return (i, g) => (v(), C(
+      "div",
+      {
+        class: E(["m-input", [
+          {
+            "--is-focused": f.value || e.borderActive,
+            "--should-up": K.value,
+            "--has-label": j.value,
+            "--is-disabled": e.disabled,
+            "--is-readonly": e.readonly,
+            "--has-z-2": e.error || e.warning || e.success,
+            "--has-state": e.error || e.warning || e.success
+          },
+          X.value,
+          `--${e.color}`,
+          `--${e.size}`
+        ]]),
+        style: ee(e.style)
+      },
+      [
+        H(
+          "div",
+          {
+            class: E(["m-input-wrapper", [e.inputClasses, F.value, { "maz-rounded": !e.noRadius }]])
+          },
+          [
+            M() ? (v(), C("div", st, [
+              i.$slots["left-icon"] || e.leftIcon ? J(i.$slots, "left-icon", { key: 0 }, () => [
+                L(z(P), {
+                  name: e.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])
+              ], !0) : h("v-if", !0)
+            ])) : h("v-if", !0),
+            H("div", ct, [
+              Ee(H("input", ke({
+                id: z(le),
+                ref_key: "input",
+                ref: s,
+                "onUpdate:modelValue": g[0] || (g[0] = (p) => q.value = p),
+                type: V.value,
+                name: e.name
+              }, i.$attrs, {
+                placeholder: Z.value,
+                "aria-label": e.label || e.placeholder,
+                disabled: e.disabled,
+                readonly: e.readonly,
+                required: e.required,
+                class: "m-input-input"
+              }, Ne({
+                blur: w,
+                focus: T,
+                change: W
+              }, !0), {
+                onClick: g[1] || (g[1] = (p) => i.$emit("click", p))
+              }), null, 16, dt), [
+                [Ke, q.value]
+              ]),
+              e.label || e.hint ? (v(), C(
+                "span",
+                {
+                  key: 0,
+                  ref: "label",
+                  class: E(["m-input-label", [
+                    {
+                      "maz-text-danger-600": e.error,
+                      "maz-text-success-600": e.success,
+                      "maz-text-warning-600": e.warning
+                    }
+                  ]])
+                },
+                [
+                  Ce(
+                    _(e.hint || e.label) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  e.required ? (v(), C("sup", ft, "*")) : h("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )) : h("v-if", !0)
+            ]),
+            ae() ? (v(), C("div", mt, [
+              i.$slots["right-icon"] || e.rightIcon ? J(i.$slots, "right-icon", { key: 0 }, () => [
+                L(z(P), {
+                  name: e.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])
+              ], !0) : h("v-if", !0),
+              $.value ? (v(), ue(z(n), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: g[2] || (g[2] = re((p) => I.value = !I.value, ["stop"]))
+              }, {
+                default: te(() => [
+                  I.value ? (v(), ue(z(x), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (v(), ue(z(O), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : h("v-if", !0),
+              i.$slots["valid-button"] || e.validButton ? J(i.$slots, "valid-button", { key: 2 }, () => [
+                L(z(n), {
+                  color: "transparent",
+                  disabled: e.disabled,
+                  tabindex: "-1",
+                  loading: e.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: te(() => [
+                    L(z(N), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : h("v-if", !0)
+            ])) : h("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+});
+const $e = (e, u) => {
+  const n = e.__vccOpts || e;
+  for (const [P, x] of u)
+    n[P] = x;
+  return n;
+}, we = /* @__PURE__ */ $e(yt, [["__scopeId", "data-v-32fa5093"]]);
+m("system");
+m("system");
+m();
+m([]);
+let ze = null;
+function vt(e, u) {
+  ze && clearTimeout(ze), ze = setTimeout(e, u);
+}
+const pt = ["onClick"], ht = {
+  key: 0,
+  tabindex: "-1",
+  class: "m-select-list__search-wrapper"
+}, gt = { class: "m-select-list__no-results" }, bt = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, zt = ["onClick"], Ct = /* @__PURE__ */ xe({
+  inheritAttrs: !1,
+  __name: "MazSelect",
+  props: {
+    style: { type: [String, Array, Object], default: void 0 },
+    class: { type: String, default: void 0 },
+    modelValue: {
+      type: [Number, String, Boolean, Array],
+      default: void 0
+    },
+    id: { type: String, default: void 0 },
+    options: { type: Array, default: void 0 },
+    optionValueKey: { type: String, default: "value" },
+    optionLabelKey: { type: String, default: "label" },
+    optionInputValueKey: { type: String, default: "label" },
+    listPosition: {
+      type: String,
+      default: "bottom left",
+      validator: (e) => ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
+        e
+      )
+    },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: !1 },
+    /** Choose color of the input */
+    color: {
+      type: String,
+      default: "primary"
+    },
+    /** Choose the option list item height */
+    itemHeight: { type: Number, default: 40 },
+    maxListHeight: { type: Number, default: 240 },
+    /** Add max-width value to option list */
+    maxListWidth: { type: Number, default: void 0 },
+    /** Choose size of the input */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["mini", "xs", "sm", "md", "lg", "xl"].includes(e)
+    },
+    /** Display search input in option list */
+    search: { type: Boolean, default: !1 },
+    /** Search input placeholder */
+    searchPlaceholder: { type: String, default: "Search in options" },
+    /** Enable feature to select multiple values */
+    multiple: { type: Boolean, default: !1 }
+  },
+  emits: [
+    "close",
+    "open",
+    "blur",
+    "focus",
+    "change",
+    "update:model-value",
+    /** On selected value, returns the option object */
+    "selected-option"
+  ],
+  setup(e, { emit: u }) {
+    Me((a) => ({
+      "1e2ca234": X.value,
+      a001241a: oe.value,
+      "75c5211b": le.value
+    }));
+    const n = U(() => import("./MazCheckbox-040dc2c4.mjs")), P = U(() => import("./magnifying-glass-908981c0.mjs")), x = U(() => import("./chevron-down-2b60111a.mjs")), O = U(() => import("./no-symbol-87477ad0.mjs")), N = Ie(), o = e, S = u, I = m(!1), f = m(), s = c(
+      () => ["black", "transparent", "white"].includes(o.color)
+    ), oe = c(
+      () => s.value ? "var(--maz-color-black)" : `var(--maz-color-${o.color}-800)`
+    ), le = c(
+      () => s.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-100)`
+    ), X = c(
+      () => s.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-200)`
+    ), $ = c(() => I.value || o.open), V = Pe({
+      componentName: "MazSelect",
+      instance: N,
+      providedId: o.id
+    }), F = c(
+      () => {
+        var a;
+        return ((a = o.options) == null ? void 0 : a.filter((t) => o.multiple ? Array.isArray(o.modelValue) ? o.modelValue.includes(t[o.optionValueKey]) && !K(t[o.optionValueKey]) : !1 : o.modelValue === t[o.optionValueKey] && !K(t[o.optionValueKey]))) ?? [];
+      }
+    );
+    Te(() => {
+      var a;
+      (a = o.options) != null && a.length || console.warn("[maz-ui](MazSelect) you must provide options"), Q();
+    });
+    const B = m(), Z = m(), R = m(), q = m(), K = (a) => a == null;
+    function j(a) {
+      var l;
+      return (((l = F.value) == null ? void 0 : l.some(
+        (r) => r[o.optionValueKey] === a[o.optionValueKey]
+      )) ?? !1) && !K(a[o.optionValueKey]);
+    }
+    const ae = c(() => {
+      var a, t;
+      return o.multiple && o.modelValue && Array.isArray(o.modelValue) ? o.modelValue.map(
+        (l) => {
+          var r, d;
+          return (d = (r = o.options) == null ? void 0 : r.find((b) => b[o.optionValueKey] === l)) == null ? void 0 : d[o.optionInputValueKey];
+        }
+      ).join(", ") : (t = (a = o.options) == null ? void 0 : a.find((l) => l[o.optionValueKey] === o.modelValue)) == null ? void 0 : t[o.optionInputValueKey];
+    }), M = c(
+      () => o.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), T = m(""), w = m("");
+    function W(a) {
+      return a.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z\u0400-\u04FF]/g, "");
+    }
+    const y = (a, t) => t && a && W(a.toString().toLocaleLowerCase().trim()).includes(
+      W(t.toLocaleLowerCase().trim())
+    );
+    function A(a) {
+      var t;
+      return a ? (t = o.options) == null ? void 0 : t.filter((l) => {
+        const r = l[o.optionLabelKey], d = l[o.optionValueKey], b = l[o.optionInputValueKey];
+        return y(r, a) || y(d, a) || y(b, a);
+      }) : o.options;
+    }
+    const i = c(() => A(T.value)), g = async (a) => {
+      var t;
+      if (a && ("relatedTarget" in a && ((t = B.value) != null && t.contains(a.relatedTarget)) || a.type === "keydown"))
+        return a.preventDefault();
+      await G(), I.value = !1, f.value = 0, S("close", a);
+    }, p = async (a) => {
+      o.disabled || $.value || (a == null || a.preventDefault(), I.value = !0, await ne(), S("focus", a), S("open", I.value));
+    };
+    function ie() {
+      var a, t;
+      (t = ((a = Z.value) == null ? void 0 : a.$el).querySelector("input")) == null || t.focus();
+    }
+    function pe(a) {
+      I.value ? g(a) : ie();
+    }
+    function he(a) {
+      var t, l;
+      T.value = a, (l = ((t = R.value) == null ? void 0 : t.$el).querySelector("input")) == null || l.focus();
+    }
+    function se(a) {
+      var l;
+      a === "Backspace" && w.value.length > 0 ? w.value = w.value.slice(0, -1) : w.value += a;
+      const t = A(w.value);
+      t != null && t.length && (f.value = (l = i.value) == null ? void 0 : l.findIndex(
+        (r) => r[o.optionValueKey] === t[0][o.optionValueKey]
+      ), typeof f.value == "number" && f.value >= 0 && ne(f.value)), vt(() => {
+        w.value = "";
+      }, 1e3);
+    }
+    const ce = (a) => {
+      const t = a.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(t) ? (a.preventDefault(), p(a), o.search ? he(t) : se(t)) : de(a);
+    }, de = (a) => {
+      const t = a.code, l = ["ArrowUp", "ArrowDown"].includes(t), r = ["Enter", "Space"].includes(t), d = t === "Escape" && $.value;
+      l ? Y(a, f.value) : r ? fe(a, f.value) : d && g();
+    }, Y = (a, t) => {
+      var d;
+      a.preventDefault();
+      const l = a.code;
+      $.value || p(a);
+      const r = (d = i.value) == null ? void 0 : d.length;
+      r && (typeof t == "number" ? t === r - 1 && l === "ArrowDown" ? f.value = 0 : t === 0 && l === "ArrowUp" ? f.value = r - 1 : f.value = l === "ArrowDown" ? t + 1 : t - 1 : f.value = l === "ArrowDown" ? 0 : r - 1, ne(f.value));
+    }, fe = (a, t) => {
+      var r, d, b;
+      if (a.preventDefault(), !$.value)
+        return p(a);
+      const l = t ? ((r = i.value) == null ? void 0 : r[t]) ?? ((d = i.value) == null ? void 0 : d[0]) : (b = i.value) == null ? void 0 : b[0];
+      K(l) || me(l);
+    };
+    async function ne(a) {
+      var l, r;
+      await G(), typeof a != "number" && Q();
+      const t = a ?? f.value;
+      typeof t == "number" && t >= 0 && ((r = (l = q.value) == null ? void 0 : l.querySelectorAll(".m-select-list-item")[t]) == null || r.scrollIntoView({
+        behavior: "auto",
+        block: "nearest",
+        inline: "start"
+      }));
+    }
+    function Q(a) {
+      var l;
+      const t = (l = i.value) == null ? void 0 : l.findIndex((r) => {
+        var d, b;
+        return o.multiple && Array.isArray(o.modelValue) ? a ? a[o.optionValueKey] === r[o.optionValueKey] : [...o.modelValue].reverse()[0] === r[o.optionValueKey] : ((b = (d = F.value) == null ? void 0 : d[0]) == null ? void 0 : b[o.optionValueKey]) === r[o.optionValueKey];
+      });
+      f.value = t && t >= 0 ? t : 0;
+    }
+    const me = (a, t = !0) => {
+      var b;
+      t && !o.multiple && G(() => g()), T.value = "";
+      const l = (b = F.value) == null ? void 0 : b.some(
+        (D) => D[o.optionValueKey] === a[o.optionValueKey]
+      );
+      let r = F.value;
+      l && o.multiple ? r = r == null ? void 0 : r.filter(
+        (D) => D[o.optionValueKey] !== a[o.optionValueKey]
+      ) : o.multiple ? r.push(a) : r = [a];
+      const d = r.map((D) => D[o.optionValueKey]);
+      S("update:model-value", o.multiple ? d : d[0]), S("selected-option", a), Q(a), ie();
+    };
+    return (a, t) => (v(), C(
+      "div",
+      {
+        ref_key: "mazSelectElement",
+        ref: B,
+        class: E(["m-select", [{ "--is-open": $.value, "--disabled": e.disabled }, o.class]]),
+        style: ee(e.style),
+        onBlurCapture: g
+      },
+      [
+        L(we, ke({
+          id: z(V),
+          ref_key: "mazInputComponent",
+          ref: Z,
+          class: "m-select-input"
+        }, a.$attrs, {
+          required: e.required,
+          "border-active": I.value,
+          color: e.color,
+          "model-value": ae.value,
+          autocomplete: "off",
+          size: e.size,
+          disabled: e.disabled,
+          onFocus: re(p, ["prevent", "stop"]),
+          onClick: re(p, ["prevent", "stop"]),
+          onChange: t[0] || (t[0] = (l) => S("change", l)),
+          onKeydown: ce
+        }), {
+          "right-icon": te(() => [
+            H("button", {
+              tabindex: "-1",
+              type: "button",
+              class: "m-select-input__toggle-button maz-custom",
+              onClick: re(pe, ["stop"])
+            }, [
+              L(z(x), { class: "m-select-chevron maz-text-xl" })
+            ], 8, pt)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled", "onFocus", "onClick"]),
+        L(De, { name: M.value }, {
+          default: te(() => [
+            $.value ? (v(), C(
+              "div",
+              {
+                key: 0,
+                ref_key: "optionsListElement",
+                ref: q,
+                class: E(["m-select-list", {
+                  "--top": e.listPosition.includes("top"),
+                  "--left": e.listPosition.includes("left"),
+                  "--right": e.listPosition.includes("right"),
+                  "--bottom": e.listPosition.includes("bottom")
+                }]),
+                style: ee({
+                  maxHeight: `${e.maxListHeight}px`,
+                  maxWidth: `${e.maxListWidth}px`
+                })
+              },
+              [
+                e.search ? (v(), C("div", ht, [
+                  L(we, {
+                    ref_key: "searchInputComponent",
+                    ref: R,
+                    modelValue: T.value,
+                    "onUpdate:modelValue": [
+                      t[1] || (t[1] = (l) => T.value = l),
+                      t[2] || (t[2] = (l) => f.value = 0)
+                    ],
+                    size: "sm",
+                    color: e.color,
+                    placeholder: e.searchPlaceholder,
+                    name: "search",
+                    autocomplete: "off",
+                    tabindex: "-1",
+                    class: "m-select-list__search-input",
+                    onKeydown: de
+                  }, {
+                    "left-icon": te(() => [
+                      L(z(P), { class: "maz-h-[1.3rem] maz-w-[1.3rem]" })
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue", "color", "placeholder"])
+                ])) : h("v-if", !0),
+                h(`
+          @slot No results slot - Displayed when no results corresponding with seeach query
+        `),
+                !i.value || i.value.length <= 0 ? J(a.$slots, "no-results", { key: 1 }, () => [
+                  H("span", gt, [
+                    L(z(O), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                  ])
+                ], !0) : (v(), C("div", bt, [
+                  (v(!0), C(
+                    Ue,
+                    null,
+                    Oe(i.value, (l, r) => (v(), C("button", {
+                      key: r,
+                      tabindex: "-1",
+                      type: "button",
+                      class: E(["m-select-list-item maz-custom", [
+                        {
+                          "--is-keyboard-selected": f.value === r,
+                          "--is-selected": j(l),
+                          "--is-none-value": K(l[e.optionValueKey])
+                        }
+                      ]]),
+                      style: ee({ minHeight: `${e.itemHeight}px` }),
+                      onClick: re((d) => me(l), ["prevent", "stop"])
+                    }, [
+                      e.multiple ? (v(), ue(z(n), {
+                        key: 0,
+                        tabindex: "-1",
+                        "model-value": j(l),
+                        size: "sm",
+                        color: e.color
+                      }, null, 8, ["model-value", "color"])) : h("v-if", !0),
+                      h(`
+              @slot Custom option
+                @binding {Object} option
+                @binding {Boolean} is-selected
+            `),
+                      J(a.$slots, "default", {
+                        option: l,
+                        isSelected: j(l)
+                      }, () => [
+                        H(
+                          "span",
+                          null,
+                          _(l[e.optionLabelKey]),
+                          1
+                          /* TEXT */
+                        )
+                      ], !0)
+                    ], 14, zt))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]))
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : h("v-if", !0)
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"])
+      ],
+      38
+      /* CLASS, STYLE, HYDRATE_EVENTS */
+    ));
+  }
+});
+const St = /* @__PURE__ */ $e(Ct, [["__scopeId", "data-v-441d5cd5"]]), Vt = ["id"], wt = {
+  key: 0,
+  class: "maz-text-lg"
+}, xt = /* @__PURE__ */ xe({
+  inheritAttrs: !1,
+  __name: "MazPhoneNumberInput",
+  props: {
+    style: { type: [String, Array, Object], default: void 0 },
+    class: { type: String, default: void 0 },
+    /** Country calling code + telephone number in international format */
+    modelValue: {
+      type: String,
+      validator: (e) => typeof e == "string" || e === void 0,
+      default: void 0
+    },
+    /** @deprecated */
+    defaultPhoneNumber: { type: String, default: void 0 },
+    /** Country code selected - Ex: "FR" */
+    countryCode: {
+      type: String,
+      default: void 0,
+      validator: (e) => be(e)
+    },
+    /** @deprecated - use country-code or v-model:country-code */
+    defaultCountryCode: {
+      type: String,
+      default: void 0,
+      validator: (e) => be(e)
+    },
+    id: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    /** List of country codes to place first in the select list - Ex: ['FR', 'BE', 'GE'] */
+    preferredCountries: { type: Array, default: void 0 },
+    /** List of country codes to be removed from the select list - Ex: ['FR', 'BE', 'GE'] */
+    ignoredCountries: { type: Array, default: void 0 },
+    /** List of country codes to only have the countries selected in the select list - Ex: ['FR', 'BE', 'GE'] */
+    onlyCountries: { type: Array, default: void 0 },
+    /** Locale strings of the component */
+    translations: { type: Object, default: void 0 },
+    /** Position where the list of countries will be opened */
+    listPosition: {
+      type: String,
+      default: "bottom left",
+      validator: (e) => ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
+        e
+      )
+    },
+    /** Component color applied - Ex: "secondary" */
+    color: { type: String, default: "primary" },
+    /** Component size applied - Ex: "sm" */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["mini", "xs", "sm", "md", "lg", "xl"].includes(e)
+    },
+    /** Remove flags in country list */
+    noFlags: { type: Boolean, default: !1 },
+    /** Disable input */
+    disabled: { type: Boolean, default: !1 },
+    /** No show the phone number example */
+    noExample: { type: Boolean, default: !1 },
+    /** Disable search input in country list */
+    noSearch: { type: Boolean, default: !1 },
+    /** By default the component use the browser locale to set the default country code if not country code is provided */
+    noUseBrowserLocale: { type: Boolean, default: !1 },
+    /** The component will make a request to get the location of the user and use it to set the default country code */
+    fetchCountry: { type: Boolean, default: !1 },
+    /** No show the country selector */
+    noCountrySelector: { type: Boolean, default: !1 },
+    /** Show country calling code in the country list */
+    showCodeOnList: { type: Boolean, default: !1 },
+    /** Replace country names */
+    customCountriesList: {
+      type: Object,
+      default: void 0
+    },
+    /** Disabled auto-format as you type */
+    noFormattingAsYouType: { type: Boolean, default: !1 },
+    /**
+     * locale of country list - Ex: "fr-FR"
+     * @default {string} browser locale
+     */
+    countryLocale: { type: String, default: void 0 },
+    /** Disable validation error UI */
+    noValidationError: { type: Boolean, default: !1 },
+    /** Disable validation success UI */
+    noValidationSuccess: { type: Boolean, default: !1 },
+    /** Add success UI */
+    success: { type: Boolean, default: !1 },
+    /** Add error UI */
+    error: { type: Boolean, default: !1 },
+    /** Will replace the calling code by the country name in the country selector */
+    countrySelectorDisplayName: { type: Boolean, default: !1 },
+    /** Choose the width of the country selector */
+    countrySelectorWidth: { type: String, default: "9rem" }
+  },
+  emits: [
+    /** emitted when country or phone number changes
+     * @property {Result} results - meta info of current phone numnber
+     */
+    "update",
+    /** emitted when country or phone number changes
+     * @property {Result} results - meta info of current phone numnber
+     */
+    "data",
+    /** emitted when selected country changes
+     * @property {CountryCode} countryCode - Country code
+     */
+    "country-code",
+    /** emitted when country or phone number changes
+     * @property {String} phoneNumber - phoneNumber formatted
+     */
+    "update:model-value",
+    /** emitted when country changes
+     * @property {CountryCode} countryCode - Country code
+     */
+    "update:country-code"
+  ],
+  setup(e, { emit: u }) {
+    const {
+      fetchCountryCode: n,
+      browserLocale: P,
+      getResultsFromPhoneNumber: x,
+      getAsYouTypeFormat: O,
+      getCountriesList: N,
+      getPhoneNumberExample: o,
+      sanitizePhoneNumber: S,
+      loadPhoneNumberExamplesFile: I
+    } = ut(), f = u, s = e, oe = Ie(), le = Pe({
+      componentName: "MazPhoneNumberInput",
+      instance: oe,
+      providedId: s.id
+    }), X = m(), $ = m(), V = Re({
+      start: 0,
+      end: 0,
+      cursorAtEnd: !0
+    }), F = m(!1), B = m(!1), Z = c(() => N(s.countryLocale, s.customCountriesList)), R = c(() => {
+      var t;
+      return (t = Z.value) == null ? void 0 : t.filter((l) => {
+        var r;
+        return !((r = s.ignoredCountries) != null && r.includes(l.iso2));
+      });
+    }), q = c(() => {
+      const t = s.onlyCountries || s.preferredCountries;
+      return t == null ? void 0 : t.map(
+        (l) => {
+          var r;
+          return (r = R.value) == null ? void 0 : r.find((d) => d.iso2.includes(l));
+        }
+      );
+    }), K = c(() => {
+      var t;
+      return (t = R.value) == null ? void 0 : t.filter((l) => {
+        var r;
+        return !((r = s.preferredCountries) != null && r.includes(l.iso2));
+      });
+    }), j = c(() => s.preferredCountries ? [...q.value ?? [], ...K.value ?? []] : s.onlyCountries ? q.value : R.value), ae = c(() => {
+      var t;
+      return (t = j.value) == null ? void 0 : t.map((l) => l ? {
+        ...l,
+        dialCode: `+${l.dialCode}`
+      } : void 0).filter(Qe);
+    }), M = c(() => ({
+      ...Ge,
+      ...s.translations
+    })), T = c(() => {
+      if (s.placeholder)
+        return s.placeholder;
+      const t = M.value.phoneInput.placeholder;
+      if (s.noExample || !F.value)
+        return t;
+      {
+        const l = o(y.value);
+        return i.value.isValid || !l ? t : `${M.value.phoneInput.example} ${l}`;
+      }
+    }), w = c({
+      get: () => s.modelValue || s.defaultPhoneNumber,
+      set: (t) => {
+        f("update:model-value", t);
+      }
+    }), W = m(), y = c({
+      get: () => s.countryCode || s.defaultCountryCode || W.value,
+      set: (t) => {
+        f("country-code", t), f("update:country-code", t), W.value = t;
+      }
+    }), A = m(w.value), i = m(
+      x({
+        phoneNumber: w.value,
+        countryCode: y.value
+      })
+    ), g = m(), p = c(() => s.noFormattingAsYouType ? A.value ?? "" : g.value ?? A.value ?? "");
+    async function ie() {
+      const t = await n();
+      t && Y(t);
+    }
+    async function pe() {
+      try {
+        !s.noExample && !F.value && (await I(), F.value = !0);
+      } catch {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file");
+      }
+    }
+    Be(async () => {
+      await fe(w.value), await G(), s.fetchCountry && !y.value && await ie(), !s.defaultCountryCode && !s.noUseBrowserLocale && !y.value && he(), await pe();
+    }), ve(
+      () => i.value,
+      (t) => {
+        f("update", t), f("data", t);
+      },
+      { immediate: !0, deep: !0 }
+    ), ve(
+      () => y.value,
+      (t, l) => {
+        t && t !== l && (Y(t), ce(p.value));
+      }
+    ), ve(
+      () => w.value,
+      async (t, l) => {
+        t !== l && fe(t);
+      }
+    ), ve(
+      () => p.value,
+      async (t, l) => {
+        if (!s.noFormattingAsYouType && t && t !== l) {
+          const r = Q();
+          if (r && !i.value.isValid && typeof V.start == "number" && !V.cursorAtEnd) {
+            const d = V.start, b = V.end;
+            setTimeout(() => {
+              r.setSelectionRange(d, b ?? d);
+            }, 0);
+          }
+        }
+      }
+    );
+    function he() {
+      const { locale: t } = P();
+      t && Y(t);
+    }
+    function se(t, l) {
+      i.value = x({
+        phoneNumber: t,
+        countryCode: l
+      });
+    }
+    async function ce(t) {
+      const l = Q();
+      V.start = l == null ? void 0 : l.selectionStart, V.end = l == null ? void 0 : l.selectionEnd, V.cursorAtEnd = V.start ? V.start >= t.length : !0;
+      const r = S(t);
+      A.value = r;
+      const d = x({
+        phoneNumber: r,
+        countryCode: y.value
+      });
+      w.value = d.e164;
+    }
+    function de(t) {
+      se(p.value, t), Y(t, !0);
+    }
+    function Y(t, l = !1) {
+      try {
+        be(t) && (y.value = t, l && a());
+      } catch (r) {
+        console.error(`[maz-ui](MazPhoneNumberInput) ${r}`);
+      }
+    }
+    async function fe(t) {
+      se(t, y.value), await G(), s.noFormattingAsYouType ? A.value = p.value : g.value = V.cursorAtEnd || i.value.isValid ? A.value = O(
+        i.value.countryCode ?? y.value,
+        i.value.formatNational ?? A.value
+      ) : A.value, await G(), ne(i.value);
+    }
+    function ne(t) {
+      t.countryCode && y.value !== t.countryCode && Y(t.countryCode);
+    }
+    function Q() {
+      var t;
+      return (t = X.value) == null ? void 0 : t.$el.querySelector("input");
+    }
+    function me() {
+      var t, l;
+      (l = (t = $.value) == null ? void 0 : t.$el.querySelector("input")) == null || l.focus();
+    }
+    async function a() {
+      var t;
+      await G(), (t = Q()) == null || t.focus();
+    }
+    return (t, l) => {
+      var r, d, b, D;
+      return v(), C("div", {
+        id: z(le),
+        class: E(["m-phone-number-input", [
+          s.class,
+          {
+            "--no-flags": e.noFlags
+          }
+        ]]),
+        style: ee(e.style)
+      }, [
+        y.value && !e.noFlags && !e.noCountrySelector ? (v(), C("button", {
+          key: 0,
+          class: "m-phone-number-input__country-flag maz-text-xl",
+          tabindex: "-1",
+          type: "button",
+          onClick: me
+        }, [
+          h(`
+        @slot Country selector flag
+          @binding {String} country-code - current selected country code - Ex: \`"FR"\`
+      `),
+          J(t.$slots, "selector-flag", { countryCode: y.value }, () => [
+            Ce(
+              _(z(Ae)(y.value)),
+              1
+              /* TEXT */
+            )
+          ], !0)
+        ])) : h("v-if", !0),
+        e.noCountrySelector ? h("v-if", !0) : (v(), ue(St, {
+          key: 1,
+          ref_key: "CountrySelector",
+          ref: $,
+          class: "m-phone-number-input__select",
+          "model-value": y.value,
+          "option-value-key": "iso2",
+          "option-label-key": "name",
+          "option-input-value-key": e.countrySelectorDisplayName ? "name" : "dialCode",
+          "max-list-width": 250,
+          disabled: e.disabled,
+          color: e.color,
+          size: e.size,
+          "list-position": e.listPosition,
+          search: !e.noSearch,
+          "search-placeholder": M.value.countrySelector.searchPlaceholder,
+          options: ae.value,
+          error: e.error || (e.noValidationError ? !1 : !!p.value && !y.value),
+          hint: p.value && !y.value ? M.value.countrySelector.error : void 0,
+          label: M.value.countrySelector.placeholder,
+          success: e.success || (e.noValidationSuccess ? !1 : (r = i.value) == null ? void 0 : r.isValid),
+          style: ee({
+            width: e.countrySelectorWidth
+          }),
+          "onUpdate:modelValue": l[0] || (l[0] = (k) => de(k)),
+          onFocus: l[1] || (l[1] = (k) => B.value = !1)
+        }, {
+          default: te(({ option: k, isSelected: ye }) => [
+            H(
+              "div",
+              {
+                class: E(["m-phone-number-input__select__item maz-flex maz-items-center maz-gap-1 maz-truncate", {
+                  "m-phone-number-input__select__item--selected": ye
+                }])
+              },
+              [
+                !e.noFlags && typeof k.iso2 == "string" ? (v(), C("span", wt, [
+                  h(`
+              @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
+            `),
+                  J(t.$slots, "country-list-flag", {
+                    countryCode: k.iso2,
+                    option: k,
+                    isSelected: ye
+                  }, () => [
+                    Ce(
+                      _(z(Ae)(k.iso2)),
+                      1
+                      /* TEXT */
+                    )
+                  ], !0)
+                ])) : h("v-if", !0),
+                e.showCodeOnList ? (v(), C(
+                  "span",
+                  {
+                    key: 1,
+                    class: E(["maz-w-9 maz-flex-none", { "maz-text-muted": !ye }])
+                  },
+                  _(k.dialCode),
+                  3
+                  /* TEXT, CLASS */
+                )) : h("v-if", !0),
+                H(
+                  "span",
+                  {
+                    class: E(["maz-flex-1 maz-truncate", { "maz-font-semibold": ye }])
+                  },
+                  _(k.name),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["model-value", "option-input-value-key", "disabled", "color", "size", "list-position", "search", "search-placeholder", "options", "error", "hint", "label", "success", "style"])),
+        L(we, ke({
+          id: e.id,
+          ref_key: "PhoneNumberInput",
+          ref: X,
+          "model-value": p.value,
+          label: T.value,
+          disabled: e.disabled,
+          color: e.color,
+          error: e.error || (e.noValidationError ? !1 : !!p.value && !((d = i.value) != null && d.isValid))
+        }, t.$attrs, {
+          size: e.size,
+          "icon-name": "phone",
+          type: "tel",
+          clearable: "",
+          success: e.success || (e.noValidationSuccess ? !1 : (b = i.value) == null ? void 0 : b.isValid),
+          class: ["m-phone-number-input__input maz-flex-1", {
+            "--border-radius": !e.noCountrySelector,
+            "--error": e.error || !((D = i.value) != null && D.isValid),
+            "--focused": B.value
+          }],
+          onFocus: l[2] || (l[2] = (k) => B.value = !0),
+          onBlur: l[3] || (l[3] = (k) => B.value = !1),
+          "onUpdate:modelValue": l[4] || (l[4] = (k) => ce(k))
+        }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"])
+      ], 14, Vt);
+    };
+  }
+});
+const $t = /* @__PURE__ */ $e(xt, [["__scopeId", "data-v-13c350c6"]]);
+export {
+  $t as M,
+  $e as _,
+  Pe as u
+};