@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

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

@@ -1,251 +1,284 @@
-import { h, Host } from '@stencil/core';
-import { UUID } from '@vertexvis/utils';
-import classNames from 'classnames';
-import { getBoundingClientRect } from '../../util/components/dom';
-import { getSlottedContent } from '../../util/components/slots';
+import { h, Host } from "@stencil/core";
+import { UUID } from "@vertexvis/utils";
+import classNames from "classnames";
+import { getBoundingClientRect } from "../../util/components/dom";
+import { getSlottedContent } from "../../util/components/slots";
 const TOOLTIP_OPEN_DELAY = 500;
 export class Tooltip {
-  constructor() {
-    this.pointerEntered = false;
-    this.content = undefined;
-    this.disabled = undefined;
-    this.placement = 'bottom';
-    this.delay = TOOLTIP_OPEN_DELAY;
-    this.animated = true;
-    this.open = false;
-    this.handlePointerEnter = this.handlePointerEnter.bind(this);
-    this.handlePointerLeave = this.handlePointerLeave.bind(this);
-    this.handleContentChange = this.handleContentChange.bind(this);
-    this.handleDisabledChange = this.handleDisabledChange.bind(this);
-    this.tooltipId = `vertex-tooltip-${UUID.create()}`;
-  }
-  disconnectedCallback() {
-    this.removeElement();
-    this.clearOpenTimeout();
-    this.pointerEntered = false;
-  }
-  handleContentChange() {
-    if (this.internalContentElement != null) {
-      this.updateContentElementChildren(this.internalContentElement);
-    }
-  }
-  handleDisabledChange() {
-    if (this.internalContentElement != null) {
-      this.updateContentElementClass(this.internalContentElement);
-    }
-    if (!this.disabled && this.pointerEntered) {
-      this.handlePointerEnter();
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "target", ref: (el) => {
-        this.targetElement = el;
-      }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
-        this.contentElement = el;
-      } }, h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
-  }
-  addElement() {
-    if (this.targetElement != null) {
-      const popover = this.createPopoverElement(this.targetElement);
-      const content = this.createContentElement();
-      this.updateContentElementChildren(content);
-      popover.appendChild(content);
-      this.hostElement.ownerDocument.body.appendChild(popover);
-    }
-  }
-  removeElement() {
-    const popover = this.hostElement.ownerDocument.getElementById(this.tooltipId);
-    if (popover != null) {
-      popover.remove();
-    }
-    this.internalContentElement = undefined;
-  }
-  createPopoverElement(anchorElement) {
-    const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
-    popover.id = this.tooltipId;
-    popover.setAttribute('class', 'vertex-tooltip-popover');
-    popover.open = this.open;
-    popover.resizeBehavior = 'fixed';
-    popover.backdrop = false;
-    popover.placement = this.placement;
-    popover.animated = this.animated;
-    popover.anchorBounds = getBoundingClientRect(anchorElement);
-    return popover;
-  }
-  createContentElement() {
-    this.internalContentElement =
-      this.hostElement.ownerDocument.createElement('div');
-    this.internalContentElement.setAttribute('class', classNames('vertex-tooltip-content', {
-      hidden: !this.open || this.disabled,
-    }));
-    return this.internalContentElement;
-  }
-  updateContentElementClass(element) {
-    element.setAttribute('class', classNames('vertex-tooltip-content', {
-      hidden: !this.open || this.disabled,
-    }));
-  }
-  updateContentElementChildren(element) {
-    var _a;
-    this.displayedSlottedContent =
-      (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-    if (this.content != null) {
-      element.innerText = this.content;
-    }
-    else if (this.displayedSlottedContent != null) {
-      element.appendChild(this.displayedSlottedContent);
-    }
-  }
-  handlePointerEnter() {
-    if (this.openTimeout == null && !this.disabled) {
-      this.createOpenTimeout();
-    }
-    else if (this.openTimeout == null) {
-      this.pointerEntered = true;
-    }
-  }
-  handlePointerLeave() {
-    this.clearOpenTimeout();
-    this.removeElement();
-    this.open = false;
-    this.pointerEntered = false;
-  }
-  createOpenTimeout() {
-    this.openTimeout = setTimeout(() => {
-      this.open = true;
-      this.openTimeout = undefined;
-      this.addElement();
-    }, this.delay);
-    this.pointerEntered = false;
-  }
-  clearOpenTimeout() {
-    if (this.openTimeout != null) {
-      clearTimeout(this.openTimeout);
-      this.openTimeout = undefined;
-    }
-  }
-  static get is() { return "vertex-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tooltip.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "content": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The content to display in this tooltip. This can also\nbe provided by inserting an element with the `content` slot\nto support additional elements."
-        },
-        "attribute": "content",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A property to disable the tooltip, and only display the content in the slot."
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "PopoverPlacement": {
-              "location": "import",
-              "path": "../popover/popover"
+    constructor() {
+        /**
+         * The placement of the tooltip around the slotted element.
+         * This can be any of the following values:
+         *
+         * 'top', 'top-start', 'top-end',
+         * 'bottom', 'bottom-start', 'bottom-end',
+         * 'right', 'right-start', 'right-end',
+         * 'left', 'left-start', 'left-end',
+         * 'auto', 'auto-start', or 'auto-end', and
+         * defaults to 'bottom'.
+         *
+         * Note: placement will adjust based on the amount
+         * of available space, so tooltips close to screen
+         * edges may appear in a different location.
+         */
+        this.placement = 'bottom';
+        /**
+         * The delay before this tooltip becomes visible
+         * on hover. Defaults to 500ms.
+         */
+        this.delay = TOOLTIP_OPEN_DELAY;
+        /**
+         * Whether this tooltip should be animated.
+         * Defaults to true.
+         */
+        this.animated = true;
+        this.open = false;
+        this.pointerEntered = false;
+        this.handlePointerEnter = this.handlePointerEnter.bind(this);
+        this.handlePointerLeave = this.handlePointerLeave.bind(this);
+        this.handleContentChange = this.handleContentChange.bind(this);
+        this.handleDisabledChange = this.handleDisabledChange.bind(this);
+        this.tooltipId = `vertex-tooltip-${UUID.create()}`;
+    }
+    disconnectedCallback() {
+        this.removeElement();
+        this.clearOpenTimeout();
+        this.pointerEntered = false;
+    }
+    handleContentChange() {
+        if (this.internalContentElement != null) {
+            this.updateContentElementChildren(this.internalContentElement);
+        }
+    }
+    handleDisabledChange() {
+        if (this.internalContentElement != null) {
+            this.updateContentElementClass(this.internalContentElement);
+        }
+        if (!this.disabled && this.pointerEntered) {
+            this.handlePointerEnter();
+        }
+    }
+    render() {
+        return (h(Host, { key: '52cf61786b9455c308412c74920fa13c2fbf39da' }, h("div", { key: 'c80ad2bc646d508cf7a24de7e30d173a0067c166', class: "target", ref: (el) => {
+                this.targetElement = el;
+            }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", { key: '30fd8fb5dd907e941dff798976be471f35db7d45' })), h("div", { key: '8b136bdf9305bc837c2e159d8d3c6c2543c4422f', class: "content-hidden", ref: (el) => {
+                this.contentElement = el;
+            } }, h("slot", { key: 'bf2a10df58687e96f3b0da3f8e9b5aa8b3babefa', name: "content", onSlotchange: this.handleContentChange }))));
+    }
+    addElement() {
+        if (this.targetElement != null) {
+            const popover = this.createPopoverElement(this.targetElement);
+            const content = this.createContentElement();
+            this.updateContentElementChildren(content);
+            popover.appendChild(content);
+            this.hostElement.ownerDocument.body.appendChild(popover);
+        }
+    }
+    removeElement() {
+        const popover = this.hostElement.ownerDocument.getElementById(this.tooltipId);
+        if (popover != null) {
+            popover.remove();
+        }
+        this.internalContentElement = undefined;
+    }
+    createPopoverElement(anchorElement) {
+        const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
+        popover.id = this.tooltipId;
+        popover.setAttribute('class', 'vertex-tooltip-popover');
+        popover.open = this.open;
+        popover.resizeBehavior = 'fixed';
+        popover.backdrop = false;
+        popover.placement = this.placement;
+        popover.animated = this.animated;
+        popover.anchorBounds = getBoundingClientRect(anchorElement);
+        return popover;
+    }
+    createContentElement() {
+        this.internalContentElement =
+            this.hostElement.ownerDocument.createElement('div');
+        this.internalContentElement.setAttribute('class', classNames('vertex-tooltip-content', {
+            hidden: !this.open || this.disabled,
+        }));
+        return this.internalContentElement;
+    }
+    updateContentElementClass(element) {
+        element.setAttribute('class', classNames('vertex-tooltip-content', {
+            hidden: !this.open || this.disabled,
+        }));
+    }
+    updateContentElementChildren(element) {
+        var _a;
+        this.displayedSlottedContent =
+            (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+        if (this.content != null) {
+            element.innerText = this.content;
+        }
+        else if (this.displayedSlottedContent != null) {
+            element.appendChild(this.displayedSlottedContent);
+        }
+    }
+    handlePointerEnter() {
+        if (this.openTimeout == null && !this.disabled) {
+            this.createOpenTimeout();
+        }
+        else if (this.openTimeout == null) {
+            this.pointerEntered = true;
+        }
+    }
+    handlePointerLeave() {
+        this.clearOpenTimeout();
+        this.removeElement();
+        this.open = false;
+        this.pointerEntered = false;
+    }
+    createOpenTimeout() {
+        this.openTimeout = setTimeout(() => {
+            this.open = true;
+            this.openTimeout = undefined;
+            this.addElement();
+        }, this.delay);
+        this.pointerEntered = false;
+    }
+    clearOpenTimeout() {
+        if (this.openTimeout != null) {
+            clearTimeout(this.openTimeout);
+            this.openTimeout = undefined;
+        }
+    }
+    static get is() { return "vertex-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The content to display in this tooltip. This can also\nbe provided by inserting an element with the `content` slot\nto support additional elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A property to disable the tooltip, and only display the content in the slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PopoverPlacement": {
+                            "location": "import",
+                            "path": "../popover/popover",
+                            "id": "src/components/popover/popover.tsx::PopoverPlacement",
+                            "referenceLocation": "PopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the tooltip around the slotted element.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end',\n'auto', 'auto-start', or 'auto-end', and\ndefaults to 'bottom'.\n\nNote: placement will adjust based on the amount\nof available space, so tooltips close to screen\nedges may appear in a different location."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The delay before this tooltip becomes visible\non hover. Defaults to 500ms."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "TOOLTIP_OPEN_DELAY"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tooltip should be animated.\nDefaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the tooltip around the slotted element.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end',\n'auto', 'auto-start', or 'auto-end', and\ndefaults to 'bottom'.\n\nNote: placement will adjust based on the amount\nof available space, so tooltips close to screen\nedges may appear in a different location."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "delay": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The delay before this tooltip becomes visible\non hover. Defaults to 500ms."
-        },
-        "attribute": "delay",
-        "reflect": false,
-        "defaultValue": "TOOLTIP_OPEN_DELAY"
-      },
-      "animated": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this tooltip should be animated.\nDefaults to true."
-        },
-        "attribute": "animated",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "content",
-        "methodName": "handleContentChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "handleDisabledChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "content",
+                "methodName": "handleContentChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
 }