// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `FloatingElement`.
 *
 * @public
 */
export function floatingElementTemplate(e) {
    const bodyClasses = {
        'popup': true,
        'active': e.isVisible,
        'fixed': e.strategy === 'fixed',
        'has-arrow': e.arrow
    };
    return html `
        <slot name="anchor"
              @slotchange="${() => e.handleAnchorChange()}"></slot>
        <div part="body"
             class="${classMap(bodyClasses)}">
            <mosaik-elevation part="elevation"
                              .weigh="${e.elevation}"></mosaik-elevation>
            <slot></slot>
            ${when(e.arrow, () => html `
                <div part="arrow"
                     role="presentation"></div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=FloatingElementTemplate.js.map