@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,893 @@
+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.invalidPhoneNumberMessage;
+                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, _b;
+        return this.validityState && this.validityState !== 'valid' && (!!((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = this.validityMessage) === null || _b === void 0 ? void 0 : _b.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: 'e5170613c08f3927d2a65cb7649cd29d27954b99' }, h("div", { key: '42e8954e2140be50ea42290779af01522e0e39e7', class: "r-input-phone-number--label-container" }, h("label", { key: '0dbd4ad0d762f97d4a2242f1dc95ba8cd9039ce0', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'ec76421b8dad5b1ed58cb0302d7c8d32fed66735' }, labelAttr), label)), h("slot", { key: 'c9e8a6fb83822826f5a1f62cedb06169715dac52', name: "popover" })), hint &&
+            h("r-hint", { key: 'c0755d106d3d01f6f6c0ab1d939337d98e014652', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'e32fe35fed92c7a729231164705ef6437060775e', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'cc2d797e9f9c5b5a21d6e8a7a7d6c7edb2d2b88a' }), h("r-input", { key: 'c3402afa0f6f30afb61b81c947272368dfabbbcf', 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: 'cd814c1b35708f56a911b4d93e907f9a2fac0f1c', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '211661682d51d22ffe93a6e993e03a3c89cc76e2', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : (this.customErrorMessage || 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
+            },
+            "invalidPhoneNumberMessage": {
+                "type": "string",
+                "attribute": "invalid-phone-number-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message displayed when phone number is not valid."
+                },
+                "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"
+            }];
+    }
+}