@watermarkinsights/ripple 3.8.2 → 3.9.0-2

package/dist/esm/wm-toggletip.entry.js

@@ -1,131 +1,131 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-cd8f9ae2.js';
-import { i as intl, l as shouldOpenUp, m as shouldOpenDown, n as shouldShiftRight, o as shouldShiftLeft } from './functions-8d09a511.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d649a861.js';
+import { i as intl, l as shouldOpenUp, m as shouldOpenDown, n as shouldShiftRight, o as shouldShiftLeft } from './functions-b478ef24.js';
 
-const wmToggletipCss = ":host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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:\"\\f2fc\";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;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;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{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const wmToggletipCss = "@charset \"UTF-8\";:host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;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{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
-let Toggletip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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" })));
-  }
-  get el() { return getElement(this); }
-};
+const Toggletip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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" })));
+  }
+  get el() { return getElement(this); }
+};
 Toggletip.style = wmToggletipCss;
 
 export { Toggletip as wm_toggletip };