// #region Imports
import { html } from '../../../Dom/Html';
import { Icons } from '../../../Resources/Icons';
import { when } from '../../Directives/Directives';
import { Orientation } from '../../Types/Orientation';
import { Size } from '../../Types/Size';
import { VerticalAlignment } from '../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link FormFieldElement}.
 *
 * @public
 */
export function formFieldElementTemplate(e) {
    return html `
        <mosaik-stack .orientation="${Orientation.Vertical}"
                      .verticalAlignment="${e.verticalContentAlignment}"
                      .horizontalAlignment="${e.horizontalContentAlignment}"
                      .gap="${'4px'}">
            ${when(e.label.trim() || e.info.trim(), () => html `
            <mosaik-stack .orientation="${Orientation.Horizontal}"
                          .verticalAlignment="${VerticalAlignment.Center}"
                          .gap="${'8px'}">
                <label part="label">
                    <mosaik-text .text="${e.label}"
                                 .truncate="${true}"></mosaik-text>
                    ${when(e.required, () => html `
                    <mosaik-text .text="${'*'}"></mosaik-text>
                    `)}
                </label>
                <slot name="info">
                    ${when(e.info, () => html `
                    <mosaik-tooltip .content="${e.info}">
                        <mosaik-icon .size="${Size.Small}"
                                     .inline="${true}"
                                     .data="${Icons.infoCircle}"></mosaik-icon>
                    </mosaik-tooltip>
                    `)}
                </slot>
            </mosaik-stack>
            `)}
            <slot @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            ${when(e.error.trim() || e.validationMessage.trim() || e.hint.trim(), () => html `
            <mosaik-stack part="detail"
                          .orientation="${Orientation.Horizontal}"
                          .verticalAlignment="${VerticalAlignment.Center}">
                ${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>
                `)}
            </mosaik-stack>
            `)}
        </mosaik-stack>
    `;
}
//# sourceMappingURL=FormFieldElementTemplate.js.map