@k2b/ui 0.1.0-rc.0

package/dist/ssr/inputs/DatePicker.js

@@ -0,0 +1,629 @@
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$2 = ["<span class=\"k2b-date-trigger__value\">", "</span>"],
+  _tmpl$3 = "<i class=\"ti ti-chevron-down k2b-date-trigger__chevron\" aria-hidden=\"true\"></i>",
+  _tmpl$4 = ["<button type=\"button\" class=\"k2b-date-trigger__clear k2b-input-clear-action\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$5 = ["<span class=\"k2b-date-popover__timezone\"><i class=\"ti ti-world\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$6 = ["<footer class=\"k2b-date-popover__footer\"><span>", "</span>", "</footer>"],
+  _tmpl$7 = ["<div class=\"k2b-date-picker\"", ">", "", "<div id=\"", "\" class=\"k2b-date-popover\" popover=\"auto\" role=\"dialog\"", ">", "", "</div></div>"],
+  _tmpl$8 = ["<aside class=\"k2b-date-presets\"", ">", "</aside>"],
+  _tmpl$9 = ["<button type=\"button\">", "</button>"],
+  _tmpl$0 = ["<div class=\"k2b-date-weekdays\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$1 = ["<div class=\"k2b-date-grid\" role=\"grid\">", "</div>"],
+  _tmpl$10 = ["<section class=\"k2b-date-calendar\"", "><header class=\"k2b-date-calendar__header\"><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-date-calendar__title\">", "</button><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-right\" aria-hidden=\"true\"></i></button></header>", "</section>"],
+  _tmpl$11 = ["<div class=\"k2b-date-months\" role=\"group\" aria-label=\"", "\">", "</div>"],
+  _tmpl$12 = ["<button type=\"button\"", ">", "</button>"],
+  _tmpl$13 = ["<span>", "</span>"],
+  _tmpl$14 = ["<div class=\"k2b-date-week\" role=\"row\">", "</div>"],
+  _tmpl$15 = ["<button type=\"button\" role=\"gridcell\"", ">", "</button>"],
+  _tmpl$16 = ["<label class=\"k2b-date-time\">", "<span class=\"k2b-date-time__control\"><input type=\"text\" inputmode=\"numeric\"", " placeholder=\"09:00\"", "><i class=\"ti ti-clock\" aria-hidden=\"true\"></i></span></label>"],
+  _tmpl$17 = ["<div class=\"k2b-date-popover__body\">", "", "</div>"],
+  _tmpl$18 = ["<div class=\"k2b-date-actions\">", "<button type=\"button\" class=\"k2b-date-apply\"", ">Apply</button></div>"],
+  _tmpl$19 = ["<span class=\"k2b-date-range-value\"><span>", "</span><i class=\"ti ti-arrow-narrow-right\" aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$20 = ["<span class=\"k2b-date-duration\"><i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$21 = ["<div class=\"k2b-date-range-times\">", "", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-date-durations\" role=\"group\"", ">", "</div>"];
+import { dates } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+const popoverIsOpen = popover => {
+  if (!popover) return false;
+  try {
+    return popover.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+export const placeDatePopover = (trigger, popover, wide) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = trigger.getBoundingClientRect();
+  // Keep the panel at its designed width instead of stretching to a full-width
+  // trigger; it only ever shrinks to fit a narrow viewport.
+  const preferredWidth = wide ? 440 : 336;
+  const width = Math.min(preferredWidth, window.innerWidth - margin * 2);
+  popover.style.width = `${width}px`;
+  const popoverRect = popover.getBoundingClientRect();
+  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const roomAbove = rect.top - gap - margin;
+  const opensAbove = popoverRect.height > roomBelow && roomAbove > roomBelow;
+  const top = opensAbove ? Math.max(margin, rect.top - popoverRect.height - gap) : Math.min(rect.bottom + gap, window.innerHeight - popoverRect.height - margin);
+  popover.style.left = `${left}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+function PickerShell(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.owner.id);
+  const [open, setOpen] = createSignal(false);
+  const error = () => resolveMaybeAccessor(props.owner.error);
+  let trigger;
+  let popover;
+  const place = () => {
+    if (trigger && popover && open()) placeDatePopover(trigger, popover, props.wide ?? false);
+  };
+  const close = () => {
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+    setOpen(false);
+  };
+  const show = () => {
+    if (props.owner.disabled || !popover || popoverIsOpen(popover)) return;
+    props.onOpen?.();
+    popover.showPopover();
+    setOpen(true);
+    queueMicrotask(() => {
+      place();
+      const initial = popover?.querySelector('[data-date-focus="true"]') ?? popover?.querySelector('[data-date-day]:not([data-outside="true"])');
+      initial?.focus();
+    });
+  };
+  const toggle = () => open() ? close() : show();
+  onMount(() => {
+    const syncOpenState = () => setOpen(popoverIsOpen(popover));
+    popover?.addEventListener("toggle", syncOpenState);
+    onCleanup(() => popover?.removeEventListener("toggle", syncOpenState));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    });
+  });
+  onCleanup(close);
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.owner.class;
+    },
+    get label() {
+      return props.owner.label;
+    },
+    get description() {
+      return props.owner.description;
+    },
+    get error() {
+      return error();
+    },
+    get required() {
+      return props.owner.required;
+    },
+    get disabled() {
+      return props.owner.disabled;
+    },
+    meta: meta,
+    get children() {
+      return _$ssr(_tmpl$7, _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("button", _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        type: "button",
+        "class": "k2b-date-trigger",
+        get ["data-placeholder"]() {
+          return props.valueLabel() ? undefined : "true";
+        },
+        get ["data-open"]() {
+          return open() ? "true" : undefined;
+        },
+        get disabled() {
+          return props.owner.disabled;
+        },
+        "aria-haspopup": "dialog",
+        get ["aria-expanded"]() {
+          return open();
+        },
+        get ["aria-controls"]() {
+          return `${meta.controlId}-popover`;
+        }
+      }, () => fieldControlAria(meta, props.owner)), [_$ssr(_tmpl$, `${_$escape(props.icon, true)} k2b-date-trigger__icon`), _$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.valueLabel();
+        },
+        get fallback() {
+          return props.owner.placeholder ?? messages().pickDate;
+        },
+        get children() {
+          return props.valueContent?.() ?? props.valueLabel();
+        }
+      }))), _$ssr(_tmpl$3)], false), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.owner.clearable && props.valueLabel() && !props.owner.disabled;
+        },
+        get children() {
+          return _$ssr(_tmpl$4, _$ssrAttribute("aria-label", _$escape(messages().clearDate, true), false));
+        }
+      })), `${_$escape(meta.controlId, true)}-popover`, _$ssrAttribute("aria-label", typeof props.owner.label === "string" ? _$escape(props.owner.label, true) : _$escape(messages().datePicker, true), false), _$escape(props.children(close)), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.footerMeta || props.timezone;
+        },
+        get children() {
+          return _$ssr(_tmpl$6, _$escape(props.footerMeta?.()), _$escape(_$createComponent(Show, {
+            get when() {
+              return props.timezone;
+            },
+            get children() {
+              return _$ssr(_tmpl$5, _$escape(props.timezone));
+            }
+          })));
+        }
+      })));
+    }
+  });
+}
+function PresetRail(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.presets?.length;
+    },
+    get children() {
+      return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(messages().datePresets, true), false), _$escape(_$createComponent(For, {
+        get each() {
+          return props.presets;
+        },
+        children: preset => _$ssr(_tmpl$9, _$escape(preset.label))
+      })));
+    }
+  });
+}
+function DatePickerPanel(props) {
+  const messages = useUiMessages();
+  const [view, setView] = createSignal("days");
+  const context = createMemo(() => pickerContext(props.dateConfig));
+  const month = createMemo(() => yearMonth(props.visibleMonth(), context()));
+  const weeks = createMemo(() => dates.getMonthGrid(month().year, month().month, context()));
+  const weekdays = createMemo(() => dates.weekdays(context()));
+  const months = createMemo(() => monthNames(context()));
+  const dayNameFormatter = createMemo(() => new Intl.DateTimeFormat(context().locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: context().timeZone
+  }));
+  const dayRows = createMemo(() => {
+    const visibleMonth = props.visibleMonth();
+    const dateContext = context();
+    const formatter = dayNameFormatter();
+    return weeks().map(week => week.map(day => ({
+      day,
+      key: dates.formatDateKey(day, dateContext),
+      outside: !dates.isSameMonth(day, visibleMonth, dateContext),
+      label: formatter.format(day),
+      number: dates.formatDayNumber(day, dateContext)
+    })));
+  });
+  let calendar;
+  // Days that belong to the visible month; the roving tabindex must land on one
+  // of them or the grid becomes unreachable by keyboard after month navigation.
+  const monthDayKeys = createMemo(() => dayRows().flat().filter(day => !day.outside).map(day => day.key));
+  // Remembers where arrow-key navigation left off so Tab returns to that day.
+  const [focusedKey, setFocusedKey] = createSignal();
+  const defaultFocus = createMemo(() => resolveFocusDay(monthDayKeys(), focusedKey() || props.focusDate?.() || props.selected?.() || dateKey(dates.today(context()), context())));
+  const moveMonth = delta => props.setVisibleMonth(dates.addMonths(props.visibleMonth(), delta, context()));
+  const moveYear = delta => props.setVisibleMonth(monthDate(month().year + delta, month().month, context()));
+  const previousLabel = () => view() === "days" ? messages().previousMonth : messages().previousYear;
+  const nextLabel = () => view() === "days" ? messages().nextMonth : messages().nextYear;
+  const focusDate = date => {
+    const targetKey = dateKey(date, context());
+    if (!dates.isSameMonth(date, props.visibleMonth(), context())) props.setVisibleMonth(date);
+    queueMicrotask(() => calendar?.querySelector(`[data-date-day="${targetKey}"]`)?.focus());
+  };
+  const handleDayKeyDown = (event, day) => {
+    const deltas = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    const delta = deltas[event.key];
+    if (delta !== undefined) {
+      event.preventDefault();
+      focusDate(dates.addDays(day, delta, context()));
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDate(dates.addMonths(day, event.key === "PageUp" ? -1 : 1, context()));
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const buttons = Array.from(event.currentTarget.closest(".k2b-date-grid").querySelectorAll("[data-date-day]"));
+      const index = buttons.indexOf(event.currentTarget);
+      const offset = event.key === "Home" ? -(index % 7) : 6 - index % 7;
+      focusDate(dates.addDays(day, offset, context()));
+    }
+  };
+  return _$ssr(_tmpl$10, _$ssrAttribute("aria-label", _$escape(messages().calendar, true), false), _$ssrAttribute("aria-label", _$escape(previousLabel(), true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return view() === "days";
+    },
+    get fallback() {
+      return month().year;
+    },
+    get children() {
+      return dates.formatMonthYear(props.visibleMonth(), context());
+    }
+  })), _$ssrAttribute("aria-label", _$escape(nextLabel(), true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return view() === "days";
+    },
+    get fallback() {
+      return _$ssr(_tmpl$11, `Months in ${_$escape(month().year, true)}`, _$escape(_$createComponent(For, {
+        get each() {
+          return months();
+        },
+        children: (name, index) => _$ssr(_tmpl$12, _$ssrAttribute("aria-pressed", _$escape(index(), true) === _$escape(month().month, true), false) + _$ssrAttribute("data-selected", index() === month().month ? "true" : _$escape(undefined, true), false), _$escape(name))
+      })));
+    },
+    get children() {
+      return [_$ssr(_tmpl$0, _$escape(_$createComponent(For, {
+        get each() {
+          return weekdays();
+        },
+        children: day => _$ssr(_tmpl$13, _$escape(day))
+      }))), _$ssr(_tmpl$1, _$escape(_$createComponent(For, {
+        get each() {
+          return dayRows();
+        },
+        children: week => _$ssr(_tmpl$14, _$escape(_$createComponent(For, {
+          each: week,
+          children: cell => {
+            const selected = () => props.selected?.() === cell.key;
+            const range = () => props.range?.() ?? {
+              start: null,
+              end: null
+            };
+            const active = () => selected() || isRangeEdge(cell.key, range());
+            const focusable = () => cell.key === defaultFocus();
+            return _$ssr(_tmpl$15, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(cell.label, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
+          }
+        })))
+      })))];
+    }
+  })));
+}
+function TimeInput(props) {
+  const messages = useUiMessages();
+  return _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.label;
+    },
+    get children() {
+      return _$ssr(_tmpl$13, _$escape(props.label));
+    }
+  })), _$ssrAttribute("value", _$escape(props.time, true), false), _$ssrAttribute("aria-label", props.label ? _$escape(messages().timeLabel({
+    label: props.label
+  }), true) : _$escape(messages().time, true), false));
+}
+export function DatePicker(props) {
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(value(), dateConfig()));
+  const valueLabel = () => displayDate(value(), dateConfig());
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar",
+    valueLabel: valueLabel,
+    clearValue: null,
+    onOpen: () => setVisibleMonth(parseDateValue(value(), dateConfig())),
+    get wide() {
+      return Boolean(props.presets?.length);
+    },
+    children: close => _$ssr(_tmpl$17, _$escape(_$createComponent(PresetRail, {
+      get presets() {
+        return props.presets;
+      },
+      onSelect: value => {
+        close();
+        commitFieldValue(props, value);
+      }
+    })), _$escape(_$createComponent(DatePickerPanel, {
+      visibleMonth: visibleMonth,
+      setVisibleMonth: setVisibleMonth,
+      selected: value,
+      focusDate: value,
+      onSelect: value => {
+        close();
+        commitFieldValue(props, value);
+      },
+      get dateConfig() {
+        return dateConfig();
+      }
+    })))
+  });
+}
+export function DateTimePicker(props) {
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const parts = () => splitDateTime(value(), dateConfig());
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().date, dateConfig()));
+  const [draftDate, setDraftDate] = createSignal(parts().date);
+  const [draftTime, setDraftTime] = createSignal(parts().time || "09:00");
+  const valueLabel = () => formatDateTimeValue(value(), dateConfig());
+  const syncDraft = () => {
+    const next = parts();
+    setDraftDate(next.date);
+    setDraftTime(next.time || "09:00");
+    setVisibleMonth(parseDateValue(next.date, dateConfig()));
+  };
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar-time",
+    valueLabel: valueLabel,
+    clearValue: null,
+    get timezone() {
+      return dateConfig().timeZone;
+    },
+    onOpen: syncDraft,
+    get wide() {
+      return Boolean(props.presets?.length);
+    },
+    children: close => [_$ssr(_tmpl$17, _$escape(_$createComponent(PresetRail, {
+      get presets() {
+        return props.presets;
+      },
+      onSelect: value => {
+        close();
+        commitFieldValue(props, value);
+      }
+    })), _$escape(_$createComponent(DatePickerPanel, {
+      visibleMonth: visibleMonth,
+      setVisibleMonth: setVisibleMonth,
+      selected: draftDate,
+      focusDate: draftDate,
+      onSelect: value => {
+        setDraftDate(value);
+        setVisibleMonth(parseDateValue(value, dateConfig()));
+      },
+      get dateConfig() {
+        return dateConfig();
+      }
+    }))), _$ssr(_tmpl$18, _$escape(_$createComponent(TimeInput, {
+      get time() {
+        return draftTime();
+      },
+      onChange: setDraftTime
+    })), _$ssrAttribute("disabled", !draftDate() || !isCompleteTime(draftTime()), true))]
+  });
+}
+export function DateRangePicker(props) {
+  const messages = useUiMessages();
+  const withTime = () => props.withTime ?? false;
+  const value = () => resolveMaybeAccessor(props.value);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const parts = () => ({
+    start: withTime() ? splitDateTime(value().start, dateConfig()) : {
+      date: value().start ?? "",
+      time: "09:00"
+    },
+    end: withTime() ? splitDateTime(value().end, dateConfig()) : {
+      date: value().end ?? "",
+      time: "10:00"
+    }
+  });
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().start.date || parts().end.date, dateConfig()));
+  const [draftRange, setDraftRange] = createSignal({
+    start: parts().start.date || null,
+    end: parts().end.date || null
+  });
+  const [previewDate, setPreviewDate] = createSignal(null);
+  const [startTime, setStartTime] = createSignal(parts().start.time || "09:00");
+  const [endTime, setEndTime] = createSignal(parts().end.time || "10:00");
+  const displayRange = createMemo(() => previewRange(draftRange(), previewDate()));
+  const syncDraft = () => {
+    const next = parts();
+    setDraftRange({
+      start: next.start.date || null,
+      end: next.end.date || null
+    });
+    setPreviewDate(null);
+    setStartTime(next.start.time || "09:00");
+    setEndTime(next.end.time || "10:00");
+    setVisibleMonth(parseDateValue(next.start.date || next.end.date, dateConfig()));
+  };
+  const valueLabel = () => {
+    if (!value().start && !value().end) return "";
+    const format = withTime() ? formatDateTimeValue : displayDate;
+    return `${value().start ? format(value().start, dateConfig()) : "Start"} to ${value().end ? format(value().end, dateConfig()) : "End"}`;
+  };
+  const valueContent = () => {
+    const format = withTime() ? formatDateTimeValue : displayDate;
+    return _$ssr(_tmpl$19, value().start ? _$escape(format(value().start, dateConfig())) : _$escape(messages().start), value().end ? _$escape(format(value().end, dateConfig())) : "End");
+  };
+  const selectDate = value => {
+    const current = draftRange();
+    if (!current.start || current.end) {
+      setDraftRange({
+        start: value,
+        end: null
+      });
+    } else {
+      setDraftRange(orderedRange(current.start, value));
+    }
+    setPreviewDate(null);
+  };
+  const applyDuration = minutes => {
+    const current = draftRange();
+    if (!current.start || !isCompleteTime(startTime())) return;
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    if (!start) return;
+    const end = new Date(new Date(start).getTime() + minutes * 60_000).toISOString();
+    const next = splitDateTime(end, dateConfig());
+    setDraftRange({
+      start: current.start,
+      end: next.date || current.end || current.start
+    });
+    setEndTime(next.time || endTime());
+  };
+  const durationMinutes = createMemo(() => {
+    const current = displayRange();
+    if (!current.start || !current.end || !isCompleteTime(startTime()) || !isCompleteTime(endTime())) return null;
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    const end = toDateTimeValue(current.end, endTime(), dateConfig());
+    if (!start || !end) return null;
+    return Math.round((new Date(end).getTime() - new Date(start).getTime()) / 60_000);
+  });
+  const durationLabel = () => {
+    const current = displayRange();
+    if (!current.start || !current.end) return "";
+    if (!withTime()) return formatDateOnlyRangeDuration(current, dateConfig());
+    if (!isCompleteTime(startTime()) || !isCompleteTime(endTime())) return "";
+    const start = toDateTimeValue(current.start, startTime(), dateConfig());
+    const end = toDateTimeValue(current.end, endTime(), dateConfig());
+    return start && end ? dates.formatDuration(start, end, dateConfig()) : "";
+  };
+  const commit = close => {
+    const current = draftRange();
+    if (!withTime()) {
+      close();
+      commitFieldValue(props, current);
+      return;
+    }
+    if ((current.start || current.end) && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))) return;
+    const value = {
+      start: current.start ? toDateTimeValue(current.start, startTime(), dateConfig()) : null,
+      end: current.end ? toDateTimeValue(current.end, endTime(), dateConfig()) : null
+    };
+    close();
+    commitFieldValue(props, value);
+  };
+  return _$createComponent(PickerShell, {
+    owner: props,
+    icon: "ti ti-calendar-stats",
+    valueLabel: valueLabel,
+    valueContent: valueContent,
+    clearValue: {
+      start: null,
+      end: null
+    },
+    get timezone() {
+      return withTime() ? dateConfig().timeZone : undefined;
+    },
+    footerMeta: () => _$createComponent(Show, {
+      get when() {
+        return durationLabel();
+      },
+      get children() {
+        return _$ssr(_tmpl$20, _$escape(durationLabel()));
+      }
+    }),
+    onOpen: syncDraft,
+    get wide() {
+      return Boolean(props.datePresets?.length || props.presets?.length);
+    },
+    children: close => [_$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+      get when() {
+        return props.datePresets?.length;
+      },
+      get fallback() {
+        return _$createComponent(PresetRail, {
+          get presets() {
+            return props.presets;
+          },
+          onSelect: value => {
+            close();
+            commitFieldValue(props, value);
+          }
+        });
+      },
+      get children() {
+        return _$createComponent(PresetRail, {
+          get presets() {
+            return props.datePresets;
+          },
+          onSelect: value => {
+            setDraftRange(value ? {
+              start: value,
+              end: value
+            } : {
+              start: null,
+              end: null
+            });
+            if (value) setVisibleMonth(parseDateValue(value, dateConfig()));
+          }
+        });
+      }
+    })), _$escape(_$createComponent(DatePickerPanel, {
+      visibleMonth: visibleMonth,
+      setVisibleMonth: setVisibleMonth,
+      range: displayRange,
+      focusDate: () => draftRange().start,
+      onSelect: selectDate,
+      onDayPreview: value => {
+        const current = draftRange();
+        setPreviewDate(current.start && !current.end ? value : null);
+      },
+      get dateConfig() {
+        return dateConfig();
+      }
+    }))), _$createComponent(Show, {
+      get when() {
+        return withTime();
+      },
+      get children() {
+        return _$ssr(_tmpl$21, _$escape(_$createComponent(TimeInput, {
+          get label() {
+            return messages().start;
+          },
+          get time() {
+            return startTime();
+          },
+          onChange: setStartTime
+        })), _$escape(_$createComponent(TimeInput, {
+          get label() {
+            return messages().end;
+          },
+          get time() {
+            return endTime();
+          },
+          onChange: setEndTime
+        })));
+      }
+    }), _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+      get when() {
+        return withTime() && props.durationPresets?.length;
+      },
+      get children() {
+        return _$ssr(_tmpl$22, _$ssrAttribute("aria-label", _$escape(messages().durationPresets, true), false), _$escape(_$createComponent(For, {
+          get each() {
+            return props.durationPresets;
+          },
+          children: preset => _$ssr(_tmpl$12, _$ssrAttribute("aria-pressed", _$escape(durationMinutes(), true) === _$escape(preset.minutes, true), false), _$escape(preset.label))
+        })));
+      }
+    })), _$ssrAttribute("disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))), true))]
+  });
+}
+//# sourceMappingURL=DatePicker.js.map