fds-vue-core 8.2.3 → 8.2.4

package/dist/fds-vue-core.cjs.js

@@ -9877,13 +9877,13 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$j = ["for", "id"];
-const _hoisted_2$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
-const _hoisted_3$f = { class: "whitespace-pre text-base leading-6 tabular-nums" };
+const _hoisted_2$f = { class: "relative" };
+const _hoisted_3$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
 const _hoisted_4$e = {
   key: 0,
   class: "text-red-700 font-bold mt-1"
 };
-const maskFieldPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
+const inputPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -9900,7 +9900,6 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
     mask: { default: void 0 },
-    displayChar: { default: void 0 },
     modelValue: {},
     value: { default: void 0 },
     type: {},
@@ -9935,7 +9934,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["input", "change", "clearInput", "update:value", "keyup", "keyup.enter", "blur"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["input", "autocomplete", "clearInput", "update:value", "keyup", "keyup.enter", "blur"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
@@ -10016,86 +10015,26 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return "pr-40";
     });
     const externalClass = vue.computed(() => props.class ?? attrs.class);
-    const maskDisplayValue = vue.ref("");
-    const maskPlaceholderChar = vue.ref("");
-    const resolvedPlaceholderChar = vue.computed(() => props.displayChar ?? props.maskOptions?.placeholderChar ?? null);
-    const useMaskPlaceholderStyle = vue.computed(() => {
-      if (!props.mask || !resolvedPlaceholderChar.value) return false;
-      const lazy = props.maskOptions?.lazy ?? (props.displayChar ? false : true);
-      return !lazy;
-    });
-    const maskFieldWrapperClasses = vue.computed(() => {
-      if (!useMaskPlaceholderStyle.value) return void 0;
-      return [
-        "rounded-md border border-gray-500 bg-white bg-clip-padding",
-        props.disabled && "outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent",
-        isInvalid.value ? "outline-2 -outline-offset-2 outline-red-600" : "focus-within:outline-2 focus-within:outline-blue-500 focus-within:outline-offset-0",
-        "focus-within:border-transparent"
-      ];
-    });
-    const maskOverlayClasses = vue.computed(() => [
-      "pointer-events-none absolute inset-0 z-[3] flex items-center",
-      maskFieldPaddingClasses,
-      inputPaddingRight.value
+    const inputClasses = vue.computed(() => [
+      "block rounded-md border border-gray-500",
+      maxlength.value ? "" : "w-full",
+      inputPaddingClasses,
+      inputPaddingRight.value,
+      "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
+      showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
+      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "text-gray-900 bg-white",
+      isInvalid.value && "outline-2 outline-red-600",
+      props.inputClass
     ]);
-    const maskDisplayChars = vue.computed(() => {
-      const display = maskDisplayValue.value;
-      const placeholder = maskPlaceholderChar.value || resolvedPlaceholderChar.value;
-      if (!display || !placeholder) return [];
-      return [...display].map((char) => ({
-        char,
-        isPlaceholder: char === placeholder
-      }));
-    });
-    function maskCharStyle(isPlaceholder) {
-      if (isPlaceholder) {
-        return { color: props.disabled ? "var(--color-gray-500)" : "var(--color-gray-400)" };
-      }
-      return { color: props.disabled ? "var(--color-gray-800)" : "var(--color-gray-900)" };
-    }
-    const inputClasses = vue.computed(() => {
-      const shared = [
-        "block rounded-md",
-        maxlength.value ? "" : "w-full",
-        inputPaddingRight.value,
-        showDateIcon.value && "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:pointer-events-none",
-        props.inputClass
-      ];
-      if (useMaskPlaceholderStyle.value) {
-        return [
-          ...shared,
-          "relative z-[2] border-0 bg-transparent shadow-none focus:outline-none",
-          maskFieldPaddingClasses,
-          "text-base leading-6 tabular-nums",
-          props.disabled ? "cursor-not-allowed" : ""
-        ];
-      }
-      return [
-        ...shared,
-        "rounded-md border border-gray-500",
-        maskFieldPaddingClasses,
-        "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-        props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "text-gray-900 bg-white",
-        isInvalid.value && "outline-2 outline-red-600"
-      ];
-    });
     const inputStyle = vue.computed(() => {
-      const size = maxlength.value ? {
+      if (!maxlength.value) return void 0;
+      return {
         width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
         maxWidth: "100%"
-      } : {};
-      if (!useMaskPlaceholderStyle.value) {
-        return size;
-      }
-      return {
-        ...size,
-        color: "transparent",
-        WebkitTextFillColor: "transparent",
-        caretColor: props.disabled ? "#1f2937" : "#111827"
       };
     });
     const rightIconsContainerClasses = vue.computed(() => [
-      "absolute z-10 flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
+      "absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
       showClearButton.value ? "right-2" : "right-3"
     ]);
     const inputBindings = vue.computed(() => ({
@@ -10115,7 +10054,6 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       internalValue.value = "";
       if (maskInstance) {
         maskInstance.value = "";
-        vue.nextTick(syncMaskDisplay);
       }
       emit("clearInput");
     }
@@ -10145,57 +10083,25 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     }
     const inputRef = vue.ref(null);
     let maskInstance = null;
-    function getMaskEmittedValue(instance) {
-      if (!instance) return "";
-      const raw = String(instance.value ?? "");
-      if (!useMaskPlaceholderStyle.value) return raw;
-      const placeholder = instance.masked?.placeholderChar ?? resolvedPlaceholderChar.value;
-      if (!placeholder) return raw;
-      return raw.split(placeholder).join("").replace(/\s+$/, "");
-    }
-    function syncMaskDisplay() {
-      if (!inputRef.value) {
-        maskDisplayValue.value = "";
-        maskPlaceholderChar.value = "";
-        return;
-      }
-      maskPlaceholderChar.value = maskInstance?.masked?.placeholderChar ?? resolvedPlaceholderChar.value ?? "";
-      maskDisplayValue.value = maskInstance?.displayValue ?? inputRef.value.value ?? maskInstance?.value ?? "";
-    }
     const createMask2 = () => {
       if (maskInstance) {
         maskInstance.destroy();
         maskInstance = null;
       }
       if (props.mask && inputRef.value) {
-        const maskConfig = {
+        maskInstance = IMask(inputRef.value, {
           mask: props.mask,
           ...props.maskOptions,
-          ...props.displayChar ? {
-            placeholderChar: props.displayChar,
-            lazy: props.maskOptions?.lazy ?? false
-          } : {}
-        };
-        maskInstance = IMask(inputRef.value, maskConfig);
+          lazy: props.maskOptions?.lazy ?? true
+        });
         if (internalValue.value) {
           maskInstance.value = internalValue.value;
         }
         maskInstance.on("accept", () => {
           if (maskInstance) {
-            internalValue.value = getMaskEmittedValue(maskInstance);
-            vue.nextTick(syncMaskDisplay);
+            internalValue.value = maskInstance.value;
           }
         });
-        maskInstance.on("complete", () => {
-          vue.nextTick(syncMaskDisplay);
-        });
-        vue.nextTick(() => {
-          syncMaskDisplay();
-          vue.nextTick(syncMaskDisplay);
-        });
-      } else {
-        maskDisplayValue.value = "";
-        maskPlaceholderChar.value = "";
       }
     };
     vue.onMounted(() => {
@@ -10224,7 +10130,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return props.meta ? metaId.value : void 0;
     });
     vue.watch(
-      () => [props.mask, props.displayChar, props.maskOptions],
+      () => [props.mask, props.maskOptions],
       () => {
         vue.nextTick(() => {
           createMask2();
@@ -10232,13 +10138,23 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       },
       { deep: true }
     );
+    function shouldSyncMaskFromModel(newValue, currentMaskedValue) {
+      if (newValue === void 0) {
+        return false;
+      }
+      if (document.activeElement !== inputRef.value) {
+        return true;
+      }
+      const newDigits = String(newValue).replace(/\D/g, "");
+      const currentDigits = String(currentMaskedValue ?? "").replace(/\D/g, "");
+      return newDigits !== currentDigits;
+    }
     vue.watch(
       () => props.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
-          if (document.activeElement !== inputRef.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
-            vue.nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10246,10 +10162,9 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => modelValue.value,
       (newValue) => {
-        if (maskInstance && newValue !== void 0 && newValue !== getMaskEmittedValue(maskInstance)) {
-          if (document.activeElement !== inputRef.value) {
+        if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
-            vue.nextTick(syncMaskDisplay);
           }
         }
       }
@@ -10284,9 +10199,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", {
             class: vue.normalizeClass({ "flex-1": props.labelLeft })
           }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["relative", maskFieldWrapperClasses.value])
-            }, [
+            vue.createElementVNode("div", _hoisted_2$f, [
               vue.createElementVNode("input", vue.mergeProps({
                 ref_key: "inputRef",
                 ref: inputRef,
@@ -10307,26 +10220,13 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
               }, inputBindings.value, {
                 onInput: handleInputChange,
                 onChange: handleInputChange,
-                onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("blur", $event)),
-                onKeyup: _cache[1] || (_cache[1] = (ev) => {
+                onAutocomplete: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("autocomplete", $event)),
+                onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur", $event)),
+                onKeyup: _cache[2] || (_cache[2] = (ev) => {
                   _ctx.$emit("keyup", ev);
                   if (ev.key === "Enter") _ctx.$emit("keyup.enter", ev);
                 })
-              }), null, 16, _hoisted_2$f),
-              useMaskPlaceholderStyle.value ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: vue.normalizeClass(maskOverlayClasses.value),
-                "aria-hidden": "true"
-              }, [
-                vue.createElementVNode("span", _hoisted_3$f, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(maskDisplayChars.value, (item, index) => {
-                    return vue.openBlock(), vue.createElementBlock("span", {
-                      key: index,
-                      style: vue.normalizeStyle(maskCharStyle(item.isPlaceholder))
-                    }, vue.toDisplayString(item.char), 5);
-                  }), 128))
-                ])
-              ], 2)) : vue.createCommentVNode("", true),
+              }), null, 16, _hoisted_3$f),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(rightIconsContainerClasses.value)
               }, [
@@ -10368,11 +10268,11 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["icon", "text"])) : vue.createCommentVNode("", true)
               ], 2),
               showTodaySuffixInField.value ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 1,
