import { h } from "@stencil/core";
/**
 * An "empty state" in user interface design refers to the screen or space displayed, when there is no data
 * or content available to show to the user. This state typically occurs in new accounts, after clearing data,
 * or when no results are returned from a search.
 *
 * @exampleComponent limebb-example-empty-state-basic
 * @exampleComponent limebb-example-empty-state-value-as-markdown
 */
export class EmptyState {
    render() {
        return [
            this.renderIcon(),
            this.renderHeading(),
            this.renderSubheader(),
        ];
    }
    renderHeading() {
        if (!this.heading) {
            return;
        }
        return h("h2", null, this.heading);
    }
    renderSubheader() {
        if (!this.value) {
            return;
        }
        return h("limel-markdown", { value: this.value });
    }
    renderIcon() {
        var _a, _b, _c;
        if (!this.icon) {
            return;
        }
        return (h("limel-icon", { badge: true, name: (_a = this.icon) === null || _a === void 0 ? void 0 : _a.name, style: {
                color: `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.color}`,
                'background-color': `${(_c = this.icon) === null || _c === void 0 ? void 0 : _c.backgroundColor}`,
            } }));
    }
    static get is() { return "limebb-empty-state"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["empty-state.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["empty-state.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text to display in the header"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "heading"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message to further clarify the heading. It receives markdown syntax and renders it as HTML.\nThis allows for more complex formatting. For example, you can use links, lists, and other formatting options."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "icon": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Icon",
                    "resolved": "Icon | undefined",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon to display"
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
