wcs-core 2.5.4 → 2.9.0

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

@@ -1,111 +1,133 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
-import { getOverlay } from '../../utils/overlay';
+import { Component, h, Host, Prop, Element, Watch, Method } from '@stencil/core';
+// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because
+// the design system does not specify any spec for the tooltips.
+//
+// In a second time, if a need of customization is felt, it will be possible to use the lib in a
+// "Headless" mode where the rendering of the tooltip will be entirely in our charge, without
+// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/
+import tippy from 'tippy.js';
+/**
+ * Tooltips are used to provide additional information for features available on the website. These can improve the user
+ * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them
+ * (for longer content).
+ *
+ * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
+ */
 export class Tooltip {
   constructor() {
     /**
      * Where the tooltip is going to show relative to the element it's describing.
      */
     this.position = 'bottom';
+    /**
+     * Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside
+     * without hiding.
+     */
+    this.interactive = false;
+    /**
+     * Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.
+     *
+     * If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.
+     */
+    this.maxWidth = 350;
+    /**
+     * Delay in ms once a trigger event is fired before the tooltip shows or hides.
+     *
+     * You can provide an array with two values to define a different duration for show and hide.
+     *
+     * `[showDelay, hideDelay]`
+     *
+     * Use null to use default value.
+     */
+    this.delay = 0;
+    /**
+     * Duration in ms of the transition animation.
+     */
+    this.duration = [300, 250];
+    /**
+     * Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.
+     *
+     * See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger
+     */
+    this.trigger = 'mouseenter focus';
+    /**
+     * Allows you to change the theme used by tippy.
+     *
+     * The WCS theme is used by default and uses the WCS CSS variables.
+     *
+     * You can create a theme by following this documentation and choosing a custom name :
+     * https://atomiks.github.io/tippyjs/v6/themes/
+     */
+    this.theme = 'wcs';
   }
   componentWillLoad() {
-    const target = document.getElementById(this.for);
-    if (target === null) {
-      throw new Error(`Cannot find element with corresponding id: ${this.for}`);
-    }
-    this.target = target;
-    this.listen('mouseenter', 'show');
-    this.listen('focus', 'show');
-    this.listen('mouseleave', 'hide');
-    this.listen('blur', 'hide');
-    this.listen('tap', 'hide');
+    this.tippyInstance = tippy(document.getElementById(this.for), {
+      theme: this.theme,
+      allowHTML: true,
+      content: this.el.innerHTML,
+      maxWidth: this.maxWidth,
+      placement: this.position,
+      delay: this.delay,
+      duration: this.duration,
+      interactive: this.interactive,
+      trigger: this.trigger
+    });
   }
-  listen(eventName, className) {
-    this.target.addEventListener(eventName, () => {
-      if (className === 'hide') {
-        this.content.classList.replace('show', 'hide');
-      }
-      else {
-        this.content.classList.replace('hide', 'show');
-      }
-      this.updatePosition();
+  updateProps() {
+    this.tippyInstance.setProps({
+      interactive: this.interactive,
+      placement: this.position,
+      maxWidth: this.maxWidth,
+      theme: this.theme,
+      delay: this.delay,
+      duration: this.duration,
+      trigger: this.trigger
     });
   }
-  componentDidRender() {
-    const overlay = getOverlay();
-    this.content = this.el.shadowRoot.querySelector('.wcs-tooltip-content');
-    const nodes = this.el.shadowRoot.querySelector('slot')
-      ? this.el.shadowRoot.querySelector('slot').assignedNodes()
-      : this.content.querySelectorAll('*');
-    nodes.forEach(n => this.content.appendChild(n.cloneNode(true)));
-    this.content.remove();
-    overlay.appendChild(this.content);
-    this.updatePosition();
+  updateTippyContent() {
+    this.tippyInstance.setProps({
+      content: this.el.innerHTML
+    });
   }
-  updatePosition() {
-    // Function taken and adapted from https://github.com/PolymerElements/paper-tooltip/blob/master/paper-tooltip.js
-    // Thanks ! :-)
-    if (!this.target || !this.content.offsetParent) {
-      return;
-    }
-    const parentRect = this.content.offsetParent.getBoundingClientRect();
-    const targetRect = this.target.getBoundingClientRect();
-    const thisRect = this.content.getBoundingClientRect();
-    const borderWidth = 6;
-    const horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
-    const verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
-    const targetLeft = targetRect.left - parentRect.left;
-    const targetTop = targetRect.top - parentRect.top;
-    let tooltipLeft;
-    let tooltipTop;
-    switch (this.position) {
-      case 'top':
-        tooltipLeft = targetLeft + horizontalCenterOffset;
-        tooltipTop = targetTop - thisRect.height - borderWidth;
-        break;
-      case 'bottom':
-        tooltipLeft = targetLeft + horizontalCenterOffset;
-        tooltipTop = targetTop + targetRect.height + borderWidth;
-        break;
-      case 'left':
-        tooltipLeft = targetLeft - thisRect.width - borderWidth;
-        tooltipTop = targetTop + verticalCenterOffset;
-        break;
-      case 'right':
-        tooltipLeft = targetLeft + targetRect.width + borderWidth;
-        tooltipTop = targetTop + verticalCenterOffset;
-        break;
-    }
-    // Clip to the left/right side.
-    if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
-      this.content.style.right = '0px';
-      this.content.style.left = 'auto';
-    }
-    else {
-      this.content.style.left = Math.max(0, tooltipLeft) + 'px';
-      this.content.style.right = 'auto';
-    }
-    // Clip the top/bottom side.
-    if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
-      this.content.style.bottom = (parentRect.height - targetTop) + 'px';
-      this.content.style.top = 'auto';
-    }
-    else {
-      this.content.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
-      this.content.style.bottom = 'auto';
-    }
+  /**
+   * Programmatically hide the tooltip
+   */
+  async hide() {
+    this.tippyInstance.hide();
+  }
+  /**
+   * Programmatically show the tooltip
+   */
+  async show() {
+    this.tippyInstance.show();
+  }
+  /**
+   * Temporarily prevent the tooltip from showing or hiding
+   */
+  async disable() {
+    this.tippyInstance.disable();
+  }
+  /**
+   * Re-enable a disabled tooltip
+   */
+  async enable() {
+    this.tippyInstance.enable();
   }
   disconnectedCallback() {
-    // TODO: this gets called only at the component creation in ff < 63
-    // const overlay = getOverlay();
-    // overlay.removeChild(this.content);
+    this.tippyInstance.destroy();
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "wcs-tooltip-content hide" },
-        h("slot", null))));
+      h("slot", { onSlotchange: _ => this.updateTippyContent() })));
   }
   static get is() { return "wcs-tooltip"; }
   static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tooltip.css"]
