// #region Imports
import { html } from '../../../Dom/Html';
import { when } from '../../Directives/Directives';
import { Size } from '../../Types/Size';
// #endregion
/**
 * The template of the {@link FormFieldElement}.
 *
 * @public
 */
export function formFieldElementTemplate(e) {
    return html `
        <div part="root">
            ${when(e.label.trim() || e.info.trim(), () => html `
            <div part="title">
                <label part="label">
                    <mosaik-text .text="${e.label}"
                                 .truncate="${true}"></mosaik-text>
                    ${when(e.required, () => html `
                    <mosaik-text .text="${'*'}"></mosaik-text>
                    `)}
                </label>
                <slot name="actions"></slot>
                <mosaik-toggletip .content="${e.info}" .size="${Size.Small}"></mosaik-toggletip>
            </div>
            `)}
            <slot @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            ${when(e.error.trim() || e.validationMessage.trim() || e.hint.trim(), () => html `
            <div part="detail">
                ${when(e.error.trim().length, () => html `
                <mosaik-error part="error"
                              .text="${e.error}"></mosaik-error>
                `)}
                ${when(e.validationMessage.trim().length, () => html `
                <mosaik-error part="error"
                              .text="${e.validationMessage}"></mosaik-error>
                `)}
                ${when(e.hint.trim().length, () => html `
                <mosaik-hint part="hint"
                             .text="${e.hint}"></mosaik-hint>
                `)}
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=FormFieldElementTemplate.js.map