@watermarkinsights/ripple 3.8.0 → 3.8.2

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

@@ -59,6 +59,9 @@ let Navigation = class {
   handleHamburgerClicked() {
     this.open = !this.open;
   }
+  handleClickOnItem() {
+    this.open = false;
+  }
   handleStateChange() {
     if (this.isCollapsible) {
       this.wmNavigationStateChanged.emit();
@@ -124,7 +127,7 @@ let Navigation = class {
 };
 Navigation.style = wmNavigationCss;
 
-const wmNavigationHamburgerCss = ":host{width:3.75rem;height:3.75rem}button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{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:\"\\f35c\";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){button{display:initial}}";
+const wmNavigationHamburgerCss = "button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{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:\"\\f35c\";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}";
 
 let NavigationHamburger = class {
   constructor(hostRef) {
@@ -209,6 +212,7 @@ const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-dir
 let NavigationItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.wmNavigationItemClicked = index.createEvent(this, "wmNavigationItemClicked", 7);
     this.isTabbing = false;
   }
   toggleTabbingOn() {
@@ -226,7 +230,7 @@ let NavigationItem = class {
     }
   }
   render() {
-    return (index.h(index.Host, { role: "listitem" }, index.h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href }, index.h("div", { class: "icon", "aria-hidden": "true" }, index.h("slot", null)), index.h("div", { class: "text" }, this.text))));
+    return (index.h(index.Host, { role: "listitem" }, index.h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { class: "icon", "aria-hidden": "true" }, index.h("slot", null)), index.h("div", { class: "text" }, this.text))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-network-uploader.cjs.entry.js

@@ -362,7 +362,7 @@ let NetworkUploader = class {
       // then add an even listener to force a click event when Enter key is pressed
       this.inputEl &&
       this.inputEl.addEventListener("keydown", (ev) => {
-        if (this.inputEl && ev.keyCode === 13) {
+        if (this.inputEl && ev.key === "Enter") {
           this.inputEl.click();
         }
       });

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

@@ -30,48 +30,40 @@ let Option = class {
     return (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.multiple;
   }
   handleKeydown(ev) {
-    switch (ev.keyCode) {
-      // Arrow Up
-      case 38:
+    switch (ev.key) {
+      case "ArrowUp":
         ev.preventDefault();
         this.wmKeyUpPressed.emit();
         break;
-      // Arrow Down
-      case 40:
+      case "ArrowDown":
         ev.preventDefault();
         this.wmKeyDownPressed.emit(this.el);
         break;
-      // Enter
-      case 13:
+      case "Enter":
         ev.preventDefault();
         if (!this.disabled) {
           this.el.click();
           this.wmEnterKeyPressed.emit(this.el);
         }
         break;
-      // Space
-      case 32:
+      case " ":
         ev.preventDefault();
         this.el.click();
         break;
-      // Escape
-      case 27:
+      case "Escape":
         ev.preventDefault();
         ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
         this.wmEscKeyPressed.emit();
         break;
-      // Home
-      case 36:
+      case "Home":
         ev.preventDefault();
         this.wmHomeKeyPressed.emit();
         break;
-      // End
-      case 35:
+      case "End":
         ev.preventDefault();
         this.wmEndKeyPressed.emit();
         break;
-      // Tab
-      case 9:
+      case "Tab":
         this.wmTabKeyPressed.emit();
         break;
       default:
@@ -237,16 +229,14 @@ let Select = class {
     }
   }
   handleKey(ev) {
-    switch (ev.keyCode) {
-      // Arrow down
-      case 40:
+    switch (ev.key) {
+      case "ArrowDown":
         if (this.isExpanded === false) {
           ev.preventDefault();
           this.open("next");
         }
         break;
-      // Arrow up
-      case 38:
+      case "ArrowUp":
         if (this.isExpanded === false) {
           ev.preventDefault();
           this.open("previous");

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

@@ -61,7 +61,7 @@ let Snackbar = class {
     this.newNotification = false;
   }
   checkForTabbing(ev) {
-    if (ev.keyCode === 9) {
+    if (ev.key === "Tab") {
       this.toggleTabbingOn();
     }
   }
@@ -151,7 +151,7 @@ let Snackbar = class {
   renderSnackbars() {
     return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + this.newWindowMessage : ""}`, tabindex: 0, onClick: () => {
         this.snackLinkClicked(notification);
-      }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, index.h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+      }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, index.h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
   }
   renderLiveRegion() {
     const latestNotification = this.parsedNotifications[0];

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

@@ -271,7 +271,7 @@ let Uploader = class {
       // then add an even listener to force a click event when Enter key is pressed
       this.inputEl &&
       this.inputEl.addEventListener("keydown", (ev) => {
-        if (this.inputEl && ev.keyCode === 13) {
+        if (this.inputEl && ev.key === "Enter") {
           this.inputEl.click();
         }
       });

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

@@ -123,26 +123,23 @@ export class Chart {
     this.isTabbing = false;
   }
   handleKeydown(ev) {
-    switch (ev.keyCode) {
-      // arrow up / left
-      case 37:
-      case 38:
+    switch (ev.key) {
+      case "ArrowUp":
+      case "ArrowLeft":
         ev.preventDefault();
         this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
         this.focusPrevious();
         break;
-      // arrow right / down
-      case 39:
-      case 40:
+      case "ArrowRight":
+      case "ArrowDown":
         ev.preventDefault();
         this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key
         this.focusNext();
         break;
-      // tab
-      case 9:
+      case "Tab":
         this.exitChart();
         break;
-      case 27:
+      case "Escape":
         this.popoverEl.open = false;
         break;
     }

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

@@ -112,47 +112,40 @@ export class PrivDatepicker {
   handleKey(ev) {
     this.prevClicked = false;
     this.nextClicked = false;
-    switch (ev.keyCode) {
-      // Enter
-      case 13:
+    switch (ev.key) {
+      case "Enter":
         ev.preventDefault();
         //Clunky exception for blur validation. Remove when blur reworked.
         !ev.target.id.includes("popup-title") && ev.target.click();
         break;
-      // Escape
-      case 27:
+      case "Escape":
         ev.preventDefault();
         if (this.isExpanded) {
           ev.stopPropagation(); // prevents closing of parent modal
-          this.closePopup();
+          this.closePopup(true);
         }
         break;
-      // Page Up
-      case 33:
+      case "PageUp":
         ev.preventDefault();
         this.backOneMonth();
         break;
-      // Page Down
-      case 34:
+      case "PageDown":
         ev.preventDefault();
         this.forwardOneMonth();
         break;
-      // Home
-      case 36:
+      case "Home":
         ev.preventDefault();
         this.unfocusCell();
         this.dayInFocus = 1;
         forceUpdate(this.el);
         break;
-      // End
-      case 35:
+      case "End":
         ev.preventDefault();
         this.unfocusCell();
         this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);
         forceUpdate(this.el);
         break;
-      //left
-      case 37:
+      case "ArrowLeft":
         ev.preventDefault();
         if (this.view === "day") {
           this.unfocusCell();
@@ -176,8 +169,7 @@ export class PrivDatepicker {
           }
         }
         break;
-      //right
-      case 39:
+      case "ArrowRight":
         ev.preventDefault();
         if (this.view === "day") {
           this.unfocusCell();
@@ -201,8 +193,7 @@ export class PrivDatepicker {
           }
         }
         break;
-      //up
-      case 38:
+      case "ArrowUp":
         ev.preventDefault();
         if (this.view === "day") {
           this.unfocusCell();
@@ -227,8 +218,7 @@ export class PrivDatepicker {
           }
         }
         break;
-      //down
-      case 40:
+      case "ArrowDown":
         ev.preventDefault();
         if (!this.isExpanded) {
           this.openPopup();
@@ -297,24 +287,52 @@ export class PrivDatepicker {
       this.popupBlurred.emit({ relatedTarget: ev.target });
     }
   }
-  setDateValuesForView() {
-    this.selectedYear = this.date.getUTCFullYear();
-    this.selectedMonth = this.date.getUTCMonth() + 1;
-    this.selectedDay = this.date.getUTCDate();
-    this.monthInFocus = this.selectedMonth;
-    this.yearInFocus = this.selectedYear;
-    this.dayInFocus = this.selectedDay;
-    this.monthNumInFocus = this.selectedMonth - 1;
+  componentDidUpdate() {
+    this.handleSelectedDate();
+    if (this.isExpanded) {
+      this.prevClicked
+        ? this.prevButton.focus()
+        : this.nextClicked
+          ? this.nextButton.focus()
+          : this.view === "day"
+            ? this.focusCell()
+            : this.focusMonth();
+    }
+  }
+  componentDidLoad() {
+    this.handleSelectedDate();
+    this.setDateValuesForView();
+  }
+  zeroPad(value, length) {
+    if (!String.prototype.padStart) {
+      String.prototype.padStart = function padStart(targetLength, padString) {
+        targetLength = targetLength - this.length;
+        if (targetLength > padString.length) {
+          padString += padString.repeat(targetLength / padString.length);
+        }
+        return padString.slice(0, targetLength) + String(this);
+      };
+    }
+    return `${value.toString()}`.padStart(length, "0");
+  }
+  removeZeroes(date) {
+    return +date < 10 ? +date.slice(1) : +date;
+  }
+  isDateToday(date) {
+    const today = new Date();
+    const todayDateArray = [
+      today.getFullYear().toString(),
+      (today.getMonth() + 1).toString(),
+      today.getDate().toString(),
+    ];
+    //Compare today's date to date and return true if they match
+    return todayDateArray.reduce((result, val, index) => result && this.removeZeroes(date[index]).toString() === val, true);
   }
   togglePopup() {
     this.isExpanded ? this.closePopup() : this.openPopup();
     this.buttonClicked = true;
   }
-  updateLiveRegion(text) {
-    let liveRegion = this.el.querySelector("#live-region");
-    liveRegion.innerHTML = text;
-  }
-  closePopup() {
+  closePopup(returnFocus = false) {
     this.isExpanded = false;
     this.popupEl.classList.remove("open");
     window.setTimeout(() => {
@@ -329,14 +347,9 @@ export class PrivDatepicker {
     this.yearInFocus = this.selectedYear;
     this.dayInFocus = this.selectedDay;
     this.changeView("day");
-    window.requestAnimationFrame(() => {
-      // For instances where the app is checking for errors in the date on blur
-      // trigger blur, but keep focus on button
-      if (this.isTabbing) {
-        this.popupClosed.emit();
-        this.buttonEl.focus();
-      }
-    });
+    if (returnFocus) {
+      this.buttonEl.focus();
+    }
   }
   openPopup() {
     this.panelPosition();
@@ -350,42 +363,11 @@ export class PrivDatepicker {
     this.isExpanded = true;
     this.focusCell();
   }
-  panelPosition() {
-    // getting a ref to the input el (in datepicker.tsx)
-    let host = document.getElementById(this.parentId);
-    const labelHeight = host.shadowRoot.querySelector(".label-wrapper").clientHeight;
-    this.openUp = shouldOpenUp(host, this.popupEl, labelHeight);
-    if (hasRoomRight(host, 336)) {
-      this.popupEl.style.left = "0";
-      this.popupEl.style.right = "auto";
-    }
-    else {
-      this.popupEl.style.right = "0";
-      this.popupEl.style.left = "auto";
-    }
-  }
-  changeView(newView) {
-    this.view = newView;
-    //Ensure month view always opens to the month last visited in date view
-    this.monthNumInFocus = this.monthInFocus - 1;
-  }
   getMonthDays(month, year) {
     const months30 = [4, 6, 9, 11];
     const leapYear = year % 4 === 0;
     return month === 2 ? (leapYear ? 29 : 28) : months30.includes(month) ? 30 : 31;
   }
-  zeroPad(value, length) {
-    if (!String.prototype.padStart) {
-      String.prototype.padStart = function padStart(targetLength, padString) {
-        targetLength = targetLength - this.length;
-        if (targetLength > padString.length) {
-          padString += padString.repeat(targetLength / padString.length);
-        }
-        return padString.slice(0, targetLength) + String(this);
-      };
-    }
-    return `${value.toString()}`.padStart(length, "0");
-  }
   // 1 => Sunday, 7 => Saturday
   getMonthFirstDay(month, year) {
     return +new Date(year, month - 1, 1, 12, 0, 0).getDay() + 1;
@@ -457,7 +439,7 @@ export class PrivDatepicker {
   handleTriggeredDate(el) {
     this.cellTriggered.emit(el);
     // change of input value will trigger the function updating selectedDate
-    this.closePopup();
+    this.closePopup(true);
   }
   handleSelectedDate() {
     //Remove old selection status
@@ -497,25 +479,6 @@ export class PrivDatepicker {
     monthToFocus.tabIndex = 0;
     monthToFocus.focus();
   }
-  removeZeroes(date) {
-    return +date < 10 ? +date.slice(1) : +date;
-  }
-  isDateToday(date) {
-    const today = new Date();
-    const todayDateArray = [
-      today.getFullYear().toString(),
-      (today.getMonth() + 1).toString(),
-      today.getDate().toString(),
-    ];
-    //Compare today's date to date and return true if they match
-    return todayDateArray.reduce((result, val, index) => result && this.removeZeroes(date[index]).toString() === val, true);
-  }
-  renderMonths(month, index) {
-    return (h("div", { id: `month-${index}-${this.parentId}`, class: `month ${this.selectedMonth - 1 === index ? "selected" : ""}`, role: "gridcell", tabindex: index + 1 === this.monthInFocus ? 0 : -1, onKeyDown: (ev) => this.trapFocusEnd(ev), onBlur: (ev) => ev.stopPropagation(), onClick: () => {
-        this.monthInFocus = index + 1;
-        this.changeView("day");
-      } }, month));
-  }
   trapFocusLeft(ev) {
     if (ev.shiftKey && ev.key === "Tab") {
       ev.preventDefault();
@@ -542,24 +505,46 @@ export class PrivDatepicker {
       this.focusMonth();
     }
   }
-  componentDidUpdate() {
-    this.handleSelectedDate();
-    if (this.isExpanded) {
-      this.prevClicked
-        ? this.prevButton.focus()
-        : this.nextClicked
-          ? this.nextButton.focus()
-          : this.view === "day"
-            ? this.focusCell()
-            : this.focusMonth();
+  toggleBusyAttribute(state) {
+    this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+  }
+  setDateValuesForView() {
+    this.selectedYear = this.date.getUTCFullYear();
+    this.selectedMonth = this.date.getUTCMonth() + 1;
+    this.selectedDay = this.date.getUTCDate();
+    this.monthInFocus = this.selectedMonth;
+    this.yearInFocus = this.selectedYear;
+    this.dayInFocus = this.selectedDay;
+    this.monthNumInFocus = this.selectedMonth - 1;
+  }
+  updateLiveRegion(text) {
+    let liveRegion = this.el.querySelector("#live-region");
+    liveRegion.innerHTML = text;
+  }
+  panelPosition() {
+    // getting a ref to the input el (in datepicker.tsx)
+    let host = document.getElementById(this.parentId);
+    const labelHeight = host.shadowRoot.querySelector(".label-wrapper").clientHeight;
+    this.openUp = shouldOpenUp(host, this.popupEl, labelHeight);
+    if (hasRoomRight(host, 336)) {
+      this.popupEl.style.left = "0";
+      this.popupEl.style.right = "auto";
+    }
+    else {
+      this.popupEl.style.right = "0";
+      this.popupEl.style.left = "auto";
     }
   }
-  componentDidLoad() {
-    this.handleSelectedDate();
-    this.setDateValuesForView();
+  changeView(newView) {
+    this.view = newView;
+    //Ensure month view always opens to the month last visited in date view
+    this.monthNumInFocus = this.monthInFocus - 1;
   }
-  toggleBusyAttribute(state) {
-    this.el.querySelector("#wm-container").setAttribute("aria-busy", state);
+  renderMonths(month, index) {
+    return (h("div", { id: `month-${index}-${this.parentId}`, class: `month ${this.selectedMonth - 1 === index ? "selected" : ""}`, role: "gridcell", tabindex: index + 1 === this.monthInFocus ? 0 : -1, onKeyDown: (ev) => this.trapFocusEnd(ev), onBlur: (ev) => ev.stopPropagation(), onClick: () => {
+        this.monthInFocus = index + 1;
+        this.changeView("day");
+      } }, month));
   }
   render() {
     const dates = this.getCalendarDates(this.monthInFocus, this.yearInFocus);
@@ -583,7 +568,7 @@ export class PrivDatepicker {
             }) },
             h("span", { class: "mdi" }, "\uF141")),
           h("div", { id: `popup-title-month-${this.parentId}`, class: "title-box", tabindex: 0, role: "button", onKeyDown: (ev) => {
-              if (ev.keyCode === 13 || ev.keyCode === 32) {
+              if (ev.key === "Enter" || ev.key === " ") {
                 ev.preventDefault();
                 this.changeView("month");
               }
@@ -672,7 +657,7 @@ export class PrivDatepicker {
             }), ref: (el) => (this.prevButton = el), class: "arw-btn" },
             h("span", { class: "mdi" }, "\uF141")),
           h("div", { id: `popup-title-year-${this.parentId}`, tabindex: 0, class: "title-box year", role: "button", onClick: this.changeView.bind(this, "day"), onKeyDown: (ev) => {
-              if (ev.keyCode === 13 || ev.keyCode === 32) {
+              if (ev.key === "Enter" || ev.key === " ") {
                 ev.preventDefault();
                 this.changeView("day");
               }

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

@@ -66,10 +66,6 @@ export class DatePicker {
   focusHandler() {
     this.dpWrapper.classList.add("focus");
   }
-  handlePopupClosed() {
-    this.el.tabIndex = 0;
-    this.el.focus();
-  }
   handlePopupBlurred(ev) {
     // emit blur event when leaving component from priv-datepicker
     if (ev.detail.relatedTarget !== this.el) {
@@ -259,9 +255,7 @@ export class DatePicker {
       id: "date.format",
       defaultMessage: "{dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}",
     }, { dateFormat: this.dateFormat.toLowerCase() });
-    return (h(Host, { id: this.uid, onBlur: () => {
-        this.el.removeAttribute("tabindex");
-      }, "aria-busy": "false", class: `${this.displayError ? "invalid" : ""}`, invalid: this.displayError ? "true" : null },
+    return (h(Host, { id: this.uid, "aria-busy": "false", class: `${this.displayError ? "invalid" : ""}`, invalid: this.displayError ? "true" : null },
       h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.displayError ? "invalid" : ""}` },
         h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `datepickerLabel-${this.uid}`, htmlFor: `date-input-${this.uid}`, class: "label", title: `${this.label} (${dateFormat})` },
           this.label,
@@ -461,12 +455,6 @@ export class DatePicker {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "popupClosed",
-      "method": "handlePopupClosed",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }, {
       "name": "popupBlurred",
       "method": "handlePopupBlurred",

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.css

@@ -39,11 +39,6 @@
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
 /* VIA */
-:host {
-  width: 3.75rem;
-  height: 3.75rem;
-}
-
 button {
   display: none;
   width: 100%;
@@ -81,6 +76,11 @@ button:hover {
 }
 
 @media screen and (max-width: 1023px) {
+  :host {
+    width: 3.75rem;
+    height: 3.75rem;
+  }
+
   button {
     display: initial;
   }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -1,4 +1,4 @@
-import { h, Component, Prop, Element, Host, State, Listen } from "@stencil/core";
+import { h, Component, Prop, Element, Host, State, Listen, Event } from "@stencil/core";
 export class NavigationItem {
   constructor() {
     this.isTabbing = false;
@@ -19,7 +19,7 @@ export class NavigationItem {
   }
   render() {
     return (h(Host, { role: "listitem" },
-      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href },
+      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() },
         h("div", { class: "icon", "aria-hidden": "true" },
           h("slot", null)),
         h("div", { class: "text" }, this.text))));
@@ -88,6 +88,22 @@ export class NavigationItem {
   static get states() { return {
     "isTabbing": {}
   }; }
+  static get events() { return [{
+      "method": "wmNavigationItemClicked",
+      "name": "wmNavigationItemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
       "name": "wmUserIsTabbing",

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

@@ -50,6 +50,9 @@ export class Navigation {
   handleHamburgerClicked() {
     this.open = !this.open;
   }
+  handleClickOnItem() {
+    this.open = false;
+  }
   handleStateChange() {
     if (this.isCollapsible) {
       this.wmNavigationStateChanged.emit();
@@ -198,5 +201,11 @@ export class Navigation {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "wmNavigationItemClicked",
+      "method": "handleClickOnItem",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }