@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.0

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

@@ -187,7 +187,7 @@ export class PrivCalendar {
                 }, onMouseOver: () => this.cellHovered.emit(date), "data-month": dateFind.month.asString(date), "data-year": dateFind.year.asString(date), onBlur: (ev) => ev.stopPropagation(), tabIndex: isFocused ? 0 : -1 }, dayOfDate));
         };
         this.disabled = false;
-        this.view = "day";
+        this.view = "month";
         this.focusDate = this.today;
         this.startDate = undefined;
         this.endDate = undefined;
@@ -229,7 +229,7 @@ export class PrivCalendar {
         this.setCalType();
     }
     handleFocusDate(newVal, oldVal) {
-        if (this.view === "day") {
+        if (this.view === "month") {
             const oldCell = this.getCell(oldVal);
             if (oldCell)
                 oldCell.tabIndex = -1;
@@ -272,7 +272,7 @@ export class PrivCalendar {
                 break;
             case "PageUp":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.month.decrease(1);
                     this.focusCell();
                 }
@@ -282,7 +282,7 @@ export class PrivCalendar {
                 break;
             case "PageDown":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.month.increase(1);
                     this.focusCell();
                 }
@@ -292,7 +292,7 @@ export class PrivCalendar {
                 break;
             case "Home":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.day.set(1);
                     this.focusCell();
                 }
@@ -302,7 +302,7 @@ export class PrivCalendar {
                 break;
             case "End":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.day.set(-1);
                     this.focusCell();
                 }
@@ -313,7 +313,7 @@ export class PrivCalendar {
             case "ArrowLeft":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.decrease(1);
                         this.focusCell();
                     }
@@ -325,7 +325,7 @@ export class PrivCalendar {
             case "ArrowRight":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.increase(1);
                         this.focusCell();
                     }
@@ -337,7 +337,7 @@ export class PrivCalendar {
             case "ArrowUp":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.decrease(7);
                         this.focusCell();
                     }
@@ -353,11 +353,11 @@ export class PrivCalendar {
                 }
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.increase(7);
                         this.focusCell();
                     }
-                    else if (this.view === "month") {
+                    else if (this.view === "year") {
                         this.monthButtonFocus.increase(3);
                     }
                 }
@@ -464,7 +464,7 @@ export class PrivCalendar {
             if (dayToFocus > maxDays) {
                 this._focus.day.set(maxDays);
             }
-            if (this.view == "day") {
+            if (this.view == "month") {
                 const cellToFocus = this.getCell(this.focusDate);
                 if (cellToFocus) {
                     cellToFocus.tabIndex = 0;
@@ -497,26 +497,26 @@ export class PrivCalendar {
     renderMonth(month, index) {
         return (h("button", { id: `month-${index + 1}-${this.uid}`, class: `month ${this._focus.month.asInt() === index + 1 ? "selected focused" : ""}`, role: "gridcell", tabindex: index + 1 === this._focus.month.asInt() ? 0 : -1, onBlur: (ev) => ev.stopPropagation(), onClick: () => {
                 this._focus.month.set(index + 1);
-                this.view = "day";
+                this.view = "month";
                 this.focusCell();
             } }, month));
     }
     renderHeader() {
-        const previousButtonLabel = this.view == "day" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
-        const nextButtonLabel = this.view == "day" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
+        const previousButtonLabel = this.view == "month" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
+        const nextButtonLabel = this.view == "month" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
         return (h("div", { class: "calendar-header" }, h("button", { onClick: () => {
-                if (this.view == "day") {
+                if (this.view == "month") {
                     this._focus.month.decrease(1);
                 }
-                else if (this.view == "month") {
+                else if (this.view == "year") {
                     this._focus.year.decrease(1);
                 }
                 this.announceMonthYear();
             }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("bottom", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom", this.prevBtnEl, previousButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-previous" })), h("span", { class: "header-title" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("button", { onClick: () => {
-                if (this.view == "day") {
+                if (this.view == "month") {
                     this._focus.month.increase(1);
                 }
-                else if (this.view == "month") {
+                else if (this.view == "year") {
                     this._focus.year.increase(1);
                 }
                 this.announceMonthYear();
@@ -527,7 +527,7 @@ export class PrivCalendar {
                 id: "date.monthView",
                 defaultMessage: "Month view",
                 description: "Calendar button to change to month view",
-            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "day", onClick: () => (this.view = "day") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
             id: "date.month",
             defaultMessage: "Month",
             description: "Calendar button to change to month view",
@@ -535,28 +535,28 @@ export class PrivCalendar {
                 id: "date.yearView",
                 defaultMessage: "Year view",
                 description: "Calendar button to change to year view",
-            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "year", onClick: () => (this.view = "year") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
             id: "date.year",
             defaultMessage: "Year",
             description: "Calendar button to change to year view",
         })))));
     }
-    renderDayView() {
+    renderMonthView() {
         const dates = this.getCalendarDates(this.focusDate);
         // the start and end date, set in either of the calendars
         const eitherStart = this.startDate || (this.otherCalEl && this.otherCalEl.startDate);
         const eitherEnd = this.endDate || (this.otherCalEl && this.otherCalEl.endDate);
         return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[0] }, intl.formatMessage({ id: "date.su", defaultMessage: "Su", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, intl.formatMessage({ id: "date.mo", defaultMessage: "Mo", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, intl.formatMessage({ id: "date.tu", defaultMessage: "Tu", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, intl.formatMessage({ id: "date.we", defaultMessage: "We", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, intl.formatMessage({ id: "date.th", defaultMessage: "Th", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, intl.formatMessage({ id: "date.fr", defaultMessage: "Fr", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, intl.formatMessage({ id: "date.sa", defaultMessage: "Sa", description: "Abbreviated day of the week" })))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
     }
-    renderMonthView() {
-        return (h("div", { class: "month-view" }, 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))))));
+    renderYearView() {
+        return (h("div", { class: "year-view" }, 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: '0d795a3a89b285d1e9b0bef0b68685e77eac947e', onMouseOut: (ev) => {
+        return (h(Host, { key: 'f0972636a9943cb1b3c6b39f6ba9022359570d88', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'f60032e3d2b7b12df707a83f6963360496535e33', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '67b0bbd84a5ce5922937fcd28e554b70cc963c01', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'b5adb35334738a308afd0d7e8ad3afa96ed8b493', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'c4e1b4f973c7b6d3b70174f7086e337d9220716d', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "month" ? this.renderMonthView() : this.renderYearView()), h("div", { key: 'd6738a953df9cd2f713f25ed53b0103b080610bf', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'cc9105d574a254bf2ef986b576bb6028b9e960cc', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {
@@ -593,8 +593,8 @@ export class PrivCalendar {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "\"month\" | \"year\"",
+                    "resolved": "\"month\" | \"year\"",
                     "references": {}
                 },
                 "required": false,
@@ -605,7 +605,7 @@ export class PrivCalendar {
                 },
                 "attribute": "view",
                 "reflect": false,
-                "defaultValue": "\"day\""
+                "defaultValue": "\"month\""
             },
             "focusDate": {
                 "type": "string",

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

@@ -276,8 +276,8 @@ export class DateRange {
             this.endCalEl.startDate = undefined;
             this.endCalEl.endDate = undefined;
             this.endCalEl.hoverDate = undefined;
-            this.startCalEl.view = "day";
-            this.endCalEl.view = "day";
+            this.startCalEl.view = "month";
+            this.endCalEl.view = "month";
             this.isExpanded = false;
         }
     }
@@ -330,7 +330,7 @@ export class DateRange {
             const oldYear = dateFind.year.asInt(this.oldFocusVal);
             const newMonth = dateFind.month.asInt(newFocusVal);
             const oldMonth = dateFind.month.asInt(this.oldFocusVal);
-            if (cal.view === "day") {
+            if (cal.view === "month") {
                 if (newYear != oldYear || newMonth != oldMonth) {
                     this.liveRegionEl.innerHTML = intl.formatMessage({
                         id: "date.viewingMonth",
@@ -529,25 +529,25 @@ export class DateRange {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '9840d0cb5b3aff858d939fbe2d67dc1d51535c05', "aria-busy": "false" }, h("div", { key: '71e3eb8f71812140abc538cbfec3111c2e2b9cba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '094295f1471f1ba0eaea5c65617447efc5dca770', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '00bcfac555be41fe8b2f885e2a0335c8d41efd28', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '1f23a2bb3163e550f9929be4dbd6335bf5bf6579', id: "startlabel", htmlFor: "start-date-input", class: "label" }, this.labelStart, this.requiredField && (h("span", { key: '40dc9394b28b616e1dbfdb028f504474e8576fce', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '75addeddb3c54576c90fb9c6c662e525934f6166', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '3015302e413b2bd033dffb9edacc1ecb7c06fb68', id: "endlabel", htmlFor: "end-date-input", class: "label" }, this.labelEnd, this.requiredField && (h("span", { key: '6f27560f7730e1efc19c8f9f7b1845f7a4fc5489', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'a350aea0fa321f076f7b0258e6717b349f551813', 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": "date-format-hint error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'f3d74eae497160213ac05d99467ab254d30167b1', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '4e77331018a0ce06846adae9ce01f0acd556dcd8', 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": "date-format-hint error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '47f502431bd898d5baab11e483990585e49b648e', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: 'b7dc42e4733418c6da7ecb5eae5a896ad0d92f4d', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'd9425370610f8a2b7c45fe6f292c3956a84ff9bd', "aria-busy": "false" }, h("div", { key: 'db1104312e47a8c5f83d69a23c248ed4707abf36', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '4e41eab3d58c2fca4545102e0f56b990af715a37', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, h("div", { key: '1a8367a94d56d6478304c17501835e02a83c8a89', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '95ca9b13badd5de4bf3256950e266c649ec96e81', id: "startlabel", htmlFor: "start-date-input", class: "label" }, this.labelStart, this.requiredField && (h("span", { key: '735e651558ca88cd0ef48da443de1141a3a3b2be', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '88f0a8721ecff89466b5d4dcc44d35ad67f8f0cb', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: 'f4bfa9b4e39cb75ca0af56ce75291dc838715964', id: "endlabel", htmlFor: "end-date-input", class: "label" }, this.labelEnd, this.requiredField && (h("span", { key: 'cbe940d9ed0b9ee6461b22017440a2640cef07ba', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: 'fdbc07ae0431e0c6205962c6ccfba9ebc65f1231', 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": "date-format-hint error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd5bdc52b7caf0e25b012f0fed4472917e2c637df', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '99aa505aabd9950e8b8a9d855d2c4ea697f5c8af', 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": "date-format-hint error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'a3434b13ad539bed778bc337ed04adc30e9acc77', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (h("button", { key: '7b7beb9c5460609fe9cf5922b23d826c64b9f053', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '8fcd8c7cbaff39440838c15354de40ea79230dfd', class: "svg-icon svg-date" }), h("span", { key: '392288ecb5e6617395b306d9e7993ef41c9f27d2', class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: '7c04850bc3e4c29687f6875d1b77a6baa018fd50', class: "svg-icon svg-date" }), h("span", { key: '3abf1b41a3f3787c7e0f9573d092bbe5bbd55875', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), h("div", { key: 'a88e17a38bbee302551a7abc458f9a387afe1d89', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) })))), h("div", { key: '3f9fe602f2efc97f6cf42c32dab36b42562304b0', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '968c8f59c78dc1358295d5f5a7db69952f31da35', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: '73c5f5df127cb560aeaf7131ce4ba6e167857693', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: 'f3177d31c0bcf97d010e16ee4f8ee43568fd28b2', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: '278ae43445deae7239390b01f0a01c16f3fc0f17', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '2528c193f264b94886be679235595c69d081800c' }, h("div", { key: '4e9a81c12822d560cb0b949b2da38b6f26204c32', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '82603d1a7ed918904df6649f76549a41a644d2ed', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '41e4eae0f64600b15b3f56e5002a898f3d8ee571', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { key: '207a8f831fa0ff6a7068ac86ba467935ad8cbd5b', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { key: '05ed5b637ddaaf31658f3db71218098b8b251ae0', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { key: 'e2ccb7d837231b42b5464dca90ccbaa09f4484e5', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), h("div", { key: '4b8a0c9b7fceeb552ef3264203f875ec85bc9310' }, h("div", { key: '457fd174e68e80c707914c417b9def8e5be39920', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'c3d4cb97f2686296956975eb0ece2a8204584b8e', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '0c98b239ffa8a8f6f27a9eee4e302f8daddc4c89', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: 'fd5074de67b599f2773080314d82a260b8447113', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { key: '13e1dc0b81ffedda3b7f6316ee07d2dc9a8712b9', id: "error", class: "error" }, this.errorMessage), h("span", { key: '5b8d811a975b5dec9e0e9e2c81bd56d5360f178a', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: '0746adc5f997c314567c5f942de26216a449ce57', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: 'efdcc22aa520edec0a59ad6e76c16031d8077d67', id: "error", class: "error" }, this.errorMessage), h("span", { key: 'b91c95c15affe4885b41ccf088bb66b00ba881eb', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: 'c925b59da3ac2557e796c29ecb35c2218b221f7c', 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/datepickers/wm-datepicker.js

@@ -191,7 +191,7 @@ export class DatePicker {
             }
             this.fit = null;
             this.isExpanded = false;
-            this.calEl.view = "day";
+            this.calEl.view = "month";
         }
     }
     closePopup(returnFocus = false) {
@@ -329,25 +329,25 @@ export class DatePicker {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '1ae084fab8bf53b87d769a314f7e6173492d35bc', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ff4180135e424dfdf985819781117277925cfd4e', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '62df8d9f5634d50508a7a0f47d3d9d6f3d0ad16f', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '3430b1340a0ba7355d4dc22a5bd02a800ffafa5f', id: "datepickerLabel", htmlFor: "date-input", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '625126eee314eb1ac24f82e2a7bc0e48abe8ad5d', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '39a8bc38fa6aad0a5cafd5fb3af8880229918384' }, h("div", { key: '861923fb1569879e5d8a2f593c6023f295d57e5e', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: 'aa8bf537a6c1e1d50157107a0392b90e984e6ca6', 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": "date-format-hint error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '7c26eb7e1a11ea1ee314ccbe9e1855f5cdd3b5ec', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '734718b3ee64ab44fcf44f0ff34f2985f57ccf66', disabled: this.disabled, "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'a6bd8346b4de553102719cd281b9dc9413581aae', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'eaaf09c6388ac561f612af41cf0b3502b04094b0', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '4202ea43a96fb7c3b67d4454a3637bf616e332cd', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '42f8526f8fdb0028e24c514d42091c3fbf15ab60', id: "datepickerLabel", htmlFor: "date-input", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '88c138a04cc78bac4171fc6458ad9b00778bf490', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'de2d78696965e3a10ac3facbeca4a8b473245523' }, h("div", { key: '9039a74286b4aa7f1491c02eaab23b321a2aaa45', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, h("input", { key: '944723e15f67dff099ac5c1f6f03263594300435', 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": "date-format-hint error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '80ef67580f83dea80bcfc0d57391663e2727d33a', class: "container", id: "wm-container" }, this.canOpen && (h("button", { key: '730d2b56439354ce6232dc18d12c38bbc6790ed2', disabled: this.disabled, "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", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'eea61f1c8f02f89cca36f8d51f1028f1bb1f5801', class: "svg-icon svg-date" }), h("span", { key: '7910f167d9343f53b8d1df37845179d3580483f1', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, h("span", { key: 'd9f4782bbaeea7dbb64c0215e835611f0eecd54a', class: "svg-icon svg-date" }), h("span", { key: '2c960fb463c77b71d213c864423869010996ccca', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) }))), h("div", { key: '9c82f780494e23aefa7e188e060c8243ef9d6e01', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
+            }) }))), h("div", { key: 'b8d9fc86ac97acc442ffd6f371470b883a75f6ea', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
             // @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
-            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: 'dbdff9693acf1c80fc815d9ad734b009120d634e', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '6db36aebafb43d5a9fef8a108921b0a7baa5ae6b', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '8b373c91819aedd18bd23086d286ba8409daa932', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'f77269cd2e7bce953622c574e9541eded807f708', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '0d5de891b42a3d0b4ac38efa02eb6323719d86a3', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            onToggle: (ev) => this.handleToggle(ev) }, h("div", { key: '9e18fa2cd6a00924d714f2fa943047d5f5c50d51', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: 'c7b713840961ab36cb158a28230278c92364efa1', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '64a58c7332b878d4b693a3eec5d07369b9fe43a3', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '1a6e1fc2010106fc59e8827df71a47f894d1fe0a', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '24b950499b627de0aa82893672a00596cca8362f', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '8044eaab6e1ed7b14164ecbab8adccd9cf10a8e1', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '59ab8ea5db5b823b74dfea8ed6fbcf6cf5665ae4', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: '84e8a07316eb505d1efb41426681c1c50fc57d84', id: "error", class: "error" }, this.errorMessage), h("span", { key: 'eaadadc2b5f4d7665573feff2cce7509e306b07d', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: 'dd22ed0f5451379701210d29c460d832c388ac0d', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '2b1cae481b68914f2b728080b3ca9efd44c7acde', id: "error", class: "error" }, this.errorMessage), h("span", { key: 'e9d5b6752fcff1f9352df2a7886ab1dbb14a3e5b', id: "date-format-hint", class: "sr-only" }, this.dateFormat), h("div", { key: '59c04dc077de5e9ac8da0ec7f03593778802260f', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -237,7 +237,7 @@ export class Navigator {
             name = product.name;
             icon = product.iconUrl;
             clickRedirect = this.setProductOnClick(product.id);
-            if (!!name && !!icon) {
+            if (!!name && !!icon && this.isSafeUrl(icon)) {
                 isSelected = this.currentProductId === product.id;
                 return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
                         isSelected ? this.closeMenu() : clickRedirect();

package/dist/collection/global/services/__mocks__/http-service.js

@@ -79,7 +79,7 @@ const navigatorResponse = {
         },
         {
             description: "something with an id containing admin",
-            iconUrl: "not.important",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/platform.svg",
             id: "banana_admin_shoe",
             linkUrl: "irrelevant",
             name: "Platform Admin",

package/dist/esm/{app-globals-0d90343d.js → app-globals-fbe51289.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.30.0";
+const version = "5.31.0-alpha.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-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-0d90343d.js';
+import { g as globalScripts } from './app-globals-fbe51289.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;