// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `ExpanderElement`.
 *
 * @public
 */
export function expanderElementTemplate(e) {
    return html `
        <div part="root">
            <div part="heading"
                 role="button"
                 @click="${() => e.toggle()}">
                ${when(!e.disabled, () => html `
                <mosaik-focus-ring part="focusRing"
                                   .variant="${e.variant}"
                                   .controlled="${'auto'}"
                                   .lang="${e.lang}"
                                   .dir="${e.dir}"></mosaik-focus-ring>
                `)}
                ${when(!e.disabled && e.ripple, () => html `
                <mosaik-ripple part="ripple"
                               .lang="${e.lang}"
                               .dir="${e.dir}"></mosaik-ripple>
                `)}
                <div part="stack">
                    <slot name="icon">
                        ${when(e.icon.trim(), () => html `
                        <mosaik-icon part="icon"
                                     .size="${'small'}"
                                     .inline="${true}"
                                     .data="${e.icon}"
                                     .lang="${e.lang}"
                                     .dir="${e.dir}"></mosaik-icon>
                        `)}
                    </slot>
                    <slot name="header">
                        ${when(e.header.trim(), () => html `
                        <mosaik-expander-header part="header"
                                                .lang="${e.lang}"
                                                .dir="${e.dir}"
                                                .text="${e.header}"></mosaik-expander-header>
                        `)}
                    </slot>
                    <slot name="subHeader">
                        ${when(e.subHeader.trim(), () => html `
                        <mosaik-expander-sub-header part="subHeader"
                                                    .lang="${e.lang}"
                                                    .dir="${e.dir}"
                                                    .text="${e.subHeader}"></mosaik-expander-sub-header>
                        `)}
                    </slot>
                    <div part="actions">
                        <slot name="actions"></slot>
                    </div>
                    <mosaik-button part="caret"
                                   .lang="${e.lang}"
                                   .dir="${e.dir}"
                                   .appearance="${'plain'}"
                                   .icon="${Icons.caretDown}"
                                   .size="${'small'}"
                                   .iconSize="${'small'}"></mosaik-button>
                </div>
            </div>
            <mosaik-expandable part="expandable"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .direction="${e.direction}"
                               .isExpanded="${e.isExpanded}"
                               .disabled="${e.disabled}"
                               ?inert="${!e.isExpanded}"
                               @expanded="${() => e.isExpanded = true}"
                               @collapsed="${() => e.isExpanded = false}">
                <slot></slot>
            </mosaik-expandable>
        </div>

    `;
}
//# sourceMappingURL=ExpanderElementTemplate.js.map