// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { styleMap, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link MeterRingElement}.
 *
 * @public
 */
export function meterRingElementTemplate(e) {
    return html `
        ${when(e.label.trim(), () => html `
        <slot name="label">
            <mosaik-text part="label"
                         .truncate="${true}"
                         .text="${e.label.trim()}"></mosaik-text>
        </slot>
        `)}
        <svg part="root"
             viewBox="0 0 ${e.diameter} ${e.diameter}"
             style="${styleMap({ width: `${e.diameter}px`, height: `${e.diameter}px` })}">
            <circle part="bar"
                    fill="none"
                    cx="${e.radius}"
                    cy="${e.radius}"
                    r="${e.radius - e.thickness / 2}"
                    stroke-width="${e.thickness}"></circle>
            <circle part="fill"
                    fill="none"
                    cx="${e.radius}"
                    cy="${e.radius}"
                    r="${e.radius - e.thickness / 2}"
                    stroke-linecap="'round'"
                    stroke-width="${e.thickness}"
                    stroke-dasharray="${e.getCircumference()} ${e.getCircumference()}"
                    stroke-dashoffset="${e.getOffset()}"></circle>
        </svg>
        <div part="hint">
            <slot name="hint"
                  @slotchange="${(x) => x.target.assignedElements().map((x, i) => RendererServiceLocator.current.setStyle(x, 'order', i))}"></slot>
        </div>
    `;
}
//# sourceMappingURL=MeterRingElementTemplate.js.map