@watermarkinsights/ripple 3.7.0 → 3.8.0-2

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

@@ -43,6 +43,57 @@ export class ChartSlice {
       },
       "attribute": "amount",
       "reflect": false
+    },
+    "popoverTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-title",
+      "reflect": false
+    },
+    "popoverText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-text",
+      "reflect": false
+    },
+    "popoverButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-button-text",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
@@ -131,6 +130,9 @@
 .component-wrapper .bar-wrapper .inner-bar-wrapper {
   width: 100%;
 }
+.component-wrapper .bar-wrapper .inner-bar-wrapper .values {
+  display: flex;
+}
 .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper {
   display: flex;
 }

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

@@ -424,7 +424,7 @@ export class Chart {
           "inner-bar-wrapper": true,
           "show-values": this.tempValueFormat === "percentage" || this.tempValueFormat === "amount",
         } },
-        this.currentChartType !== "bar1" ? (h("div", null, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""),
+        this.currentChartType !== "bar1" ? (h("div", { class: "values" }, this.slicesData.map((s, idx) => (s.perc > 0 ? this.renderBarText(s, idx) : "")))) : (""),
         h("div", { class: "bar-segments-wrapper", ref: (el) => (this.barEl = el) }, this.slicesData.map((s, idx) => this.renderBarSegment(s, idx))),
         this.renderCompletionMessage())));
   }

package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
@@ -95,7 +93,7 @@
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f0ed";
   font-size: 1.5rem;
   color: #575195;
   padding: 0;
