@watermarkinsights/ripple 0.0.0 → 0.0.1

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

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

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