// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link TabElement}.
 *
 * @public
 */
export function tabElementTemplate(e) {
    return html `
        <div part="root">
            ${when(e.items.length > 1, () => html `
            <div part="header">
                <slot name="start"></slot>
                <mosaik-tab-panel part="tabPanel"
                                .dir="${e.dir}"
                                .alignment="${e.alignment}"
                                .placement="${e.placement}"
                                .hasIndicator="${e.hasIndicator}"
                                .enableGestures="${e.enableGestures}"
                                .appearance="${e.appearance}">
                    <mosaik-tab-strip part="tabStrip"
                                    .appearance="${e.appearance}"
                                    .variant="${e.variant}"
                                    .disabled="${e.disabled}"
                                    .hasIndicator="${e.hasIndicator}"
                                    .placement="${e.placement}">
                        ${repeat(e.items, (x) => x, (x) => html `
                        <mosaik-tab-strip-item part="tabStripItem"
                                               .dir="${x.dir}"
                                               .label="${x.label}"
                                               .icon="${x.icon}"
                                               .iconPosition="${x.iconPosition}"
                                               .iconSize="${x.iconSize}"
                                               .placement="${e.placement}"
                                               .isSelected="${x.isSelected}"
                                               ?disabled="${x.disabled}"
                                               @selected="${(_) => e.select(x)}"></mosaik-tab-strip-item>
                        `)}
                    </mosaik-tab-strip>
                </mosaik-tab-panel>
                <slot name="end"></slot>
            </div>
            `)}
            <div part="content">
                <slot @slotchange="${() => e.requestUpdate()}"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=TabElementTemplate.js.map