// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { classMap, ifDefined, live, when } from '../../../Directives/Directives';
import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
import { ifNonNull } from '../../../Directives/IfNonNull';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
import { Placement } from '../../../Types/Placement';
import { RangeSelectionMode } from '../../../Types/RangeSelectionMode';
import { Size } from '../../../Types/Size';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the `DateTimeBoxElement`.
 *
 * @public
 */
export function dateTimeBoxElementTemplate(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"
             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"
                   id="input"
                   type="text"
                   name="${ifNonEmpty(e.name)}"
                   placeholder="${ifNonEmpty(e.isFocused || !e.label ? e.placeholder : '')}"
                   tabindex="${e.tabIndex}"
                   autocomplete="${ifDefined(e.autocomplete ? 'on' : 'off')}"
                   aria-invalid="${ifDefined(e.invalid)}"
                   .value="${live(e.displayValue)}"
                   ?readonly="${e.readonly}"
                   ?disabled="${e.disabled}"
                   ?required="${e.required}"
                   ?autofocus="${e.autofocus}"
                   @change="${(x) => e.onChange(x)}"
                   @input="${(x) => e.onInput(x)}"
                   @focus="${(x) => e.onFocus(x)}"
                   @blur="${(x) => e.onBlur(x)}"/>
        </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}"
                       .disabled="${e.disabled}"
                       @click="${() => e.clear()}"></mosaik-button>
        `)}
        <mosaik-button part="picker"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.calendar}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       .disabled="${e.disabled}"
                       @click="${() => e.toggle()}"></mosaik-button>
        <div part="suffix"
             ?hidden="${!e.hasSlotContent('suffix')}">
            <slot name="suffix"></slot>
        </div>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .anchor="${e}"
                             .placement="${e.dropDownPlacement}"
                             .distance="${e.dropDownDistance}"
                             .skidding="${e.dropDownSkidding}"
                             .strategy="${e.dropDownStrategy}"
                             .sync="${'none'}"
                             .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                             .maxHeight="${e.dropDownMaxHeight}"
                             .height="${e.dropDownHeight}"
                             .maxWidth="${e.dropDownMaxWidth}"
                             .width="${e.dropDownWidth}"
                             ?flip="${true}"
                             ?shift="${true}"
                             ?active="${e.isDropDownOpen}">
                <div part="datetime-content"
                     style="display: flex; flex-direction: row; background: var(--mosaik-scheme-background); border: var(--mosaik-layout-thickness) solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--mosaik-layout-radius); overflow: hidden;">
                    <mosaik-calendar part="calendar"
                                     style="--calendar-border-width: 0; --calendar-border-radius: 0; --calendar-border-style: none; flex-shrink: 0;"
                                     .dir="${e.dir}"
                                     .value="${ifNonNull(e.value)}"
                                     .values="${e.values}"
                                     .blackoutDates="${e.blackoutDates}"
                                     .firstDayOfWeek="${e.firstDayOfWeek}"
                                     .markerHandler="${e.markerHandler}"
                                     .maxDate="${ifNonNull(e.maxDate)}"
                                     .minDate="${ifNonNull(e.minDate)}"
                                     .selectionMode="${RangeSelectionMode.Single}"
                                     .showAdjacent="${e.showAdjacent}"
                                     .showWeekNumbers="${e.showWeekNumbers}"
                                     .specialDates="${e.specialDates}"
                                     .orientation="${Orientation.Vertical}"
                                     .view="${e.view}"
                                     .allowedViews="${e.allowedViews}"
                                     ?show-navigation="${e.showNavigation}"
                                     .appearance="${e.appearance}"
                                     .variant="${e.variant}"
                                     .displayDate="${e.displayDate}"
                                     .displayDateStart="${e.displayDateStart}"
                                     .displayDateEnd="${e.displayDateEnd}"
                                     ?disabled="${e.disabled}"
                                     ?is-today-highlighted="${e.isTodayHighlighted}"
                                     ?is-weekend-highlighted="${e.isWeekendHighlighted}"
                                     @dateChanged="${(x) => e.onDateChanged(x.detail, x.currentTarget)}">
                    </mosaik-calendar>
                    <div part="time-divider"
                         style="width: 1px; flex-shrink: 0; background: color-mix(in srgb, currentColor 15%, transparent);"></div>
                    <div part="time-picker"
                         style="display: flex; flex-direction: column; min-width: 120px; align-self: stretch;">
                        ${when(e.is12Hour, () => html `
                        <div part="ampm-toggle"
                             style="display: flex; flex-direction: row; justify-content: center; gap: 4px; padding: 8px; flex-shrink: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);">
                            <mosaik-button part="ampm-button"
                                           .label="${'AM'}"
                                           .appearance="${e.isAM ? Appearance.Soft : Appearance.Plain}"
                                           .size="${Size.Small}"
                                           .disabled="${e.disabled}"
                                           @click="${() => e.onAmPmToggled(true)}"></mosaik-button>
                            <mosaik-button part="ampm-button"
                                           .label="${'PM'}"
                                           .appearance="${!e.isAM ? Appearance.Soft : Appearance.Plain}"
                                           .size="${Size.Small}"
                                           .disabled="${e.disabled}"
                                           @click="${() => e.onAmPmToggled(false)}"></mosaik-button>
                        </div>
                        `)}
                        <div part="time-columns"
                             style="position: relative; flex: 1; min-height: 0;">
                            <div style="position: absolute; inset: 0; display: flex; flex-direction: row; overflow: hidden;">
                                <mosaik-wheel-picker part="hour-column"
                                                      style="--wheel-picker-column-max-height: none;"
                                                      .items="${e.hourItems}"
                                                      .value="${String(e.selectedDisplayHour)}"
                                                      .variant="${e.variant}"
                                                      .appearance="${e.appearance}"
                                                      aria-label="Hour"
                                                      @wheelPickerChange="${(x) => e.onHourChanged(x)}"></mosaik-wheel-picker>
                                <mosaik-wheel-picker part="minute-column"
                                                      style="--wheel-picker-column-max-height: none;"
                                                      .items="${e.minuteItems}"
                                                      .value="${String(e.selectedMinute)}"
                                                      .variant="${e.variant}"
                                                      .appearance="${e.appearance}"
                                                      aria-label="Minute"
                                                      @wheelPickerChange="${(x) => e.onMinuteChanged(x)}"></mosaik-wheel-picker>
                            </div>
                        </div>
                    </div>
                </div>
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=DateTimeBoxElementTemplate.js.map