// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { FlowDirection } from '../../../Types/FlowDirection';
import { IconPosition } from '../../../Types/IconPosition';
import { Orientation } from '../../../Types/Orientation';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the `CompoundButtonElement`.
 *
 * @public
 */
export function compoundButtonElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           .for="${'button'}"></mosaik-focus-ring>
        `)}
        <button id="button"
                part="button"
                type="${e.type}">
            ${when(!e.disabled && e.ripple, () => html `
            <mosaik-ripple part="ripple"
                           .variant="${e.variant}"
                           .for="${'button'}"></mosaik-ripple>
            `)}
            <mosaik-stack part="innerStack" .orientation="${e.orientation}"
                          .verticalAlignment="${e.verticalContentAlignment}"
                          .horizontalAlignment="${e.horizontalContentAlignment}"
                          ?reverse="${e.iconPosition === IconPosition.After}">
                <slot name="prefix">
                ${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>
                <mosaik-stack part="innerStack" .orientation="${Orientation.Vertical}"
                              .verticalAlignment="${e.verticalContentAlignment}"
                              .horizontalAlignment="${e.horizontalContentAlignment}">
                    <slot name="label">
                    ${when(e.label.trim(), () => html `
                        <mosaik-text part="label"
                                     .text="${e.label}"
                                     .variant="${e.variant}"
                                     ?disabled="${e.disabled}"></mosaik-text>
                    `)}
                    </slot>
                    <slot name="subLabel">
                    ${when(e.subLabel.trim(), () => html `
                        <mosaik-text part="subLabel"
                                     .text="${e.subLabel}"
                                     .maxLines="${3}"
                                     .variant="${e.variant}"
                                     .wrap="${true}"
                                     ?disabled="${e.disabled}"></mosaik-text>
                    `)}
                    </slot>
                </mosaik-stack>
                <slot name="suffix">
                    ${when(e.isNavigation, () => html `
                        <mosaik-icon part="icon nav"
                                     .size="${Size.Medium}"
                                     .appearance="${Appearance.Plain}"
                                     .variant="${e.variant}"
                                     .data="${e.dir === FlowDirection.RightToLeft ? Icons.chevronLeft : Icons.chevronRight}"
                                     .inline="${true}"
                                     ?disabled="${e.disabled}"></mosaik-icon>
                    `)}
                </slot>
            </mosaik-stack>
        </button>
        ${when(e.isBusy, () => html `
        <mosaik-progress-ring part="progressRing"
                              .lang="${e.lang}"
                              .dir="${e.dir}"
                              .radius="${'12px'}"
                              .variant="${e.variant}"
                              .isIndeterminate="${true}"
                              ?disabled="${e.disabled}"></mosaik-progress-ring>
        `)}
        <slot name="overlay"></slot>
    `;
}
//# sourceMappingURL=CompoundButtonElementTemplate.js.map