// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, when } from '../../../Directives/Directives';
import { setEmpty } from '../../../Directives/SetEmpty';
// #endregion
/**
 * The template of the {@link WizardElement}.
 *
 * @public
 */
export function wizardElementTemplate(e) {
    const hasHeader = e.selectedItem?.header?.trim() ?? e.selectedItem?.subHeader?.trim();
    return html `
        <div part="header">
            <slot name="header">
                ${when(hasHeader, () => html `
                <mosaik-title-layout .dir="${e.dir}"
                                     .lang="${e.lang}">
                    <slot name="header-before"
                          slot="start"></slot>
                    <mosaik-toolbar part="toolbar"
                                    .dir="${e.dir}"
                                    .lang="${e.lang}"
                                    .title="${e.selectedItem?.header ?? ''}"
                                    .subTitle="${e.selectedItem?.subHeader ?? ''}"
                                    .formatter="${e.selectedItem?.formatter ?? null}"
                                    .appearance="${'plain'}">
                    </mosaik-toolbar>
                    <slot name="header-after"
                          slot="end"></slot>
                </mosaik-title-layout>
                `)}
            </slot>
        </div>
        <div part="content"
             class="${classMap({ 'has-header': hasHeader })}">
            <slot name="steps"
                  @slotchange="${() => e.onSlotChange()}"></slot>
        </div>
        <div part="footer"
             ?hidden="${!e.hasSlotContent('footer')}">
            <slot name="footer"
                  @slotchange="${(x) => setEmpty(x.target.parentElement, x.target.assignedElements().length === 0)}"></slot>
        </div>
    `;
}
//# sourceMappingURL=WizardElementTemplate.js.map