@duetds/components 9.4.2 → 9.5.0

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

@@ -0,0 +1,777 @@
+/*!
+ * 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.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;
+            const currentValue = (_a = this.duetInputElement.value) === null || _a === void 0 ? void 0 : _a.trim();
+            const currentCountryCode = (this.currentCountry !== "error" && ((_b = this.currentCountry) === null || _b === void 0 ? void 0 : _b.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();
+        };
+        this.language = getLanguage();
+        this.currentCountry = undefined;
+        this.theme = "";
+        this.margin = "auto";
+        this.expand = false;
+        this.identifier = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescription = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.labelDefaults = {
+            fi: "Puhelinnumero",
+            en: "Phone number",
+            sv: "Telefonnummer",
+        };
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        this.labelHidden = false;
+        this.name = undefined;
+        this.error = "";
+        this.tooltip = "";
+        this.listFirst = ["FI", "SE"];
+    }
+    /**
+     * 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;
+        return (_a = this.duetInputElement.value) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "");
+    }
+    set value(val) {
+        this._value = val;
+    }
+    /**t
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
+        this.setListFirstCountries();
+    }
+    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) {
+        this.duetInputElement.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);
+        console.log("Old code", oldCode);
+        if (oldCode) {
+            this.duetInputElement.value = prevValue.replace(`+${oldCode}`, newCode).replace("  ", " ");
+            return;
+        }
+        this.duetInputElement.value = prevValue.replace("+", newCode);
+    }
+    findCountryCode(value) {
+        const normalizedValue = 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-spacer", { size: "x-small" }), h("duet-divider", { margin: "small" }))) : (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, value: this._value, error: this.error, name: this.name, 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, 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",
+                "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,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "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,
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "expand": {
+                "type": "boolean",
+                "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,
+                "attribute": "expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "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,
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "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,
+                "attribute": "accessible-labelled-by",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "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,
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "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,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "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,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "countries": {
+                "type": "string",
+                "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,
+                "attribute": "countries",
+                "reflect": false,
+                "defaultValue": "Object.values(countries).filter(country => !!country.telephoneCountryCode)"
+            },
+            "labelDefaults": {
+                "type": "string",
+                "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,
+                "attribute": "label-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Puhelinnumero\",\n    en: \"Phone number\",\n    sv: \"Telefonnummer\",\n  }"
+            },
+            "label": {
+                "type": "string",
+                "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,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "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,
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "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,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "tooltip": {
+                "type": "string",
+                "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,
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input."
+                },
+                "getter": true,
+                "setter": true,
+                "attribute": "value",
+                "reflect": false
+            },
+            "listFirst": {
+                "type": "string",
+                "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,
+                "attribute": "list-first",
+                "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"; }
+}