// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { styleMap, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
// #endregion
/**
 * The template of the {@link DrawerElement}.
 *
 * @public
 */
export function drawerElementTemplate(e) {
    const getSize = () => {
        const size = {
            height: undefined,
            width: undefined
        };
        switch (e.position) {
            case 'left':
            case 'right':
                size.height = '100%';
                size.width = e.width;
                break;
            case 'top':
            case 'bottom':
                size.height = e.height;
                size.width = '100%';
                break;
        }
        return size;
    };
    const style = {
        'width': getSize().width,
        'max-width': getSize().width,
        'min-height': getSize().height,
        'height': getSize().height
    };
    return html `
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.close()}"></mosaik-backdrop>
        `)}
        <div part="root"
             style="${styleMap(style)}">
            ${when(e.hasShadow, () => html `
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"></mosaik-elevation>
            `)}
            <div part="header">
                ${when(e.closeable || e.header.trim() || e.subHeader.trim(), () => html `
                <mosaik-toolbar .title="${e.header}"
                                .subTitle="${e.subHeader}">
                    <mosaik-button slot="end"
                                   .icon="${Icons.close}"
                                   .appearance="${Appearance.Plain}"
                                   @click="${() => e.close()}"></mosaik-button>
                </mosaik-toolbar>
                `)}
            </div>
            <div part="main">
                <slot></slot>
            </div>
             <div part="footer">
                <slot name="footer"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=DrawerElementTemplate.js.map