// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Size } from '../../../Types/Size';
import { TextAlignment } from '../../../Types/TextAlignment';
// #endregion
/**
 * The template of the `ChatMarkerElement`.
 *
 * @public
 */
export function chatMarkerElementTemplate(e) {
    return html `
        ${when(e.isSticky, () => html `
        <mosaik-sticky>
            <div part="root">
                ${when(e.icon, () => html `
                <mosaik-icon part="icon"
                             .dir="${e.dir}"
                             .size="${Size.Tiny}"
                             .data="${e.icon}"></mosaik-icon>
                `)}
                <slot>
                    <mosaik-text part="text"
                                 .dir="${e.dir}"
                                 .text="${e.text}"
                                 .formatter="${e.formatter}"
                                 .alignment="${TextAlignment.Center}"
                                 .wrap="${true}"></mosaik-text>
                </slot>
            </div>
        </mosaik-sticky>
        `, () => html `
        <div part="root">
            ${when(e.icon, () => html `
            <mosaik-icon part="icon"
                         .dir="${e.dir}"
                         .size="${Size.Tiny}"
                         .data="${e.icon}"></mosaik-icon>
            `)}
            <slot>
                <mosaik-text part="text"
                             .dir="${e.dir}"
                             .text="${e.text}"
                             .formatter="${e.formatter}"
                             .alignment="${TextAlignment.Center}"
                             .wrap="${true}"></mosaik-text>
            </slot>
        </div>
        `)}
    `;
}
//# sourceMappingURL=ChatMarkerElementTemplate.js.map