@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,874 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { phone } from "phone";
-import { appendControlToFormData } from "../../utils/formData";
-export class InputPhoneNumber {
-    constructor() {
-        /** Specifies a name for an input for submitting within formData object. */
-        this.name = 'phone-number';
-        /** Label for phone input  */
-        this.inputLabel = 'Phone number without country code';
-        /** Label for countryCode code  */
-        this.countryCodeLabel = 'Country code';
-        this.fullPhoneNumber = '';
-        this.phoneNumber = '';
-        this.validityState = '';
-        this.validityMessage = '';
-        this.uniqueId = `r-input-phone-number-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        this.handleOnInput = (event) => {
-            if (this.readonly)
-                return;
-            this.phoneNumber = event.target.value;
-            this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
-            const { host, phoneNumber, countryCode, value } = this;
-            this.rInput.emit({ element: host, value, countryCode, phoneNumber });
-            this.validateFormElement(this.nativeElement);
-        };
-        this.handleInputOnChange = (event) => {
-            if (this.readonly)
-                return;
-            this.phoneNumber = event.target.value;
-            this.handleValueChange();
-        };
-        this.handleValueChange = () => {
-            if (this.readonly)
-                return;
-            this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
-            const { host, phoneNumber, countryCode, value } = this;
-            this.rChange.emit({ element: host, value, countryCode, phoneNumber });
-            this.validateFormElement(this.nativeElement);
-        };
-        this.validateFormElement = (element) => {
-            if (this.readonly)
-                return;
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData();
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.getValidityStateData = () => {
-            var _a, _b;
-            let validityState = '';
-            let validityMessage = '';
-            if (!this.required && !((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.length)) {
-                validityState = 'valid';
-                return { validityState, validityMessage };
-            }
-            if (!((_b = this.phoneNumber) === null || _b === void 0 ? void 0 : _b.length)) {
-                validityState = 'valueMissing';
-                validityMessage = this.valueMissingMessage;
-                return { validityState, validityMessage };
-            }
-            const isPhoneNumberValid = this.countryCode ? this.getPhoneValidationResult(this.phoneNumber, this.countryCode).isValid : false;
-            if (!isPhoneNumberValid) {
-                validityState = 'invalid';
-                validityMessage = this.customErrorMessage;
-                return { validityState, validityMessage };
-            }
-            validityState = 'valid';
-            return { validityState, validityMessage };
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.onResetForm = () => {
-            var _a;
-            if (this.readonly)
-                return;
-            this.validityState = null;
-            this.validityMessage = null;
-            this.phoneNumber = '';
-            this.invalid = this.initial['invalid'];
-            this.valid = !this.invalid;
-            (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.reset();
-            this.updateValues(this.initial['value']);
-            const { host, value } = this;
-            this.rReset.emit({ element: host, value });
-        };
-    }
-    /** Returns the element value. */
-    async getValue() {
-        return this.fullPhoneNumber;
-    }
-    /** Set the element value. */
-    async setValue(value) {
-        this.updateValues(value);
-    }
-    /** Validates an element, displays provided message in case value is invalid. */
-    async setCustomValidity(message) {
-        this.customErrorMessage = message;
-        this.validateFormElement(this.nativeElement);
-    }
-    /**
-     * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the input phone number is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData();
-        return validityState === 'valid';
-    }
-    /** Check validity and reveal validation state. */
-    async reportValidity() {
-        this.validateFormElement(this.nativeElement);
-        return this.validityState === 'valid';
-    }
-    /** Reset phone number input to its initial state */
-    async reset() {
-        this.onResetForm();
-    }
-    watchValueChange(value) {
-        this.updateValues(value);
-        this.validateFormElement(this.nativeElement);
-    }
-    handleDisabledChange() {
-        this.setCountryCodeElementAttributes({
-            'disabled': `${!!this.disabled}`
-        });
-    }
-    handleRequiredChange() {
-        this.setCountryCodeElementAttributes({
-            'required': `${!!this.required}`
-        });
-    }
-    handleReadonlyChange() {
-        this.setCountryCodeElementAttributes({
-            'readonly': `${!!this.readonly}`
-        });
-    }
-    handleLabelChange() {
-        this.setCountryCodeElementAttributes({
-            'label': this.countryCodeLabel
-        });
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    get countryCodeElement() {
-        return this.host.querySelector('r-select');
-    }
-    get countryCode() {
-        return this.host.querySelector('r-select').value || '';
-    }
-    get ariaDescribedBy() {
-        const describedBy = `${this.uniqueId}-message`;
-        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
-    }
-    get hasError() {
-        var _a;
-        return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && !!((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    get hasMessage() {
-        return this.hasError || this.hasValidationError;
-    }
-    get errorMessage() {
-        return this.hasError && this.error || this.hasValidationError && this.validityMessage;
-    }
-    /**
-     * Determine whether this element should be ignored
-     * during Constraint Validation API validation.
-     * */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    updateValues(value) {
-        var _a, _b;
-        this.fullPhoneNumber = value || '';
-        if (!value) {
-            (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.reset();
-            this.phoneNumber = '';
-            return;
-        }
-        if (!this.getPhoneValidationResult(value).isValid) {
-            console.error('Provided phone number is not valid');
-            return;
-        }
-        const countryCode = this.getPhoneValidationResult(value).countryCode;
-        this.phoneNumber = value.replace(countryCode, '');
-        (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setValue(countryCode);
-    }
-    setCountryCodeElementAttributes(attributes) {
-        Object.entries(attributes || {}).forEach(([key, val]) => {
-            var _a, _b;
-            if (val === false || val === null || val === undefined) {
-                (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.removeAttribute(key);
-            }
-            else {
-                (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute(key, String(val));
-            }
-        });
-    }
-    getPhoneValidationResult(phoneNumber, countryCode = '') {
-        return phone(countryCode + phoneNumber, { validateMobilePrefix: false });
-    }
-    connectEventListeners() {
-        var _a, _b, _c, _d;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('rChange', this.handleValueChange);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('formdata', this.contributeToFormData);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_d = this.parentFormEl) === null || _d === void 0 ? void 0 : _d.addEventListener('reset', this.onResetForm);
-    }
-    disconnectEventListeners() {
-        var _a, _b, _c, _d;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('rChange', this.handleValueChange);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('formdata', this.contributeToFormData);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('submit', this.onSubmitForm);
-        (_d = this.parentFormEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('reset', this.onResetForm);
-    }
-    componentWillLoad() {
-        this.initial['value'] = this.value;
-        this.initial['invalid'] = this.invalid;
-        this.updateValues(this.value);
-        const staticAttributes = {
-            'show-leading-icon': 'true',
-            'leading-icon': 'globe',
-            'placeholder': '+00',
-            'internal': 'true'
-        };
-        const dynamicAttributes = {
-            'disabled': `${!!this.disabled}`,
-            'required': `${!!this.required}`,
-            'readonly': `${!!this.readonly}`,
-            'label': this.countryCodeLabel
-        };
-        this.setCountryCodeElementAttributes(Object.assign(Object.assign({}, staticAttributes), dynamicAttributes));
-    }
-    componentDidLoad() {
-        this.connectEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectEventListeners();
-    }
-    render() {
-        const { label, fieldIndicator, hint, name, form, inputLabel, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
-        const labelAttr = {
-            fieldIndicator
-        };
-        const inputAttrs = {
-            id: uniqueId,
-            form,
-            name,
-            novalidate,
-            required,
-            disabled,
-            'aria-describedby': this.ariaDescribedBy
-        };
-        return (h(Host, { key: '609e5cd2c326c30866617a238f7c92bb8b2d5e8d' }, h("div", { key: '44eaa8f48fddbdc9dfe43700b4b68650345e1352', class: "r-input-phone-number--label-container" }, h("label", { key: 'fd55a14c4491ed6cad0885aaa5add8d827ae4215', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'bdeb1325cefaf4ac82628e497133c3eabfa685d3' }, labelAttr), label)), h("slot", { key: '38a4fd3c1f5ed0748ef9df0e2f6cd93ff8d1d39f', name: "popover" })), hint &&
-            h("r-hint", { key: '9fddd5b8053220e2339fe073cf1d897d0c34c23e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'c493d4fe2f75cfa25fc404e985800175dfc75603', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'ee98939143432df877ac2b7c2bbb7d87fd01f0a7' }), h("r-input", { key: '552c038f9225dd60b3b1957aaa1ceb3587c5f64d', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: '11edb8cd2f8d6459ffbdef96263016ee25818fc0', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '809dbf93afc32271fd6d4930c0f547d8464b4db0', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
-    }
-    static get is() { return "r-input-phone-number"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["input-phone-number.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["input-phone-number.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Phone number value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "form": {
-                "type": "string",
-                "attribute": "form",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "novalidate": {
-                "type": "boolean",
-                "attribute": "novalidate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if element must be ignored during validation of the form elements"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label for the phone number."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "fieldIndicator": {
-                "type": "string",
-                "attribute": "field-indicator",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "An optional field indicator for the label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "hint": {
-                "type": "string",
-                "attribute": "hint",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional hint giving additional context to the user"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies a name for an input for submitting within formData object."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'phone-number'"
-            },
-            "inputLabel": {
-                "type": "string",
-                "attribute": "input-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for phone input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'Phone number without country code'"
-            },
-            "countryCodeLabel": {
-                "type": "string",
-                "attribute": "country-code-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for countryCode code"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'Country code'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Prevents user interaction and applies disabled style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "readonly": {
-                "type": "boolean",
-                "attribute": "readonly",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies that phone number value is required"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual indication of valid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Validity indicator, serving to change UI of the component"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "error": {
-                "type": "string",
-                "attribute": "error",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom validation error message"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "customErrorMessage": {
-                "type": "string",
-                "attribute": "custom-error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "valueMissingMessage": {
-                "type": "string",
-                "attribute": "value-missing-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "attribute": "full-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines if the component suppose to occupy 100% width"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            }
-        };
-    }
-    static get states() {
-        return {
-            "fullPhoneNumber": {},
-            "phoneNumber": {},
-            "validityState": {},
-            "validityMessage": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "rInput",
-                "name": "rInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rInput' event when value of the component is changing"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputPhoneNumberElement,\n    value: string,\n    phoneNumber: string,\n    countryCode: string\n  }",
-                    "resolved": "{ element: HTMLRInputPhoneNumberElement; value: string; phoneNumber: string; countryCode: string; }",
-                    "references": {
-                        "HTMLRInputPhoneNumberElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputPhoneNumberElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rChange",
-                "name": "rChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rChange' event when value of the component has been changed"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputPhoneNumberElement,\n    value: string,\n    countryCode: string,\n    phoneNumber: string\n  }",
-                    "resolved": "{ element: HTMLRInputPhoneNumberElement; value: string; countryCode: string; phoneNumber: string; }",
-                    "references": {
-                        "HTMLRInputPhoneNumberElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputPhoneNumberElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rValidate",
-                "name": "rValidate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits event after each validation"
-                },
-                "complexType": {
-                    "original": "{\n    state: string,\n    message: string\n  }",
-                    "resolved": "{ state: string; message: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "rReset",
-                "name": "rReset",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits 'rReset' event when form containing the component was reset"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputPhoneNumberElement,\n    value: string\n  }",
-                    "resolved": "{ element: HTMLRInputPhoneNumberElement; value: string; }",
-                    "references": {
-                        "HTMLRInputPhoneNumberElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputPhoneNumberElement"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Returns the element value.",
-                    "tags": []
-                }
-            },
-            "setValue": {
-                "complexType": {
-                    "signature": "(value: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set the element value.",
-                    "tags": []
-                }
-            },
-            "setCustomValidity": {
-                "complexType": {
-                    "signature": "(message: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "message",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Validates an element, displays provided message in case value is invalid.",
-                    "tags": []
-                }
-            },
-            "checkValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validates the input phone number without triggering UI and returns a boolean indicating its validity.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the input phone number is valid."
-                        }]
-                }
-            },
-            "reportValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Check validity and reveal validation state.",
-                    "tags": []
-                }
-            },
-            "reset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Reset phone number input to its initial state",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "watchValueChange"
-            }, {
-                "propName": "disabled",
-                "methodName": "handleDisabledChange"
-            }, {
-                "propName": "required",
-                "methodName": "handleRequiredChange"
-            }, {
-                "propName": "readonly",
-                "methodName": "handleReadonlyChange"
-            }, {
-                "propName": "label",
-                "methodName": "handleLabelChange"
-            }];
-    }
-}