@watermarkinsights/ripple 5.3.0-11 → 5.3.0-12

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

@@ -68,11 +68,10 @@ export class DateRange {
         }
         return [startFocusDate, endFocusDate];
     }
+    // same month of the same year
     isSameMonth(date1, date2) {
         if (date1 && date2) {
-            let month1 = parseInt(date1.split("-")[1]);
-            let month2 = parseInt(date2.split("-")[1]);
-            return month1 == month2;
+            return date1.slice(0, -3) === date2.slice(0, -3);
         }
         else {
             return false;
@@ -430,19 +429,19 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { key: '3029fd07d8d0db78965fc09e6948170446b2b7ef', "aria-busy": "false" }, h("div", { key: '7d1d4ae772a40fe93751d97ffc27f915871088ee', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '6e9af16b3828e73106d3308f2e6d6b8eac465003', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '4bc7f4cd69203a85fc2a571b6ac1a876ab616e57', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'd31245f3cf3a4201f256f038e6ab7b2da2e2d1bf', 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: '238a8a8e9d941337d6d70a06b8ebda10eef2151e', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '33fc696ffb32b9998071a31f675f32850eb95f64', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6ecf380855ba33ba5dbfb3a8314e00cde2e88213', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '21092080beefb1dba4cc5bd5d7beda5ab09345c2', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '3bec94e356b2df9964f18c63d5ffc8e2605f0fb4', 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: 'eedf6637a367a9061fe118669d3837710210e224', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '825273cd7267f2b1e65c77033f6e1e0247839348', 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: 'aa64030e2c73c4008f95682f57afaac514230818', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: 'ea5697c01c48dfe5f04a64410d29ee97da6f5100', 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" }, h("span", { key: 'd7025653af3c9f06173ce0cade3ee4b6750e0fc8', class: "calendar", title: intl.formatMessage({
+        return (h(Host, { key: '889a8810b6a23a8e1165c6fb412dd305f452db31', "aria-busy": "false" }, h("div", { key: '0eb6d7f9b1d0f6708680511fd98359a8a337a312', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5a6c31e062e01553a6ca9222c98d63145a951b54', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '1b857cd7cd48ab1814c601895c63bc26aad7dad4', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '6672f83e8e452076c25d2f6476c59c70e8a07c91', 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: 'a6a540a425270f37dc68e839233b3fecc525c4a1', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '6aed1fb0f7961dc109b9263073b0f145e4fee375', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '989654b4783454d89f18512834e051b81688d67b', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '55079c3e88c3fea004b15c4542453e57413d6294', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '6d234216d24be10320826f64fb6b5f3d9657575a', 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: 'e78f22570d5ec03bc3c9242c0bff51856916529d', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'eca403a543d0273f4b1b947d26049f3587b74e6a', 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: '3bb4310fb3c20b73ed5b4b0a5fe5988f694bfcf5', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '60e0e4d0c52cce17e0d7599de7181af3f15eafbd', 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" }, h("span", { key: '2cc879207b9cad053f8e9fbc7ca2a7e6ce8c5c1b', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '726317359bc8126913ecd328bfa4b4aeb5ae7a3e' }, h("div", { key: '49f564c8416034d568f71b5b46cb39fc0cb805ad', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'a9a4f88a5d276ed5fae916353f772275351f893e', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: '37f8f6d94fb0255bdae379e6812da8b70704fe62' }, h("div", { key: '222c4b451d163d07c9a5ac6f2acbea55af9e0147', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '9dc194a3e5bd4a4bd8b1c1af9ef89aa1969ae58e', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '3cbbdddbc3260c14e9fb2688b351f9af9318cc14', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'dfbb468331754172ef76a16cc1c5447f20b90370', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '2e4e09a62616dc611b744a412a0fe3a04e67e8f8', id: "error", class: "error" }, this.errorMessage), h("div", { key: '77d200c672686371c2e5fe082857d1721bebe3aa', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '08259e7644e9f685b721db5cd7c3614db286e0ef', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'fbb39147a7cbca48d4f5e057833b387ad4d1e4b9', 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"; }

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -53,7 +53,7 @@
   overflow: auto;
   padding: 0.25rem 0.625rem 1.875rem;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   gap: 1.25rem;
 }
 :host .wm-snack-wrapper {
@@ -145,7 +145,7 @@
 :host .wm-snack-wrapper .wm-snackbar.active:not(button) {
   opacity: 1;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,31 +162,31 @@
   position: relative;
   padding: 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   width: 100%;
   align-items: center;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg {
   display: block;
   flex: 0 0 0;
   min-width: fit-content;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg.long {
   min-width: 216px;
   flex: 1 0 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link {
   display: flex;
   flex: 0 0 auto;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link span {
   display: block;
   white-space: nowrap;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -207,7 +207,7 @@
   text-align: center;
   letter-spacing: normal;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -218,18 +218,18 @@
   content: "\f156";
   font-size: 1.12rem;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:hover {
   background-color: var(--wmcolor-snackbar-close-background-hover);
   color: var(--wmcolor-snackbar-close-icon-hover);
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus {
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack::-moz-focus-inner {
   border: 0;
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:active {
   -ms-transform: scale(0.9, 0.9);
   -webkit-transform: scale(0.9, 0.9);
   -moz-transform: scale(0.9, 0.9);
@@ -264,11 +264,11 @@
   left: 0;
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 0;
 }
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
   clip: auto;
   width: auto;
   height: auto;
@@ -281,13 +281,13 @@
   transform: translateX(-50%);
 }
 @media screen and (min-width: 48rem) {
-  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
     top: 2.0625rem;
     left: auto;
   }
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .link:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -25,7 +25,7 @@ export class Snackbar {
     updateSnacks(newValue) {
         const prevParsedNotifications = [...this.parsedNotifications];
         this.parsedNotifications = [...JSON.parse(newValue)];
-        this.refreshUpdatedNotifications(prevParsedNotifications);
+        this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
             const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
@@ -44,7 +44,19 @@ export class Snackbar {
         }
         this.setMinWidths();
     }
-    refreshUpdatedNotifications(prevNotifications) {
+    setMinWidths() {
+        // wait for render to get updated scrollWidth
+        requestAnimationFrame(() => {
+            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
+            msgEls.forEach((msgEl) => {
+                msgEl.classList.remove("long");
+                if (msgEl.scrollWidth > 216) {
+                    msgEl.classList.add("long");
+                }
+            });
+        });
+    }
+    resetUpdatedNotifications(prevNotifications) {
         let updatedNotifications = [];
         prevNotifications.forEach((prevNotification) => {
             this.parsedNotifications.forEach((newNotification) => {
@@ -117,18 +129,6 @@ export class Snackbar {
             delete this.timers[notification.id];
         }
     }
-    setMinWidths() {
-        // wait for render to get updated scrollWidth
-        requestAnimationFrame(() => {
-            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
-            msgEls.forEach((msgEl) => {
-                msgEl.classList.remove("long");
-                if (msgEl.scrollWidth > 216) {
-                    msgEl.classList.add("long");
-                }
-            });
-        });
-    }
     announce(message) {
         if (this.liveRegionEl.textContent === message) {
             message += "\u00A0";
@@ -136,15 +136,15 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return [...this.parsedNotifications].reverse().map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '67f36569152cc7f7df8e17a48b72737cf06b2249' }, h("div", { key: '2646611246f9ab87624bb1ad2bad217c364d89e7', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: 'ac0f07b1f90bc65343b1380d5247ff50f0ba3a01' }, h("div", { key: '77a473a854866043380b5ff564a6ab77e10f66ba', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
-            } }, this.renderSnackbars()), h("div", { key: '26284c415d2be1b8e944d7c2830c8eada5030fe3', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: '443fed993bae034bc902116915e8e7efc0b9b3cb', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-60cf5693.js → app-globals-51ea1005.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.3.0-11";
+const version = "5.3.0-12";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-60cf5693.js';
+import { g as globalScripts } from './app-globals-51ea1005.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/priv-calendar.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
 import { i as intl, B as dateFind, I as makeISO, J as getMonthLength, K as weekdays, C as calendar_months } from './functions-25781571.js';
 
-const privCalendarCss = ":host{--wmcolor-calendar-border:var(--wmcolor-border);--wmcolor-calendar-day-border-hover:var(--wmcolor-border-focus);--wmcolor-calendar-range-background:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-range-background-hover:var(--wmcolor-datepicker-day-background-hover);--wmcolor-datepicker-range-background-selected:var(--wmcolor-background-selected);--range-start-svg:url('data:image/svg+xml,<svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z\" fill=\"%23575195\"/></svg>');--range-end-svg:url('data:image/svg+xml,<svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M44 6C44 2.68629 41.3137 0 38 0H15.1543C12.9223 0 10.8749 1.23886 9.83926 3.21596L1.45831 19.216C0.544956 20.9596 0.54496 23.0404 1.45831 24.784L9.83926 40.784C10.8749 42.7611 12.9223 44 15.1542 44H38C41.3137 44 44 41.3137 44 38V6Z\" fill=\"%23575195\"/></svg>');--range-background-selected:linear-gradient(\n    transparent,\n    transparent 5px,\n    var(--wmcolor-datepicker-range-background-selected) 5px,\n    var(--wmcolor-datepicker-range-background-selected) 39px,\n    transparent 39px\n  );--range-background-hover:linear-gradient(\n    transparent,\n    transparent 5px,\n    var(--wmcolor-datepicker-range-background-hover) 5px,\n    var(--wmcolor-datepicker-range-background-hover) 39px,\n    transparent 39px\n  )}:host priv-calendar+priv-calendar{-webkit-border-start:1px solid var(--wmcolor-calendar-border);border-inline-start:1px solid var(--wmcolor-calendar-border)}.toggle{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:var(--wmcolor-datepicker-toggle-background);border:none;border-radius:3px}.toggle span::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:\"\\f0ed\";font-size:1.5rem;color:var(--wmcolor-datepicker-toggle-icon);padding:0;line-height:2.5rem}.toggle:hover{-webkit-box-shadow:none;box-shadow:none;background:var(--wmcolor-datepicker-toggle-background-hover)}.toggle:disabled{pointer-events:none;-webkit-box-shadow:none;box-shadow:none;background-color:var(--wmcolor-datepicker-toggle-background-disabled)}.toggle:disabled .calendar::after{color:var(--wmcolor-datepicker-toggle-icon-disabled)}[dir=RTL] .toggle{right:auto;left:0}.toggle::-moz-focus-inner{border:0}.toggle:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}.toggle:focus-visible:not(:active){border:none;z-index:11}.inside .toggle{border-top-left-radius:0;border-bottom-left-radius:0;border-start-start-radius:0;border-end-start-radius:0}.popup-wrapper{visibility:hidden;font-family:inherit;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.2);z-index:10;position:absolute;left:0;top:calc(100% + 2px);min-height:21.0625rem;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transform:scale(1, 0);transform:scale(1, 0);background-color:var(--wmcolor-datepicker-background)}.popup-wrapper.start{border:2px solid cyan}.popup-wrapper.end{left:247px !important;border:2px solid teal}.popup-wrapper.open{-webkit-transform:scale(1, 1);transform:scale(1, 1)}.popup-wrapper.expand-upwards{top:auto;bottom:2.375rem;-webkit-transform-origin:center bottom;transform-origin:center bottom}.popup-wrapper .calendar-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;position:relative;padding:0.9375rem 0.25rem}.popup-wrapper .calendar-header .title-box{height:2.625rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;font-weight:500;font-size:0.875rem;background:var(--wmcolor-datepicker-selector-background);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:0 0.375rem 0 0.75rem;border-color:var(--wmcolor-datepicker-selector-border);color:var(--wmcolor-datepicker-selector-text)}.popup-wrapper .calendar-header .title-box: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:\"\\f140\";padding-left:0.75rem;font-size:1.12rem}.popup-wrapper .calendar-header .title-box.year:after{content:\"\\f143\"}.popup-wrapper .calendar-header .title-box::-moz-focus-inner{border:0}.popup-wrapper .calendar-header .arw-btn{cursor:pointer;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;width:2.75rem;height:2.75rem;border:none;color:var(--wmcolor-datepicker-navigation-text);background:var(--wmcolor-datepicker-navigation-background);padding:0;-webkit-box-shadow:none;box-shadow:none;line-height:2.75rem}.popup-wrapper .calendar-header .arw-btn .mdi{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;font-size:1.5rem;font-weight:normal;line-height:2.75rem}.popup-wrapper .calendar-header .arw-btn:hover{background-color:var(--wmcolor-datepicker-navigation-background-hover)}.popup-wrapper .calendar-header .arw-btn:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}.popup-wrapper .separator{min-width:1px;background:var(--wm-color-border)}.popup-wrapper .day-view{min-width:21rem}.popup-wrapper .day-view .date-grid{width:100%;text-align:center;border-collapse:collapse;margin-bottom:0.4375rem;color:var(--wmcolor-datepicker-day-text)}.popup-wrapper .day-view .date-grid div[role=row]{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;padding-inline:0.875rem}.popup-wrapper .day-view .date-grid div[role=row]:not(.header-row){height:2.75rem}.popup-wrapper .day-view .date-grid .date-header{background-color:var(--wmcolor-datepicker-weekdays-background)}.popup-wrapper .day-view .date-grid .header-cell{height:2.0625rem;line-height:2.0625rem;width:2.75rem;margin:0 calc((14.28% - 44px) / 2);padding:0;display:inline-block;font-size:0.8125rem;font-weight:bold;color:var(--wmcolor-datepicker-weekdays-text);border:none}.popup-wrapper .day-view .date-grid [role=gridcell]{padding:0;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;aspect-ratio:1;font-size:0.875rem;font-weight:500;position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 2.75rem;flex:1 0 2.75rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.popup-wrapper .day-view .date-grid .date-cell{cursor:pointer}.popup-wrapper .day-view .date-grid .date-cell:hover{background-color:var(--wmcolor-datepicker-day-background-hover)}.popup-wrapper .day-view .date-grid .date-cell[aria-selected=true]{background-color:var(--wmcolor-datepicker-day-background-selected);color:var(--wmcolor-datepicker-day-text-selected)}.popup-wrapper .day-view .date-grid .date-cell.in-range{background:var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:not(.preview):hover{background-repeat:no-repeat;background-position:center, center left 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:not(.preview):hover{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:not(.preview):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), var(--range-background-selected);color:var(--wmcolor-datepicker-day-text)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview{position:relative;background-image:var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), var(--range-background-hover);background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-position:center left -5px, center left 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-position:center right -5px, center right 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start,.preview-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), linear-gradient(transparent, transparent 15px, var(--wmcolor-datepicker-range-background-hover) 15px, var(--wmcolor-datepicker-range-background-hover) 29px, transparent 29px);background-position:center left -5px, center right -5px, center;background-size:auto, auto, 9px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:last-child,.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:first-child{background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start{background-position:center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:first-child{background-position:center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:last-child{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end,.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start{background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start,.preview-end,.range-start,.range-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:-5px center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start,.preview-end,.range-start,.range-end):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:center, -5px center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:last-child:hover,.popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:first-child:hover{background:radial-gradient(#dbd9ef 20px, transparent 21px);background-position:center}.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start,.range-end,.preview),.popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start,.range-end,.preview),.popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start,.range-end,.preview){background:radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:5px center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start,.range-end,.preview-start,.preview-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start,.range-end,.preview-start,.preview-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start,.range-end,.preview-start,.preview-end):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:center, 5px center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.today:after{content:\"\";display:block;position:absolute;inset:auto 0 6px 0;width:6px;aspect-ratio:1;border-radius:50%;justify-self:center;background-color:var(--wmcolor-datepicker-day-background-selected);margin:auto}.popup-wrapper .day-view .date-grid .date-cell.range-start,.popup-wrapper .day-view .date-grid .date-cell.range-end{border-radius:0;margin:0;outline:none;font-weight:600;color:var(--wmcolor-datepicker-day-text-selected)}.popup-wrapper .day-view .date-grid .date-cell.range-start{background-image:var(--range-start-svg);-webkit-padding-end:2px;padding-inline-end:2px;background-color:transparent}.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range:not(:hover,:last-of-type,:last-child){background-image:var(--range-start-svg), var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type,:last-child){background-image:var(--range-start-svg), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.range-end{background-image:var(--range-end-svg);-webkit-padding-start:2px;padding-inline-start:2px;background-color:transparent}.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range:not(:hover,:first-of-type,:first-child){background-image:var(--range-end-svg), var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type,:first-child){background-image:var(--range-end-svg), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.range-start.range-end{background:var(--wmcolor-datepicker-day-background-selected);border-radius:50%;padding-inline:0;margin:1px;-ms-flex-preferred-size:42px;flex-basis:42px}.popup-wrapper .month-view .months{border-top:2px solid;border-top-color:var(--wmcolor-datepicker-month-border);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.popup-wrapper .month-view .month-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;width:100%;border-bottom:2px solid;border-bottom-color:var(--wmcolor-datepicker-month-border)}.popup-wrapper .month-view .month{border:none;background:white;cursor:pointer;width:7rem;height:4rem;line-height:4rem;font-family:inherit;font-weight:500;color:var(--wmcolor-datepicker-month-text)}.popup-wrapper .month-view .month:not(:last-child){border-right:2px solid;border-right-color:var(--wmcolor-datepicker-month-border)}.popup-wrapper .month-view .month:hover{border-right-color:transparent;background-color:var(--wmcolor-datepicker-month-background-hover)}.popup-wrapper .month-view .month:active,.popup-wrapper .month-view .month.selected{background-color:var(--wmcolor-datepicker-month-background-selected);color:var(--wmcolor-datepicker-month-text-selected)}.popup-wrapper .month.focused:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-2px;border:none;z-index:11}.popup-wrapper .month.focused:focus-visible[aria-selected=true]{outline-offset:2px}.popup-wrapper button:focus-visible,.popup-wrapper .title-box:focus-visible,.popup-wrapper .date-cell:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-2px;border:none;z-index:11}.popup-wrapper button:focus-visible[aria-selected=true],.popup-wrapper .title-box:focus-visible[aria-selected=true],.popup-wrapper .date-cell:focus-visible[aria-selected=true]{outline-offset:2px}.popup-range{display:-ms-flexbox;display:flex}.popup{width:21rem}.sr-only{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}";
+const privCalendarCss = ":host{--wmcolor-calendar-border:var(--wmcolor-border);--wmcolor-calendar-day-border-hover:var(--wmcolor-border-focus);--wmcolor-calendar-range-background:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-range-background-hover:var(--wmcolor-datepicker-day-background-hover);--wmcolor-datepicker-range-background-selected:var(--wmcolor-background-selected);--range-start-svg:url('data:image/svg+xml,<svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z\" fill=\"%23575195\"/></svg>');--range-end-svg:url('data:image/svg+xml,<svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M44 6C44 2.68629 41.3137 0 38 0H15.1543C12.9223 0 10.8749 1.23886 9.83926 3.21596L1.45831 19.216C0.544956 20.9596 0.54496 23.0404 1.45831 24.784L9.83926 40.784C10.8749 42.7611 12.9223 44 15.1542 44H38C41.3137 44 44 41.3137 44 38V6Z\" fill=\"%23575195\"/></svg>');--range-background-selected:linear-gradient(\n    transparent,\n    transparent 5px,\n    var(--wmcolor-datepicker-range-background-selected) 5px,\n    var(--wmcolor-datepicker-range-background-selected) 39px,\n    transparent 39px\n  );--range-background-hover:linear-gradient(\n    transparent,\n    transparent 5px,\n    var(--wmcolor-datepicker-range-background-hover) 5px,\n    var(--wmcolor-datepicker-range-background-hover) 39px,\n    transparent 39px\n  )}:host priv-calendar+priv-calendar{-webkit-border-start:1px solid var(--wmcolor-calendar-border);border-inline-start:1px solid var(--wmcolor-calendar-border)}.toggle{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:var(--wmcolor-datepicker-toggle-background);border:none;border-radius:3px}.toggle span::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:\"\\f0ed\";font-size:1.5rem;color:var(--wmcolor-datepicker-toggle-icon);padding:0;line-height:2.5rem}.toggle:hover{-webkit-box-shadow:none;box-shadow:none;background:var(--wmcolor-datepicker-toggle-background-hover)}.toggle:disabled{pointer-events:none;-webkit-box-shadow:none;box-shadow:none;background-color:var(--wmcolor-datepicker-toggle-background-disabled)}.toggle:disabled .calendar::after{color:var(--wmcolor-datepicker-toggle-icon-disabled)}[dir=RTL] .toggle{right:auto;left:0}.toggle::-moz-focus-inner{border:0}.toggle:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}.toggle:focus-visible:not(:active){border:none;z-index:11}.inside .toggle{border-top-left-radius:0;border-bottom-left-radius:0;border-start-start-radius:0;border-end-start-radius:0}.popup-wrapper{visibility:hidden;font-family:inherit;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.2);z-index:10;position:absolute;left:0;top:calc(100% + 2px);min-height:21.0625rem;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transform:scale(1, 0);transform:scale(1, 0);background-color:var(--wmcolor-datepicker-background)}.popup-wrapper.start{border:2px solid cyan}.popup-wrapper.end{left:247px !important;border:2px solid teal}.popup-wrapper.open{-webkit-transform:scale(1, 1);transform:scale(1, 1)}.popup-wrapper.expand-upwards{top:auto;bottom:2.375rem;-webkit-transform-origin:center bottom;transform-origin:center bottom}.popup-wrapper .calendar-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;position:relative;padding:0.9375rem 0.25rem}.popup-wrapper .calendar-header .title-box{height:2.625rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;font-weight:500;font-size:0.875rem;background:var(--wmcolor-datepicker-selector-background);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:0 0.375rem 0 0.75rem;border-color:var(--wmcolor-datepicker-selector-border);color:var(--wmcolor-datepicker-selector-text)}.popup-wrapper .calendar-header .title-box: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:\"\\f140\";padding-left:0.75rem;font-size:1.12rem}.popup-wrapper .calendar-header .title-box.year:after{content:\"\\f143\"}.popup-wrapper .calendar-header .title-box::-moz-focus-inner{border:0}.popup-wrapper .calendar-header .arw-btn{cursor:pointer;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;width:2.75rem;height:2.75rem;border:none;color:var(--wmcolor-datepicker-navigation-text);background:var(--wmcolor-datepicker-navigation-background);padding:0;-webkit-box-shadow:none;box-shadow:none;line-height:2.75rem}.popup-wrapper .calendar-header .arw-btn .mdi{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;font-size:1.5rem;font-weight:normal;line-height:2.75rem}.popup-wrapper .calendar-header .arw-btn:hover{background-color:var(--wmcolor-datepicker-navigation-background-hover)}.popup-wrapper .calendar-header .arw-btn:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}.popup-wrapper .separator{min-width:1px;background:var(--wm-color-border)}.popup-wrapper .day-view{min-width:21rem}.popup-wrapper .day-view .date-grid{width:100%;text-align:center;border-collapse:collapse;margin-bottom:0.4375rem;color:var(--wmcolor-datepicker-day-text)}.popup-wrapper .day-view .date-grid div[role=row]{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;padding-inline:0.875rem}.popup-wrapper .day-view .date-grid div[role=row]:not(.header-row){height:2.75rem}.popup-wrapper .day-view .date-grid .date-header{background-color:var(--wmcolor-datepicker-weekdays-background)}.popup-wrapper .day-view .date-grid .header-cell{height:2.0625rem;line-height:2.0625rem;width:2.75rem;margin:0 calc((14.28% - 44px) / 2);padding:0;display:inline-block;font-size:0.8125rem;font-weight:bold;color:var(--wmcolor-datepicker-weekdays-text);border:none}.popup-wrapper .day-view .date-grid [role=gridcell]{padding:0;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;aspect-ratio:1;font-size:0.875rem;font-weight:500;position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 2.75rem;flex:1 0 2.75rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.popup-wrapper .day-view .date-grid .date-cell{cursor:pointer}.popup-wrapper .day-view .date-grid .date-cell:hover{background-color:var(--wmcolor-datepicker-day-background-hover)}.popup-wrapper .day-view .date-grid .date-cell[aria-selected=true]{background-color:var(--wmcolor-datepicker-day-background-selected);color:var(--wmcolor-datepicker-day-text-selected)}.popup-wrapper .day-view .date-grid .date-cell.in-range{background:var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:not(.preview):hover{background-repeat:no-repeat;background-position:center, center left 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:not(.preview):hover{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:not(.preview):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), var(--range-background-selected);color:var(--wmcolor-datepicker-day-text)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview{position:relative;background-image:var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), var(--range-background-hover);background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-position:center left -5px, center left 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-position:center right -5px, center right 17px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start,.preview-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), linear-gradient(transparent, transparent 15px, var(--wmcolor-datepicker-range-background-hover) 15px, var(--wmcolor-datepicker-range-background-hover) 29px, transparent 29px);background-position:center left -5px, center right -5px, center;background-size:auto, auto, 9px}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:last-child,.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:first-child{background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start{background-position:center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:first-child{background-position:center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:last-child{background-position:center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end,.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start{background-image:radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:focus-visible,.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:focus-visible{outline:none;border:none}.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start,.preview-end,.range-start,.range-end),.popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end){background-image:radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:-5px center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start,.preview-end,.range-start,.range-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start,.preview-end,.range-start,.range-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start,.preview-end,.range-start,.range-end):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:center, -5px center, center left 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:last-child:hover,.popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:first-child:hover{background:radial-gradient(#dbd9ef 20px, transparent 21px);background-position:center}.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start,.range-end,.preview),.popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start,.range-end,.preview),.popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start,.range-end,.preview){background:radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:5px center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start,.range-end,.preview-start,.preview-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start,.range-end,.preview-start,.preview-end):hover,.popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start,.range-end,.preview-start,.preview-end):hover{background-image:radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);background-position:center, 5px center, center right 17px;background-repeat:no-repeat}.popup-wrapper .day-view .date-grid .date-cell.today:after{content:\"\";display:block;position:absolute;inset:auto 0 6px 0;width:6px;aspect-ratio:1;border-radius:50%;justify-self:center;background-color:var(--wmcolor-datepicker-day-background-selected);margin:auto}.popup-wrapper .day-view .date-grid .date-cell.range-start,.popup-wrapper .day-view .date-grid .date-cell.range-end{border-radius:0;margin:0;outline:none;font-weight:600;color:var(--wmcolor-datepicker-day-text-selected)}.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible,.popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-2px;border:none;z-index:11}.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true],.popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true]{outline-offset:2px}.popup-wrapper .day-view .date-grid .date-cell.range-start{background-image:var(--range-start-svg);-webkit-padding-end:2px;padding-inline-end:2px;background-color:transparent}.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range:not(:hover,:last-of-type,:last-child){background-image:var(--range-start-svg), var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type,:last-child){background-image:var(--range-start-svg), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.range-end{background-image:var(--range-end-svg);-webkit-padding-start:2px;padding-inline-start:2px;background-color:transparent}.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range:not(:hover,:first-of-type,:first-child){background-image:var(--range-end-svg), var(--range-background-selected);border-radius:0}.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type,:first-child){background-image:var(--range-end-svg), var(--range-background-hover)}.popup-wrapper .day-view .date-grid .date-cell.range-start.range-end{background:var(--wmcolor-datepicker-day-background-selected);border-radius:50%;padding-inline:0;margin:1px;-ms-flex-preferred-size:42px;flex-basis:42px}.popup-wrapper .month-view .months{border-top:2px solid;border-top-color:var(--wmcolor-datepicker-month-border);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.popup-wrapper .month-view .month-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;width:100%;border-bottom:2px solid;border-bottom-color:var(--wmcolor-datepicker-month-border)}.popup-wrapper .month-view .month{border:none;background:white;cursor:pointer;width:7rem;height:4rem;line-height:4rem;font-family:inherit;font-weight:500;color:var(--wmcolor-datepicker-month-text)}.popup-wrapper .month-view .month:not(:last-child){border-right:2px solid;border-right-color:var(--wmcolor-datepicker-month-border)}.popup-wrapper .month-view .month:hover{border-right-color:transparent;background-color:var(--wmcolor-datepicker-month-background-hover)}.popup-wrapper .month-view .month:active,.popup-wrapper .month-view .month.selected{background-color:var(--wmcolor-datepicker-month-background-selected);color:var(--wmcolor-datepicker-month-text-selected)}.popup-wrapper button:focus-visible:not(.preview-start,.preview-end),.popup-wrapper .title-box:focus-visible:not(.preview-start,.preview-end),.popup-wrapper .month.focused:focus-visible:not(.preview-start,.preview-end),.popup-wrapper .date-cell:focus-visible:not(.preview-start,.preview-end){outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-2px;border:none;z-index:11}.popup-wrapper button:focus-visible:not(.preview-start,.preview-end)[aria-selected=true],.popup-wrapper .title-box:focus-visible:not(.preview-start,.preview-end)[aria-selected=true],.popup-wrapper .month.focused:focus-visible:not(.preview-start,.preview-end)[aria-selected=true],.popup-wrapper .date-cell:focus-visible:not(.preview-start,.preview-end)[aria-selected=true]{outline-offset:2px}.popup-range{display:-ms-flexbox;display:flex}.popup{width:21rem}.sr-only{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}";
 const PrivCalendarStyle0 = privCalendarCss;
 
 const PrivCalendar = class {
@@ -121,7 +121,7 @@ const PrivCalendar = class {
             const monthOfDate = dateFind.month.asInt(date);
             const dayOfDate = dateFind.day.asInt(date);
             const yearOfDate = dateFind.year.asInt(date);
-            const isStartDate = this.startDate && this.startDate === date;
+            const isStartDate = eitherStart && eitherStart === date;
             let selected = isStartDate ? "true" : "false";
             const classesArr = ["date-cell"];
             const isFocused = date === this.focusDate;
@@ -129,7 +129,7 @@ const PrivCalendar = class {
             if (isToday)
                 classesArr.push("today");
             if (this.calType === "range") {
-                const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
+                const isEndDate = eitherStart && eitherEnd && eitherEnd === date && eitherStart < eitherEnd;
                 selected = isEndDate ? "true" : selected;
                 const isFirstOfMonth = dayOfDate === 1;
                 const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
@@ -143,7 +143,7 @@ const PrivCalendar = class {
                 if (isLastOfMonth)
                     classesArr.push("last-of-month");
                 if (isStartDate) {
-                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
+                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < eitherStart) {
                         // invert the arrow direction if user mouses over a prior date
                         classesArr.push("range-end");
                     }
@@ -370,42 +370,42 @@ const PrivCalendar = class {
     }
     isInRange(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
-            if (_startDate && _endDate) {
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
+            if (eitherStart && eitherEnd) {
                 // if both dates exist the range is shown
-                return _startDate <= date && date <= _endDate;
+                return eitherStart <= date && date <= eitherEnd;
             }
         }
         return false;
     }
     isInRangePreview(date) {
         if (this.otherCalEl) {
-            const _startDate = this.startDate || this.otherCalEl.startDate;
-            const _endDate = this.endDate || this.otherCalEl.endDate;
+            const eitherStart = this.startDate || this.otherCalEl.startDate;
+            const eitherEnd = this.endDate || this.otherCalEl.endDate;
             // no preview if there's an existing range
-            if (_startDate && _endDate)
+            if (eitherStart && eitherEnd)
                 return false;
-            if (_startDate && this.hoverDate) {
+            if (eitherStart && this.hoverDate) {
                 // if only startDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate > _startDate) {
-                    return _startDate <= date && date <= this.hoverDate;
+                if (this.hoverDate > eitherStart) {
+                    return eitherStart <= date && date <= this.hoverDate;
                 }
-                else if (this.hoverDate < _startDate) {
+                else if (this.hoverDate < eitherStart) {
                     // user is mousing over a date prior to the start date
                     // start date considered as end of range
-                    return this.hoverDate <= date && date <= _startDate;
+                    return this.hoverDate <= date && date <= eitherStart;
                 } // if neither < or > then it's the same date and should return false
             }
-            else if (_endDate && this.hoverDate) {
+            else if (eitherEnd && this.hoverDate) {
                 // if only endDate exists, the hovered date functions as the other end of the range
-                if (this.hoverDate < _endDate) {
-                    return this.hoverDate <= date && date <= _endDate;
+                if (this.hoverDate < eitherEnd) {
+                    return this.hoverDate <= date && date <= eitherEnd;
                 }
-                else if (this.hoverDate > _endDate) {
+                else if (this.hoverDate > eitherEnd) {
                     // user is mousing over a date later than the end date
                     // end date considered as beggining of range
-                    return _endDate <= date && date <= this.hoverDate;
+                    return eitherEnd <= date && date <= this.hoverDate;
                 }
             }
         }
@@ -550,11 +550,11 @@ const PrivCalendar = class {
             }), class: "header-btn arw-btn" }, h("span", { class: "mdi" }, "\uF142"))), h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: 'e1269b7069d6b870cd9e873a046b24ddff6ac6cb', onMouseOut: (ev) => {
+        return (h(Host, { key: '14af9cecf405ac061fd2345488fda226bb068a40', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '3cf3a1b225b865ae1f02367ac318fb29b70a3acd', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: 'dd1583339054b245d006f4ea3caa7efab5f31e4a', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-60cf5693.js';
+import { g as globalScripts } from './app-globals-51ea1005.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

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

@@ -76,11 +76,10 @@ const DateRange = class {
         }
         return [startFocusDate, endFocusDate];
     }
+    // same month of the same year
     isSameMonth(date1, date2) {
         if (date1 && date2) {
-            let month1 = parseInt(date1.split("-")[1]);
-            let month2 = parseInt(date2.split("-")[1]);
-            return month1 == month2;
+            return date1.slice(0, -3) === date2.slice(0, -3);
         }
         else {
             return false;
@@ -438,19 +437,19 @@ const DateRange = class {
         }
     }
     render() {
-        return (h(Host, { key: '3029fd07d8d0db78965fc09e6948170446b2b7ef', "aria-busy": "false" }, h("div", { key: '7d1d4ae772a40fe93751d97ffc27f915871088ee', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '6e9af16b3828e73106d3308f2e6d6b8eac465003', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '4bc7f4cd69203a85fc2a571b6ac1a876ab616e57', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'd31245f3cf3a4201f256f038e6ab7b2da2e2d1bf', 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: '238a8a8e9d941337d6d70a06b8ebda10eef2151e', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '33fc696ffb32b9998071a31f675f32850eb95f64', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6ecf380855ba33ba5dbfb3a8314e00cde2e88213', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '21092080beefb1dba4cc5bd5d7beda5ab09345c2', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '3bec94e356b2df9964f18c63d5ffc8e2605f0fb4', 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: 'eedf6637a367a9061fe118669d3837710210e224', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '825273cd7267f2b1e65c77033f6e1e0247839348', 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: 'aa64030e2c73c4008f95682f57afaac514230818', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: 'ea5697c01c48dfe5f04a64410d29ee97da6f5100', 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" }, h("span", { key: 'd7025653af3c9f06173ce0cade3ee4b6750e0fc8', class: "calendar", title: intl.formatMessage({
+        return (h(Host, { key: '889a8810b6a23a8e1165c6fb412dd305f452db31', "aria-busy": "false" }, h("div", { key: '0eb6d7f9b1d0f6708680511fd98359a8a337a312', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '5a6c31e062e01553a6ca9222c98d63145a951b54', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '1b857cd7cd48ab1814c601895c63bc26aad7dad4', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '6672f83e8e452076c25d2f6476c59c70e8a07c91', 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: 'a6a540a425270f37dc68e839233b3fecc525c4a1', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '6aed1fb0f7961dc109b9263073b0f145e4fee375', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '989654b4783454d89f18512834e051b81688d67b', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '55079c3e88c3fea004b15c4542453e57413d6294', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '6d234216d24be10320826f64fb6b5f3d9657575a', 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: 'e78f22570d5ec03bc3c9242c0bff51856916529d', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: 'eca403a543d0273f4b1b947d26049f3587b74e6a', 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: '3bb4310fb3c20b73ed5b4b0a5fe5988f694bfcf5', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '60e0e4d0c52cce17e0d7599de7181af3f15eafbd', 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" }, h("span", { key: '2cc879207b9cad053f8e9fbc7ca2a7e6ce8c5c1b', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", { key: '726317359bc8126913ecd328bfa4b4aeb5ae7a3e' }, h("div", { key: '49f564c8416034d568f71b5b46cb39fc0cb805ad', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'a9a4f88a5d276ed5fae916353f772275351f893e', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: '37f8f6d94fb0255bdae379e6812da8b70704fe62' }, h("div", { key: '222c4b451d163d07c9a5ac6f2acbea55af9e0147', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '9dc194a3e5bd4a4bd8b1c1af9ef89aa1969ae58e', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '3cbbdddbc3260c14e9fb2688b351f9af9318cc14', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'dfbb468331754172ef76a16cc1c5447f20b90370', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '2e4e09a62616dc611b744a412a0fe3a04e67e8f8', id: "error", class: "error" }, this.errorMessage), h("div", { key: '77d200c672686371c2e5fe082857d1721bebe3aa', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '08259e7644e9f685b721db5cd7c3614db286e0ef', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'fbb39147a7cbca48d4f5e057833b387ad4d1e4b9', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }