// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
import { Appearance } from '../../../Types/Appearance';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the {@link BannerElement}.
 *
 * @public
 */
export function bannerElementTemplate(e) {
    return html `
        ${when(!e.disabled && e.appearance !== 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">
                        <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">
                        <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-button part="close"
                                       .variant="${e.variant}"
                                       ?disabled="${e.disabled}"
                                       .size="${Size.Small}"
                                       .appearance="${Appearance.Plain}"
                                       .icon="${Icons.close}"
                                       @click="${() => e.close()}"></button></mosaik-button>
                    </slot>
                </div>
                `)}
            </mosaik-stack>
            <mosaik-stack part="actions"
                          .gap="${'8px'}">
                <slot name="actions"></slot>
            </mosaik-stack>
        </div>
    `;
}
//# sourceMappingURL=BannerElementTemplate.js.map