maz-ui 3.19.2 → 3.19.3

package/components/chunks/MazPhoneNumberInput-e4f90230.mjs

@@ -0,0 +1,1423 @@
+import "../assets/MazPhoneNumberInput.css";
+import { computed, defineAsyncComponent, defineComponent, ref, getCurrentInstance, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, onBeforeMount, watch, nextTick, unref, Transition, normalizeStyle, Fragment, renderList, reactive } from "vue";
+import { isSupportedCountry, getCountryCallingCode, getExampleNumber, getCountries, parsePhoneNumberFromString, AsYouType } from "libphonenumber-js";
+function truthyFilter(value) {
+  return !!value;
+}
+const useInstanceUniqId = ({
+  componentName,
+  instance,
+  providedId
+}) => {
+  return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
+};
+const defaultLocales = {
+  countrySelector: {
+    placeholder: "Country code",
+    error: "Choose country",
+    searchPlaceholder: "Search the country"
+  },
+  phoneInput: {
+    placeholder: "Phone number",
+    example: "Example:"
+  }
+};
+function localeToUnicodeFlag(locale) {
+  const characters = [...locale];
+  return characters.map((letter) => letter.charCodeAt(0) % 32 + 127461).map((n) => String.fromCodePoint(n)).join("");
+}
+let displayNamesInstance = void 0;
+function getCountryName(locale, code, customCountriesNameListByIsoCode) {
+  if (customCountriesNameListByIsoCode == null ? void 0 : customCountriesNameListByIsoCode[code]) {
+    return customCountriesNameListByIsoCode[code];
+  }
+  if (!displayNamesInstance) {
+    displayNamesInstance = new Intl.DisplayNames([locale], { type: "region" });
+  }
+  return displayNamesInstance.of(code);
+}
+const PHONE_CHAR_REGEX = /^[\d ().-]+$/;
+const NON_ALPHA_REGEX = /^[^a-z]+$/i;
+let examples;
+async function loadPhoneNumberExamplesFile() {
+  const { default: data } = await import("./examples.mobile.json-618ba782.mjs");
+  examples = data;
+  return examples;
+}
+function isSameCountryCallingCode(countryCode, countryCode2) {
+  return getCountryCallingCode(countryCode) === getCountryCallingCode(countryCode2);
+}
+function getPhoneNumberExample(countryCode) {
+  var _a;
+  try {
+    return countryCode ? (_a = getExampleNumber(countryCode, examples)) == null ? void 0 : _a.formatNational() : void 0;
+  } catch (error) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${error}`);
+  }
+}
+function sanitizePhoneNumber(input) {
+  if (!input) {
+    return "";
+  }
+  const hasNonAlpha = NON_ALPHA_REGEX.test(input);
+  const hasPhoneChar = PHONE_CHAR_REGEX.test(input);
+  if (!hasNonAlpha && !hasPhoneChar) {
+    return input.replaceAll(/[^\d.]/g, "");
+  }
+  return input;
+}
+function getCountriesList(locale, customCountriesNameListByIsoCode) {
+  const countriesList = [];
+  const isoList = getCountries();
+  for (const iso2 of isoList) {
+    locale = locale ?? browserLocale().browserLocale ?? "en-US";
+    const name = getCountryName(locale, iso2, customCountriesNameListByIsoCode);
+    if (name) {
+      try {
+        const dialCode = getCountryCallingCode(iso2);
+        countriesList.push({
+          iso2,
+          dialCode,
+          name
+        });
+      } catch (error) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${error}`);
+      }
+    }
+  }
+  return countriesList;
+}
+function browserLocale() {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  const browserLocale2 = window.navigator.language;
+  if (!browserLocale2) {
+    return {};
+  }
+  let locale = browserLocale2.slice(3, 7).toUpperCase();
+  if (locale === "") {
+    locale = browserLocale2.slice(0, 2).toUpperCase();
+  }
+  if (locale === "EN") {
+    locale = "US";
+  }
+  if (locale === "JA") {
+    locale = "JP";
+  }
+  return { locale, browserLocale: browserLocale2 };
+}
+function isCountryAvailable(locale) {
+  try {
+    const response = isSupportedCountry(locale);
+    if (!response) {
+      console.error(`[maz-ui](MazPhoneNumberInput) The code country "${locale}" is not available`);
+      return false;
+    }
+    return response;
+  } catch (error) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${error}`);
+    return false;
+  }
+}
+const getResultsFromPhoneNumber = ({
+  phoneNumber,
+  countryCode
+}) => {
+  try {
+    if (!phoneNumber) {
+      return {
+        isValid: false,
+        countryCode
+      };
+    }
+    const parsedNumber = parsePhoneNumberFromString(phoneNumber, countryCode);
+    return {
+      isValid: (parsedNumber == null ? void 0 : parsedNumber.isValid()) ?? false,
+      isPossible: parsedNumber == null ? void 0 : parsedNumber.isPossible(),
+      countryCode: parsedNumber == null ? void 0 : parsedNumber.country,
+      countryCallingCode: parsedNumber == null ? void 0 : parsedNumber.countryCallingCode,
+      nationalNumber: parsedNumber == null ? void 0 : parsedNumber.nationalNumber,
+      type: parsedNumber == null ? void 0 : parsedNumber.getType(),
+      formatInternational: parsedNumber == null ? void 0 : parsedNumber.formatInternational(),
+      formatNational: parsedNumber == null ? void 0 : parsedNumber.formatNational(),
+      uri: parsedNumber == null ? void 0 : parsedNumber.getURI(),
+      e164: parsedNumber == null ? void 0 : parsedNumber.format("E.164"),
+      rfc3966: parsedNumber == null ? void 0 : parsedNumber.format("RFC3966")
+    };
+  } catch (error) {
+    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${error}`);
+  }
+};
+function getAsYouTypeFormat(countryCode, phoneNumber) {
+  try {
+    if (!phoneNumber) {
+      return;
+    }
+    return new AsYouType(countryCode).input(phoneNumber);
+  } catch (error) {
+    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${error}`);
+  }
+}
+async function fetchCountryCode() {
+  try {
+    const reponse = await fetch("https://ipwho.is");
+    const { country_code } = await reponse.json();
+    return country_code;
+  } catch (error) {
+    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${error}`);
+  }
+}
+function useLibphonenumber() {
+  return {
+    fetchCountryCode,
+    getAsYouTypeFormat,
+    getResultsFromPhoneNumber,
+    loadPhoneNumberExamplesFile,
+    getPhoneNumberExample,
+    sanitizePhoneNumber,
+    getCountriesList,
+    browserLocale,
+    isSameCountryCallingCode
+  };
+}
+function debounce(func, delay) {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+const MazBtn = defineAsyncComponent(() => import("./MazBtn-b29e3116.mjs"));
+const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
+const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-3c6844fc.mjs"));
+const EyeIcon = defineAsyncComponent(() => import("./eye-290c6a03.mjs"));
+const CheckIcon = defineAsyncComponent(() => import("./check-b1507ce9.mjs"));
+const _sfc_main$2 = defineComponent({
+  components: {
+    MazBtn,
+    MazIcon,
+    CheckIcon,
+    EyeIcon,
+    EyeOffIcon
+  },
+  inheritAttrs: false,
+  props: {
+    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: (value) => {
+        return [
+          "text",
+          "date",
+          "number",
+          "tel",
+          "search",
+          "url",
+          "password",
+          "month",
+          "time",
+          "week",
+          "email"
+        ].includes(value);
+      }
+    },
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    error: { type: Boolean, default: false },
+    success: { type: Boolean, default: false },
+    warning: { type: Boolean, default: false },
+    hint: { type: String, default: void 0 },
+    inputClasses: { type: String, default: void 0 },
+    noBorder: { type: Boolean, default: false },
+    noRadius: { type: Boolean, default: false },
+    size: {
+      type: String,
+      default: "md",
+      validator: (value) => {
+        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
+      }
+    },
+    debounce: { type: Boolean, default: false },
+    debounceDelay: { type: Number, default: 500 },
+    validButton: { type: Boolean, default: false },
+    validButtonLoading: { type: Boolean, default: false },
+    autoFocus: { type: Boolean, default: false },
+    borderActive: { type: Boolean, default: false },
+    leftIcon: { type: String, default: void 0 },
+    rightIcon: { type: String, default: void 0 }
+  },
+  emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
+  setup(props, { emit, slots }) {
+    const hasPasswordVisible = ref(false);
+    const isFocused = ref(false);
+    const input = ref();
+    const instance = getCurrentInstance();
+    const instanceId = useInstanceUniqId({
+      componentName: "MazInput",
+      instance,
+      providedId: props.id
+    });
+    onMounted(() => {
+      var _a;
+      if (props.autoFocus) {
+        (_a = input.value) == null ? void 0 : _a.focus();
+      }
+    });
+    const isPasswordType = computed(() => props.type === "password");
+    const inputType = computed(() => hasPasswordVisible.value ? "text" : props.type);
+    const borderStyle = computed(() => {
+      if (props.noBorder)
+        return void 0;
+      if (props.error)
+        return "maz-border-danger";
+      if (props.success)
+        return "maz-border-success";
+      if (props.warning)
+        return "maz-border-warning";
+      if (isFocused.value || props.borderActive) {
+        if (props.color === "black")
+          return "maz-border-black";
+        if (props.color === "danger")
+          return "maz-border-danger";
+        if (props.color === "info")
+          return "maz-border-info";
+        if (props.color === "primary")
+          return "maz-border-primary";
+        if (props.color === "secondary")
+          return "maz-border-secondary";
+        if (props.color === "success")
+          return "maz-border-success";
+        if (props.color === "warning")
+          return "maz-border-warning";
+        if (props.color === "white")
+          return "maz-border-white";
+      }
+      return "--default-border";
+    });
+    const computedPlaceholder = computed(() => {
+      const { required, placeholder } = props;
+      if (!placeholder)
+        return void 0;
+      return required ? `${placeholder} *` : placeholder;
+    });
+    const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
+    const inputValue = computed({
+      get: () => props.modelValue,
+      set: (value) => emitValue(value)
+    });
+    const shouldUp = computed(() => {
+      return (!!props.label || !!props.hint) && (isFocused.value || !!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type));
+    });
+    const hasLabel = computed(() => !!props.label || !!props.hint);
+    const hasRightPart = () => {
+      return !!slots["right-icon"] || isPasswordType.value || !!slots["valid-button"] || props.validButton || !!props.rightIcon;
+    };
+    const hasLeftPart = () => {
+      return !!slots["left-icon"] || !!props.leftIcon;
+    };
+    const focus = (event) => {
+      emit("focus", event);
+      isFocused.value = true;
+    };
+    const blur = (event) => {
+      emit("blur", event);
+      isFocused.value = false;
+    };
+    const change = (event) => emit("change", event);
+    const debounceEmitValue = debounce((value) => {
+      emit("update:model-value", value);
+    }, props.debounceDelay);
+    const emitValue = (value) => {
+      if (props.debounce)
+        return debounceEmitValue(value);
+      emit("update:model-value", value);
+    };
+    return {
+      inputValue,
+      shouldUp,
+      hasLabel,
+      computedPlaceholder,
+      isPasswordType,
+      inputType,
+      input,
+      isFocused,
+      hasPasswordVisible,
+      borderStyle,
+      focus,
+      blur,
+      change,
+      emitValue,
+      hasRightPart,
+      hasLeftPart,
+      instanceId
+    };
+  }
+});
+const MazInput_vue_vue_type_style_index_0_scoped_52aef9c7_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$2 = {
+  key: 0,
+  class: "m-input-wrapper-left"
+};
+const _hoisted_2$2 = { class: "m-input-wrapper-input" };
+const _hoisted_3$1 = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"];
+const _hoisted_4$1 = ["for"];
+const _hoisted_5$1 = { key: 0 };
+const _hoisted_6 = {
+  key: 1,
+  class: "m-input-wrapper-right"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MazIcon = resolveComponent("MazIcon");
+  const _component_EyeOffIcon = resolveComponent("EyeOffIcon");
+  const _component_EyeIcon = resolveComponent("EyeIcon");
+  const _component_MazBtn = resolveComponent("MazBtn");
+  const _component_CheckIcon = resolveComponent("CheckIcon");
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: normalizeClass(["m-input", [
+        {
+          "--is-focused": _ctx.isFocused || _ctx.borderActive,
+          "--should-up": _ctx.shouldUp,
+          "--has-label": _ctx.hasLabel,
+          "--is-disabled": _ctx.disabled,
+          "--is-readonly": _ctx.readonly,
+          "--has-z-2": _ctx.error || _ctx.warning || _ctx.success,
+          "--has-state": _ctx.error || _ctx.warning || _ctx.success
+        },
+        _ctx.$attrs.class,
+        `--${_ctx.color}`,
+        `--${_ctx.size}`
+      ]]),
+      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", $event))
+    },
+    [
+      createElementVNode(
+        "div",
+        {
+          class: normalizeClass(["m-input-wrapper", [_ctx.inputClasses, _ctx.borderStyle, { "maz-rounded": !_ctx.noRadius }]])
+        },
+        [
+          _ctx.hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+            _ctx.$slots["left-icon"] || _ctx.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
+              createVNode(_component_MazIcon, {
+                name: _ctx.leftIcon,
+                class: "maz-text-xl maz-text-muted"
+              }, null, 8, ["name"])
+            ], true) : createCommentVNode("v-if", true)
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$2, [
+            withDirectives(createElementVNode("input", mergeProps({
+              id: _ctx.instanceId,
+              ref: "input",
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+              type: _ctx.inputType,
+              name: _ctx.name
+            }, _ctx.$attrs, {
+              placeholder: _ctx.computedPlaceholder,
+              "aria-label": _ctx.label || _ctx.placeholder,
+              disabled: _ctx.disabled,
+              readonly: _ctx.readonly,
+              required: _ctx.required,
+              class: "m-input-input"
+            }, toHandlers({
+              blur: _ctx.blur,
+              focus: _ctx.focus,
+              change: _ctx.change
+            }, true)), null, 16, _hoisted_3$1), [
+              [vModelDynamic, _ctx.inputValue]
+            ]),
+            _ctx.label || _ctx.hint ? (openBlock(), createElementBlock("label", {
+              key: 0,
+              ref: "label",
+              for: _ctx.instanceId,
+              class: normalizeClass(["m-input-label", [
+                {
+                  "maz-text-danger-600": _ctx.error,
+                  "maz-text-success-600": _ctx.success,
+                  "maz-text-warning-600": _ctx.warning
+                }
+              ]])
+            }, [
+              createTextVNode(
+                toDisplayString(_ctx.hint || _ctx.label) + " ",
+                1
+                /* TEXT */
+              ),
+              _ctx.required ? (openBlock(), createElementBlock("sup", _hoisted_5$1, "*")) : createCommentVNode("v-if", true)
+            ], 10, _hoisted_4$1)) : createCommentVNode("v-if", true)
+          ]),
+          _ctx.hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            _ctx.$slots["right-icon"] || _ctx.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
+              createVNode(_component_MazIcon, {
+                name: _ctx.rightIcon,
+                class: "maz-text-xl maz-text-muted"
+              }, null, 8, ["name"])
+            ], true) : createCommentVNode("v-if", true),
+            _ctx.isPasswordType ? (openBlock(), createBlock(_component_MazBtn, {
+              key: 1,
+              color: "transparent",
+              tabindex: "-1",
+              size: "mini",
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.hasPasswordVisible = !_ctx.hasPasswordVisible, ["stop"]))
+            }, {
+              default: withCtx(() => [
+                _ctx.hasPasswordVisible ? (openBlock(), createBlock(_component_EyeOffIcon, {
+                  key: 0,
+                  class: "maz-text-xl maz-text-muted"
+                })) : (openBlock(), createBlock(_component_EyeIcon, {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                }))
+              ]),
+              _: 1
+              /* STABLE */
+            })) : createCommentVNode("v-if", true),
+            _ctx.$slots["valid-button"] || _ctx.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
+              createVNode(_component_MazBtn, {
+                color: "transparent",
+                disabled: _ctx.disabled,
+                tabindex: "-1",
+                loading: _ctx.validButtonLoading,
+                class: "m-input-valid-button",
+                size: "mini",
+                type: "submit"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_CheckIcon, { class: "maz-text-2xl maz-text-normal" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "loading"])
+            ], true) : createCommentVNode("v-if", true)
+          ])) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render], ["__scopeId", "data-v-52aef9c7"]]);
+ref("system");
+ref();
+ref([]);
+let timeout = null;
+function debounceCallback(callback, delay) {
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  timeout = setTimeout(callback, delay);
+}
+const _hoisted_1$1 = ["onClick"];
+const _hoisted_2$1 = {
+  key: 0,
+  tabindex: "-1",
+  class: "m-select-list__search-wrapper"
+};
+const _hoisted_3 = { class: "m-select-list__no-results" };
+const _hoisted_4 = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+};
+const _hoisted_5 = ["onClick"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MazSelect",
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      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: (value) => {
+        return ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
+          value
+        );
+      }
+    },
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    open: { type: Boolean, default: false },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    itemHeight: { type: Number, default: 40 },
+    maxListHeight: { type: Number, default: 240 },
+    maxListWidth: { type: Number, default: void 0 },
+    size: {
+      type: String,
+      default: "md",
+      validator: (value) => {
+        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
+      }
+    },
+    search: { type: Boolean, default: false },
+    searchPlaceholder: { type: String, default: "Search in options" }
+  },
+  emits: [
+    "close",
+    "open",
+    "blur",
+    "focus",
+    "change",
+    "update:model-value",
+    /** On selected value, returns the option object */
+    "selected-option"
+  ],
+  setup(__props, { emit: __emit }) {
+    const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-6a0dd1a2.mjs"));
+    const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-7a070b10.mjs"));
+    const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-6173a20b.mjs"));
+    const instance = getCurrentInstance();
+    const props = __props;
+    const emits = __emit;
+    const listOpened = ref(false);
+    const tmpModelValueIndex = ref();
+    const hasListOpened = computed(() => listOpened.value || props.open);
+    const instanceId = useInstanceUniqId({
+      componentName: "MazSelect",
+      instance,
+      providedId: props.id
+    });
+    onBeforeMount(() => {
+      var _a, _b;
+      if (!((_a = props.options) == null ? void 0 : _a.length)) {
+        console.warn("[maz-ui](MazSelect) you must provide options");
+      }
+      if (selectedOption.value) {
+        tmpModelValueIndex.value = (_b = props.options) == null ? void 0 : _b.findIndex(
+          (option) => {
+            var _a2;
+            return option[props.optionValueKey] === ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]);
+          }
+        );
+      }
+    });
+    const mazSelectElement = ref();
+    const mazInputComponent = ref();
+    const searchInputComponent = ref();
+    const optionsListElement = ref();
+    const selectedOption = computed(
+      () => {
+        var _a;
+        return (_a = props.options) == null ? void 0 : _a.find((option) => props.modelValue === option[props.optionValueKey]);
+      }
+    );
+    const isNullOrUndefined = (value) => {
+      return value === void 0 || value === null;
+    };
+    const mazInputValue = computed(() => {
+      var _a, _b, _c;
+      return isNullOrUndefined((_a = selectedOption.value) == null ? void 0 : _a[props.optionValueKey]) ? void 0 : ((_b = selectedOption.value) == null ? void 0 : _b[props.optionInputValueKey]) ?? ((_c = selectedOption.value) == null ? void 0 : _c[props.optionLabelKey]);
+    });
+    const listTransition = computed(
+      () => props.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    );
+    const searchQuery = ref("");
+    const query = ref("");
+    function normalizeString(str) {
+      return str.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z]/g, "");
+    }
+    const searchInValue = (value, query2) => {
+      return query2 && value && normalizeString(value.toString().toLocaleLowerCase().trim()).includes(
+        normalizeString(query2.toLocaleLowerCase().trim())
+      );
+    };
+    watch(
+      () => props.modelValue,
+      (value, oldValue) => {
+        if (value && value !== oldValue) {
+          scrollToSelected();
+          updateTmpModelValueIndex();
+        }
+      }
+    );
+    function getFilteredOptionWithQuery(query2) {
+      var _a;
+      return query2 ? (_a = props.options) == null ? void 0 : _a.filter((option) => {
+        const searchValue = option[props.optionLabelKey];
+        const searchValue3 = option[props.optionValueKey];
+        const searchValue2 = option[props.optionInputValueKey];
+        return searchInValue(searchValue, query2) || searchInValue(searchValue3, query2) || searchInValue(searchValue2, query2);
+      }) : props.options;
+    }
+    const optionsList = computed(() => getFilteredOptionWithQuery(searchQuery.value));
+    const closeList = async (event) => {
+      var _a;
+      if (event && ("relatedTarget" in event && ((_a = mazSelectElement.value) == null ? void 0 : _a.contains(event.relatedTarget)) || event.type === "keydown")) {
+        return event.preventDefault();
+      }
+      await nextTick();
+      listOpened.value = false;
+      tmpModelValueIndex.value = 0;
+      emits("close", event);
+    };
+    const openList = async (event) => {
+      event == null ? void 0 : event.preventDefault();
+      if (props.disabled)
+        return;
+      listOpened.value = true;
+      await scrollToSelected();
+      emits("focus", event);
+      emits("open", listOpened.value);
+    };
+    function toggleList(event) {
+      var _a, _b;
+      return listOpened.value ? closeList(event) : ((_b = (_a = mazInputComponent.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus()) ?? openList();
+    }
+    function focusSearchInputAndSetQuery(q) {
+      var _a;
+      searchQuery.value = q;
+      (_a = searchInputComponent.value) == null ? void 0 : _a.input.focus();
+    }
+    function searchOptionWithQuery(keyPressed) {
+      var _a;
+      if (keyPressed === "Backspace" && query.value.length > 0) {
+        query.value = query.value.slice(0, -1);
+      } else {
+        query.value += keyPressed;
+      }
+      const filteredOptions = getFilteredOptionWithQuery(query.value);
+      if (filteredOptions == null ? void 0 : filteredOptions.length) {
+        tmpModelValueIndex.value = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
+          (option) => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey]
+        );
+        scrollToSelected(tmpModelValueIndex.value);
+      }
+      debounceCallback(() => {
+        query.value = "";
+      }, 1e3);
+    }
+    const mainInputKeyboardHandler = (event) => {
+      const keyPressed = event.key;
+      if (/^[\dA-Za-z]$/.test(keyPressed)) {
+        event.preventDefault();
+        openList(event);
+        props.search ? focusSearchInputAndSetQuery(keyPressed) : searchOptionWithQuery(keyPressed);
+      } else {
+        keyboardHandler(event);
+      }
+    };
+    const keyboardHandler = (event) => {
+      const code = event.code;
+      const isArrow = ["ArrowUp", "ArrowDown"].includes(code);
+      const isEnter = "Enter" === code;
+      const isEscape = "Escape" === code && hasListOpened.value;
+      if (isArrow) {
+        arrowHandler(event, tmpModelValueIndex.value);
+      } else if (isEnter) {
+        enterHandler(event, tmpModelValueIndex.value);
+      } else if (isEscape) {
+        closeList();
+      }
+    };
+    const arrowHandler = (event, currentIndex) => {
+      var _a;
+      event.preventDefault();
+      const code = event.code;
+      if (!hasListOpened.value)
+        openList(event);
+      const optionsLength = (_a = optionsList.value) == null ? void 0 : _a.length;
+      if (!optionsLength) {
+        return;
+      }
+      if (typeof currentIndex === "number") {
+        if (currentIndex === optionsLength - 1 && code === "ArrowDown") {
+          tmpModelValueIndex.value = 0;
+        } else if (currentIndex === 0 && code === "ArrowUp") {
+          tmpModelValueIndex.value = optionsLength - 1;
+        } else {
+          tmpModelValueIndex.value = code === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
+        }
+      } else {
+        tmpModelValueIndex.value = code === "ArrowDown" ? 0 : optionsLength - 1;
+      }
+      scrollToSelected(tmpModelValueIndex.value);
+    };
+    const enterHandler = (event, currentIndex) => {
+      var _a, _b, _c;
+      event.preventDefault();
+      if (!hasListOpened.value) {
+        return openList(event);
+      }
+      const newValue = currentIndex ? ((_a = optionsList.value) == null ? void 0 : _a[currentIndex]) ?? ((_b = optionsList.value) == null ? void 0 : _b[0]) : (_c = optionsList.value) == null ? void 0 : _c[0];
+      if (!isNullOrUndefined(newValue)) {
+        updateValue(newValue);
+      }
+    };
+    async function scrollToSelected(index) {
+      var _a, _b, _c;
+      await nextTick();
+      const selectedIndex = index ?? ((_a = optionsList.value) == null ? void 0 : _a.findIndex(
+        (option) => {
+          var _a2;
+          return ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]) === option[props.optionValueKey];
+        }
+      ));
+      if (typeof selectedIndex === "number") {
+        if (!tmpModelValueIndex.value)
+          tmpModelValueIndex.value = selectedIndex;
+        (_c = (_b = optionsListElement.value) == null ? void 0 : _b.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _c.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "start"
+        });
+      }
+    }
+    function updateTmpModelValueIndex() {
+      var _a;
+      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
+        (option) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
+      );
+      tmpModelValueIndex.value = index && index >= 0 ? index : void 0;
+    }
+    const updateValue = (selectedOption2, mustCloseList = true) => {
+      if (mustCloseList) {
+        nextTick(() => closeList());
+      }
+      searchQuery.value = "";
+      emits("update:model-value", selectedOption2[props.optionValueKey]);
+      emits("selected-option", selectedOption2);
+      updateTmpModelValueIndex();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "mazSelectElement",
+          ref: mazSelectElement,
+          class: normalizeClass(["m-select", { "--is-open": hasListOpened.value, "--disabled": __props.disabled }]),
+          onBlurCapture: closeList
+        },
+        [
+          createVNode(MazInput, mergeProps({
+            id: unref(instanceId),
+            ref_key: "mazInputComponent",
+            ref: mazInputComponent,
+            class: "m-select-input"
+          }, _ctx.$attrs, {
+            required: __props.required,
+            "border-active": listOpened.value,
+            color: __props.color,
+            "model-value": mazInputValue.value,
+            autocomplete: "off",
+            size: __props.size,
+            disabled: __props.disabled,
+            onFocus: withModifiers(openList, ["prevent", "stop"]),
+            onChange: _cache[0] || (_cache[0] = ($event) => emits("change", $event)),
+            onKeydown: mainInputKeyboardHandler
+          }), {
+            "right-icon": withCtx(() => [
+              createElementVNode("button", {
+                tabindex: "-1",
+                type: "button",
+                class: "m-select-input__toggle-button maz-custom",
+                onClick: withModifiers(toggleList, ["stop"])
+              }, [
+                createVNode(unref(ChevronDownIcon), { class: "m-select-chevron maz-text-xl" })
+              ], 8, _hoisted_1$1)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled", "onFocus"]),
+          createVNode(Transition, { name: listTransition.value }, {
+            default: withCtx(() => [
+              hasListOpened.value ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  ref_key: "optionsListElement",
+                  ref: optionsListElement,
+                  class: normalizeClass(["m-select-list", {
+                    "--top": __props.listPosition.includes("top"),
+                    "--left": __props.listPosition.includes("left"),
+                    "--right": __props.listPosition.includes("right"),
+                    "--bottom": __props.listPosition.includes("bottom")
+                  }]),
+                  style: normalizeStyle({
+                    maxHeight: `${__props.maxListHeight}px`,
+                    maxWidth: `${__props.maxListWidth}px`
+                  })
+                },
+                [
+                  __props.search ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+                    createVNode(MazInput, {
+                      ref_key: "searchInputComponent",
+                      ref: searchInputComponent,
+                      modelValue: searchQuery.value,
+                      "onUpdate:modelValue": [
+                        _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+                        _cache[2] || (_cache[2] = ($event) => tmpModelValueIndex.value = 0)
+                      ],
+                      size: "sm",
+                      color: __props.color,
+                      placeholder: __props.searchPlaceholder,
+                      name: "search",
+                      autocomplete: "off",
+                      tabindex: "-1",
+                      class: "m-select-list__search-input",
+                      onKeydown: keyboardHandler
+                    }, {
+                      "left-icon": withCtx(() => [
+                        createVNode(unref(SearchIcon), { class: "maz-h-[1.3rem] maz-w-[1.3rem]" })
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["modelValue", "color", "placeholder"])
+                  ])) : createCommentVNode("v-if", true),
+                  createCommentVNode(" No results slot - Displayed when no results corresponding with seeach query "),
+                  !optionsList.value || optionsList.value.length <= 0 ? renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
+                    createElementVNode("span", _hoisted_3, [
+                      createVNode(unref(NoSymbolIcon), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                    ])
+                  ], true) : (openBlock(), createElementBlock("div", _hoisted_4, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(optionsList.value, (option, i) => {
+                        var _a, _b, _c;
+                        return openBlock(), createElementBlock("button", {
+                          key: i,
+                          tabindex: "-1",
+                          type: "button",
+                          class: normalizeClass(["m-select-list-item maz-custom", [
+                            {
+                              "--is-keyboard-selected": tmpModelValueIndex.value === i,
+                              "--is-selected": ((_a = selectedOption.value) == null ? void 0 : _a[__props.optionValueKey]) === option[__props.optionValueKey] && !isNullOrUndefined(option[__props.optionValueKey]),
+                              "--is-none-value": isNullOrUndefined(option[__props.optionValueKey])
+                            },
+                            `--${__props.color}`
+                          ]]),
+                          style: normalizeStyle({ minHeight: `${__props.itemHeight}px` }),
+                          onClick: withModifiers(($event) => updateValue(option), ["prevent", "stop"])
+                        }, [
+                          renderSlot(_ctx.$slots, "default", {
+                            option,
+                            isSelected: ((_b = selectedOption.value) == null ? void 0 : _b[__props.optionValueKey]) === option[__props.optionValueKey],
+                            selectedOption: (_c = selectedOption.value) == null ? void 0 : _c[__props.optionValueKey]
+                          }, () => [
+                            createElementVNode(
+                              "span",
+                              null,
+                              toDisplayString(option[__props.optionLabelKey]),
+                              1
+                              /* TEXT */
+                            )
+                          ], true)
+                        ], 14, _hoisted_5);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]))
+                ],
+                6
+                /* CLASS, STYLE */
+              )) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"])
+        ],
+        34
+        /* CLASS, HYDRATE_EVENTS */
+      );
+    };
+  }
+});
+const MazSelect_vue_vue_type_style_index_0_scoped_2589528b_lang = "";
+const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2589528b"]]);
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  class: "maz-mr-2 maz-text-lg"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPhoneNumberInput",
+  props: {
+    modelValue: {
+      type: String,
+      validator: (prop) => {
+        return typeof prop === "string" || prop === void 0;
+      },
+      default: void 0
+    },
+    /** @deprecated */
+    defaultPhoneNumber: { type: String, default: void 0 },
+    countryCode: {
+      type: String,
+      default: void 0,
+      validator: (code) => isCountryAvailable(code)
+    },
+    /** @deprecated - use country-code or v-model:country-code */
+    defaultCountryCode: {
+      type: String,
+      default: void 0,
+      validator: (code) => isCountryAvailable(code)
+    },
+    id: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    preferredCountries: { type: Array, default: void 0 },
+    ignoredCountries: { type: Array, default: void 0 },
+    onlyCountries: { type: Array, default: void 0 },
+    translations: { type: Object, default: void 0 },
+    listPosition: {
+      type: String,
+      default: "bottom left",
+      validator: (value) => {
+        return ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
+          value
+        );
+      }
+    },
+    color: { type: String, default: "primary" },
+    size: {
+      type: String,
+      default: "md",
+      validator: (value) => {
+        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
+      }
+    },
+    noFlags: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    noExample: { type: Boolean, default: false },
+    noSearch: { type: Boolean, default: false },
+    noUseBrowserLocale: { type: Boolean, default: false },
+    fetchCountry: { type: Boolean, default: false },
+    noCountrySelector: { type: Boolean, default: false },
+    showCodeOnList: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    customCountriesList: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Disabled auto-format as you type
+     */
+    noFormattingAsYouType: { type: Boolean, default: false },
+    /**
+     * locale of country list - Ex: "fr-FR"
+     * @default browser locale
+     */
+    countryLocale: { type: String, default: void 0 }
+  },
+  emits: [
+    /** emitted when country or phone number changed
+     * @returns data - {Result}
+     */
+    "update",
+    /** emitted when country or phone number changed
+     * @returns data - {Result}
+     */
+    "data",
+    /** emitted when selected country changed */
+    "country-code",
+    /** Two way binding (v-model:model-value) - emitted when country changed */
+    "update:model-value",
+    /** Two way binding (v-model:country-code) - emitted when country changed */
+    "update:country-code"
+  ],
+  setup(__props, { emit: __emit }) {
+    const {
+      fetchCountryCode: fetchCountryCode2,
+      browserLocale: browserLocale2,
+      getResultsFromPhoneNumber: getResultsFromPhoneNumber2,
+      getAsYouTypeFormat: getAsYouTypeFormat2,
+      getCountriesList: getCountriesList2,
+      getPhoneNumberExample: getPhoneNumberExample2,
+      sanitizePhoneNumber: sanitizePhoneNumber2,
+      loadPhoneNumberExamplesFile: loadPhoneNumberExamplesFile2
+    } = useLibphonenumber();
+    const emits = __emit;
+    const props = __props;
+    const instance = getCurrentInstance();
+    const instanceId = useInstanceUniqId({
+      componentName: "MazPhoneNumberInput",
+      instance,
+      providedId: props.id
+    });
+    const PhoneNumberInput = ref();
+    const CountrySelector = ref();
+    const selectionRange = reactive({
+      start: 0,
+      end: 0,
+      cursorAtEnd: true
+    });
+    const examplesFileLoaded = ref(false);
+    const inputFocused = ref(false);
+    const countries = computed(() => getCountriesList2(props.countryLocale, props.customCountriesList));
+    const countriesList = computed(() => {
+      var _a;
+      return (_a = countries.value) == null ? void 0 : _a.filter((item) => {
+        var _a2;
+        return !((_a2 = props.ignoredCountries) == null ? void 0 : _a2.includes(item.iso2));
+      });
+    });
+    const countriesFiltered = computed(() => {
+      const countries2 = props.onlyCountries || props.preferredCountries;
+      return countries2 == null ? void 0 : countries2.map(
+        (country) => {
+          var _a;
+          return (_a = countriesList.value) == null ? void 0 : _a.find((item) => item.iso2.includes(country));
+        }
+      );
+    });
+    const otherCountries = computed(() => {
+      var _a;
+      return (_a = countriesList.value) == null ? void 0 : _a.filter((item) => {
+        var _a2;
+        return !((_a2 = props.preferredCountries) == null ? void 0 : _a2.includes(item.iso2));
+      });
+    });
+    const countriesSorted = computed(() => {
+      return props.preferredCountries ? [...countriesFiltered.value ?? [], ...otherCountries.value ?? []] : props.onlyCountries ? countriesFiltered.value : countriesList.value;
+    });
+    const countryOptions = computed(() => {
+      var _a;
+      return (_a = countriesSorted.value) == null ? void 0 : _a.map((country) => {
+        return country ? {
+          ...country,
+          dialCode: `+${country.dialCode}`
+        } : void 0;
+      }).filter(truthyFilter);
+    });
+    const locales = computed(() => ({
+      ...defaultLocales,
+      ...props.translations
+    }));
+    const inputPlaceholder = computed(() => {
+      if (props.placeholder) {
+        return props.placeholder;
+      }
+      const defaultPlaceholder = locales.value.phoneInput.placeholder;
+      if (props.noExample || !examplesFileLoaded.value) {
+        return defaultPlaceholder;
+      } else {
+        const example = getPhoneNumberExample2(countryCode.value);
+        return results.value.isValid || !example ? defaultPlaceholder : `${locales.value.phoneInput.example} ${example}`;
+      }
+    });
+    const model = computed({
+      get: () => props.modelValue || props.defaultPhoneNumber,
+      set: (value) => {
+        emits("update:model-value", value);
+      }
+    });
+    const internalCountryCode = ref();
+    const countryCode = computed({
+      get: () => props.countryCode || props.defaultCountryCode || internalCountryCode.value,
+      set: (value) => {
+        emits("country-code", value);
+        emits("update:country-code", value);
+        internalCountryCode.value = value;
+      }
+    });
+    const internalValue = ref(model.value);
+    const results = ref(
+      getResultsFromPhoneNumber2({
+        phoneNumber: model.value,
+        countryCode: countryCode.value
+      })
+    );
+    const asYouTypeFormatted = ref();
+    const inputValue = computed(() => {
+      if (props.noFormattingAsYouType) {
+        return internalValue.value ?? "";
+      }
+      return asYouTypeFormatted.value ?? internalValue.value ?? "";
+    });
+    async function setCountryFromIpWho() {
+      const fetchedLocale = await fetchCountryCode2();
+      if (fetchedLocale)
+        setCountryCode(fetchedLocale);
+    }
+    async function loadExamples() {
+      try {
+        if (!props.noExample && !examplesFileLoaded.value) {
+          await loadPhoneNumberExamplesFile2();
+          examplesFileLoaded.value = true;
+        }
+      } catch {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file");
+      }
+    }
+    onMounted(async () => {
+      await parseModel(model.value);
+      await nextTick();
+      if (props.fetchCountry && !countryCode.value) {
+        await setCountryFromIpWho();
+      }
+      if (!props.defaultCountryCode && !props.noUseBrowserLocale && !countryCode.value) {
+        setCountryCodeFromBrowserLocale();
+      }
+      await loadExamples();
+    });
+    watch(
+      () => results.value,
+      (newResults) => {
+        emits("update", newResults);
+        emits("data", newResults);
+      },
+      { immediate: true, deep: true }
+    );
+    watch(
+      () => countryCode.value,
+      (newCountryCode, oldCountryCode) => {
+        if (newCountryCode && newCountryCode !== oldCountryCode) {
+          setCountryCode(newCountryCode);
+          onInputValueChanged(inputValue.value);
+        }
+      }
+    );
+    watch(
+      () => model.value,
+      async (newModel, oldModel) => {
+        if (newModel !== oldModel) {
+          parseModel(newModel);
+        }
+      }
+    );
+    watch(
+      () => inputValue.value,
+      async (newModel, oldModel) => {
+        if (!props.noFormattingAsYouType && newModel && newModel !== oldModel) {
+          const input = getPhoneNumberInput();
+          if (input && !results.value.isValid && typeof selectionRange.start === "number" && !selectionRange.cursorAtEnd) {
+            const start = selectionRange.start;
+            const end = selectionRange.end;
+            setTimeout(() => {
+              input.setSelectionRange(start, end ?? start);
+            }, 0);
+          }
+        }
+      }
+    );
+    function setCountryCodeFromBrowserLocale() {
+      const { locale } = browserLocale2();
+      if (locale) {
+        setCountryCode(locale);
+      }
+    }
+    function updateResults(phoneNumber, countryCode2) {
+      results.value = getResultsFromPhoneNumber2({
+        phoneNumber,
+        countryCode: countryCode2
+      });
+    }
+    async function onInputValueChanged(phoneNumber) {
+      const input = getPhoneNumberInput();
+      selectionRange.start = input == null ? void 0 : input.selectionStart;
+      selectionRange.end = input == null ? void 0 : input.selectionEnd;
+      selectionRange.cursorAtEnd = selectionRange.start ? selectionRange.start >= phoneNumber.length : true;
+      const sanitizedPhoneNumber = sanitizePhoneNumber2(phoneNumber);
+      internalValue.value = sanitizedPhoneNumber;
+      const newResults = getResultsFromPhoneNumber2({
+        phoneNumber: sanitizedPhoneNumber,
+        countryCode: countryCode.value
+      });
+      model.value = newResults.e164;
+    }
+    function onCountryChanged(codeCountry) {
+      updateResults(inputValue.value, codeCountry);
+      setCountryCode(codeCountry, true);
+    }
+    function setCountryCode(selectedCountryCode, autoFocusInput = false) {
+      try {
+        const countryAvailable = isCountryAvailable(selectedCountryCode);
+        if (countryAvailable) {
+          countryCode.value = selectedCountryCode;
+          if (autoFocusInput) {
+            focusPhoneNumberInput();
+          }
+        }
+      } catch (error) {
+        console.error(`[maz-ui](MazPhoneNumberInput) ${error}`);
+      }
+    }
+    async function parseModel(newModel) {
+      updateResults(newModel, countryCode.value);
+      await nextTick();
+      if (props.noFormattingAsYouType) {
+        internalValue.value = inputValue.value;
+      } else {
+        asYouTypeFormatted.value = selectionRange.cursorAtEnd || results.value.isValid ? internalValue.value = getAsYouTypeFormat2(
+          results.value.countryCode ?? countryCode.value,
+          results.value.formatNational ?? internalValue.value
+        ) : internalValue.value;
+      }
+      await nextTick();
+      autoUpdateCountryCodeWithResults(results.value);
+    }
+    function autoUpdateCountryCodeWithResults(newResults) {
+      if (newResults.countryCode && countryCode.value !== newResults.countryCode) {
+        setCountryCode(newResults.countryCode);
+      }
+    }
+    function getPhoneNumberInput() {
+      var _a;
+      return (_a = PhoneNumberInput.value) == null ? void 0 : _a.$el.querySelector("input");
+    }
+    function focusCountrySelector() {
+      var _a, _b;
+      (_b = (_a = CountrySelector.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus();
+    }
+    function focusPhoneNumberInput() {
+      var _a;
+      (_a = getPhoneNumberInput()) == null ? void 0 : _a.focus();
+    }
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        id: unref(instanceId),
+        class: normalizeClass(["m-phone-number-input", {
+          "--no-flags": __props.noFlags
+        }])
+      }, [
+        countryCode.value && !__props.noFlags && !__props.noCountrySelector ? (openBlock(), createElementBlock(
+          "button",
+          {
+            key: 0,
+            class: "m-phone-number-input__country-flag maz-text-xl",
+            tabindex: "-1",
+            type: "button",
+            onClick: focusCountrySelector
+          },
+          toDisplayString(unref(localeToUnicodeFlag)(countryCode.value)),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true),
+        !__props.noCountrySelector && countryOptions.value ? (openBlock(), createBlock(MazSelect, {
+          key: 1,
+          ref_key: "CountrySelector",
+          ref: CountrySelector,
+          class: "m-phone-number-input__select",
+          "model-value": countryCode.value,
+          "option-value-key": "iso2",
+          "option-label-key": "name",
+          "option-input-value-key": "dialCode",
+          "max-list-width": 250,
+          disabled: __props.disabled,
+          color: __props.color,
+          size: __props.size,
+          "list-position": __props.listPosition,
+          search: !__props.noSearch,
+          "search-placeholder": locales.value.countrySelector.searchPlaceholder,
+          options: countryOptions.value,
+          error: __props.error || !!inputValue.value && !countryCode.value,
+          hint: !!inputValue.value && !countryCode.value ? locales.value.countrySelector.error : void 0,
+          label: locales.value.countrySelector.placeholder,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => onCountryChanged($event)),
+          onFocus: _cache[1] || (_cache[1] = ($event) => inputFocused.value = false)
+        }, {
+          default: withCtx(({ option, isSelected }) => [
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(["m-phone-number-input__select__item maz-flex maz-items-center maz-truncate", {
+                  "m-phone-number-input__select__item--selected": isSelected
+                }])
+              },
+              [
+                !__props.noFlags && typeof option.iso2 === "string" ? (openBlock(), createElementBlock(
+                  "span",
+                  _hoisted_2,
+                  toDisplayString(unref(localeToUnicodeFlag)(option.iso2)),
+                  1
+                  /* TEXT */
+                )) : createCommentVNode("v-if", true),
+                __props.showCodeOnList ? (openBlock(), createElementBlock(
+                  "span",
+                  {
+                    key: 1,
+                    class: normalizeClass(["maz-w-10 maz-flex-none", { "maz-text-muted": !isSelected }])
+                  },
+                  toDisplayString(option.dialCode),
+                  3
+                  /* TEXT, CLASS */
+                )) : createCommentVNode("v-if", true),
+                createElementVNode(
+                  "span",
+                  {
+                    class: normalizeClass(["maz-flex-1 maz-truncate", { "maz-font-semibold": isSelected }])
+                  },
+                  toDisplayString(option.name),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["model-value", "disabled", "color", "size", "list-position", "search", "search-placeholder", "options", "error", "hint", "label"])) : createCommentVNode("v-if", true),
+        createVNode(MazInput, mergeProps({
+          id: __props.id,
+          ref_key: "PhoneNumberInput",
+          ref: PhoneNumberInput,
+          "model-value": inputValue.value,
+          label: inputPlaceholder.value,
+          disabled: __props.disabled,
+          color: __props.color,
+          error: __props.error || !!inputValue.value && !((_a = results.value) == null ? void 0 : _a.isValid)
+        }, _ctx.$attrs, {
+          size: __props.size,
+          "icon-name": "phone",
+          type: "tel",
+          clearable: "",
+          class: ["m-phone-number-input__input maz-flex-1", {
+            "--border-radius": !__props.noCountrySelector,
+            "--error": __props.error || !((_b = results.value) == null ? void 0 : _b.isValid),
+            "--focused": inputFocused.value
+          }],
+          onFocus: _cache[2] || (_cache[2] = ($event) => inputFocused.value = true),
+          onBlur: _cache[3] || (_cache[3] = ($event) => inputFocused.value = false),
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => onInputValueChanged($event))
+        }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "class"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_6478d9a7_lang = "";
+const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6478d9a7"]]);
+export {
+  MazPhoneNumberInput as M,
+  _export_sfc as _
+};