@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/components/ic-tooltip2.js

@@ -1793,354 +1793,235 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-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) 0.625rem;border-radius:var(--ic-border-radius);border:var(--ic-space-1px) 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-space-1px) 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 (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-hc-border)}}";
+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.screenReaderOnlyStyles = {
-      position: "absolute",
-      left: "-10000px",
-      top: "auto",
-      width: "1px",
-      height: "1px",
-      overflow: "hidden",
-    };
-    this.showEvents = [
-      !this.disableHover && "mouseenter",
-      !this.disableHover && "focusin",
-      !this.disableClick && "click",
-    ];
-    this.show = (popper) => {
-      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);
-      }
-      popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-          ...options.modifiers,
-          { name: "eventListeners", enabled: true },
-        ] })));
-      popper.update();
-    };
-    this.hide = (popper) => {
-      this.toolTip.removeAttribute("data-show");
-      popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-          ...options.modifiers,
-          { name: "eventListeners", enabled: false },
-        ] })));
-      this.persistTooltip = false;
-    };
-    this.checkCloseTooltip = (popper) => {
-      setTimeout(() => {
-        if (!this.mouseOverTool && !this.persistTooltip) {
-          this.hide(popper);
-        }
-      }, 100);
-    };
-    this.mouseEnterTooltip = () => {
-      this.mouseOverTool = true;
-    };
-    this.mouseLeaveTooltip = (popper) => {
-      this.mouseOverTool = false;
-      this.checkCloseTooltip(popper);
-    };
-    this.handleKeyDown = (key) => {
-      if (key === "Escape" && !this.persistTooltip) {
-        this.hide(this.popperInstance);
-      }
-    };
-    this.manageEventListeners = (action) => {
-      const method = action === "add" ? "addEventListener" : "removeEventListener";
-      this.showEvents.forEach((event) => {
-        this.el[method](event, () => this.show(this.popperInstance));
-        if (this.toolTip !== undefined) {
-          this.toolTip[method](event, () => this.mouseEnterTooltip());
-        }
-      });
-      this.instantHideEvents.forEach((event) => {
-        this.el[method](event, () => !this.persistTooltip && this.hide(this.popperInstance));
-      });
-      this.delayedHideEvents.forEach((event) => {
-        this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));
-        if (this.toolTip !== undefined) {
-          this.toolTip[method](event, () => this.mouseLeaveTooltip(this.popperInstance));
+    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 && "mouseenter",
+            !this.disableHover && "focusin",
+            !this.disableClick && "click",
+        ];
+        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 = () => {
+            if (this.label) {
+                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 },
+                        },
+                    ],
+                });
+            }
+            else {
+                console.warn(`Tooltip can't display without prop 'label' set`);
+            }
+        };
+        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.disableClick = false;
+        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", (event) => this.handleKeyDown(event.key));
-    };
+    }
+    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
      */
-    // @Method()
-    // async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {
-    //   this.persistTooltip = persistTooltip;
-    //   show ? this.show() : this.hide();
-    // }
-    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.disableClick = false;
-    this.disableHover = false;
-    this.placement = "bottom";
-    this.target = undefined;
-    this.label = undefined;
-  }
-  updateLabel(newValue) {
-    if (this.ariaDescribedBy !== null) {
-      this.ariaDescribedBy.innerText = newValue;
+    async displayTooltip(show, persistTooltip) {
+        this.persistTooltip = persistTooltip;
+        show ? this.show() : this.hide();
     }
-  }
-  disconnectedCallback() {
-    this.manageEventListeners("remove");
-    if (this.popperInstance !== undefined) {
-      this.popperInstance.destroy();
+    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)));
     }
-  }
-  componentDidLoad() {
-    var _a;
-    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.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");
-    if (this.target !== undefined) {
-      this.ariaDescribedBy = document.createElement("span");
-      this.ariaDescribedBy.id = `ic-tooltip-${this.target}`;
-      this.ariaDescribedBy.innerText = this.label;
-      this.ariaDescribedBy.classList.add("ic-tooltip-label");
-      Object.assign(this.ariaDescribedBy.style, this.screenReaderOnlyStyles);
-      this.el.insertAdjacentElement("beforebegin", this.ariaDescribedBy);
-    }
-  }
-  // private 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 },
-  //       },
-  //     ],
-  //   });
-  // };
-  // private hide = () => {
-  //   this.toolTip.removeAttribute("data-show");
-  //   this.persistTooltip = false;
-  // };
-  // private checkCloseTooltip = () => {
-  //   setTimeout(() => {
-  //     if (!this.mouseOverTool && !this.persistTooltip) {
-  //       this.hide();
-  //     }
-  //   }, 100);
-  // };
-  // private mouseEnterTooltip = () => {
-  //   this.mouseOverTool = true;
-  // };
-  // private mouseLeaveTooltip = () => {
-  //   this.mouseOverTool = false;
-  //   this.checkCloseTooltip();
-  // };
-  // private handleKeyDown = (event: KeyboardEvent) => {
-  //   if (event.key === "Escape" && !this.persistTooltip) {
-  //     this.hide();
-  //   }
-  // };
-  // private manageEventListeners = (action: "add" | "remove") => {
-  //   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.manageEventListeners("add");
-  // onComponentRequiredPropUndefined(
-  //   [{ prop: this.label, propName: "label" }],
-  //   "Tooltip"
-  // );
-  // if (this.target !== undefined) {
-  //   const ariaDescribedBy = document.createElement("span");
-  //   ariaDescribedBy.id = `ic-tooltip-${this.target}`;
-  //   ariaDescribedBy.innerText = this.label;
-  //   ariaDescribedBy.classList.add("ic-tooltip-label");
-  //   Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);
-  //   this.el.insertAdjacentElement("beforebegin", ariaDescribedBy);
-  // }
-  // }
-  /**
-   * 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.popperInstance) : this.hide(this.popperInstance);
-  }
-  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", { variant: "caption" }, label), h("div", { ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow", "data-popper-arrow": true })), h("slot", null)));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "label": ["updateLabel"]
-  }; }
-  static get style() { return icTooltipCss; }
+    get el() { return this; }
+    static get style() { return icTooltipCss; }
 }, [1, "ic-tooltip", {
-    "disableClick": [4, "disable-click"],
-    "disableHover": [4, "disable-hover"],
-    "placement": [1025],
-    "target": [513],
-    "label": [1],
-    "displayTooltip": [64]
-  }, undefined, {
-    "label": ["updateLabel"]
-  }]);
+        "disableClick": [4, "disable-click"],
+        "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 };