@watermarkinsights/ripple 3.3.0-0 → 3.3.1

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -46,7 +46,7 @@ export class ActionMenu {
     this.close();
     this.wmButtonEl.focus();
   }
-  blurHandler(ev) {
+  handleClick(ev) {
     const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
     if (!isElOrChild && this.isExpanded) {
       this.close();
@@ -70,6 +70,24 @@ export class ActionMenu {
         break;
     }
   }
+  handleMenuitemBlur(ev) {
+    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
+    // if the Menuitem 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);
+    }
+  }
+  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 Menuitems
+      ev.stopPropagation();
+    }
+  }
   componentWillLoad() {
     this.uid = this.el.id ? this.el.id : generateId();
     this.el.focus = function () {
@@ -128,7 +146,7 @@ export class ActionMenu {
       window.requestAnimationFrame(() => this.focusFirstItem());
     }
   }
-  close() {
+  close(returnFocus = true) {
     this.isExpanded = false;
     this.childItems.forEach((i) => (i.focused = false));
     window.setTimeout(() => {
@@ -141,7 +159,8 @@ export class ActionMenu {
       // is not visible anymore, so we need to wait for the transition to
       // finish and the hidden class to be applied.
       // also checking if focus stayed on the menuitem
-      if (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM") {
+      if (returnFocus &&
+        (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM")) {
         this.wmButtonEl.focus();
       }
     }, 250);
@@ -198,9 +217,9 @@ export class ActionMenu {
     return null;
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { onBlur: () => this.close(false) },
       h("div", { class: getTextDir() },
-        h("wm-button", { "button-type": `${this.tempActionMenuType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.tempActionMenuType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": `menu-${this.uid}` }, this.buttonText),
+        h("wm-button", { "button-type": `${this.tempActionMenuType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.tempActionMenuType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": `menu-${this.uid}` }, this.buttonText),
         h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: `menu-${this.uid}`, tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) },
           h("slot", null)))));
   }
@@ -415,7 +434,7 @@ export class ActionMenu {
       "passive": false
     }, {
       "name": "click",
-      "method": "blurHandler",
+      "method": "handleClick",
       "target": "document",
       "capture": false,
       "passive": false
@@ -425,6 +444,12 @@ export class ActionMenu {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "wmMenuitemBlurred",
+      "method": "handleMenuitemBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "wmLetterPressed",
       "method": "findAndFocusItem",

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

@@ -223,6 +223,7 @@
 }
 .component-wrapper.bar1 .bar-wrapper .single-perc {
   width: 4rem;
+  flex: none;
 }
 .component-wrapper.bar1 .bar-wrapper .chart-svg {
   flex: 1;
@@ -238,6 +239,7 @@
     text-align: left;
     padding-right: 1.25rem;
     padding-bottom: 0;
+    flex: none;
   }
   .component-wrapper.bar1 .completion-message {
     right: 5.75rem;
@@ -309,6 +311,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 and is undocumented
+    // 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-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.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() {
@@ -533,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/global/__mocks__/functions.js

@@ -3,3 +3,4 @@ export const getTextDir = () => "rtl";
 export const intl = {
   formatMessage: (_) => "[translated text]",
 };
+export const adjustTooltipPosition = () => "bottom-right";

package/dist/esm/{global-11e6d295.js → global-dbc19362.js}

@@ -1,4 +1,4 @@
-const version = "3.3.0-0";
+const version = "3.3.1";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length