@ukic/canary-web-components 2.0.0-canary.0

package/dist/collection/components/ic-tooltip/ic-tooltip.js

@@ -0,0 +1,294 @@
+import { Host, h, } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+export class Tooltip {
+  constructor() {
+    this.delayedHideEvents = ["mouseleave"];
+    this.instantHideEvents = ["focusout"];
+    this.mouseOverTool = false;
+    this.persistTooltip = 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", "");
+      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));
+        }
+      });
+      document[method]("keydown", (event) => this.handleKeyDown(event.key));
+    };
+    this.disableClick = false;
+    this.disableHover = false;
+    this.placement = "bottom";
+    this.target = undefined;
+    this.label = undefined;
+  }
+  updateLabel(newValue) {
+    const describedBySpan = this.el.previousElementSibling;
+    if (describedBySpan !== null) {
+      describedBySpan.innerText = newValue;
+    }
+  }
+  disconnectedCallback() {
+    this.manageEventListeners("remove");
+    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 },
+        },
+      ],
+    });
+    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)));
+  }
+  static get is() { return "ic-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-tooltip.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disableClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method."
+        },
+        "attribute": "disable-click",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableHover": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the tooltip will not be displayed on hover, it will require a click or using the display method."
+        },
+        "attribute": "disable-hover",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcTooltipPlacements",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "IcTooltipPlacements": {
+              "location": "import",
+              "path": "./ic-tooltip.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The position of the tool-tip in relation to the parent element."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used."
+        },
+        "attribute": "target",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display on the tooltip."
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "displayTooltip": {
+        "complexType": {
+          "signature": "(show: boolean, persistTooltip?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show Whether to show or hide the tooltip"
+                }],
+              "text": "Whether to show or hide the tooltip"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover"
+                }],
+              "text": "Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method to programmatically show/hide the tooltip without needing to interact with an anchor element",
+          "tags": [{
+              "name": "param",
+              "text": "show Whether to show or hide the tooltip"
+            }, {
+              "name": "param",
+              "text": "persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "updateLabel"
+      }];
+  }
+}
+//# sourceMappingURL=ic-tooltip.js.map

package/dist/collection/components/ic-tooltip/ic-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAOvE,MAAM,OAAO,OAAO;;IAEV,sBAAiB,GAAG,CAAC,YAAY,CAAC,CAAC;IACnC,sBAAiB,GAAG,CAAC,UAAU,CAAC,CAAC;IACjC,kBAAa,GAAY,KAAK,CAAC;IAC/B,mBAAc,GAAG,KAAK,CAAC;IAEvB,2BAAsB,GAAG;MAC/B,QAAQ,EAAE,UAAU;MACpB,IAAI,EAAE,UAAU;MAChB,GAAG,EAAE,MAAM;MACX,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE,KAAK;MACb,QAAQ,EAAE,QAAQ;KACnB,CAAC;IACM,eAAU,GAAG;MACnB,CAAC,IAAI,CAAC,YAAY,IAAI,YAAY;MAClC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAS;MAC/B,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO;KAC9B,CAAC;IA2CM,SAAI,GAAG,CAAC,MAAgB,EAAE,EAAE;MAClC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iCAC1B,OAAO,KACV,SAAS,EAAE;UACT,GAAG,OAAO,CAAC,SAAS;UACpB,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE;SAC1C,IACD,CAAC,CAAC;MACJ,MAAM,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC,CAAC;IAEM,SAAI,GAAG,CAAC,MAAgB,EAAE,EAAE;MAClC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;MAC1C,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iCAC1B,OAAO,KACV,SAAS,EAAE;UACT,GAAG,OAAO,CAAC,SAAS;UACpB,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAE;SAC3C,IACD,CAAC,CAAC;MACJ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAgB,EAAE,EAAE;MAC/C,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;UAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACnB;MACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAgB,EAAE,EAAE;MAC/C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAE;MACtC,IAAI,GAAG,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QAC5C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAChC;IACH,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,MAAwB,EAAE,EAAE;MAC1D,MAAM,MAAM,GACV,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,qBAAqB,CAAC;MAEhE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAChC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;UAC9B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;SAC7D;MACH,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CACb,KAAK,EACL,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAC7D,CAAC;MACJ,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;QAC1E,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;UAC9B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5C,CAAC;SACH;MACH,CAAC,CAAC,CAAC;MAEH,QAAQ,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE,CACnD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAC9B,CAAC;IACJ,CAAC,CAAC;wBAhH+B,KAAK;wBAKL,KAAK;qBAKI,QAAQ;;;;EAalD,WAAW,CAAC,QAAgB;IAC1B,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAqC,CAAC;IACtE,IAAI,eAAe,KAAK,IAAI,EAAE;MAC5B,eAAe,CAAC,SAAS,GAAG,QAAQ,CAAC;KACtC;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;EAChC,CAAC;EAiFD,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE;MACxD,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;WAChB;SACF;QACD;UACE,IAAI,EAAE,OAAO;UACb,OAAO,EAAE;YACP,OAAO,EAAE,IAAI,CAAC,KAAK;WACpB;SACF;QACD;UACE,IAAI,EAAE,gBAAgB;UACtB,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;SAC1C;OACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEjC,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,SAAS,CACV,CAAC;IAEF,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;MAC7B,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACvD,eAAe,CAAC,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC;MACjD,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;MAClD,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;MAElE,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;KAC/D;EACH,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,cAAc,CAAC,IAAa,EAAE,cAAwB;IAC1D,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACrC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EACzE,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;MACjC,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,EAClD,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,sBAAsB;QAE5B,qBAAe,OAAO,EAAC,SAAS,IAAE,KAAK,CAAiB;QACxD,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAoB,CAAC,EAChD,KAAK,EAAC,kBAAkB,8BAEnB,CACH;MACN,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click or using the display method.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    this.popperInstance.destroy();\n  }\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\" && !this.persistTooltip) {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () => this.mouseEnterTooltip());\n      }\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](\n        event,\n        () => !this.persistTooltip && this.hide(this.popperInstance)\n      );\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () =>\n          this.mouseLeaveTooltip(this.popperInstance)\n        );\n      }\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n        {\n          name: \"eventListeners\",\n          options: { scroll: false, resize: false },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show(this.popperInstance) : this.hide(this.popperInstance);\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tooltip/ic-tooltip.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-tooltip.types.js.map

