// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer.js';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link FlowBoardColumnItemElement}.
 *
 * @public
 */
export function flowBoardColumnItemElementTemplate(e) {
    const setHost = (host, attribute, hasAttribute) => {
        if (hasAttribute) {
            RendererServiceLocator.current.setAttribute(host, attribute);
        }
        else {
            RendererServiceLocator.current.removeAttribute(host, attribute);
        }
        return hasAttribute;
    };
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(x) => x.target.attach(e)}"></mosaik-focus-ring>
        <mosaik-ripple .variant="${e.variant}"
                        @connected="${(x) => x.target.attach(e)}"></mosaik-ripple>

        `)}
        <div part="container"
             .lang="${e.lang}"
             .dir="${e.dir}">
            <div part="header">
                <div part="titleGroup">
                    <div part="title"
                         ?hidden="${!setHost(e, 'has-title', e.hasSlotContent('title'))}">
                        <slot name="title"></slot>
                    </div>
                    <div part="subtitle"
                         ?hidden="${!setHost(e, 'has-subtitle', e.hasSlotContent('subtitle'))}">
                        <slot name="subtitle"></slot>
                    </div>
                </div>
                <div part="actions"
                     ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
                    <slot name="actions"></slot>
                </div>
            </div>
            <div part="meta"
                 ?hidden="${!setHost(e, 'has-meta', e.hasSlotContent('meta'))}">
                <slot name="meta"></slot>
            </div>
            <div part="footer"
                 ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('footer'))}">
                <slot name="footer"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=FlowBoardColumnItemElementTemplate.js.map