// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { classMap, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Size } from '../../../Types/Size';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the `DurationBoxElement`.
 *
 * @public
 */
export function durationBoxElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.invalid ? Variant.Danger : e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        <div part="prefix"
             ?hidden="${!e.hasSlotContent('prefix')}">
            <slot name="prefix"></slot>
        </div>
        <div part="inner">
            ${when(e.label, () => html `
            <label part="label"
                   class="${classMap({ floating: e.value !== null || e.isFocused })}">${e.label}</label>
            `)}
            <div part="segments">
                <input part="hours-segment segment"
                       .value="${e.hours}"
                       ?readonly="${e.readonly}"
                       ?disabled="${e.disabled}"
                       ?autofocus="${e.autofocus}"
                       type="text"
                       inputmode="numeric"
                       maxlength="3"
                       placeholder="${e.isFocused || !e.label ? 'HH' : ''}"
                       aria-label="Hours"
                       aria-invalid="${e.invalid}"
                       @input="${(x) => e.onSegmentInput('hours', x)}"
                       @change="${(x) => e.onSegmentChange('hours', x)}"
                       @focus="${(x) => e.onSegmentFocus(x)}"
                       @blur="${(x) => e.onSegmentBlur('hours', x)}"
                       @keydown="${(x) => e.onSegmentKeyDown('hours', x)}"/>
                <span part="separator">:</span>
                <input part="minutes-segment segment"
                       .value="${e.minutes}"
                       ?readonly="${e.readonly}"
                       ?disabled="${e.disabled}"
                       type="text"
                       inputmode="numeric"
                       maxlength="2"
                       placeholder="${e.isFocused || !e.label ? 'MM' : ''}"
                       aria-label="Minutes"
                       aria-invalid="${e.invalid}"
                       @input="${(x) => e.onSegmentInput('minutes', x)}"
                       @change="${(x) => e.onSegmentChange('minutes', x)}"
                       @focus="${(x) => e.onSegmentFocus(x)}"
                       @blur="${(x) => e.onSegmentBlur('minutes', x)}"
                       @keydown="${(x) => e.onSegmentKeyDown('minutes', x)}"/>
                <span part="separator">:</span>
                <input part="seconds-segment segment"
                       .value="${e.seconds}"
                       ?readonly="${e.readonly}"
                       ?disabled="${e.disabled}"
                       type="text"
                       inputmode="numeric"
                       maxlength="2"
                       placeholder="${e.isFocused || !e.label ? 'SS' : ''}"
                       aria-label="Seconds"
                       aria-invalid="${e.invalid}"
                       @input="${(x) => e.onSegmentInput('seconds', x)}"
                       @change="${(x) => e.onSegmentChange('seconds', x)}"
                       @focus="${(x) => e.onSegmentFocus(x)}"
                       @blur="${(x) => e.onSegmentBlur('seconds', x)}"
                       @keydown="${(x) => e.onSegmentKeyDown('seconds', x)}"/>
            </div>
        </div>
        ${when(!e.disabled && !e.readonly && e.value && e.isClearable, () => html `
        <mosaik-button part="clear"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.clear}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       @click="${() => e.clear()}"></mosaik-button>
        `)}
        <div part="suffix"
             ?hidden="${!e.hasSlotContent('suffix')}">
            <slot name="suffix"></slot>
        </div>
    `;
}
//# sourceMappingURL=DurationBoxElementTemplate.js.map