// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
import { Appearance } from '../../../Types/Appearance';
import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
import { IconPosition } from '../../../Types/IconPosition';
import { TextAlignment } from '../../../Types/TextAlignment';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link TabStripItemElement}.
 *
 * @public
 */
export function tabStripItemElementTemplate(e) {
    return html `
        <div part="root">
            ${when(!e.disabled, () => html `
            <mosaik-focus-ring part="focusRing"
                               .variant="${e.variant}"
                               .visible="${e.isFocused}"
                               .controlled="${'manual'}"
                               .inward="${true}"
                               @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
            <mosaik-ripple .variant="${e.variant}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
            `)}
            <div part="content">
                <mosaik-stack part="innerStack" .orientation="${e.orientation}"
                              .verticalAlignment="${VerticalAlignment.Center}"
                              .horizontalAlignment="${HorizontalAlignment.Center}"
                              .reverse="${e.iconPosition === IconPosition.After}">
                    <slot name="icon">
                    ${when(e.icon, () => html `
                        <mosaik-icon part="icon"
                                    .appearance="${Appearance.Plain}"
                                    .data="${e.icon}"
                                    .size="${ifNonNull(e.iconSize)}"
                                    .inline="${true}"
                                    ?disabled="${e.disabled}"></mosaik-icon>
                    `)}
                    </slot>
                    <slot name="label">
                    ${when(e.label, () => html `
                        <mosaik-text part="label"
                                    .text="${e.label}"
                                    .alignment="${TextAlignment.Center}"
                                    ?disabled="${e.disabled}"></mosaik-text>
                    `)}
                    </slot>
                </mosaik-stack>
            </div>
        </div>
    `;
}
//# sourceMappingURL=TabStripItemElementTemplate.js.map