import { Host, h } from "@stencil/core";
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/button",
    "components/icon",
    "utils/typography"
];
export class GxIdeEmptyState {
    constructor() {
        this.isAnimated = false;
        this.stateDescription = undefined;
        this.stateIconSrc = undefined;
        this.stateTitle = undefined;
    }
    render() {
        return (h(Host, { class: { animate: this.isAnimated } }, h("ch-theme", { model: CSS_BUNDLES }), h("article", { class: "main-container" }, this.stateIconSrc && (h("span", { class: "main-container__icon-wrapper" }, h("ch-image", { src: this.stateIconSrc, class: "icon-m" }))), h("div", { class: "main-container__content" }, this.stateTitle && (h("h2", { class: "body-regular-m" }, this.stateTitle)), this.stateDescription && (h("p", { class: "body-regular-s description" }, this.stateDescription))), h("slot", null))));
    }
    static get is() { return "gx-ide-empty-state"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["gx-ide-empty-state.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["gx-ide-empty-state.css"]
        };
    }
    static get properties() {
        return {
            "isAnimated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Includes a subtle entry animation"
                },
                "attribute": "is-animated",
                "reflect": false,
                "defaultValue": "false"
            },
            "stateDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The state description"
                },
                "attribute": "state-description",
                "reflect": false
            },
            "stateIconSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The state icon"
                },
                "attribute": "state-icon-src",
                "reflect": false
            },
            "stateTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The state title"
                },
                "attribute": "state-title",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=gx-ide-empty-state.js.map
