fds-vue-core 8.2.2 → 8.2.4

package/dist/components/FdsSearchSelect/FdsSearchSelect.vue.d.ts

@@ -52,9 +52,9 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProps, {
     } & import('../..').FdsInputProps> & Readonly<{
         onInput?: ((ev: Event) => any) | undefined;
         onBlur?: ((ev: FocusEvent) => any) | undefined;
-        onChange?: ((ev: Event) => any) | undefined;
         onKeyup?: ((ev: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onAutocomplete?: ((ev: Event) => any) | undefined;
         onClearInput?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string) => any) | undefined;
         "onKeyup.enter"?: ((ev: KeyboardEvent) => any) | undefined;
@@ -63,8 +63,8 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProps, {
     } & {
         input: (ev: Event) => any;
         blur: (ev: FocusEvent) => any;
-        change: (ev: Event) => any;
         keyup: (ev: KeyboardEvent) => any;
+        autocomplete: (ev: Event) => any;
         clearInput: () => any;
         "update:value": (value: string) => any;
         "keyup.enter": (ev: KeyboardEvent) => any;
@@ -106,9 +106,9 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProps, {
     } & import('../..').FdsInputProps> & Readonly<{
         onInput?: ((ev: Event) => any) | undefined;
         onBlur?: ((ev: FocusEvent) => any) | undefined;
-        onChange?: ((ev: Event) => any) | undefined;
         onKeyup?: ((ev: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onAutocomplete?: ((ev: Event) => any) | undefined;
         onClearInput?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string) => any) | undefined;
         "onKeyup.enter"?: ((ev: KeyboardEvent) => any) | undefined;

package/dist/components/FdsSearchSelectPro/FdsSearchSelectPro.vue.d.ts

@@ -73,9 +73,9 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProProps, {
     } & import('../..').FdsInputProps> & Readonly<{
         onInput?: ((ev: Event) => any) | undefined;
         onBlur?: ((ev: FocusEvent) => any) | undefined;
-        onChange?: ((ev: Event) => any) | undefined;
         onKeyup?: ((ev: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onAutocomplete?: ((ev: Event) => any) | undefined;
         onClearInput?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string) => any) | undefined;
         "onKeyup.enter"?: ((ev: KeyboardEvent) => any) | undefined;
@@ -84,8 +84,8 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProProps, {
     } & {
         input: (ev: Event) => any;
         blur: (ev: FocusEvent) => any;
-        change: (ev: Event) => any;
         keyup: (ev: KeyboardEvent) => any;
+        autocomplete: (ev: Event) => any;
         clearInput: () => any;
         "update:value": (value: string) => any;
         "keyup.enter": (ev: KeyboardEvent) => any;
@@ -127,9 +127,9 @@ declare const _default: import('vue').DefineComponent<FdsSearchSelectProProps, {
     } & import('../..').FdsInputProps> & Readonly<{
         onInput?: ((ev: Event) => any) | undefined;
         onBlur?: ((ev: FocusEvent) => any) | undefined;
-        onChange?: ((ev: Event) => any) | undefined;
         onKeyup?: ((ev: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onAutocomplete?: ((ev: Event) => any) | undefined;
         onClearInput?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string) => any) | undefined;
         "onKeyup.enter"?: ((ev: KeyboardEvent) => any) | undefined;

package/dist/components/Form/FdsInput/FdsInput.vue.d.ts

@@ -8,17 +8,17 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 } & {
     input: (ev: Event) => any;
     blur: (ev: FocusEvent) => any;
-    change: (ev: Event) => any;
     keyup: (ev: KeyboardEvent) => any;
+    autocomplete: (ev: Event) => any;
     clearInput: () => any;
     "update:value": (value: string) => any;
     "keyup.enter": (ev: KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onInput?: ((ev: Event) => any) | undefined;
     onBlur?: ((ev: FocusEvent) => any) | undefined;
-    onChange?: ((ev: Event) => any) | undefined;
     onKeyup?: ((ev: KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onAutocomplete?: ((ev: Event) => any) | undefined;
     onClearInput?: (() => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onKeyup.enter"?: ((ev: KeyboardEvent) => any) | undefined;

package/dist/components/Form/FdsPhonenumber/FdsPhonenumber.vue.d.ts

@@ -24,18 +24,15 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     id: string;
     name: string;
     placeholder: string;
-    maxlength: number;
     dataTestid: string;
     label: string;
     meta: string;
-    pattern: string;
     autofocus: boolean;
     locale: string;
     inputClass: string;
     valid: boolean | null;
     optional: boolean;
     invalidMessage: string;
-    minlength: number;
     autocomplete: string;
     readonly: boolean;
     defaultCountry: string;

package/dist/components/Form/FdsPhonenumber/normalizePhoneInput.d.ts

@@ -0,0 +1,7 @@
+/** Whether the value likely contains a country calling code or international formatting. */
+export declare const shouldNormalizePhoneInput: (value: string, countryIso2: string) => boolean;
+/**
+ * Converts international/autocomplete values to national digits for the IMask field.
+ * IMask reapplies spacing from the country mask.
+ */
+export declare const normalizeNationalPhoneInput: (value: string, countryIso2: string) => string;

package/dist/components/Form/FdsPhonenumber/phoneMask.d.ts

@@ -0,0 +1,2 @@
+/** IMask pattern with space grouping derived from libphonenumber mobile example numbers. */
+export declare const getPhoneMaskForCountry: (countryIso2: string) => string | undefined;

package/dist/components/Form/FdsPhonenumber/types.d.ts

@@ -1,6 +1,6 @@
 import { FdsInputProps } from '../FdsInput/types';
 import { CountryPhoneOption } from './countries';
-type FdsPhonenumberInputPassthroughProps = Pick<FdsInputProps, 'id' | 'autocomplete' | 'required' | 'placeholder' | 'maxlength' | 'minlength' | 'name' | 'autofocus' | 'readonly' | 'pattern'>;
+type FdsPhonenumberInputPassthroughProps = Pick<FdsInputProps, 'id' | 'autocomplete' | 'required' | 'placeholder' | 'name' | 'autofocus' | 'readonly'>;
 export interface FdsPhonenumberProps extends FdsPhonenumberInputPassthroughProps {
     label?: string;
     meta?: string;

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

@@ -9878,11 +9878,12 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$j = ["for", "id"];
 const _hoisted_2$f = { class: "relative" };
-const _hoisted_3$f = ["type", "required", "value", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
+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 inputPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -9933,14 +9934,17 @@ 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;
     const emit = __emit;
     const { id, type, maxlength, attrs } = useAttrsWithDefaults(props);
     const { t } = useFdsI18n();
-    const inputType = vue.computed(() => type.value ?? props.type ?? "text");
+    const inputType = vue.computed(() => {
+      if (props.mask) return "text";
+      return type.value ?? props.type ?? "text";
+    });
     const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
     const inputId = vue.computed(() => id.value ?? autoId);
     const labelId = vue.computed(() => `${inputId.value}-label`);
@@ -10012,28 +10016,31 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     });
     const externalClass = vue.computed(() => props.class ?? attrs.class);
     const inputClasses = vue.computed(() => [
-      "block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]",
+      "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" : "bg-white",
+      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 inputStyle = vue.computed(() => {
-      if (maxlength.value) {
-        return {
-          width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
-          maxWidth: "100%"
-        };
-      }
-      return {};
+      if (!maxlength.value) return void 0;
+      return {
+        width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
+        maxWidth: "100%"
+      };
     });
     const rightIconsContainerClasses = vue.computed(() => [
       "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(() => ({
+      ...inputAttrs.value,
+      ...props.mask ? {} : { value: internalValue.value }
+    }));
     const internalValue = vue.computed({
       get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
       set: (newValue) => {
@@ -10045,6 +10052,9 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     });
     function onClear() {
       internalValue.value = "";
+      if (maskInstance) {
+        maskInstance.value = "";
+      }
       emit("clearInput");
     }
     function onDateIconClick() {
@@ -10079,11 +10089,11 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         maskInstance = null;
       }
       if (props.mask && inputRef.value) {
-        const maskConfig = {
+        maskInstance = IMask(inputRef.value, {
           mask: props.mask,
-          ...props.maskOptions
-        };
-        maskInstance = IMask(inputRef.value, maskConfig);
+          ...props.maskOptions,
+          lazy: props.maskOptions?.lazy ?? true
+        });
         if (internalValue.value) {
           maskInstance.value = internalValue.value;
         }
@@ -10120,18 +10130,30 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return props.meta ? metaId.value : void 0;
     });
     vue.watch(
-      () => props.mask,
+      () => [props.mask, props.maskOptions],
       () => {
         vue.nextTick(() => {
           createMask2();
         });
-      }
+      },
+      { 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 !== maskInstance.value) {
-          if (document.activeElement !== inputRef.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
           }
         }
@@ -10141,7 +10163,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       () => modelValue.value,
       (newValue) => {
         if (maskInstance && newValue !== void 0 && newValue !== maskInstance.value) {
-          if (document.activeElement !== inputRef.value) {
+          if (shouldSyncMaskFromModel(newValue, maskInstance.value)) {
             maskInstance.value = newValue;
           }
         }
@@ -10183,7 +10205,6 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                 ref: inputRef,
                 type: inputType.value === "password" ? showPassword.value ? "text" : "password" : inputType.value,
                 required: props.required,
-                value: internalValue.value,
                 disabled: props.disabled,
                 tabindex: props.disabled ? -1 : void 0,
                 "aria-invalid": props.valid === false ? "true" : void 0,
@@ -10196,11 +10217,12 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
                 placeholder: props.placeholder,
                 pattern: props.pattern,
                 searchIcon: props.searchIcon
-              }, inputAttrs.value, {
+              }, 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);
                 })
@@ -18493,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);
@@ -18507,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) {
@@ -18580,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"];
@@ -18916,7 +19030,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           role: "listbox",
           id: listboxId,
-          class: "absolute left-0 z-20 mt-1 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
+          class: "absolute left-0 z-20 mt-2 min-w-[20rem] w-max max-w-[calc(100vw-2rem)] max-h-[280px] overflow-y-auto rounded-md border border-gray-300 bg-white"
         }, listDataAttrs.value, { onMouseleave: clearHoverPreview }), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredCountries.value, (option, index) => {
             return vue.openBlock(), vue.createElementBlock("li", {
@@ -19025,7 +19139,7 @@ const _hoisted_2$3 = {
   key: 1,
   class: "font-thin mb-1"
 };
-const _hoisted_3$3 = { class: "flex flex-wrap items-start gap-x-1" };
+const _hoisted_3$3 = { class: "flex flex-wrap items-start gap-x-2" };
 const _hoisted_4$3 = {
   key: 2,
   class: "text-red-700 font-bold mt-1"
@@ -19064,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": {},
@@ -19078,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;
@@ -19097,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(() => {
@@ -19113,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(
@@ -19136,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;
@@ -19143,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);
     }
@@ -19172,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)