// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { queryShadow } from '../../../Directives/QueryShadow';
import { setEmpty } from '../../../Directives/SetEmpty';
// #endregion
/**
 * The template of the {@link SheetHeaderElement}.
 *
 * @public
 */
export function sheetHeaderElementTemplate(e) {
    const setHost = (host, attribute, hasAttribute) => {
        if (hasAttribute) {
            RendererServiceLocator.current.setAttribute(host, attribute);
        }
        else {
            RendererServiceLocator.current.removeAttribute(host, attribute);
        }
        return hasAttribute;
    };
    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-sheet-header-text .text="${e.text.trim()}"
                                          .formatter="${e.formatter}"
                                          .dir="${e.dir}"></mosaik-sheet-header-text>
            </slot>
            <slot name="subHeader"
                  @changed="${(x) => handleChanged(x, 'text', 'subHeader')}">
                <mosaik-sheet-header-sub-text .text="${e.subText.trim()}"
                                              .formatter="${e.formatter}"
                                              .dir="${e.dir}"></mosaik-sheet-header-sub-text>
            </slot>
        </div>
        <slot name="suffix"></slot>
    `;
}
//# sourceMappingURL=SheetHeaderElementTemplate.js.map