@watermarkinsights/ripple 5.28.1 → 5.29.0-alpha.2

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

@@ -1,11 +1,16 @@
 import { h, Host, Fragment, } from "@stencil/core";
-import { intl, dateFind, toBool, handleDisabledAttribute, getContextMeasurements, findParentWithHiddenOverflow, dateToISO, shouldOpenUp, calendar_months, } from "../../global/functions";
+import { intl, dateFind, toBool, handleDisabledAttribute, dateToISO, calendar_months, findAllScrollableParents, } from "../../global/functions";
 export class DateRange {
     constructor() {
-        this.openUp = false;
         this.calWidth = 681; // 673 + 8px of room
-        this.popupClicked = false;
-        this.toggleButtonClicked = false;
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        this.popupMinHeight = 337; // priv-calendar.scss line 98
+        this.checkCanOpen = () => {
+            if (!this.anchorEl)
+                return;
+            const fit = this.measureFit();
+            this.canOpen = fit.vertical !== "none" && fit.horizontal !== "none";
+        };
         this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
         this.dateFormat = "mm/dd/yyyy";
         this.disabled = false;
@@ -18,8 +23,35 @@ export class DateRange {
         this.requiredField = false;
         this.valueStart = "";
         this.valueEnd = "";
-        this.availSpace = 0;
         this.isExpanded = false;
+        this.openUp = false;
+        this.openRight = false;
+        this.isHidden = false;
+        this.canOpen = true;
+    }
+    measureFit() {
+        const rect = this.anchorEl.getBoundingClientRect();
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        if (!vw || !vh) {
+            return { vertical: "below", horizontal: "left" };
+        }
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const fitsBelow = spaceBelow >= this.popupMinHeight;
+        const fitsAbove = spaceAbove >= this.popupMinHeight;
+        const canScroll = findAllScrollableParents(this.el).length > 0;
+        const fitsLeftAligned = rect.left + this.calWidth <= vw;
+        const fitsRightAligned = rect.right - this.calWidth >= 0;
+        const vertical = fitsBelow
+            ? "below"
+            : fitsAbove
+                ? "above"
+                : canScroll
+                    ? "below-scroll"
+                    : "none";
+        const horizontal = fitsLeftAligned ? "left" : fitsRightAligned ? "right" : "none";
+        return { vertical, horizontal };
     }
     get _disabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -105,81 +137,113 @@ export class DateRange {
             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();
+    positionDropdown() {
+        // polyfill for browsers without anchor() support (older Firefox)
+        const rect = this.anchorEl.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = document.documentElement.clientHeight - rect.bottom;
+        const popupHeight = this.popupEl.clientHeight;
+        const popupWidth = this.popupEl.clientWidth || this.calWidth;
+        const viewportWidth = document.documentElement.clientWidth;
+        this.el.style.removeProperty("--popup-translate-y");
+        this.el.style.removeProperty("--popup-max-height");
+        this.el.style.removeProperty("--popup-left");
+        // HORIZONTAL: prefer left-anchored to toggle; fall back to right-anchored.
+        // canOpen guarantees at least one side fits, so no centered fallback.
+        if (popupWidth <= viewportWidth - rect.left) {
+            this.el.style.setProperty("--popup-left", rect.left + "px");
         }
-    }
-    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 {
+            this.el.style.setProperty("--popup-left", rect.right - popupWidth + "px");
         }
-        else if (spaceLeft >= this.calWidth - this.el.clientWidth) {
-            this.popupEl.style.right = "0";
-            this.popupEl.style.left = "auto";
+        // VERTICAL
+        const gap = 2;
+        if (popupHeight + gap <= spaceBelow) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+        }
+        else if (popupHeight + gap <= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.top - popupHeight - gap + "px");
+        }
+        else if (spaceBelow >= spaceAbove) {
+            this.el.style.setProperty("--popup-translate-y", rect.bottom + gap + "px");
+            this.el.style.setProperty("--popup-max-height", spaceBelow - gap + "px");
         }
         else {
-            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;
+            this.el.style.setProperty("--popup-translate-y", "0px");
+            this.el.style.setProperty("--popup-max-height", spaceAbove - gap + "px");
+        }
+        this.isHidden = false;
+    }
+    handleToggle(ev) {
+        if (ev.newState === "open") {
+            if (!this.hasAnchor) {
+                this.positionDropdown();
             }
-            if (this.valueEnd) {
-                const endISO = this.toISO(this.valueEnd);
-                if (this._isValidISO(endISO)) {
-                    if (this.isSameMonth(startISO, endISO)) {
-                        this.startCalEl.endDate = endISO;
+            requestAnimationFrame(() => {
+                if (this.hasAnchor) {
+                    const fit = this.measureFit();
+                    this.openUp = fit.vertical === "above";
+                    this.openRight = fit.horizontal === "right";
+                    if (fit.vertical === "below-scroll") {
+                        // scroll needs to reveal the popup — pop it out of top-layer fixed
+                        // positioning so the ancestor scroll container governs visibility.
+                        this.popupEl.style.position = "absolute";
+                    }
+                }
+                this.isExpanded = true;
+                // 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;
                     }
-                    else {
-                        this.endCalEl.endDate = endISO;
+                    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;
+                            }
+                        }
                     }
                 }
+                window.setTimeout(() => {
+                    this.startCalEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }, 250);
+            });
+        }
+        else {
+            this.popupEl.style.position = "";
+            // 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.startCalEl.view = "day";
+            this.endCalEl.view = "day";
+            this.isExpanded = false;
+            if (!this.hasAnchor) {
+                this.isHidden = true;
             }
         }
-        window.setTimeout(() => {
-            // ensure focused element is visible if popup opens below the fold
-            this.startCalEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 250);
+    }
+    closePopup(returnFocus = false) {
+        this.popupEl.hidePopover();
+        if (returnFocus) {
+            window.setTimeout(() => {
+                this.toggleEl.focus();
+            }, 50);
+        }
     }
     handleFocus() {
         this.wrapperEl.classList.add("focus");
@@ -201,28 +265,6 @@ export class DateRange {
         // 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;
@@ -414,53 +456,49 @@ export class DateRange {
             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);
+        if (!this.hasAnchor) {
+            this.isHidden = true;
         }
-        this.setAvailSpace();
+    }
+    componentDidLoad() {
+        this.checkCanOpen();
+        window.addEventListener("resize", this.checkCanOpen);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.checkCanOpen);
     }
     announce(message) {
-        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        //   is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
-            message += "\u00A0";
+            message += " ";
         }
         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, { key: '95f4255b9be9bd130c05f4e241b380d4a4cb9b44', "aria-busy": "false" }, h("div", { key: '9ed1bc4d380d455707c98606270e5a0f4a670e5d', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: 'dd09c0a37c2a407eb778b5980c80d52dd20eec44', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: 'eef3eaf5c5fae38e6a0c21b98c7843c9a903ccb4', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '16d95b47d81fe1697dddb3238873ba02fc798663', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'd4aae726f63159c834fc7c0c17f0db8b10aef7cb', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '0dc110a5841021f3203bc27d717296b55b422767', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '277cb7bfe05c035f532997367b38c1ff8caeb84b', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '065afd4b9eef9ad45033e1dcf23edb6604ba6546', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '29b472c873710bb49a81c4099100beda79e4b7dd', 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", { key: '9a5dae1752b601d3d65853396120e45f0180b0f0', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '94a2426dd44cd42d84adeab1f4b742f7c697c66b', 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", { key: '816312155ba2e47c2d8dd55cf4ef17fc0f2ee748', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '392405ee15ec1e90e81e0d4605830affb75191c0', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'aecfac8c414b8d1bbbd838533528340849a0ac5d', "aria-busy": "false" }, h("div", { key: 'c3af3f58c12588b89e5b9603c9f87321be2334f0', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '27f3233e888e5b739e7cc472f63580c587c4349d', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: 'd164c3a6823329f865d6090434664215f236e070', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '5cf5e618b8f8c5a81deee238a521c63c658fbd4f', id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: 'a3732e60026edd602621eaa4705fa868a30f901f', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '820b21ca6bace322433123dd13027b34e13fd0e5', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6e14406ddf6598acdca64cd38b60d9c5dabf97d6', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '0abc28f57716418c05ab9075102d051650b91473', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '06fde2b651ba335a2668154b6e53361b754d4c4c', 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", { key: '2206facb04c01fd5e7fdcc2e3611b5cc10a2c15b', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '4384554613369f69128fde753ee17c2d2838580a', 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", { key: 'a60f8847a43bc7700d704a1625a6b02a03c2f1a3', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '1d61e36d2520d152b6d254ca7ec3338cd72f9193', disabled: this.disabled, "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", { key: 'fef84bbd99f603855cef63ab364fad7b6a2d48f3', class: "svg-icon svg-date" }), h("span", { key: 'b89e01d5e45719882c94cca69181223d648c3773', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '29482eddeb4b338d2a7fd8bc7a21a4327bf21795', class: "svg-icon svg-date" }), h("span", { key: '46a95d82191d34e338dc13795498bf495d5ee93f', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '12eea03f3f2b0716964e75c41d6792f88a5725a9' }, h("div", { key: 'bdc2b309fe429d246051b4ad0ec15b1aff688937', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '82fc51da8d50568d9905bbab6bce1b5a6f197568', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), h(Fragment, { key: '4db30c60962943752b387904130539ac5e945e3a' }, h("div", { key: '7f22b44e86c5fd32a1bd3c44c76a3701cbd0f3bc', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.openRight ? "open-right" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'f09baf0ab4a88545d9adc67a323b2d649f2e139b', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: '6c7cf777bfd87a4af0b5faed4ea4f5addf375297', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: '7026c2d673ab5bb0d31894d776e5e83fed9f9f8a', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: '30061d1dc94168d46d36ff8a095633ff88f88f00', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() })))), h("div", { key: 'd6f98c38fc291451fd5061f181f9e6c850b09e63' }, h("div", { key: '3a17ce8f89771290a5297462b6b7cd0c45779351', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '29b7c8496de61e8fe43a1b922457fa0469510dcf', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '922cd42837fc05f39912bfa9d96d98306f4c90e1', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '744c3c9cc424739e307d27f6f28b662869ed1df0', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '3e887578975e3a744a0199f49eaa2ae88682b5b2', id: "error", class: "error" }, this.errorMessage), h("div", { key: '7b1e43bb5666392e721ea401fffb897b31544f91', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '07a43c7736f6cc20dc9f081e5c5a47e5818da661', id: "error", class: "error" }, this.errorMessage), h("div", { key: '1b25c022a67d1e3e7f7eff7088d544aa6e9f31ea', 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"; }
@@ -677,8 +715,11 @@ export class DateRange {
     }
     static get states() {
         return {
-            "availSpace": {},
-            "isExpanded": {}
+            "isExpanded": {},
+            "openUp": {},
+            "openRight": {},
+            "isHidden": {},
+            "canOpen": {}
         };
     }
     static get events() {
@@ -801,24 +842,6 @@ export class DateRange {
     }
     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,
@@ -842,12 +865,6 @@ export class DateRange {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "resize",
-                "method": "setAvailSpace",
-                "target": "window",
-                "capture": false,
-                "passive": true
             }];
     }
 }