// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat, styleMap, when } from '../../../Directives/Directives';
import { flex } from '../../../Directives/Flex/FlexDirective';
import { FlowDirection } from '../../../Types/FlowDirection';
import { Orientation } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the `RatingElement`.
 *
 * @public
 */
export function ratingElementTemplate(e) {
    return html `
        <div part="root"
             role="slider"
             aria-readonly="${e.readonly ? 'true' : 'false'}"
             aria-valuemin="${0}"
             aria-valuemax="${e.length}"
             tabindex="${e.disabled ? '-1' : '0'}">
            <span ${flex({ direction: e.orientation === Orientation.Vertical ? 'column' : 'row' })}
                  part="symbols">
                ${repeat([].constructor(e.length), (x, i) => html `
                ${when(Number(e.value) > i && Number(e.value) < i + 1, () => html `
                <mosaik-icon part="symbol"
                             class="${e.isHovering && Math.ceil(Number(e.value)) === i + 1 ? 'hover' : ''} ${'active'}"
                             style=${styleMap({ clipPath: e.dir === FlowDirection.RightToLeft ? `inset(0 0 0 ${100 - (Number(e.value) - i) * 100}%)` : `inset(0 ${100 - (Number(e.value) - i) * 100}% 0 0)` })}
                             .dir="${e.dir}"
                             .lang="${e.lang}"
                             .inline=${true}
                             .size=${e.size}
                             .data="${e.symbolAccessor(i + 1)}"
                             ?disabled="${e.disabled}"></mosaik-icon>
                `, () => html `
                <mosaik-icon part="symbol"
                             class="${e.isHovering && Math.ceil(Number(e.value)) === i + 1 ? 'hover' : ''} ${Number(e.value) >= i + 1 ? 'active' : ''}"
                             .dir="${e.dir}"
                             .lang="${e.lang}"
                             .inline=${true}
                             .size=${e.size}
                             .data="${e.symbolAccessor(i + 1)}"
                             ?disabled="${e.disabled}"></mosaik-icon>
                `)}
                `)}
            </span>
        </div>
    `;
}
//# sourceMappingURL=RatingElementTemplate.js.map