// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { setHost } from '../../../Directives/setHost';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the `ChatMessageElement`.
 *
 * @public
 */
export function chatMessageElementTemplate(e) {
    return html `
        <div part="root">
            <slot name="avatar"
                  @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            <div part="message-area">
                <div part="message-stack">
                    <div part="message-line">
                        <div part="message">
                            ${when(!e.isBusy, () => html `
                            <div part="header">
                                <slot name="author">
                                    ${when(e.author.trim(), () => html `
                                    <mosaik-text part="author"
                                                .dir="${e.dir}"
                                                .text="${e.author}"
                                                .formatter="${e.formatter}"
                                                .truncate="${true}"></mosaik-text>
                                    `)}
                                </slot>
                                <slot name="at">
                                    <mosaik-text part="at"
                                                .dir="${e.dir}"
                                                .text="${e.at}"
                                                .formatter="${e.formatter}"></mosaik-text>
                                </slot>
                            </div>
                            `)}
                            <div part="message-body">
                                <slot name="text">
                                    ${when(e.isBusy, () => html `
                                    <div part="busy">
                                        <mosaik-dot part="dot"
                                                    .size="${Size.Tiny}"></mosaik-dot>
                                        <mosaik-dot part="dot"
                                                    .size="${Size.Tiny}"></mosaik-dot>
                                        <mosaik-dot part="dot"
                                                    .size="${Size.Tiny}"></mosaik-dot>
                                    </div>
                                    `, () => html `
                                    <mosaik-text part="text"
                                                .dir="${e.dir}"
                                                .text="${e.text}"
                                                .formatter="${e.formatter}"
                                                .wrap="${true}"></mosaik-text>
                                    `)}
                                </slot>
                            </div>
                        </div>
                        <div part="message-after"
                             ?hidden="${!setHost(e, 'has-after', e.hasSlotContent('after'))}">
                            <slot name="after"></slot>
                        </div>
                    </div>
                    <div part="footer"
                         ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('reaction') || e.hasSlotContent('actions'))}">
                        <div part="actions"
                             ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
                            <slot name="actions"></slot>
                        </div>
                        <div part="reactions"
                             ?hidden="${!setHost(e, 'has-reactions', e.hasSlotContent('reaction'))}">
                            <slot name="reaction"></slot>
                        </div>
                    </div>
                </div>
                <slot name="attachment"></slot>
            </div>
        </div>

    `;
}
//# sourceMappingURL=ChatMessageElementTemplate.js.map