+                key: 0,
                 class: vue.normalizeClass(todaySuffixClasses.value),
                 style: vue.normalizeStyle(todaySuffixStyle.value)
               }, vue.toDisplayString(todayLabel.value), 7)) : vue.createCommentVNode("", true)
-            ], 2)
+            ])
           ], 2)
         ], 2),
         showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, vue.toDisplayString(props.invalidMessage), 1)) : vue.createCommentVNode("", true)
@@ -18615,6 +18515,11 @@ function parsePhoneNumber$1() {
 function getCountries$1(metadata2) {
   return new Metadata(metadata2).getCountries();
 }
+function getExampleNumber$1(country, examples2, metadata2) {
+  if (examples2[country]) {
+    return new PhoneNumber$1(country, examples2[country], metadata2);
+  }
+}
 class PhoneNumber2 extends PhoneNumber$1 {
   constructor(number) {
     super(number, metadata);
@@ -18629,6 +18534,9 @@ function getCountries() {
 function getCountryCallingCode() {
   return withMetadataArgument(getCountryCallingCode$1, arguments);
 }
+function getExampleNumber() {
+  return withMetadataArgument(getExampleNumber$1, arguments);
+}
 function resolveDisplayLocale(locale) {
   const trimmed = locale.trim();
   if (!trimmed) {
@@ -18702,6 +18610,90 @@ function filterCountryOptions(options, query) {
     return option.label.toLowerCase().includes(normalizedQuery) || option.countryName.toLowerCase().includes(normalizedQuery) || option.value.toLowerCase().includes(normalizedQuery) || dialCode.includes(normalizedQuery) || `+${dialCode}`.includes(normalizedQuery);
   });
 }
+const examples = { "AC": "40123", "AD": "312345", "AE": "501234567", "AF": "701234567", "AG": "2684641234", "AI": "2642351234", "AL": "672123456", "AM": "77123456", "AO": "923123456", "AR": "91123456789", "AS": "6847331234", "AT": "664123456", "AU": "412345678", "AW": "5601234", "AX": "412345678", "AZ": "401234567", "BA": "61123456", "BB": "2462501234", "BD": "1812345678", "BE": "450001234", "BF": "70123456", "BG": "43012345", "BH": "36001234", "BI": "79561234", "BJ": "0195123456", "BL": "690001234", "BM": "4413701234", "BN": "7123456", "BO": "71234567", "BQ": "3181234", "BR": "11961234567", "BS": "2423591234", "BT": "17123456", "BW": "71123456", "BY": "294911911", "BZ": "6221234", "CA": "5062345678", "CC": "412345678", "CD": "991234567", "CF": "70012345", "CG": "061234567", "CH": "781234567", "CI": "0123456789", "CK": "71234", "CL": "221234567", "CM": "671234567", "CN": "13123456789", "CO": "3211234567", "CR": "83123456", "CU": "51234567", "CV": "9911234", "CW": "95181234", "CX": "412345678", "CY": "96123456", "CZ": "601123456", "DE": "15123456789", "DJ": "77831001", "DK": "34412345", "DM": "7672251234", "DO": "8092345678", "DZ": "551234567", "EC": "991234567", "EE": "51234567", "EG": "1001234567", "EH": "650123456", "ER": "7123456", "ES": "612345678", "ET": "911234567", "FI": "412345678", "FJ": "7012345", "FK": "51234", "FM": "3501234", "FO": "211234", "FR": "612345678", "GA": "06031234", "GB": "7400123456", "GD": "4734031234", "GE": "555123456", "GF": "694201234", "GG": "7781123456", "GH": "231234567", "GI": "57123456", "GL": "221234", "GM": "3012345", "GN": "601123456", "GP": "690001234", "GQ": "222123456", "GR": "6912345678", "GT": "51234567", "GU": "6713001234", "GW": "955012345", "GY": "6091234", "HK": "51234567", "HN": "91234567", "HR": "921234567", "HT": "34101234", "HU": "201234567", "ID": "812345678", "IE": "850123456", "IL": "502345678", "IM": "7924123456", "IN": "8123456789", "IO": "3801234", "IQ": "7912345678", "IR": "9123456789", "IS": "6111234", "IT": "3123456789", "JE": "7797712345", "JM": "8762101234", "JO": "790123456", "JP": "9012345678", "KE": "712123456", "KG": "700123456", "KH": "91234567", "KI": "72001234", "KM": "3212345", "KN": "8697652917", "KP": "1921234567", "KR": "1020000000", "KW": "50012345", "KY": "3453231234", "KZ": "7710009998", "LA": "2023123456", "LB": "71123456", "LC": "7582845678", "LI": "660234567", "LK": "712345678", "LR": "770123456", "LS": "50123456", "LT": "61234567", "LU": "628123456", "LV": "21234567", "LY": "912345678", "MA": "650123456", "MC": "612345678", "MD": "62112345", "ME": "60123456", "MF": "690001234", "MG": "321234567", "MH": "2351234", "MK": "72345678", "ML": "65012345", "MM": "92123456", "MN": "88123456", "MO": "66123456", "MP": "6702345678", "MQ": "696201234", "MR": "22123456", "MS": "6644923456", "MT": "96961234", "MU": "52512345", "MV": "7712345", "MW": "991234567", "MX": "2221234567", "MY": "123456789", "MZ": "821234567", "NA": "811234567", "NC": "751234", "NE": "93123456", "NF": "381234", "NG": "8021234567", "NI": "81234567", "NL": "612345678", "NO": "40612345", "NP": "9841234567", "NR": "5551234", "NU": "8884012", "NZ": "211234567", "OM": "92123456", "PA": "61234567", "PE": "912345678", "PF": "87123456", "PG": "70123456", "PH": "9051234567", "PK": "3012345678", "PL": "512345678", "PM": "551234", "PR": "7872345678", "PS": "599123456", "PT": "912345678", "PW": "6201234", "PY": "961456789", "QA": "33123456", "RE": "692123456", "RO": "712034567", "RS": "601234567", "RU": "9123456789", "RW": "720123456", "SA": "512345678", "SB": "7421234", "SC": "2510123", "SD": "911231234", "SE": "701234567", "SG": "81234567", "SH": "51234", "SI": "31234567", "SJ": "41234567", "SK": "912123456", "SL": "25123456", "SM": "66661212", "SN": "701234567", "SO": "71123456", "SR": "7412345", "SS": "977123456", "ST": "9812345", "SV": "70123456", "SX": "7215205678", "SY": "944567890", "SZ": "76123456", "TA": "8999", "TC": "6492311234", "TD": "63012345", "TG": "90112345", "TH": "812345678", "TJ": "917123456", "TK": "7290", "TL": "77212345", "TM": "66123456", "TN": "20123456", "TO": "7715123", "TR": "5012345678", "TT": "8682911234", "TV": "901234", "TW": "912345678", "TZ": "621234567", "UA": "501234567", "UG": "712345678", "US": "2015550123", "UY": "94231234", "UZ": "912345678", "VA": "3123456789", "VC": "7844301234", "VE": "4121234567", "VG": "2843001234", "VI": "3406421234", "VN": "912345678", "VU": "5912345", "WF": "821234", "WS": "7212345", "XK": "43201234", "YE": "712345678", "YT": "639012345", "ZA": "711234567", "ZM": "955123456", "ZW": "712345678" };
+const maskCache = /* @__PURE__ */ new Map();
+const getPhoneMaskForCountry = (countryIso2) => {
+  const country = countryIso2.trim().toUpperCase();
+  const cached = maskCache.get(country);
+  if (cached) {
+    return cached;
+  }
+  const example = getExampleNumber(country, examples);
+  if (!example) {
+    return void 0;
+  }
+  const groups = example.formatNational().split(/\D+/).filter(Boolean).map((part) => part.length);
+  const mask = groups.map((size) => "0".repeat(size)).join(" ");
+  maskCache.set(country, mask);
+  return mask;
+};
+const nationalDigitsForMask = (parsed) => parsed.formatNational().replace(/\D/g, "");
+const tryParseForCountry = (candidate, country) => {
+  const parsed = parsePhoneNumber(candidate, country) ?? parsePhoneNumber(candidate);
+  if (!parsed?.isValid() || parsed.country !== country) {
+    return void 0;
+  }
+  return parsed;
+};
+const shouldNormalizePhoneInput = (value, countryIso2) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return false;
+  }
+  if (trimmed.includes("+") || trimmed.startsWith("00")) {
+    return true;
+  }
+  const digits = trimmed.replace(/\D/g, "");
+  const mask = getPhoneMaskForCountry(countryIso2);
+  if (!mask) {
+    return false;
+  }
+  const maxDigits = (mask.match(/0/g) ?? []).length;
+  if (digits.length > maxDigits) {
+    return true;
+  }
+  try {
+    const callingCode = getCountryCallingCode(countryIso2);
+    if (digits.startsWith(callingCode) && digits.length > maxDigits - 1) {
+      return true;
+    }
+  } catch {
+    return false;
+  }
+  return false;
+};
+const normalizeNationalPhoneInput = (value, countryIso2) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const country = countryIso2.trim().toUpperCase();
+  const digits = trimmed.replace(/\D/g, "");
+  const candidates = /* @__PURE__ */ new Set([trimmed]);
+  if (digits) {
+    candidates.add(digits);
+    candidates.add(`+${digits}`);
+  }
+  for (const candidate of candidates) {
+    const parsed = tryParseForCountry(candidate, country);
+    if (parsed) {
+      return nationalDigitsForMask(parsed);
+    }
+  }
+  try {
+    const callingCode = getCountryCallingCode(country);
+    if (digits.startsWith(callingCode) && digits.length > callingCode.length) {
+      const withoutCode = digits.slice(callingCode.length);
+      const parsed = tryParseForCountry(withoutCode, country) ?? tryParseForCountry(`0${withoutCode}`, country);
+      if (parsed) {
+        return nationalDigitsForMask(parsed);
+      }
+    }
+  } catch {
+    return trimmed;
+  }
+  return trimmed;
+};
 const _hoisted_1$5 = { class: "relative w-full" };
 const _hoisted_2$4 = { class: "absolute left-3 top-1/2 -translate-y-1/2 text-xl leading-none" };
 const _hoisted_3$4 = ["aria-expanded", "aria-label", "aria-controls", "aria-activedescendant", "value", "disabled"];
@@ -19186,12 +19178,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     autocomplete: { default: "tel" },
     required: { type: Boolean, default: false },
     placeholder: { default: void 0 },
-    maxlength: { default: void 0 },
-    minlength: { default: void 0 },
     name: { default: void 0 },
     autofocus: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    pattern: { default: void 0 }
+    readonly: { type: Boolean, default: false }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {},
@@ -19200,7 +19189,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   }),
   emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "update:country", "update:e164", "valid", "noCountryResults", "blur"], ["update:modelValue", "update:country"]),
   setup(__props, { emit: __emit }) {
-    const [nationalNumber, modelModifiers] = vue.useModel(__props, "modelValue");
+    const [nationalNumber] = vue.useModel(__props, "modelValue");
     const country = vue.useModel(__props, "country");
     const attrs = vue.useAttrs();
     const props = __props;
@@ -19219,12 +19208,10 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       autocomplete: props.autocomplete,
       required: props.required,
       placeholder: props.placeholder,
-      maxlength: props.maxlength,
-      minlength: props.minlength,
       name: props.name,
       autofocus: props.autofocus,
       readonly: props.readonly,
-      pattern: props.pattern,
+      inputmode: "tel",
       ...inputAttrs.value
     }));
     const countryItems = vue.computed(() => {
@@ -19235,6 +19222,10 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         props.defaultCountry
       );
     });
