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: '21f06bee97c15394204e51345265840c0bb57ded', 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: 'cbd8e3439b0917cf5b45d79056211cb8fe43a587', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '419c8fdf5558e6f196a46dc6022daf3ad6050251', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '419820dbeb1d174aa8debc37771611179475eb40', class: "ring ring3" }), h("div", { key: 'c910e05f614e93c52bd7443cc292dfcd9efb53e6', class: "ring ring2" }), h("div", { key: 'ebc6fe78bfdf8cbbcef6a72c5d1b0da2e90b7bc3', class: "ring ring1" }), h("div", { key: '19f2098025fe8ca8dc9ae5e9a1b8b2df3c2b2937', class: "ring ring0" }), h("div", { key: 'd4c086b614baa607cf12bd33a3243590fd518ae3', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: 'e01ed456653b8b81789f7d02d821c5180dc2f297' }, h("img", { key: '68f9d50c4776ab841478532d1a1510e4ac4db66c', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '406a7afddbebb879e2082e8d7314dc3f68b6b1f1', class: "connectDiagramContainer" }, h("slot", { key: 'c29cc57f7872e5458db148ec9ce3e0b1bdc5727e', name: "connectionLeft" }), h("slot", { key: '643a3601a1dc0c394fb2717a3c23ec2315c53b43', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '013cac7f7c99588a16622f3027562593d708109f', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '370cc25aeb469aac547fa7c11c426e052e669fb1' }, !this.withDefaultTheme && h("img", { key: '1431b42645379d3f331d146f496968cadd1f9761', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'c0dd8c73fb4dcdc1a6c9f42802c71cd5bd0e211c', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '2197f3804a5af7d954ed40ea38afcc120606ad6d' }, h("cpsl-icon", { key: '3b36c38cb5bd8ce1817ca89de29cbe1b9645ac54', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '905354cdb7459375048dec7c9713bb14481e8888', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '450bddc3c57c2b0648abb289d821338f470f2337' }, h("cpsl-icon", { key: '485d9f1ea3b38f73a55e1c19d2d5d196ca57bafb', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: 'a753a251cf9eb8f70597677be409aa2ebaaa592b', class: "connectDiagramContainer" }, h("slot", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', name: "connectionLeft" }), h("slot", { key: '0fe2e6febecce576da0c6a45ece6f3fb4c1fd815', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '66a332f8b5c4f0aec4ab05b7bf6c5acbc25cb983', class: "customImageContainer" }, h("slot", { key: '08e67afa1a33d425eee83e7c2a4e21c94164a0ed', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '547cf7a394cf4b4cc94d475336fdd97926aeaed9' }, h("div", { key: '70762d3a1133ea003117eaee8f4e38d5ce084860', class: "fadeOut" }), h("div", { key: '8b80e6988fc77cec6a0b55d26678a22ba20f566b', class: "cover" }))))), h("cpsl-text", { key: '6ebe7f8fa96fa60a3a8f3ed2fabaada0f7b96aeb', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: 'f80a52a7171f8390e3f98be1f4c37ec917110667', 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
