@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,350 @@
+@charset "UTF-8";
+/* --------------------------------------
+   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 */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host,
+wm-toggletip {
+  display: inline-block;
+  position: relative;
+  height: 40px;
+  width: 40px;
+}
+:host .button,
+wm-toggletip .button {
+  display: flex;
+  background: none;
+  border: none;
+  padding: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+:host .button:before,
+wm-toggletip .button: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: "";
+  font-size: 16px;
+  color: #4a4a4a;
+  background: radial-gradient(white 40%, transparent 0%);
+}
+:host .button:focus,
+wm-toggletip .button:focus {
+  outline: none;
+}
+:host .button:focus.user-is-tabbing,
+wm-toggletip .button:focus.user-is-tabbing {
+  -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;
+}
+:host .button:focus.user-is-tabbing::-moz-focus-inner,
+wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner {
+  border: 0;
+}
+:host .tooltip,
+wm-toggletip .tooltip {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  text-transform: none;
+  font-weight: normal;
+  background: black;
+  color: #fff;
+  padding: 0.375rem;
+  line-height: normal;
+  z-index: 30;
+  white-space: nowrap;
+}
+:host .tooltip.hover,
+wm-toggletip .tooltip.hover {
+  clip: auto;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  transition: opacity 500ms 500ms;
+  padding: 0.375rem;
+  white-space: nowrap;
+}
+:host .toggletip,
+wm-toggletip .toggletip {
+  position: absolute;
+  max-width: 13.75rem;
+  width: max-content;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.1875rem;
+  background: #4a4a4a;
+  color: white;
+  font-size: 14px;
+  z-index: 30;
+}
+:host .toggletip.top:before,
+wm-toggletip .toggletip.top:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  top: 100%;
+  border-top-color: #4a4a4a;
+  border-top-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+}
+:host .toggletip.bottom:before,
+wm-toggletip .toggletip.bottom:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  bottom: 100%;
+  border-bottom-color: #4a4a4a;
+  border-bottom-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+}
+:host .toggletip.right:before,
+wm-toggletip .toggletip.right:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  bottom: 100%;
+  border-right-color: #4a4a4a;
+  border-right-width: 0.25rem;
+  border-top-width: 0.375rem;
+  border-bottom-width: 0.375rem;
+  border-left-width: 0px;
+  top: calc(50% - 6px);
+  left: -0.1875rem;
+}
+:host .toggletip.left:before,
+wm-toggletip .toggletip.left:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  bottom: 100%;
+  border-left-color: #4a4a4a;
+  border-left-width: 0.25rem;
+  border-top-width: 0.375rem;
+  border-bottom-width: 0.375rem;
+  border-right-width: 0px;
+  top: calc(50% - 6px);
+  right: -0.1875rem;
+}
+:host .toggletip.bottom-right:before,
+wm-toggletip .toggletip.bottom-right:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  bottom: 100%;
+  border-bottom-color: #4a4a4a;
+  border-bottom-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+  margin-left: unset;
+  left: 0.875rem;
+}
+:host .toggletip.bottom-left:before,
+wm-toggletip .toggletip.bottom-left:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  bottom: 100%;
+  border-bottom-color: #4a4a4a;
+  border-bottom-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+  left: unset;
+  margin-left: unset;
+  right: 0.875rem;
+}
+:host .toggletip.top-right:before,
+wm-toggletip .toggletip.top-right:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  top: 100%;
+  border-top-color: #4a4a4a;
+  border-top-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+  margin-left: unset;
+  left: 0.875rem;
+}
+:host .toggletip.top-left:before,
+wm-toggletip .toggletip.top-left:before {
+  content: "";
+  position: absolute;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  top: 100%;
+  border-top-color: #4a4a4a;
+  border-top-width: 0.25rem;
+  border-left-width: 0.375rem;
+  border-right-width: 0.375rem;
+  margin-left: -0.375rem;
+  left: 50%;
+  left: unset;
+  margin-left: unset;
+  right: 0.875rem;
+}
+:host .toggletip.hidden,
+wm-toggletip .toggletip.hidden {
+  transform: scale(0, 0) !important;
+  visibility: hidden;
+}
+:host .toggletip.top,
+:host .tooltip.top,
+wm-toggletip .toggletip.top,
+wm-toggletip .tooltip.top {
+  transform: translate(-50%, 0%);
+  bottom: 40px;
+  left: 20px;
+}
+:host .toggletip.bottom,
+:host .tooltip.bottom,
+wm-toggletip .toggletip.bottom,
+wm-toggletip .tooltip.bottom {
+  transform: translate(-50%, 0%);
+  top: 40px;
+  left: 20px;
+}
+:host .toggletip.right,
+:host .tooltip.right,
+wm-toggletip .toggletip.right,
+wm-toggletip .tooltip.right {
+  transform: translate(100%, calc(-50% - 20px));
+  right: 0px;
+}
+:host .toggletip.left,
+:host .tooltip.left,
+wm-toggletip .toggletip.left,
+wm-toggletip .tooltip.left {
+  transform: translate(-100%, calc(-50% - 20px));
+  left: 0px;
+}
+:host .toggletip.bottom-right,
+:host .tooltip.bottom-right,
+wm-toggletip .toggletip.bottom-right,
+wm-toggletip .tooltip.bottom-right {
+  top: 40px;
+  left: 0px;
+}
+:host .toggletip.bottom-left,
+:host .tooltip.bottom-left,
+wm-toggletip .toggletip.bottom-left,
+wm-toggletip .tooltip.bottom-left {
+  top: 40px;
+  right: 0px;
+}
+:host .toggletip.top-right,
+:host .tooltip.top-right,
+wm-toggletip .toggletip.top-right,
+wm-toggletip .tooltip.top-right {
+  bottom: 40px;
+  left: 0px;
+}
+:host .toggletip.top-left,
+:host .tooltip.top-left,
+wm-toggletip .toggletip.top-left,
+wm-toggletip .tooltip.top-left {
+  bottom: 40px;
+  right: 0px;
+}
+:host .sr-only,
+wm-toggletip .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+}

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