package/dist/collection/components/ic-tooltip/ic-tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.types.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcTooltipPlacements =\n  | \"top-start\"\n  | \"top\"\n  | \"top-end\"\n  | \"right-start\"\n  | \"right\"\n  | \"right-end\"\n  | \"bottom-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"left-end\"\n  | \"left\"\n  | \"left-start\";\n"]}

package/dist/collection/components/ic-tooltip/test/a11y/ic-tooltip.test.a11y.js

@@ -0,0 +1,15 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkLightElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-tooltip", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-tooltip
+    label="This is a description of the button"
+    target="test-button"
+    ><button aria-describedby="ic-tooltip-test-button">Default</button></ic-tooltip
+  >`);
+    checkLightElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-tooltip.test.a11y.js.map

package/dist/collection/components/ic-tooltip/test/a11y/ic-tooltip.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/a11y/ic-tooltip.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,oCAAoC,CAAC;AAEvF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;IAIzB,CAAC,CAAC;IACF,iCAAiC,CAAC,EAAE,CAAC,CAAC;IACtC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkLightElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-tooltip\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-tooltip\n    label=\"This is a description of the button\"\n    target=\"test-button\"\n    ><button aria-describedby=\"ic-tooltip-test-button\">Default</button></ic-tooltip\n  >`);\n    checkLightElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js

