@watermarkinsights/ripple 3.8.0-2 → 3.8.0-5

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -45,6 +46,7 @@
 }
 
 button {
+  display: none;
   width: 100%;
   height: 100%;
   border: none;
@@ -74,13 +76,13 @@ button:hover {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\f35c";
+  content: "";
   font-size: 1.5rem;
   color: #575195;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (max-width: 1023px) {
   button {
-    display: none;
+    display: initial;
   }
 }

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

@@ -1,96 +1,152 @@
-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
-    }]; }
-}
+import { h, Component, Element, Host, Prop, Listen, State } from "@stencil/core";
+import { intl } from "../../global/functions";
+export class NavigationHamburger {
+  constructor() {
+    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
+    this.isTabbing = false;
+    this.open = false;
+    this.showNavMessage = intl.formatMessage({
+      id: "navigation.showNavigation",
+      defaultMessage: "Show navigation",
+      description: "For user interface element opening a navigation menu",
+    });
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  // this also works on initial load because event is fired then
+  handleNavigationStateChanged(ev) {
+    this.open = ev.target.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`);
+    }
+  }
+  showTooltip() {
+    this.tooltipEl.textContent = this.showNavMessage;
+    this.tooltipEl.style.top = "1.125rem";
+    this.tooltipEl.style.left = "2.75rem";
+    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);
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+    this.tooltipVisible = false;
+  }
+  showTooltipForKeyboardUsers() {
+    if (this.isTabbing) {
+      this.showTooltip();
+    }
+  }
+  handleClick() {
+    this.hideTooltip();
+    this.nav.open = !this.nav.open;
+  }
+  render() {
+    return (h(Host, { class: this.open ? "nav-open" : "nav-closed" },
+      h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.hideTooltip(), onClick: () => this.handleClick() },
+        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
+    },
+    "tooltipVisible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip-visible",
+      "reflect": false,
+      "defaultValue": "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.js

@@ -1,101 +1,105 @@
-import { h, Component, Prop, Host, State, Listen } from "@stencil/core";
-export class NavigationItem {
-  constructor() {
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  render() {
-    return (h(Host, { role: "listitem" },
-      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href },
-        h("div", { class: "icon" },
-          h("slot", null)),
-        h("div", { class: "text" }, this.text))));
-  }
-  static get is() { return "wm-navigation-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigation-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigation-item.css"]
-  }; }
-  static get properties() { return {
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "href",
-      "reflect": false
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "text",
-      "reflect": false
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "active",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {}
-  }; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { h, Component, Prop, Element, Host, State, Listen } from "@stencil/core";
+export class NavigationItem {
+  constructor() {
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".link").focus();
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" },
+      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href },
+        h("div", { class: "icon", "aria-hidden": "true" },
+          h("slot", null)),
+        h("div", { class: "text" }, this.text))));
+  }
+  static get is() { return "wm-navigation-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation-item.css"]
+  }; }
+  static get properties() { return {
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  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
+    }]; }
+}

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

@@ -39,13 +39,20 @@
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
 /* VIA */
+:host {
+  z-index: 10;
+}
+
+:host(.collapsible) {
+  z-index: 5000;
+}
+
 .nav {
   -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
   -moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
   box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
   display: flex;
   flex-direction: column;
-  align-items: center;
   width: 7.5625rem;
   background-color: #fff;
   overflow-x: hidden;
@@ -53,7 +60,6 @@
   -webkit-overflow-scrolling: touch;
   font-size: 0.875rem;
   height: 100%;
-  z-index: 10;
 }
 
 .navlist {
@@ -76,7 +82,6 @@
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 100;
     transform: translateX(-100%);
   }
   .nav ul {