@@ -0,0 +1,217 @@
+import { Component, Host, h, Element, Prop, State, Listen } from "@stencil/core";
+import { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from "../../global/functions";
+export class Toggletip {
+  constructor() {
+    this.tooltipPosition = "bottom-right";
+    this.isOpen = false;
+    this.isTabbing = false;
+    this.tooltipMessage = intl.formatMessage({
+      id: "toggletip.moreInformation",
+      defaultMessage: "More information",
+    });
+  }
+  componentWillLoad() {
+    const validTooltipPositions = [
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "top-right",
+      "top-left",
+      "bottom-right",
+      "bottom-left",
+    ];
+    if (!this.label) {
+      console.error("wm-toggletip must have a label property");
+    }
+    if (!this.tooltipText) {
+      console.error("wm-toggletip must have a tooltip-text property");
+    }
+    if (!validTooltipPositions.includes(this.tooltipPosition)) {
+      console.error(`wm-toggletip property tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPositions}`);
+    }
+    this.el.focus = function () {
+      this.shadowRoot.querySelector("button").focus();
+    };
+  }
+  handleKeydown(ev) {
+    switch (ev.key) {
+      case "Escape":
+        ev.preventDefault();
+        if (this.isOpen) {
+          ev.stopPropagation(); // prevent closing modal if within one
+          this.close();
+        }
+        break;
+      case "Tab":
+        if (this.isOpen) {
+          this.close();
+        }
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleClick(ev) {
+    if (this.isOpen) {
+      if (ev.target === this.el || this.el.contains(ev.target)) {
+        // Re-announce if clicking any part of the component while open
+        this.announceToggletip();
+      }
+      else {
+        this.close();
+      }
+    }
+  }
+  open() {
+    this.isOpen = true;
+    this.announceToggletip();
+  }
+  close() {
+    this.isOpen = false;
+    this.hideTooltip();
+  }
+  showTooltip() {
+    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
+    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
+    this.setToggletipPosition();
+    this.tooltipEl.classList.add("hover");
+  }
+  hideTooltip() {
+    this.tooltipEl.classList.remove("hover");
+  }
+  announceToggletip() {
+    this.liveRegionEl.innerHTML = "";
+    setTimeout(() => {
+      this.liveRegionEl.innerHTML = this.tooltipText;
+    }, 10);
+  }
+  setToggletipPosition() {
+    // Vertical
+    if (this.tooltipPosition.includes("bottom") && shouldOpenUp(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
+    }
+    else if (this.tooltipPosition.includes("top") && shouldOpenDown(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
+    }
+    // Horizontal
+    if (this.tooltipPosition.includes("left") && shouldShiftRight(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("left", "right");
+    }
+    else if (this.tooltipPosition.includes("right") && shouldShiftLeft(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("right", "left");
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => {
+          this.setToggletipPosition();
+          this.open();
+        }, 
+        // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
+        onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip() }),
+      h("div", { ref: (el) => (this.tooltipEl = el), class: `tooltip ${this.tooltipPosition} ${this.isOpen ? "hidden" : ""}`, "aria-hidden": "true" }, this.tooltipMessage),
+      h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltipText),
+      h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+  }
+  static get is() { return "wm-toggletip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-toggletip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-toggletip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "tooltipText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip-text",
+      "reflect": false
+    },
+    "tooltipPosition": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TooltipPosition",
+        "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+        "references": {
+          "TooltipPosition": {
+            "location": "import",
+            "path": "../../global/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip-position",
+      "reflect": true,
+      "defaultValue": "\"bottom-right\""
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {},
+    "isTabbing": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleClick",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}