maz-ui 3.19.2 → 3.19.3

package/components/chunks/MazPhoneNumberInput-901c4fa6.mjs

@@ -1,651 +0,0 @@
-import "../assets/MazPhoneNumberInput.css";
-import { computed, defineComponent, defineAsyncComponent, getCurrentInstance, ref, reactive, onMounted, nextTick, watch, openBlock, createElementBlock, unref, normalizeClass, toDisplayString, createCommentVNode, createBlock, withCtx, createElementVNode, createVNode, mergeProps } 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
-  };
-}
-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 MazInput = defineAsyncComponent(() => import("./MazInput-15f3e149.mjs"));
-    const MazSelect = defineAsyncComponent(() => import("./MazSelect-c5c3f874.mjs"));
-    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(unref(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(unref(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_5aac3f0b_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5aac3f0b"]]);
-export {
-  MazPhoneNumberInput as M,
-  _export_sfc as _,
-  useInstanceUniqId as u
-};