import { Fragment, Host, h } from "@stencil/core";
import { Images } from "../../assets/images/index.js";
export class CpslHero {
    constructor() {
        this.height = undefined;
        this.hideFadeOut = undefined;
        this.variant = 'connection';
        this.title = undefined;
        this.subtitle = undefined;
        this.withDefaultTheme = undefined;
    }
    render() {
        var _a;
        return (h(Host, { key: '0f43804725a20f7b26328249edbc8c8e466e61c3', class: {
                // VARIANTS
                connection: this.variant === 'connection',
                pending: this.variant === 'pending' || this.variant === 'customContent',
                approved: this.variant === 'approved',
                add: this.variant === 'add',
                failed: this.variant === 'failed',
                externalWalletConnection: this.variant === 'externalWalletConnection',
            } }, h("div", { key: '7ff260b7fa83024f5f473f1488d2d129cfaba6ba', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: 'fef56a7132d376cc21dc151b5aef05d462f79098', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: 'f2537306c466e77e6c044ec988f12157611ccdba', class: "ring ring3" }), h("div", { key: '02d4ea64b5f0a359279534da8cbbc71d892c7c4b', class: "ring ring2" }), h("div", { key: 'd5785d9cea769365b4d6fd4d6aca0041ff340e4e', class: "ring ring1" }), h("div", { key: '5f1ecc0b9f2daddce44c0879eba58342f914bd52', class: "ring ring0" }), h("div", { key: '73869ae81871c12c46cc9e36353bf26b62e6db49', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: 'e550ac0bd65a38d443fa11a1d54ac2c6f72706e3' }, h("img", { key: '9ec51a9adca669f8a7ddb3f6c08f25eb5ffa15b1', class: "connectionImage", src: Images.heroDefault }), h("div", { key: 'a28d1d2782c5b779e1cabd3c186110ed5c6e78e1', class: "connectDiagramContainer" }, h("slot", { key: '6aa0a2d54f8d3b26fc27ef4c65dd8c3bfad38e81', name: "connectionLeft" }), h("slot", { key: '23f377aa071e196c25ddef031b57d00161901e02', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '83ad71da3389c06c2eb189a2a23deb9b34656bdd', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '764ce09b8e297b9b5ff4a8f4352ab9e972d8a600' }, !this.withDefaultTheme && h("img", { key: '8cb1a0eb314cfed91a8494dd9ddd2f6b62a62ed1', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'e58d74c4368b774583a665c582cb0f785771eda7', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: 'd572bc623cbdaa16fa166cdb886d168c208f48cb' }, h("cpsl-icon", { key: 'd3a890b7022c1c70d423e32a4450cbc558f070d7', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '45bd42ce47c082a137f4139626e308c3e507af6f', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '6a8f0b2d2da82f78360a3da00409e1081da9b2dd' }, h("cpsl-icon", { key: '4d1e2ef2ce1ce98060da43de7b8e8a4e0ce79444', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '8083965b97a8588a4ec559f9a9a141b453c95d09', class: "connectDiagramContainer" }, h("slot", { key: 'fe069b38214ae56c2153792e1d631537d317f2ae', name: "connectionLeft" }), h("slot", { key: 'c67db85969032ddfc059c6be9d6fcaa40b765f49', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '68117dc4a67a80f3e25ec0b76a0fdbe60bd9fbd2', class: "customImageContainer" }, h("slot", { key: '6d135752545becd4207091d393b0fd811439eff3', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '6e2066f90038a297e77bb57b446ecfb82bd2d38b' }, h("div", { key: 'e916258f80da97a6544f88ca710b02b50f848cd7', class: "fadeOut" }), h("div", { key: 'f5f2bbe26653d030dbbdace587937f5e20d204c4', class: "cover" }))))), h("cpsl-text", { key: '759de2b27dd9a0c5171df86564e961da6e3d4ea4', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: '36d2fb45d985206a128b44346bc535b564460a01', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
    }
    static get is() { return "cpsl-hero"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-hero.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-hero.css"]
        };
    }
    static get properties() {
        return {
            "height": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The height of the container.\nDefault is: 180."
                },
                "attribute": "height",
                "reflect": false
            },
            "hideFadeOut": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Hides the fade out components\nDefault is: `false`."
                },
                "attribute": "hide-fade-out",
                "reflect": false
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed'",
                    "resolved": "\"add\" | \"approved\" | \"connection\" | \"customContent\" | \"externalWalletConnection\" | \"failed\" | \"pending\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the button.\nOptions are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\nDefault is: `\"connection\"`."
                },
                "attribute": "variant",
                "reflect": true,
                "defaultValue": "'connection'"
            },
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "title",
                "reflect": true
            },
            "subtitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "subtitle",
                "reflect": true
            },
            "withDefaultTheme": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether to use the Para custom theming or use the provided theme\nDefault is: `false`."
                },
                "attribute": "with-default-theme",
                "reflect": false
            }
        };
    }
}
//# sourceMappingURL=cpsl-hero.js.map
