// #region Imports
import { prevent } from '@breadstone/mosaik-elements';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { CheckType } from '../../../Types/CheckType';
import { Orientation } from '../../../Types/Orientation';
import { Placement } from '../../../Types/Placement';
import { Size } from '../../../Types/Size';
import { SubMenuMode } from '../../../Types/SubMenuMode';
import { TextOverflow } from '../../../Types/TextOverflow';
// #endregion
/**
 * The template of the `MenuItemElement`.
 *
 * @public
 */
export function menuItemElementTemplate(e) {
    const renderBody = () => html `
        <div part="root"
             role="menuitem"
             aria-haspopup="${e.hasChildren ? 'menu' : 'false'}"
             aria-expanded="${e.hasChildren ? String(e.isExpanded) : 'false'}">
            ${when(!e.disabled, () => html `
            <mosaik-focus-ring part="focusRing"
                               .variant="${e.variant}"
                               .visible="${e.isFocused}"
                               .controlled="${'manual'}"
                               @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
            `)}
            ${when(!e.disabled && e.ripple, () => html `
            <mosaik-ripple part="ripple"
                           .variant="${e.variant}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
            `)}
            ${when(e.isChecked, () => html `
            <mosaik-checkmark part="checkmark"
                              .appearance="${Appearance.Plain}"
                              .variant="${e.variant}"
                              .type="${CheckType.Hook}"
                              .dir="${e.dir}"
                              .lang="${e.lang}"
                              ?checked="${e.isChecked}"
                              ?disabled="${e.disabled}"></mosaik-checkmark>
            `)}
            <slot name="start"></slot>
            <slot name="icon">
                ${when(e.icon.trim(), () => html `
                <mosaik-icon .size="${Size.Small}"
                             .data="${e.icon}"
                             .dir="${e.dir}"
                             .lang="${e.lang}"
                             ?disabled="${e.disabled}"></mosaik-icon>
                `)}
            </slot>
            <mosaik-stack part="text"
                          .orientation="${Orientation.Vertical}"
                          .dir="${e.dir}"
                          .lang="${e.lang}">
                <slot name="label">
                ${when(e.label, () => html `
                    <mosaik-text .text="${e.label}"
                                 .dir="${e.dir}"
                                 .lang="${e.lang}"
                                 ?truncate="${e.textOverflow === TextOverflow.Truncate}"
                                 ?wrap="${e.textOverflow === TextOverflow.Wrap}"
                                 ?disabled="${e.disabled}"></mosaik-text>
                `)}
                </slot>
                <slot name="subLabel">
                ${when(e.subLabel, () => html `
                    <mosaik-text .text="${e.subLabel}"
                                 .dir="${e.dir}"
                                 .lang="${e.lang}"
                                 ?disabled="${e.disabled}"></mosaik-text>
                `)}
                </slot>
            </mosaik-stack>
            ${when(e.hasChildren, () => html `
            <mosaik-button part="caret"
                           .appearance="${Appearance.Plain}"
                           .icon="${e.menuMode === SubMenuMode.Popover ? Icons.caretRight : Icons.caretDown}"
                           .size="${Size.Small}"
                           .dir="${e.dir}"
                           .lang="${e.lang}"
                           ?disabled="${e.disabled}"
                           @click="${(x) => prevent(x, () => e.menuMode === SubMenuMode.Inline ? e.toggle() : void 0)}"></mosaik-button>
            `)}
            <slot name="end"></slot>
        </div>
    `;
    return html `
        ${renderBody()}
        ${when(e.menuMode === SubMenuMode.Popover, () => html `
        <div part="submenu-container"
             style="display: none;">
            <slot name="submenu"></slot>
            <slot></slot>
        </div>
        <mosaik-portal part="portal">
            <mosaik-floating part="popover"
                             .anchor="${e}"
                             .placement="${Placement.RightStart}"
                             .flipFallbackPlacements="${[Placement.LeftStart]}"
                             .active="${e.isExpanded}"
                             .strategy="${'fixed'}"
                             .flip="${true}"
                             .shift="${true}"
                             @pointerleave="${(evt) => e.handleFloatingPointerLeave(evt)}">
                <div part="submenu"
                     role="menu">
                    <div part="projection"></div>
                </div>
            </mosaik-floating>
        </mosaik-portal>
        `, () => html `
        <mosaik-expandable part="expandable"
                           .dir="${e.dir}"
                           .lang="${e.lang}"
                           .isExpanded="${e.isExpanded}"
                           ?hidden="${!e.hasSlotContent('submenu') && !e.hasSlotContent('')}">
            <slot name="submenu"></slot>
            <slot></slot>
        </mosaik-expandable>
        `)}
    `;
}
//# sourceMappingURL=MenuItemElementTemplate.js.map