// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
// #endregion
/**
 * The template of the {@link MessageElement}.
 *
 * @public
 */
export function messageElementTemplate(e) {
    return html `
        <div part="root">
            <div part="header-row">
                ${when(e.icon, () => html `
                <mosaik-icon part="icon"
                             .variant="${e.variant}"
                             .data="${e.icon}"
                             .size="${ifNonNull(e.iconSize)}"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             ?inline="${true}"
                             ?disabled="${e.disabled}"></mosaik-icon>
                `)}
                ${when(e.header.trim() || e.content.trim(), () => html `
                <div part="text">
                    ${when(e.header.trim(), () => html `
                    <mosaik-text part="header"
                                 .variant="${e.variant}"
                                 .text="${e.header}"
                                 .formatter="${e.formatter}"
                                 .wrap="${true}"
                                 .dir="${e.dir}"
                                 .lang="${e.lang}"
                                 ?disabled="${e.disabled}"></mosaik-text>
                    `)}
                    <slot name="content">
                        <mosaik-message-content></mosaik-message-content>
                    </slot>
                </div>
                `)}
                ${when(e.closeable, () => html `
                <mosaik-dismiss part="close"
                                .variant="${e.variant}"
                                .appearance="${'plain'}"
                                .size="${'small'}"
                                .dir="${e.dir}"
                                .lang="${e.lang}"
                                ?disabled="${e.disabled}"
                                @click="${() => e.close()}"></mosaik-dismiss>
                `)}
            </div>
            ${when(e.expandable, () => html `
            <div part="footer">
                <mosaik-button part="caret"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .appearance="${'plain'}"
                               .variant="${e.variant}"
                               .icon="${Icons.caretDown}"
                               .size="${'small'}"
                               .iconSize="${'small'}"
                               ?disabled="${e.disabled}"
                               @click="${() => e.toggle()}"></mosaik-button>
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=MessageElementTemplate.js.map