@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/components/ic-tooltip2.js

@@ -1794,6 +1794,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // 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){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);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-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}: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-tooltip-border);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-border-hc)}}";
+const IcTooltipStyle0 = icTooltipCss;
 
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement$1 {
     constructor() {
@@ -1811,6 +1812,27 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             !this.disableHover && "focusin",
             !this.disableClick && "click",
         ];
+        /**
+         * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.
+         */
+        this.disableClick = false;
+        /**
+         * If `true`, the tooltip will not be displayed on hover, it will require a click.
+         */
+        this.disableHover = false;
+        /**
+         * The position of the tooltip in relation to the parent element.
+         */
+        this.placement = "bottom";
+        /**
+         * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.
+         */
+        this.silent = false;
+        /**
+         * Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        this.popperProps = {};
         this.getTooltipTranslate = (dialogEl) => {
             const child = this.el.children[0].getBoundingClientRect();
             let tooltipX;
@@ -1859,8 +1881,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
                     tooltipY = child.top - dialogEl.bottom + child.height;
                     break;
             }
-            if (this.dialogOverflow && tooltipX < 0) {
-                if (this.placement.includes("top") || this.placement.includes("bottom")) {
+            if (this.dialogOverflow && tooltipX && 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;
                 }
@@ -1873,14 +1896,13 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
         };
         this.show = () => {
+            var _a, _b, _c;
             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);
+                    const dialogEl = (_c = (_b = (_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("dialog")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                    dialogEl && this.getTooltipTranslate(dialogEl);
                 }
                 this.popperInstance = createPopper(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
                         {
@@ -1934,9 +1956,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         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 (event) {
+                    this.el[method](event, this.show);
+                    if (this.toolTip !== undefined) {
+                        this.toolTip[method](event, this.mouseEnterTooltip);
+                    }
                 }
             });
             if (!this.persistTooltip) {
@@ -1952,15 +1976,6 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             });
             document[method]("keydown", this.handleKeyDown);
         };
-        this.disableClick = false;
-        this.disableHover = false;
-        this.maxLines = undefined;
-        this.placement = "bottom";
-        this.silent = false;
-        this.target = undefined;
-        this.theme = "inherit";
-        this.label = undefined;
-        this.popperProps = {};
     }
     /**
      * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
@@ -1985,9 +2000,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         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}`);
+        var _a;
+        const typographyEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-tooltip-container > ic-typography");
+        this.maxLines &&
+            this.maxLines > 0 &&
+            (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`));
     }
     /**
      * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
@@ -1995,7 +2012,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
      * @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;
+        this.persistTooltip = !!persistTooltip;
         show ? this.show() : this.hide();
     }
     /**
@@ -2006,13 +2023,13 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: 'aca3cbb8e55d42c027d6a83039f98679ec1d5142', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, 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)));
+            } }, h("div", { key: '8032257b76f3569c736149a8528312509504dfd0', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '7d7eff208fb832a622261a77ba34ca21ce8b436e', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'dafaff61bbe8699ce3e33614ce08db4843dd24f2', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '9d2d6e403d1bb02ee999a1ea6afffccf9208b7a8' })));
     }
     get el() { return this; }
-    static get style() { return icTooltipCss; }
+    static get style() { return IcTooltipStyle0; }
 }, [1, "ic-tooltip", {
         "disableClick": [4, "disable-click"],
         "disableHover": [4, "disable-hover"],