'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-81cd6930.js');
require('./constants-4d389abc.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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() {
        !helpers.isSlotUsed(this.el, "heading") &&
            helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Empty State");
        this.hostMutationObserver = new MutationObserver((mutationList) => helpers.renderDynamicChildSlots(mutationList, ["image", "actions"], this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    render() {
        const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
        return (index.h(index.Host, { key: '60295d4ae9099c9e9adf17a6d1b1cb94a061ce1f', class: {
                [`ic-empty-state-${aligned}`]: true,
                [`image-${imageSize}`]: helpers.isSlotUsed(this.el, "image"),
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, helpers.isSlotUsed(this.el, "image") && index.h("slot", { key: 'a0ccf1c16408f306d5a1abc34a8b5540be75b986', name: "image" }), index.h("div", { key: 'd1f6a21c75513a3a2f8fdcba4f0a671013709651' }, index.h("slot", { key: '60cc4c4434d29d12f771e65bba5ff09918c904d3', name: "heading" }, index.h("ic-typography", { key: '6ef2441bed80f38f27b8005c89eeec7de0691587', variant: "h4", class: "empty-state-heading" }, heading)), index.h("slot", { key: 'dae616cdcebd5dacee04547d42b2f77203d5c48a', name: "subheading" }, index.h("ic-typography", { key: '6946d005ecc441b3fee96309fb1c479470c192de', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), index.h("slot", { key: '0ab7b57d4f33e7aad6fca48c8036846e7360aad8', name: "body" }, index.h("ic-typography", { key: 'ea367e9f5b6d353714d8d05576abffecc63bea2d', maxLines: maxLines, class: "empty-state-body" }, body))), helpers.isSlotUsed(this.el, "actions") && (index.h("div", { key: '997a125c580c0dfa6e2191df40745145168ce705', class: "action-area" }, index.h("slot", { key: '34c38c474a502720b659f4b2775869773cfe1f10', name: "actions" })))));
    }
    get el() { return index.getElement(this); }
};
EmptyState.style = IcEmptyStateStyle0;

exports.ic_empty_state = EmptyState;

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