@xplortech/apollo-core 2.5.0 → 2.6.0

package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js

@@ -7,7 +7,7 @@ const fallbackColorValues = {
     b: 0,
     a: 1,
 };
-export class XplInputColor {
+export class InputColor {
     constructor() {
         this.placeholder = 'Select color';
         this.eyeDropperSupported = 'EyeDropper' in window;
@@ -193,16 +193,16 @@ export class XplInputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '89789ef1ae21c4c555f67fd1a09159765eb1ef9e', class: "xpl-input-color" }, h("xpl-popover", { key: '2eececd5d3592e0111bc507892eb7f7cd8bad8e6', disabled: this.disabled, display: "menu" }, h("div", { key: '56d4a7bb25c3cdeb09d38d2fa986fe7595c453c0', slot: "trigger" }, h("div", { key: 'e49c0143d634a99cc547ead6af263716a28dd9ff', class: {
+        return (h(Host, { key: 'a8cdba9ff504fbeaf7b21167b778d8cf00216a1a', class: "xpl-input-color" }, h("xpl-popover", { key: '535497f6aba0e7e9e65b894cd8c62cebe8ad3dd5', disabled: this.disabled, display: "menu" }, h("div", { key: '436c51111938bbbef99698b94bd5c3123bc0b42d', slot: "trigger" }, h("div", { key: '09e8f57c0d1a35d1b0a5785ebb141db62c3db4d2', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: 'e65efc371fab736e640f375446c22340f801b8a2', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '76da6216e95d48dd5cdbb890e7fe14cf1be85c6b', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'b71aa6dd82c16ac328da186920e04b2992341317', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'c4a560be47d17c98f353c0e324c0f9025f535fae', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '8e6add90e733d299cea94559dcbc29dd4e64d9cd', class: "xpl-input-color__menu" }, h("div", { key: 'a488c9b7ef3ff0cabbbb4bf5a631f209034a2539', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: '844a66fa0523b133ce3e2b6d83e395254e9b513f', class: "xpl-input-color__menu" }, h("div", { key: 'c687aaa94b122258e09cffabcc5029905ddccb27', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -210,9 +210,9 @@ export class XplInputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '542a5cafd651e6b49f813f6eecb46088b0b6f97c', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'fd3268874bb0c0bc22c2d2db15dd50c38d3ae70a', class: "xpl-input-color__grid" }, h("input", { key: '08ea52b5c2bbc2800b2ad5cca6981813e4578ce5', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '7e65660cef09fc5ae0c9dc0d49fe7769ad15b55a', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '5e76247d0d59fca5500416ddeaca53784dc42209', class: "xpl-input-color__grid" }, h("input", { key: '5b891dd55f6d4f5d1242d142c9af8a3af496e398', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: '1692e362cb1e48446f33e2f82c5988546ad6a6f0', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), h("input", { key: 'ae20b7cbfa6303c6615afee0fc35d0dda3bc1f70', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -222,9 +222,9 @@ export class XplInputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: '5de3d1979fbb4c4a2892961fcbd7e6fc2d2723b4', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'c4b884401f5324e37e09637785a2148ef5c99112', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: '3a660bdbb902bc8bfddb8c423f2462404b0221b8', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: '5d8eff1bf9e51bd44116c01e3bfd016414662d92', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;

package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js

@@ -1,12 +1,14 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import flatpickr from "flatpickr";
+import { getNearestScrollableAncestor, isInsideFixedPosition, } from "../../../utils/layout-ancestors";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-export class XplInputDate {
+export class InputDate {
     constructor() {
         this.dateFormat = 'Y-m-d';
         this.mode = 'single';
+        this.flatpickrStaticLayout = false;
         this.valueChanged = (event) => {
             const target = event.target;
             this.valueChange.emit(target.value);
@@ -19,17 +21,31 @@ export class XplInputDate {
         var _a;
         (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.setDate(newValue);
     }
-    componentDidLoad() {
-        this.flatpickrInstance = flatpickr(this.input, {
-            allowInput: true,
-            dateFormat: this.dateFormat,
-            defaultDate: this.value,
-            maxDate: this.max,
-            minDate: this.min,
-            mode: this.mode,
-            nextArrow: arrowSvg(),
-            prevArrow: arrowSvg(true),
-            onClose: (selectedDates) => {
+    connectedCallback() {
+        queueMicrotask(() => this.ensureFlatpickr());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.flatpickrInstance = undefined;
+        this.flatpickrStaticLayout = false;
+        this.unwrapStaleFlatpickrWrapper();
+    }
+    componentDidRender() {
+        this.ensureFlatpickr();
+    }
+    ensureFlatpickr() {
+        if (this.flatpickrInstance || !this.input || !this.el.isConnected) {
+            return;
+        }
+        this.unwrapStaleFlatpickrWrapper();
+        this.initFlatpickr();
+    }
+    initFlatpickr() {
+        const insideFixed = isInsideFixedPosition(this.el);
+        this.flatpickrInstance = flatpickr(this.input, Object.assign(Object.assign({ allowInput: true }, (insideFixed
+            ? { static: true }
+            : { appendTo: getNearestScrollableAncestor(this.el) })), { dateFormat: this.dateFormat, defaultDate: this.value, maxDate: this.max, minDate: this.min, mode: this.mode, nextArrow: arrowSvg(), prevArrow: arrowSvg(true), onClose: (selectedDates) => {
                 const minRequiredDates = !this.required ? 0 : this.mode === 'single' ? 1 : 2;
                 this.hasErrorState = selectedDates.length < minRequiredDates ? 'required' : null;
                 if (selectedDates.length === 2) {
@@ -39,19 +55,39 @@ export class XplInputDate {
                         end,
                     });
                 }
-            },
+            } }));
+        queueMicrotask(() => {
+            if (this.flatpickrStaticLayout !== insideFixed) {
+                this.flatpickrStaticLayout = insideFixed;
+            }
         });
     }
+    unwrapStaleFlatpickrWrapper() {
+        const { input } = this;
+        const wrapper = input === null || input === void 0 ? void 0 : input.parentElement;
+        if (!(wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.contains('flatpickr-wrapper'))) {
+            return;
+        }
+        const parent = wrapper.parentElement;
+        if (!parent) {
+            return;
+        }
+        while (wrapper.firstChild) {
+            parent.insertBefore(wrapper.firstChild, wrapper);
+        }
+        parent.removeChild(wrapper);
+    }
     render() {
-        return (h(Host, { key: '6024246dd7a92cc6396c634e8e87d614b1d860e3', class: {
+        return (h(Host, { key: '35f91387097b7fd5bdc59ff8608c3700470ff367', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
-            } }, h("div", { key: '0c8fe7b8057715618ae040b64ee2ae6506051200', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'd0d1048313962c7381b9fc4e2d07b107d42f86d1', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '3daca1a28baf14701e4b7a9761d2ff91be8dcd96', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+                'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
+            } }, h("div", { key: '7f561dba2b2aa7d308d0029a20ace5d918368afc', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '2e87d6e22a2a69db7e91c69fb3d59f81d8358e52', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '53d05e6b6b637e298f31cb1f2b9c56d9d597688f', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: '82c57c4694c088debfb710e37bd90b5132fa3339', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '553fa633312ed0adf1fd38352f40142e2b48eeaa', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: '45c1d48fe6a312855cf3bd90e139d060821c4ba4', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '037657e9a3cecc054d95b6fd835b58885eef8042', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     static get is() { return "xpl-input-date"; }
     static get properties() {
@@ -309,6 +345,7 @@ export class XplInputDate {
     }
     static get states() {
         return {
+            "flatpickrStaticLayout": {},
             "hasErrorState": {}
         };
     }
@@ -365,6 +402,7 @@ export class XplInputDate {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "hasErrorState",

package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-export class XplInputFile {
+export class InputFile {
     constructor() {
         this.accept = '';
         this.multiple = false;
@@ -33,18 +33,18 @@ export class XplInputFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '984964735a57f0c1ae83b7a6e9ad548b8b732694', class: {
+        return (h(Host, { key: '87df3edce40c74988426ba9fcef4bc3f5740c56b', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '20da96646dda47226058869a6a3c188aa602ae7b', class: {
+            } }, h("span", { key: '11e4c220751ce3f06fd15a741a1f8b81d98c18bc', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: 'd6355378f46c6a6edd193839e3ff24bd241db9b6', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '48a7c3ff9668c7a7ad3e1f719c05f0439db0eb98', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '6daba4f9e520c12a791bfd18f2894e55f0da86f4', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '3459f9c3e8618962c02f1e25e6b80f63fe4d593d', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '81a892b3c7cac161c4fe893b9e627055d43a13c8', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'bb3e89c64ae62748b3e4afd5f80fcede37ae7b3a', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '2c8646cd5ef7e235e75c68bf4832ce1d9c578493', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd303ac9e074e8031ed2d695cc85eef32ef40f058', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }

package/dist/collection/components/xpl-input/xpl-input-phone/phone-country-data.js

@@ -0,0 +1,58 @@
+export const PHONE_COUNTRIES = [
+    { countryCode: 'US', dialCode: '+1', name: 'United States' },
+    { countryCode: 'CA', dialCode: '+1', name: 'Canada' },
+    { countryCode: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { countryCode: 'AU', dialCode: '+61', name: 'Australia' },
+    { countryCode: 'DE', dialCode: '+49', name: 'Germany' },
+    { countryCode: 'FR', dialCode: '+33', name: 'France' },
+    { countryCode: 'ES', dialCode: '+34', name: 'Spain' },
+    { countryCode: 'IT', dialCode: '+39', name: 'Italy' },
+    { countryCode: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { countryCode: 'BE', dialCode: '+32', name: 'Belgium' },
+    { countryCode: 'AT', dialCode: '+43', name: 'Austria' },
+    { countryCode: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { countryCode: 'PL', dialCode: '+48', name: 'Poland' },
+    { countryCode: 'IE', dialCode: '+353', name: 'Ireland' },
+    { countryCode: 'PT', dialCode: '+351', name: 'Portugal' },
+    { countryCode: 'SE', dialCode: '+46', name: 'Sweden' },
+    { countryCode: 'NO', dialCode: '+47', name: 'Norway' },
+    { countryCode: 'DK', dialCode: '+45', name: 'Denmark' },
+    { countryCode: 'FI', dialCode: '+358', name: 'Finland' },
+    { countryCode: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { countryCode: 'JP', dialCode: '+81', name: 'Japan' },
+    { countryCode: 'CN', dialCode: '+86', name: 'China' },
+    { countryCode: 'IN', dialCode: '+91', name: 'India' },
+    { countryCode: 'BR', dialCode: '+55', name: 'Brazil' },
+    { countryCode: 'MX', dialCode: '+52', name: 'Mexico' },
+    { countryCode: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { countryCode: 'SG', dialCode: '+65', name: 'Singapore' },
+    { countryCode: 'HK', dialCode: '+852', name: 'Hong Kong' },
+    { countryCode: 'KR', dialCode: '+82', name: 'South Korea' },
+];
+export function getCountryByCode(countryCode) {
+    return PHONE_COUNTRIES.find((c) => c.countryCode === countryCode);
+}
+export function getCountryByDialCode(dialCode) {
+    return PHONE_COUNTRIES.find((c) => c.dialCode === dialCode);
+}
+export function parseE164(value) {
+    if (!value || !value.startsWith('+'))
+        return null;
+    const digits = value.slice(1).replace(/\D/g, '');
+    if (!digits.length)
+        return null;
+    const sorted = [...PHONE_COUNTRIES].sort((a, b) => b.dialCode.replace(/\D/g, '').length - a.dialCode.replace(/\D/g, '').length);
+    const matchedCountry = sorted.find((country) => {
+        const codeDigits = country.dialCode.slice(1).replace(/\D/g, '');
+        return digits.startsWith(codeDigits);
+    });
+    if (!matchedCountry)
+        return null;
+    const codeDigits = matchedCountry.dialCode.slice(1).replace(/\D/g, '');
+    const nationalNumber = digits.slice(codeDigits.length);
+    return { dialCode: matchedCountry.dialCode, nationalNumber };
+}
+export function toE164(dialCode, nationalNumber) {
+    const digits = (dialCode.slice(1) + nationalNumber).replace(/\D/g, '');
+    return digits.length ? `+${digits}` : '';
+}

package/dist/collection/components/xpl-input/xpl-input-phone/phone-format.js

@@ -0,0 +1,219 @@
+export function digitsOnly(value) {
+    return (value || '').replace(/\D/g, '');
+}
+export function getMaxNationalNumberLength(countryCode) {
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+        case 'MX':
+        case 'JP':
+        case 'IN':
+        case 'KR':
+            return 10;
+        case 'GB':
+        case 'DE':
+        case 'AT':
+        case 'CH':
+        case 'BR':
+        case 'CN':
+            return 11;
+        case 'AU':
+        case 'FR':
+            return 9;
+        default:
+            return 15;
+    }
+}
+export function getPlaceholderPattern(countryCode) {
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+            return '000 000 0000';
+        case 'GB':
+            return '0000 000 0000';
+        case 'AU':
+            return '0 000 000 000';
+        case 'DE':
+        case 'AT':
+        case 'CH':
+            return '000 0000000';
+        case 'FR':
+            return '0 00 00 00 00';
+        case 'BR':
+            return '00 00000 0000';
+        case 'MX':
+            return '000 000 0000';
+        case 'JP':
+            return '000 0000 0000';
+        case 'CN':
+            return '000 0000 0000';
+        case 'IN':
+            return '00000 00000';
+        case 'KR':
+            return '000 0000 0000';
+        default:
+            return '000 000 0000';
+    }
+}
+function formatUSCA(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 6)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6, len)}`;
+}
+function formatGB(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 4)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 4)} ${d.slice(4, len)}`;
+    return `${d.slice(0, 4)} ${d.slice(4, 7)} ${d.slice(7, len)}`;
+}
+function formatAU(d) {
+    const len = Math.min(d.length, 9);
+    if (len <= 1)
+        return d.slice(0, len);
+    if (len <= 4)
+        return `${d.slice(0, 1)} ${d.slice(1, len)}`;
+    if (len <= 7)
+        return `${d.slice(0, 1)} ${d.slice(1, 4)} ${d.slice(4, len)}`;
+    return `${d.slice(0, 1)} ${d.slice(1, 4)} ${d.slice(4, 7)} ${d.slice(7, len)}`;
+}
+function formatDE(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 3)
+        return d.slice(0, len);
+    return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+}
+function formatFR(d) {
+    const len = Math.min(d.length, 9);
+    const parts = [];
+    let i = 0;
+    if (len > 0) {
+        parts.push(d.slice(0, 1));
+        i = 1;
+    }
+    while (i < len && i + 2 <= len) {
+        parts.push(d.slice(i, i + 2));
+        i += 2;
+    }
+    if (i < len)
+        parts.push(d.slice(i));
+    return parts.join(' ');
+}
+function formatBR(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 2)
+        return len ? `(${d}` : '';
+    if (len <= 6)
+        return `(${d.slice(0, 2)}) ${d.slice(2, len)}`;
+    if (len === 7)
+        return `(${d.slice(0, 2)}) ${d.slice(2, len)}`;
+    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7, len)}`;
+}
+function formatMX(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 6)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6, len)}`;
+}
+function formatJP(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)}-${d.slice(3, len)}`;
+    return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7, len)}`;
+}
+function formatCN(d) {
+    const len = Math.min(d.length, 11);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 7)} ${d.slice(7, len)}`;
+}
+function formatIN(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 5)
+        return d.slice(0, len);
+    return `${d.slice(0, 5)} ${d.slice(5, len)}`;
+}
+function formatKR(d) {
+    const len = Math.min(d.length, 10);
+    if (len <= 3)
+        return d.slice(0, len);
+    if (len <= 7)
+        return `${d.slice(0, 3)} ${d.slice(3, len)}`;
+    return `${d.slice(0, 3)} ${d.slice(3, 7)} ${d.slice(7, len)}`;
+}
+function formatGeneric(d) {
+    const len = d.length;
+    if (len <= 3)
+        return d;
+    const groups = [];
+    let i = 0;
+    while (i < len) {
+        const take = len - i >= 4 ? 4 : 3;
+        groups.push(d.slice(i, i + take));
+        i += take;
+    }
+    return groups.join(' ');
+}
+export function formatNationalNumber(digits, countryCode) {
+    if (!digits)
+        return '';
+    const d = digits.replace(/\D/g, '');
+    switch (countryCode) {
+        case 'US':
+        case 'CA':
+            return formatUSCA(d);
+        case 'GB':
+            return formatGB(d);
+        case 'AU':
+            return formatAU(d);
+        case 'DE':
+        case 'AT':
+        case 'CH':
+            return formatDE(d);
+        case 'FR':
+            return formatFR(d);
+        case 'BR':
+            return formatBR(d);
+        case 'MX':
+            return formatMX(d);
+        case 'JP':
+            return formatJP(d);
+        case 'CN':
+            return formatCN(d);
+        case 'IN':
+            return formatIN(d);
+        case 'KR':
+            return formatKR(d);
+        default:
+            return formatGeneric(d);
+    }
+}
+export function getCursorPositionAfterFormat(prevFormatted, nextFormatted, prevCursor) {
+    if (prevCursor >= prevFormatted.length) {
+        return nextFormatted.length;
+    }
+    const digitsBeforeCursor = digitsOnly(prevFormatted.slice(0, prevCursor)).length;
+    let newPos = 0;
+    let count = 0;
+    for (let i = 0; i < nextFormatted.length; i += 1) {
+        if (/\d/.test(nextFormatted[i])) {
+            count += 1;
+            if (count >= digitsBeforeCursor) {
+                newPos = i + (count === digitsBeforeCursor ? 1 : 0);
+                break;
+            }
+        }
+        newPos = i + 1;
+    }
+    return Math.min(newPos, nextFormatted.length);
+}