// #region Imports
import { html } from '../../../../Dom/Html';
import { styleMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link TourElement}.
 *
 * @public
 */
export function tourElementTemplate(e) {
    const isVisible = e.isOpen && !!e.currentStep;
    return html `
        ${when(e.hasBackdrop, () => html `
            <mosaik-backdrop part="backdrop"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             ?hidden="${!isVisible}"
                             @click="${(event) => e.onBackdropClicked(event)}"></mosaik-backdrop>
        `)}
        ${when(isVisible, () => html `
            <div part="tooltip"
                 data-hidden="${!isVisible}"
                 style="${styleMap(e.tooltipStyles)}">
                <mosaik-tour-step
                    .lang="${e.lang}"
                    .dir="${e.dir}"
                    .step="${e.currentStep}"
                    .isFirstStep="${e.isFirstStep}"
                    .isLastStep="${e.isLastStep}"
                    @previous="${() => e.previous()}"
                    @next="${() => e.next()}"
                    @finish="${() => e.finish()}"
                    @skip="${() => e.skip()}"></mosaik-tour-step>
            </div>
        `)}
    `;
}
//# sourceMappingURL=TourElementTemplate.js.map