/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { VideoLegendPosition } from '../../../Types/VideoLegendPosition';
// #endregion
/**
 * The template of the {@link VideoElement}.
 *
 * @public
 */
export function videoElementTemplate(e) {
    const src = (value) => typeof value === 'string'
        ? value
        : value;
    return html `
        <style>
            :host {
                min-width: ${e.width};
                width: ${e.width};
                min-height: ${e.height};
                height: ${e.height};
            }
        </style>
        <video part="video"
               src="${src(e.src)}"
               width="${e.width}"
               height="${e.height}"
               ?playsinline="${!e.autoFullScreen}"
               ?autoplay="${e.autoPlay}"
               ?controls="${!e.disabled && e.showControls}"></video>
        ${when(e.legendPosition !== VideoLegendPosition.None, () => html `
        <div part="legend">
            <slot name="legend"></slot>
            ${when(e.legend.trim(), () => html `
            <mosaik-text .text="${e.legend}"
                         .wrap="${true}"
                         .maxLines="${2}"></mosaik-text>
            `)}
        </div>
        `)}
        <div part="content">
            <slot></slot>
        </div>
    `;
}
//# sourceMappingURL=VideoElementTemplate.js.map