@watermarkinsights/ripple 3.26.0-9 → 3.26.0

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

@@ -1,253 +1,253 @@
-import { Host, h } from "@stencil/core";
-import { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from "../../global/functions";
-export class Toggletip {
-  constructor() {
-    this.tooltipMessage = intl.formatMessage({
-      id: "toggletip.moreInformation",
-      defaultMessage: "More information",
-    });
-    this.label = undefined;
-    this.tooltip = undefined;
-    this.tooltipText = undefined;
-    this.tooltipPosition = "bottom-right";
-    this.isOpen = false;
-    this.isTabbing = false;
-  }
-  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 validTooltipPlacement = [
-      "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 (!validTooltipPlacement.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: ${validTooltipPlacement}`);
-    }
-    if (this.tooltipText) {
-      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
-    }
-  }
-  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();
-  }
-  handleBlur() {
-    this.hideTooltip();
-    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
-    this.liveRegionEl.innerHTML = "";
-  }
-  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.handleBlur() }), 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 delegatesFocus() { return true; }
-  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": "TooltipPlacement",
-          "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
-          "references": {
-            "TooltipPlacement": {
-              "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 { Host, h } from "@stencil/core";
+import { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from "../../global/functions";
+export class Toggletip {
+  constructor() {
+    this.tooltipMessage = intl.formatMessage({
+      id: "toggletip.moreInformation",
+      defaultMessage: "More information",
+    });
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.tooltipText = undefined;
+    this.tooltipPosition = "bottom-right";
+    this.isOpen = false;
+    this.isTabbing = false;
+  }
+  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 validTooltipPlacement = [
+      "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 (!validTooltipPlacement.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: ${validTooltipPlacement}`);
+    }
+    if (this.tooltipText) {
+      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
+    }
+  }
+  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();
+  }
+  handleBlur() {
+    this.hideTooltip();
+    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
+    this.liveRegionEl.innerHTML = "";
+  }
+  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.handleBlur() }), 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 delegatesFocus() { return true; }
+  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": "TooltipPlacement",
+          "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+          "references": {
+            "TooltipPlacement": {
+              "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
+      }];
+  }
+}