@@ -0,0 +1,115 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-tooltip component", () => {
+  it("should apply the correct label", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label" placement="right-end"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> ic-typography");
+    const text = await tooltip.innerText;
+    expect(text).toBe("test-label");
+  });
+  it("should apply the correct placement", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label" placement="right-end"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltip.getAttribute("data-popper-placement")).toBe("right-end");
+  });
+  it("should show on focus", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.focus();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should show on hover", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.hover();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should still show when cursor moves to tooltip", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.hover();
+    await tooltip.hover();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should close when cursor moves away", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button id="button-1">Button 1</button></ic-tooltip><button id="button-2">Button 2</button>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button1 = await page.find("#button-1");
+    const button2 = await page.find("#button-2");
+    await button1.hover();
+    await button2.hover();
+    await page.waitForTimeout(200);
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should close when focus moves away", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button id="button-1">Button 1</button></ic-tooltip><button id="button-2">Button 2</button>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button1 = await page.find("#button-1");
+    const button2 = await page.find("#button-2");
+    await button1.focus();
+    await button2.focus();
+    await page.waitForTimeout(200);
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should close when escape key pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.focus();
+    await page.keyboard.press("Escape");
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should apply the aria description from hidden span to an element using aria-describedby", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="ic-tooltip-test-button-right-end" label="test-label" placement="right-end"><button aria-describedby="test-button-right-end">IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltipSpan = await page.find("span.ic-tooltip-label");
+    const text = await tooltipSpan.innerText;
+    expect(text).toBe("test-label");
+  });
+  it("should display the tooltip when the displayTooltip method is called", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find("ic-tooltip");
+    const tooltipContainer = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+    await tooltip.callMethod("displayTooltip", true, true);
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await page.keyboard.press("Escape");
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await tooltip.callMethod("displayTooltip", false);
+    expect(await tooltipContainer.isVisible()).toBe(false);
+  });
+  it("should still dismiss the tooltip using the keyboard if persistTooltip is false", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find("ic-tooltip");
+    const tooltipContainer = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+    await tooltip.callMethod("displayTooltip", true, false);
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await page.keyboard.press("Escape");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+  });
+});
+//# sourceMappingURL=ic-tooltip.e2e.js.map

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/basic/ic-tooltip.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,qHAAqH,CACtH,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;IACjE,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC;IAErC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAClC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,qHAAqH,CACtH,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IAEzE,MAAM,CAAC,MAAM,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAC9D,WAAW,CACZ,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;IAC9D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IAEtB,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,6IAA6I,CAC9I,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE7C,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACtB,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACtB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,6IAA6I,CAC9I,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE7C,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACtB,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACtB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yFAAyF,EAAE,KAAK,IAAI,EAAE;IACvG,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,uLAAuL,CACxL,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,SAAS,CAAC;IAEzC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAClC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;IACnF,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CACtC,uCAAuC,CACxC,CAAC;IACF,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEvD,MAAM,OAAO,CAAC,UAAU,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtD,MAAM,OAAO,CAAC,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gFAAgF,EAAE,KAAK,IAAI,EAAE;IAC9F,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,+FAA+F,CAChG,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CACtC,uCAAuC,CACxC,CAAC;IACF,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEvD,MAAM,OAAO,CAAC,UAAU,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,CAAC,MAAM,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should apply the correct label\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> ic-typography\");\n    const text = await tooltip.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should apply the correct placement\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n\n    expect(await tooltip.getAttribute(\"data-popper-placement\")).toBe(\n      \"right-end\"\n    );\n  });\n\n  it(\"should show on focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should show on hover\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should still show when cursor moves to tooltip\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n    await tooltip.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should close when cursor moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.hover();\n    await button2.hover();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when focus moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.focus();\n    await button2.focus();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n    await page.keyboard.press(\"Escape\");\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should apply the aria description from hidden span to an element using aria-describedby\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"ic-tooltip-test-button-right-end\" label=\"test-label\" placement=\"right-end\"><button aria-describedby=\"test-button-right-end\">IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltipSpan = await page.find(\"span.ic-tooltip-label\");\n    const text = await tooltipSpan.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should display the tooltip when the displayTooltip method is called\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, true);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await tooltip.callMethod(\"displayTooltip\", false);\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n\n  it(\"should still dismiss the tooltip using the keyboard if persistTooltip is false\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, false);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n});\n"]}

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js

@@ -0,0 +1,128 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { waitForTimeout } from "../../../../testspec.setup";
+import { Tooltip } from "../../ic-tooltip";
+beforeAll(() => {
+  jest.spyOn(console, "error").mockImplementation(jest.fn());
+});
+describe("ic-loading-indicator component", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip label="tooltip"></ic-tooltip>`,
+    });
+    expect(page.root).toMatchSnapshot(`ic-tooltip-render`);
+  });
+  it("should appear when triggered", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should appear when triggered by click", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip" disable-hover=true><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should disappear when triggered", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.hide(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should disappear on mouseleave", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.mouseLeaveTooltip(page.rootInstance.popperInstance);
+    await waitForTimeout(200);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should remain when mouse remains on tooltip", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.mouseEnterTooltip();
+    await page.waitForChanges();
+    await page.rootInstance.checkCloseTooltip(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should close the tooltip on Escape keydown", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    const body = window.document.body;
+    body.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should watch for label updates", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.label).toBe("tooltip");
+    page.root.label = "new tooltip";
+    page.rootInstance.updateLabel();
+    await page.waitForChanges();
+    expect(page.rootInstance.label).toBe("new tooltip");
+    page.rootInstance.disconnectedCallback();
+  });
+  it("should open the tooltip using the displayTooltip method and should persist when persistTooltip is true", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.displayTooltip(true, true);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).not.toBeNull;
+    window.document.body.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).not.toBeNull;
+    await page.rootInstance.displayTooltip(false, false);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+});
+//# sourceMappingURL=ic-tooltip.spec.js.map