@xplortech/apollo-core 2.4.3 → 2.6.0

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);
+}

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"
+            }];
+    }
+}