@watermarkinsights/ripple 5.2.0 → 5.3.0-0

package/dist/cjs/wm-date-range.cjs.entry.js

@@ -0,0 +1,446 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.js');
+
+const datepickerCss = ":host{--wmcolor-datepicker-background:var(--wmcolor-background);--wmcolor-datepicker-day-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-day-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-day-text-outside:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-day-text-selected:var(--wmcolor-interactive-text-selected);--wmcolor-datepicker-day-text:var(--wmcolor-text);--wmcolor-datepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-input-background:var(--wmcolor-input-background);--wmcolor-datepicker-input-border:var(--wmcolor-input-border);--wmcolor-datepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-datepicker-input-text:var(--wmcolor-input-text);--wmcolor-datepicker-month-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-month-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-month-background:var(--wmcolor-text);--wmcolor-datepicker-month-border:var(--wmcolor-border-light);--wmcolor-datepicker-month-text-selected:var(--wmcolor-text-ondark);--wmcolor-datepicker-month-text:var(--wmcolor-interactive);--wmcolor-datepicker-navigation-background-hover:var(--wmcolor-button-background-navigational-hover);--wmcolor-datepicker-navigation-background:var(--wmcolor-button-background-navigational);--wmcolor-datepicker-navigation-text:var(--wmcolor-button-icon-navigational);--wmcolor-datepicker-selector-background:var(--wmcolor-button-background-secondary);--wmcolor-datepicker-selector-border:var(--wmcolor-button-border-secondary);--wmcolor-datepicker-selector-text:var(--wmcolor-button-text-secondary);--wmcolor-datepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-datepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-toggle-icon:var(--wmcolor-interactive);--wmcolor-datepicker-weekdays-background:var(--wmcolor-table-header-background);--wmcolor-datepicker-weekdays-text:var(--wmcolor-text);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{position:relative}:host .wrapper .single-wrapper,:host .wrapper .range-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .date-input{border-radius:3px;color:var(--wmcolor-datepicker-input-text);font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;-ms-flex:1;flex:1;margin:0;background-color:var(--wmcolor-datepicker-input-background)}:host .wrapper .date-input:disabled{background-color:var(--wmcolor-datepicker-input-background-disabled);color:var(--wmcolor-datepicker-input-text-disabled)}:host .wrapper .date-input:focus{outline:none}:host .wrapper .input{height:2.5rem;border:1px solid var(--wmcolor-datepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;}:host .wrapper #single-date-input{height:100%;border:none;border-top-right-radius:0;border-bottom-right-radius:0;border-start-end-radius:0;border-end-end-radius:0}:host .wrapper .range-wrapper{width:303px}:host .wrapper #start-date-input,:host .wrapper #end-date-input{max-width:120px}:host .wrapper #start-date-input:focus,:host .wrapper #end-date-input:focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .wrapper.invalid .input,:host .wrapper .date-input.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper .error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:4px;top:100%;left:0}:host .wrapper .error:not(:empty){margin-top:0.25rem}:host .wrapper.focus #single-date-input{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}";
+const WmDateRangeStyle0 = datepickerCss;
+
+const DateRange = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wmRangeSelection = index.createEvent(this, "wmRangeSelection", 7);
+        this.wmStartInputBlur = index.createEvent(this, "wmStartInputBlur", 7);
+        this.wmEndInputBlur = index.createEvent(this, "wmEndInputBlur", 7);
+        this.openUp = false;
+        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.label = "";
+        this.labelPosition = "top";
+        this.preselected = undefined;
+        this.requiredField = false;
+        this.valueStart = "";
+        this.valueEnd = "";
+        this.isExpanded = false;
+    }
+    get _disabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return functions.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 = functions.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 = functions.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 = functions.dateToISO(firstOfPrevMonth);
+                }
+            }
+        }
+        return [startFocusDate, endFocusDate];
+    }
+    isSameMonth(date1, date2) {
+        if (date1 && date2) {
+            let month1 = parseInt(date1.split("-")[1]);
+            let month2 = parseInt(date2.split("-")[1]);
+            return month1 == month2;
+        }
+        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() {
+        functions.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 = functions.shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
+        if (functions.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;
+        // 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 = functions.dateFind.month.increase(this.startCalEl.focusDate, 1);
+            }
+        }
+        else if (cal == this.endCalEl) {
+            if (endYearMonth <= startYearMonth) {
+                this.startCalEl.focusDate = functions.dateFind.month.decrease(this.endCalEl.focusDate, 1);
+            }
+        }
+        // SR announcements
+        if (this.oldFocusVal) {
+            const newYear = functions.dateFind.year.asInt(newFocusVal);
+            const oldYear = functions.dateFind.year.asInt(this.oldFocusVal);
+            const newMonth = functions.dateFind.month.asInt(newFocusVal);
+            const oldMonth = functions.dateFind.month.asInt(this.oldFocusVal);
+            if (cal.view === "day") {
+                if (newYear != oldYear || newMonth != oldMonth) {
+                    this.liveRegionEl.innerHTML = `Viewing ${functions.calendar_months[newMonth - 1]}, ${newYear}`;
+                }
+            }
+            else {
+                if (newYear != oldYear) {
+                    this.liveRegionEl.innerHTML = `${newYear} selected.`;
+                }
+                else if (newMonth != oldMonth) {
+                    this.liveRegionEl.innerHTML = `${functions.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];
+        }
+    }
+    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.");
+        }
+        functions.handleDisabledAttribute(this.el, this._disabled);
+    }
+    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 (index.h(index.Host, { key: 'e4b973ea71bd8ebdb2a27613734d23b82a47b94f', "aria-busy": "false" }, index.h("div", { key: '31430bc3aad1dc7dc657f265b7d1ddcdda2c80a8', ref: (d) => (this.wrapperEl = d), class: `wrapper label-${this.labelPosition}` }, index.h("div", { key: '94a9f48ae0e4cfe662a55c57305fe66b80fa0c97', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { key: '785315289563fcdaded7b6a3558c0c57bd44e68d', id: "dateRangeLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { key: 'd920a980a492bdf663d8d4a6676d250e6ab08f12', "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", { key: '341bd2b004e623f9222e5911d2c3eb86aaa0595a' }, index.h("div", { key: 'fde4a88c62e793f8d74d1ec2c6b95c0ed8ccd6bb', class: "range-wrapper" }, index.h("input", { key: '7397419c42ef7e9a72fa5d05cd5b5b9eead4fd5a', 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.label, "aria-required": this.requiredField ? "true" : null }), "\u00A0-\u00A0", index.h("input", { key: '0f4cd5c1c9ab24fd7159869921b81abf0cb484ab', 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.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'ca243dd352e1a03188f25c9b339e3a9bd8c49237', class: "container", id: "wm-container" }, index.h("button", { key: '690818b3f86aadedf0f5f5500eee51950dc9cb3f', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { key: '9316263f1c0d861b4b818c793604ce0a34f66aff', class: "calendar", title: functions.intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) })), index.h("div", { key: '443f8cae814de4b7256de39b05790f629c336b48', 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" } }, index.h("div", { key: '3bc56e6abc8150bd648cde6deeb66327bcf19aac', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), index.h("priv-calendar", { key: '5e4bdcf5ceee6d116d833a5fae09c271eb145263', ref: (el) => (this.startCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("priv-calendar", { key: '83414ce9ae70b3f9c7fa453183d356214993da1b', ref: (el) => (this.endCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("div", { key: 'fc707a6d41d0b5d82d2b0428772883844fd08f9b', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() })), index.h("div", { key: '681f679b6e360fe6ecb53ea63e6541937622e6e9', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '442f00d796ef3be3aa0a20173ccca0d7c8529878', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), index.h("div", { key: '25706e52be250bfb44c95417e874d5411f9d5cc5', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), index.h("div", { key: '5d29a04c792e3330620bc14e17c312a85e635553', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '1d4bd320bb3a2e088aa7b55997d51a497f567d1d', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["handleDisabled"],
+        "valueStart": ["updateValueStart"],
+        "valueEnd": ["updateValueEnd"],
+        "errorMessage": ["handleErrorMessage"]
+    }; }
+};
+DateRange.style = WmDateRangeStyle0;
+
+exports.wm_date_range = DateRange;