@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

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

@@ -1,520 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { intl, toBool, handleDisabledAttribute, hasRoomRight, shouldOpenUp, dateToISO } from "../../global/functions";
-export class DatePicker {
-    constructor() {
-        this.openUp = false;
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
-        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;
-    }
-    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, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { 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", { class: "container", id: "wm-container" }, h("button", { 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", { class: "svg-icon svg-date" }), h("span", { class: "calendar", title: intl.formatMessage({
-                id: "date.calendarView",
-                defaultMessage: "Calendar View",
-                description: "Calendar button",
-            }) })), h("div", { 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", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
-            id: "date.selectMonth",
-            defaultMessage: "Activate to select a month.",
-            description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
-            id: "date.selectYear",
-            defaultMessage: "Activate to select a year.",
-            description: "Calendar button",
-        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { 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": {}
-        };
-    }
-    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": [{
-                            "tags": [],
-                            "text": ""
-                        }, {
-                            "tags": [],
-                            "text": ""
-                        }, {
-                            "tags": [],
-                            "text": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "isValidIso": {
-                "complexType": {
-                    "signature": "(input?: string) => Promise<boolean>",
-                    "parameters": [{
-                            "tags": [],
-                            "text": ""
-                        }],
-                    "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
-            }];
-    }
-}

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

@@ -1,21 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import * as globalFunctions from "../../global/functions";
-jest.spyOn(globalFunctions, "generateId").mockReturnValue("random-id");
-import { DatePicker } from "./wm-datepicker";
-describe("wm-datepicker", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({
-            components: [DatePicker],
-            html: '<wm-datepicker label="mock label"></wm-datepicker>',
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("sets input to required", async () => {
-        const page = await newSpecPage({
-            components: [DatePicker],
-            html: `<wm-datepicker label='datepicker' required-field='true'></wm-datepicker>`,
-        });
-        const input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("aria-required", "true");
-    });
-});