/* 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';
import { Orientation } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the {@link ProgressBarElement}.
 *
 * @public
 */
export function progressBarElementTemplate(e) {
    const inlineStyle = style `
        :host {
            --segments: ${e.segments};
        }
    `;
    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>
        `)}
        <div class="progress-container">
            <div class="outer">
                <div class="inner">
                    ${when(e.isIndeterminate, () => html `
                        ${when(e.orientation === Orientation.Horizontal, () => html `
                            <div class="bg indeterminate"
                                 style="${styleMap({ height: `${CssLength.tryParse(e.thickness)}` })}">
                            </div>
                            `, () => html `
                            <div class="bg indeterminate"
                                 style="${styleMap({ width: `${CssLength.tryParse(e.thickness)}` })}">
                            </div>
                        `)}
                        `, () => html `
                        ${when(e.orientation === Orientation.Horizontal, () => html `
                            <div class="bg"
                                 style="${styleMap({ height: `${CssLength.tryParse(e.thickness)}`, width: `${e.value / e.max * 100}%` })}">
                            </div>
                            `, () => html `
                            <div class="bg"
                                 style="${styleMap({ width: `${CssLength.tryParse(e.thickness)}`, height: `${e.value / e.max * 100}%` })}">
                            </div>
                        `)}
                    `)}
                </div>
            </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=ProgressBarElementTemplate.js.map