@watermarkinsights/ripple 5.13.0-alpha.1 → 5.13.0-alpha.3

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

@@ -0,0 +1,538 @@
+import { h, Host } from "@stencil/core";
+import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO } from "../../global/functions";
+export class DatePicker {
+    constructor() {
+        this.value = "";
+        this.disabled = false;
+        this.dateFormat = "mm/dd/yyyy";
+        this.labelPosition = "top";
+        this.label = "";
+        this.requiredField = false;
+        this.openUp = false;
+        this.popupClicked = false;
+        this.toggleButtonClicked = false;
+        this.isExpanded = false;
+    }
+    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);
+        }
+    }
+    togglePopup() {
+        this.isExpanded ? this.closePopup() : this.openPopup();
+        this.toggleButtonClicked = true;
+    }
+    closePopup(returnFocus = false) {
+        this.isExpanded = false;
+        this.calEl.view = "day";
+        this.calEl.view = "day";
+        this.popupEl.classList.remove("open");
+        window.setTimeout(() => {
+            //not using display none in order to get measurements of the popup while hidden
+            this.popupEl.style.visibility = "hidden";
+        }, 250);
+        //Reset values so that menu reopens to day view with selected date in focus
+        if (returnFocus) {
+            this.toggleEl.focus();
+        }
+    }
+    openPopup() {
+        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
+        if (hasRoomRight(this.el, 336)) {
+            this.popupEl.style.left = "0";
+            this.popupEl.style.right = "auto";
+        }
+        else {
+            this.popupEl.style.right = "0";
+            this.popupEl.style.left = "auto";
+        }
+        this.popupEl.style.visibility = "visible";
+        window.requestAnimationFrame(() => {
+            this.popupEl.classList.add("open");
+        });
+        this.isExpanded = true;
+        this.calEl.focusDate = this.calendarDate;
+        this.calEl.startDate = this.calendarDate;
+        this.calEl.focusCell();
+    }
+    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);
+    }
+    handleKey(ev) {
+        if (ev.key === "Escape" && this.isExpanded) {
+            ev.preventDefault();
+            ev.stopPropagation(); // prevents closing of parent modal
+            this.closePopup(true);
+        }
+    }
+    blurHandler() {
+        if (!this.popupClicked && !this.toggleButtonClicked && this.isExpanded) {
+            this.closePopup();
+        }
+        this.popupClicked = false;
+        this.toggleButtonClicked = false;
+    }
+    // for cases where the user clicks or uses a shortcut to leave the document
+    handleBlurOnWindow() {
+        if (this.isExpanded) {
+            this.closePopup();
+        }
+    }
+    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.");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    componentDidLoad() {
+        this.calEl.addEventListener("click", () => {
+            this.popupClicked = true;
+        });
+    }
+    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() {
+        return (h(Host, { key: '85687dcb3b87ff6b660797b7e8ceef84a9710deb', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'c64159f0ecc1ce84fda38106b54d7fa49a79fc65', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '43bed05cd8ddf12279fd007fac3be60ce20864f8', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '9acaee7a5ed8a29971813a06a5051c2838c13065', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: 'f3e1f8719fcc6ead12968215e2731d95b2603956', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: '0c041afacda26e06e15275eb92f430f7d9a16520' }, h("div", { key: '25af5c4db0a4efa3310c039046541651c2f58a25', class: "single-wrapper input" }, h("input", { key: 'ba297de98ddb0c85ddac0b20f5f177b186956ded', 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: 'd4c145ebda9243d464b077a250ea272090e1e9bd', class: "container", id: "wm-container" }, h("button", { key: '630191453f20cbe48e919a91928c2120ca41f66e', disabled: this.disabled, onClick: this.togglePopup.bind(this), "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" }, h("span", { key: '8d418c81d6dcb4ab2155729be5634ee7a2566048', class: "svg-icon svg-date" }), h("span", { key: '5100cad9f4ed307d753499710853de95e81c04e8', class: "calendar", title: intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) })), h("div", { key: '36d24aeb7e59ae59284596ad362eb5459a9ad1de', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '52e0c98a890204e111f6c508177181bf69c5af28', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '12ed17f4c034aff9be9421046d52ffc4e745c929', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'c4b913e51442e1e57805934fd9071cc8796ca551', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '4194d3665db2426ea6600f01f014735c6f49c7c4', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '538a624beb90096a1368873b8f044b0ff32bf125', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), h("div", { key: '37b0366f3742eff0d38993c60e132759683cfc18', id: "year-title", class: "sr-only" }, intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), h("div", { key: 'b21dcace67f1f10949bfa1ed0238ddbff738a2f5', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'cf362caa31e7a5951365a3e3a63d119d58f746f5', 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",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dateFormat": {
+                "type": "string",
+                "attribute": "date-format",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"mm/dd/yyyy\""
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "labelPosition": {
+                "type": "string",
+                "attribute": "label-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "attribute": "required-field",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "preselected": {
+                "type": "string",
+                "attribute": "preselected",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
+    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": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "blurHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlurOnWindow",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cellTriggered",
+                "method": "handleCellTriggered",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}