// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
import { setHost } from '../../../Directives/setHost';
// #endregion
/**
 * The template of the `BannerElement`.
 *
 * @public
 */
export function bannerElementTemplate(e) {
    return html `
        ${when(!e.disabled && e.appearance !== 'outline', () => html `
        <mosaik-elevation part="elevation"
                          .weigh="${e.elevation}"
                          @connected="${(evt) => evt.target.attach(e)}"></mosaik-elevation>
        `)}
        <div part="root">
            <mosaik-stack part="heading"
                          .orientation="${e.orientation}"
                          .verticalAlignment="${e.verticalContentAlignment}"
                          .horizontalAlignment="${e.horizontalContentAlignment}"
                          .gap="${'16px'}">
                ${when(e.icon, () => html `
                <slot part="icon"
                      name="icon">
                    <mosaik-icon .variant="${e.variant}"
                                 .data="${e.icon}"
                                 .size="${ifNonNull(e.iconSize)}"
                                 ?disabled="${e.disabled}"></mosaik-icon>
                </slot>
                `)}
                <div part="text">
                    <slot name="header">
                        ${when(e.header.trim(), () => html `
                        <mosaik-banner-header part="header"
                                              .variant="${e.variant}"
                                              .text="${e.header}"
                                              .dir="${e.dir}"
                                              .formatter="${e.formatter}"
                                              ?disabled="${e.disabled}"></mosaik-banner-header>
                        `)}
                    </slot>
                    <slot name="subHeader">
                        ${when(e.subHeader.trim(), () => html `
                        <mosaik-banner-sub-header part="subHeader"
                                                  .variant="${e.variant}"
                                                  .text="${e.subHeader}"
                                                  .dir="${e.dir}"
                                                  .formatter="${e.formatter}"
                                                  ?disabled="${e.disabled}"></mosaik-banner-sub-header>
                        `)}
                    </slot>
                </div>
                ${when(e.closeable, () => html `
                <div>
                    <slot name="close">
                        <mosaik-dismiss part="close"
                                        .variant="${e.variant}"
                                        .appearance="${'plain'}"
                                        .size="${'small'}"
                                        ?disabled="${e.disabled}"
                                        @click="${() => e.close()}"></mosaik-dismiss>
                    </slot>
                </div>
                `)}
            </mosaik-stack>
            <mosaik-stack part="actions"
                          ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}"
                          .gap="${'small'}">
                <slot name="actions"></slot>
            </mosaik-stack>
        </div>
    `;
}
//# sourceMappingURL=BannerElementTemplate.js.map