// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the {@link ScrollElement}.
 *
 * @public
 */
export function scrollElementTemplate(e) {
    return html `
        <div part="root">
            <div part="scroller">
                <div part="content"
                     tabindex="${e.isScrollable ? 0 : -1}">
                    <div part="anchorTop"></div>
                    <slot></slot>
                    <div part="anchorBottom"></div>
                    <div part="triggerStart"></div>
                    <div part="triggerEnd"></div>
                </div>
            </div>
            ${when(e.showScrollButtons, () => html `
            <div part="actionPrev">
                <mosaik-button part="scrollButtonPrev"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .appearance="${Appearance.Plain}"
                               .size="${Size.Small}"
                               .icon="${e.orientation === Orientation.Horizontal ? Icons.chevronLeft : Icons.chevronUp}"
                               tabindex="-1"
                               @click="${() => e.scrollByDirection('prev')}"></mosaik-button>
            </div>
            <div part="actionNext">
                <mosaik-button part="scrollButtonNext"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .appearance="${Appearance.Plain}"
                               .size="${Size.Small}"
                               .icon="${e.orientation === Orientation.Horizontal ? Icons.chevronRight : Icons.chevronDown}"
                               tabindex="-1"
                               @click="${() => e.scrollByDirection('next')}"></mosaik-button>
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=ScrollElementTemplate.js.map