+    const phoneMask = vue.computed(() => getPhoneMaskForCountry(country.value ?? props.defaultCountry));
+    const phoneMaskOptions = vue.computed(() => ({
+      prepare: (value) => applyPhoneNormalization(value, country.value ?? props.defaultCountry)
+    }));
     const committedValid = vue.ref(null);
     const resolvedLabel = vue.computed(() => props.label === void 0 ? t("FdsPhonenumber.phoneNumber") : props.label);
     const resolvedInvalidMessage = vue.computed(
@@ -19258,6 +19249,18 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       const result2 = validatePhoneNumber(nationalNumber.value ?? "", country.value ?? "SE");
       emit("update:e164", result2.isValid && result2.phoneNumber ? result2.phoneNumber : "");
     }
+    function applyPhoneNormalization(value, countryCode = country.value ?? props.defaultCountry) {
+      if (!shouldNormalizePhoneInput(value, countryCode)) {
+        return value;
+      }
+      return normalizeNationalPhoneInput(value, countryCode);
+    }
+    vue.watch(nationalNumber, (value) => {
+      const normalized = applyPhoneNormalization(value ?? "");
+      if (normalized !== (value ?? "")) {
+        nationalNumber.value = normalized;
+      }
+    });
     vue.watch(country, () => {
       if (committedValid.value === null) {
         return;
@@ -19265,6 +19268,10 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       runValidation();
     });
     function handleBlur(ev) {
+      const normalized = applyPhoneNormalization(nationalNumber.value ?? "");
+      if (normalized !== (nationalNumber.value ?? "")) {
+        nationalNumber.value = normalized;
+      }
       runValidation();
       emit("blur", ev);
     }
@@ -19294,15 +19301,15 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           vue.createVNode(_sfc_main$r, vue.mergeProps({
             modelValue: vue.unref(nationalNumber),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(nationalNumber) ? nationalNumber.value = $event : null),
-            modelModifiers: vue.unref(modelModifiers),
-            type: "tel",
+            mask: phoneMask.value,
+            "mask-options": phoneMaskOptions.value,
             valid: displayValid.value,
             disabled: __props.disabled,
             optional: __props.optional,
             ariaLabel: vue.unref(t)("FdsPhonenumber.phoneNumber"),
             "data-testid": __props.dataTestid ? `${__props.dataTestid}-number` : void 0,
             class: ["mb-0! min-w-0 flex-1", __props.inputClass ?? ""]
-          }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "modelModifiers", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
+          }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["modelValue", "mask", "mask-options", "valid", "disabled", "optional", "ariaLabel", "data-testid", "class"])
         ]),
         noCountryResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(vue.unref(t)("FdsPhonenumber.noCountryResults")), 1)) : vue.createCommentVNode("", true),
         showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, vue.toDisplayString(resolvedInvalidMessage.value), 1)) : vue.createCommentVNode("", true)