import { h } from "@stencil/core";
export class LedgerIntro {
    constructor() {
        this.isAwaiting = false;
    }
    handleLedgerConnectClick(event) {
        event.preventDefault();
        if (this.connect) {
            this.connect.emit(event);
        }
    }
    render() {
        const showError = this.connectScreenData && this.connectScreenData.error;
        const buttonLabel = (() => {
            if (this.isAwaiting) {
                return 'Connecting...';
            }
            if (showError) {
                return 'Retry Connection';
            }
            return 'Connect Ledger';
        })();
        return (h("div", { class: "ledger-intro" }, h("div", { class: "ledger-intro-wrapper" }, h("mvx-ledger-icon", { class: "ledger-intro-icon" }), h("div", { class: "ledger-intro-description" }, "Connect your device ", h("br", null), "and open the MultiversX App"), h("button", { class: { 'ledger-intro-button': true, 'loading': Boolean(this.isAwaiting) }, onClick: this.handleLedgerConnectClick.bind(this) }, h("span", { class: "ledger-intro-button-label" }, buttonLabel), this.isAwaiting && h("mvx-spinner-icon", { class: "ledger-intro-button-spinner" })), showError && h("div", { class: "ledger-intro-error" }, this.connectScreenData.error)), h("a", { href: "https://support.ledger.com/hc/en-us/articles/115005165269-Connection-issues-with-Windows-or-Linux", target: "_blank", rel: "noopener noreferrer", class: "ledger-intro-issues" }, "Having connection issues?")));
    }
    static get is() { return "mvx-ledger-intro"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ledger-intro.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ledger-intro.css"]
        };
    }
    static get properties() {
        return {
            "connectScreenData": {
                "type": "unknown",
                "attribute": "connect-screen-data",
                "mutable": false,
                "complexType": {
                    "original": "IConnectScreenData",
                    "resolved": "IConnectScreenData",
                    "references": {
                        "IConnectScreenData": {
                            "location": "import",
                            "path": "../ledger.types",
                            "id": "src/components/functional/ledger/ledger.types.ts::IConnectScreenData"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "isAwaiting": {
                "type": "boolean",
                "attribute": "is-awaiting",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "connect",
                "name": "connect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=ledger-intro.js.map
