@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

@@ -1,254 +1,254 @@
-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
-      }];
-  }
-}
-//# sourceMappingURL=wm-toggletip.js.map
+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
+      }];
+  }
+}
+//# sourceMappingURL=wm-toggletip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wm-toggletip.js","sourceRoot":"","sources":["../../../../src/components/wm-toggletip/wm-toggletip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\r\n\r\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\r\nimport { TooltipPlacement } from \"../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-toggletip\",\r\n  styleUrl: \"wm-toggletip.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Toggletip {\r\n  @Element() el!: HTMLWmToggletipElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\r\n  @Prop() tooltipText?: string; // DEPRECATED\r\n  get tempTooltip() {\r\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\r\n    return this.tooltip || this.tooltipText;\r\n  }\r\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\r\n  @State() isOpen: boolean = false;\r\n  @State() isTabbing: boolean = false;\r\n\r\n  private toggletipEl!: HTMLDivElement;\r\n  private tooltipEl!: HTMLDivElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n  private tooltipMessage = intl.formatMessage({\r\n    id: \"toggletip.moreInformation\",\r\n    defaultMessage: \"More information\",\r\n  });\r\n\r\n  componentWillLoad() {\r\n    const validTooltipPlacement = [\r\n      \"top\",\r\n      \"right\",\r\n      \"bottom\",\r\n      \"left\",\r\n      \"top-right\",\r\n      \"top-left\",\r\n      \"bottom-right\",\r\n      \"bottom-left\",\r\n    ];\r\n\r\n    if (!this.label) {\r\n      console.error(\"wm-toggletip must have a label property\");\r\n    }\r\n    if (!this.tempTooltip) {\r\n      console.error(\"wm-toggletip must have a tooltip property\");\r\n    }\r\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\r\n      console.error(\r\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\r\n      );\r\n    }\r\n    if (this.tooltipText) {\r\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          ev.stopPropagation(); // prevent closing modal if within one\r\n          this.close();\r\n        }\r\n        break;\r\n      case \"Tab\":\r\n        if (this.isOpen) {\r\n          this.close();\r\n        }\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  handleClick(ev: MouseEvent) {\r\n    if (this.isOpen) {\r\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\r\n        // Re-announce if clicking any part of the component while open\r\n        this.announceToggletip();\r\n      } else {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n\r\n  open() {\r\n    this.isOpen = true;\r\n    this.announceToggletip();\r\n  }\r\n\r\n  close() {\r\n    this.isOpen = false;\r\n    this.hideTooltip();\r\n  }\r\n\r\n  handleBlur() {\r\n    this.hideTooltip();\r\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\r\n    this.liveRegionEl.innerHTML = \"\";\r\n  }\r\n\r\n  showTooltip() {\r\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\r\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\r\n    this.setToggletipPosition();\r\n    this.tooltipEl.classList.add(\"hover\");\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.classList.remove(\"hover\");\r\n  }\r\n\r\n  announceToggletip() {\r\n    this.liveRegionEl.innerHTML = \"\";\r\n    setTimeout(() => {\r\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\r\n    }, 10);\r\n  }\r\n\r\n  setToggletipPosition() {\r\n    // Vertical\r\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\r\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\r\n    }\r\n\r\n    // Horizontal\r\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\r\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\r\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n          type=\"button\"\r\n          aria-label={this.label}\r\n          onClick={() => {\r\n            this.setToggletipPosition();\r\n            this.open();\r\n          }}\r\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltip()}\r\n          onBlur={() => this.handleBlur()}\r\n        ></button>\r\n        <div\r\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\r\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\r\n          aria-hidden=\"true\"\r\n        >\r\n          {this.tooltipMessage}\r\n        </div>\r\n        <div\r\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\r\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\r\n        >\r\n          {this.tempTooltip}\r\n        </div>\r\n        <div\r\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n          class=\"live-region sr-only\"\r\n          role=\"status\"\r\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\r\n          aria-live=\"polite\"\r\n          aria-atomic=\"true\"\r\n        ></div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-toggletip.js","sourceRoot":"","sources":["../../../../src/components/wm-toggletip/wm-toggletip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\n\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\nimport { TooltipPlacement } from \"../../global/interfaces\";\n@Component({\n  tag: \"wm-toggletip\",\n  styleUrl: \"wm-toggletip.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Toggletip {\n  @Element() el!: HTMLWmToggletipElement;\n\n  @Prop() label?: string;\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\n  @Prop() tooltipText?: string; // DEPRECATED\n  get tempTooltip() {\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\n    return this.tooltip || this.tooltipText;\n  }\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @State() isOpen: boolean = false;\n  @State() isTabbing: boolean = false;\n\n  private toggletipEl!: HTMLDivElement;\n  private tooltipEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private tooltipMessage = intl.formatMessage({\n    id: \"toggletip.moreInformation\",\n    defaultMessage: \"More information\",\n  });\n\n  componentWillLoad() {\n    const validTooltipPlacement = [\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n      \"top-right\",\n      \"top-left\",\n      \"bottom-right\",\n      \"bottom-left\",\n    ];\n\n    if (!this.label) {\n      console.error(\"wm-toggletip must have a label property\");\n    }\n    if (!this.tempTooltip) {\n      console.error(\"wm-toggletip must have a tooltip property\");\n    }\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\n      console.error(\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\n      );\n    }\n    if (this.tooltipText) {\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isOpen) {\n          ev.stopPropagation(); // prevent closing modal if within one\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isOpen) {\n          this.close();\n        }\n    }\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    if (this.isOpen) {\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\n        // Re-announce if clicking any part of the component while open\n        this.announceToggletip();\n      } else {\n        this.close();\n      }\n    }\n  }\n\n  open() {\n    this.isOpen = true;\n    this.announceToggletip();\n  }\n\n  close() {\n    this.isOpen = false;\n    this.hideTooltip();\n  }\n\n  handleBlur() {\n    this.hideTooltip();\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\n    this.liveRegionEl.innerHTML = \"\";\n  }\n\n  showTooltip() {\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\n    this.setToggletipPosition();\n    this.tooltipEl.classList.add(\"hover\");\n  }\n\n  hideTooltip() {\n    this.tooltipEl.classList.remove(\"hover\");\n  }\n\n  announceToggletip() {\n    this.liveRegionEl.innerHTML = \"\";\n    setTimeout(() => {\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\n    }, 10);\n  }\n\n  setToggletipPosition() {\n    // Vertical\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\n    }\n\n    // Horizontal\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          type=\"button\"\n          aria-label={this.label}\n          onClick={() => {\n            this.setToggletipPosition();\n            this.open();\n          }}\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltip()}\n          onBlur={() => this.handleBlur()}\n        ></button>\n        <div\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\n          aria-hidden=\"true\"\n        >\n          {this.tooltipMessage}\n        </div>\n        <div\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\n        >\n          {this.tempTooltip}\n        </div>\n        <div\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          role=\"status\"\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}