maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazPhoneNumberInput-48fe2445.mjs

@@ -1,1536 +0,0 @@
-import "../assets/MazPhoneNumberInput.css";
-import { computed, defineComponent, defineAsyncComponent, ref, getCurrentInstance, onMounted, useSlots, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, useCssVars, onBeforeMount, watch, Transition, Fragment, renderList, nextTick, 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 countryCodeToUnicodeFlag(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();
-  locale = locale ?? browserLocale().browserLocale ?? "en-US";
-  for (const iso2 of isoList) {
-    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(fn, delay) {
-  let timeout2;
-  return function(...args) {
-    clearTimeout(timeout2);
-    timeout2 = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-}
-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 = { key: 0 };
-const _hoisted_5$1 = {
-  key: 1,
-  class: "m-input-wrapper-right"
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __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: (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: __emit }) {
-    const MazBtn = defineAsyncComponent(() => import("./MazBtn-50abc4c5.mjs"));
-    const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
-    const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
-    const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
-    const CheckIcon = defineAsyncComponent(() => import("./check-8da249b1.mjs"));
-    const props = __props;
-    const emits = __emit;
-    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 inheritClasses = computed(() => props.class);
-    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 slots = useSlots();
-    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) => {
-      emits("focus", event);
-      isFocused.value = true;
-    };
-    const blur = (event) => {
-      emits("blur", event);
-      isFocused.value = false;
-    };
-    const change = (event) => emits("change", event);
-    const debounceEmitValue = debounce((value) => {
-      emits("update:model-value", value);
-    }, props.debounceDelay);
-    const emitValue = (value) => {
-      if (props.debounce)
-        return debounceEmitValue(value);
-      emits("update:model-value", value);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["m-input", [
-            {
-              "--is-focused": isFocused.value || __props.borderActive,
-              "--should-up": shouldUp.value,
-              "--has-label": hasLabel.value,
-              "--is-disabled": __props.disabled,
-              "--is-readonly": __props.readonly,
-              "--has-z-2": __props.error || __props.warning || __props.success,
-              "--has-state": __props.error || __props.warning || __props.success
-            },
-            inheritClasses.value,
-            `--${__props.color}`,
-            `--${__props.size}`
-          ]]),
-          style: normalizeStyle(__props.style)
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["m-input-wrapper", [__props.inputClasses, borderStyle.value, { "maz-rounded": !__props.noRadius }]])
-            },
-            [
-              hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-                _ctx.$slots["left-icon"] || __props.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.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: unref(instanceId),
-                  ref_key: "input",
-                  ref: input,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
-                  type: inputType.value,
-                  name: __props.name
-                }, _ctx.$attrs, {
-                  placeholder: computedPlaceholder.value,
-                  "aria-label": __props.label || __props.placeholder,
-                  disabled: __props.disabled,
-                  readonly: __props.readonly,
-                  required: __props.required,
-                  class: "m-input-input"
-                }, toHandlers({
-                  blur,
-                  focus,
-                  change
-                }, true), {
-                  onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-                }), null, 16, _hoisted_3$1), [
-                  [vModelDynamic, inputValue.value]
-                ]),
-                __props.label || __props.hint ? (openBlock(), createElementBlock(
-                  "span",
-                  {
-                    key: 0,
-                    ref: "label",
-                    class: normalizeClass(["m-input-label", [
-                      {
-                        "maz-text-danger-600": __props.error,
-                        "maz-text-success-600": __props.success,
-                        "maz-text-warning-600": __props.warning
-                      }
-                    ]])
-                  },
-                  [
-                    createTextVNode(
-                      toDisplayString(__props.hint || __props.label) + " ",
-                      1
-                      /* TEXT */
-                    ),
-                    __props.required ? (openBlock(), createElementBlock("sup", _hoisted_4$1, "*")) : createCommentVNode("v-if", true)
-                  ],
-                  2
-                  /* CLASS */
-                )) : createCommentVNode("v-if", true)
-              ]),
-              hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
-                _ctx.$slots["right-icon"] || __props.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.rightIcon,
-                    class: "maz-text-xl maz-text-muted"
-                  }, null, 8, ["name"])
-                ], true) : createCommentVNode("v-if", true),
-                isPasswordType.value ? (openBlock(), createBlock(unref(MazBtn), {
-                  key: 1,
-                  color: "transparent",
-                  tabindex: "-1",
-                  size: "mini",
-                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => hasPasswordVisible.value = !hasPasswordVisible.value, ["stop"]))
-                }, {
-                  default: withCtx(() => [
-                    hasPasswordVisible.value ? (openBlock(), createBlock(unref(EyeOffIcon), {
-                      key: 0,
-                      class: "maz-text-xl maz-text-muted"
-                    })) : (openBlock(), createBlock(unref(EyeIcon), {
-                      key: 1,
-                      class: "maz-text-xl maz-text-muted"
-                    }))
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })) : createCommentVNode("v-if", true),
-                _ctx.$slots["valid-button"] || __props.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
-                  createVNode(unref(MazBtn), {
-                    color: "transparent",
-                    disabled: __props.disabled,
-                    tabindex: "-1",
-                    loading: __props.validButtonLoading,
-                    class: "m-input-valid-button",
-                    size: "mini",
-                    type: "submit"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CheckIcon), { class: "maz-text-2xl maz-text-normal" })
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled", "loading"])
-                ], true) : createCommentVNode("v-if", true)
-              ])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
-});
-const MazInput_vue_vue_type_style_index_0_scoped_32fa5093_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-32fa5093"]]);
-ref("system");
-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({
-  ...{
-    inheritAttrs: false
-  },
-  __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: (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 },
-    /** 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: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    /** Display search input in option list */
-    search: { type: Boolean, default: false },
-    /** Search input placeholder */
-    searchPlaceholder: { type: String, default: "Search in options" },
-    /** Enable feature to select multiple values */
-    multiple: { type: Boolean, default: false }
-  },
-  emits: [
-    "close",
-    "open",
-    "blur",
-    "focus",
-    "change",
-    "update:model-value",
-    /** On selected value, returns the option object */
-    "selected-option"
-  ],
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "0804a86d": keyboardSelectedBgColor.value,
-      "4502d2ec": selectedTextColor.value,
-      "381f7054": selectedBgColor.value
-    }));
-    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-ab5ddda2.mjs"));
-    const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-5dffa35e.mjs"));
-    const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-a78b9604.mjs"));
-    const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-975ce547.mjs"));
-    const instance = getCurrentInstance();
-    const props = __props;
-    const emits = __emit;
-    const listOpened = ref(false);
-    const tmpModelValueIndex = ref();
-    const isBlackOrTransparentColor = computed(
-      () => ["black", "transparent", "white"].includes(props.color)
-    );
-    const selectedTextColor = computed(
-      () => isBlackOrTransparentColor.value ? `var(--maz-color-black)` : `var(--maz-color-${props.color}-800)`
-    );
-    const selectedBgColor = computed(
-      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-100)`
-    );
-    const keyboardSelectedBgColor = computed(
-      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-200)`
-    );
-    const hasListOpened = computed(() => listOpened.value || props.open);
-    const instanceId = useInstanceUniqId({
-      componentName: "MazSelect",
-      instance,
-      providedId: props.id
-    });
-    const selectedOptions = computed(
-      () => {
-        var _a;
-        return ((_a = props.options) == null ? void 0 : _a.filter((option) => {
-          return props.multiple ? Array.isArray(props.modelValue) ? props.modelValue.includes(option[props.optionValueKey]) && !isNullOrUndefined(option[props.optionValueKey]) : false : props.modelValue === option[props.optionValueKey] && !isNullOrUndefined(option[props.optionValueKey]);
-        })) ?? [];
-      }
-    );
-    onBeforeMount(() => {
-      var _a;
-      if (!((_a = props.options) == null ? void 0 : _a.length)) {
-        console.warn("[maz-ui](MazSelect) you must provide options");
-      }
-      updateTmpModelValueIndex();
-    });
-    const mazSelectElement = ref();
-    const mazInputComponent = ref();
-    const searchInputComponent = ref();
-    const optionsListElement = ref();
-    const isNullOrUndefined = (value) => {
-      return value === void 0 || value === null;
-    };
-    function isSelectedOption(option) {
-      var _a;
-      const hasOption = ((_a = selectedOptions.value) == null ? void 0 : _a.some(
-        (selectedOption) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
-      )) ?? false;
-      return hasOption && !isNullOrUndefined(option[props.optionValueKey]);
-    }
-    const mazInputValue = computed(() => {
-      var _a, _b;
-      if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {
-        return props.modelValue.map(
-          (value) => {
-            var _a2, _b2;
-            return (_b2 = (_a2 = props.options) == null ? void 0 : _a2.find((option) => option[props.optionValueKey] === value)) == null ? void 0 : _b2[props.optionInputValueKey];
-          }
-        ).join(", ");
-      }
-      return (_b = (_a = props.options) == null ? void 0 : _a.find((option) => option[props.optionValueKey] === props.modelValue)) == null ? void 0 : _b[props.optionInputValueKey];
-    });
-    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) => {
-      }
-    );
-    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) => {
-      if (props.disabled || hasListOpened.value)
-        return;
-      event == null ? void 0 : event.preventDefault();
-      listOpened.value = true;
-      await scrollToOptionIndex();
-      emits("focus", event);
-      emits("open", listOpened.value);
-    };
-    function focusMainInput() {
-      var _a, _b;
-      (_b = ((_a = mazInputComponent.value) == null ? void 0 : _a.$el).querySelector("input")) == null ? void 0 : _b.focus();
-    }
-    function toggleList(event) {
-      listOpened.value ? closeList(event) : focusMainInput();
-    }
-    function focusSearchInputAndSetQuery(q) {
-      var _a, _b;
-      searchQuery.value = q;
-      (_b = ((_a = searchInputComponent.value) == null ? void 0 : _a.$el).querySelector("input")) == null ? void 0 : _b.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]
-        );
-        if (typeof tmpModelValueIndex.value === "number" && tmpModelValueIndex.value >= 0) {
-          scrollToOptionIndex(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 shouldSelect = ["Enter", "Space"].includes(code);
-      const shouldCloseList = "Escape" === code && hasListOpened.value;
-      if (isArrow) {
-        arrowHandler(event, tmpModelValueIndex.value);
-      } else if (shouldSelect) {
-        enterHandler(event, tmpModelValueIndex.value);
-      } else if (shouldCloseList) {
-        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;
-      }
-      scrollToOptionIndex(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 scrollToOptionIndex(index) {
-      var _a, _b;
-      await nextTick();
-      if (typeof index !== "number") {
-        updateTmpModelValueIndex();
-      }
-      const selectedIndex = index ?? tmpModelValueIndex.value;
-      if (typeof selectedIndex === "number" && selectedIndex >= 0) {
-        (_b = (_a = optionsListElement.value) == null ? void 0 : _a.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _b.scrollIntoView({
-          behavior: "auto",
-          block: "nearest",
-          inline: "start"
-        });
-      }
-    }
-    function updateTmpModelValueIndex(inputOption) {
-      var _a;
-      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex((option) => {
-        var _a2, _b;
-        if (props.multiple && Array.isArray(props.modelValue)) {
-          if (inputOption) {
-            return inputOption[props.optionValueKey] === option[props.optionValueKey];
-          }
-          const values = [...props.modelValue].reverse();
-          return values[0] === option[props.optionValueKey];
-        } else {
-          return ((_b = (_a2 = selectedOptions.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b[props.optionValueKey]) === option[props.optionValueKey];
-        }
-      });
-      tmpModelValueIndex.value = index && index >= 0 ? index : 0;
-    }
-    const updateValue = (inputOption, mustCloseList = true) => {
-      var _a;
-      if (mustCloseList && !props.multiple) {
-        nextTick(() => closeList());
-      }
-      searchQuery.value = "";
-      const isAlreadySelected = (_a = selectedOptions.value) == null ? void 0 : _a.some(
-        (option) => option[props.optionValueKey] === inputOption[props.optionValueKey]
-      );
-      let newValue = selectedOptions.value;
-      if (isAlreadySelected && props.multiple) {
-        newValue = newValue == null ? void 0 : newValue.filter(
-          (option) => option[props.optionValueKey] !== inputOption[props.optionValueKey]
-        );
-      } else if (props.multiple) {
-        newValue.push(inputOption);
-      } else {
-        newValue = [inputOption];
-      }
-      const selectedValues = newValue.map((option) => option[props.optionValueKey]);
-      emits("update:model-value", props.multiple ? selectedValues : selectedValues[0]);
-      emits("selected-option", inputOption);
-      updateTmpModelValueIndex(inputOption);
-      focusMainInput();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "mazSelectElement",
-          ref: mazSelectElement,
-          class: normalizeClass(["m-select", [{ "--is-open": hasListOpened.value, "--disabled": __props.disabled }, props.class]]),
-          style: normalizeStyle(__props.style),
-          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"]),
-            onClick: 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", "onClick"]),
-          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("\n          @slot No results slot - Displayed when no results corresponding with seeach query\n        "),
-                  !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) => {
-                        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": isSelectedOption(option),
-                              "--is-none-value": isNullOrUndefined(option[__props.optionValueKey])
-                            }
-                          ]]),
-                          style: normalizeStyle({ minHeight: `${__props.itemHeight}px` }),
-                          onClick: withModifiers(($event) => updateValue(option), ["prevent", "stop"])
-                        }, [
-                          __props.multiple ? (openBlock(), createBlock(unref(MazCheckbox), {
-                            key: 0,
-                            tabindex: "-1",
-                            "model-value": isSelectedOption(option),
-                            size: "sm",
-                            color: __props.color
-                          }, null, 8, ["model-value", "color"])) : createCommentVNode("v-if", true),
-                          createCommentVNode("\n              @slot Custom option\n                @binding {Object} option\n                @binding {Boolean} is-selected\n            "),
-                          renderSlot(_ctx.$slots, "default", {
-                            option,
-                            isSelected: isSelectedOption(option)
-                          }, () => [
-                            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"])
-        ],
-        38
-        /* CLASS, STYLE, HYDRATE_EVENTS */
-      );
-    };
-  }
-});
-const MazSelect_vue_vue_type_style_index_0_scoped_c313b4a6_lang = "";
-const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c313b4a6"]]);
-const _hoisted_1 = ["id"];
-const _hoisted_2 = {
-  key: 0,
-  class: "maz-text-lg"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __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: (prop) => {
-        return typeof prop === "string" || prop === void 0;
-      },
-      default: void 0
-    },
-    /** @deprecated */
-    defaultPhoneNumber: { type: String, default: void 0 },
-    /** Country code selected - Ex: "FR" */
-    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 },
-    /** 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: (value) => {
-        return ["top", "top right", "top left", "bottom", "bottom right", "bottom left"].includes(
-          value
-        );
-      }
-    },
-    /** Component color applied - Ex: "secondary" */
-    color: { type: String, default: "primary" },
-    /** Component size applied - Ex: "sm" */
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    /** Remove flags in country list */
-    noFlags: { type: Boolean, default: false },
-    /** Disable input */
-    disabled: { type: Boolean, default: false },
-    /** No show the phone number example */
-    noExample: { type: Boolean, default: false },
-    /** Disable search input in country list */
-    noSearch: { type: Boolean, default: false },
-    /** By default the component use the browser locale to set the default country code if not country code is provided */
-    noUseBrowserLocale: { type: Boolean, default: false },
-    /** 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: false },
-    /** No show the country selector */
-    noCountrySelector: { type: Boolean, default: false },
-    /** Show country calling code in the country list */
-    showCodeOnList: { type: Boolean, default: false },
-    /** Replace country names */
-    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 {string} browser locale
-     */
-    countryLocale: { type: String, default: void 0 },
-    /** Disable validation error UI */
-    noValidationError: { type: Boolean, default: false },
-    /** Disable validation success UI */
-    noValidationSuccess: { type: Boolean, default: false },
-    /** Add success UI */
-    success: { type: Boolean, default: false },
-    /** Add error UI */
-    error: { type: Boolean, default: false },
-    /** Will replace the calling code by the country name in the country selector */
-    countrySelectorDisplayName: { type: Boolean, default: false },
-    /** 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(__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();
-    }
-    async function focusPhoneNumberInput() {
-      var _a;
-      await nextTick();
-      (_a = getPhoneNumberInput()) == null ? void 0 : _a.focus();
-    }
-    return (_ctx, _cache) => {
-      var _a, _b, _c, _d;
-      return openBlock(), createElementBlock("div", {
-        id: unref(instanceId),
-        class: normalizeClass(["m-phone-number-input", [
-          props.class,
-          {
-            "--no-flags": __props.noFlags
-          }
-        ]]),
-        style: normalizeStyle(__props.style)
-      }, [
-        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
-        }, [
-          createCommentVNode('\n        @slot Country selector flag\n          @binding {String} country-code - current selected country code - Ex: `"FR"`\n      '),
-          renderSlot(_ctx.$slots, "selector-flag", { countryCode: countryCode.value }, () => [
-            createTextVNode(
-              toDisplayString(unref(countryCodeToUnicodeFlag)(countryCode.value)),
-              1
-              /* TEXT */
-            )
-          ], true)
-        ])) : createCommentVNode("v-if", true),
-        !__props.noCountrySelector ? (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": __props.countrySelectorDisplayName ? "name" : "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 || (!__props.noValidationError ? !!inputValue.value && !countryCode.value : false),
-          hint: !!inputValue.value && !countryCode.value ? locales.value.countrySelector.error : void 0,
-          label: locales.value.countrySelector.placeholder,
-          success: __props.success || (!__props.noValidationSuccess ? (_a = results.value) == null ? void 0 : _a.isValid : false),
-          style: normalizeStyle({
-            width: __props.countrySelectorWidth
-          }),
-          "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-gap-1 maz-truncate", {
-                  "m-phone-number-input__select__item--selected": isSelected
-                }])
-              },
-              [
-                !__props.noFlags && typeof option.iso2 === "string" ? (openBlock(), createElementBlock("span", _hoisted_2, [
-                  createCommentVNode('\n              @slot Country list flag\n                @binding {String} country-code - country code of option - Ex: `"FR"`\n                @binding {{ iso2: string; dialCode: string; name: string; }} option - country data\n                @binding {Boolean} is-selected - `true` if option is selected\n            '),
-                  renderSlot(_ctx.$slots, "country-list-flag", {
-                    countryCode: option.iso2,
-                    option,
-                    isSelected
-                  }, () => [
-                    createTextVNode(
-                      toDisplayString(unref(countryCodeToUnicodeFlag)(option.iso2)),
-                      1
-                      /* TEXT */
-                    )
-                  ], true)
-                ])) : createCommentVNode("v-if", true),
-                __props.showCodeOnList ? (openBlock(), createElementBlock(
-                  "span",
-                  {
-                    key: 1,
-                    class: normalizeClass(["maz-w-9 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 */
-            )
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["model-value", "option-input-value-key", "disabled", "color", "size", "list-position", "search", "search-placeholder", "options", "error", "hint", "label", "success", "style"])) : 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 || (!__props.noValidationError ? !!inputValue.value && !((_b = results.value) == null ? void 0 : _b.isValid) : false)
-        }, _ctx.$attrs, {
-          size: __props.size,
-          "icon-name": "phone",
-          type: "tel",
-          clearable: "",
-          success: __props.success || (!__props.noValidationSuccess ? (_c = results.value) == null ? void 0 : _c.isValid : false),
-          class: ["m-phone-number-input__input maz-flex-1", {
-            "--border-radius": !__props.noCountrySelector,
-            "--error": __props.error || !((_d = results.value) == null ? void 0 : _d.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", "success", "class"])
-      ], 14, _hoisted_1);
-    };
-  }
-});
-const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_13c350c6_lang = "";
-const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13c350c6"]]);
-export {
-  MazPhoneNumberInput as M,
-  _export_sfc as _,
-  useInstanceUniqId as u
-};