/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { CssLength } from '@breadstone/mosaik-themes';
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { style } from '../../../../Dom/Style';
import { styleMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link ProgressRingElement}.
 *
 * @public
 */
export function progressRingElementTemplate(e) {
    const radius = CssLength.isLength(e.radius) ? CssLength.extractValue(e.radius) : e.radius;
    const diameter = radius * 2;
    const inlineStyle = style `
        :host {
            width: ${diameter}px;
            height: ${diameter}px;
            --_progress-ring-thickness: ${CssLength.toString(e.thickness)};
            --_progress-ring-radius: ${CssLength.toString(e.radius)};
            --_progress-ring-value: ${e.value};
        }
    `;
    return html `
        <style>
            ${inlineStyle}
        </style>
        ${when(e.label.trim(), () => html `
        <slot name="label">
            <mosaik-text part="label"
                         .truncate="${true}"
                         .text="${e.label.trim()}"></mosaik-text>
        </slot>
        `)}
        ${when(e.isIndeterminate, () => html `
        <svg part="svg" class="circle indeterminate"
             viewBox="0 0 ${diameter} ${diameter}"
             style="${styleMap({ width: `${diameter}px`, height: `${diameter}px` })}">
            <circle part="indeterminate" />
        </svg>
        `, () => html `
        <svg part="svg"
             viewBox="0 0 ${diameter} ${diameter}"
             style="${styleMap({ width: `${diameter}px`, height: `${diameter}px` })}">
            <circle part="bar"></circle>
            <circle part="fill"
                    class="circle-path"/>
        </svg>
        `)}
        <div part="hint">
            <slot name="hint"
                  @slotchange="${(x) => x.target.assignedElements().map((y, i) => RendererServiceLocator.current.setStyle(y, 'order', i))}"></slot>
        </div>
    `;
}
//# sourceMappingURL=ProgressRingElementTemplate.js.map