@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -0,0 +1,579 @@
+import { h, Host } from "@stencil/core";
+import { intl, toBool, handleDisabledAttribute, dateToISO, showTooltip, hideTooltip, findAllScrollableParents, } from "../../global/functions";
+export class DatePicker {
+    constructor() {
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        this.popupMinHeight = 337; // priv-calendar.scss line 98
+        this.popupWidth = 336;
+        this.checkCanOpen = () => {
+            if (!this.anchorEl)
+                return;
+            const fit = this.measureFit();
+            this.canOpen = fit.vertical !== "none" && fit.horizontal !== "none";
+        };
+        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.openUp = false;
+        this.openRight = false;
+        this.isHidden = false;
+        this.canOpen = true;
+    }
+    measureFit() {
+        const rect = this.anchorEl.getBoundingClientRect();
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        if (!vw || !vh) {
+            return { vertical: "below", horizontal: "left" };
+        }
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const fitsBelow = spaceBelow >= this.popupMinHeight;
+        const fitsAbove = spaceAbove >= this.popupMinHeight;
+        const canScroll = findAllScrollableParents(this.el).length > 0;
+        const fitsLeftAligned = rect.left + this.popupWidth <= vw;
+        const fitsRightAligned = rect.right - this.popupWidth >= 0;
+        const vertical = fitsBelow
+            ? "below"
+            : fitsAbove
+                ? "above"
+                : canScroll
+                    ? "below-scroll"
+                    : "none";
+        const horizontal = fitsLeftAligned ? "left" : fitsRightAligned ? "right" : "none";
+        return { vertical, horizontal };
+    }
+    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" };
+        if (this.value &&
+            dateFormatUnits[this.dateFormat] &&
+            this.isValidIsoInternal(this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value))) {
+            // if component has value, and value can be parsed to valid ISO
+            calendarDate = this.reformatDateInternal(dateFormatUnits[this.dateFormat], "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);
+        }
+    }
+    positionDropdown() {
+        // polyfill for browsers without anchor() support (older Firefox)
+        const rect = this.anchorEl.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = document.documentElement.clientHeight - rect.bottom;
+        const viewportWidth = document.documentElement.clientWidth;
+        const popupHeight = this.popupEl.clientHeight;
+        const popupWidth = this.popupEl.clientWidth;
+        this.el.style.removeProperty("--popup-translate-y");
+        this.el.style.removeProperty("--popup-max-height");
+        this.el.style.removeProperty("--popup-left");
+        // HORIZONTAL: prefer left-aligned to toggle; fall back to right-aligned.
+        // canOpen guarantees at least one side fits, so no centered fallback.
+        if (popupWidth <= viewportWidth - rect.left) {
+            this.el.style.setProperty("--popup-left", rect.left + "px");
+        }
+        else {
+            this.el.style.setProperty("--popup-left", rect.right - popupWidth + "px");
+        }
+        // VERTICAL
+        const gap = 2;
+        if (popupHeight + gap <= spaceBelow) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+        }
+        else if (popupHeight + gap <= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.top - popupHeight - gap + "px");
+        }
+        else if (spaceBelow >= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+            this.el.style.setProperty("--popup-max-height", spaceBelow - gap + "px");
+        }
+        else {
+            this.el.style.setProperty("--popup-translate-y", "0px");
+            this.el.style.setProperty("--popup-max-height", spaceAbove - gap + "px");
+        }
+        this.isHidden = false;
+    }
+    handleToggle(ev) {
+        if (ev.newState === "open") {
+            if (!this.hasAnchor) {
+                this.positionDropdown();
+            }
+            requestAnimationFrame(() => {
+                if (this.hasAnchor) {
+                    const fit = this.measureFit();
+                    this.openUp = fit.vertical === "above";
+                    this.openRight = fit.horizontal === "right";
+                    if (fit.vertical === "below-scroll") {
+                        // scroll needs to reveal the popup — pop it out of top-layer fixed
+                        // positioning so the ancestor scroll container governs visibility.
+                        this.popupEl.style.position = "absolute";
+                    }
+                }
+                this.isExpanded = true;
+                this.calEl.focusDate = this.calendarDate;
+                this.calEl.startDate = this.calendarDate;
+                this.calEl.focusCell();
+                window.setTimeout(() => {
+                    this.calEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }, 250);
+            });
+        }
+        else {
+            this.popupEl.style.position = "";
+            this.isExpanded = false;
+            if (!this.hasAnchor) {
+                this.isHidden = true;
+            }
+            this.calEl.view = "day";
+        }
+    }
+    closePopup(returnFocus = false) {
+        this.popupEl.hidePopover();
+        if (returnFocus) {
+            window.setTimeout(() => {
+                this.toggleEl.focus();
+            }, 50);
+        }
+    }
+    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);
+        }
+    }
+    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);
+    }
+    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("/");
+            }
+        }
+    }
+    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.");
+        }
+        if (!this.hasAnchor) {
+            this.isHidden = true;
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    componentDidLoad() {
+        this.checkCanOpen();
+        window.addEventListener("resize", this.checkCanOpen);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.checkCanOpen);
+    }
+    announce(message) {
+        //   is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += " ";
+        }
+        this.liveRegionEl.textContent = message;
+    }
+    render() {
+        return (h(Host, { key: '5aa1a1ebee45fddbe0115120005653eb4e8f0949', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a8099a183130f0f7db1d81cf9fd788352b788d89', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '017a8fc0ebeec8c4627f2ec37089194b2f0376cc', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1ce207b8c401fa9984f1296eca2dd5641593149c', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '143b26071989903f116506d878805aa4651c6d05', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'e8ea10210bdee3ebe3ec892f46db57a0ef0a24af' }, h("div", { key: '430e16d121a51fbc0332192d9b167045ce8d2e7b', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: '1e9229e8e64cff7bbcbbd7d7b47198d63ed7d8a1', 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": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'cea591466300a74fa1221477f31a82264b14e205', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '77dc9a126a4a050993b00b755ef39a08ba8ea272', 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: 'c343d4983996c82c060e7e1eedd967072ea48671', class: "svg-icon svg-date" }), h("span", { key: '14612ecb341cbd4a371e3193f4dadd7d21f4e71f', class: "calendar", title: intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) }))), h("div", { key: '6d9aa84a9bd718ae8d6c0c25a70e5359fcbc28a1', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.openRight ? "open-right" : ""}`, 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: '6621819f8a58a6c87761d26bc3e81a627ad9394f', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '0d2cde70da11059ab064e152ad1821062deb3ab7', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '88bc54e4d1ab32eacc76a6ca996ee71971b1c436', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'c85fa035265ae44f3274c41d0520bc29b834874e', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'ff9d8aa22eadbc2859b3b44dcbccb61a1750c6fa', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), h("div", { key: 'd5c6487ee625dcb969c560bb2206b5ee97b0be84', id: "year-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), h("div", { key: '3f836c8f120c2d0fbcb56c155a7b254e35bfc30f', id: "error", class: "error" }, this.errorMessage), h("div", { key: '254201ab85d9a7c1d4b3c2ee111a4ca44e1c2485', 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": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "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": [],
+                    "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": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "text": ""
+                },
+                "attribute": "preselected",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "openUp": {},
+            "openRight": {},
+            "isHidden": {},
+            "canOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmDatepickerDateSelected",
+                "name": "wmDatepickerDateSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmDatepickerInputBlurred",
+                "name": "wmDatepickerInputBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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": ""
+                        }, {
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "isValidIso": {
+                "complexType": {
+                    "signature": "(input?: string) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    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": "cellTriggered",
+                "method": "handleCellTriggered",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}