@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/cjs/xpl-input-phone.cjs.entry.js

@@ -0,0 +1,509 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var v4 = require('./v4-_2BfiRUa.js');
+
+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' },
+];
+function getCountryByCode(countryCode) {
+    return PHONE_COUNTRIES.find((c) => c.countryCode === countryCode);
+}
+function getCountryByDialCode(dialCode) {
+    return PHONE_COUNTRIES.find((c) => c.dialCode === dialCode);
+}
+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 };
+}
+function toE164(dialCode, nationalNumber) {
+    const digits = (dialCode.slice(1) + nationalNumber).replace(/\D/g, '');
+    return digits.length ? `+${digits}` : '';
+}
+
+function digitsOnly(value) {
+    return (value || '').replace(/\D/g, '');
+}
+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;
+    }
+}
+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(' ');
+}
+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);
+    }
+}
+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);
+}
+
+function getCountryIconName(countryName) {
+    return countryName.toLowerCase().replace(/ /g, '-');
+}
+const InputPhone = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasErrorStateChanged = index.createEvent(this, "hasErrorStateChanged", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.lastCursorRef = 0;
+        this.lastFormattedRef = '';
+        this.dropdownOpen = false;
+        this.hasErrorState = null;
+        this.nationalNumber = '';
+        this.searchQuery = '';
+        this.triggerId = `xpl-input-phone-trigger-${v4.v4()}`;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
+        this.handleTriggerClick = () => {
+            if (!this.isEditable)
+                return;
+            this.dropdownOpen = !this.dropdownOpen;
+        };
+        this.handleNumberInput = (ev) => {
+            const target = ev.target;
+            const raw = target.value || '';
+            this.lastCursorRef = target.selectionStart ?? 0;
+            this.lastFormattedRef = raw;
+            let nationalDigits;
+            if (this.isInternational && raw.startsWith('+')) {
+                const fullDigits = digitsOnly(raw);
+                const dialDigits = this.effectiveDialCode.slice(1).replace(/\D/g, '');
+                nationalDigits =
+                    dialDigits && fullDigits.startsWith(dialDigits)
+                        ? fullDigits.slice(dialDigits.length)
+                        : fullDigits;
+            }
+            else {
+                nationalDigits = digitsOnly(raw);
+            }
+            const maxLength = getMaxNationalNumberLength(this.effectiveCountryCode);
+            if (nationalDigits.length > maxLength) {
+                nationalDigits = nationalDigits.slice(0, maxLength);
+            }
+            this.nationalNumber = nationalDigits;
+            this.emitValue();
+            target.value = this.displayValue;
+        };
+        this.handleClear = () => {
+            this.nationalNumber = '';
+            this.emitValue();
+            this.inputEl?.focus();
+        };
+        this.handleDropdownUpdate = (_e, { component }) => {
+            const dropdown = component ?? this.dropdownRef;
+            if (!dropdown)
+                return;
+            const { options } = dropdown;
+            if (options?.length) {
+                const flat = options.reduce((acc, curr) => [...acc, ...(curr.groupName ? (curr.options ?? []) : [curr])], []);
+                const selected = flat.find((o) => o.isSelected);
+                if (selected?.value) {
+                    const country = getCountryByCode(selected.value);
+                    if (country) {
+                        this.selectedCountry = country;
+                        this.emitValue();
+                        this.inputEl?.focus();
+                    }
+                }
+            }
+        };
+    }
+    onDropdownOpenChange(isOpen) {
+        if (isOpen) {
+            this.searchQuery = '';
+        }
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValueChange(newValue) {
+        if (newValue == null || newValue === '') {
+            const country = getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
+            this.selectedCountry = country;
+            this.nationalNumber = '';
+            return;
+        }
+        const parsed = parseE164(newValue);
+        if (parsed) {
+            if (this.selectedCountry?.dialCode === parsed.dialCode) {
+                this.nationalNumber = parsed.nationalNumber;
+            }
+            else {
+                const defaultForCode = getCountryByCode(this.defaultCountry ?? 'US');
+                const country = (defaultForCode?.dialCode === parsed.dialCode ? defaultForCode : undefined) ??
+                    getCountryByDialCode(parsed.dialCode);
+                if (country) {
+                    this.selectedCountry = country;
+                    this.nationalNumber = parsed.nationalNumber;
+                }
+            }
+        }
+        else if (!this.selectedCountry) {
+            this.selectedCountry =
+                getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+        else {
+            this.selectedCountry =
+                getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl &&
+            this.lastFormattedRef &&
+            typeof this.inputEl.setSelectionRange === 'function') {
+            const newFormatted = this.displayValue;
+            const newCursor = getCursorPositionAfterFormat(this.lastFormattedRef, newFormatted, this.lastCursorRef);
+            this.inputEl.setSelectionRange(newCursor, newCursor);
+            this.lastFormattedRef = '';
+        }
+        else if (this.inputEl && this.lastFormattedRef) {
+            this.lastFormattedRef = '';
+        }
+    }
+    get effectiveCountryCode() {
+        return this.selectedCountry?.countryCode ?? this.defaultCountry ?? 'US';
+    }
+    get effectiveDialCode() {
+        return this.selectedCountry?.dialCode ?? '+1';
+    }
+    get isEditable() {
+        return !this.disabled && !this.readonly;
+    }
+    get orderedCountries() {
+        const preferred = this.preferredCountries || [];
+        const rest = PHONE_COUNTRIES.filter((c) => !preferred.includes(c.countryCode));
+        return [
+            ...preferred
+                .map((code) => getCountryByCode(code))
+                .filter((country) => country !== undefined),
+            ...rest,
+        ];
+    }
+    get filteredCountries() {
+        const q = this.searchQuery.trim().toLowerCase();
+        if (!q)
+            return this.orderedCountries;
+        return this.orderedCountries.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.dialCode.includes(q) ||
+            c.countryCode.toLowerCase().includes(q));
+    }
+    get displayValue() {
+        if (!this.nationalNumber)
+            return '';
+        return formatNationalNumber(this.nationalNumber, this.effectiveCountryCode);
+    }
+    get effectivePlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        const country = this.selectedCountry;
+        if (!country)
+            return '';
+        return getPlaceholderPattern(country.countryCode);
+    }
+    get dropdownOptions() {
+        return this.filteredCountries.map((c) => ({
+            icon: getCountryIconName(c.name),
+            label: `${c.name} (${c.dialCode})`,
+            value: c.countryCode,
+            isSelected: this.selectedCountry?.countryCode === c.countryCode,
+        }));
+    }
+    get maxInputLength() {
+        const maxNationalDigits = getMaxNationalNumberLength(this.effectiveCountryCode);
+        return formatNationalNumber('9'.repeat(maxNationalDigits), this.effectiveCountryCode)
+            .length;
+    }
+    emitValue() {
+        const e164 = this.nationalNumber ? toE164(this.effectiveDialCode, this.nationalNumber) : '';
+        this.value = e164 || undefined;
+        this.valueChange.emit(e164 || '');
+        this.validate();
+    }
+    validate() {
+        if (this.required && !this.nationalNumber.trim()) {
+            this.hasErrorState = 'required';
+            return;
+        }
+        this.hasErrorState = null;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c180c62687c5d1b9c9f31400df8b76475ffe821e', class: {
+                'xpl-input-phone': true,
+                'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
+                'xpl-input-phone--open': this.dropdownOpen,
+                'xpl-input-phone--domestic': !this.isInternational,
+            } }, index.h("div", { key: 'ea5b833f60f7bac459ef6362091a15beac015dec', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: '6e0d7b18dc7784ffcadcc13500c02bbec1977b90', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, this.selectedCountry?.name && (index.h("xpl-icon", { key: '038a87158d9417ad9889e3b0a94cd63bc16f5538', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '5434d2645e31bd30207c26f8e0a5004c00c699c6', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '623f1b49c156614a40cee574e1a41c2d09014e2b', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '535313ab4c84a989b0bedfe07bbd080ffaa4b76b', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: 'e9f03ca04b18fab0f9e6407f3686e43a072a3d81', ref: (el) => {
+                this.inputEl = el ?? undefined;
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (index.h("button", { key: '9e52b938631e3414225506cf13a50129e4046bd1', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: 'd7fa5c395ac0677db31405b2406ec33c1aef8d7d', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '1df1f72efa719f230e582e57c62f62eff98abfc8', ref: (el) => {
+                this.dropdownRef = el ?? undefined;
+            }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
+                this.dropdownOpen = e.detail;
+            }, "aria-label": "Country" }, index.h("div", { key: 'ce221f1de83d5cce87162c316aa3e64fbb0396a5', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '884815148c6827573b8a7584bb06eb8cfeaa9976', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+                this.searchQuery = e.detail ?? '';
+            } }, index.h("xpl-icon", { key: '9edff232287061494d5b8af93885c2a12fbe969b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "dropdownOpen": [{
+                "onDropdownOpenChange": 0
+            }],
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+
+exports.xpl_input_phone = InputPhone;