/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { ImageLegendPosition } from '../../../Types/ImageLegendPosition';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the `ImageElement`.
 *
 * @public
 */
export function imageElementTemplate(e) {
    return html `
        <style>
            :host {
                min-width: ${e.width};
                width: ${e.width};
                min-height: ${e.height};
                height: ${e.height};
            }
        </style>
        <img part="image"
             loading="lazy"
             alt="${e.alt}"
             src="${e.src}"
             srcset="${e.srcset}"
             style="object-fit: ${e.fit}"
             width="${e.width}"
             height="${e.height}"
             @error="${() => e.onImageError()}"
             @load="${() => e.onImageLoad()}">
        ${when(e.thumbnailSrc, () => html `
        <img part="thumbnail"
             alt=""
             src="${e.thumbnailSrc}"
             aria-hidden="true">
        `)}
        <div part="placeholder">
            ${when(!e.src && e.showEmpty, () => html `
            <slot name="empty">
                <mosaik-icon .data="${'m11.475 13.718.083-.071a.75.75 0 0 1 .874-.007l.093.078 6.928 6.8A3.235 3.235 0 0 1 17.75 21H6.25a3.235 3.235 0 0 1-1.703-.481l6.928-6.801.083-.071-.083.07ZM17.75 3A3.25 3.25 0 0 1 21 6.25v11.5c0 .627-.178 1.213-.485 1.71l-6.939-6.813-.128-.116a2.25 2.25 0 0 0-2.889-.006l-.135.123-6.939 6.811A3.235 3.235 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm-1.998 3a2.252 2.252 0 1 0 0 4.504 2.252 2.252 0 0 0 0-4.504Zm0 1.5a.752.752 0 1 1 0 1.504.752.752 0 0 1 0-1.504Z'}"
                             .size="${Size.Large}"
                             .variant="${e.variant}"></mosaik-icon>
            </slot>
            `)}
            ${when(e.state === 'pending' && e.showPending, () => html `
            <slot name="pending">
                <mosaik-progress-ring .thickness="${'2px'}"
                                      .radius="${'12px'}"
                                      .variant="${e.variant}"
                                      .isIndeterminate="${true}"></mosaik-progress-ring>
            </slot>
            `)}
            ${when(e.src && e.state === 'failed' && e.showFailed, () => html `
            <slot name="failed">
                <mosaik-icon .data="${Icons.errorCircle}"
                             .size="${Size.Large}"
                             .variant="${e.variant}"></mosaik-icon>
            </slot>
            `)}
        </div>
        ${when(e.legendPosition !== ImageLegendPosition.None, () => html `
        <div part="legend">
            <slot name="legend">
            ${when(e.legend.trim(), () => html `
            <mosaik-text .text="${e.legend}"
                         .wrap="${true}"
                         .maxLines="${2}"></mosaik-text>
            `)}
            </slot>
        </div>
        `)}
        <div part="content">
            <slot></slot>
        </div>
    `;
}
//# sourceMappingURL=ImageElementTemplate.js.map