@@ -184,11 +182,11 @@
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f140";
   padding-left: 0.75rem;
 }
 .popup .calendar-header .title-box.year:after {
-  content: "";
+  content: "\f143";
 }
 .popup .calendar-header .title-box::-moz-focus-inner {
   border: 0;

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

@@ -15,6 +15,7 @@ export class PrivDatepicker {
     this.dayInFocus = this.selectedDay;
     this.monthNumInFocus = this.selectedMonth;
     this.parentId = "";
+    this.isTabbing = false;
     this.popupClicked = true;
     this.buttonClicked = true;
     this.prevClicked = true;
@@ -118,13 +119,12 @@ export class PrivDatepicker {
         //Clunky exception for blur validation. Remove when blur reworked.
         !ev.target.id.includes("popup-title") && ev.target.click();
         break;
-      //escape
+      // Escape
       case 27:
         ev.preventDefault();
         if (this.isExpanded) {
           ev.stopPropagation(); // prevents closing of parent modal
-          this.togglePopup();
-          this.buttonEl.focus();
+          this.closePopup();
         }
         break;
       // Page Up
@@ -272,27 +272,29 @@ export class PrivDatepicker {
     }
   }
   toggleTabbingOn(ev) {
-    var keys = ["Tab", 9, "ArrowUp", 38, "ArrowDown", 40, "ArrowLeft", 37, "ArrowRight", 39, "Enter", 13];
-    var key = ev.key || ev.keyCode;
-    if (keys.includes(key)) {
-      this.popupEl && this.popupEl.classList.add("user-is-tabbing");
+    const validKeys = ["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
+    if (validKeys.includes(ev.key)) {
+      this.isTabbing = true;
     }
   }
   //Using mousedown prevents this from running when the keydown listener emits ".click()" for when enter is pressed.
   toggleTabbingOff() {
-    this.popupEl && this.popupEl.classList.remove("user-is-tabbing");
+    this.isTabbing = false;
   }
-  blurHandler() {
+  blurHandler(ev) {
     if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
       this.closePopup();
+      // in this case, the PointerEvent target is identical to the blur events relatedTarget, and is passed on as such
+      this.popupBlurred.emit({ relatedTarget: ev.target });
     }
     this.popupClicked = false;
     this.buttonClicked = false;
   }
-  handleBlurOnWindow() {
+  handleBlurOnWindow(ev) {
     // for cases where the user clicks or uses a shortcut to leave the document
     if (this.isExpanded) {
       this.closePopup();
+      this.popupBlurred.emit({ relatedTarget: ev.target });
     }
   }
   setDateValuesForView() {
@@ -328,10 +330,12 @@ export class PrivDatepicker {
     this.dayInFocus = this.selectedDay;
     this.changeView("day");
     window.requestAnimationFrame(() => {
-      //For instances where the app is checking for errors in the date on blur
+      // For instances where the app is checking for errors in the date on blur
       // trigger blur, but keep focus on button
-      this.popupClosed.emit();
-      this.buttonEl.focus();
+      if (this.isTabbing) {
+        this.popupClosed.emit();
+        this.buttonEl.focus();
+      }
     });
   }
   openPopup() {
@@ -566,7 +570,7 @@ export class PrivDatepicker {
             defaultMessage: "Calendar View",
             description: "Calendar button",
           }) })),
-      h("div", { class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: `popup-${this.parentId}`, ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), role: "application", "aria-describedby": "application" }, this.view === "day" ? (h("div", { class: "day-view" },
+      h("div", { class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, id: `popup-${this.parentId}`, ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), role: "application", "aria-describedby": "application" }, this.view === "day" ? (h("div", { class: "day-view" },
         h("div", { class: "calendar-header" },
           h("button", { onClick: () => {
               this.prevClicked = true;
@@ -924,7 +928,8 @@ export class PrivDatepicker {
     }
   }; }
   static get states() { return {
-    "monthNumInFocus": {}
+    "monthNumInFocus": {},
+    "isTabbing": {}
   }; }
   static get events() { return [{
       "method": "cellTriggered",
@@ -979,6 +984,25 @@ export class PrivDatepicker {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "popupBlurred",
+      "name": "popupBlurred",
+      "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 listeners() { return [{

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
@@ -113,7 +111,7 @@ wm-datepicker .wrapper.invalid .label:after {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f026";
   margin-left: 0.3125rem;
 }
 [dir=RTL] :host .wrapper.invalid .label:after,

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

@@ -70,6 +70,15 @@ export class DatePicker {
     this.el.tabIndex = 0;
     this.el.focus();
   }
+  handlePopupBlurred(ev) {
+    // emit blur event when leaving component from priv-datepicker
+    if (ev.detail.relatedTarget !== this.el) {
+      const event = new CustomEvent("blur");
+      // @ts-ignore
+      event.relatedTarget = ev.detail.relatedTarget;
+      this.el.dispatchEvent(event);
+    }
+  }
   getActiveElement() {
     return checkForFocusableElInShadow(document.activeElement);
   }
@@ -458,6 +467,12 @@ export class DatePicker {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "popupBlurred",
+      "method": "handlePopupBlurred",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "cellTriggered",
       "method": "handleCellTriggered",

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
@@ -114,7 +112,7 @@ wm-input .wrapper.invalid .label:after {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f026";
   margin-left: 0.3125rem;
 }
 [dir=RTL] :host .wrapper.invalid .label:after,

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */

package/dist/collection/components/wm-modal/wm-modal-footer.css

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */

package/dist/collection/components/wm-modal/wm-modal-header.css

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
 /********************************************************************************************/
-/* USAGE */
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */

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

@@ -44,6 +44,8 @@ export class Modal {
   }
   closeModalOnEscape(ev) {
     if (ev.key === "Escape") {
+      // stops propagation prevents nested modal from closing all at once
+      ev.stopPropagation();
       this.wmModalCloseTriggered.emit();
       this.wmCloseTriggered.emit(); // deprecated
       this.open = false;
@@ -297,7 +299,7 @@ export class Modal {
     }, {
       "method": "wmModalCloseTriggered",
       "name": "wmModalCloseTriggered",
-      "bubbles": true,
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.css

@@ -0,0 +1,86 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host {
+  width: 3.75rem;
+  height: 3.75rem;
+}
+
+button {
+  width: 100%;
+  height: 100%;
+  border: none;
+  box-shadow: none;
+  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: transparent;
+  outline: none;
+  padding: 0;
+}
+button.user-is-tabbing:focus {
+  -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;
+}
+button.user-is-tabbing:focus::-moz-focus-inner {
+  border: 0;
+}
+button:hover {
+  background-color: #d7d6d9;
+}
+
+.icon: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: "\f35c";
+  font-size: 1.5rem;
+  color: #575195;
+}
+
+@media screen and (min-width: 1024px) {
+  button {
+    display: none;
+  }
+}

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -0,0 +1,96 @@
+import { h, Component, Element, Prop, Listen, State } from "@stencil/core";
+export class NavigationHamburger {
+  constructor() {
+    this.isTabbing = false;
+    this.open = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleNavigationStateChanged(ev) {
+    this.open = ev.detail.open;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      // if (!this.disabled) {
+      this.shadowRoot.querySelector("button").focus();
+      /*
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+       */
+      // }
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    if (!this.navId) {
+      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    }
+  }
+  componentDidLoad() {
+    this.nav = document.getElementById(this.navId);
+    if (!this.nav) {
+      console.error(`wm-navigation-hamburger: wm-navigation with id ${this.navId} was not found`);
+    }
+  }
+  render() {
+    return (h("button", { class: `${this.isTabbing ? "user-is-tabbing" : ""}`, "aria-expanded": this.open, "aria-controls": this.navId, onClick: () => (this.nav.open = !this.nav.open) },
+      h("span", { class: "icon" })));
+  }
+  static get is() { return "wm-navigation-hamburger"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation-hamburger.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation-hamburger.css"]
+  }; }
+  static get properties() { return {
+    "navId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "nav-id",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "open": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmNavigationStateChanged",
+      "method": "handleNavigationStateChanged",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/wm-navigation/wm-navigation-item.css

@@ -0,0 +1,85 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+.link {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: inherit;
+  text-decoration: none;
+  min-height: 4.5rem;
+  text-align: center;
+  padding: 1.25rem 0.5rem;
+  font-weight: 500;
+  outline: none;
+  position: relative;
+}
+.link:hover {
+  background-color: #f2f2f2;
+}
+.link .icon {
+  font-size: 1.375rem;
+  color: #6b6b6b;
+}
+.link .text {
+  font-size: 0.875rem;
+}
+.link.user-is-tabbing:focus {
+  box-shadow: inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;
+}
+
+.link.active {
+  background-color: #e9e7ec;
+}
+.link.active:before {
+  content: "";
+  background-color: #575195;
+  position: absolute;
+  height: 100%;
+  width: 5px;
+  left: 0;
+}
+.link.active .text {
+  color: #575195;
+}
+.link.active .icon {
+  color: #575195;
+}