import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { i as isSlotUsed, o as onComponentRequiredPropUndefined, f as renderDynamicChildSlots } from './helpers.js';
import { d as defineCustomElement$2 } from './ic-typography2.js';

const icEmptyStateCss = ":host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.ic-empty-state-right),:host(.ic-empty-state-right) .action-area{align-items:flex-end;text-align:right}:host(.ic-empty-state-center),:host(.ic-empty-state-center) .action-area{align-items:center;text-align:center}:host(.image-medium) ::slotted(svg),:host(.image-medium) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}::slotted([slot=\"heading\"]),.empty-state-heading{--ic-typography-color:var(--ic-empty-state-title)}::slotted([slot=\"subheading\"]),.empty-state-subheading{--ic-typography-color:var(--ic-empty-state-subtitle)}::slotted([slot=\"body\"]),.empty-state-body{--ic-typography-color:var(--ic-empty-state-body)}";
const IcEmptyStateStyle0 = icEmptyStateCss;

const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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" })))));
    }
    get el() { return this; }
    static get style() { return IcEmptyStateStyle0; }
}, [1, "ic-empty-state", {
        "aligned": [1],
        "body": [1],
        "maxLines": [2, "max-lines"],
        "heading": [1],
        "imageSize": [1, "image-size"],
        "subheading": [1],
        "theme": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-empty-state", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-empty-state":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, EmptyState);
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcEmptyState = EmptyState;
const defineCustomElement = defineCustomElement$1;

export { IcEmptyState, defineCustomElement };

//# sourceMappingURL=ic-empty-state.js.map