@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -0,0 +1,469 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import { PHONE_COUNTRIES, getCountryByCode, getCountryByDialCode, parseE164, toE164, } from "./phone-country-data";
+import { formatNationalNumber, getCursorPositionAfterFormat, digitsOnly, getPlaceholderPattern, getMaxNationalNumberLength, } from "./phone-format";
+function getCountryIconName(countryName) {
+    return countryName.toLowerCase().replace(/ /g, '-');
+}
+export class InputPhone {
+    constructor() {
+        this.lastCursorRef = 0;
+        this.lastFormattedRef = '';
+        this.dropdownOpen = false;
+        this.hasErrorState = null;
+        this.nationalNumber = '';
+        this.searchQuery = '';
+        this.triggerId = `xpl-input-phone-trigger-${uuid()}`;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
+        this.handleTriggerClick = () => {
+            if (!this.isEditable)
+                return;
+            this.dropdownOpen = !this.dropdownOpen;
+        };
+        this.handleNumberInput = (ev) => {
+            var _a;
+            const target = ev.target;
+            const raw = target.value || '';
+            this.lastCursorRef = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 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 = () => {
+            var _a;
+            this.nationalNumber = '';
+            this.emitValue();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleDropdownUpdate = (_e, { component }) => {
+            var _a;
+            const dropdown = component !== null && component !== void 0 ? component : this.dropdownRef;
+            if (!dropdown)
+                return;
+            const { options } = dropdown;
+            if (options === null || options === void 0 ? void 0 : options.length) {
+                const flat = options.reduce((acc, curr) => { var _a; return [...acc, ...(curr.groupName ? ((_a = curr.options) !== null && _a !== void 0 ? _a : []) : [curr])]; }, []);
+                const selected = flat.find((o) => o.isSelected);
+                if (selected === null || selected === void 0 ? void 0 : selected.value) {
+                    const country = getCountryByCode(selected.value);
+                    if (country) {
+                        this.selectedCountry = country;
+                        this.emitValue();
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+            }
+        };
+    }
+    onDropdownOpenChange(isOpen) {
+        if (isOpen) {
+            this.searchQuery = '';
+        }
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValueChange(newValue) {
+        var _a, _b;
+        if (newValue == null || newValue === '') {
+            const country = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+            this.selectedCountry = country;
+            this.nationalNumber = '';
+            return;
+        }
+        const parsed = parseE164(newValue);
+        if (parsed) {
+            if (((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) === parsed.dialCode) {
+                this.nationalNumber = parsed.nationalNumber;
+            }
+            else {
+                const defaultForCode = getCountryByCode(this.defaultCountry);
+                const country = (_b = ((defaultForCode === null || defaultForCode === void 0 ? void 0 : defaultForCode.dialCode) === parsed.dialCode ? defaultForCode : undefined)) !== null && _b !== void 0 ? _b : getCountryByDialCode(parsed.dialCode);
+                if (country) {
+                    this.selectedCountry = country;
+                    this.nationalNumber = parsed.nationalNumber;
+                }
+            }
+        }
+        else if (!this.selectedCountry) {
+            this.selectedCountry = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+        else {
+            this.selectedCountry = getCountryByCode(this.defaultCountry) || 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() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : this.defaultCountry) !== null && _c !== void 0 ? _c : 'US';
+    }
+    get effectiveDialCode() {
+        var _a, _b;
+        return (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '+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(Boolean), ...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) => {
+            var _a;
+            return ({
+                icon: getCountryIconName(c.name),
+                label: `${c.name} (${c.dialCode})`,
+                value: c.countryCode,
+                isSelected: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        return (h(Host, { key: '79d8146efc51fb1fba4e595655274beff9e2f09a', class: {
+                'xpl-input-phone': true,
+                'xpl-input-phone--error': !!this.hasErrorState,
+                'xpl-input-phone--open': this.dropdownOpen,
+                'xpl-input-phone--domestic': !this.isInternational,
+            } }, h("div", { key: 'f617abbc8656f0d9418e3bb87f0fdcd8b1646138', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '133d07a3d70e8c9e3c3a6690ae2296f176a409f7', 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 }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '20928aee771232962454e469210a31718922286c', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '22078ac403d3965ba72ee9164520778f3f65cc56', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '29cab6a655c36fd5add277b6d3c0f06c498a742d', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'e83457a14cd689f43082afb611c7641f1353da36', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'ee747daab159986e319599ec6705c8f5edc78c3e', ref: (el) => {
+                this.inputEl = el;
+            }, 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 ? '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: 'ddb1bb6cf9ab3fb4bc3295db64fc986fe5dbf69b', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'c0f3201d0b34f9cbe5af9247540199db0c184514', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '8d4e50ee17d880272eaccf08cf8c84fc4400c36d', ref: (el) => {
+                this.dropdownRef = el;
+            }, 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: '5808ecb917ee94ba31c8ab106152d2d61feae74a', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '76a2477f0e039e390dd26a0c34cdab758d3c10d6', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+                var _a;
+                this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
+            } }, h("xpl-icon", { key: '0a6b49b3a0df0769fb5dfa59f97c40adeaee8dd1', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+    }
+    static get is() { return "xpl-input-phone"; }
+    static get properties() {
+        return {
+            "defaultCountry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. \"US\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-country",
+                "defaultValue": "'US'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `inputId` is used to associate the input with a label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "isInternational": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Enables international mode with a country selector and dial code prefix.\nWhen false, the input is locked to `defaultCountry` with no country picker\nand no dial code shown in the display value. Emitted value is still E.164."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-international",
+                "defaultValue": "true"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text that appears when the field has no value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "preferredCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Country codes to show at the top of the country list, e.g. [\"US\", \"CA\", \"GB\"]."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is editable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Including a `value` will pre-populate the input (E.164 format, e.g. +14155551234)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dropdownOpen": {},
+            "hasErrorState": {},
+            "nationalNumber": {},
+            "searchQuery": {},
+            "selectedCountry": {},
+            "triggerId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hasErrorStateChanged",
+                "name": "hasErrorStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the hasErrorState state changes."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that emits the current value of the input (E.164 format)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dropdownOpen",
+                "methodName": "onDropdownOpenChange"
+            }, {
+                "propName": "hasErrorState",
+                "methodName": "onHasErrorStateChanged"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}