// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Placement } from '../../../Types/Placement';
// #endregion
/**
 * @public
 */
export function tooltipElementTemplate(e) {
    return html `
        <slot aria-describedby="tooltip"></slot>
        <slot name="content"></slot>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .anchor="${e.anchorElement}"
                             .placement="${e.placement}"
                             .distance="${e.horizontalOffset}"
                             .skidding="${e.verticalOffset}"
                             .strategy="${'fixed'}"
                             .sync="${'none'}"
                             .enter="${e.enter}"
                             .exit="${e.exit}"
                             .flipFallbackPlacements="${[Placement.TopStart, Placement.Top, Placement.TopEnd, Placement.BottomStart, Placement.Bottom, Placement.BottomEnd, Placement.LeftStart, Placement.Left, Placement.LeftEnd, Placement.RightStart, Placement.Right, Placement.RightEnd]}"
                             .flip="${true}"
                             .shift="${true}"
                             .arrow="${true}"
                             ?active="${e.isFloatingActive}">
                <style slot="style">
                    :host {
                        padding: 8px;
                    }
                </style>
                <div part="body"
                     id="tooltip"
                     role="tooltip"
                     aria-live="${e.isOpen ? 'polite' : 'off'}">
                    <div part="projection"></div>
                    ${when(!e.hasSlottedContent, () => html `
                    <span part="text">${e.formattedContent}</span>
                    `)}
                </div>
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=TooltipElementTemplate.js.map