@xplortech/apollo-core 2.5.0 → 2.6.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: 'e966930ecc1ce026b03daf50902ee783d469af03', 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: 'd594d5345f30bd1165662930abee8b4214b2640d', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '64842282265b03cce24e5d80386ea3f56c36b5ad', 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: '00b0b9e477d285cc3e1c61becfbc056511d99ea2', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '9cc394beb1573e00e0eca641bfa8590a5837ff48', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: 'ade974ac878f7c7bc3aa07f613a3005283d86819', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'f4907b6f5919184dad42bac3a1071b2bbfe71a06', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '89dce440dba56953574a05eda46862b4f24f84f8', 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: '21e63c5dad2d73c8969e71c10cae9c507da8574a', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'ef1044fd8cc939db7281a8e68e72c54effb55101', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '0de330a03e99bdc73af073ad5b20a7b817192307', 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: '6055decf8f631611786fc8720b17cf84341ef316', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '6c53dbde79069dc000214f22d29b17e568fde19f', 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: 'cb57543146d6f874849d518aea4c01f670e4afa4', 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"
+            }];
+    }
+}

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { format12Hour, normalizeTime, generateTimeOptions } from "./time-utils";
-export class XplInputTime {
+export class InputTime {
     constructor() {
         this.max = '23:59';
         this.min = '00:00';
@@ -105,11 +105,11 @@ export class XplInputTime {
         }));
     }
     render() {
-        return (h(Host, { key: '99b06c895d608dec6226f79f21ceda92225428b7', class: {
+        return (h(Host, { key: '2dfd50560c047646807e49c2263454286b607a35', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: '8cdf996f46d969c243d246fdfe888c22c9c4999b', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '5213fcd68da96d726d8b046277233afd6b5b20e8', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, h("xpl-input", { key: '5ebb2d5031efae40beae3ac0cf2a40bed5b96ae5', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '313ee3020ddf2710e82756f1bc0e260b8959ef9e', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }