// #region Imports
import { html } from '../../../../Dom/Html';
import { ifDefined, repeat, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `CalendarItemElement`.
 *
 * @public
 */
export function calendarItemElementTemplate(e) {
    const markers = e.markers ?? [];
    const maxVisibleMarkers = 3;
    const visibleMarkers = markers.length > maxVisibleMarkers ? markers.slice(0, maxVisibleMarkers) : markers;
    const overflowMarkerCount = markers.length - maxVisibleMarkers;
    return html `
        ${when(!e.disabled && !e.isBlackout, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        ${when(!e.disabled && !e.isBlackout && e.ripple, () => html `
        <mosaik-ripple part="ripple"
                       .variant="${e.variant}"
                       @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
        `)}
        <mosaik-text part="text"
                     .dir="${e.dir}"
                     .text="${e.text}"
                     .disabled="${e.disabled}"></mosaik-text>
        ${when(markers.length, () => html `
        <div part="markers">
            ${repeat(visibleMarkers, (x) => html `
            <mosaik-dot part="marker"
                        .dir="${e.dir}"
                        ?disabled="${ifDefined(x.disabled)}"
                        .variant="${ifDefined(x.variant)}"
                        .size="${ifDefined(x.size)}"></mosaik-dot>
            `)}
            ${when(overflowMarkerCount > 0, () => html `
            <span part="marker overflow">
                +${overflowMarkerCount}
             </span>
            `)}
        </div>
        `)}
    `;
}
//# sourceMappingURL=CalendarItemElementTemplate.js.map