/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { AudioLegendPosition } from '../../../Types/AudioLegendPosition';
// #endregion
/**
 * The template of the {@link AudioElement}.
 *
 * @public
 */
export function audioElementTemplate(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>
        <audio part="audio"
               src="${src(e.src)}"
               ?autoplay="${e.autoPlay}"
               ?muted="${e.muted}"
               ?loop="${e.loop}"
               ?controls="${!e.disabled && e.showControls}"></audio>
        ${when(e.legendPosition !== AudioLegendPosition.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=AudioElementTemplate.js.map