@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -0,0 +1,507 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { v as v4 } from './v4-CK3_k8jD.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) {
+        registerInstance(this, hostRef);
+        this.hasErrorStateChanged = createEvent(this, "hasErrorStateChanged", 7);
+        this.valueChange = 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()}`;
+        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 (h(Host, { key: '124c8feabed1cf383f2eb65e77dd2517c96ea01c', 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,
+            } }, h("div", { key: '6b2a17efd488aa18ac8dea1e86d12884ceb51e90', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'd3f8e42841532f8c37a131545007af3213c1b9e0', 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 && (h("xpl-icon", { key: 'cb52527ba28d95a93cba734bb6d1b3ab8e14a388', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '7942dae0973871635b7b64e0697d8c25352ac3bf', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '24b810a9e03c7774ad6576cc9f03888d5da9d3aa', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'eb7684aad427a10615c23326a2a2628a4a12fbb0', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '8e429f156e36f101413e1d5168bb38a2ca9bdebf', 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 && (h("button", { key: '403e1b9e35a7bfd2ba356c16c4d5e9178541f876', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'aee1381d3a7dcec64c708ecfa67266eef442850e', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '9d14a65f3ac538b4e420151927a0c349adf3688d', 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" }, h("div", { key: '87006a8a90ef37032775247a387896f065ce5673', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '26a99c318081e3215fa779191ee8a0f9c127489f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+                this.searchQuery = e.detail ?? '';
+            } }, h("xpl-icon", { key: '4aee182e975ed805524ac93e3a34f055266b693b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "dropdownOpen": [{
+                "onDropdownOpenChange": 0
+            }],
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+
+export { InputPhone as xpl_input_phone };