@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/datepickers/wm-date-range.js

@@ -0,0 +1,1158 @@
+import { h, Host, } from "@stencil/core";
+import { intl, dateFind, toBool, handleDisabledAttribute, dateToISO, calendar_months, debounce, findAllScrollableParents, findPositioningBoundary, } from "../../global/functions";
+/**
+ * Two linked date inputs (start and end) with a shared calendar popup for selecting a date
+ * range. Users can type or click to set each date. Provides separate error states for start
+ * and end, and emits distinct blur events for each input. Use instead of two native
+ * `<input type="date">` elements when a range is required.
+ *
+ * @category Form Inputs
+ *
+ * @keyboardInteraction
+ * - **Input fields**: Tab moves focus between start input, end input, and the calendar toggle.
+ * - **Calendar toggle**: Space / Enter opens the calendar; Escape closes it and returns focus.
+ * - **Day grid**: Arrow keys navigate dates; Enter selects. After selecting the first date,
+ *   the calendar resets for a second selection. Selecting a date earlier than the first date
+ *   automatically swaps start and end.
+ * - **Month/year selectors**: Arrow keys cycle values; Tab/Shift+Tab move focus through controls.
+ *
+ * @accessibility
+ * - `label-start` and `label-end` are required for accessibility — always provide both even if
+ *   visually implied by context.
+ * - The calendar toggle announces "Select range" to screen readers and reflects `aria-expanded`.
+ * - Validation errors are announced via an `aria-live` region when `error-message` changes.
+ * - The calendar popup hides its toggle when there is no room to display it; users can still
+ *   type dates directly into the inputs.
+ *
+ * @usageNotes
+ * - Set `value-start` and `value-end` in the format specified by `date-format` (default
+ *   `mm/dd/yyyy`). For programmatic pre-population, prefer ISO format via `preselected` and
+ *   convert with the `reformatDate` method.
+ * - `wmRangeSelection` emits a detail object with `startDate` and `endDate`, each in ISO, US,
+ *   and INT formats.
+ * - The same-date re-selection rule: clicking the same date as `date1` a second time resets the
+ *   range selection so the user can pick a new `date1`.
+ *
+ * @example {html} Basic date range
+ * <wm-date-range label-start="Start date" label-end="End date"></wm-date-range>
+ *
+ * @example {react} Basic date range
+ * // The component does not update its own values after a calendar selection --
+ * // the app must call reformatDate and set valueStart/valueEnd imperatively via a ref.
+ * const ref = useRef(null);
+ *
+ * function getFormatName(format) {
+ *   const map = { 'mm/dd/yyyy': 'US', 'dd/mm/yyyy': 'INT', 'yyyy/mm/dd': 'ISO' };
+ *   return format ? map[format] : 'US';
+ * }
+ *
+ * // event.detail is { startDate: { iso, us, int }, endDate: { iso, us, int } }
+ * const handleRangeSelection = async (event) => {
+ *   const dr = ref.current;
+ *   const fmt = getFormatName(dr.getAttribute('date-format'));
+ *   dr.valueStart = await dr.reformatDate('ISO', fmt, event.detail.startDate.iso);
+ *   dr.valueEnd = await dr.reformatDate('ISO', fmt, event.detail.endDate.iso);
+ *   dr.errorMessage = '';
+ * };
+ *
+ * const handleInputBlurred = async (field) => {
+ *   const dr = ref.current;
+ *   const fmt = getFormatName(dr.getAttribute('date-format'));
+ *   const value = field === 'start' ? dr.valueStart : dr.valueEnd;
+ *   if (value) {
+ *     const iso = await dr.reformatDate(fmt, 'ISO', value);
+ *     if (await dr.isValidISO(iso)) {
+ *       const display = await dr.reformatDate('ISO', fmt, iso);
+ *       if (field === 'start') dr.valueStart = display;
+ *       else dr.valueEnd = display;
+ *       dr.errorMessage = '';
+ *       dr.invalidStart = false;
+ *       dr.invalidEnd = false;
+ *     } else {
+ *       dr.errorMessage = `Please enter a valid date in the format ${dr.getAttribute('date-format') ?? 'mm/dd/yyyy'}`;
+ *       if (field === 'start') dr.invalidStart = true;
+ *       else dr.invalidEnd = true;
+ *     }
+ *   }
+ * };
+ *
+ * <WmDateRange
+ *   ref={ref}
+ *   labelStart="Start date"
+ *   labelEnd="End date"
+ *   onWmRangeSelection={handleRangeSelection}
+ *   onWmStartInputBlur={() => handleInputBlurred('start')}
+ *   onWmEndInputBlur={() => handleInputBlurred('end')}
+ * />
+ *
+ * @example {html} Required fields with validation
+ * <wm-date-range label-start="From" label-end="To" required-field></wm-date-range>
+ *
+ * @example {react} Required fields with validation
+ * <WmDateRange
+ *   ref={ref}
+ *   labelStart="From"
+ *   labelEnd="To"
+ *   requiredField={true}
+ *   onWmRangeSelection={handleRangeSelection}
+ *   onWmStartInputBlur={() => handleInputBlurred('start')}
+ *   onWmEndInputBlur={() => handleInputBlurred('end')}
+ * />
+ *
+ * @example {html} International date format
+ * <wm-date-range label-start="Start" label-end="End" date-format="dd/mm/yyyy"></wm-date-range>
+ *
+ * @example {react} International date format
+ * <WmDateRange labelStart="Start" labelEnd="End" dateFormat="dd/mm/yyyy" />
+ *
+ * @example {html} Disabled
+ * <wm-date-range label-start="Start" label-end="End" disabled></wm-date-range>
+ *
+ * @example {react} Disabled
+ * <WmDateRange labelStart="Start" labelEnd="End" disabled={true} />
+ *
+ */
+export class DateRange {
+    constructor() {
+        this.calWidth = 681; // 673 + 8px of room
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        this.popupMaxHeight = 413; // maximum height when a month spans 6 rows of days
+        this.fit = null;
+        this.debouncedCheckCanOpen = debounce(() => {
+            var _a;
+            if (!((_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.isConnected))
+                return; // bail if the component was unmounted before the debounce fired
+            this.canOpen = this.measureFit() !== null;
+        }, 100);
+        this.pf_repositionRAF = null;
+        this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
+        this.dateFormat = "mm/dd/yyyy";
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.invalidStart = false;
+        this.invalidEnd = false;
+        this.labelStart = "";
+        this.labelEnd = "";
+        this.preselected = undefined;
+        this.requiredField = false;
+        this.valueStart = "";
+        this.valueEnd = "";
+        this.isExpanded = false;
+        this.canOpen = true;
+    }
+    pf_reposition() {
+        if (this.hasAnchor || !this.isExpanded)
+            return;
+        // rAF-throttle: native anchor() re-resolves on every frame; this matches that cadence
+        // without thrashing layout when scroll fires many times per frame.
+        if (this.pf_repositionRAF !== null)
+            return;
+        this.pf_repositionRAF = requestAnimationFrame(() => {
+            this.pf_repositionRAF = null;
+            this.pf_positionDropdown();
+        });
+    }
+    // Returns the closest scrollable ancestor that can yield at least `neededScroll` of additional scroll.
+    findScrollable(neededScroll) {
+        // Scrolling an ancestor above the positioning boundary (e.g. a scrollable container behind
+        // an open modal dialog) won't move the anchor, so those don't count.
+        const boundary = findPositioningBoundary(this.el);
+        for (const parent of findAllScrollableParents(this.el)) {
+            if (boundary && parent !== boundary && !boundary.contains(parent))
+                continue;
+            const available = parent.scrollHeight - parent.scrollTop - parent.clientHeight;
+            if (available >= neededScroll)
+                return parent;
+        }
+        return null;
+    }
+    measureFit() {
+        // Safari has issues with position-try, so the component measures where to place the popover itself.
+        // see https://docs.google.com/document/d/1nCW9mgjPmw0mdif8jyfkjuXbAds_OL2slvS3EhNJsBg/edit?tab=t.0#heading=h.wkyhkgchgk3d
+        const rect = this.anchorEl.getBoundingClientRect();
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const fitsBelow = spaceBelow >= this.popupMaxHeight; // (1) enough viewport room below
+        const fitsAbove = spaceAbove >= this.popupMaxHeight; // (2) enough viewport room above
+        const canScroll = this.findScrollable(this.popupMaxHeight - spaceBelow) !== null; // (3) a scrollable ancestor can supply the missing room
+        const fitsCentered = vw >= this.calWidth && vh >= this.popupMaxHeight; // (4) the viewport is big enough to fit the popover centered over the input
+        // (1) below; (2) above; (3) below and scroll into view; (4) centered over input; (5) no placement works → caller hides the toggle
+        const vertical = fitsBelow
+            ? "below"
+            : fitsAbove
+                ? "above"
+                : canScroll
+                    ? "below-scroll"
+                    : fitsCentered
+                        ? "over"
+                        : null;
+        if (!vertical)
+            return null;
+        const fitsLeftAligned = rect.left + this.calWidth <= vw; // (a) left edge aligns to input's left edge
+        const fitsRightAligned = rect.right - this.calWidth >= 0; // (b) right edge aligns to input's right edge
+        // (a) left-align; (b) right-align; (c) snap to the viewport edge with the most room; (d) no placement works → caller hides the toggle
+        const horizontal = fitsLeftAligned
+            ? "left"
+            : fitsRightAligned
+                ? "right"
+                : vw >= this.calWidth
+                    ? rect.left > vw - rect.right
+                        ? "clip-left"
+                        : "clip-right"
+                    : null;
+        if (!horizontal)
+            return null;
+        return { vertical, horizontal };
+    }
+    checkCanOpen() {
+        this.debouncedCheckCanOpen();
+    }
+    get _disabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get focusDates() {
+        // the date the first calendar will open to. either:
+        // - value-start
+        // - a date provided by the dev via prop preselected
+        // - today's date
+        const isoStart = this.toISO(this.valueStart);
+        // fallback:
+        let startFocusDate = dateToISO(new Date());
+        if (this._isValidISO(isoStart)) {
+            startFocusDate = isoStart;
+        }
+        else if (this.preselected && this._isValidISO(this.preselected)) {
+            startFocusDate = this.preselected;
+        }
+        // the date the second calendar will open to. either:
+        // - value-end, if exists and not same month as value-start
+        // - the month after the first calendar
+        let firstOfNextMonth = this.toJSDate(startFocusDate);
+        if (firstOfNextMonth.getUTCMonth() == 11) {
+            firstOfNextMonth.setYear(firstOfNextMonth.getUTCFullYear() + 1);
+        }
+        firstOfNextMonth.setMonth((firstOfNextMonth.getUTCMonth() + 1) % 12, 1);
+        let endFocusDate = dateToISO(firstOfNextMonth); // fallback
+        const isoEnd = this.toISO(this.valueEnd);
+        if (this._isValidISO(isoEnd)) {
+            const sameMonth = this.isSameMonth(startFocusDate, isoEnd);
+            if (!sameMonth) {
+                endFocusDate = isoEnd;
+                // if there is a valueEnd and no valueStart, set valueStart to the month before valueEnd;
+                if (!isoStart) {
+                    let firstOfPrevMonth = this.toJSDate(endFocusDate);
+                    let month = firstOfPrevMonth.getUTCMonth() - 1;
+                    if (month == -1) {
+                        month = 11;
+                        firstOfPrevMonth.setYear(firstOfPrevMonth.getUTCFullYear() - 1);
+                    }
+                    firstOfPrevMonth.setMonth(month, 1);
+                    startFocusDate = dateToISO(firstOfPrevMonth);
+                }
+            }
+        }
+        return [startFocusDate, endFocusDate];
+    }
+    // same month of the same year
+    isSameMonth(date1, date2) {
+        if (date1 && date2) {
+            return date1.slice(0, -3) === date2.slice(0, -3);
+        }
+        else {
+            return false;
+        }
+    }
+    toJSDate(date) {
+        if (date && this._isValidISO(date)) {
+            let newDate = new Date();
+            newDate.setUTCFullYear(parseInt(date.split("-")[0]), parseInt(date.split("-")[1]) - 1, parseInt(date.split("-")[2]));
+            return newDate;
+        }
+        else {
+            return undefined;
+        }
+    }
+    toISO(date) {
+        // returns the input when it can't reformat
+        return this._reformatDate(this.formats[this.dateFormat], "ISO", date);
+    }
+    handleDisabled() {
+        handleDisabledAttribute(this.el, this._disabled);
+    }
+    updateValueStart() {
+        this.startInputEl.value = this.valueStart ? this.valueStart : "";
+    }
+    updateValueEnd() {
+        this.endInputEl.value = this.valueEnd ? this.valueEnd : "";
+    }
+    handleErrorMessage() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
+        }
+    }
+    pf_positionDropdown() {
+        var _a, _b, _c, _d, _e, _f;
+        // polyfill for browsers without anchor() support (older Firefox).
+        const rect = this.anchorEl.getBoundingClientRect();
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        const gap = 2;
+        this.el.style.removeProperty("--popup-translate-y");
+        this.el.style.removeProperty("--popup-left");
+        // VERTICAL
+        if (((_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) === "above") {
+            this.el.style.setProperty("--popup-translate-y", rect.top - this.popupMaxHeight - gap + "px");
+        }
+        else if (((_b = this.fit) === null || _b === void 0 ? void 0 : _b.vertical) === "over") {
+            this.el.style.setProperty("--popup-translate-y", (vh - this.popupMaxHeight) / 2 + "px");
+        }
+        else {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+        }
+        // HORIZONTAL
+        if (((_c = this.fit) === null || _c === void 0 ? void 0 : _c.vertical) === "over") {
+            this.el.style.setProperty("--popup-left", (vw - this.calWidth) / 2 + "px");
+        }
+        else if (((_d = this.fit) === null || _d === void 0 ? void 0 : _d.horizontal) === "right") {
+            this.el.style.setProperty("--popup-left", rect.right - this.calWidth + "px");
+        }
+        else if (((_e = this.fit) === null || _e === void 0 ? void 0 : _e.horizontal) === "clip-left") {
+            this.el.style.setProperty("--popup-left", "0px");
+        }
+        else if (((_f = this.fit) === null || _f === void 0 ? void 0 : _f.horizontal) === "clip-right") {
+            this.el.style.setProperty("--popup-left", vw - this.calWidth + "px");
+        }
+        else {
+            this.el.style.setProperty("--popup-left", rect.left + "px");
+        }
+    }
+    handleToggle(ev) {
+        if (ev.newState === "open") {
+            this.fit = this.measureFit();
+            if (!this.fit) {
+                // Resize check should have hidden the toggle, but if anchor moved since then, bail out.
+                this.canOpen = false;
+                this.popupEl.hidePopover();
+                return;
+            }
+            if (!this.hasAnchor) {
+                this.pf_positionDropdown();
+            }
+            requestAnimationFrame(() => {
+                var _a, _b;
+                this.isExpanded = true;
+                // state stuff
+                this.startCalEl.focusDate = this.focusDates[0];
+                this.endCalEl.focusDate = this.focusDates[1];
+                this.startCalEl.focusCell();
+                if (this.valueStart) {
+                    const startISO = this.toISO(this.valueStart);
+                    if (this._isValidISO(startISO)) {
+                        this.startCalEl.startDate = startISO;
+                    }
+                    if (this.valueEnd) {
+                        const endISO = this.toISO(this.valueEnd);
+                        if (this._isValidISO(endISO)) {
+                            if (this.isSameMonth(startISO, endISO)) {
+                                this.startCalEl.endDate = endISO;
+                            }
+                            else {
+                                this.endCalEl.endDate = endISO;
+                            }
+                        }
+                    }
+                }
+                if (((_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) === "below-scroll") {
+                    const scrollAmount = this.anchorEl.getBoundingClientRect().bottom + this.popupMaxHeight + 2 - document.documentElement.clientHeight;
+                    if (scrollAmount > 0)
+                        (_b = this.findScrollable(scrollAmount)) === null || _b === void 0 ? void 0 : _b.scrollBy({ top: scrollAmount, behavior: "smooth" });
+                }
+            });
+        }
+        else {
+            if (this.pf_repositionRAF !== null) {
+                cancelAnimationFrame(this.pf_repositionRAF);
+                this.pf_repositionRAF = null;
+            }
+            this.fit = null;
+            // reset
+            // clearing these in case the user closes without finishing the process
+            this.date1 = undefined;
+            this.date2 = undefined;
+            this.startCalEl.startDate = undefined;
+            this.startCalEl.endDate = undefined;
+            this.startCalEl.hoverDate = undefined;
+            this.endCalEl.startDate = undefined;
+            this.endCalEl.endDate = undefined;
+            this.endCalEl.hoverDate = undefined;
+            this.startCalEl.view = "month";
+            this.endCalEl.view = "month";
+            this.isExpanded = false;
+        }
+    }
+    closePopup(returnFocus = false) {
+        this.popupEl.hidePopover();
+        if (returnFocus) {
+            this.toggleEl.focus();
+        }
+    }
+    handleFocus() {
+        this.wrapperEl.classList.add("focus");
+    }
+    handleBlur() {
+        this.wrapperEl.classList.remove("focus");
+    }
+    handleStartInputBlur() {
+        this.wmStartInputBlur.emit();
+    }
+    handleEndInputBlur() {
+        this.wmEndInputBlur.emit();
+    }
+    handleStartInput(ev) {
+        // keep component's value in sync with input's value
+        this.valueStart = ev.target.value;
+    }
+    handleEndInput(ev) {
+        // keep component's value in sync with input's value
+        this.valueEnd = ev.target.value;
+    }
+    handleDateFocus(ev) {
+        const cal = ev.target;
+        const newFocusVal = cal.focusDate;
+        // keeping calendars in sync
+        // (left one should always be before right one)
+        const startYearMonth = this.startCalEl.focusDate.slice(0, -3);
+        const endYearMonth = this.endCalEl.focusDate.slice(0, -3);
+        if (cal == this.startCalEl) {
+            if (startYearMonth >= endYearMonth) {
+                this.endCalEl.focusDate = dateFind.month.increase(this.startCalEl.focusDate, 1);
+            }
+        }
+        else if (cal == this.endCalEl) {
+            if (endYearMonth <= startYearMonth) {
+                this.startCalEl.focusDate = dateFind.month.decrease(this.endCalEl.focusDate, 1);
+            }
+        }
+        // SR announcements
+        if (this.oldFocusVal) {
+            const newYear = dateFind.year.asInt(newFocusVal);
+            const oldYear = dateFind.year.asInt(this.oldFocusVal);
+            const newMonth = dateFind.month.asInt(newFocusVal);
+            const oldMonth = dateFind.month.asInt(this.oldFocusVal);
+            if (cal.view === "month") {
+                if (newYear != oldYear || newMonth != oldMonth) {
+                    this.liveRegionEl.innerHTML = intl.formatMessage({
+                        id: "date.viewingMonth",
+                        defaultMessage: "Viewing {month}, {year}",
+                        description: "Announcement indicating current month and year visible in a date picker",
+                    }, {
+                        month: calendar_months[newMonth - 1],
+                        year: newYear,
+                    });
+                }
+            }
+            else {
+                if (newYear != oldYear) {
+                    this.liveRegionEl.innerHTML = intl.formatMessage({
+                        id: "date.yearSelected",
+                        defaultMessage: "{year} selected.",
+                        description: "Announcement after the user selects a year in a date picker",
+                    }, { year: newYear });
+                }
+                else if (newMonth != oldMonth) {
+                    this.liveRegionEl.innerHTML = `${calendar_months[newMonth - 1]}, ${newYear}`;
+                }
+            }
+        }
+        this.oldFocusVal = cal.focusDate;
+    }
+    handlePopupBlurred(ev) {
+        // emit blur event when leaving component from priv-calendar
+        if (ev.detail.relatedTarget !== this.el) {
+            const event = new CustomEvent("blur");
+            // @ts-ignore
+            event.relatedTarget = ev.detail.relatedTarget;
+            this.el.dispatchEvent(event);
+        }
+    }
+    handleKeydown(ev) {
+        if (ev.key === "Escape" && this.isExpanded) {
+            ev.preventDefault();
+            ev.stopPropagation(); // prevents closing of parent modal
+            this.closePopup(true);
+        }
+    }
+    handleCellTriggered(ev) {
+        const cal = ev.detail.cal;
+        const dateElement = ev.detail.cell;
+        const newDate = dateElement.getAttribute("data-year") +
+            "-" +
+            dateElement.getAttribute("data-month") +
+            "-" +
+            dateElement.textContent.padStart(2, "0");
+        if (this.startCalEl.endDate || this.endCalEl.endDate) {
+            // there were already 2 dates, user is setting a new range.
+            // set calendar state
+            this.startCalEl.startDate = undefined;
+            this.startCalEl.endDate = undefined;
+            this.endCalEl.startDate = undefined;
+            this.endCalEl.endDate = undefined;
+            cal.startDate = newDate;
+            // set component state
+            this.date1 = newDate;
+            this.date2 = undefined;
+        }
+        else if (this.date1 && newDate !== this.date1) {
+            // user is setting the end of the range
+            // ignore if same date as first is selected
+            // (acts as if it was re-selected as the first date)
+            // reorder if necessary
+            if (this.date1 > newDate) {
+                this.date2 = this.date1;
+                this.date1 = newDate;
+            }
+            else {
+                this.date2 = newDate;
+            }
+            const detail = {
+                startDate: {
+                    iso: this.date1,
+                    us: this._reformatDate("ISO", "US", this.date1),
+                    int: this._reformatDate("ISO", "INT", this.date1),
+                },
+                endDate: {
+                    iso: this.date2,
+                    us: this._reformatDate("ISO", "US", this.date2),
+                    int: this._reformatDate("ISO", "INT", this.date2),
+                },
+            };
+            this.wmRangeSelection.emit(detail);
+            this.closePopup(true);
+            this.date1 = undefined;
+            this.date2 = undefined;
+        }
+        else {
+            // calendars were clear, user sets first date
+            cal.startDate = newDate;
+            // component state
+            this.date1 = newDate;
+        }
+        // Create events to trigger onInput and onChange on host element, to get the updated value
+        // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
+        const inputEvent = new CustomEvent("input");
+        this.el.dispatchEvent(inputEvent);
+        const changeEvent = new CustomEvent("change");
+        this.el.dispatchEvent(changeEvent);
+    }
+    handleOutOfCal() {
+        this.startCalEl.hoverDate = undefined;
+        this.endCalEl.hoverDate = undefined;
+    }
+    handleCellHovered(ev) {
+        this.startCalEl.hoverDate = this.startCalEl.startDate === ev.detail ? undefined : ev.detail;
+        this.endCalEl.hoverDate = this.endCalEl.startDate === ev.detail ? undefined : ev.detail;
+    }
+    /**
+     * @description Converts a date string between `"US"` (mm/dd/yyyy), `"INT"` (dd/mm/yyyy),
+     * and `"ISO"` (YYYY-MM-DD). Direct US ↔ INT conversion is not supported — route through
+     * ISO as an intermediate step.
+     * @param inputFormat - Format of the input date string (`"US"`, `"INT"`, or `"ISO"`).
+     * @param outputFormat - Desired output format (`"US"`, `"INT"`, or `"ISO"`).
+     * @param date - The date string to reformat.
+     * @returns The reformatted date string, an empty string if `date` is omitted, or the original
+     * string unchanged if it cannot be parsed.
+     */
+    async reformatDate(inputFormat, outputFormat, date) {
+        return this._reformatDate(inputFormat, outputFormat, date);
+    }
+    _reformatDate(inputFormat, outputFormat, date) {
+        // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
+        if (inputFormat !== "ISO" && outputFormat !== "ISO")
+            return "";
+        // return if missing args
+        if (!inputFormat || !outputFormat || !date)
+            return "";
+        // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
+        const parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
+        if (!parsableEntry.test(date)) {
+            return date;
+        }
+        else {
+            const dateArr = date.replace(/[\-\.]/gi, "/").split("/");
+            switch (outputFormat) {
+                case "US":
+                    return dateArr[1].padStart(2, "0") + "/" + dateArr[2].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+                case "INT":
+                    return dateArr[2].padStart(2, "0") + "/" + dateArr[1].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+                case "ISO":
+                    if (inputFormat === "US") {
+                        return dateArr[2].padStart(4, "20") + "-" + dateArr[0].padStart(2, "0") + "-" + dateArr[1].padStart(2, "0");
+                    }
+                    else if (inputFormat === "INT") {
+                        return dateArr[2].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[0].padStart(2, "0");
+                    }
+                    else if (inputFormat === "ISO") {
+                        return dateArr[0].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[2].padStart(2, "0");
+                    }
+                default:
+                    return dateArr.join("/");
+            }
+        }
+    }
+    /**
+     * @description Validates whether a string is a well-formed, calendar-correct ISO date
+     * (YYYY-MM-DD). Accounts for invalid day-of-month values and leap years.
+     * @param input - The string to validate.
+     * @returns `true` if the string is a valid ISO date, `false` otherwise.
+     */
+    async isValidISO(input) {
+        return this._isValidISO(input);
+    }
+    _isValidISO(input) {
+        const ISOFormat = /^\d\d\d\d[-]\d\d[-]\d\d$/;
+        if (!input || !ISOFormat.test(input)) {
+            return false;
+        }
+        else {
+            // Parse the ISO date parts to integers
+            const parts = input.split("-");
+            const day = parseInt(parts[2], 10);
+            const month = parseInt(parts[1], 10);
+            const year = parseInt(parts[0], 10);
+            // Check the ranges of month and year
+            if (year < 1000 || year > 3000 || month == 0 || month > 12)
+                return false;
+            let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+            // Adjust for leap years
+            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
+                monthLength[1] = 29;
+            // Check the range of the day
+            return day > 0 && day <= monthLength[month - 1];
+        }
+    }
+    componentWillLoad() {
+        if (this.labelStart === "" || this.labelEnd === "") {
+            console.error("For accessibility reasons you must specify labels for the date range inputs.");
+        }
+        handleDisabledAttribute(this.el, this._disabled);
+    }
+    componentDidLoad() {
+        this.checkCanOpen();
+    }
+    disconnectedCallback() {
+        if (this.pf_repositionRAF !== null) {
+            cancelAnimationFrame(this.pf_repositionRAF);
+            this.pf_repositionRAF = null;
+        }
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.liveRegionEl.textContent = message;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '3e1687aff3f56da8c73421741c52ef52f035f162', "aria-busy": "false" }, h("div", { key: 'd1d6789b54c5d3590e6355196ad01803df7352d6', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: 'd164da838915bbd5799f7909930086bd3a238993', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: 'c72c3b48368a249b36949135196773df6ad260b5', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '48f737f4349b53f5c33a02542726455f5de1b5e6', id: "startlabel", htmlFor: "start-date-input", class: "label" }, this.labelStart, this.requiredField && (h("span", { key: 'a90bf29ebb1db201eff3856ceea730c00bb28155', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '513315a6a4d0bc157b24913a6e4a37be84344380', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '2c6e766a9102d994708fd16ff81db2bc05f9ddae', id: "endlabel", htmlFor: "end-date-input", class: "label" }, this.labelEnd, this.requiredField && (h("span", { key: 'c2091c35d51aab2a0a3423e4d39c935bfa924ba0', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '7371333b0672de66973d9c1e6872de55d0e6bfa8', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '0bdb73fe0cfb0b8e2a0f5821d3f61e085cbf03ce', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '026e02beb23a58abc8fc379a04b8d5a1a3ee0df3', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'b3e729e81e1a74fa2f66bc15c395f21a0d883155', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '8a438955889c24424e094e66f357fdaf729c0110', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+                id: "date.selectRange",
+                defaultMessage: "Select range",
+                description: "Button text for screen readers.",
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '9610b8b4de37268fb8f4f7f39664cb1673fd4d2f', class: "svg-icon svg-date" }), h("span", { key: 'f58324e44bfe336d9cb35af62d996e90ef0b2a5a', class: "calendar", title: intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) })))), h("div", { key: 'a01184671037bcb749a3ee32e780ffa77b79cd7e', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '21ce85875c3d4b72cc7736cc37ad1858c4829396', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: '5c415999f7022a396c798c35ba9f8bff31c0e8dd', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: '1d7940ad00f6a08359bdfe6565d6c6f14e338a1b', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: '7ddffad403a7b15453265393ffd75d30e5a8094e', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '1ee500d7ba5184364d2fa7e646b099f276e78eb1' }, h("div", { key: 'e398394e27a972cf07acb2ac4a4fd8469f0fbf81', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '96474b7b8099835d6ec7e099baa379f90317e8be', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), h("div", { key: 'e683b6345f48ef97b0c062511759c27f44e46283', id: "year-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        }))), h("div", { key: 'd04401dfd0806daf831ae72a8fec744ee3dac81a', id: "error", class: "error" }, this.errorMessage), h("span", { key: '62e4628e91a44c389f97293a751bd26e24400b46', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: '4f7d347e2cf19bee4282fcf8863c807a124752f8', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+    }
+    static get is() { return "wm-date-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The date format shown in the input placeholders and announced to screen readers."
+                        }, {
+                            "name": "default",
+                            "text": "\"mm/dd/yyyy\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "\"mm/dd/yyyy\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the entire date range component, preventing all interaction."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the component in an error state and displays this message below both\ninputs. Use with `invalid-start` and/or `invalid-end` to highlight specific fields."
+                        }],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": true
+            },
+            "invalidStart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the start date input in an error state (red border). Use with\n`error-message`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "invalid-start",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalidEnd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the end date input in an error state (red border). Use with\n`error-message`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "invalid-end",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Visible label for the start date input. Required for accessibility."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "label-start",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "labelEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Visible label for the end date input. Required for accessibility."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "label-end",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "preselected": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The ISO date (YYYY-MM-DD) the calendar popup opens to when first opened and\nno `value-start` is set. Falls back to today's date if omitted."
+                        }],
+                    "text": ""
+                },
+                "attribute": "preselected",
+                "reflect": false
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Displays a required-field asterisk (*) next to each label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "valueStart": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The value of the start date input, in the format specified by `date-format`.\nUpdated as the user types or picks from the calendar."
+                        }],
+                    "text": ""
+                },
+                "attribute": "value-start",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "valueEnd": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The value of the end date input, in the format specified by `date-format`.\nUpdated as the user types or picks from the calendar."
+                        }],
+                    "text": ""
+                },
+                "attribute": "value-end",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "canOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmRangeSelection",
+                "name": "wmRangeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user completes a range selection from the calendar popup."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ startDate: { iso: string, us: string, int: string }, endDate: { iso: string, us: string, int: string } }}\nstartDate and endDate \u2014 each formatted in ISO (YYYY-MM-DD), US (mm/dd/yyyy), and INT\n(dd/mm/yyyy). The dates are always returned in chronological order regardless of the order\nthey were clicked."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmStartInputBlur",
+                "name": "wmStartInputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the start date input loses focus."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmEndInputBlur",
+                "name": "wmEndInputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the end date input loses focus."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reformatDate": {
+                "complexType": {
+                    "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
+                    "parameters": [{
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": "- Format of the input date string (`\"US\"`, `\"INT\"`, or `\"ISO\"`)."
+                        }, {
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": "- Desired output format (`\"US\"`, `\"INT\"`, or `\"ISO\"`)."
+                        }, {
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": "- The date string to reformat."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Converts a date string between `\"US\"` (mm/dd/yyyy), `\"INT\"` (dd/mm/yyyy),\nand `\"ISO\"` (YYYY-MM-DD). Direct US \u2194 INT conversion is not supported \u2014 route through\nISO as an intermediate step."
+                        }, {
+                            "name": "param",
+                            "text": "inputFormat - Format of the input date string (`\"US\"`, `\"INT\"`, or `\"ISO\"`)."
+                        }, {
+                            "name": "param",
+                            "text": "outputFormat - Desired output format (`\"US\"`, `\"INT\"`, or `\"ISO\"`)."
+                        }, {
+                            "name": "param",
+                            "text": "date - The date string to reformat."
+                        }, {
+                            "name": "returns",
+                            "text": "The reformatted date string, an empty string if `date` is omitted, or the original\nstring unchanged if it cannot be parsed."
+                        }]
+                }
+            },
+            "isValidISO": {
+                "complexType": {
+                    "signature": "(input?: string) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": "- The string to validate."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Validates whether a string is a well-formed, calendar-correct ISO date\n(YYYY-MM-DD). Accounts for invalid day-of-month values and leap years."
+                        }, {
+                            "name": "param",
+                            "text": "input - The string to validate."
+                        }, {
+                            "name": "returns",
+                            "text": "`true` if the string is a valid ISO date, `false` otherwise."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabled"
+            }, {
+                "propName": "valueStart",
+                "methodName": "updateValueStart"
+            }, {
+                "propName": "valueEnd",
+                "methodName": "updateValueEnd"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "handleErrorMessage"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "pf_reposition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "checkCanOpen",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "popupBlurred",
+                "method": "handlePopupBlurred",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cellTriggered",
+                "method": "handleCellTriggered",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "outOfCal",
+                "method": "handleOutOfCal",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cellHovered",
+                "method": "handleCellHovered",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}