@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

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

@@ -1,845 +0,0 @@
-import { h, Host, Fragment, } from "@stencil/core";
-import { intl, dateFind, toBool, handleDisabledAttribute, getContextMeasurements, findParentWithHiddenOverflow, dateToISO, shouldOpenUp, calendar_months, } from "../../global/functions";
-export class DateRange {
-    constructor() {
-        this.openUp = false;
-        this.calWidth = 681; // 673 + 8px of room
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
-        this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
-        this.dateFormat = "mm/dd/yyyy";
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalidStart = false;
-        this.invalidEnd = false;
-        this.labelStart = "";
-        this.labelEnd = "";
-        this.preselected = undefined;
-        this.requiredField = false;
-        this.valueStart = "";
-        this.valueEnd = "";
-        this.availSpace = 0;
-        this.isExpanded = false;
-    }
-    get _disabled() {
-        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-        return toBool(this.disabled);
-    }
-    get focusDates() {
-        // the date the first calendar will open to. either:
-        // - value-start
-        // - a date provided by the dev via prop preselected
-        // - today's date
-        const isoStart = this.toISO(this.valueStart);
-        // fallback:
-        let startFocusDate = dateToISO(new Date());
-        if (this._isValidISO(isoStart)) {
-            startFocusDate = isoStart;
-        }
-        else if (this.preselected && this._isValidISO(this.preselected)) {
-            startFocusDate = this.preselected;
-        }
-        // the date the second calendar will open to. either:
-        // - value-end, if exists and not same month as value-start
-        // - the month after the first calendar
-        let firstOfNextMonth = this.toJSDate(startFocusDate);
-        if (firstOfNextMonth.getUTCMonth() == 11) {
-            firstOfNextMonth.setYear(firstOfNextMonth.getUTCFullYear() + 1);
-        }
-        firstOfNextMonth.setMonth((firstOfNextMonth.getUTCMonth() + 1) % 12, 1);
-        let endFocusDate = dateToISO(firstOfNextMonth); // fallback
-        const isoEnd = this.toISO(this.valueEnd);
-        if (this._isValidISO(isoEnd)) {
-            const sameMonth = this.isSameMonth(startFocusDate, isoEnd);
-            if (!sameMonth) {
-                endFocusDate = isoEnd;
-                // if there is a valueEnd and no valueStart, set valueStart to the month before valueEnd;
-                if (!isoStart) {
-                    let firstOfPrevMonth = this.toJSDate(endFocusDate);
-                    let month = firstOfPrevMonth.getUTCMonth() - 1;
-                    if (month == -1) {
-                        month = 11;
-                        firstOfPrevMonth.setYear(firstOfPrevMonth.getUTCFullYear() - 1);
-                    }
-                    firstOfPrevMonth.setMonth(month, 1);
-                    startFocusDate = dateToISO(firstOfPrevMonth);
-                }
-            }
-        }
-        return [startFocusDate, endFocusDate];
-    }
-    // same month of the same year
-    isSameMonth(date1, date2) {
-        if (date1 && date2) {
-            return date1.slice(0, -3) === date2.slice(0, -3);
-        }
-        else {
-            return false;
-        }
-    }
-    toJSDate(date) {
-        if (date && this._isValidISO(date)) {
-            let newDate = new Date();
-            newDate.setUTCFullYear(parseInt(date.split("-")[0]), parseInt(date.split("-")[1]) - 1, parseInt(date.split("-")[2]));
-            return newDate;
-        }
-        else {
-            return undefined;
-        }
-    }
-    toISO(date) {
-        // returns the input when it can't reformat
-        return this._reformatDate(this.formats[this.dateFormat], "ISO", date);
-    }
-    handleDisabled() {
-        handleDisabledAttribute(this.el, this._disabled);
-    }
-    updateValueStart() {
-        this.startInputEl.value = this.valueStart ? this.valueStart : "";
-    }
-    updateValueEnd() {
-        this.endInputEl.value = this.valueEnd ? this.valueEnd : "";
-    }
-    handleErrorMessage() {
-        if (this.errorMessage) {
-            setTimeout(() => this.announce(this.errorMessage), 100);
-        }
-    }
-    togglePopup() {
-        this.isExpanded ? this.closePopup() : this.openPopup();
-        this.toggleButtonClicked = true;
-    }
-    closePopup(returnFocus = false) {
-        // reset
-        // clearing these in case the user closes without finishing the process
-        this.date1 = undefined;
-        this.date2 = undefined;
-        this.startCalEl.startDate = undefined;
-        this.startCalEl.endDate = undefined;
-        this.startCalEl.hoverDate = undefined;
-        this.endCalEl.startDate = undefined;
-        this.endCalEl.endDate = undefined;
-        this.endCalEl.hoverDate = undefined;
-        this.isExpanded = false;
-        this.startCalEl.view = "day";
-        this.endCalEl.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() {
-        // display stuff
-        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelEl.clientHeight);
-        const { spaceLeft, spaceRight } = getContextMeasurements(this.el);
-        if (spaceRight >= this.calWidth - this.el.clientWidth) {
-            this.popupEl.style.left = "0";
-            this.popupEl.style.right = "auto";
-        }
-        else if (spaceLeft >= this.calWidth - this.el.clientWidth) {
-            this.popupEl.style.right = "0";
-            this.popupEl.style.left = "auto";
-        }
-        else {
-            const offset = (this.availSpace - this.calWidth) / 2 - spaceLeft;
-            this.popupEl.style.left = `${offset}px`;
-            this.popupEl.style.right = "auto";
-        }
-        this.popupEl.style.visibility = "visible";
-        window.requestAnimationFrame(() => {
-            this.popupEl.classList.add("open");
-        });
-        this.isExpanded = true;
-        // state stuff
-        this.startCalEl.focusDate = this.focusDates[0];
-        this.endCalEl.focusDate = this.focusDates[1];
-        this.startCalEl.focusCell();
-        if (this.valueStart) {
-            const startISO = this.toISO(this.valueStart);
-            if (this._isValidISO(startISO)) {
-                this.startCalEl.startDate = startISO;
-            }
-            if (this.valueEnd) {
-                const endISO = this.toISO(this.valueEnd);
-                if (this._isValidISO(endISO)) {
-                    if (this.isSameMonth(startISO, endISO)) {
-                        this.startCalEl.endDate = endISO;
-                    }
-                    else {
-                        this.endCalEl.endDate = endISO;
-                    }
-                }
-            }
-        }
-    }
-    handleFocus() {
-        this.wrapperEl.classList.add("focus");
-    }
-    handleBlur() {
-        this.wrapperEl.classList.remove("focus");
-    }
-    handleStartInputBlur() {
-        this.wmStartInputBlur.emit();
-    }
-    handleEndInputBlur() {
-        this.wmEndInputBlur.emit();
-    }
-    handleStartInput(ev) {
-        // keep component's value in sync with input's value
-        this.valueStart = ev.target.value;
-    }
-    handleEndInput(ev) {
-        // keep component's value in sync with input's value
-        this.valueEnd = ev.target.value;
-    }
-    handleKey(ev) {
-        switch (ev.key) {
-            case "Escape":
-                ev.preventDefault();
-                ev.stopPropagation(); // prevents closing of parent modal
-                this.closePopup(true);
-                break;
-        }
-    }
-    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();
-        }
-    }
-    handleDateFocus(ev) {
-        const cal = ev.target;
-        const newFocusVal = cal.focusDate;
-        // keeping calendars in sync
-        // (left one should always be before right one)
-        const startYearMonth = this.startCalEl.focusDate.slice(0, -3);
-        const endYearMonth = this.endCalEl.focusDate.slice(0, -3);
-        if (cal == this.startCalEl) {
-            if (startYearMonth >= endYearMonth) {
-                this.endCalEl.focusDate = dateFind.month.increase(this.startCalEl.focusDate, 1);
-            }
-        }
-        else if (cal == this.endCalEl) {
-            if (endYearMonth <= startYearMonth) {
-                this.startCalEl.focusDate = dateFind.month.decrease(this.endCalEl.focusDate, 1);
-            }
-        }
-        // SR announcements
-        if (this.oldFocusVal) {
-            const newYear = dateFind.year.asInt(newFocusVal);
-            const oldYear = dateFind.year.asInt(this.oldFocusVal);
-            const newMonth = dateFind.month.asInt(newFocusVal);
-            const oldMonth = dateFind.month.asInt(this.oldFocusVal);
-            if (cal.view === "day") {
-                if (newYear != oldYear || newMonth != oldMonth) {
-                    this.liveRegionEl.innerHTML = intl.formatMessage({
-                        id: "date.viewingMonth",
-                        defaultMessage: "Viewing {month}, {year}",
-                        description: "Announcement indicating current month and year visible in a date picker",
-                    }, {
-                        month: calendar_months[newMonth - 1],
-                        year: newYear,
-                    });
-                }
-            }
-            else {
-                if (newYear != oldYear) {
-                    this.liveRegionEl.innerHTML = intl.formatMessage({
-                        id: "date.yearSelected",
-                        defaultMessage: "{year} selected.",
-                        description: "Announcement after the user selects a year in a date picker",
-                    }, { year: newYear });
-                }
-                else if (newMonth != oldMonth) {
-                    this.liveRegionEl.innerHTML = `${calendar_months[newMonth - 1]}, ${newYear}`;
-                }
-            }
-        }
-        this.oldFocusVal = cal.focusDate;
-    }
-    handlePopupBlurred(ev) {
-        // emit blur event when leaving component from priv-calendar
-        if (ev.detail.relatedTarget !== this.el) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
-        }
-    }
-    handleCellTriggered(ev) {
-        const cal = ev.detail.cal;
-        const dateElement = ev.detail.cell;
-        const newDate = dateElement.getAttribute("data-year") +
-            "-" +
-            dateElement.getAttribute("data-month") +
-            "-" +
-            dateElement.textContent.padStart(2, "0");
-        if (this.startCalEl.endDate || this.endCalEl.endDate) {
-            // there were already 2 dates, user is setting a new range.
-            // set calendar state
-            this.startCalEl.startDate = undefined;
-            this.startCalEl.endDate = undefined;
-            this.endCalEl.startDate = undefined;
-            this.endCalEl.endDate = undefined;
-            cal.startDate = newDate;
-            // set component state
-            this.date1 = newDate;
-            this.date2 = undefined;
-        }
-        else if (this.date1 && newDate !== this.date1) {
-            // user is setting the end of the range
-            // ignore if same date as first is selected
-            // (acts as if it was re-selected as the first date)
-            // reorder if necessary
-            if (this.date1 > newDate) {
-                this.date2 = this.date1;
-                this.date1 = newDate;
-            }
-            else {
-                this.date2 = newDate;
-            }
-            const detail = {
-                startDate: {
-                    iso: this.date1,
-                    us: this._reformatDate("ISO", "US", this.date1),
-                    int: this._reformatDate("ISO", "INT", this.date1),
-                },
-                endDate: {
-                    iso: this.date2,
-                    us: this._reformatDate("ISO", "US", this.date2),
-                    int: this._reformatDate("ISO", "INT", this.date2),
-                },
-            };
-            this.wmRangeSelection.emit(detail);
-            this.closePopup(true);
-            this.date1 = undefined;
-            this.date2 = undefined;
-        }
-        else {
-            // calendars were clear, user sets first date
-            cal.startDate = newDate;
-            // component state
-            this.date1 = newDate;
-        }
-        // Create events to trigger onInput and onChange on host element, to get the updated value
-        // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
-        const inputEvent = new CustomEvent("input");
-        this.el.dispatchEvent(inputEvent);
-        const changeEvent = new CustomEvent("change");
-        this.el.dispatchEvent(changeEvent);
-    }
-    handleOutOfCal() {
-        this.startCalEl.hoverDate = undefined;
-        this.endCalEl.hoverDate = undefined;
-    }
-    handleCellHovered(ev) {
-        this.startCalEl.hoverDate = this.startCalEl.startDate === ev.detail ? undefined : ev.detail;
-        this.endCalEl.hoverDate = this.endCalEl.startDate === ev.detail ? undefined : ev.detail;
-    }
-    async reformatDate(inputFormat, outputFormat, date) {
-        return this._reformatDate(inputFormat, outputFormat, date);
-    }
-    _reformatDate(inputFormat, outputFormat, date) {
-        // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
-        if (inputFormat !== "ISO" && outputFormat !== "ISO")
-            return "";
-        // return if missing args
-        if (!inputFormat || !outputFormat || !date)
-            return "";
-        // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
-        const parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
-        if (!parsableEntry.test(date)) {
-            return date;
-        }
-        else {
-            const dateArr = date.replace(/[\-\.]/gi, "/").split("/");
-            switch (outputFormat) {
-                case "US":
-                    return dateArr[1].padStart(2, "0") + "/" + dateArr[2].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
-                case "INT":
-                    return dateArr[2].padStart(2, "0") + "/" + dateArr[1].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
-                case "ISO":
-                    if (inputFormat === "US") {
-                        return dateArr[2].padStart(4, "20") + "-" + dateArr[0].padStart(2, "0") + "-" + dateArr[1].padStart(2, "0");
-                    }
-                    else if (inputFormat === "INT") {
-                        return dateArr[2].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[0].padStart(2, "0");
-                    }
-                    else if (inputFormat === "ISO") {
-                        return dateArr[0].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[2].padStart(2, "0");
-                    }
-                default:
-                    return dateArr.join("/");
-            }
-        }
-    }
-    async isValidISO(input) {
-        return this._isValidISO(input);
-    }
-    _isValidISO(input) {
-        const ISOFormat = /^\d\d\d\d[-]\d\d[-]\d\d$/;
-        if (!input || !ISOFormat.test(input)) {
-            return false;
-        }
-        else {
-            // Parse the ISO date parts to integers
-            const parts = input.split("-");
-            const day = parseInt(parts[2], 10);
-            const month = parseInt(parts[1], 10);
-            const year = parseInt(parts[0], 10);
-            // Check the ranges of month and year
-            if (year < 1000 || year > 3000 || month == 0 || month > 12)
-                return false;
-            let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-            // Adjust for leap years
-            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
-                monthLength[1] = 29;
-            // Check the range of the day
-            return day > 0 && day <= monthLength[month - 1];
-        }
-    }
-    setAvailSpace() {
-        this.availSpace = (this.hiddenOverflowParent || document.body).clientWidth;
-    }
-    componentWillLoad() {
-        if (this.labelStart === "" || this.labelEnd === "") {
-            console.error("For accessibility reasons you must specify labels for the date range inputs.");
-        }
-        handleDisabledAttribute(this.el, this._disabled);
-        this.hiddenOverflowParent = findParentWithHiddenOverflow(this.el);
-        if (this.hiddenOverflowParent) {
-            const resizeObserver = new ResizeObserver(() => {
-                this.availSpace = this.hiddenOverflowParent.clientWidth;
-            });
-            resizeObserver.observe(this.hiddenOverflowParent);
-        }
-        this.setAvailSpace();
-    }
-    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;
-    }
-    renderCalendars() {
-        if (this.calWidth <= this.availSpace) {
-            return (h(Fragment, null, h("div", { class: `popup-wrapper ${this.startCalEl && this.startCalEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), style: { display: "flex" } }, h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.startCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { ref: (el) => (this.endCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))));
-        }
-    }
-    render() {
-        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
-                id: "date.selectRange",
-                defaultMessage: "Select range",
-                description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "svg-icon svg-date" }), h("span", { class: "calendar", title: intl.formatMessage({
-                id: "date.calendarView",
-                defaultMessage: "Calendar View",
-                description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", null, 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-date-range"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["datepicker.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["datepicker.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "dateFormat": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "date-format",
-                "reflect": false,
-                "defaultValue": "\"mm/dd/yyyy\""
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "disabled",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "error-message",
-                "reflect": true
-            },
-            "invalidStart": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "invalid-start",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "invalidEnd": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "invalid-end",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "labelStart": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label-start",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "labelEnd": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label-end",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "preselected": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "preselected",
-                "reflect": false
-            },
-            "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"
-            },
-            "valueStart": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "value-start",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "valueEnd": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "value-end",
-                "reflect": false,
-                "defaultValue": "\"\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "availSpace": {},
-            "isExpanded": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmRangeSelection",
-                "name": "wmRangeSelection",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmStartInputBlur",
-                "name": "wmStartInputBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmEndInputBlur",
-                "name": "wmEndInputBlur",
-                "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": "handleDisabled"
-            }, {
-                "propName": "valueStart",
-                "methodName": "updateValueStart"
-            }, {
-                "propName": "valueEnd",
-                "methodName": "updateValueEnd"
-            }, {
-                "propName": "errorMessage",
-                "methodName": "handleErrorMessage"
-            }];
-    }
-    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": "popupBlurred",
-                "method": "handlePopupBlurred",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "cellTriggered",
-                "method": "handleCellTriggered",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "outOfCal",
-                "method": "handleOutOfCal",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "cellHovered",
-                "method": "handleCellHovered",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "resize",
-                "method": "setAvailSpace",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}