// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `PopupElement`.
 *
 * @public
 */
export function popupElementTemplate(e) {
    return html `
        <slot></slot>
        <slot name="content"
              style="display: none;"></slot>
        <mosaik-portal part="portal"
                       .isActive="${e.isOpen}">
            ${when(e.hasBackdrop, () => html `
            <mosaik-backdrop part="backdrop"
                             ?hidden="${!e.isOpen}"
                             @click="${() => e.onBackdrop()}"></mosaik-backdrop>
            `)}
            <mosaik-floating part="popup"
                             ?active="${e.isFloatingActive}"
                             .anchor="${e.anchorElement}"
                             .placement="${e.placement}"
                             .flipFallbackPlacements="${e.placements}"
                             .distance="${e.distance}"
                             .skidding="${e.skidding}"
                             .elevation="${e.elevation}"
                             .sync="${e.sync}"
                             .flip="${e.flip}"
                             .shift="${e.shift}"
                             .enter="${e.enter}"
                             .exit="${e.exit}"
                             @mouseenter="${() => e.onPopupMouseEnter()}"
                             @mouseleave="${() => e.onPopupMouseLeave()}">
                <div part="body">
                    <div part="header">
                        <slot name="header"></slot>
                    </div>
                    <div part="projection"></div>
                    <div part="footer">
                        <slot name="footer"></slot>
                    </div>
                </div>
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=PopupElementTemplate.js.map