material 1.0.4 → 3.0.0-next.0

package/dist/components/datepicker/datepicker.js

@@ -0,0 +1,691 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withDisabled, withLifecycle } from "../../core/compose/features/index.js";
+import { createElement } from "../../core/dom/create.js";
+import { setHTML } from "../../core/dom/html.js";
+import { activeElementOf, deepActiveElement } from "../../core/dom/focus.js";
+import { eventsFrom, onModalEscape } from "../../core/dom/layer.js";
+import { DATEPICKER_ICONS } from "./constants.js";
+import { PREFIX } from "../../core/config.js";
+import { createBaseConfig, getContainerConfig } from "./config.js";
+import { withAPI } from "./api.js";
+import { renderCalendar } from "./render.js";
+import { addDays, addMonths, formatDate, isSameDay, parseDate, parseInputDate, toIsoValue } from "./utils.js";
+const isRangeObject = (value) => typeof value === "object" && value !== null && !(value instanceof Date) && !Array.isArray(value);
+let nextId = 0;
+const scrollLocks = new WeakMap();
+function lockScroll(doc) {
+    const lock = scrollLocks.get(doc) ?? { count: 0, overflow: doc.body.style.overflow };
+    lock.count++;
+    scrollLocks.set(doc, lock);
+    doc.body.style.overflow = "hidden";
+    return () => {
+        if (--lock.count === 0) {
+            doc.body.style.overflow = lock.overflow;
+            scrollLocks.delete(doc);
+        }
+    };
+}
+const createDatePicker = (config = {}) => {
+    const settings = createBaseConfig(config);
+    const base = pipe(createBase, withEvents(), withElement(getContainerConfig(settings)), withDisabled(settings), withLifecycle())(settings);
+    const doc = base.element.ownerDocument;
+    const view = doc.defaultView ?? window;
+    const id = `${PREFIX}-datepicker-${++nextId}`;
+    const cls = (name) => base.getClass(`datepicker__${name}`);
+    const today = parseDate(new Date());
+    const state = {
+        id, prefix: PREFIX, label: settings.label || "Select date", selectedDate: null, rangeEndDate: null,
+        currentView: settings.variant !== "fullscreen" && ["month", "year"].includes(settings.initialView ?? "") ? settings.initialView : "day",
+        currentMonth: today.getMonth(), currentYear: today.getFullYear(), focusedDate: today,
+        minDate: parseDate(settings.minDate ?? null), maxDate: parseDate(settings.maxDate ?? null),
+        dateFormat: settings.dateFormat || "MM/DD/YYYY", variant: settings.variant === "modal" || settings.variant === "modal-input" || settings.variant === "fullscreen" ? settings.variant : "docked",
+        selectionMode: settings.selectionMode === "range" ? "range" : "single", inputMode: settings.variant === "modal-input",
+        specialDates: (settings.specialDates ?? []).map(item => ({ ...item })),
+        isAllowed: date => (!state.minDate || date >= state.minDate) && (!state.maxDate || date <= state.maxDate) && !state.specialDates.some(item => { const special = parseDate(item.date); return item.disabled && special && isSameDay(date, special); }),
+    };
+    const modal = state.variant !== "docked";
+    let opened = false, destroyed = false, navigationRequested = false, readOnly = false;
+    let escape, from;
+    const release = () => { escape?.stop(); from?.stop(); escape = from = undefined; };
+    let committed = null, committedEnd = null;
+    let returnFocus = null;
+    let unlock;
+    const label = createElement({ tag: "label", className: cls("label"), text: state.label, attributes: { for: `${id}-input` } });
+    const field = createElement({ tag: "div", className: cls("anchor") });
+    const input = doc.createElement("input");
+    input.className = cls("input");
+    input.id = `${id}-input`;
+    input.type = "text";
+    input.readOnly = modal;
+    if (settings.name)
+        input.name = settings.name;
+    input.placeholder = settings.placeholder || state.dateFormat;
+    input.autocomplete = "off";
+    input.setAttribute("aria-describedby", `${id}-help ${id}-error`);
+    const trigger = doc.createElement("button");
+    trigger.type = "button";
+    trigger.className = cls("trigger");
+    setHTML(trigger, DATEPICKER_ICONS.calendar);
+    trigger.dataset.action = "open";
+    trigger.setAttribute("aria-label", "Choose date");
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-controls", `${id}-dialog`);
+    trigger.setAttribute("aria-expanded", "false");
+    const help = createElement({ tag: "div", className: cls("help"), text: settings.supportingText || state.dateFormat, attributes: { id: `${id}-help` } });
+    const error = createElement({ tag: "div", className: cls("error"), attributes: { id: `${id}-error`, "aria-live": "polite" } });
+    const dialog = doc.createElement("dialog");
+    dialog.id = `${id}-dialog`;
+    dialog.className = cls("calendar");
+    dialog.classList.add(base.getClass(`datepicker--${modal ? "modal" : "docked"}`));
+    if (state.variant === "fullscreen")
+        dialog.classList.add(base.getClass("datepicker--fullscreen"));
+    dialog.setAttribute("aria-modal", String(modal));
+    if (settings.animate)
+        dialog.classList.add(base.getClass("datepicker--animate"));
+    if (state.selectionMode === "range")
+        dialog.classList.add(base.getClass("datepicker--range"));
+    if (modal)
+        dialog.setAttribute("aria-labelledby", `${id}-title`);
+    else
+        dialog.setAttribute("aria-label", state.label);
+    const announcement = createElement({ tag: "div", className: cls("sr-only"), attributes: { "aria-live": "polite", "aria-atomic": "true" } });
+    field.append(input, trigger);
+    base.element.append(label, field, help, error, dialog);
+    const formatted = (date, end) => formatDate(date, state.dateFormat) + (date && end ? ` - ${formatDate(end, state.dateFormat)}` : "");
+    const getValue = () => committed ? committedEnd ? [new Date(committed), new Date(committedEnd)] : new Date(committed) : null;
+    const syncInput = () => {
+        input.value = formatted(committed, committedEnd);
+        input.removeAttribute("aria-invalid");
+        error.textContent = "";
+        trigger.setAttribute("aria-label", committed ? `Change date, ${input.value}` : "Choose date");
+    };
+    const resetDraft = () => { state.selectedDate = committed && new Date(committed); state.rangeEndDate = committedEnd && new Date(committedEnd); };
+    const setDisplayDate = (date) => { state.focusedDate = new Date(date); state.currentMonth = date.getMonth(); state.currentYear = date.getFullYear(); };
+    const focusCurrent = () => {
+        const selector = state.inputMode ? '[data-entry="start"]' : '[data-date][tabindex="0"], [data-month][tabindex="0"], [data-year][tabindex="0"]';
+        (dialog.querySelector(selector) ?? dialog.querySelector('button:not(:disabled)'))?.focus();
+    };
+    const track = () => dialog.querySelector(`.${cls("track")}`);
+    const rtl = (element) => view.getComputedStyle(element).direction === "rtl";
+    const centre = () => {
+        const element = track();
+        if (element?.clientWidth)
+            element.scrollLeft = (rtl(element) ? -1 : 1) * element.clientWidth;
+        const years = dialog.querySelector(`.${cls("years")}`);
+        const year = years?.querySelector('[aria-pressed="true"]');
+        if (years && year)
+            years.scrollTop = year.offsetTop - (years.clientHeight - year.offsetHeight) / 2;
+    };
+    const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
+    const fromIndex = (index) => new Date(Math.floor(index / 12), index % 12, 1);
+    const list = () => dialog.querySelector(`.${cls("list")}`);
+    const limits = () => [state.minDate ? monthIndex(state.minDate) : -Infinity, state.maxDate ? monthIndex(state.maxDate) : Infinity];
+    let shiftBy = null;
+    const ensureWindow = () => {
+        if (state.variant !== "fullscreen")
+            return;
+        const focus = state.currentYear * 12 + state.currentMonth;
+        const start = state.listStart ? monthIndex(state.listStart) : NaN;
+        if (start <= focus && focus < start + (state.listLength ?? 0))
+            return;
+        const [min, max] = limits();
+        const first = Math.max(min, focus - 12), last = Math.min(max, focus + 12);
+        state.listStart = fromIndex(first);
+        state.listLength = last - first + 1;
+    };
+    const extend = (element) => {
+        const [min, max] = limits();
+        const start = monthIndex(state.listStart), end = start + state.listLength - 1;
+        const margin = element.clientHeight;
+        if (element.scrollTop < margin && start > min) {
+            const first = Math.max(min, start - 12);
+            state.listStart = fromIndex(first);
+            state.listLength = end - first + 1;
+            shiftBy = element.scrollHeight;
+        }
+        else if (element.scrollHeight - element.scrollTop - element.clientHeight < margin && end < max) {
+            state.listLength = Math.min(max, end + 12) - start + 1;
+        }
+        else
+            return;
+        const focused = activeElementOf(dialog);
+        const active = focused instanceof HTMLElement ? focused.dataset.date : undefined;
+        render();
+        if (active)
+            dialog.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
+    };
+    const reveal = () => {
+        const element = list();
+        const section = element?.querySelector(`[data-month-key="${state.currentYear}-${state.currentMonth}"]`);
+        if (element && section)
+            element.scrollTop = section.offsetTop;
+    };
+    const render = (focus = false, action) => {
+        if (!opened || destroyed)
+            return;
+        ensureWindow();
+        const previous = list();
+        const kept = previous && { top: previous.scrollTop, height: previous.scrollHeight };
+        dialog.replaceChildren(renderCalendar(state), announcement);
+        const current = list();
+        if (current && kept)
+            current.scrollTop = kept.top + (shiftBy === null ? 0 : current.scrollHeight - kept.height);
+        shiftBy = null;
+        centre();
+        announcement.textContent = new Date(state.currentYear, state.currentMonth, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });
+        if (action)
+            dialog.querySelector(`[data-action="${action}"]`)?.focus();
+        else if (focus)
+            focusCurrent();
+    };
+    const emitChange = () => {
+        const rangeEndDate = committedEnd && new Date(committedEnd);
+        base.emit("change", { value: getValue(), rangeEndDate, formattedValue: formatted(committed, committedEnd), iso: toIsoValue(getValue(), rangeEndDate) });
+    };
+    const commitDraft = () => {
+        committed = state.selectedDate && new Date(state.selectedDate);
+        committedEnd = state.rangeEndDate && new Date(state.rangeEndDate);
+        syncInput();
+        emitChange();
+    };
+    const close = (restoreFocus = true) => {
+        if (!opened)
+            return;
+        opened = false;
+        release();
+        if (typeof dialog.close === "function")
+            dialog.close();
+        else
+            dialog.removeAttribute("open");
+        unlock?.();
+        unlock = undefined;
+        resetDraft();
+        trigger.setAttribute("aria-expanded", "false");
+        if (restoreFocus && returnFocus?.isConnected)
+            returnFocus.focus();
+        if (!destroyed)
+            base.emit("close", { value: getValue() });
+    };
+    const open = () => {
+        if (destroyed || opened || base.disabled.isDisabled() || readOnly)
+            return;
+        opened = true;
+        release();
+        if (modal)
+            escape = onModalEscape(dialog, () => close());
+        else
+            from = eventsFrom(dialog);
+        resetDraft();
+        state.inputMode = state.variant === "modal-input";
+        state.listStart = undefined;
+        let initial = committed ?? today;
+        if (state.minDate && initial < state.minDate)
+            initial = state.minDate;
+        if (state.maxDate && initial > state.maxDate)
+            initial = state.maxDate;
+        if (!navigationRequested)
+            setDisplayDate(initial);
+        navigationRequested = false;
+        const opener = deepActiveElement();
+        returnFocus = opener instanceof HTMLElement && opener !== doc.body ? opener : trigger;
+        render();
+        if (modal && typeof dialog.showModal === "function" && dialog.isConnected)
+            dialog.showModal();
+        else if (!modal && typeof dialog.show === "function")
+            dialog.show();
+        else
+            dialog.setAttribute("open", "");
+        if (modal)
+            unlock = lockScroll(doc);
+        centre();
+        reveal();
+        trigger.setAttribute("aria-expanded", "true");
+        focusCurrent();
+        base.emit("open", { value: getValue() });
+    };
+    const assignValue = (input, emit) => {
+        const given = isRangeObject(input) ? [input.start, input.end] : input;
+        const value = state.selectionMode === "range" && !Array.isArray(given) ? [given, given] : given;
+        if (destroyed || Array.isArray(value) && state.selectionMode !== "range")
+            return;
+        const start = parseDate(Array.isArray(value) ? value[0] : value);
+        const end = Array.isArray(value) ? parseDate(value[1]) : null;
+        if (!start || !state.isAllowed(start) || Array.isArray(value) && (!end || !state.isAllowed(end)))
+            return;
+        committed = end && end < start ? end : start;
+        committedEnd = end && end < start ? start : end;
+        resetDraft();
+        setDisplayDate(committed);
+        syncInput();
+        render();
+        if (emit)
+            emitChange();
+    };
+    const clearValue = (emit) => {
+        if (destroyed)
+            return;
+        committed = null;
+        committedEnd = null;
+        resetDraft();
+        syncInput();
+        render();
+        if (emit)
+            emitChange();
+    };
+    const validateEntries = () => {
+        const fields = Array.from(dialog.querySelectorAll('[data-entry]'));
+        if (!fields.length)
+            return !!state.selectedDate && state.isAllowed(state.selectedDate) && (state.selectionMode !== "range" || !!state.rangeEndDate && state.isAllowed(state.rangeEndDate));
+        const values = fields.map(field => parseInputDate(field.value, state.dateFormat));
+        let valid = true;
+        fields.forEach((field, index) => {
+            const date = values[index];
+            const message = !date ? `Enter a valid date (${state.dateFormat}).` : !state.isAllowed(date) ? "Date is not selectable." : index === 1 && values[0] && date < values[0] ? "End date must be on or after start date." : "";
+            if (message) {
+                field.setAttribute("aria-invalid", "true");
+                valid = false;
+            }
+            else
+                field.removeAttribute("aria-invalid");
+            dialog.querySelector(`#${field.id}-error`).textContent = message;
+        });
+        const confirm = dialog.querySelector('[data-action="confirm"]');
+        if (confirm)
+            confirm.disabled = !valid;
+        if (valid) {
+            state.selectedDate = values[0];
+            state.rangeEndDate = values[1] ?? null;
+            setDisplayDate(values[0]);
+            const headline = dialog.querySelector(`.${cls("headline")}`);
+            if (headline)
+                headline.textContent = formatDate(state.selectedDate, "MMM D, YYYY") + (state.rangeEndDate ? ` – ${formatDate(state.rangeEndDate, "MMM D, YYYY")}` : "");
+        }
+        return valid;
+    };
+    const onEntry = () => { validateEntries(); };
+    const onInputChange = () => {
+        if (modal || destroyed || base.disabled.isDisabled())
+            return;
+        if (!input.value.trim()) {
+            clearValue(true);
+            return;
+        }
+        const pieces = state.selectionMode === "range" ? input.value.split(' - ') : [input.value];
+        const dates = pieces.map(value => parseInputDate(value, state.dateFormat));
+        if (dates.length !== (state.selectionMode === 'range' ? 2 : 1) || dates.some(date => !date || !state.isAllowed(date)) || dates[1] && dates[0] && dates[1] < dates[0]) {
+            input.setAttribute("aria-invalid", "true");
+            error.textContent = `Enter a selectable ${state.selectionMode === "range" ? "date range" : "date"} (${state.dateFormat}).`;
+            return;
+        }
+        assignValue(dates.length === 2 ? [dates[0], dates[1]] : dates[0], true);
+    };
+    const select = (date) => {
+        if (!state.isAllowed(date))
+            return;
+        if (state.selectionMode === "range" && state.selectedDate && !state.rangeEndDate) {
+            state.rangeEndDate = date < state.selectedDate ? state.selectedDate : date;
+            state.selectedDate = date < state.selectedDate ? date : state.selectedDate;
+        }
+        else {
+            state.selectedDate = date;
+            state.rangeEndDate = null;
+        }
+        setDisplayDate(date);
+        const whole = state.selectionMode !== "range" || !!state.rangeEndDate;
+        if ((!modal || settings.closeOnSelect) && whole)
+            commitDraft();
+        if (settings.closeOnSelect && (state.selectionMode !== "range" || state.rangeEndDate))
+            close();
+        else
+            render(true);
+    };
+    const navigate = (amount) => {
+        const count = state.currentView === "day" ? amount : amount * 12;
+        const anchor = new Date(state.currentYear, state.currentMonth, 1);
+        anchor.setDate(Math.min(state.focusedDate.getDate(), new Date(state.currentYear, state.currentMonth + 1, 0).getDate()));
+        setDisplayDate(addMonths(anchor, count));
+    };
+    const onClick = (event) => {
+        if (destroyed || base.disabled.isDisabled())
+            return;
+        const target = event.target instanceof Element ? event.target.closest('button') : null;
+        if (!target || !base.element.contains(target) || target.hasAttribute('disabled'))
+            return;
+        const action = target.dataset.action;
+        if (action === "open") {
+            opened ? close() : open();
+            return;
+        }
+        if (!opened)
+            return;
+        if (target.dataset.date) {
+            select(parseDate(target.dataset.date));
+            return;
+        }
+        if (target.dataset.month) {
+            setDisplayDate(new Date(state.currentYear, Number(target.dataset.month), 1));
+            state.currentView = "day";
+            render(true);
+            return;
+        }
+        if (target.dataset.year) {
+            state.currentYear = Number(target.dataset.year);
+            state.currentView = "month";
+            render(true);
+            return;
+        }
+        if (action === "cancel")
+            close();
+        else if (action === "confirm") {
+            if (validateEntries()) {
+                commitDraft();
+                close();
+            }
+        }
+        else if (action === "toggle-mode") {
+            if (state.inputMode && !validateEntries())
+                return;
+            state.inputMode = !state.inputMode;
+            render(true);
+        }
+        else if (action === "month" || action === "year") {
+            state.currentView = action;
+            render(true);
+        }
+        else if (action === "prev" || action === "next") {
+            const element = state.currentView === "day" ? track() : null;
+            if (element?.clientWidth && !view.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+                element.scrollBy({ left: (action === "prev" ? -1 : 1) * (rtl(element) ? -1 : 1) * element.clientWidth, behavior: "smooth" });
+            }
+            else {
+                navigate(action === "prev" ? -1 : 1);
+                render(false, action);
+            }
+        }
+    };
+    const onKey = (event) => {
+        if (event.key === "Enter" && event.target === input && !modal) {
+            event.preventDefault();
+            onInputChange();
+            return;
+        }
+        if (event.key === "Enter" && opened && state.inputMode && event.target instanceof HTMLElement && event.target.hasAttribute("data-entry")) {
+            event.preventDefault();
+            if (validateEntries()) {
+                commitDraft();
+                close();
+            }
+            return;
+        }
+        if (!opened) {
+            if (event.key === "ArrowDown" && event.target === input) {
+                event.preventDefault();
+                open();
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+            return;
+        }
+        if (event.key === "Tab" && modal) {
+            const elements = Array.from(dialog.querySelectorAll('button:not(:disabled):not([tabindex="-1"]), input:not(:disabled)'));
+            const first = elements[0], last = elements.at(-1);
+            const focused = activeElementOf(dialog);
+            if (event.shiftKey && focused === first) {
+                event.preventDefault();
+                last?.focus();
+            }
+            else if (!event.shiftKey && focused === last) {
+                event.preventDefault();
+                first?.focus();
+            }
+            return;
+        }
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        if (target?.dataset.date) {
+            const date = parseDate(target.dataset.date);
+            let next;
+            const ahead = rtl(dialog) ? -1 : 1;
+            if (event.key === "ArrowLeft")
+                next = addDays(date, -ahead);
+            else if (event.key === "ArrowRight")
+                next = addDays(date, ahead);
+            else if (event.key === "ArrowUp")
+                next = addDays(date, -7);
+            else if (event.key === "ArrowDown")
+                next = addDays(date, 7);
+            else if (event.key === "Home")
+                next = addDays(date, -date.getDay());
+            else if (event.key === "End")
+                next = addDays(date, 6 - date.getDay());
+            else if (event.key === "PageUp" || event.key === "PageDown")
+                next = addMonths(date, (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1));
+            else
+                return;
+            event.preventDefault();
+            if (state.minDate && next < state.minDate)
+                next = new Date(state.minDate);
+            if (state.maxDate && next > state.maxDate)
+                next = new Date(state.maxDate);
+            const direction = next < date ? -1 : 1;
+            for (let n = 0; !state.isAllowed(next) && n <= state.specialDates.length; n++)
+                next = addDays(next, direction);
+            if (state.isAllowed(next)) {
+                setDisplayDate(next);
+                render(true);
+            }
+        }
+        else if (target?.hasAttribute('data-month') || target?.hasAttribute('data-year')) {
+            const buttons = Array.from(dialog.querySelectorAll('[data-month], [data-year]'));
+            let index = buttons.indexOf(target);
+            const ahead = rtl(dialog) ? -1 : 1;
+            const delta = { ArrowLeft: -ahead, ArrowRight: ahead, ArrowUp: -3, ArrowDown: 3 }[event.key];
+            if (event.key === "Home")
+                index = 0;
+            else if (event.key === "End")
+                index = buttons.length - 1;
+            else if (delta)
+                index = Math.min(buttons.length - 1, Math.max(0, index + delta));
+            else
+                return;
+            event.preventDefault();
+            buttons.forEach(button => button.tabIndex = -1);
+            buttons[index].tabIndex = 0;
+            buttons[index].focus();
+        }
+    };
+    const onFocus = (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        if (target?.dataset.date) {
+            state.focusedDate = parseDate(target.dataset.date);
+            dialog.querySelectorAll('[data-date]').forEach(el => el.tabIndex = el === target ? 0 : -1);
+        }
+    };
+    let quiet;
+    const settle = () => {
+        const element = track();
+        if (!opened || !element?.clientWidth)
+            return;
+        const page = Math.round(Math.abs(element.scrollLeft) / element.clientWidth) - 1;
+        if (!page)
+            return;
+        const focused = activeElementOf(dialog);
+        const active = focused instanceof HTMLElement && dialog.contains(focused) ? focused : null;
+        navigate(page);
+        render(!!active?.dataset.date, active?.dataset.action);
+    };
+    const onScroll = (event) => {
+        if (event.type === "scroll" && event.target instanceof HTMLElement && event.target === list()) {
+            extend(event.target);
+            return;
+        }
+        if (!(event.target instanceof HTMLElement) || event.target !== track())
+            return;
+        if (event.type === "scrollend") {
+            settle();
+            return;
+        }
+        if ("onscrollend" in view)
+            return;
+        clearTimeout(quiet);
+        quiet = setTimeout(settle, 150);
+    };
+    const onCancel = (event) => {
+        event.preventDefault();
+        if (!escape?.opening)
+            close();
+    };
+    const onOutside = (event) => {
+        if (!opened || (from && !from.after(event)))
+            return;
+        if (!modal && event.target instanceof Node && !event.composedPath().includes(base.element))
+            close(false);
+        if (modal && event.target === dialog) {
+            const bounds = dialog.getBoundingClientRect();
+            if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom)
+                close();
+        }
+    };
+    const onDialogClick = (event) => { onClick(event); onOutside(event); event.stopPropagation(); };
+    const onInputClick = () => {
+        if (modal)
+            open();
+    };
+    const onFocusOut = (event) => {
+        if (!destroyed && opened && !modal && event.relatedTarget instanceof Node && !base.element.contains(event.relatedTarget))
+            close(false);
+    };
+    base.element.addEventListener("click", onClick);
+    base.element.addEventListener("keydown", onKey);
+    base.element.addEventListener("focusout", onFocusOut);
+    dialog.addEventListener("focusin", onFocus);
+    dialog.addEventListener("click", onDialogClick);
+    dialog.addEventListener("input", onEntry);
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("scroll", onScroll, true);
+    dialog.addEventListener("scrollend", onScroll, true);
+    input.addEventListener("change", onInputChange);
+    input.addEventListener("click", onInputClick);
+    doc.addEventListener("click", onOutside);
+    const setDisabled = (disabled) => {
+        if (destroyed)
+            return;
+        if (disabled) {
+            close();
+            base.disabled.disable();
+        }
+        else
+            base.disabled.enable();
+        input.disabled = disabled;
+        trigger.disabled = disabled || readOnly;
+    };
+    const setReadOnly = (value) => {
+        if (destroyed)
+            return;
+        readOnly = value;
+        if (value)
+            close();
+        input.readOnly = value || modal;
+        trigger.disabled = value || base.disabled.isDisabled();
+        base.element.classList.toggle(base.getClass("datepicker--readonly"), value);
+    };
+    const checkValidity = () => !(input.required && !committed);
+    const reportValidity = () => {
+        const valid = checkValidity();
+        if (!valid) {
+            input.setAttribute("aria-invalid", "true");
+            error.textContent = `Select a ${state.selectionMode === "range" ? "date range" : "date"}.`;
+        }
+        return valid;
+    };
+    const destroy = () => {
+        if (destroyed)
+            return;
+        destroyed = true;
+        close();
+        doc.removeEventListener("click", onOutside);
+        input.removeEventListener("change", onInputChange);
+        input.removeEventListener("click", onInputClick);
+        base.element.removeEventListener("click", onClick);
+        base.element.removeEventListener("keydown", onKey);
+        base.element.removeEventListener("focusout", onFocusOut);
+        dialog.removeEventListener("focusin", onFocus);
+        dialog.removeEventListener("click", onDialogClick);
+        dialog.removeEventListener("input", onEntry);
+        dialog.removeEventListener("cancel", onCancel);
+        dialog.removeEventListener("scroll", onScroll, true);
+        dialog.removeEventListener("scrollend", onScroll, true);
+        clearTimeout(quiet);
+        base.lifecycle.destroy();
+    };
+    const api = withAPI({
+        element: base.element, input, getClass: base.getClass,
+        disabled: { enable: () => setDisabled(false), disable: () => setDisabled(true), isDisabled: () => base.disabled.isDisabled() }, lifecycle: { destroy }, destroy,
+        open() { open(); return api; }, close() { close(); return api; }, isOpen: () => opened, getValue,
+        getFormattedValue: () => formatted(committed, committedEnd),
+        setValue(value) { assignValue(value, false); return api; },
+        setReadOnly(value) { setReadOnly(value); return api; }, isReadOnly: () => readOnly,
+        setRequired(value) {
+            input.required = value;
+            if (!value)
+                syncInput();
+            return api;
+        }, checkValidity, reportValidity,
+        setSupportingText(text) { help.textContent = text || state.dateFormat; return api; },
+        clear() { clearValue(false); return api; },
+        enable() { setDisabled(false); return api; }, disable() { setDisabled(true); return api; },
+        setMinDate(value) {
+            const date = parseDate(value);
+            if (date && !destroyed) {
+                state.minDate = date;
+                render();
+                if (state.inputMode)
+                    validateEntries();
+            }
+            return api;
+        },
+        setMaxDate(value) {
+            const date = parseDate(value);
+            if (date && !destroyed) {
+                state.maxDate = date;
+                render();
+                if (state.inputMode)
+                    validateEntries();
+            }
+            return api;
+        },
+        calendar: {
+            goToDate(value) {
+                const date = parseDate(value);
+                if (date) {
+                    navigationRequested = !opened;
+                    setDisplayDate(date);
+                    render();
+                }
+            },
+            nextMonth() { navigationRequested = !opened; setDisplayDate(addMonths(new Date(state.currentYear, state.currentMonth, 1), 1)); render(); },
+            prevMonth() { navigationRequested = !opened; setDisplayDate(addMonths(new Date(state.currentYear, state.currentMonth, 1), -1)); render(); },
+            nextYear() { navigationRequested = !opened; state.currentYear++; render(); }, prevYear() { navigationRequested = !opened; state.currentYear--; render(); },
+            showDayView() { state.currentView = "day"; state.inputMode = false; render(); },
+            showMonthView() { state.currentView = "month"; state.inputMode = false; render(); },
+            showYearView() { state.currentView = "year"; state.inputMode = false; render(); },
+            getCurrentView: () => state.currentView,
+        },
+    }, base);
+    if (settings.value)
+        assignValue(settings.value, false);
+    else
+        syncInput();
+    dialog.append(renderCalendar(state), announcement);
+    setDisabled(!!settings.disabled);
+    if (settings.required)
+        input.required = true;
+    if (settings.readOnly)
+        setReadOnly(true);
+    return api;
+};
+export default createDatePicker;