@watermarkinsights/ripple 3.4.0-1 → 3.4.0-2

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

@@ -1,241 +1,241 @@
-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",
-    });
-  }
-  get tempTooltip() {
-    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out
-    return this.tooltip || this.tooltipText;
-  }
-  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.tempTooltip) {
-      console.error("wm-toggletip must have a tooltip property");
-    }
-    if (!validTooltipPositions.includes(this.tooltipPosition)) {
-      console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPositions}`);
-    }
-    if (this.tooltipText) {
-      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
-    }
-    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.tempTooltip;
-    }, 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.tempTooltip),
-      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
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "tooltip",
-      "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
-    }]; }
-}
+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",
+    });
+  }
+  get tempTooltip() {
+    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out
+    return this.tooltip || this.tooltipText;
+  }
+  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.tempTooltip) {
+      console.error("wm-toggletip must have a tooltip property");
+    }
+    if (!validTooltipPositions.includes(this.tooltipPosition)) {
+      console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPositions}`);
+    }
+    if (this.tooltipText) {
+      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
+    }
+    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.tempTooltip;
+    }, 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.tempTooltip),
+      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
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "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
+    }]; }
+}