@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -0,0 +1,875 @@
+import { h, Host } from "@stencil/core";
+import { intl, toBool, handleDisabledAttribute, dateToISO, showTooltip, hideTooltip, debounce, findAllScrollableParents, findPositioningBoundary, } from "../../global/functions";
+/**
+ * Date input that lets users type a date or pick one from a calendar popup. Supports
+ * configurable date formats, pre-selection, validation, and full keyboard navigation of the calendar.
+ * Use instead of native `<input type="date">`.
+ *
+ * @category Form Inputs
+ *
+ * @keyboardInteraction
+ * - **Input field**: Tab moves focus to the calendar toggle button.
+ * - **Calendar toggle**: Space / Enter / Down Arrow opens the calendar; Shift+Tab returns to the input.
+ * - **Day grid**: Arrow keys navigate dates; Enter selects; Escape closes and returns focus to the toggle;
+ *   Home/End jump to the first/last day of the month; Tab cycles through calendar controls.
+ * - **Month/year selectors**: Arrow keys cycle values; Tab/Shift+Tab move focus clockwise/counter-clockwise.
+ *
+ * @accessibility
+ * - `label` is required even when `label-position` is `"none"` — it becomes the input's `aria-label`.
+ * - The calendar toggle button announces "Select date" to screen readers and reflects `aria-expanded`.
+ * - Validation errors are announced via an `aria-live` region when `error-message` changes.
+ * - When the input value cannot be parsed as a valid date, the calendar opens to the current date.
+ *
+ * @usageNotes
+ * - Set `value` in the same format as `date-format` (default `mm/dd/yyyy`). For programmatic date
+ *   setting, prefer ISO format via `preselected` and convert with the `reformatDate` method.
+ * - The calendar popup hides its toggle automatically when there is no room to display it; always
+ *   allow users to type a date directly in the input as a fallback.
+ *
+ * @example {html} Basic datepicker
+ * <wm-datepicker label="Start date"></wm-datepicker>
+ *
+ * @example {react} Basic datepicker
+ * // The component does not update its own value after a calendar selection --
+ * // the app must call reformatDate and set value/errorMessage 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 { date: string } -- ISO 8601 (YYYY-MM-DD)
+ * const handleDateSelected = async (event) => {
+ *   const dp = ref.current;
+ *   const fmt = getFormatName(dp.getAttribute('date-format'));
+ *   dp.value = await dp.reformatDate('ISO', fmt, event.detail.date);
+ *   dp.errorMessage = '';
+ * };
+ *
+ * const handleInputBlurred = async () => {
+ *   const dp = ref.current;
+ *   const fmt = getFormatName(dp.getAttribute('date-format'));
+ *   if (dp.value) {
+ *     const iso = await dp.reformatDate(fmt, 'ISO', dp.value);
+ *     if (await dp.isValidIso(iso)) {
+ *       dp.value = await dp.reformatDate('ISO', fmt, iso);
+ *       dp.errorMessage = '';
+ *     } else {
+ *       dp.errorMessage = `Please enter a valid date in the format ${dp.getAttribute('date-format') ?? 'mm/dd/yyyy'}`;
+ *     }
+ *   }
+ * };
+ *
+ * const handleBlur = () => {
+ *   const dp = ref.current;
+ *   if (dp.requiredField && dp.value === '') dp.errorMessage = 'A date is required';
+ * };
+ *
+ * <WmDatepicker
+ *   ref={ref}
+ *   label="Start date"
+ *   onWmDatepickerDateSelected={handleDateSelected}
+ *   onWmDatepickerInputBlurred={handleInputBlurred}
+ *   onBlur={handleBlur}
+ * />
+ *
+ * @example {html} Required field with validation
+ * <wm-datepicker label="Date of birth" required-field></wm-datepicker>
+ *
+ * @example {react} Required field with validation
+ * <WmDatepicker
+ *   ref={ref}
+ *   label="Date of birth"
+ *   requiredField={true}
+ *   onWmDatepickerDateSelected={handleDateSelected}
+ *   onWmDatepickerInputBlurred={handleInputBlurred}
+ *   onBlur={handleBlur}
+ * />
+ *
+ * @example {html} With validation error
+ * <wm-datepicker label="Start date" required-field error-message="Please enter a valid start date"></wm-datepicker>
+ *
+ * @example {react} With validation error
+ * <WmDatepicker label="Start date" requiredField={true} errorMessage="Please enter a valid start date" />
+ *
+ * @example {html} Pre-opened to a specific date
+ * <wm-datepicker label="Enrollment date" preselected="2025-09-01"></wm-datepicker>
+ *
+ * @example {react} Pre-opened to a specific date
+ * <WmDatepicker label="Enrollment date" preselected="2025-09-01" />
+ *
+ * @example {html} International date format
+ * <wm-datepicker label="Graduation date" date-format="dd/mm/yyyy"></wm-datepicker>
+ *
+ * @example {react} International date format
+ * <WmDatepicker label="Graduation date" dateFormat="dd/mm/yyyy" />
+ *
+ * @example {html} Disabled
+ * <wm-datepicker label="Locked date" value="05/15/2024" disabled></wm-datepicker>
+ *
+ * @example {react} Disabled
+ * <WmDatepicker label="Locked date" value="05/15/2024" disabled={true} />
+ *
+ */
+export class DatePicker {
+    constructor() {
+        this.calWidth = 336;
+        this.popupMaxHeight = 413; // maximum height when a month spans 6 rows of days
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        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.value = "";
+        this.disabled = false;
+        this.dateFormat = "mm/dd/yyyy";
+        this.errorMessage = undefined;
+        this.labelPosition = "top";
+        this.label = "";
+        this.requiredField = false;
+        this.preselected = undefined;
+        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 isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get calendarDate() {
+        let calendarDate = dateToISO(new Date());
+        const dateFormatUnits = {
+            "mm/dd/yyyy": "US",
+            "dd/mm/yyyy": "INT",
+            "yyyy/mm/dd": "ISO",
+        };
+        const inputFormat = dateFormatUnits[this.dateFormat];
+        if (this.value &&
+            inputFormat &&
+            this.isValidIsoInternal(this.reformatDateInternal(inputFormat, "ISO", this.value))) {
+            // if component has value, and value can be parsed to valid ISO
+            calendarDate = this.reformatDateInternal(inputFormat, "ISO", this.value);
+        }
+        else if (this.preselected) {
+            calendarDate = this.preselected;
+        }
+        return calendarDate;
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    updateValue() {
+        this.inputEl.value = this.value ? this.value : "";
+    }
+    announceError() {
+        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") {
+            // Position before reveal to avoid a flash of misplaced content.
+            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;
+                this.calEl.focusDate = this.calendarDate;
+                this.calEl.startDate = this.calendarDate;
+                this.calEl.focusCell();
+                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;
+            this.isExpanded = false;
+            this.calEl.view = "month";
+        }
+    }
+    closePopup(returnFocus = false) {
+        this.popupEl.hidePopover();
+        if (returnFocus) {
+            this.toggleEl.focus();
+        }
+    }
+    handleInput(ev) {
+        // keep component's value in sync with input's value
+        this.value = ev.target.value;
+    }
+    handleInputBlur() {
+        this.dpWrapperEl.classList.remove("focus");
+        this.wmDatepickerInputBlurred.emit();
+    }
+    handleInputFocus() {
+        this.dpWrapperEl.classList.add("focus");
+    }
+    handleInputChange() {
+        // forward change externally
+        const event = new CustomEvent("change");
+        this.el.dispatchEvent(event);
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
+    handleKeydown(ev) {
+        if (ev.key === "Escape" && this.isExpanded) {
+            ev.preventDefault();
+            ev.stopPropagation(); // prevents closing of parent modal
+            this.closePopup(true);
+        }
+    }
+    handleCellTriggered(ev) {
+        let dateElement = ev.detail.cell;
+        let isoDate = dateElement.getAttribute("data-year") +
+            "-" +
+            dateElement.getAttribute("data-month") +
+            "-" +
+            dateElement.textContent.padStart(2, "0");
+        this.wmDatepickerDateSelected.emit({ date: isoDate });
+        // 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);
+        this.closePopup(true);
+    }
+    /**
+     * @description Converts a date string between the supported format tokens: `"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.
+     * @param outputFormat - Desired output format.
+     * @param date - The date string to reformat.
+     * @returns The reformatted date string, an empty string if `date` is omitted or falsy, or the
+     * original string unchanged if it cannot be parsed.
+     * @example reformatDate("US", "ISO", "06/20/1969") // → "1969-06-20"
+     * @example reformatDate("ISO", "US", "1969-06-20") // → "06/20/1969"
+     */
+    async reformatDate(inputFormat, outputFormat, date) {
+        return this.reformatDateInternal(inputFormat, outputFormat, date);
+    }
+    reformatDateInternal(inputFormat, outputFormat, date) {
+        // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
+        // 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 (!date) {
+            return "";
+        }
+        else 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.
+     * @example isValidIso("1969-06-20") // → true
+     * @example isValidIso("1969-06-33") // → false (day 33 does not exist)
+     * @example isValidIso("2023-02-29") // → false (2023 is not a leap year)
+     */
+    async isValidIso(input) {
+        return this.isValidIsoInternal(input);
+    }
+    isValidIsoInternal(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.label === "") {
+            console.error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    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: '38b06ecdb3ec7b0849a2e45f7c0744ebf71ba8d9', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9518173e98ca8af23b4382712cc290a42bb7bb5f', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1c2342a9bb47db3b3175c2ea617be0aff0daa1ff', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '6942428aa8015f2d4f7820a06ca74ce90749caf6', id: "datepickerLabel", htmlFor: "date-input", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '9b281c4eda707206f2838fd769f7159fbb01f9f6', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '2ac24d631ade150ee4798fa9604e05c9497de05e' }, h("div", { key: '0fff1d47bcfc1ac3048460e9b3918884988ff6ba', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: '8f62004faa02210e8bf1ec0bd45f7ffa5e138b9b', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '8970475d7d30e1b9befd27b538fbce6d0134baea', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '2d42ef81bf6a163cbc3450e60a1e4672952b8380', disabled: this.disabled, "aria-label": intl.formatMessage({
+                id: "date.selectDate",
+                defaultMessage: "Select date",
+                description: "Button text for screen readers.",
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'ed47fc3ab8d096d98b01c4f77474794d9716a8c9', class: "svg-icon svg-date" }), h("span", { key: '093d9e365c4d37d10b51af4c3b52e0b80290f2ac', class: "calendar", title: intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) }))), h("div", { key: '3ad25e1d81f4198d8d98b64cfc3f0883f26273ef', class: `popup-wrapper ${this.calEl && this.calEl.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: 'ff10adfe53ad5a49a358ccfe902940a33a85b51d', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '81f304b90377c2172a9d30e48884e7137f3c6aff', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'd9d8aa58c6795479ffbc59d0e126d1e8c3e1d50a', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'd40f77a9a4d37281acff5adcb75ec8def29d8c2d', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '9c3832b6cfc294ea7d350a337adf83e55c9d72f1', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), h("div", { key: 'db29ac2b15f60fd5bb8a9128e6b31ff73f029249', id: "year-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), h("div", { key: '9a940d5beb080c906552dd089bf16b80e355166a', id: "error", class: "error" }, this.errorMessage), h("span", { key: '8feb1db5ca3ea0261856cdbbb75ecc385067f1d6', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: '6566004fa7fb7ce7cbecbc99f86096574cc39a55', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+    }
+    static get is() { return "wm-datepicker"; }
+    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 {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The date displayed in the input field, in the format specified by `date-format`. Updated as the user types. Can also be set programmatically by the application."
+                        }],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the datepicker, preventing all interaction."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The expected date format. Shown in the input placeholder and announced to screen reader users."
+                        }, {
+                            "name": "default",
+                            "text": "\"mm/dd/yyyy\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "\"mm/dd/yyyy\""
+            },
+            "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 the input."
+                        }],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": true
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Position of the label relative to the input. `'none'` hides the label visually but keeps it accessible via `aria-label`."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Visible label for the input. Required even when `label-position` is `'none'` \u2014 used as the ARIA accessible name."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "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 the label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "preselected": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "The date the calendar popup focuses when first opened, in ISO format (YYYY-MM-DD). Falls back to the parsed `value`, then the current date if neither can be parsed."
+                        }],
+                    "text": ""
+                },
+                "attribute": "preselected",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "canOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmDatepickerDateSelected",
+                "name": "wmDatepickerDateSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user selects a date from the calendar popup."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ date: string }} date \u2014 the selected date in ISO format (YYYY-MM-DD)."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmDatepickerInputBlurred",
+                "name": "wmDatepickerInputBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the text input loses focus."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reformatDate": {
+                "complexType": {
+                    "signature": "(inputFormat: \"US\" | \"INT\" | \"ISO\", outputFormat: \"US\" | \"INT\" | \"ISO\", date?: string) => Promise<string>",
+                    "parameters": [{
+                            "name": "inputFormat",
+                            "type": "\"US\" | \"INT\" | \"ISO\"",
+                            "docs": "- Format of the input date string."
+                        }, {
+                            "name": "outputFormat",
+                            "type": "\"US\" | \"INT\" | \"ISO\"",
+                            "docs": "- Desired output format."
+                        }, {
+                            "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 the supported format tokens: `\"US\"` (mm/dd/yyyy),\n`\"INT\"` (dd/mm/yyyy), and `\"ISO\"` (YYYY-MM-DD). Direct US \u2194 INT conversion is not supported \u2014\nroute through ISO as an intermediate step."
+                        }, {
+                            "name": "param",
+                            "text": "inputFormat - Format of the input date string."
+                        }, {
+                            "name": "param",
+                            "text": "outputFormat - Desired output format."
+                        }, {
+                            "name": "param",
+                            "text": "date - The date string to reformat."
+                        }, {
+                            "name": "returns",
+                            "text": "The reformatted date string, an empty string if `date` is omitted or falsy, or the\noriginal string unchanged if it cannot be parsed."
+                        }, {
+                            "name": "example",
+                            "text": "reformatDate(\"US\", \"ISO\", \"06/20/1969\") // \u2192 \"1969-06-20\""
+                        }, {
+                            "name": "example",
+                            "text": "reformatDate(\"ISO\", \"US\", \"1969-06-20\") // \u2192 \"06/20/1969\""
+                        }]
+                }
+            },
+            "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."
+                        }, {
+                            "name": "example",
+                            "text": "isValidIso(\"1969-06-20\") // \u2192 true"
+                        }, {
+                            "name": "example",
+                            "text": "isValidIso(\"1969-06-33\") // \u2192 false (day 33 does not exist)"
+                        }, {
+                            "name": "example",
+                            "text": "isValidIso(\"2023-02-29\") // \u2192 false (2023 is not a leap year)"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "value",
+                "methodName": "updateValue"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }];
+    }
+    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": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cellTriggered",
+                "method": "handleCellTriggered",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}