@watermarkinsights/ripple 5.4.0-1 → 5.5.0-0

package/dist/cjs/{global-2fa8e5c2.js → global-5c18b1c4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const version = "5.4.0-1";
+const version = "5.5.0-0";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
-require('./global-2fa8e5c2.js');
+require('./global-5c18b1c4.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -344,10 +344,7 @@ const PrivCalendar = class {
                     //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus
                     const activeEl = (document.activeElement.shadowRoot || document).activeElement;
                     if (activeEl.classList.contains("header-btn")) {
-                        const monthId = `#month-${this._focus.month.asInt()}`;
-                        const monthToFocus = this.el.querySelector(monthId);
-                        monthToFocus.tabIndex = 0;
-                        monthToFocus.focus();
+                        this.focusCell();
                         break;
                     }
                     this.monthButtonFocus.increase(3);
@@ -455,14 +452,21 @@ const PrivCalendar = class {
             if (dayToFocus > maxDays) {
                 this._focus.day.set(maxDays);
             }
-            const cellToFocus = this.getCell(this.focusDate);
-            if (cellToFocus) {
-                cellToFocus.tabIndex = 0;
-                cellToFocus.focus();
-            }
             if (this.view == "day") {
+                const cellToFocus = this.getCell(this.focusDate);
+                if (cellToFocus) {
+                    cellToFocus.tabIndex = 0;
+                    cellToFocus.focus();
+                }
                 this.cellHovered.emit(this.focusDate);
             }
+            else {
+                const monthToFocus = this.el.querySelector(`#month-${this._focus.month.asInt()}`);
+                if (monthToFocus) {
+                    monthToFocus.tabIndex = 0;
+                    monthToFocus.focus();
+                }
+            }
         });
     }
     toggleBusyAttribute(state) {

package/dist/cjs/priv-navigator-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
 
-const privNavigatorItemCss = ":host{list-style:none;border-bottom:1px solid var(--wmcolor-navigator-item-border);width:100%;display:block;cursor:pointer}:host .navoption{color:var(--wmcolor-navigator-item-text);padding:0.9375rem 1.25rem;background:var(--wmcolor-navigator-item-background);font-size:0.875rem}:host .navoption.selected,:host .navoption:hover{background:var(--wmcolor-navigator-item-background-hover)}:host .navoption.focused:not(.selected){background:var(--wmcolor-navigator-item-background-focus);opacity:1}";
+const privNavigatorItemCss = ":host{list-style:none;border-bottom:1px solid var(--wmcolor-navigator-item-border);width:100%;display:block;cursor:pointer}:host .navoption{color:var(--wmcolor-navigator-item-text);padding:0.9375rem 1.25rem;background:var(--wmcolor-navigator-item-background);font-size:0.875rem}:host .navoption.selected{background:var(--wmcolor-navigator-item-background-selected)}:host .navoption.focused,:host .navoption:hover{background:var(--wmcolor-navigator-item-background-focus);opacity:1}";
 
 const PrivNavigatorItem = class {
     constructor(hostRef) {

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e86c28b6.js');
-require('./global-2fa8e5c2.js');
+require('./global-5c18b1c4.js');
 
 /*
  Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com

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

@@ -440,7 +440,11 @@ const DateRange = class {
         }
     }
     render() {
-        return (index.h(index.Host, { "aria-busy": "false" }, index.h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, index.h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, index.h("div", { class: "label-wrapper", id: "start-label-wrapper" }, index.h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*")))), index.h("div", { class: "label-wrapper", id: "end-label-wrapper" }, index.h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*")))), index.h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), index.h("div", { id: "hyphen" }, "\u00A0-\u00A0"), index.h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), index.h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (index.h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { class: "calendar", title: functions.intl.formatMessage({
+        return (index.h(index.Host, { "aria-busy": "false" }, index.h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, index.h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, index.h("div", { class: "label-wrapper", id: "start-label-wrapper" }, index.h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*")))), index.h("div", { class: "label-wrapper", id: "end-label-wrapper" }, index.h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*")))), index.h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), index.h("div", { id: "hyphen" }, "\u00A0-\u00A0"), index.h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), index.h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (index.h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": functions.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" }, index.h("span", { class: "calendar", title: functions.intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",

package/dist/cjs/wm-datepicker.cjs.entry.js

@@ -224,7 +224,11 @@ const DatePicker = class {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (index.h(index.Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", null, index.h("div", { class: "single-wrapper input" }, index.h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { class: "container", id: "wm-container" }, index.h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { class: "calendar", title: functions.intl.formatMessage({
+        return (index.h(index.Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", null, index.h("div", { class: "single-wrapper input" }, index.h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { class: "container", id: "wm-container" }, index.h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": functions.intl.formatMessage({
+                id: "date.selectDate",
+                defaultMessage: "Select date",
+                description: "Button text for screen readers.",
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { class: "calendar", title: functions.intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",

package/dist/cjs/wm-navigator.cjs.entry.js

@@ -16,7 +16,7 @@ const getRequest = async (url) => {
     }
 };
 
-const wmNavigatorCss = ":host{--wmcolor-navigator-background:var(--wmcolor-background);--wmcolor-navigator-header-background:var(--wmcolor-brand-dark);--wmcolor-navigator-header-text:var(--wmcolor-text-ondark);--wmcolor-navigator-item-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-navigator-item-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigator-item-background:var(--wmcolor-background);--wmcolor-navigator-item-border:var(--wmcolor-border);--wmcolor-navigator-item-text:var(--wmcolor-text);--wmcolor-navigator-user-background:var(--wmcolor-background-readonly);min-width:0;position:relative;display:inline-block}:host .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:var(--wmcolor-navigator-background);letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-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;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user{background:var(--wmcolor-navigator-user-background);padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p{margin:0}:host .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2{background:var(--wmcolor-navigator-header-background);color:var(--wmcolor-navigator-header-text);font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right{right:auto;left:20px}:host img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
+const wmNavigatorCss = ":host{--wmcolor-navigator-background:var(--wmcolor-background);--wmcolor-navigator-header-background:var(--wmcolor-brand-dark);--wmcolor-navigator-header-text:var(--wmcolor-text-ondark);--wmcolor-navigator-item-background-selected:var(--wmcolor-interactive-background-selected);--wmcolor-navigator-item-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-navigator-item-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigator-item-background:var(--wmcolor-background);--wmcolor-navigator-item-border:var(--wmcolor-border);--wmcolor-navigator-item-text:var(--wmcolor-text);--wmcolor-navigator-user-background:var(--wmcolor-background-readonly);min-width:0;position:relative;display:inline-block}:host .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:var(--wmcolor-navigator-background);letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-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;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user{background:var(--wmcolor-navigator-user-background);padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p{margin:0}:host .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2{background:var(--wmcolor-navigator-header-background);color:var(--wmcolor-navigator-header-text);font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right{right:auto;left:20px}:host img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
 
 const Navigator = class {
     constructor(hostRef) {
@@ -53,7 +53,7 @@ const Navigator = class {
             "vialivetext\\.com",
             "watermarkinsights\\.com",
         ];
-        whitelist.forEach(tld => {
+        whitelist.forEach((tld) => {
             const knownTLD = `^https:\/\/(.*\.)?${tld}(\/.*)?$`;
             if (!!url && url.match(knownTLD)) {
                 isSafe = true;
@@ -76,12 +76,8 @@ const Navigator = class {
                 this.email = response.email;
                 this.currentProductId = response.current_product_id;
                 this.parsedProducts = this.productKeysToCamelCase(response.products);
-                this.logoutUrl = this.logoutUrl
-                    ? this.logoutUrl
-                    : response.logout_url;
-                this.connectionName = this.connectionName
-                    ? this.connectionName
-                    : response.connection_name;
+                this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;
+                this.connectionName = this.connectionName ? this.connectionName : response.connection_name;
                 if (!!this.email && !!this.currentProductId) {
                     this.retrievedInfo = true;
                 }
@@ -176,8 +172,7 @@ const Navigator = class {
         if (this.wrapperEl) {
             const wrapperWidth = this.wrapperEl.clientWidth;
             const spaceLeft = this.el.getBoundingClientRect().left;
-            const spaceRight = document.documentElement.clientWidth -
-                this.el.getBoundingClientRect().right;
+            const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;
             this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
         }
         this.isOpen = true;
@@ -197,7 +192,8 @@ const Navigator = class {
         const newSelection = this.navigatorItems[this.itemIndexToFocus];
         newSelection.tabIndex = 0;
         newSelection.focused = true;
-        window.requestAnimationFrame(() => newSelection.focus());
+        // wait for animation to complete before sending focus to option
+        window.setTimeout(() => newSelection.focus(), 250);
     }
     unfocusItem(index) {
         const oldSelection = this.navigatorItems[index];
@@ -254,7 +250,9 @@ const Navigator = class {
             clickRedirect = this.setProductOnClick(product.id);
             if (!!name && !!icon) {
                 isSelected = this.currentProductId === product.id;
-                return (index.h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: clickRedirect, role: "option", "aria-label": name }, index.h("img", { src: icon, alt: name })));
+                return (index.h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
+                        isSelected ? this.closeMenu() : clickRedirect();
+                    }, role: "option", "aria-label": name, "aria-selected": isSelected ? "true" : "false" }, index.h("img", { src: icon, alt: name })));
             }
         });
     }
@@ -276,9 +274,7 @@ const Navigator = class {
             }
             else if (this.authType === 3) {
                 // products passed as prop, saml
-                const connName = this.connectionName
-                    ? `/?connection_name=${this.connectionName}`
-                    : "";
+                const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : "";
                 const url = product.samlLinkUrl;
                 if (this.isSafeUrl(url)) {
                     return () => (window.location.href = url + connName);
@@ -291,7 +287,7 @@ const Navigator = class {
         }
     }
     renderLogoutOption() {
-        return (index.h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option" }, index.h("span", { class: "logout" }, functions.intl.formatMessage({
+        return (index.h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option", "aria-selected": "false" }, index.h("span", { class: "logout" }, functions.intl.formatMessage({
             id: "navigator.logout",
             defaultMessage: "Log Out",
         }))));

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -331,10 +331,7 @@ export class PrivCalendar {
                     //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus
                     const activeEl = (document.activeElement.shadowRoot || document).activeElement;
                     if (activeEl.classList.contains("header-btn")) {
-                        const monthId = `#month-${this._focus.month.asInt()}`;
-                        const monthToFocus = this.el.querySelector(monthId);
-                        monthToFocus.tabIndex = 0;
-                        monthToFocus.focus();
+                        this.focusCell();
                         break;
                     }
                     this.monthButtonFocus.increase(3);
@@ -442,14 +439,21 @@ export class PrivCalendar {
             if (dayToFocus > maxDays) {
                 this._focus.day.set(maxDays);
             }
-            const cellToFocus = this.getCell(this.focusDate);
-            if (cellToFocus) {
-                cellToFocus.tabIndex = 0;
-                cellToFocus.focus();
-            }
             if (this.view == "day") {
+                const cellToFocus = this.getCell(this.focusDate);
+                if (cellToFocus) {
+                    cellToFocus.tabIndex = 0;
+                    cellToFocus.focus();
+                }
                 this.cellHovered.emit(this.focusDate);
             }
+            else {
+                const monthToFocus = this.el.querySelector(`#month-${this._focus.month.asInt()}`);
+                if (monthToFocus) {
+                    monthToFocus.tabIndex = 0;
+                    monthToFocus.focus();
+                }
+            }
         });
     }
     toggleBusyAttribute(state) {
@@ -802,6 +806,10 @@ export class PrivCalendar {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLTableCellElement": {
+                            "location": "global",
+                            "id": "global::HTMLTableCellElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -429,7 +429,11 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+                id: "date.selectRange",
+                defaultMessage: "Select range",
+                description: "Button text for screen readers.",
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",

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

@@ -214,7 +214,11 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+                id: "date.selectDate",
+                defaultMessage: "Select date",
+                description: "Button text for screen readers.",
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.css

@@ -42,10 +42,10 @@
   background: var(--wmcolor-navigator-item-background);
   font-size: 0.875rem;
 }
-:host .navoption.selected, :host .navoption:hover {
-  background: var(--wmcolor-navigator-item-background-hover);
+:host .navoption.selected {
+  background: var(--wmcolor-navigator-item-background-selected);
 }
-:host .navoption.focused:not(.selected) {
+:host .navoption.focused, :host .navoption:hover {
   background: var(--wmcolor-navigator-item-background-focus);
   opacity: 1;
 }

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

@@ -33,6 +33,7 @@
   --wmcolor-navigator-background: var(--wmcolor-background);
   --wmcolor-navigator-header-background: var(--wmcolor-brand-dark);
   --wmcolor-navigator-header-text: var(--wmcolor-text-ondark);
+  --wmcolor-navigator-item-background-selected: var(--wmcolor-interactive-background-selected);
   --wmcolor-navigator-item-background-focus: var(--wmcolor-interactive-background-focus);
   --wmcolor-navigator-item-background-hover: var(--wmcolor-interactive-background-hover);
   --wmcolor-navigator-item-background: var(--wmcolor-background);

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

@@ -1,6 +1,6 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getWmMode } from "../../global/interfaces";
-import { intl, snakeCaseToCamelCase, getNewIndexToFocus, } from "../../global/functions";
+import { intl, snakeCaseToCamelCase, getNewIndexToFocus } from "../../global/functions";
 import { getRequest } from "../../global/services/http-service";
 export class Navigator {
     constructor() {
@@ -35,7 +35,7 @@ export class Navigator {
             "vialivetext\\.com",
             "watermarkinsights\\.com",
         ];
-        whitelist.forEach(tld => {
+        whitelist.forEach((tld) => {
             const knownTLD = `^https:\/\/(.*\.)?${tld}(\/.*)?$`;
             if (!!url && url.match(knownTLD)) {
                 isSafe = true;
@@ -58,12 +58,8 @@ export class Navigator {
                 this.email = response.email;
                 this.currentProductId = response.current_product_id;
                 this.parsedProducts = this.productKeysToCamelCase(response.products);
-                this.logoutUrl = this.logoutUrl
-                    ? this.logoutUrl
-                    : response.logout_url;
-                this.connectionName = this.connectionName
-                    ? this.connectionName
-                    : response.connection_name;
+                this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;
+                this.connectionName = this.connectionName ? this.connectionName : response.connection_name;
                 if (!!this.email && !!this.currentProductId) {
                     this.retrievedInfo = true;
                 }
@@ -158,8 +154,7 @@ export class Navigator {
         if (this.wrapperEl) {
             const wrapperWidth = this.wrapperEl.clientWidth;
             const spaceLeft = this.el.getBoundingClientRect().left;
-            const spaceRight = document.documentElement.clientWidth -
-                this.el.getBoundingClientRect().right;
+            const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;
             this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
         }
         this.isOpen = true;
@@ -179,7 +174,8 @@ export class Navigator {
         const newSelection = this.navigatorItems[this.itemIndexToFocus];
         newSelection.tabIndex = 0;
         newSelection.focused = true;
-        window.requestAnimationFrame(() => newSelection.focus());
+        // wait for animation to complete before sending focus to option
+        window.setTimeout(() => newSelection.focus(), 250);
     }
     unfocusItem(index) {
         const oldSelection = this.navigatorItems[index];
@@ -236,7 +232,9 @@ export class Navigator {
             clickRedirect = this.setProductOnClick(product.id);
             if (!!name && !!icon) {
                 isSelected = this.currentProductId === product.id;
-                return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: clickRedirect, role: "option", "aria-label": name }, h("img", { src: icon, alt: name })));
+                return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
+                        isSelected ? this.closeMenu() : clickRedirect();
+                    }, role: "option", "aria-label": name, "aria-selected": isSelected ? "true" : "false" }, h("img", { src: icon, alt: name })));
             }
         });
     }
@@ -258,9 +256,7 @@ export class Navigator {
             }
             else if (this.authType === 3) {
                 // products passed as prop, saml
-                const connName = this.connectionName
-                    ? `/?connection_name=${this.connectionName}`
-                    : "";
+                const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : "";
                 const url = product.samlLinkUrl;
                 if (this.isSafeUrl(url)) {
                     return () => (window.location.href = url + connName);
@@ -273,7 +269,7 @@ export class Navigator {
         }
     }
     renderLogoutOption() {
-        return (h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option" }, h("span", { class: "logout" }, intl.formatMessage({
+        return (h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option", "aria-selected": "false" }, h("span", { class: "logout" }, intl.formatMessage({
             id: "navigator.logout",
             defaultMessage: "Log Out",
         }))));

package/dist/esm/{global-00f6ca22.js → global-931ac675.js}

@@ -1,4 +1,4 @@
-const version = "5.4.0-1";
+const version = "5.5.0-0";
 
 // 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-558b5a82.js';
 export { s as setNonce } from './index-558b5a82.js';
-import './global-00f6ca22.js';
+import './global-931ac675.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -340,10 +340,7 @@ const PrivCalendar = class {
                     //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus
                     const activeEl = (document.activeElement.shadowRoot || document).activeElement;
                     if (activeEl.classList.contains("header-btn")) {
-                        const monthId = `#month-${this._focus.month.asInt()}`;
-                        const monthToFocus = this.el.querySelector(monthId);
-                        monthToFocus.tabIndex = 0;
-                        monthToFocus.focus();
+                        this.focusCell();
                         break;
                     }
                     this.monthButtonFocus.increase(3);
@@ -451,14 +448,21 @@ const PrivCalendar = class {
             if (dayToFocus > maxDays) {
                 this._focus.day.set(maxDays);
             }
-            const cellToFocus = this.getCell(this.focusDate);
-            if (cellToFocus) {
-                cellToFocus.tabIndex = 0;
-                cellToFocus.focus();
-            }
             if (this.view == "day") {
+                const cellToFocus = this.getCell(this.focusDate);
+                if (cellToFocus) {
+                    cellToFocus.tabIndex = 0;
+                    cellToFocus.focus();
+                }
                 this.cellHovered.emit(this.focusDate);
             }
+            else {
+                const monthToFocus = this.el.querySelector(`#month-${this._focus.month.asInt()}`);
+                if (monthToFocus) {
+                    monthToFocus.tabIndex = 0;
+                    monthToFocus.focus();
+                }
+            }
         });
     }
     toggleBusyAttribute(state) {

package/dist/esm/priv-navigator-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-558b5a82.js';
 
-const privNavigatorItemCss = ":host{list-style:none;border-bottom:1px solid var(--wmcolor-navigator-item-border);width:100%;display:block;cursor:pointer}:host .navoption{color:var(--wmcolor-navigator-item-text);padding:0.9375rem 1.25rem;background:var(--wmcolor-navigator-item-background);font-size:0.875rem}:host .navoption.selected,:host .navoption:hover{background:var(--wmcolor-navigator-item-background-hover)}:host .navoption.focused:not(.selected){background:var(--wmcolor-navigator-item-background-focus);opacity:1}";
+const privNavigatorItemCss = ":host{list-style:none;border-bottom:1px solid var(--wmcolor-navigator-item-border);width:100%;display:block;cursor:pointer}:host .navoption{color:var(--wmcolor-navigator-item-text);padding:0.9375rem 1.25rem;background:var(--wmcolor-navigator-item-background);font-size:0.875rem}:host .navoption.selected{background:var(--wmcolor-navigator-item-background-selected)}:host .navoption.focused,:host .navoption:hover{background:var(--wmcolor-navigator-item-background-focus);opacity:1}";
 
 const PrivNavigatorItem = class {
     constructor(hostRef) {

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-558b5a82.js';
 export { s as setNonce } from './index-558b5a82.js';
-import './global-00f6ca22.js';
+import './global-931ac675.js';
 
 /*
  Stencil Client Patch Browser v4.8.2 | MIT Licensed | https://stenciljs.com

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

@@ -436,7 +436,11 @@ const DateRange = class {
         }
     }
     render() {
-        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+                id: "date.selectRange",
+                defaultMessage: "Select range",
+                description: "Button text for screen readers.",
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",

package/dist/esm/wm-datepicker.entry.js

@@ -220,7 +220,11 @@ const DatePicker = class {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+                id: "date.selectDate",
+                defaultMessage: "Select date",
+                description: "Button text for screen readers.",
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",