@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-date-range-picker/pf-date-range-picker.js

@@ -0,0 +1,833 @@
+import { addMonths, buildCalendarDays, CALENDAR_CELL_COUNT, clampMonthToYearRange, composeDescribedBy, formatDateRange, formatISODate, isOutsideDateRange, isSameDay, isSameMonth, Keys, moveCalendarDate, nextDateRangeSelection, observeAnchoredPosition, parseDateRange, parseISODate, rangeDayState, startOfMonth, toMidday, WEEKDAY_LABELS, } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { placePopover } from "../../place-popover";
+import { h, Host, } from "@stencil/core";
+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',
+};
+/**
+ * A form-associated date-range field: two month grids in a popover, with a
+ * preview that follows the pointer while the range is half-made.
+ *
+ * **It submits two entries from one control.** `setFormValue` accepts a
+ * `FormData`, and every entry in it is submitted — measured, along with the
+ * fact that the element's own `name` attribute is then ignored entirely. So a
+ * range goes in as `${name}-start` and `${name}-end`, which is what a server
+ * handling a form actually wants, rather than one field a handler has to split.
+ * The `value` property stays a single round-trippable `start/end` string.
+ *
+ * The grids are rendered here rather than composed from two `pf-calendar`s:
+ * the range preview spans both months, so one element has to own the hover and
+ * the selection for both. The day-state and selection rules are core's, shared
+ * with the React component.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part trigger - the button that opens the grids.
+ * @part clear - the clear button.
+ * @part panel - the floating panel.
+ * @part grid - each month grid.
+ * @part day - every day cell.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfDateRangePicker {
+    el;
+    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: 'c769f8e46ecb2b1cc36fb6569f5c52c602d5bace' }, h("div", { key: '9800b4ea3fbd90e9ce1aa0e14b1c18c960da6c80', class: "field", part: "field" }, this.label && (h("label", { key: 'da11753ffc0352c61aa63c57fa03f84dbff7b8be', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '156cce16b0dcd46f94cf13f87bf2bdeebb1f8bd3', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9ff549ec5c220e04049055b813eb979fdf87a835', class: "row-controls" }, h("button", { key: 'b4245ab2a3fe86abfc33b451eb4cc4994ef78480', id: "trigger", 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: '02e3efca7af827add1fa80519cdf995c7cb54dc3', class: { value: true, 'value--placeholder': !text } }, text || this.placeholder), h("pf-icon", { key: 'e2139c1b236edfd82e109caeb778de8c1c43468d', name: "calendar" })), this.allowClear && (this.value || this.pendingStart) && (h("button", { key: 'f2572d3f798e9ba895b1165d024522014cfbb5ab', class: "clear", part: "clear", type: "button", "aria-label": "Clear selected dates", disabled: this.disabled, onClick: this.clear }, h("pf-icon", { key: 'd22ecfecc4114815c557b60d4908a9bbea6e8b1d', name: "circle-xmark" })))), this.description && (h("p", { key: 'f5399489f7666e2b7b7d4bbc1885e74a52e32cd4', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '1a46f2d10e6edcc47979ecbb0724958a9790b2db', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '2aaa30dcd06ab95ebe7973d2783224cf236b57ef', 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: 'd5c052b2ce87bb5a19492a3d2afe65a8be50aac6', class: "nav" }, h("button", { key: '3f04ddb2cfea5ef4c05380a81c1f4cd2b43be396', type: "button", class: "step", "aria-label": "Previous month", onClick: () => {
+                this.leftMonth = this.clamp(addMonths(this.leftMonth, -1));
+            } }, h("pf-icon", { key: 'cb18b7c7e71a687d6220126f503a36170f1afc2f', name: "square-caret-left" })), h("button", { key: '837bf1095910392e6a0249f785e558ecf729e870', type: "button", class: "step", "aria-label": "Next month", onClick: () => {
+                this.leftMonth = this.clamp(addMonths(this.leftMonth, 1));
+            } }, h("pf-icon", { key: 'bd56b0173777c7dc13bc9c052e2ccb7fc81cefb1', name: "square-caret-right" }))), h("div", { key: '102f50860c882a493ec9b8f9098d0703f4ecaf40', class: "months" }, this.renderGrid(this.leftMonth), this.renderGrid(right)))));
+    }
+    static get is() { return "pf-date-range-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-date-range-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-date-range-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The base name for the two submitted entries, `${name}-start` and\n`${name}-end`. Reflected for selectors; the submission reads the property,\nbecause a `FormData` value carries its own keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The range as `YYYY-MM-DD/YYYY-MM-DD`, or empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is showing. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select dates'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offer a button that empties the range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "startYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-year"
+            },
+            "endYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-year"
+            },
+            "isDateDisabled": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "((date: Date) => boolean) | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A predicate for days that cannot be chosen; see `pf-calendar`."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leftMonth": {},
+            "focusedDate": {},
+            "hovered": {},
+            "awaitingEnd": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the range changes or is cleared, with the `start/end` string."
+                },
+                "complexType": {
+                    "original": "{ value: string; start: string; end: string }",
+                    "resolved": "{ value: string; start: string; end: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the panel opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncDisplayedMonths"
+            }, {
+                "propName": "name",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-date-range-picker.js.map