// #region Imports
import { html } from '../../../../Dom/Html';
import { Appearance } from '../../../Types/Appearance';
import { InkBarPosition } from '../../../Types/InkBarPosition';
import { TabStripPlacement } from '../../../Types/TabStripPlacement';
// #endregion
/**
 * The template of the `TabStripElement`.
 *
 * @public
 */
export function tabStripElementTemplate(e) {
    // invert the tap strip placement
    const getPosition = () => {
        switch (e.placement) {
            case TabStripPlacement.Top:
                return InkBarPosition.Bottom;
            case TabStripPlacement.Bottom:
                return InkBarPosition.Top;
            case TabStripPlacement.Left:
                return InkBarPosition.Right;
            case TabStripPlacement.Right:
                return InkBarPosition.Left;
            default:
                return InkBarPosition.Bottom;
        }
    };
    return html `
        <slot name="start"></slot>
        <div part="container">
            <slot></slot>
            <mosaik-ink-bar part="indicator"
                            .position="${getPosition()}"
                            .variant="${e.variant}"
                            .appearance="${Appearance.Solid}"
                            ?disabled="${e.disabled}"
                            ?hidden="${!e.hasIndicator}"></mosaik-ink-bar>
        </div>
        <slot name="end"></slot>
    `;
}
//# sourceMappingURL=TabStripElementTemplate.js.map