/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, when } from '../../../Directives/Directives';
import { setHost } from '../../../Directives/setHost';
// #endregion
/**
 * The template of the `DialogElement`.
 *
 * @public
 */
export function dialogElementTemplate(e) {
    return html `
        <style>
            :host {
                --dialog-width: ${e.width};
                --dialog-height: ${e.height};
                --dialog-max-width: min(${e.width}, 100vw);
                --dialog-max-height: min(${e.height}, 100vh);
            }
        </style>
        ${when(e.hasBackdrop, () => html `
        <mosaik-backdrop part="backdrop"
                         ?hidden="${!e.isOpen}"
                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
        `)}

        <dialog part="root"
                class="${classMap({ dragging: e.dragging })}"
                open="${e.isOpen}">
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"></mosaik-elevation>
            <div part="header"
                 ?hidden="${!setHost(e, 'has-header', e.hasSlotContent('header'))}"
                 @pointerdown=${(x) => e.onDragStart(x)}
                 @pointermove=${(x) => e.onDrag(x)}
                 @pointerup=${(x) => e.onDragEnd(x)}>
                <slot name="header"></slot>
            </div>
            <slot name="content"></slot>
            <slot name="actions"></slot>
            <slot name="footer"></slot>
        </dialog>
    `;
}
//# sourceMappingURL=DialogElementTemplate.js.map