@ukic/web-components 2.8.0 → 2.9.0

package/dist/components/ic-tooltip2.js

@@ -1796,221 +1796,223 @@ var createPopper = /*#__PURE__*/popperGenerator({
 const icTooltipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-architectural-40);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-architectural-40);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-hc-border)}}";
 
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.delayedHideEvents = ["mouseleave"];
-    this.dialogOverflow = false;
-    this.instantHideEvents = ["focusout"];
-    this.mouseOverTool = false;
-    this.persistTooltip = false;
-    this.onDialog = false;
-    this.showEvents = this.disableHover
-      ? ["click"]
-      : ["mouseenter", "focusin"];
-    this.getTooltipTranslate = (dialogEl) => {
-      const child = this.el.children[0].getBoundingClientRect();
-      let tooltipX;
-      let tooltipY;
-      switch (this.placement) {
-        case "bottom":
-          tooltipX = child.left - dialogEl.left - 0.5 * child.width;
-          tooltipY = child.bottom - dialogEl.top;
-          break;
-        case "bottom-start":
-          tooltipX = child.left - dialogEl.left;
-          tooltipY = child.bottom - dialogEl.top;
-          break;
-        case "bottom-end":
-          tooltipX = child.right - dialogEl.right;
-          tooltipY = child.bottom - dialogEl.top;
-          break;
-        case "top":
-          tooltipX = child.left - dialogEl.left - 0.5 * child.width;
-          tooltipY = child.top - dialogEl.bottom;
-          break;
-        case "top-start":
-          tooltipX = child.left - dialogEl.left;
-          tooltipY = child.top - dialogEl.bottom;
-          break;
-        case "top-end":
-          tooltipX = child.right - dialogEl.right;
-          tooltipY = child.top - dialogEl.bottom;
-          break;
-        case "left":
-        case "left-start":
-          tooltipX = child.right - dialogEl.right - child.width;
-          tooltipY = child.bottom - dialogEl.top - child.height;
-          break;
-        case "left-end":
-          tooltipX = child.right - dialogEl.right - child.width;
-          tooltipY = child.top - dialogEl.bottom + child.height;
-          break;
-        case "right":
-        case "right-start":
-          tooltipX = child.left - dialogEl.left + child.width;
-          tooltipY = child.bottom - dialogEl.top - child.height;
-          break;
-        case "right-end":
-          tooltipX = child.left - dialogEl.left + child.width;
-          tooltipY = child.top - dialogEl.bottom + child.height;
-          break;
-      }
-      if (this.dialogOverflow && tooltipX < 0) {
-        if (this.placement.includes("top") || this.placement.includes("bottom")) {
-          this.toolTip.style.setProperty("--tooltip-arrow-translate", `${tooltipX}px`);
-          tooltipX = child.left - dialogEl.left;
-        }
-        if (this.placement.includes("left")) {
-          this.placement = "right";
-          tooltipX = child.left - dialogEl.left + child.width;
-        }
-      }
-      this.toolTip.style.setProperty("--tooltip-translate-x", `${tooltipX}px`);
-      this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
-    };
-    this.show = () => {
-      this.toolTip.setAttribute("data-show", "");
-      if (this.onDialog) {
-        this.el.classList.add("on-dialog");
-        const dialogEl = this.icDialogEl.shadowRoot
-          .querySelector("dialog")
-          .getBoundingClientRect();
-        this.getTooltipTranslate(dialogEl);
-      }
-      this.popperInstance = createPopper(this.el, this.toolTip, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 10],
-            },
-          },
-          {
-            name: "arrow",
-            options: {
-              element: this.arrow,
-            },
-          },
-          {
-            name: "eventListeners",
-            options: { scroll: false, resize: false },
-          },
-        ],
-      });
-    };
-    this.hide = () => {
-      this.toolTip.removeAttribute("data-show");
-      this.persistTooltip = false;
-    };
-    this.checkCloseTooltip = () => {
-      setTimeout(() => {
-        if (!this.mouseOverTool && !this.persistTooltip) {
-          this.hide();
-        }
-      }, 100);
-    };
-    this.mouseEnterTooltip = () => {
-      this.mouseOverTool = true;
-    };
-    this.mouseLeaveTooltip = () => {
-      this.mouseOverTool = false;
-      this.checkCloseTooltip();
-    };
-    this.handleKeyDown = (event) => {
-      if (event.key === "Escape" && !this.persistTooltip) {
-        this.hide();
-      }
-    };
-    this.manageEventListeners = (action) => {
-      const method = action === "add" ? "addEventListener" : "removeEventListener";
-      this.showEvents.forEach((event) => {
-        this.el[method](event, this.show);
-        if (this.toolTip !== undefined) {
-          this.toolTip[method](event, this.mouseEnterTooltip);
-        }
-      });
-      if (!this.persistTooltip) {
-        this.instantHideEvents.forEach((event) => {
-          this.el[method](event, this.hide);
-        });
-      }
-      this.delayedHideEvents.forEach((event) => {
-        this.el[method](event, this.checkCloseTooltip);
-        if (this.toolTip !== undefined) {
-          this.toolTip[method](event, this.mouseLeaveTooltip);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.delayedHideEvents = ["mouseleave"];
+        this.dialogOverflow = false;
+        this.instantHideEvents = ["focusout"];
+        this.mouseOverTool = false;
+        this.persistTooltip = false;
+        this.onDialog = false;
+        this.showEvents = this.disableHover
+            ? ["click"]
+            : ["mouseenter", "focusin"];
+        this.getTooltipTranslate = (dialogEl) => {
+            const child = this.el.children[0].getBoundingClientRect();
+            let tooltipX;
+            let tooltipY;
+            switch (this.placement) {
+                case "bottom":
+                    tooltipX = child.left - dialogEl.left - 0.5 * child.width;
+                    tooltipY = child.bottom - dialogEl.top;
+                    break;
+                case "bottom-start":
+                    tooltipX = child.left - dialogEl.left;
+                    tooltipY = child.bottom - dialogEl.top;
+                    break;
+                case "bottom-end":
+                    tooltipX = child.right - dialogEl.right;
+                    tooltipY = child.bottom - dialogEl.top;
+                    break;
+                case "top":
+                    tooltipX = child.left - dialogEl.left - 0.5 * child.width;
+                    tooltipY = child.top - dialogEl.bottom;
+                    break;
+                case "top-start":
+                    tooltipX = child.left - dialogEl.left;
+                    tooltipY = child.top - dialogEl.bottom;
+                    break;
+                case "top-end":
+                    tooltipX = child.right - dialogEl.right;
+                    tooltipY = child.top - dialogEl.bottom;
+                    break;
+                case "left":
+                case "left-start":
+                    tooltipX = child.right - dialogEl.right - child.width;
+                    tooltipY = child.bottom - dialogEl.top - child.height;
+                    break;
+                case "left-end":
+                    tooltipX = child.right - dialogEl.right - child.width;
+                    tooltipY = child.top - dialogEl.bottom + child.height;
+                    break;
+                case "right":
+                case "right-start":
+                    tooltipX = child.left - dialogEl.left + child.width;
+                    tooltipY = child.bottom - dialogEl.top - child.height;
+                    break;
+                case "right-end":
+                    tooltipX = child.left - dialogEl.left + child.width;
+                    tooltipY = child.top - dialogEl.bottom + child.height;
+                    break;
+            }
+            if (this.dialogOverflow && tooltipX < 0) {
+                if (this.placement.includes("top") || this.placement.includes("bottom")) {
+                    this.toolTip.style.setProperty("--tooltip-arrow-translate", `${tooltipX}px`);
+                    tooltipX = child.left - dialogEl.left;
+                }
+                if (this.placement.includes("left")) {
+                    this.placement = "right";
+                    tooltipX = child.left - dialogEl.left + child.width;
+                }
+            }
+            this.toolTip.style.setProperty("--tooltip-translate-x", `${tooltipX}px`);
+            this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
+        };
+        this.show = () => {
+            this.toolTip.setAttribute("data-show", "");
+            if (this.onDialog) {
+                this.el.classList.add("on-dialog");
+                const dialogEl = this.icDialogEl.shadowRoot
+                    .querySelector("dialog")
+                    .getBoundingClientRect();
+                this.getTooltipTranslate(dialogEl);
+            }
+            this.popperInstance = createPopper(this.el, this.toolTip, {
+                placement: this.placement,
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 10],
+                        },
+                    },
+                    {
+                        name: "arrow",
+                        options: {
+                            element: this.arrow,
+                        },
+                    },
+                    {
+                        name: "eventListeners",
+                        options: { scroll: false, resize: false },
+                    },
+                ],
+            });
+        };
+        this.hide = () => {
+            this.toolTip.removeAttribute("data-show");
+            this.persistTooltip = false;
+        };
+        this.checkCloseTooltip = () => {
+            setTimeout(() => {
+                if (!this.mouseOverTool && !this.persistTooltip) {
+                    this.hide();
+                }
+            }, 100);
+        };
+        this.mouseEnterTooltip = () => {
+            this.mouseOverTool = true;
+        };
+        this.mouseLeaveTooltip = () => {
+            this.mouseOverTool = false;
+            this.checkCloseTooltip();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === "Escape" && !this.persistTooltip) {
+                this.hide();
+            }
+        };
+        this.manageEventListeners = (action) => {
+            const method = action === "add" ? "addEventListener" : "removeEventListener";
+            this.showEvents.forEach((event) => {
+                this.el[method](event, this.show);
+                if (this.toolTip !== undefined) {
+                    this.toolTip[method](event, this.mouseEnterTooltip);
+                }
+            });
+            if (!this.persistTooltip) {
+                this.instantHideEvents.forEach((event) => {
+                    this.el[method](event, this.hide);
+                });
+            }
+            this.delayedHideEvents.forEach((event) => {
+                this.el[method](event, this.checkCloseTooltip);
+                if (this.toolTip !== undefined) {
+                    this.toolTip[method](event, this.mouseLeaveTooltip);
+                }
+            });
+            document[method]("keydown", this.handleKeyDown);
+        };
+        this.disableHover = false;
+        this.maxLines = undefined;
+        this.placement = "bottom";
+        this.silent = false;
+        this.target = undefined;
+        this.label = undefined;
+    }
+    disconnectedCallback() {
+        this.manageEventListeners("remove");
+        if (this.popperInstance !== undefined) {
+            this.popperInstance.destroy();
         }
-      });
-      document[method]("keydown", this.handleKeyDown);
-    };
-    this.disableHover = false;
-    this.maxLines = undefined;
-    this.placement = "bottom";
-    this.target = undefined;
-    this.label = undefined;
-  }
-  disconnectedCallback() {
-    this.manageEventListeners("remove");
-    if (this.popperInstance !== undefined) {
-      this.popperInstance.destroy();
     }
-  }
-  componentDidLoad() {
-    var _a;
-    this.manageEventListeners("add");
-    this.icDialogEl = this.el.closest("ic-dialog");
-    this.dialogOverflow =
-      ((_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.getAttribute("data-overflow")) === "true";
-    this.onDialog = this.icDialogEl !== null;
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
-  }
-  componentDidRender() {
-    const typographyEl = this.el.shadowRoot.querySelector(".ic-tooltip-container > ic-typography");
-    this.maxLines > 0 &&
-      typographyEl.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
-  }
-  /**
-   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
-   * @param show Whether to show or hide the tooltip
-   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
-   */
-  async displayTooltip(show, persistTooltip) {
-    this.persistTooltip = persistTooltip;
-    show ? this.show() : this.hide();
-  }
-  render() {
-    const { label } = this;
-    return (h(Host, { class: { "ic-tooltip": true } }, h("div", { ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container" }, h("ic-typography", { maxLines: this.maxLines, variant: "caption" }, label), h("div", { ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", null)));
-  }
-  get el() { return this; }
-  static get style() { return icTooltipCss; }
+    componentDidLoad() {
+        var _a;
+        this.manageEventListeners("add");
+        this.icDialogEl = this.el.closest("ic-dialog");
+        this.dialogOverflow =
+            ((_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.getAttribute("data-overflow")) === "true";
+        this.onDialog = this.icDialogEl !== null;
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
+    }
+    componentDidRender() {
+        const typographyEl = this.el.shadowRoot.querySelector(".ic-tooltip-container > ic-typography");
+        this.maxLines > 0 &&
+            typographyEl.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
+    }
+    /**
+     * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
+     * @param show Whether to show or hide the tooltip
+     * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
+     */
+    async displayTooltip(show, persistTooltip) {
+        this.persistTooltip = persistTooltip;
+        show ? this.show() : this.hide();
+    }
+    render() {
+        const { label, maxLines, silent } = this;
+        return (h(Host, { class: { "ic-tooltip": true } }, h("div", { ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": silent }, h("ic-typography", { maxLines: maxLines, variant: "caption" }, label), h("div", { ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", null)));
+    }
+    get el() { return this; }
+    static get style() { return icTooltipCss; }
 }, [1, "ic-tooltip", {
-    "disableHover": [4, "disable-hover"],
-    "maxLines": [2, "max-lines"],
-    "placement": [1025],
-    "target": [513],
-    "label": [1],
-    "displayTooltip": [64]
-  }]);
+        "disableHover": [4, "disable-hover"],
+        "maxLines": [2, "max-lines"],
+        "placement": [1025],
+        "silent": [4],
+        "target": [513],
+        "label": [1],
+        "displayTooltip": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-tooltip", "ic-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-tooltip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tooltip);
-      }
-      break;
-    case "ic-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tooltip);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { Tooltip as T, createPopper as c, defineCustomElement as d };