// #region Imports
import { html } from '../../../../Dom/Html';
import { styleMap, when } from '../../../Directives/Directives';
import { setHost } from '../../../Directives/setHost';
// #endregion
/**
 * The template of the `DrawerElement`.
 *
 * @public
 */
export function drawerElementTemplate(e) {
    return html `
        ${when(setHost(e, 'has-inset', e.hasInset), () => html ``)}
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
        `)}
        <div part="root"
             style="${styleMap(e.drawerRootStyles)}">
            ${when(e.hasShadow, () => html `
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"></mosaik-elevation>
            `)}

            <div part="header"
                 ?hidden="${!setHost(e, 'has-header', e.hasSlotContent('header') || e.hasDrawerHeaderContent)}">
                ${when(e.hasSlotContent('header'), () => html `
                <slot name="header"></slot>
                `, () => when(e.hasDrawerHeaderContent, () => html `
                <mosaik-drawer-header>
                    <mosaik-drawer-header-text slot="header"
                                               .text="${e.header.trim()}"
                                               .dir="${e.dir}"></mosaik-drawer-header-text>
                    <mosaik-drawer-header-sub-text slot="subHeader"
                                                   .text="${e.subHeader.trim()}"
                                                   .dir="${e.dir}"></mosaik-drawer-header-sub-text>
                    ${when(e.closeable, () => html `
                    <mosaik-dismiss slot="suffix"
                                    .appearance="${'plain'}"
                                    .size="${'small'}"
                                    @click="${() => e.close()}"></mosaik-dismiss>
                    `)}
                </mosaik-drawer-header>
                `))}
            </div>

            <div part="main">
                <slot></slot>
            </div>
            <div part="actions"
                 ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
                <slot name="actions"></slot>
            </div>
            <div part="footer"
                 ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('footer'))}">
                <slot name="footer"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=DrawerElementTemplate.js.map