// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
// #endregion
/**
 * The template of the `ToastElement`.
 *
 * @public
 */
export function toastElementTemplate(e) {
    return html `
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
        `)}

        <div part="root">
            ${when(e.showProgress && e.timeout > 0, () => html `
            <div part="progressFill"></div>
            `)}
            <div part="body">
                ${when(e.isBusy, () => html `
                <mosaik-progress-ring part="progressRing"
                                      .thickness="${'2px'}"
                                      .radius="${'12px'}"
                                      .variant="${e.variant}"
                                      .isIndeterminate="${true}"></mosaik-progress-ring>
                `)}
                ${when(e.icon, () => html `
                <mosaik-icon part="icon"
                             .variant="${e.variant}"
                             .data="${e.icon}"
                             .size="${ifNonNull(e.iconSize)}"></mosaik-icon>
                `)}
                <div part="text">
                    <mosaik-text part="header"
                                 .text="${e.header}"
                                 ?truncate="${true}"></mosaik-text>
                    <mosaik-text part="content"
                                 .text="${e.content}"
                                 .maxLines="${3}"
                                 ?wrap="${true}"></mosaik-text>
                </div>
                <slot name="actions"></slot>
                ${when(e.closeable, () => html `
                <mosaik-dismiss part="close"
                                .variant="${e.variant}"
                                .appearance="${'plain'}"
                                .size="${'small'}"
                                @click="${() => e.close()}"></mosaik-dismiss>
                `)}
            </div>
        </div>
    `;
}
//# sourceMappingURL=ToastElementTemplate.js.map