// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
import { Variant } from '../../../Types/Variant';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link 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">
            <mosaik-stack .orientation="${Orientation.Horizontal}"
                          .verticalAlignment="${VerticalAlignment.Center}"
                          .gap="${'16px'}">
                ${when(e.isBusy, () => html `
                <mosaik-progress-ring part="progressRing"
                                      .thickness="${'2px'}"
                                      .radius="${'12px'}"
                                      .variant="${e.variant}"
                                      .isIndeterminate="${true}"></mosaik-progress-ring>
                `)}
                <mosaik-stack orientation="${Orientation.Vertical}">
                    <mosaik-text part="header"
                                 .text="${e.header}"
                                 ?truncate="${true}"></mosaik-text>
                    <mosaik-text part="content"
                                 .text="${e.content}"
                                 .maxLines="${3}"
                                 ?wrap="${true}"></mosaik-text>
                </mosaik-stack>
                <slot name="actions"></slot>
                ${when(e.closeable, () => html `
                <mosaik-button .label="${'Close'}"
                               .appearance="${Appearance.Plain}"
                               .variant="${e.variant}"
                               @click="${() => e.close()}"></mosaik-button>
                `)}
            </mosaik-stack>
            ${when(e.showProgress && e.timeout > 0, () => html `
                <mosaik-progress-bar part="progress"
                                     .orientation="${Orientation.Horizontal}"
                                     .max="${e.timeout}"
                                     .value="${e.timeout - e.intervalTick}"
                                     .variant="${Variant.Primary}"></mosaik-progress-bar>
            `)}
        </div>
    `;
}
//# sourceMappingURL=ToastElementTemplate.js.map