@watermarkinsights/ripple 3.2.0-8 → 3.3.0-2

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

@@ -80,12 +80,36 @@ 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();
     }
   }
+  handleBlur(ev) {
+    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
+    if (!toElOrChild) {
+      this.close(false);
+    }
+  }
+  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
@@ -356,7 +380,7 @@ export class Select {
             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("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" },
@@ -670,12 +694,24 @@ 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
+    }, {
+      "name": "blur",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "keydown",
       "method": "handleKey",

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

@@ -165,6 +165,7 @@ wm-tag-input .character-count {
 }
 :host .tags-and-input-wrapper,
 wm-tag-input .tags-and-input-wrapper {
+  position: relative;
   width: 100%;
   padding: 0.5rem 0.25rem;
   margin-bottom: -0.5rem;
@@ -216,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 {
@@ -275,7 +277,8 @@ wm-tag-input input {
   padding: 0;
   margin-bottom: 0.5rem;
   margin-right: 0.25rem;
-  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  right: 0px;
 }
 :host input.hidden,
 wm-tag-input input.hidden {
@@ -350,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,21 +439,21 @@ 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 = "auto";
-    this.inputEl.style.top = "";
-    this.inputEl.style.left = "";
+    this.inputEl.style.width = "100%";
     if (lastTag) {
       const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
       // 150px is the minimum width of the input field
       if (spaceAvailable >= 150) {
+        // because the input has right: 0px
+        // all thats needed to properly place it is setting position: absolute, top, and width
         this.inputEl.style.position = "absolute";
         this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
-        this.inputEl.style.left = (lastTag.offsetLeft + lastTag.offsetWidth).toString() + "px";
+        this.inputEl.style.width =
+          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + "px";
       }
     }
-    this.inputEl.style.width =
-      (this.tagAreaEl.getBoundingClientRect().right - this.inputEl.getBoundingClientRect().left - 8).toString() + "px";
   }
   /// Helpers
   listToCSV(list) {
@@ -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

@@ -86,6 +86,11 @@ export class Timepicker {
         break;
     }
   }
+  handleFocusOut() {
+    if (this.isExpanded) {
+      this.close();
+    }
+  }
   updateErrorState() {
     this.displayedErrorMessage = this.errorMessage;
   }
@@ -583,5 +588,11 @@ export class Timepicker {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "blur",
+      "method": "handleFocusOut",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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;

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-9b38a2f3.js → global-1e13ed17.js}

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