maz-ui 3.22.0 → 3.22.2

package/components/chunks/{MazPhoneNumberInput-4cec4ade.mjs → MazPhoneNumberInput-31bc05f9.mjs}

@@ -1,5 +1,5 @@
 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, useCssVars, onBeforeMount, watch, unref, Transition, normalizeStyle, Fragment, renderList, nextTick, reactive } from "vue";
+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;
@@ -69,8 +69,8 @@ function sanitizePhoneNumber(input) {
 function getCountriesList(locale, customCountriesNameListByIsoCode) {
   const countriesList = [];
   const isoList = getCountries();
+  locale = locale ?? browserLocale().browserLocale ?? "en-US";
   for (const iso2 of isoList) {
-    locale = locale ?? browserLocale().browserLocale ?? "en-US";
     const name = getCountryName(locale, iso2, customCountriesNameListByIsoCode);
     if (name) {
       try {
@@ -190,21 +190,25 @@ function debounce(fn, delay) {
     }, delay);
   };
 }
-const MazBtn = defineAsyncComponent(() => import("./MazBtn-97d9e521.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 _sfc_main$2 = defineComponent({
-  components: {
-    MazBtn,
-    MazIcon,
-    CheckIcon,
-    EyeIcon,
-    EyeOffIcon
+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
   },
-  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
@@ -263,7 +267,14 @@ const _sfc_main$2 = defineComponent({
     rightIcon: { type: String, default: void 0 }
   },
   emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
-  setup(props, { emit, slots }) {
+  setup(__props, { emit: __emit }) {
+    const MazBtn = defineAsyncComponent(() => import("./MazBtn-30723941.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();
@@ -279,6 +290,7 @@ const _sfc_main$2 = defineComponent({
         (_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(() => {
@@ -310,6 +322,7 @@ const _sfc_main$2 = defineComponent({
       }
       return "--default-border";
     });
+    const slots = useSlots();
     const computedPlaceholder = computed(() => {
       const { required, placeholder } = props;
       if (!placeholder)
@@ -332,44 +345,162 @@ const _sfc_main$2 = defineComponent({
       return !!slots["left-icon"] || !!props.leftIcon;
     };
     const focus = (event) => {
-      emit("focus", event);
+      emits("focus", event);
       isFocused.value = true;
     };
     const blur = (event) => {
-      emit("blur", event);
+      emits("blur", event);
       isFocused.value = false;
     };
-    const change = (event) => emit("change", event);
+    const change = (event) => emits("change", event);
     const debounceEmitValue = debounce((value) => {
-      emit("update:model-value", value);
+      emits("update:model-value", value);
     }, props.debounceDelay);
     const emitValue = (value) => {
       if (props.debounce)
         return debounceEmitValue(value);
-      emit("update:model-value", value);
+      emits("update:model-value", value);
     };
-    return {
-      inputValue,
-      shouldUp,
-      hasLabel,
-      computedPlaceholder,
-      isPasswordType,
-      inputType,
-      input,
-      isFocused,
-      hasPasswordVisible,
-      borderStyle,
-      focus,
-      blur,
-      change,
-      emitValue,
-      hasRightPart,
-      hasLeftPart,
-      instanceId
+    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_18b53f70_lang = "";
+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) {
@@ -377,158 +508,7 @@ const _export_sfc = (sfc, props) => {
   }
   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 = { key: 0 };
-const _hoisted_5$1 = {
-  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}`
-      ]])
-    },
-    [
-      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), {
-              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-            }), null, 16, _hoisted_3$1), [
-              [vModelDynamic, _ctx.inputValue]
-            ]),
-            _ctx.label || _ctx.hint ? (openBlock(), createElementBlock(
-              "span",
-              {
-                key: 0,
-                ref: "label",
-                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_4$1, "*")) : createCommentVNode("v-if", true)
-              ],
-              2
-              /* CLASS */
-            )) : createCommentVNode("v-if", true)
-          ]),
-          _ctx.hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
-            _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[2] || (_cache[2] = 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-18b53f70"]]);
+const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-32fa5093"]]);
 ref("system");
 ref("system");
 ref();
@@ -554,8 +534,13 @@ const _hoisted_4 = {
 };
 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
@@ -577,13 +562,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     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",
@@ -591,8 +580,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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: [
@@ -607,11 +599,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "6af9d50f": keyboardSelectedBgColor.value,
-      "c012bde4": selectedTextColor.value,
-      "46d74214": selectedBgColor.value
+      "0804a86d": keyboardSelectedBgColor.value,
+      "4502d2ec": selectedTextColor.value,
+      "381f7054": selectedBgColor.value
     }));
-    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-0595c207.mjs"));
+    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-9fa9179a.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"));
@@ -673,11 +665,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return props.modelValue.map(
           (value) => {
             var _a2, _b2;
-            return (_b2 = (_a2 = optionsList.value) == null ? void 0 : _a2.find((option) => option[props.optionValueKey] === value)) == null ? void 0 : _b2[props.optionInputValueKey];
+            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 = optionsList.value) == null ? void 0 : _a.find((option) => option[props.optionValueKey] === props.modelValue)) == null ? void 0 : _b[props.optionInputValueKey];
+      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"
@@ -727,16 +719,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emits("open", listOpened.value);
     };
     function focusMainInput() {
-      var _a;
-      (_a = mazInputComponent.value) == null ? void 0 : _a.input.focus();
+      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;
+      var _a, _b;
       searchQuery.value = q;
-      (_a = searchInputComponent.value) == null ? void 0 : _a.input.focus();
+      (_b = ((_a = searchInputComponent.value) == null ? void 0 : _a.$el).querySelector("input")) == null ? void 0 : _b.focus();
     }
     function searchOptionWithQuery(keyPressed) {
       var _a;
@@ -877,7 +869,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         {
           ref_key: "mazSelectElement",
           ref: mazSelectElement,
-          class: normalizeClass(["m-select", { "--is-open": hasListOpened.value, "--disabled": __props.disabled }]),
+          class: normalizeClass(["m-select", [{ "--is-open": hasListOpened.value, "--disabled": __props.disabled }, props.class]]),
+          style: normalizeStyle(__props.style),
           onBlurCapture: closeList
         },
         [
@@ -1016,22 +1009,27 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             /* FORWARDED */
           }, 8, ["name"])
         ],
-        34
-        /* CLASS, HYDRATE_EVENTS */
+        38
+        /* CLASS, STYLE, HYDRATE_EVENTS */
       );
     };
   }
 });
-const MazSelect_vue_vue_type_style_index_0_scoped_4ee0f4f3_lang = "";
-const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4ee0f4f3"]]);
+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-mr-2 maz-text-lg"
+  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,
@@ -1119,22 +1117,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     /** Add success UI */
     success: { type: Boolean, default: false },
     /** Add error UI */
-    error: { type: Boolean, default: false }
+    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 changed
-     * @returns data - {Result}
+    /** emitted when country or phone number changes
+     * @property {Result} results - meta info of current phone numnber
      */
     "update",
-    /** emitted when country or phone number changed
-     * @returns data - {Result}
+    /** emitted when country or phone number changes
+     * @property {Result} results - meta info of current phone numnber
      */
     "data",
-    /** emitted when selected country changed */
+    /** emitted when selected country changes
+     * @property {CountryCode} countryCode - Country code
+     */
     "country-code",
-    /** Two way binding (v-model:model-value) - emitted when country changed */
+    /** emitted when country or phone number changes
+     * @property {String} phoneNumber - phoneNumber formatted
+     */
     "update:model-value",
-    /** Two way binding (v-model:country-code) - emitted when country changed */
+    /** emitted when country changes
+     * @property {CountryCode} countryCode - Country code
+     */
     "update:country-code"
   ],
   setup(__props, { emit: __emit }) {
@@ -1390,9 +1398,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
         id: unref(instanceId),
-        class: normalizeClass(["m-phone-number-input", {
-          "--no-flags": __props.noFlags
-        }])
+        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",
@@ -1415,7 +1427,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "model-value": countryCode.value,
           "option-value-key": "iso2",
           "option-label-key": "name",
-          "option-input-value-key": "dialCode",
+          "option-input-value-key": __props.countrySelectorDisplayName ? "name" : "dialCode",
           "max-list-width": 250,
           disabled: __props.disabled,
           color: __props.color,
@@ -1428,6 +1440,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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)
         }, {
@@ -1435,7 +1450,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode(
               "div",
               {
-                class: normalizeClass(["m-phone-number-input__select__item maz-flex maz-items-center maz-truncate", {
+                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
                 }])
               },
@@ -1451,7 +1466,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "span",
                   {
                     key: 1,
-                    class: normalizeClass(["maz-w-10 maz-flex-none", { "maz-text-muted": !isSelected }])
+                    class: normalizeClass(["maz-w-9 maz-flex-none", { "maz-text-muted": !isSelected }])
                   },
                   toDisplayString(option.dialCode),
                   3
@@ -1473,7 +1488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["model-value", "disabled", "color", "size", "list-position", "search", "search-placeholder", "options", "error", "hint", "label", "success"])) : createCommentVNode("v-if", true),
+        }, 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",
@@ -1498,12 +1513,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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"])
-      ], 10, _hoisted_1);
+      ], 14, _hoisted_1);
     };
   }
 });
-const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_82c0d14d_lang = "";
-const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82c0d14d"]]);
+const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_2417c048_lang = "";
+const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2417c048"]]);
 export {
   MazPhoneNumberInput as M,
   _export_sfc as _,