@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,118 +1,118 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7e11ea42.js';
-import { i as intl, h as hideTooltip, m as shouldOpenUp, n as shouldOpenDown, o as shouldShiftRight, p as shouldShiftLeft, s as showTooltip } from './functions-5afd09f4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f164fbca.js';
+import { i as intl, h as hideTooltip, m as shouldOpenUp, n as shouldOpenDown, o as shouldShiftRight, p as shouldShiftLeft, s as showTooltip } from './functions-d0e70094.js';
 
 const wmToggletipCss = ":host{--wmcolor-toggletip-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-text:var(--wmcolor-icon-ondark);--wmcolor-toggletip-text:var(--wmcolor-text-ondark);display:inline-block;position:relative;height:40px;width:40px}:host .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{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:var(--wmcolor-toggletip-icon-background);background:radial-gradient(var(--wmcolor-toggletip-icon-text) 40%, transparent 0%)}:host .button:focus{outline:none}:host .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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}:host .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .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:var(--wmcolor-tooltip-background);color:var(--wmcolor-tooltip-text);padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .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{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:var(--wmcolor-toggletip-background);color:var(--wmcolor-toggletip-text);font-size:14px;z-index:30}:host .toggletip.top:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);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{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);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{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .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{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left{bottom:40px;right:0px}:host .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 Toggletip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tooltipMessage = intl.formatMessage({
-      id: "toggletip.moreInformation",
-      defaultMessage: "More information",
-    });
-    this.label = undefined;
-    this.tooltip = undefined;
-    this.tooltipPosition = "bottom-right";
-    this.isOpen = false;
-    this.isTabbing = false;
-  }
-  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");
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tooltipMessage = intl.formatMessage({
+            id: "toggletip.moreInformation",
+            defaultMessage: "More information",
+        });
+        this.label = undefined;
+        this.tooltip = undefined;
+        this.tooltipPosition = "bottom-right";
+        this.isOpen = false;
+        this.isTabbing = false;
     }
-    if (!this.tooltip) {
-      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}`);
+    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.tooltip) {
+            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}`);
+        }
     }
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "Escape":
-        ev.preventDefault();
-        if (this.isOpen) {
-          ev.stopPropagation(); // prevent closing modal if within one
-          this.close();
+    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();
+                }
         }
-        break;
-      case "Tab":
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleClick(ev) {
         if (this.isOpen) {
-          this.close();
+            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();
+            }
         }
     }
-  }
-  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
+    open() {
+        hideTooltip();
+        this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
+        this.isOpen = true;
         this.announceToggletip();
-      }
-      else {
-        this.close();
-      }
     }
-  }
-  open() {
-    hideTooltip();
-    this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
-    this.isOpen = true;
-    this.announceToggletip();
-  }
-  close() {
-    this.isOpen = false;
-    hideTooltip();
-  }
-  handleBlur() {
-    hideTooltip();
-    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
-    this.liveRegionEl.innerHTML = "";
-  }
-  announceToggletip() {
-    this.liveRegionEl.innerHTML = "";
-    setTimeout(() => {
-      this.liveRegionEl.innerHTML = this.tooltip;
-    }, 10);
-  }
-  setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
-    // Vertical
-    if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
-      pos = pos.replace("bottom", "top");
+    close() {
+        this.isOpen = false;
+        hideTooltip();
+    }
+    handleBlur() {
+        hideTooltip();
+        // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
+        this.liveRegionEl.innerHTML = "";
     }
-    else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
-      pos = pos.replace("top", "bottom");
+    announceToggletip() {
+        this.liveRegionEl.innerHTML = "";
+        setTimeout(() => {
+            this.liveRegionEl.innerHTML = this.tooltip;
+        }, 10);
     }
-    // Horizontal
-    if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
-      pos = pos.replace("left", "right");
+    setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
+        // Vertical
+        if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
+            pos = pos.replace("bottom", "top");
+        }
+        else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
+            pos = pos.replace("top", "bottom");
+        }
+        // Horizontal
+        if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
+            pos = pos.replace("left", "right");
+        }
+        else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
+            pos = pos.replace("right", "left");
+        }
     }
-    else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
-      pos = pos.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.open(),
+            // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => this.open(),
-      // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-      onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
 };
 Toggletip.style = wmToggletipCss;