// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
import { IconPosition } from '../../../Types/IconPosition';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link SegmentItemElement}.
 *
 * @public
 */
export function segmentItemElementTemplate(e) {
    return html `
        <button part="button"
                aria-selected="${e.isChecked ? 'true' : 'false'}"
                role="tab"
                type="${e.type}"
                .disabled=${e.disabled}>
            <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}"
                                 .variant="${e.variant}"
                                 .data="${e.icon}"
                                 .size="${e.iconSize ?? e.size}"
                                 .inline="${true}"
                                 ?disabled="${e.disabled}"></mosaik-icon>
                `)}
                </slot>
                <slot name="label">
                ${when(e.label, () => html `
                    <mosaik-text part="label"
                                 .text="${e.label}"
                                 .variant="${e.variant}"
                                 ?disabled="${e.disabled}"></mosaik-text>
                `)}
                </slot>
            </mosaik-stack>
        </button>
    `;
}
//# sourceMappingURL=SegmentItemElementTemplate.js.map