// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { choose, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { CheckType } from '../../../Types/CheckType';
import { SelectionMode } from '../../../Types/SelectionMode';
import { Size } from '../../../Types/Size';
import { prevent } from '@breadstone/mosaik-elements';
// #endregion
/**
 * The template of the {@link TreeItemElement}.
 *
 * @public
 */
export function treeItemElementTemplate(e) {
    return html `
        <div part="root">
            ${when(e.hasChildren && !e.isBusy, () => html `
            <div part="prefix-container">
                <mosaik-button part="caret"
                               .appearance="${Appearance.Plain}"
                               .icon="${Icons.caretDown}"
                               .size="${Size.Small}"
                               .dir="${e.dir}"
                               .lang="${e.lang}"
                               ?disabled="${e.disabled}"
                               @click="${(x) => prevent(x, (_) => e.toggle())}"></mosaik-button>
            </div>
            `)}
            ${when(e.isBusy, () => html `
            <div part="prefix-container">
                <mosaik-progress-ring part="progressRing"
                                      .thickness="${2}"
                                      .radius="${12}"
                                      .isIndeterminate="${true}"
                                      .dir="${e.dir}"
                                      .lang="${e.lang}"></mosaik-progress-ring>
            </div>
            `)}
            <slot name="text">
                <mosaik-text part="text"
                             .text="${e.text}"
                             .dir="${e.dir}"
                             .lang="${e.lang}"></mosaik-text>
            </slot>
            ${choose(e.parent.selectionMode, [[SelectionMode.None, () => html.nothing], [SelectionMode.Single, () => html.nothing], [SelectionMode.Multiple, () => html `
            <mosaik-checkmark part="checkmark"
                              .appearance="${Appearance.Outline}"
                              .variant="${e.variant}"
                              .type="${CheckType.Hook}"
                              .dir="${e.dir}"
                              .lang="${e.lang}"
                              ?checked="${e.isChecked}"
                              ?disabled="${e.disabled}"></mosaik-checkmark>
            `]])}
        </div>
        <mosaik-expandable part="expandable"
                           .dir="${e.dir}"
                           .lang="${e.lang}"
                           .isExpanded="${e.isExpanded}"
                           ?hidden="${!e.hasSlotContent('')}">
            <slot></slot>
        </mosaik-expandable>
    `;
}
//# sourceMappingURL=TreeItemElementTemplate.js.map