@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/esm/pf-date-range-picker.entry.js

@@ -0,0 +1,475 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { o as observeAnchoredPosition, p as placePopover } from './place-popover-CC7AyfOt.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { t as toMidday, d as isSameDay, s as startOfMonth, f as formatISODate, c as clampMonthToYearRange, i as isOutsideDateRange, p as parseISODate, m as moveCalendarDate, a as addMonths, e as isSameMonth, b as buildCalendarDays, W as WEEKDAY_LABELS, C as CALENDAR_CELL_COUNT } from './date-C9jNMqLs.js';
+import { K as Keys } from './keys-g4FlTDZx.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import { c as controlAriaLabel } from './control-label-Cy_kHPeC.js';
+
+//#region src/date-range.ts
+/**
+* Where a click on `date` leaves the selection.
+*
+* Three cases, and the second two are the ones worth naming:
+* - not awaiting an end: start the range here and wait for the other end;
+* - awaiting an end, clicked before the start: the two swap, because a range
+*   has no opinion about which end the user picked first;
+* - awaiting an end, clicked the start again: start over rather than make a
+*   one-day range, which is what the React component does and is the kinder
+*   reading of a double click.
+*/
+function nextDateRangeSelection(current, date) {
+	const clicked = toMidday(date);
+	if (!current.awaitingEnd || !current.range.start) return {
+		range: {
+			start: clicked,
+			end: null
+		},
+		awaitingEnd: true
+	};
+	const start = current.range.start;
+	if (isSameDay(start, clicked)) return {
+		range: {
+			start: clicked,
+			end: null
+		},
+		awaitingEnd: true
+	};
+	return {
+		range: clicked.getTime() < start.getTime() ? {
+			start: clicked,
+			end: start
+		} : {
+			start,
+			end: clicked
+		},
+		awaitingEnd: false
+	};
+}
+/**
+* How a day should read, given the range and whatever is hovered.
+*
+* A hovered day stands in for the missing end while the range is half-made,
+* which is what makes the preview follow the pointer. It stands in only when
+* there is a start and no end — hovering before the first click previews
+* nothing.
+*/
+function rangeDayState(date, range, hovered = null) {
+	const { start } = range;
+	const end = range.end ?? (start && hovered ? hovered : null);
+	const isStart = Boolean(start && isSameDay(date, start));
+	const isEnd = Boolean(end && isSameDay(date, end));
+	if (!start || !end) return {
+		isStart,
+		isEnd,
+		isInside: false
+	};
+	const [low, high] = start.getTime() <= end.getTime() ? [start, end] : [end, start];
+	const day = date.getTime();
+	return {
+		isStart,
+		isEnd,
+		isInside: day > low.getTime() && day < high.getTime()
+	};
+}
+/** `YYYY-MM-DD/YYYY-MM-DD`, or `''` when the range is not yet complete. */
+function formatDateRange(range, format) {
+	if (!range.start || !range.end) return "";
+	return `${format(range.start)}/${format(range.end)}`;
+}
+/** Parses `YYYY-MM-DD/YYYY-MM-DD`; anything else is an empty range. */
+function parseDateRange(value, parse) {
+	const [from, to] = (value ?? "").split("/");
+	const start = parse(from ?? "");
+	const end = parse(to ?? "");
+	if (!start || !end) return {
+		start: null,
+		end: null
+	};
+	return start.getTime() <= end.getTime() ? {
+		start,
+		end
+	} : {
+		start: end,
+		end: start
+	};
+}
+
+const pfDateRangePickerCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-daterange-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-daterange-invalid-border);margin-inline-start:var(--space-1)}.row-controls{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-daterange-bg);border:1px solid var(--pf-daterange-border);border-radius:var(--radius-md);color:var(--pf-daterange-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-daterange-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-daterange-text-muted)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-daterange-text)}.clear:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.description{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-daterange-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-daterange-menu-bg);border:1px solid var(--pf-daterange-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);color:var(--pf-daterange-text);padding:var(--space-3)}.panel:popover-open{animation:pf-date-range-in var(--pf-transition-enter)}@keyframes pf-date-range-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.nav{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.step{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.step:hover{background:var(--pf-daterange-bg-subtle);color:var(--pf-daterange-text)}.step:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.months{display:grid;gap:var(--space-4)}@media (min-width: 768px){.months{grid-template-columns:1fr 1fr}}.month-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-2);text-align:center}.grid{display:grid;gap:2px;grid-template-columns:repeat(7, 1fr)}.row{display:contents}.weekday{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-7)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-daterange-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-daterange-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.day--today{border-color:var(--pf-calendar-today-border)}.day--inside{background:var(--pf-daterange-range-bg);border-radius:0;color:var(--pf-daterange-range-text)}.day--endpoint{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--start:not(.day--end){border-end-end-radius:0;border-start-end-radius:0}.day--end:not(.day--start){border-end-start-radius:0;border-start-start-radius:0}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;
+
+const MOVES = {
+    [Keys.ArrowRight]: 'day-next',
+    [Keys.ArrowLeft]: 'day-previous',
+    [Keys.ArrowDown]: 'week-next',
+    [Keys.ArrowUp]: 'week-previous',
+    [Keys.Home]: 'week-start',
+    [Keys.End]: 'week-end',
+    PageDown: 'month-next',
+    PageUp: 'month-previous',
+};
+const PfDateRangePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    /**
+     * The base name for the two submitted entries, `${name}-start` and
+     * `${name}-end`. Reflected for selectors; the submission reads the property,
+     * because a `FormData` value carries its own keys.
+     */
+    name;
+    /** The range as `YYYY-MM-DD/YYYY-MM-DD`, or empty. */
+    value = '';
+    /** Whether the panel is showing. Reflected for the stylesheet. */
+    open = false;
+    label;
+    description;
+    error;
+    placeholder = 'Select dates';
+    required = false;
+    disabled = false;
+    /** Offer a button that empties the range. */
+    allowClear = false;
+    min;
+    max;
+    startYear;
+    endYear;
+    /** A predicate for days that cannot be chosen; see `pf-calendar`. */
+    isDateDisabled;
+    /** Fires when the range changes or is cleared, with the `start/end` string. */
+    pfChange;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** The left-hand month; the right-hand one is always the month after. */
+    leftMonth = startOfMonth(new Date());
+    /** The day the grids' single tab stop sits on. */
+    focusedDate = toMidday(new Date());
+    /** The day under the pointer, which previews the missing end. */
+    hovered = null;
+    /** True once a start is chosen and the next click sets the end. */
+    awaitingEnd = false;
+    initialValue = '';
+    /**
+     * The start held while the range is half-made.
+     *
+     * Not in `value`, because `value` is the *submitted* range and a half-made
+     * one is not a range — a form read mid-selection would see a start with no
+     * end. Held here instead, and folded back in for rendering.
+     */
+    pendingStart = null;
+    stopObserving;
+    shouldRestoreFocus = false;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        const { start } = this.range();
+        const base = start ?? toMidday(new Date());
+        this.focusedDate = base;
+        this.leftMonth = this.clamp(startOfMonth(base));
+        this.syncFormState();
+    }
+    componentDidRender() {
+        if (!this.shouldRestoreFocus)
+            return;
+        this.shouldRestoreFocus = false;
+        this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    /**
+     * Follows a range set from outside, so the grids show what they are told.
+     *
+     * Without this the element kept whatever month it loaded with, and a
+     * consumer assigning `value` got a correct value over the wrong months —
+     * the days it names were not even rendered.
+     */
+    syncDisplayedMonths() {
+        const { start, end } = this.range();
+        if (!start || !end)
+            return;
+        this.pendingStart = null;
+        this.awaitingEnd = false;
+        this.focusedDate = start;
+        this.leftMonth = this.clamp(startOfMonth(start));
+    }
+    /*
+     * `name` is watched here and not on the controls that pass a plain string to
+     * `setFormValue`: those take their submission name from the reflected
+     * attribute, so the platform picks a change up by itself. This one builds
+     * the name *into* a FormData, so without the watch a name assigned after
+     * load would never reach the submission.
+     */
+    syncFormState() {
+        const { start, end } = this.range();
+        if (!start || !end || !this.name) {
+            this.internals.setFormValue(null);
+        }
+        else {
+            /*
+             * A FormData, so one control submits both ends. Measured: every entry in
+             * it reaches the submission, and the element's own `name` attribute is
+             * ignored in this mode — which is why the keys are built here.
+             */
+            const data = new FormData();
+            data.append(`${this.name}-start`, formatISODate(start));
+            data.append(`${this.name}-end`, formatISODate(end));
+            this.internals.setFormValue(data);
+        }
+        applyControlValidity(this.internals, Boolean(start && end), this.required, this.error);
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.awaitingEnd = false;
+        this.hovered = null;
+    }
+    range() {
+        return parseDateRange(this.value, parseISODate);
+    }
+    get years() {
+        const now = new Date().getFullYear();
+        const start = this.startYear ?? now - 50;
+        const end = this.endYear ?? now + 50;
+        return { start: Math.min(start, end), end: Math.max(start, end) };
+    }
+    clamp(date) {
+        const { start, end } = this.years;
+        return clampMonthToYearRange(date, start, end);
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    isDisabled(date) {
+        if (isOutsideDateRange(date, parseISODate(this.min), parseISODate(this.max)))
+            return true;
+        return this.isDateDisabled?.(date) ?? false;
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: 'start',
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover(panel, left, top),
+        });
+        this.shouldRestoreFocus = true;
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        this.hovered = null;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    /** One click through core's state machine, plus this element's side-effects. */
+    pick(date) {
+        if (this.isDisabled(date))
+            return;
+        /*
+         * `displayRange()`, not `range()`. A half-made range is deliberately kept
+         * out of `value`, so reading the state machine's input from `value` hands
+         * it a range with no start — and core, correctly, treats that as "begin a
+         * new range". Every second click restarted instead of closing. Caught by
+         * the swap and Enter tests.
+         */
+        const next = nextDateRangeSelection({ range: this.displayRange(), awaitingEnd: this.awaitingEnd }, date);
+        this.awaitingEnd = next.awaitingEnd;
+        this.focusedDate = toMidday(date);
+        if (next.awaitingEnd) {
+            // Half-made: hold the start without reporting an incomplete range.
+            this.value = '';
+            this.pendingStart = next.range.start;
+            return;
+        }
+        this.pendingStart = null;
+        this.hovered = null;
+        this.value = formatDateRange(next.range, formatISODate);
+        this.pfChange.emit({
+            value: this.value,
+            start: next.range.start ? formatISODate(next.range.start) : '',
+            end: next.range.end ? formatISODate(next.range.end) : '',
+        });
+        this.open = false;
+    }
+    /** What the grids draw: the committed range, or the half-made one. */
+    displayRange() {
+        const committed = this.range();
+        if (committed.start && committed.end)
+            return committed;
+        return { start: this.pendingStart, end: null };
+    }
+    moveFocus(move) {
+        const next = moveCalendarDate(this.focusedDate, move);
+        const { start, end } = this.years;
+        if (next.getFullYear() < start || next.getFullYear() > end)
+            return;
+        this.focusedDate = next;
+        this.shouldRestoreFocus = true;
+        // Keep the focused day on screen: it belongs to one of the two months.
+        const right = addMonths(this.leftMonth, 1);
+        if (!isSameMonth(next, this.leftMonth) && !isSameMonth(next, right)) {
+            this.leftMonth = this.clamp(startOfMonth(next));
+        }
+    }
+    onKeyDown = (event) => {
+        const move = MOVES[event.key];
+        if (move) {
+            event.preventDefault();
+            this.moveFocus(move);
+            return;
+        }
+        if (event.key === Keys.Enter || event.key === Keys.Space) {
+            event.preventDefault();
+            this.pick(this.focusedDate);
+            this.shouldRestoreFocus = true;
+        }
+    };
+    clear = (event) => {
+        event.stopPropagation();
+        if (!this.value && !this.pendingStart)
+            return;
+        this.value = '';
+        this.pendingStart = null;
+        this.awaitingEnd = false;
+        this.hovered = null;
+        this.pfChange.emit({ value: '', start: '', end: '' });
+    };
+    formatted() {
+        const { start, end } = this.range();
+        if (!start || !end)
+            return '';
+        const format = new Intl.DateTimeFormat('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+        return `${format.format(start)} – ${format.format(end)}`;
+    }
+    renderGrid(month) {
+        const days = buildCalendarDays(month);
+        const range = this.displayRange();
+        const today = toMidday(new Date());
+        const label = new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            year: 'numeric',
+        }).format(month);
+        return (h("div", { class: "month" }, h("p", { class: "month-label" }, label), h("div", { class: "grid", part: "grid", role: "grid", "aria-label": label }, h("div", { class: "row", role: "row" }, WEEKDAY_LABELS.map((day) => (h("span", { key: day, class: "weekday", role: "columnheader", "aria-label": day }, day)))), Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (h("div", { key: week, class: "row", role: "row" }, days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {
+            if (!inCurrentMonth) {
+                return h("span", { key: formatISODate(date), class: "empty", role: "gridcell" });
+            }
+            const state = rangeDayState(date, range, this.hovered);
+            const isEndpoint = state.isStart || state.isEnd;
+            const disabled = this.isDisabled(date);
+            return (h("button", { key: formatISODate(date), type: "button", role: "gridcell", "data-day": formatISODate(date), part: "day", class: {
+                    day: true,
+                    'day--today': isSameDay(today, date),
+                    'day--endpoint': isEndpoint,
+                    'day--start': state.isStart,
+                    'day--end': state.isEnd,
+                    'day--inside': state.isInside,
+                }, tabindex: isSameDay(this.focusedDate, date) ? 0 : -1, "aria-selected": isEndpoint || state.isInside ? 'true' : 'false', "aria-current": isSameDay(today, date) ? 'date' : null, "aria-disabled": disabled ? 'true' : null, "aria-label": new Intl.DateTimeFormat('en-US', {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                }).format(date), onClick: () => {
+                    this.pick(date);
+                    this.shouldRestoreFocus = true;
+                }, onMouseEnter: () => {
+                    if (this.awaitingEnd && !disabled)
+                        this.hovered = date;
+                } }, date.getDate()));
+        })))))));
+    }
+    render() {
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        const text = this.formatted();
+        const right = addMonths(this.leftMonth, 1);
+        return (h(Host, { key: 'e581ed7c3a2449e96b594a4d650d7d16225c502b' }, h("div", { key: '42af6feb4a669c989f734bf179e0f60c24a47401', class: "field", part: "field" }, this.label && (h("label", { key: '5a6b9ea4e2bcdb7c07801c474a901ae4019d397f', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '6e90bc09ed442464ea424d47e60a64951df45eea', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'b0b66d4bf30cc7228e7e2153e9be05d71401ec20', class: "row-controls" }, h("button", { key: '46cfbfeb5e679bb00dd48e7b718350db4530e82e', id: "trigger", "aria-label": controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("span", { key: '4bcf49fdfed1cef4f458c5019315ea833d8575e0', class: { value: true, 'value--placeholder': !text } }, text || this.placeholder), h("pf-icon", { key: 'da03fb4ccb5aef720f042adae79d701148ade479', name: "calendar" })), this.allowClear && (this.value || this.pendingStart) && (h("button", { key: 'f6b36144e765a28a15e7addf3d10d4aff1d25a00', class: "clear", part: "clear", type: "button", "aria-label": "Clear selected dates", disabled: this.disabled, onClick: this.clear }, h("pf-icon", { key: 'f4fb9769008137437b26c14c54d4d73909729da9', name: "circle-xmark" })))), this.description && (h("p", { key: '084a2a397d5277d237310cd9c202dce0028fcf78', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '9fa6a9400ded59e6c0263012ce4d4be1d04c9352', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: 'f8b15d11302ae13a7d9d21fea5ce5db3d0c407cc', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a date range", onToggle: this.onToggle, onKeyDown: this.onKeyDown, onMouseLeave: () => {
+                this.hovered = null;
+            } }, h("div", { key: '39a29079e9e97d19272ef9d5ec9fa02c2c368f6a', class: "nav" }, h("button", { key: '8e0fb9c8e800e53a88dfa98c928966a919f4dee0', type: "button", class: "step", "aria-label": "Previous month", onClick: () => {
+                this.leftMonth = this.clamp(addMonths(this.leftMonth, -1));
+            } }, h("pf-icon", { key: 'df4f5aa6dfc5b387a9d73c674f25e5f445ad4778', name: "square-caret-left" })), h("button", { key: 'c48a949065acfb0e16fce8b732399f6fa9d8204c', type: "button", class: "step", "aria-label": "Next month", onClick: () => {
+                this.leftMonth = this.clamp(addMonths(this.leftMonth, 1));
+            } }, h("pf-icon", { key: '10ae6ca6d30cbfdbd538d1a5247a6c83b299fd7a', name: "square-caret-right" }))), h("div", { key: '46610cb99d27eda167a28c281a5c1462fd5ab19c', class: "months" }, this.renderGrid(this.leftMonth), this.renderGrid(right)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncDisplayedMonths": 0
+            }, {
+                "syncFormState": 0
+            }],
+        "name": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfDateRangePicker.style = pfDateRangePickerCss();
+
+export { PfDateRangePicker as pf_date_range_picker };
+//# sourceMappingURL=pf-date-range-picker.entry.js.map
+
+//# sourceMappingURL=pf-date-range-picker.entry.js.map

package/dist/esm/pf-date-range-picker.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-date-range-picker.entry.js","sources":["../core/dist/date-range.js","src/components/pf-date-range-picker/pf-date-range-picker.css?tag=pf-date-range-picker&encapsulation=shadow","src/components/pf-date-range-picker/pf-date-range-picker.tsx"],"sourcesContent":["import { isSameDay, toMidday } from \"./date.js\";\n//#region src/date-range.ts\n/**\n* Where a click on `date` leaves the selection.\n*\n* Three cases, and the second two are the ones worth naming:\n* - not awaiting an end: start the range here and wait for the other end;\n* - awaiting an end, clicked before the start: the two swap, because a range\n*   has no opinion about which end the user picked first;\n* - awaiting an end, clicked the start again: start over rather than make a\n*   one-day range, which is what the React component does and is the kinder\n*   reading of a double click.\n*/\nfunction nextDateRangeSelection(current, date) {\n\tconst clicked = toMidday(date);\n\tif (!current.awaitingEnd || !current.range.start) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\tconst start = current.range.start;\n\tif (isSameDay(start, clicked)) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\treturn {\n\t\trange: clicked.getTime() < start.getTime() ? {\n\t\t\tstart: clicked,\n\t\t\tend: start\n\t\t} : {\n\t\t\tstart,\n\t\t\tend: clicked\n\t\t},\n\t\tawaitingEnd: false\n\t};\n}\n/**\n* How a day should read, given the range and whatever is hovered.\n*\n* A hovered day stands in for the missing end while the range is half-made,\n* which is what makes the preview follow the pointer. It stands in only when\n* there is a start and no end — hovering before the first click previews\n* nothing.\n*/\nfunction rangeDayState(date, range, hovered = null) {\n\tconst { start } = range;\n\tconst end = range.end ?? (start && hovered ? hovered : null);\n\tconst isStart = Boolean(start && isSameDay(date, start));\n\tconst isEnd = Boolean(end && isSameDay(date, end));\n\tif (!start || !end) return {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: false\n\t};\n\tconst [low, high] = start.getTime() <= end.getTime() ? [start, end] : [end, start];\n\tconst day = date.getTime();\n\treturn {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: day > low.getTime() && day < high.getTime()\n\t};\n}\n/** `YYYY-MM-DD/YYYY-MM-DD`, or `''` when the range is not yet complete. */\nfunction formatDateRange(range, format) {\n\tif (!range.start || !range.end) return \"\";\n\treturn `${format(range.start)}/${format(range.end)}`;\n}\n/** Parses `YYYY-MM-DD/YYYY-MM-DD`; anything else is an empty range. */\nfunction parseDateRange(value, parse) {\n\tconst [from, to] = (value ?? \"\").split(\"/\");\n\tconst start = parse(from ?? \"\");\n\tconst end = parse(to ?? \"\");\n\tif (!start || !end) return {\n\t\tstart: null,\n\t\tend: null\n\t};\n\treturn start.getTime() <= end.getTime() ? {\n\t\tstart,\n\t\tend\n\t} : {\n\t\tstart: end,\n\t\tend: start\n\t};\n}\n//#endregion\nexport { formatDateRange, nextDateRangeSelection, parseDateRange, rangeDayState };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-daterange-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-daterange-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row-controls {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-daterange-bg);\n  border: 1px solid var(--pf-daterange-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-daterange-text);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-daterange-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-daterange-text-muted);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-daterange-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n  color: var(--pf-daterange-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-daterange-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-daterange-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-daterange-menu-bg);\n  border: 1px solid var(--pf-daterange-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  color: var(--pf-daterange-text);\n  padding: var(--space-3);\n}\n\n.panel:popover-open {\n  animation: pf-date-range-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-range-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n\n.nav {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--space-2);\n}\n\n.step {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-daterange-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.step:hover {\n  background: var(--pf-daterange-bg-subtle);\n  color: var(--pf-daterange-text);\n}\n\n.step:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n/* One month on a phone, two side by side from --md up. */\n.months {\n  display: grid;\n  gap: var(--space-4);\n}\n\n@media (--md) {\n  .months {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.month-label {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: 0 0 var(--space-2);\n  text-align: center;\n}\n\n.grid {\n  display: grid;\n  gap: 2px;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n/*\n * `display: contents`, so each row's seven cells join the grid's own columns.\n * The rows exist for the `role=\"row\"` the grid pattern needs, not for layout.\n */\n.row {\n  display: contents;\n}\n\n.weekday {\n  color: var(--pf-daterange-text-muted);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  padding: var(--space-1) 0;\n  text-align: center;\n}\n\n.day,\n.empty {\n  aspect-ratio: 1;\n  display: flex;\n  min-width: var(--space-7);\n}\n\n.day {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-daterange-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n}\n\n.day:hover:not([aria-disabled='true']) {\n  background: var(--pf-daterange-bg-subtle);\n}\n\n.day:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.day--today {\n  border-color: var(--pf-calendar-today-border);\n}\n\n/*\n * The inside of the range is square and the ends are rounded on their outer\n * side only, so the run reads as one band rather than a row of pills.\n */\n.day--inside {\n  background: var(--pf-daterange-range-bg);\n  border-radius: 0;\n  color: var(--pf-daterange-range-text);\n}\n\n.day--endpoint {\n  background: var(--pf-calendar-selected-bg);\n  border-color: var(--pf-calendar-selected-bg);\n  color: var(--pf-calendar-selected-text);\n}\n\n.day--start:not(.day--end) {\n  border-end-end-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.day--end:not(.day--start) {\n  border-end-start-radius: 0;\n  border-start-start-radius: 0;\n}\n\n.day[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n","import {\n  addMonths,\n  buildCalendarDays,\n  CALENDAR_CELL_COUNT,\n  clampMonthToYearRange,\n  composeDescribedBy,\n  formatDateRange,\n  formatISODate,\n  isOutsideDateRange,\n  isSameDay,\n  isSameMonth,\n  Keys,\n  moveCalendarDate,\n  nextDateRangeSelection,\n  observeAnchoredPosition,\n  parseDateRange,\n  parseISODate,\n  rangeDayState,\n  startOfMonth,\n  toMidday,\n  WEEKDAY_LABELS,\n  type CalendarMove,\n  type DateRangeValue,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, CalendarMove> = {\n  [Keys.ArrowRight]: 'day-next',\n  [Keys.ArrowLeft]: 'day-previous',\n  [Keys.ArrowDown]: 'week-next',\n  [Keys.ArrowUp]: 'week-previous',\n  [Keys.Home]: 'week-start',\n  [Keys.End]: 'week-end',\n  PageDown: 'month-next',\n  PageUp: 'month-previous',\n};\n\n/**\n * A form-associated date-range field: two month grids in a popover, with a\n * preview that follows the pointer while the range is half-made.\n *\n * **It submits two entries from one control.** `setFormValue` accepts a\n * `FormData`, and every entry in it is submitted — measured, along with the\n * fact that the element's own `name` attribute is then ignored entirely. So a\n * range goes in as `${name}-start` and `${name}-end`, which is what a server\n * handling a form actually wants, rather than one field a handler has to split.\n * The `value` property stays a single round-trippable `start/end` string.\n *\n * The grids are rendered here rather than composed from two `pf-calendar`s:\n * the range preview spans both months, so one element has to own the hover and\n * the selection for both. The day-state and selection rules are core's, shared\n * with the React component.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the grids.\n * @part clear - the clear button.\n * @part panel - the floating panel.\n * @part grid - each month grid.\n * @part day - every day cell.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-range-picker',\n  styleUrl: 'pf-date-range-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDateRangePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The base name for the two submitted entries, `${name}-start` and\n   * `${name}-end`. Reflected for selectors; the submission reads the property,\n   * because a `FormData` value carries its own keys.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The range as `YYYY-MM-DD/YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select dates';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the range. */\n  @Prop() allowClear = false;\n\n  @Prop() min?: string;\n\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when the range changes or is cleared, with the `start/end` string. */\n  @Event() pfChange!: EventEmitter<{ value: string; start: string; end: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The left-hand month; the right-hand one is always the month after. */\n  @State() leftMonth: Date = startOfMonth(new Date());\n\n  /** The day the grids' single tab stop sits on. */\n  @State() focusedDate: Date = toMidday(new Date());\n\n  /** The day under the pointer, which previews the missing end. */\n  @State() hovered: Date | null = null;\n\n  /** True once a start is chosen and the next click sets the end. */\n  @State() awaitingEnd = false;\n\n  private initialValue = '';\n\n  /**\n   * The start held while the range is half-made.\n   *\n   * Not in `value`, because `value` is the *submitted* range and a half-made\n   * one is not a range — a form read mid-selection would see a start with no\n   * end. Held here instead, and folded back in for rendering.\n   */\n  private pendingStart: Date | null = null;\n  private stopObserving?: () => void;\n  private shouldRestoreFocus = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    const { start } = this.range();\n    const base = start ?? toMidday(new Date());\n    this.focusedDate = base;\n    this.leftMonth = this.clamp(startOfMonth(base));\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (!this.shouldRestoreFocus) return;\n    this.shouldRestoreFocus = false;\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /**\n   * Follows a range set from outside, so the grids show what they are told.\n   *\n   * Without this the element kept whatever month it loaded with, and a\n   * consumer assigning `value` got a correct value over the wrong months —\n   * the days it names were not even rendered.\n   */\n  @Watch('value')\n  syncDisplayedMonths() {\n    const { start, end } = this.range();\n    if (!start || !end) return;\n    this.pendingStart = null;\n    this.awaitingEnd = false;\n    this.focusedDate = start;\n    this.leftMonth = this.clamp(startOfMonth(start));\n  }\n\n  /*\n   * `name` is watched here and not on the controls that pass a plain string to\n   * `setFormValue`: those take their submission name from the reflected\n   * attribute, so the platform picks a change up by itself. This one builds\n   * the name *into* a FormData, so without the watch a name assigned after\n   * load would never reach the submission.\n   */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const { start, end } = this.range();\n\n    if (!start || !end || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      /*\n       * A FormData, so one control submits both ends. Measured: every entry in\n       * it reaches the submission, and the element's own `name` attribute is\n       * ignored in this mode — which is why the keys are built here.\n       */\n      const data = new FormData();\n      data.append(`${this.name}-start`, formatISODate(start));\n      data.append(`${this.name}-end`, formatISODate(end));\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, Boolean(start && end), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.awaitingEnd = false;\n    this.hovered = null;\n  }\n\n  private range(): DateRangeValue {\n    return parseDateRange(this.value, parseISODate);\n  }\n\n  private get years() {\n    const now = new Date().getFullYear();\n    const start = this.startYear ?? now - 50;\n    const end = this.endYear ?? now + 50;\n    return { start: Math.min(start, end), end: Math.max(start, end) };\n  }\n\n  private clamp(date: Date): Date {\n    const { start, end } = this.years;\n    return clampMonthToYearRange(date, start, end);\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private isDisabled(date: Date): boolean {\n    if (isOutsideDateRange(date, parseISODate(this.min), parseISODate(this.max))) return true;\n    return this.isDateDisabled?.(date) ?? false;\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.shouldRestoreFocus = true;\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.hovered = null;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  /** One click through core's state machine, plus this element's side-effects. */\n  private pick(date: Date) {\n    if (this.isDisabled(date)) return;\n\n    /*\n     * `displayRange()`, not `range()`. A half-made range is deliberately kept\n     * out of `value`, so reading the state machine's input from `value` hands\n     * it a range with no start — and core, correctly, treats that as \"begin a\n     * new range\". Every second click restarted instead of closing. Caught by\n     * the swap and Enter tests.\n     */\n    const next = nextDateRangeSelection(\n      { range: this.displayRange(), awaitingEnd: this.awaitingEnd },\n      date,\n    );\n\n    this.awaitingEnd = next.awaitingEnd;\n    this.focusedDate = toMidday(date);\n\n    if (next.awaitingEnd) {\n      // Half-made: hold the start without reporting an incomplete range.\n      this.value = '';\n      this.pendingStart = next.range.start;\n      return;\n    }\n\n    this.pendingStart = null;\n    this.hovered = null;\n    this.value = formatDateRange(next.range, formatISODate);\n    this.pfChange.emit({\n      value: this.value,\n      start: next.range.start ? formatISODate(next.range.start) : '',\n      end: next.range.end ? formatISODate(next.range.end) : '',\n    });\n    this.open = false;\n  }\n\n  /** What the grids draw: the committed range, or the half-made one. */\n  private displayRange(): DateRangeValue {\n    const committed = this.range();\n    if (committed.start && committed.end) return committed;\n    return { start: this.pendingStart, end: null };\n  }\n\n  private moveFocus(move: CalendarMove) {\n    const next = moveCalendarDate(this.focusedDate, move);\n    const { start, end } = this.years;\n    if (next.getFullYear() < start || next.getFullYear() > end) return;\n\n    this.focusedDate = next;\n    this.shouldRestoreFocus = true;\n\n    // Keep the focused day on screen: it belongs to one of the two months.\n    const right = addMonths(this.leftMonth, 1);\n    if (!isSameMonth(next, this.leftMonth) && !isSameMonth(next, right)) {\n      this.leftMonth = this.clamp(startOfMonth(next));\n    }\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      this.moveFocus(move);\n      return;\n    }\n\n    if (event.key === Keys.Enter || event.key === Keys.Space) {\n      event.preventDefault();\n      this.pick(this.focusedDate);\n      this.shouldRestoreFocus = true;\n    }\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value && !this.pendingStart) return;\n    this.value = '';\n    this.pendingStart = null;\n    this.awaitingEnd = false;\n    this.hovered = null;\n    this.pfChange.emit({ value: '', start: '', end: '' });\n  };\n\n  private formatted(): string {\n    const { start, end } = this.range();\n    if (!start || !end) return '';\n    const format = new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n    return `${format.format(start)} – ${format.format(end)}`;\n  }\n\n  private renderGrid(month: Date) {\n    const days = buildCalendarDays(month);\n    const range = this.displayRange();\n    const today = toMidday(new Date());\n    const label = new Intl.DateTimeFormat('en-US', {\n      month: 'long',\n      year: 'numeric',\n    }).format(month);\n\n    return (\n      <div class=\"month\">\n        <p class=\"month-label\">{label}</p>\n        <div class=\"grid\" part=\"grid\" role=\"grid\" aria-label={label}>\n          <div class=\"row\" role=\"row\">\n            {WEEKDAY_LABELS.map((day) => (\n              <span key={day} class=\"weekday\" role=\"columnheader\" aria-label={day}>\n                {day}\n              </span>\n            ))}\n          </div>\n\n          {Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (\n            <div key={week} class=\"row\" role=\"row\">\n              {days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {\n                if (!inCurrentMonth) {\n                  return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n                }\n\n                const state = rangeDayState(date, range, this.hovered);\n                const isEndpoint = state.isStart || state.isEnd;\n                const disabled = this.isDisabled(date);\n\n                return (\n                  <button\n                    key={formatISODate(date)}\n                    type=\"button\"\n                    role=\"gridcell\"\n                    data-day={formatISODate(date)}\n                    part=\"day\"\n                    class={{\n                      day: true,\n                      'day--today': isSameDay(today, date),\n                      'day--endpoint': isEndpoint,\n                      'day--start': state.isStart,\n                      'day--end': state.isEnd,\n                      'day--inside': state.isInside,\n                    }}\n                    tabindex={isSameDay(this.focusedDate, date) ? 0 : -1}\n                    aria-selected={isEndpoint || state.isInside ? 'true' : 'false'}\n                    aria-current={isSameDay(today, date) ? 'date' : null}\n                    aria-disabled={disabled ? 'true' : null}\n                    aria-label={new Intl.DateTimeFormat('en-US', {\n                      weekday: 'long',\n                      month: 'long',\n                      day: 'numeric',\n                      year: 'numeric',\n                    }).format(date)}\n                    onClick={() => {\n                      this.pick(date);\n                      this.shouldRestoreFocus = true;\n                    }}\n                    onMouseEnter={() => {\n                      if (this.awaitingEnd && !disabled) this.hovered = date;\n                    }}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\n    const right = addMonths(this.leftMonth, 1);\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class=\"row-controls\">\n            <button\n              id=\"trigger\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"trigger\"\n              class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n              type=\"button\"\n              disabled={this.disabled}\n              aria-haspopup=\"dialog\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-controls=\"panel\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-describedby={describedBy}\n              onClick={() => {\n                if (!this.disabled) this.open = !this.open;\n              }}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && (this.value || this.pendingStart) && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected dates\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date range\"\n          onToggle={this.onToggle}\n          onKeyDown={this.onKeyDown}\n          onMouseLeave={() => {\n            this.hovered = null;\n          }}\n        >\n          <div class=\"nav\">\n            <button\n              type=\"button\"\n              class=\"step\"\n              aria-label=\"Previous month\"\n              onClick={() => {\n                this.leftMonth = this.clamp(addMonths(this.leftMonth, -1));\n              }}\n            >\n              <pf-icon name=\"square-caret-left\"></pf-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"step\"\n              aria-label=\"Next month\"\n              onClick={() => {\n                this.leftMonth = this.clamp(addMonths(this.leftMonth, 1));\n              }}\n            >\n              <pf-icon name=\"square-caret-right\"></pf-icon>\n            </button>\n          </div>\n\n          <div class=\"months\">\n            {this.renderGrid(this.leftMonth)}\n            {this.renderGrid(right)}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}