// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, ifDefined, when } from '../../../Directives/Directives';
import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
import { Orientation } from '../../../Types/Orientation';
import { PersonaPresence } from '../../../Types/PersonaPresence';
// #endregion
/**
 * The template of the `PersonaElement`.
 *
 * @public
 */
export function personaElementTemplate(e) {
    return html `
        <mosaik-stack part="root"
                      .orientation="${e.orientation}"
                      .gap="${'8px'}"
                      .verticalAlignment="${e.verticalContentAlignment}"
                      .horizontalAlignment="${e.horizontalContentAlignment}">
            <mosaik-avatar part="avatar"
                           class="${classMap({ 'hide-background': e.src })}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"
                           .dir="${e.dir}"
                           .disabled="${e.disabled}"
                           .icon="${e.icon}"
                           .lang="${e.lang}"
                           .size="${e.size}"
                           .src="${e.src}"
                           .text="${e.text}"
                           .textAccessor="${e.textAccessor}">
                ${when(e.presence !== PersonaPresence.None, () => html `
                <div part="presence"
                     slot="badge">
                    <slot name="presence">
                        <mosaik-dot part="presenceDot"
                                    .disabled="${e.disabled}"></mosaik-dot>
                    </slot>
                </div>
                `)}
            </mosaik-avatar>
            <!-- > -->
            <mosaik-stack .orientation="${Orientation.Vertical}"
                          .horizontalAlignment="${ifDefined(e.orientation === Orientation.Vertical ? HorizontalAlignment.Center : undefined)}">
                ${when(e.primaryText.trim() ? e.primaryText.trim() : e.text.trim(), () => html `
                <mosaik-text part="primaryText"
                             .text="${e.primaryText.trim() ? e.primaryText.trim() : e.text.trim()}"
                             .disabled="${e.disabled}"></mosaik-text>
                `)}
                ${when(e.secondaryText.trim(), () => html `
                <mosaik-text part="secondaryText"
                             .text="${e.secondaryText.trim()}"
                             .disabled="${e.disabled}"></mosaik-text>
                `)}
                ${when(e.tertiaryText.trim(), () => html `
                <mosaik-text part="tertiaryText"
                             .text="${e.tertiaryText.trim()}"
                             .disabled="${e.disabled}"></mosaik-text>
                `)}
                ${when(e.quaternaryText.trim(), () => html `
                <mosaik-text part="quaternaryText"
                             .text="${e.quaternaryText.trim()}"
                             .disabled="${e.disabled}"></mosaik-text>
                `)}
            </mosaik-stack>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=PersonaElementTemplate.js.map