@watermarkinsights/ripple 3.8.0-8 → 3.8.2-0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e7e3668.js');
-const functions = require('./functions-f40cb19b.js');
+const functions = require('./functions-b90816b8.js');
 
 const wmUploaderCss = ":host .wm-button,wm-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-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}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button:hover,wm-uploader .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover,wm-uploader .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-textonly,wm-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-uploader .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-uploader .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-uploader .wm-button.-icononly: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}:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-uploader .wm-button.-navigational: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}:host .wm-button.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover,wm-uploader .wm-button.-permanentlydelete:not(.-textonly):hover{background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover,wm-uploader .wm-button.-pairnegative:hover{background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover,wm-uploader .wm-button.-pairpositive:hover{background:#116b71;border-color:#116b71}:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:1px solid #575195;border-radius:3px 3px 3px 3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:500;font-size:0.875rem;text-transform:none;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-uploader .wm-button.-selectoronly: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:\"\\f140\";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-uploader .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{width:100%;height:100%;display:block;position:relative}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-uploader input:focus+.wm-button.user-is-tabbing{-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 !important;-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 !important;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 !important}:host *,wm-uploader *{-webkit-box-sizing:border-box;box-sizing:border-box}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.header{margin-bottom:1rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.notif{padding-top:0.25rem;font-size:0.875rem;font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-wrapper{position:relative;display:-ms-flexbox;display:flex}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{-ms-flex:none;flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container.type1{padding:0 1.875rem;height:16.25rem}ul{list-style:none;padding:0;width:100%}ul li{font-size:0.875rem}ul li .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.75rem;padding:0.5rem 1.25rem;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}ul li .file+.file{margin-top:1.25rem}ul li .file .filename{font-weight:500}ul li .file wm-button+wm-button{margin-left:1rem}ul.file-list .file.--saved,ul.inprogress-list .file{margin-bottom:1.625rem}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.error-list li{margin-bottom:1.25rem;color:#c0392b}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul.error-list li .error-message{padding-top:0.25rem;font-style:italic}";
 
@@ -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

@@ -6,7 +6,7 @@ export class Navigation {
     this.isTabbing = false;
     this.mainNavigationMessage = intl.formatMessage({
       id: "navigation.mainNavigation",
-      defaultMessage: "Main navigation",
+      defaultMessage: "Main",
       description: "Label describing the site navigation, for screen reader users",
     });
     this.openTooltipMessage = intl.formatMessage({
@@ -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
     }]; }
 }

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();
         }
       });