// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Size } from '../../../Types/Size';
import { TextAlignment } from '../../../Types/TextAlignment';
// #endregion
/**
 * The template of the `EmptyStateElement`.
 *
 * @public
 */
export function emptyStateElementTemplate(e) {
    return html `
        <mosaik-icon part="icon"
                     .size="${e.iconSize ?? Size.Giant}"
                     .data="${e.icon.trim() ? e.icon : Icons.glasses}"
                     .variant="${'neutral'}"></mosaik-icon>
        <div part="root">
            <slot name="header">
                ${when(e.header.trim(), () => html `
                <mosaik-text part="header"
                            .readonly="${true}"
                            .wrap="${true}"
                            .alignment="${TextAlignment.Center}"
                            .text="${e.header}"
                            .formatter="${e.formatter}"></mosaik-text>
                `)}
            </slot>
            <slot name="content">
                ${when(e.content.trim(), () => html `
                <mosaik-text part="content"
                            .readonly="${true}"
                            .wrap="${true}"
                            .alignment="${TextAlignment.Center}"
                            .text="${e.content}"
                            .formatter="${e.formatter}"></mosaik-text>
                `)}
            </slot>
            <slot></slot>
        </div>
        <div part="actions" ?hidden="${!e.hasSlotContent('actions')}">
            <slot name="actions"></slot>
        </div>
    `;
}
//# sourceMappingURL=EmptyStateElementTemplate.js.map