import { h, Host } from "@stencil/core";
import { isSlotUsed, onComponentRequiredPropUndefined, renderDynamicChildSlots, } from "../../utils/helpers";
/**
 * @slot image - Content is placed at the top above all other content.
 * @slot actions - Content is placed at the bottom below all other content.
 * @slot heading - Content will be rendered in place of the heading prop.
 * @slot subheading - Content will be rendered in place of the subheading prop.
 * @slot body - Content will be rendered in place of the body prop.
 */
export class EmptyState {
    constructor() {
        this.hostMutationObserver = null;
        /**
         * The alignment of the empty state container.
         */
        this.aligned = "left";
        /**
         * The size of the image or icon used in the image slot.
         */
        this.imageSize = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentDidLoad() {
        !isSlotUsed(this.el, "heading") &&
            onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Empty State");
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, ["image", "actions"], this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    render() {
        const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
        return (h(Host, { key: '60295d4ae9099c9e9adf17a6d1b1cb94a061ce1f', class: {
                [`ic-empty-state-${aligned}`]: true,
                [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'a0ccf1c16408f306d5a1abc34a8b5540be75b986', name: "image" }), h("div", { key: 'd1f6a21c75513a3a2f8fdcba4f0a671013709651' }, h("slot", { key: '60cc4c4434d29d12f771e65bba5ff09918c904d3', name: "heading" }, h("ic-typography", { key: '6ef2441bed80f38f27b8005c89eeec7de0691587', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: 'dae616cdcebd5dacee04547d42b2f77203d5c48a', name: "subheading" }, h("ic-typography", { key: '6946d005ecc441b3fee96309fb1c479470c192de', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '0ab7b57d4f33e7aad6fca48c8036846e7360aad8', name: "body" }, h("ic-typography", { key: 'ea367e9f5b6d353714d8d05576abffecc63bea2d', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '997a125c580c0dfa6e2191df40745145168ce705', class: "action-area" }, h("slot", { key: '34c38c474a502720b659f4b2775869773cfe1f10', name: "actions" })))));
    }
    static get is() { return "ic-empty-state"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-empty-state.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-empty-state.css"]
        };
    }
    static get properties() {
        return {
            "aligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcEmptyStateAlignment",
                    "resolved": "\"center\" | \"left\" | \"right\" | undefined",
                    "references": {
                        "IcEmptyStateAlignment": {
                            "location": "import",
                            "path": "./ic-empty-state.types",
                            "id": "src/components/ic-empty-state/ic-empty-state.types.ts::IcEmptyStateAlignment"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the empty state container."
                },
                "getter": false,
                "setter": false,
                "attribute": "aligned",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "body": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The body text rendered in the empty state container."
                },
                "getter": false,
                "setter": false,
                "attribute": "body",
                "reflect": false
            },
            "maxLines": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of lines of body text to display before truncating."
                },
                "getter": false,
                "setter": false,
                "attribute": "max-lines",
                "reflect": false
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The title rendered in the empty state container."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false
            },
            "imageSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the image or icon used in the image slot."
                },
                "getter": false,
                "setter": false,
                "attribute": "image-size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The subtitle rendered in the empty state container."
                },
                "getter": false,
                "setter": false,
                "attribute": "subheading",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ic-empty-state.js.map