+  }; }
   static get properties() { return {
     "for": {
       "type": "string",
@@ -119,13 +141,13 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "```html\n<span id=\"tooltiped\">Some content</span>\n<wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n```",
-            "name": "example"
+            "name": "example",
+            "text": "```html\n<span id=\"tooltiped\">Some content</span>\n<wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n```"
           }],
-        "text": "The **id** of the element the tooltip's going to describe."
+        "text": "The **id** of the element the tooltip's going to describe.\n\nThis property cannot be modified after initialization."
       },
       "attribute": "for",
-      "reflect": true
+      "reflect": false
     },
     "position": {
       "type": "string",
@@ -149,7 +171,203 @@ export class Tooltip {
       "attribute": "position",
       "reflect": true,
       "defaultValue": "'bottom'"
+    },
+    "interactive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\nwithout hiding."
+      },
+      "attribute": "interactive",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxWidth": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n\nIf the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen."
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "350"
+    },
+    "delay": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | [number, number]",
+        "resolved": "[number, number] | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Delay in ms once a trigger event is fired before the tooltip shows or hides.\n\nYou can provide an array with two values to define a different duration for show and hide.\n\n`[showDelay, hideDelay]`\n\nUse null to use default value."
+      },
+      "attribute": "delay",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | [number, number]",
+        "resolved": "[number, number] | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Duration in ms of the transition animation."
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "[300, 250]"
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n\nSee: https://atomiks.github.io/tippyjs/v6/all-props/#trigger"
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "'mouseenter focus'"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows you to change the theme used by tippy.\n\nThe WCS theme is used by default and uses the WCS CSS variables.\n\nYou can create a theme by following this documentation and choosing a custom name :\nhttps://atomiks.github.io/tippyjs/v6/themes/"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'wcs'"
+    }
+  }; }
+  static get methods() { return {
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Programmatically hide the tooltip",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Programmatically show the tooltip",
+        "tags": []
+      }
+    },
+    "disable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Temporarily prevent the tooltip from showing or hiding",
+        "tags": []
+      }
+    },
+    "enable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Re-enable a disabled tooltip",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "interactive",
+      "methodName": "updateProps"
+    }, {
+      "propName": "position",
+      "methodName": "updateProps"
+    }, {
+      "propName": "maxWidth",
+      "methodName": "updateProps"
+    }, {
+      "propName": "theme",
+      "methodName": "updateProps"
+    }, {
+      "propName": "delay",
+      "methodName": "updateProps"
+    }, {
+      "propName": "duration",
+      "methodName": "updateProps"
+    }, {
+      "propName": "trigger",
+      "methodName": "updateProps"
+    }]; }
 }

package/dist/collection/utils/helpers.js

@@ -69,3 +69,7 @@ export const clickInsideElement = (event, element) => {
   return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width
     && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;
 };
+export const clickTargetIsElementOrChildren = (mouseEvent, element) => {
+  return mouseEvent.target instanceof Node
+    && element.contains(mouseEvent.target);
+};