// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the {@link TabPanelElement}.
 *
 * @public
 */
export function tabPanelElementTemplate(e) {
    return html `
        ${when(e.hasScrollableContent, () => html `
        <mosaik-button part="startScrollButton"
                       tabindex="-1"
                       .size="${Size.Large}"
                       .icon="${Icons.chevronLeft}"
                       .disabled="${e.canScrollToStart}"
                       @click="${() => e.scrollByTabOffset('before')}"></mosaik-button>
        `)}
        <div part="content"
             @scroll="${(x) => e.onScroll(x)}">
            <slot></slot>
        </div>
        ${when(e.hasScrollableContent, () => html `
        <mosaik-button part="endScrollButton"
                       tabindex="-1"
                       size="large"
                       .icon="${Icons.chevronRight}"
                       .disabled="${e.canScrollToEnd}"
                       @click="${() => e.scrollByTabOffset('after')}"></mosaik-button>
        `)}
    `;
}
//# sourceMappingURL=TabPanelElementTemplate.js.map