@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -0,0 +1,930 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Build, Fragment, h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import countries, { primaryCountriesForSharedCountryCodes } from "../../data/countries";
+import { createID } from "../../utils/create-id";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
+export class DuetPhoneInput {
+    constructor() {
+        this.countriesToList = Object.values(countries).filter(country => !!country.telephoneCountryCode);
+        this.countryFlagCDNUrl = "https://cdn.duetds.com/api/assets/country-flags/";
+        this.inputId = createID("DuetInput");
+        this.buttonAriaLabel = {
+            en: "Choose country code",
+            fi: "Valitse maatunnus",
+            sv: "Välj landskod",
+        };
+        this.language = getLanguage();
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Makes the phone input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Defaults for Label
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.labelDefaults = {
+            fi: "Puhelinnumero",
+            en: "Phone number",
+            sv: "Telefonnummer",
+        };
+        /**
+         * Label for the number input.
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
+         * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
+         */
+        this.pendingValue = undefined;
+        /**
+         * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
+         * @default ["FI", "SE"]
+         */
+        this.listFirst = ["FI", "SE"];
+        this.setListFirstCountries = () => {
+            const listFirstCodes = (typeof this.listFirst === "string" ? this.listFirst.split(",") : this.listFirst).map(c => c.trim().toUpperCase());
+            const listFirstCountries = Object.values(countries).filter(c => listFirstCodes.includes(c.isoCode));
+            const listRestCountries = this.countriesToList.filter(c => !listFirstCodes.includes(c.isoCode));
+            listRestCountries.sort((a, b) => (a[this.language] > b[this.language] ? 1 : -1));
+            this.countriesToList = [...listFirstCountries, ...listRestCountries];
+        };
+        this.handleFocus = () => {
+            // check value and country code
+        };
+        this.handleChange = () => {
+            //console.log(ev)
+        };
+        this.handleBlur = () => {
+            //console.log(ev)
+        };
+        this.handleInput = () => {
+            var _a, _b, _c;
+            const currentValue = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim();
+            const currentCountryCode = (this.currentCountry !== "error" && ((_c = this.currentCountry) === null || _c === void 0 ? void 0 : _c.telephoneCountryCode)) || "";
+            const inputCountryCode = this.findCountryCode(currentValue) || "";
+            if (!currentValue) {
+                this.currentCountry = undefined;
+                return;
+            }
+            if (currentCountryCode === inputCountryCode) {
+                return;
+            }
+            if (inputCountryCode) {
+                this.currentCountry = this.findCountryForCode(inputCountryCode);
+                return;
+            }
+            // we had country, but no longer have, we are in error state
+            if (currentCountryCode !== "error") {
+                this.currentCountry = "error";
+            }
+            // we don't have new country, and did not have old country, so old country is "error" - leave it
+            return;
+        };
+        this.handleCountryCodeSelectorOpen = () => {
+            this.countryCodePopup.controller = this.countryCodeButton;
+            this.countryCodePopup.show();
+        };
+        this.handleCountryCodeSelectorSelect = (ev) => {
+            const item = ev.target.closest("duet-popup-menu-item");
+            const country = countries[item.value];
+            this.currentCountry = country;
+            this.countryCodePopup.hide();
+            this.setInputCountryCode();
+        };
+    }
+    /**
+     * The phone input itself contains a comprehensive list of countries and their telephone country codes and it is
+     * advisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g.
+     * if we have established that the person giving their details has a Nordic phone number, then we can give a narrowed
+     * down list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or
+     * Bhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys:
+     * en, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of
+     * either two.
+     */
+    get countries() {
+        return this.countriesToList;
+    }
+    set countries(countriesProp) {
+        let arr = countriesProp;
+        let error = "";
+        const isValidCountryObject = (obj) => {
+            const requiredKeys = ["en", "fi", "sv", "isoCode", "telephoneCountryCode"];
+            return (requiredKeys.every(key => Object.keys(obj).includes(key)) &&
+                /^[A-Z]{2}$/.test(obj["isoCode"]) &&
+                /^[1-9][0-9]{0,2}$/.test(obj["telephoneCountryCode"]));
+        };
+        if (typeof countriesProp === "string") {
+            arr = JSON.parse(countriesProp);
+        }
+        if (Array.isArray(arr)) {
+            if (arr.every(a => typeof a === "string")) {
+                this.countriesToList = Object.values(countries).filter(c => arr.includes(c.isoCode) && !!c.telephoneCountryCode);
+            }
+            else if (arr.every(a => isValidCountryObject(a))) {
+                this.countriesToList = arr;
+            }
+            else {
+                error = "Invalid array provided for countries in Phone Input";
+            }
+        }
+        else {
+            error = "Country list for Phone Input must be an array";
+        }
+        if (error) {
+            console.error(error);
+            this.countriesToList = Object.values(countries).filter(country => !!country.telephoneCountryCode);
+        }
+        this.setListFirstCountries();
+    }
+    /**
+     * Value of the input.
+     */
+    get value() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, "")) !== null && _c !== void 0 ? _c : "";
+    }
+    set value(val) {
+        if (!this.duetInputElement) {
+            this.pendingValue = val;
+        }
+        else {
+            this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
+            this.handleInput();
+        }
+    }
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity() {
+        var _a;
+        return (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.validity;
+    }
+    /**t
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
+        this.setListFirstCountries();
+    }
+    componentDidLoad() {
+        if (this.pendingValue) {
+            this.duetInputElement.value = this.pendingValue;
+        }
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, { prop: "label", defaults: "labelDefaults" });
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+    }
+    /**
+     * Sets focus on the contained input element, use this instead of the native `input.focus()`.
+     */
+    async setFocus(options) {
+        var _a;
+        (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    setInputCountryCode() {
+        if (this.currentCountry === "error") {
+            return;
+        }
+        const newCode = `+${this.currentCountry.telephoneCountryCode} `;
+        const prevValue = this.duetInputElement.value;
+        if (!(prevValue === null || prevValue === void 0 ? void 0 : prevValue.trim().startsWith("+"))) {
+            this.duetInputElement.value = `${newCode}${(prevValue === null || prevValue === void 0 ? void 0 : prevValue.trimStart()) || ""}`;
+            return;
+        }
+        const oldCode = this.findCountryCode(prevValue);
+        if (oldCode) {
+            this.duetInputElement.value = prevValue.replace(`+${oldCode}`, newCode).replace("  ", " ");
+            return;
+        }
+        this.duetInputElement.value = prevValue.replace("+", newCode);
+    }
+    findCountryCode(value) {
+        const normalizedValue = (value === null || value === void 0 ? void 0 : value.trim()) || "";
+        if (!normalizedValue.startsWith("+")) {
+            return undefined;
+        }
+        const found = Object.values(countries).find(country => normalizedValue.startsWith(`+${country.telephoneCountryCode}`));
+        return found === null || found === void 0 ? void 0 : found.telephoneCountryCode;
+    }
+    findCountryForCode(code) {
+        const primaryCountryISO = primaryCountriesForSharedCountryCodes[code] || "";
+        return primaryCountryISO
+            ? countries[primaryCountryISO]
+            : Object.values(countries).find(country => country.telephoneCountryCode === code);
+    }
+    renderFlag(isoCode, inButton = false) {
+        const flagImgStyle = {
+            height: inButton ? "34px" : "24px",
+            width: inButton ? "27px" : "24px",
+            "margin-right": inButton ? "0" : "10px",
+            "object-fit": "contain",
+            "object-position": "center",
+            filter: "drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 6px rgba(0, 41, 77, 0.1))",
+        };
+        return (h("img", { src: `${this.countryFlagCDNUrl}${isoCode}.svg`, "aria-hidden": "true", style: flagImgStyle, loading: "lazy" }));
+    }
+    getFlagForButton() {
+        if (!this.currentCountry || this.currentCountry === "error") {
+            return h("duet-icon", { name: !this.currentCountry ? "form-country" : "messaging-alert", margin: "none" });
+        }
+        return this.renderFlag(this.currentCountry.isoCode, true);
+    }
+    render() {
+        if (Build.isServer) {
+            return;
+        }
+        const lastListFirstCode = (typeof this.listFirst === "string" ? this.listFirst.split(",") : this.listFirst)
+            .map(c => c.trim().toUpperCase())
+            .pop();
+        const identifier = this.identifier || this.inputId;
+        return (h(Host, { class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-expand": this.expand,
+                "duet-m-0": this.margin === "none",
+            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
+    }
+    static get is() { return "duet-phone-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-phone-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "attribute": "margin",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "expand": {
+                "type": "boolean",
+                "attribute": "expand",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the input to fill 100% of the container width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "attribute": "identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "attribute": "accessible-details",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "attribute": "accessible-labelled-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String of id's that indicate alternative labels elements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "attribute": "accessible-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "attribute": "accessible-described-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the phone input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set whether the input is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "countries": {
+                "type": "string",
+                "attribute": "countries",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[] | Country[]",
+                    "resolved": "Country[] | string | string[]",
+                    "references": {
+                        "Country": {
+                            "location": "import",
+                            "path": "../../data/countries",
+                            "id": "src/data/countries.ts::Country"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The phone input itself contains a comprehensive list of countries and their telephone country codes and it is\nadvisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g.\nif we have established that the person giving their details has a Nordic phone number, then we can give a narrowed\ndown list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or\nBhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys:\nen, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of\neither two."
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "defaultValue": "Object.values(countries).filter(country => !!country.telephoneCountryCode)"
+            },
+            "labelDefaults": {
+                "type": "string",
+                "attribute": "label-default",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
+                        }],
+                    "text": "Defaults for Label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Puhelinnumero\",\n    en: \"Phone number\",\n    sv: \"Telefonnummer\",\n  }"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
+                        }],
+                    "text": "Label for the number input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "attribute": "label-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "caption": {
+                "type": "string",
+                "attribute": "caption",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption (underneath label) that can be set as a way of adding extra information"
+                },
+                "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": "Name of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the input in error state along with an error message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip to display next to the label of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input."
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false
+            },
+            "validity": {
+                "type": "unknown",
+                "attribute": "validity",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is a proxy for the enclosed native inputs validity"
+                },
+                "getter": true,
+                "setter": false
+            },
+            "listFirst": {
+                "type": "string",
+                "attribute": "list-first",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "[\"FI\", \"SE\"]"
+                        }],
+                    "text": "Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[\"FI\", \"SE\"]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "currentCountry": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "DuetPhoneInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-phone-input\"; value: string; countryCode?: string; }",
+                    "references": {
+                        "DuetPhoneInputEvent": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetInput",
+                "name": "duetInput",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input has ocurred."
+                },
+                "complexType": {
+                    "original": "DuetPhoneInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-phone-input\"; value: string; countryCode?: string; }",
+                    "references": {
+                        "DuetPhoneInputEvent": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetBlur",
+                "name": "duetBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "DuetPhoneInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-phone-input\"; value: string; countryCode?: string; }",
+                    "references": {
+                        "DuetPhoneInputEvent": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetFocus",
+                "name": "duetFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "DuetPhoneInputEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-phone-input\"; value: string; countryCode?: string; }",
+                    "references": {
+                        "DuetPhoneInputEvent": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the contained input element, use this instead of the native `input.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}