// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { AutoToolTipPlacement } from '../../../Types/AutoToolTipPlacement';
import { TickLabelPosition } from '../../../Types/TickLabelPosition';
import { TickPlacement } from '../../../Types/TickPlacement';
// #endregion
/**
 * The template of the `SliderElement`.
 *
 * @public
 */
export function sliderElementTemplate(e) {
    return html `
        <slot name="prefix"></slot>
        <div part="root">
            ${when(e.tickPlacement === TickPlacement.Before || e.tickPlacement === TickPlacement.Both, () => html `
            <mosaik-tick-bar part="tickBar"
                             .orientation="${e.orientation}"
                             .dir="${e.dir}"
                             .lang="${e.lang}"
                             .min="${e.min}"
                             .max="${e.max}"
                             .interval="${e.ticks}"
                             .labelAccessor="${e.tickLabelAccessor}"
                             .showLabels="${e.showTickLabels}"
                             .labelPosition="${TickLabelPosition.Before}"
                             ?disabled="${e.disabled}"></mosaik-tick-bar>
            `)}
            <input id="input"
                   part="input"
                   type="range"
                   aria-orientation="${e.orientation}"
                   .min="${e.min.toString()}"
                   .max="${e.max.toString()}"
                   .value="${e.value.toString()}"
                   .step="${e.step.toString()}"
                   ?disabled="${e.disabled}"/>
            ${when(e.tickPlacement === TickPlacement.After || e.tickPlacement === TickPlacement.Both, () => html `
            <mosaik-tick-bar part="tickBar"
                             .orientation="${e.orientation}"
                             .dir="${e.dir}"
                             .lang="${e.lang}"
                             .min="${e.min}"
                             .max="${e.max}"
                             .interval="${e.ticks}"
                             .labelAccessor="${e.tickLabelAccessor}"
                             .showLabels="${e.showTickLabels}"
                             .labelPosition="${TickLabelPosition.After}"
                             ?disabled="${e.disabled}"></mosaik-tick-bar>
            `)}
            ${when(e.tooltipPlacement !== AutoToolTipPlacement.None, () => html `
            <output part="tooltip"
                    for="input">
                <mosaik-text part="text"
                             .text="${e.tooltipAccessor(e.value)}"></mosaik-text>
            </output>
            `)}
        </div>
        <slot name="suffix"></slot>
    `;
}
//# sourceMappingURL=SliderElementTemplate.js.map