@watermarkinsights/ripple 3.8.1 → 3.8.2-0

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-option/wm-option.js

@@ -11,48 +11,40 @@ export class Option {
     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:

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

@@ -107,16 +107,14 @@ export class Select {
     }
   }
   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/collection/components/wm-snackbar/wm-snackbar.js

@@ -49,7 +49,7 @@ export class Snackbar {
     this.newNotification = false;
   }
   checkForTabbing(ev) {
-    if (ev.keyCode === 9) {
+    if (ev.key === "Tab") {
       this.toggleTabbingOn();
     }
   }
@@ -145,7 +145,7 @@ export class Snackbar {
             h("span", null, notification.message),
             notification.link && (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) },
+              }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) },
               h("span", { "aria-hidden": "true" }, notification.link)))),
           h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) },
             h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))),

package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js

@@ -354,7 +354,7 @@ export class NetworkUploader {
       // 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-uploader/wm-uploader.js

@@ -258,7 +258,7 @@ export class Uploader {
       // 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/global/global.js

@@ -9,20 +9,15 @@ if (window.navigator.plugins.length > 0) {
 // USER-IS-TABBING CLASSES (FOR FOCUS INDICATORS)
 // Dispatching events to track whether user is navigating with keyboard or mouse
 function wmComponentKeys(ev) {
-  var key = ev.key || ev.keyCode;
-  if (key == "Tab" || key === 9) {
+  if (ev.key == "Tab") {
     var event = new Event("wmUserIsTabbing");
     window.dispatchEvent(event);
     document.querySelector("body").classList.add("wmcl-user-is-tabbing");
   }
-  if (key == "ArrowLeft" ||
-    key === 37 ||
-    key == "ArrowUp" ||
-    key === 38 ||
-    key == "ArrowRight" ||
-    key === 39 ||
-    key == "ArrowDown" ||
-    key === 40) {
+  if (ev.key == "ArrowLeft" ||
+    ev.key == "ArrowUp" ||
+    ev.key == "ArrowRight" ||
+    ev.key == "ArrowDown") {
     var event = new Event("wmUserIsKeying");
     window.dispatchEvent(event);
     document.querySelector("body").classList.add("wmcl-user-is-keying");