// #region Imports
import { html } from '../../../../Dom/Html';
import { queryShadow } from '../../../Directives/QueryShadow';
import { setEmpty } from '../../../Directives/SetEmpty';
import { setHost } from '../../../Directives/setHost';
// #endregion
/**
 * The template of the `DrawerHeaderElement`.
 *
 * @public
 */
export function drawerHeaderElementTemplate(e) {
    const handleChanged = (x, prop, slot) => {
        if (x.detail.propertyName === prop) {
            const el = queryShadow(e, '[part="heading"]', true);
            setEmpty(el.parentElement, e.hasSlotContent(slot));
            setHost(e, `has-${slot}`, e.hasSlotContent(slot));
        }
    };
    return html `
        <slot name="prefix"></slot>
        <div part="heading">
            <slot name="header"
                  @changed="${(x) => handleChanged(x, 'text', 'header')}">
                <mosaik-drawer-header-text .text="${e.text.trim()}"
                                           .formatter="${e.formatter}"
                                           .dir="${e.dir}"></mosaik-drawer-header-text>
            </slot>
            <slot name="subHeader"
                  @changed="${(x) => handleChanged(x, 'text', 'subHeader')}">
                <mosaik-drawer-header-sub-text .text="${e.subText.trim()}"
                                               .formatter="${e.formatter}"
                                               .dir="${e.dir}"></mosaik-drawer-header-sub-text>
            </slot>
        </div>
        <slot name="suffix"></slot>
    `;
}
//# sourceMappingURL=DrawerHeaderElementTemplate.js.map