@watermarkinsights/ripple 3.2.0-9 → 3.3.0-3

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

@@ -31,6 +31,9 @@ export class Button {
     // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
     return this.tempButtonType === "icononly" || this.tempButtonType === "navigational" || this.isTruncated;
   }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
   toggleTabbingOn() {
     this.isTabbing = true;
   }
@@ -127,23 +130,20 @@ export class Button {
   }
   showTooltip() {
     if (this.hasTooltip) {
-      const tooltipEl = document.querySelector("#wm-tooltip");
-      if (!!tooltipEl) {
-        // set tooltip text
-        tooltipEl.textContent = this.isTruncated ? this.el.textContent : this.tooltip;
-        // adjust position in case there is no space to place the tooltip where specified via prop
-        this.adjustedTooltipPosition = adjustTooltipPosition(this.tooltipPosition, this.buttonEl, tooltipEl);
-        this.positionTooltip(this.adjustedTooltipPosition, tooltipEl);
-        tooltipEl.style.transitionDelay = "500ms";
-        tooltipEl.style.opacity = "1";
-        // tooltip is only visible after the transition delay.
-        // This also fixes an issue for keyboard users:
-        // if they tab to a button out of screen bounds, the page scrolls
-        // and hideTooltip() would be triggered before the tooltip would show
-        setTimeout(() => {
-          this.tooltipVisible = true;
-        }, 500);
-      }
+      // set tooltip text
+      this.tooltipEl.textContent = this.isTruncated ? this.el.textContent : this.tooltip;
+      // adjust position in case there is no space to place the tooltip where specified via prop
+      this.adjustedTooltipPosition = adjustTooltipPosition(this.tooltipPosition, this.buttonEl, this.tooltipEl);
+      this.positionTooltip(this.adjustedTooltipPosition, this.tooltipEl);
+      this.tooltipEl.style.transitionDelay = "500ms";
+      this.tooltipEl.style.opacity = "1";
+      // tooltip is only visible after the transition delay.
+      // This also fixes an issue for keyboard users:
+      // if they tab to a button out of screen bounds, the page scrolls
+      // and hideTooltip() would be triggered before the tooltip would show
+      setTimeout(() => {
+        this.tooltipVisible = true;
+      }, 500);
     }
   }
   positionTooltip(tPos, tooltipEl) {
@@ -177,10 +177,9 @@ export class Button {
     tooltipEl.style.left = (horizontalPos / 16).toString() + "rem";
   }
   hideTooltip() {
-    const tooltipEl = document.querySelector("#wm-tooltip");
-    if (this.hasTooltip && !!tooltipEl) {
-      tooltipEl.style.transitionDelay = "0s";
-      tooltipEl.style.opacity = "0";
+    if (this.hasTooltip) {
+      this.tooltipEl.style.transitionDelay = "0s";
+      this.tooltipEl.style.opacity = "0";
       this.tooltipVisible = false;
     }
   }

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

@@ -238,6 +238,7 @@
     text-align: left;
     padding-right: 1.25rem;
     padding-bottom: 0;
+    flex: none;
   }
   .component-wrapper.bar1 .completion-message {
     right: 5.75rem;
@@ -309,6 +310,18 @@
   transform: translate(4px, 24px);
   text-anchor: middle;
 }
+.component-wrapper.left-label {
+  flex-direction: row;
+}
+.component-wrapper.left-label .label {
+  width: 12rem;
+  padding-right: 1.25rem;
+  flex: none;
+  align-self: flex-end;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+}
 
 /* KEYBOARD USERS */
 :host(:focus) {

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

@@ -6,6 +6,9 @@ export class Chart {
     this.chartType = "doughnut1";
     this.showLegend = true;
     this.notStartedColor = false;
+    // left labels are a temporary solution for the lack of a stacked bar chart
+    // it only works with bar4 and should be used without a legend
+    this.labelPosition = "top";
     this.isTabbing = false;
     this.uid = generateId();
     this.slicesData = [];
@@ -86,11 +89,13 @@ export class Chart {
       },
     };
     /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
-    this.debouncedUpdate = debounce(async () => {
-      this.setHybridType();
-      await this.getData();
+    this.debouncedResize = debounce(async () => {
+      if (this.chartType === "hybrid") {
+        this.setHybridType();
+        await this.getData();
+      }
       forceUpdate(this.el);
-    }, 30);
+    }, 10);
     this.debouncedSliceUpdate = debounce(async () => {
       await this.getData();
       forceUpdate(this.el);
@@ -338,8 +343,9 @@ export class Chart {
     }
   }
   handleResize() {
-    if (this.chartType === "hybrid") {
-      this.debouncedUpdate();
+    // handling resizing only needs to occur for bar charts (hybrid included)
+    if (this.chartType.includes("bar") || this.chartType === "hybrid") {
+      this.debouncedResize();
     }
   }
   async componentWillLoad() {
@@ -444,13 +450,16 @@ export class Chart {
       default:
         y = "0";
     }
+    // adjusting the width of the rect slightly ensures repainting on rerenders
+    // important for updating width accurate when resizing the page
+    const randomTinyNumber = Math.random() / 1000;
     return (h("g", { class: "barcontainer" },
       h("style", null, ` #${s.id} {
           fill:${s.color};
           x: ${`${this.amountToPercent(s.offset, false)}%`};
           y: ${y};
           height: 30px;
-          width: calc(${this.amountToPercent(s.amount, false)}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
+          width: calc(${this.amountToPercent(s.amount, false) + randomTinyNumber}%${idx !== this.slicesData.length - 1 ? " - 2px" : ""});
         }`),
       h("rect", { id: s.id, onClick: (ev) => {
           if (this.popoverEl) {
@@ -537,7 +546,7 @@ export class Chart {
           id: "chart.interactiveChart",
           defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
         }), tabindex: "0" },
-      h("div", { class: `component-wrapper ${this.getType()}` },
+      h("div", { class: `component-wrapper ${this.getType()} ${this.labelPosition === "left" && this.chartType === "bar4" ? "left-label" : ""}` },
         h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` },
           h("span", { class: "label-text" }, this.label),
           this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""),
@@ -694,6 +703,24 @@ export class Chart {
       "attribute": "not-started-color",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "labelPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"top\"",
+        "resolved": "\"left\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": false,
+      "defaultValue": "\"top\""
     }
   }; }
   static get states() { return {

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

@@ -10,6 +10,9 @@ export class DatePicker {
     this.label = "";
     this.requiredField = false;
     this.displayError = "";
+    // we only want to fire the "change" event if the value has actually changed (that's
+    // how native elements do it), so we need to keep in state the last committed value.
+    this.lastCommittedValue = this.value;
     // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
     this.parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
     this.isoEntry = /^\d\d\d\d[-]\d\d[-]\d\d$/;
@@ -44,22 +47,13 @@ export class DatePicker {
       this.processInput();
     }
   }
-  handleValue(value) {
-    // handleInput will change the value prop at every keystroke
-    // we need to differentiate change by the user and programmatic change
-    // if the new value is the same as the input value, then the user is changing the input
-    if (value !== this.inputEl.value) {
-      this.inputEl.value = this.reformatDate(this.dateFormat, this.value);
-      this.processInput();
-    }
-  }
   handleInput(ev) {
     // keep component's value in sync with input's value
     // validation only happens on blur and initial load,
     // but component's value should reflect user input at any time
     this.value = ev.target.value; // same as this.inputEl.value
   }
-  // blur on input
+  // this is input blur, not component blur
   handleBlur(ev) {
     // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
     const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
@@ -67,23 +61,18 @@ export class DatePicker {
       this.processInput();
     }
     this.dpWrapper.classList.remove("focus");
-    // component emits blur when user tabs out of input (and to the calendar view button)
-    // since internal errors will show when user tabs from input to button,
-    // so should external errors, which are run on blur event.
-    this.generateBlur();
   }
-  generateBlur() {
+  // this is input focus, not component focus
+  focusHandler() {
+    this.dpWrapper.classList.add("focus");
+  }
+  handlePopupClosed() {
     this.el.tabIndex = 0;
     this.el.focus();
-    this.el.blur();
-  }
-  generateBlurAndFocusButton() {
-    this.generateBlur();
   }
   getActiveElement() {
     return checkForFocusableElInShadow(document.activeElement);
   }
-  /* End blur stuff. Back to our normal programming :) */
   handleCellTriggered(ev) {
     let dateElement = ev.detail;
     let isoDate = dateElement.getAttribute("data-year") +
@@ -95,13 +84,9 @@ export class DatePicker {
     this.processInput();
     // Create event to trigger onInput function on host element, to get the updated value
     // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
-    let event = document.createEvent("Event");
-    event.initEvent("input", true, true);
+    const event = new CustomEvent("input");
     this.el.dispatchEvent(event);
   }
-  focusHandler() {
-    this.dpWrapper.classList.add("focus");
-  }
   processInput(isFirstLoad) {
     // The required field error should not display on first load
     const leftEmpty = !isFirstLoad && this.requiredField;
@@ -136,8 +121,13 @@ export class DatePicker {
     else if (!this.inputEl.value.length && !leftEmpty) {
       this.clearError();
     }
-    // value is set to the reformated date or whatever the user passed
-    this.value = isoDate;
+    if (isoDate !== this.lastCommittedValue) {
+      // value is set to the reformated date or whatever the user passed
+      this.value = isoDate;
+      const event = new CustomEvent("change");
+      this.el.dispatchEvent(event);
+      this.lastCommittedValue = this.value;
+    }
     // event must fire after we set this.value
     // only fire if new valid value is different from the previous one
     if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {
@@ -443,9 +433,6 @@ export class DatePicker {
   static get watchers() { return [{
       "propName": "errorMessage",
       "methodName": "handleError"
-    }, {
-      "propName": "value",
-      "methodName": "handleValue"
     }]; }
   static get listeners() { return [{
       "name": "keydown",
@@ -461,7 +448,7 @@ export class DatePicker {
       "passive": false
     }, {
       "name": "popupClosed",
-      "method": "generateBlurAndFocusButton",
+      "method": "handlePopupClosed",
       "target": undefined,
       "capture": false,
       "passive": false

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

@@ -9,7 +9,6 @@ export class Input {
     this.requiredField = false;
     this.type = "text";
     this.step = 1;
-    this.charCount = 0;
     this.announcement = "";
     this.previousBlurredValue = "";
     this.displayedErrorMessage = "";
@@ -23,6 +22,9 @@ export class Input {
       defaultMessage: "Please enter a valid number.",
     });
   }
+  get charCount() {
+    return this.value.length;
+  }
   componentWillLoad() {
     this.uid = this.el.id ? this.el.id : generateId();
     this.el.focus = function () {
@@ -67,7 +69,6 @@ export class Input {
   }
   handleInput(ev) {
     this.value = ev.target.value;
-    this.charCount = this.value.length;
     if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
       this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
     }
@@ -386,7 +387,6 @@ export class Input {
     }
   }; }
   static get states() { return {
-    "charCount": {},
     "announcement": {},
     "previousBlurredValue": {},
     "displayedErrorMessage": {}

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

@@ -16,6 +16,9 @@ export class Menuitem {
     this.isKeying = false;
   }
   handleKeydown(ev) {
+    const modifierKeyUsed = ev.altKey || ev.ctrlKey || ev.metaKey;
+    const isSingleCharacter = /^.$/.test(ev.key);
+    const isCharacterEntry = isSingleCharacter && !modifierKeyUsed;
     switch (ev.key) {
       case "ArrowUp":
         ev.preventDefault();
@@ -48,8 +51,10 @@ export class Menuitem {
         this.wmTabKeyPressed.emit();
         break;
       default:
-        ev.preventDefault();
-        this.wmLetterPressed.emit(ev.key);
+        if (isCharacterEntry) {
+          ev.preventDefault();
+          this.wmLetterPressed.emit(ev.key);
+        }
     }
   }
   handleClick() {
@@ -57,6 +62,9 @@ export class Menuitem {
       this.wmMenuitemClicked.emit();
     }
   }
+  handleBlur(ev) {
+    this.wmMenuitemBlurred.emit({ relatedTarget: ev.relatedTarget });
+  }
   setOnClick() {
     if (this.disabled && this.el.onclick) {
       this.onClickFunc = this.el.onclick;
@@ -365,6 +373,25 @@ export class Menuitem {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "wmMenuitemBlurred",
+      "name": "wmMenuitemBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ relatedTarget: EventTarget | null }",
+        "resolved": "{ relatedTarget: EventTarget | null; }",
+        "references": {
+          "EventTarget": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
@@ -407,5 +434,11 @@ export class Menuitem {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "blur",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -65,6 +65,9 @@ export class Option {
       // the parent wm-select is in charge of the actual selection
     }
   }
+  handleBlur(ev) {
+    this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
+  }
   syncAriaSelected() {
     // this function only keeps the aria-selected attr in sync with the selected prop
     // all the logic for selecting / deselecting happens in the parent wm-select
@@ -363,6 +366,25 @@ export class Option {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "wmOptionBlurred",
+      "name": "wmOptionBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ relatedTarget: EventTarget | null }",
+        "resolved": "{ relatedTarget: EventTarget | null; }",
+        "references": {
+          "EventTarget": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
@@ -390,5 +412,11 @@ export class Option {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "blur",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -1,4 +1,4 @@
-import { h, Component, Element, Event, Listen, Prop, State, Watch } from "@stencil/core";
+import { h, Component, Element, Event, Listen, Prop, State, Watch, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
 import { generateId, getTextDir, shouldOpenUp, intl } from "../../global/functions";
 export class Select {
@@ -80,12 +80,30 @@ export class Select {
   closePopupOnEscape() {
     this.close();
   }
-  blurHandler(ev) {
+  handleOptionBlur(ev) {
+    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
+    // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
+    // keeps our component's blur events accurate, and closes when focusing browser address bar
+    if (!toElOrChild) {
+      const event = new CustomEvent("blur");
+      // @ts-ignore
+      event.relatedTarget = ev.detail.relatedTarget;
+      this.el.dispatchEvent(event);
+    }
+  }
+  handleClick(ev) {
     const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
     if (!isElOrChild && this.isExpanded) {
       this.close();
     }
   }
+  handleButtonBlur(ev) {
+    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
+    if (toElOrChild) {
+      // do not emit a blur event when opening the dropdown and focusing the Options
+      ev.stopPropagation();
+    }
+  }
   handleKey(ev) {
     switch (ev.keyCode) {
       // Arrow down
@@ -347,25 +365,26 @@ export class Select {
       onClick: () => (this.isExpanded ? this.close() : this.open()),
       onBlur: () => this.handleComponentBlur(),
     };
-    return (h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` },
-      h("div", { class: "label-wrapper" },
-        h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` },
-          this.label,
-          // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-          this.requiredField ? (h("span", { class: "required" },
-            h("span", { class: "sr-only" }, this.requiredMessage),
-            h("span", { "aria-hidden": "true" }, "*"))) : (""))),
-      h("div", { class: "dropdown" },
-        h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el) }),
-          h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
-              ? "overflowcontrol hassubinfo"
-              : "overflowcontrol" },
-            h("span", { class: "button-text" }, this.renderButtonText()),
-            this.renderSubinfo()),
-          this.renderOverflowCount()),
-        h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) },
-          h("slot", null)),
-        this.renderErrorContainer())));
+    return (h(Host, { onBlur: () => this.close(false) },
+      h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` },
+        h("div", { class: "label-wrapper" },
+          h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` },
+            this.label,
+            // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
+            this.requiredField ? (h("span", { class: "required" },
+              h("span", { class: "sr-only" }, this.requiredMessage),
+              h("span", { "aria-hidden": "true" }, "*"))) : (""))),
+        h("div", { class: "dropdown" },
+          h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }),
+            h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
+                ? "overflowcontrol hassubinfo"
+                : "overflowcontrol" },
+              h("span", { class: "button-text" }, this.renderButtonText()),
+              this.renderSubinfo()),
+            this.renderOverflowCount()),
+          h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) },
+            h("slot", null)),
+          this.renderErrorContainer()))));
   }
   static get is() { return "wm-select"; }
   static get encapsulation() { return "shadow"; }
@@ -670,9 +689,15 @@ export class Select {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "wmOptionBlurred",
+      "method": "handleOptionBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
-      "method": "blurHandler",
+      "method": "handleClick",
       "target": "document",
       "capture": true,
       "passive": false

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -217,6 +217,7 @@ wm-tag-input .tag-area [role=option] {
   margin-right: 0.25rem;
   margin-left: 0.25rem;
   transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: pre;
 }
 :host .tag-area [role=option].highlight,
 wm-tag-input .tag-area [role=option].highlight {
@@ -352,6 +353,7 @@ wm-tag-input .dropdown-wrapper div {
   background: #fff;
   list-style: none;
   height: 2.6875rem;
+  white-space: pre;
 }
 :host .dropdown-wrapper li[role=option], :host .dropdown-wrapper li.add-new-btn,
 :host .dropdown-wrapper div[role=option],

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -52,14 +52,14 @@ export class TagInput {
       description: "An alert for adding a tag that is already present.",
     }, { tagName: tag });
   }
-  generateTagCounterMessage() {
+  generateTagCounterMessage(x, y) {
     return intl.formatMessage({
       id: "tagInput.tagsAddedCounter",
       defaultMessage: "Tags added: {x, number}/{y, number}",
       description: "For the user to understand how close they are to the tag limit.",
     }, {
-      x: this.tagsList.length,
-      y: this.maxTags,
+      x: x,
+      y: y,
     });
   }
   componentWillLoad() {
@@ -439,6 +439,7 @@ export class TagInput {
   }
   positionInput() {
     const lastTag = this.tagEls[this.tagEls.length - 1];
+    // default placement to fall back to when no tags are present, or not enough space is available
     this.inputEl.style.position = "static";
     this.inputEl.style.width = "100%";
     if (lastTag) {
@@ -532,7 +533,7 @@ export class TagInput {
     if (this.maxTags) {
       return (h("div", { class: "lower-row" },
         h("div", { id: "max-tags" },
-          this.generateTagCounterMessage(),
+          this.generateTagCounterMessage(this.tagsList.length, this.maxTags),
           this.tagsList.length >= this.maxTags && h("span", { class: "sr-only" }, this.maxTagsReachedMessage))));
     }
   }

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

@@ -271,7 +271,7 @@ export class Timepicker {
       }
     });
   }
-  close() {
+  close(returnFocus = true) {
     this.isExpanded = false;
     window.setTimeout(() => {
       this.optionsEl.classList.add("hidden");
@@ -279,7 +279,9 @@ export class Timepicker {
       // Delay is necessary for screenreader to get new expanded state before focus
       // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
       // also UX wise, it makes sense for the button to only be focused after the animation is complete
-      this.buttonEl.focus();
+      if (returnFocus) {
+        this.buttonEl.focus();
+      }
     }, 150);
   }
   focusOption(item) {
@@ -358,7 +360,7 @@ export class Timepicker {
       this.setDropdownPosition("center", this.selectedOption);
     }
   }
-  handleBlur(ev) {
+  handleInputBlur(ev) {
     // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
     const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
     if (!shouldPreventValidation) {
@@ -370,14 +372,14 @@ export class Timepicker {
     return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, role: "option", "aria-selected": time === "09:00" ? "true" : false, onClick: () => this.handleOptionClick(time) }, this.formatToDisplay(time))));
   }
   render() {
-    return (h(Host, { id: this.uid, invalid: !!this.displayedErrorMessage ? "true" : null },
+    return (h(Host, { id: this.uid, invalid: !!this.displayedErrorMessage ? "true" : null, onBlur: () => this.close(false) },
       h("div", { class: `wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) },
         h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `label-${this.uid}`, class: "label", htmlFor: `time-input-${this.uid}` },
           this.label,
           this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))),
         h("div", null,
           h("div", { class: "inner-wrapper" },
-            h("input", { id: `time-input-${this.uid}`, "aria-label": this.label, "aria-describedby": `error-${this.uid}`, ref: (el) => (this.inputEl = el), onBlur: (ev) => this.handleBlur(ev), onInput: () => this.handleInput(), disabled: this.disabled, required: this.requiredField, placeholder: this.timeFormat, autocomplete: "off", onFocus: () => this.tpWrapper.classList.add("focus") }),
+            h("input", { id: `time-input-${this.uid}`, "aria-label": this.label, "aria-describedby": `error-${this.uid}`, ref: (el) => (this.inputEl = el), onBlur: (ev) => this.handleInputBlur(ev), onInput: () => this.handleInput(), disabled: this.disabled, required: this.requiredField, placeholder: this.timeFormat, autocomplete: "off", onFocus: () => this.tpWrapper.classList.add("focus") }),
             h("button", { id: `btn-${this.uid}`, class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.buttonEl = el), disabled: this.disabled, "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": `time-input-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()) },
               h("span", { class: "clock" })),
             h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, role: "listbox", "aria-labelledby": `label-${this.uid}`, "aria-describedby": this.isExpanded ? "collapsed" : null, ref: (el) => (this.optionsEl = el) }, this.renderOptions())),

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

@@ -54,6 +54,7 @@ wm-network-uploader .wm-button {
   width: inherit;
   border: 2px solid #575195;
   color: #575195;
+  font-family: inherit;
   font-size: 0.75rem;
   font-weight: 700;
   height: 2.75rem;

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

@@ -54,6 +54,7 @@ wm-uploader .wm-button {
   width: inherit;
   border: 2px solid #575195;
   color: #575195;
+  font-family: inherit;
   font-size: 0.75rem;
   font-weight: 700;
   height: 2.75rem;