// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { repeat, styleMap, when } from '../../../Directives/Directives';
import { MeterScale } from '../../../Types/MeterScale';
// #endregion
/**
 * The template of the `MeterBarElement`.
 *
 * @public
 */
export function meterBarElementTemplate(e) {
    const percentage = e.percent;
    const isSegmented = e.scale === MeterScale.Segmented;
    return html `
        ${when(e.label.trim(), () => html `
        <slot name="label">
            <mosaik-text part="label"
                         .truncate="${true}"
                         .text="${e.label.trim()}"></mosaik-text>
        </slot>
        `)}
        <div part="bar"
             style="${styleMap({ height: `${e.thickness}px` })}">
            ${when(isSegmented, () => html `
                <div part="segments">
                    ${repeat(e.segments, (segment) => segment.range, (segment) => html `
                    <div part="segment"
                         data-range="${segment.range}"
                         style="${styleMap({ width: `${segment.width}%` })}"></div>
                    `)}
                </div>
                <div part="marker"
                     style="${styleMap({ left: `${percentage}%` })}"></div>
            `, () => html `
                <div part="fill"
                     style="width: ${percentage}%"></div>
            `)}
        </div>
        <div part="hint">
            <slot name="hint"
                  @slotchange="${(x) => x.target.assignedElements().map((y, i) => RendererServiceLocator.current.setStyle(y, 'order', i))}"></slot>
        </div>
    `;
}
//# sourceMappingURL=MeterBarElementTemplate.js.map