@watermarkinsights/ripple 3.8.0-1 → 3.8.0-2

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;
+}

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

@@ -0,0 +1,101 @@
+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
+    }]; }
+}

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

@@ -0,0 +1,117 @@
+/* --------------------------------------
+   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 */
+.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;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 0.875rem;
+  height: 100%;
+  z-index: 10;
+}
+
+.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;
+    z-index: 100;
+    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;
+  }
+}

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

@@ -0,0 +1,142 @@
+import { h, Component, Element, Prop, State, Listen, Host, Watch, Event } from "@stencil/core";
+import { intl } from "../../global/functions";
+export class Navigation {
+  constructor() {
+    this.open = false;
+    this.isTabbing = false;
+    this.openTooltipMessage = intl.formatMessage({
+      id: "global.openVerb",
+      defaultMessage: "Open",
+      description: "For a button, to open a user interface element",
+    });
+    this.closeTooltipMessage = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+  }
+  get ariaExpanded() {
+    return window.innerWidth < 1024
+      ? // if component is in collapsible mode, set aria-expanded according to expanded state
+        this.open.toString()
+      : // otherwise, do not render attr at all
+        undefined;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".toggle").focus();
+      /*
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+       */
+    };
+  }
+  componentDidLoad() {
+    // Should fail silently if not found as devs may decide not to use the hamburger component.
+    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
+  }
+  updateHamburgerState() {
+    this.wmNavigationStateChanged.emit({ open: this.open });
+    if (this.open) {
+      // wait for nav to be expanded otherwise tooltip will be misplaced.
+      // also btn can't be focused right away.
+      setTimeout(() => this.toggleEl.focus(), 250);
+    }
+    else {
+      // should fail silently if el doesn't exist
+      this.hamburgerBtn && this.hamburgerBtn.focus();
+    }
+  }
+  renderOverlay() {
+    return (h("div", { class: "overlay", onClick: () => {
+        this.open = false;
+      } }));
+  }
+  render() {
+    return (h(Host, null,
+      this.open ? this.renderOverlay() : "",
+      h("nav", { class: "nav", "aria-expanded": this.ariaExpanded },
+        h("div", { class: "toggle-wrapper" },
+          h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
+              this.open = !this.open;
+            } })),
+        h("ul", { class: "navlist" },
+          h("slot", null)))));
+  }
+  static get is() { return "wm-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNavigationStateChanged",
+      "name": "wmNavigationStateChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "updateHamburgerState"
+    }]; }
+  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-navigator/priv-navigator-button/priv-navigator-button.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 */