@watermarkinsights/ripple 3.8.0-3 → 3.8.0-4

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

@@ -0,0 +1,87 @@
+/* --------------------------------------
+   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 {
+  display: none;
+  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 (max-width: 1023px) {
+  button {
+    display: initial;
+  }
+}

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

@@ -0,0 +1,152 @@
+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.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;
+}

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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,122 @@
+/* --------------------------------------
+   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 {
+  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;
+  width: 7.5625rem;
+  background-color: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 0.875rem;
+  height: 100%;
+}
+
+.navlist {
+  margin: 0;
+  padding: 0;
+}
+
+.toggle-wrapper {
+  display: none;
+}
+
+/* COLLAPSIBLE STYLES */
+@media screen and (max-width: 1023px) {
+  .nav {
+    -ms-transition: transform 0.33s ease;
+    -webkit-transition: transform 0.33s ease;
+    -moz-transition: transform 0.33s ease;
+    transition: transform 0.33s ease;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+  }
+  .nav ul {
+    visibility: hidden;
+  }
+  .nav[aria-expanded=true] {
+    transform: translateX(0);
+  }
+  .nav[aria-expanded=true] ul {
+    visibility: visible;
+  }
+  .nav .toggle-wrapper {
+    display: inline-block;
+    min-height: 5rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .overlay {
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    max-height: none;
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translate(0%, 0%);
+    background-color: rgba(25, 25, 25, 0.4);
+    -ms-transition: opacity 0.5s ease-out;
+    -webkit-transition: opacity 0.5s ease-out;
+    -moz-transition: opacity 0.5s ease-out;
+    transition: opacity 0.5s ease-out;
+  }
+}