/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { classMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link DialogElement}.
 *
 * @public
 */
export function dialogElementTemplate(e) {
    const setHost = (host, attribute, hasAttribute) => {
        if (hasAttribute) {
            RendererServiceLocator.current.setAttribute(host, attribute);
        }
        else {
            RendererServiceLocator.current.removeAttribute(host, attribute);
        }
        return hasAttribute;
    };
    return html `
        <style>
            :host {
                --dialog-width: ${e.width};
                --dialog-height: ${e.height};
                --dialog-max-width: ${e.width};
                --dialog-max-height: ${e.height};
            }
        </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}"
                              @connected="${(evt) => evt.target.attach(e)}"></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