// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { classMap, ifDefined, when } from '../../../Directives/Directives';
import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
import { Size } from '../../../Types/Size';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the {@link NumberBoxElement}.
 *
 * @public
 */
export function numberBoxElementTemplate(e) {
    const formattedValue = () => {
        const maybeFormattedValue = e.formatter
            ? e.formatter(e.value?.toString() ?? '')
            : e.value?.toString() ?? '';
        return maybeFormattedValue;
    };
    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"
             class="${classMap({ prefix: e.hasPrefix, suffix: e.hasSuffix })}">
            ${when(e.label, () => html `
            <label part="label"
                   for="input"
                   class="${classMap({ floating: e.value !== null || e.isFocused })}">${e.label}</label>
            `)}
            <input part="input"
                   .value="${formattedValue()}"
                   ?readonly="${e.readonly}"
                   ?disabled="${e.disabled}"
                   ?required="${e.required}"
                   ?autofocus="${e.autofocus}"
                   id="input"
                   name="${ifNonEmpty(e.name)}"
                   type="number"
                   pattern="${ifNonEmpty(e.pattern)}"
                   placeholder="${ifNonEmpty(e.isFocused || !e.label ? e.placeholder : '')}"
                   tabindex="${e.tabIndex}"
                   autocomplete="${ifDefined(e.autocomplete ? 'on' : 'off')}"
                   inputmode="${ifNonEmpty(e.keyboard)}"
                   min="${e.min}"
                   max="${e.max}"
                   step="${e.step}"
                   aria-invalid="${ifDefined(e.invalid)}"
                   @change="${(x) => e.onChange(x)}"
                   @input="${(x) => e.onInput(x)}"
                   @focus="${(x) => e.onFocus(x)}"
                   @blur="${(x) => e.onBlur(x)}"/>
        </div>
        ${when(e.isBusy, () => html `
        <mosaik-progress-ring part="progressRing"
                              .thickness="${'2px'}"
                              .radius="${'12px'}"
                              .variant="${e.variant}"
                              .isIndeterminate="${true}"
                              ?disabled="${e.disabled}"></mosaik-progress-ring>
        `)}
        ${when(!e.disabled && !e.readonly && e.value && e.isClearable && !e.isBusy, () => html `
        <mosaik-button part="clear"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.clear}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       @click="${() => e.clear()}"></mosaik-button>
        `)}
        ${when(e.spinner, () => html `
        <mosaik-updown-spinner part="spinner"
                               .orientation="${Orientation.Horizontal}"
                               .size="${Size.Small}"
                               .appearance="${Appearance.Plain}"
                               .position="${e.spinPosition}"
                               .disabled="${e.disabled}"></mosaik-updown-spinner>
        `)}
        <div part="suffix"
             ?hidden="${!e.hasSlotContent('suffix')}">
            <slot name="suffix"></slot>
        </div>
    `;
}
//# sourceMappingURL=NumberBoxElementTemplate.js.map