// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Orientation } from '../../../Types/Orientation';
import { Size } from '../../../Types/Size';
import { TextAlignment } from '../../../Types/TextAlignment';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the {@link SuccessStateElement}.
 *
 * @public
 */
export function successStateElementTemplate(e) {
    const getIcon = () => {
        if (e.icon.trim()) {
            return e.icon;
        }
        return Icons.successCircle;
    };
    return html `
        <mosaik-icon part="icon"
            .size="${Size.Giant}"
            .data="${getIcon()}"
            .variant="${Variant.Success}"></mosaik-icon>
        ${when(e.header, () => html `
        <mosaik-text part="header"
            .readonly="${true}"
            .wrap="${true}"
            .alignment="${TextAlignment.Center}"
            .text="${e.header}"></mosaik-text>
        `)}
        ${when(e.content, () => html `
        <mosaik-text part="content"
            .readonly="${true}"
            .wrap="${true}"
            .alignment="${TextAlignment.Center}"
            .text="${e.content}"></mosaik-text>
        `)}
        <slot></slot>
        <mosaik-stack .orientation="${Orientation.Horizontal}"
                      .gap="${'16px'}">
            <slot name="actions"></slot>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=SuccessStateElementTemplate.js.map