@ukic/web-components 2.2.0 → 2.3.0

package/dist/components/ic-tooltip2.js

@@ -1793,7 +1793,7 @@ 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}: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}: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))}@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) 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 Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement$1 {
   constructor() {
@@ -1801,9 +1801,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     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",
@@ -1815,9 +1817,97 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     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", "");
-      this.popperInstance.update();
+      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");
@@ -1869,46 +1959,31 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     this.label = undefined;
   }
   updateLabel(newValue) {
-    const describedBySpan = this.el.previousElementSibling;
-    if (describedBySpan !== null) {
-      describedBySpan.innerText = newValue;
+    if (this.ariaDescribedBy !== null) {
+      this.ariaDescribedBy.innerText = newValue;
     }
   }
   disconnectedCallback() {
     this.manageEventListeners("remove");
-    this.popperInstance.destroy();
+    if (this.popperInstance !== undefined) {
+      this.popperInstance.destroy();
+    }
   }
   componentDidLoad() {
-    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 },
-        },
-      ],
-    });
+    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");
     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);
+      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);
     }
   }
   /**
@@ -1931,7 +2006,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
   static get style() { return icTooltipCss; }
 }, [1, "ic-tooltip", {
     "disableHover": [4, "disable-hover"],
-    "placement": [1],
+    "placement": [1025],
     "target": [513],
     "label": [1],
     "displayTooltip": [64]