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: '16659f35d2b14d9a5e32fe6c61619fbafdf58f53', class: {
                [`ic-empty-state-${aligned}`]: true,
                [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'ccc8a2daf0041d9dd5e611d3b60c96820271745b', name: "image" }), h("div", { key: 'ab68dff198b63394d890399ec53b9befbb70f222' }, h("slot", { key: 'fe99ebbfe6b9c899d4b1fb5737df268e0bc38bb4', name: "heading" }, h("ic-typography", { key: 'eea6eb657e09159b27935e16864961b95387a3d6', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: 'ca04ac75d72fc5864ed7821bf9d16c8999eac3aa', name: "subheading" }, h("ic-typography", { key: '257a4f73c4fb3577e4c1653607a492b4f4d18470', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: 'f0efda6128d1b5a5f2b280faf23940b0832e3121', name: "body" }, h("ic-typography", { key: '128849e7a458b1ff7b51079eeb9f6967df88cef1', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '22cf30fd1f3636fb3344689c4435b59d4148bb5f', class: "action-area" }, h("slot", { key: 'c4e187603beb9b2291c9e038202ff651d4decfff', 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
