@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,667 @@
+import { Host, h } from "@stencil/core";
+import { arrow, computePosition, offset, shift, flip, autoUpdate } from "@floating-ui/dom";
+import { createFocusTrap } from "focus-trap";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { waitForEvent } from "../../utils/event-utils";
+import { stopAnimations, animateTo } from "../../utils/animation-utils";
+import Arrow from "./assets/arrow.svg";
+const ANIMATION_SHOW = {
+  keyframes: [
+    { opacity: "0" },
+    { opacity: "1" }
+  ],
+  options: { duration: 100, easing: "linear" }
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { opacity: "1" },
+    { opacity: "0" }
+  ],
+  options: { duration: 200, easing: "linear" }
+};
+const keyCode = {
+  ESC: 27
+};
+let tooltipCounter = 0;
+/**
+ * @slot Trigger element inside
+ * @slot content - Content of tooltip
+ */
+export class StzhTooltip {
+  constructor() {
+    /** Whether tooltip should be open */
+    this.open = false;
+    /** Label of tooltip (used for screenreaders) */
+    this.label = "";
+    /** Content of tooltip (use instead of content slot) */
+    this.content = "";
+    /** Default placement of tooltip relative to trigger element */
+    this.placement = "bottom";
+    /** Shifting of tooltip content */
+    this.skidding = 0;
+    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
+    this.distance = 16;
+    /** Whether tooltip is interactive */
+    this.interactive = false;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    this.trigger = "hover focus";
+    this.toggledByMethod = false;
+    this.isHovering = false;
+    this.onEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    this.computePosition = async () => {
+      if (!this.open) {
+        return;
+      }
+      const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerElement.firstElementChild, this.contentElement, {
+        // strategy: 'fixed',
+        placement: this.placement,
+        middleware: [
+          offset({
+            mainAxis: this.distance,
+            crossAxis: this.skidding
+          }),
+          flip({
+            padding: 5
+          }),
+          shift({
+            padding: 5
+          }),
+          arrow({
+            element: this.arrowElement,
+            padding: 5
+          })
+        ],
+      });
+      this.middlewareData = middlewareData;
+      this.computedPlacement = placement;
+      Object.assign(this.contentElement.style, {
+        position: strategy,
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      Object.assign(this.arrowElement.style, {
+        left: x != null ? `${middlewareData.arrow.x}px` : "",
+        top: y != null ? `${middlewareData.arrow.y}px` : "",
+      });
+    };
+    this.onClickTrigger = () => {
+      if (this.hasTrigger("click")) {
+        this.toggle();
+      }
+    };
+    this.onMouseEnterTrigger = () => {
+      if (this.hasTrigger("hover")) {
+        this.isHovering = true;
+        this.show();
+      }
+    };
+    this.onMouseLeaveTrigger = () => {
+      if (this.hasTrigger("hover")) {
+        this.isHovering = false;
+        document.addEventListener("mousemove", this.onMouseMoveDocument);
+      }
+    };
+    this.onFocusTrigger = () => {
+      if (this.hasTrigger("focus")) {
+        this.show();
+      }
+    };
+    this.onBlurTrigger = () => {
+      if (this.hasTrigger("focus")) {
+        this.hide();
+      }
+    };
+    this.onMouseMoveDocument = (event) => {
+      const { clientX, clientY } = event;
+      if (!this.computedPlacement) {
+        return true;
+      }
+      const basePlacement = this.computedPlacement.split("-")[0];
+      const offsetData = this.middlewareData.offset;
+      const popperRect = this.contentElement.getBoundingClientRect();
+      if (!offsetData) {
+        return true;
+      }
+      const topDistance = basePlacement === "bottom" ? offsetData.y : 0;
+      const bottomDistance = basePlacement === "top" ? offsetData.y : 0;
+      const leftDistance = basePlacement === "right" ? offsetData.x : 0;
+      const rightDistance = basePlacement === "left" ? offsetData.x : 0;
+      const exceedsTop = popperRect.top - clientY > topDistance;
+      const exceedsBottom = clientY - popperRect.bottom > bottomDistance;
+      const exceedsLeft = popperRect.left - clientX > leftDistance;
+      const exceedsRight = clientX - popperRect.right > rightDistance;
+      if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {
+        document.removeEventListener("mousemove", this.onMouseMoveDocument);
+        if (!this.isHovering) {
+          this.hide();
+        }
+      }
+    };
+  }
+  /** Show tooltip content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide tooltip content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  /** Toggle tooltip content */
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  async update() {
+    return await this.computePosition();
+  }
+  async openWatcher(newValue) {
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-tooltip",
+        });
+      }
+      await stopAnimations(this.contentElement);
+      // safari seems to need will-change,
+      // otherwise it has problems animating the element with the drop shadow
+      this.contentElement.style.willChange = "transform, opacity, position, top, left, bottom, right";
+      this.contentElement.hidden = false;
+      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-tooltip"
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-tooltip",
+        });
+      }
+      await stopAnimations(this.contentElement);
+      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);
+      this.contentElement.hidden = true;
+      this.contentElement.style.willChange = "auto";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-tooltip"
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  triggerWatcher(newValue) {
+    this._trigger = newValue.split(" ");
+  }
+  handleDocumentClick(event) {
+    if (!this.open) {
+      return;
+    }
+    const isClickOutside = event.target !== this.contentElement
+      && this.contentElement.contains(event.target) === false;
+    const isClickTrigger = event.target === this.triggerElement
+      || this.triggerElement.contains(event.target);
+    if (isClickOutside && !isClickTrigger && this.hasTrigger("click")) {
+      this.hide();
+    }
+  }
+  hasTrigger(trigger) {
+    return this._trigger.indexOf(trigger) > -1;
+  }
+  async componentWillLoad() {
+    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
+    tooltipCounter++;
+    this.triggerWatcher(this.trigger);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "tooltip");
+    }
+  }
+  componentDidRender() {
+    this.computePosition();
+    if (this.interactive) {
+      this.triggerElement.firstElementChild
+        .setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+    if (this.trap) {
+      this.open ? this.trap.activate() : this.trap.deactivate();
+    }
+  }
+  componentDidUpdate() {
+    if (this.trap) {
+      this.trap.updateContainerElements(this.contentElement);
+    }
+  }
+  componentDidLoad() {
+    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);
+    if (this.interactive) {
+      this.trap = createFocusTrap(this.contentElement, {
+        fallbackFocus: this.contentElement,
+        clickOutsideDeactivates: true,
+        returnFocusOnDeactivate: true
+      });
+      if (this.open) {
+        this.trap.activate();
+      }
+    }
+    this.contentElement.hidden = !this.open;
+  }
+  connectedCallback() {
+    var _a;
+    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (!trigger) {
+      const defaultSlot = Array.from(this.element.children)
+        .find(child => !child.hasAttribute('slot'));
+      trigger = defaultSlot;
+    }
+    if (trigger) {
+      trigger.addEventListener("click", this.onClickTrigger);
+      trigger.addEventListener("mouseenter", this.onMouseEnterTrigger);
+      trigger.addEventListener("mouseleave", this.onMouseLeaveTrigger);
+      trigger.addEventListener("focusin", this.onFocusTrigger);
+      trigger.addEventListener("focusout", this.onBlurTrigger);
+    }
+  }
+  disconnectedCallback() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+  }
+  render() {
+    const classes = {
+      "stzh-tooltip": true,
+      [`stzh-tooltip--open`]: this.open,
+      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), h("div", { class: "stzh-tooltip__content", ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
+      h("h2", { id: this.labelId, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
+      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
+  }
+  static get is() { return "stzh-tooltip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether tooltip should be open"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label of tooltip (used for screenreaders)"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Content of tooltip (use instead of content slot)"
+        },
+        "attribute": "content",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default placement of tooltip relative to trigger element"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
+      },
+      "skidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shifting of tooltip content"
+        },
+        "attribute": "skidding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "distance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Distance from tooltip content to trigger (default: arrow height + 8px = 16)"
+        },
+        "attribute": "distance",
+        "reflect": false,
+        "defaultValue": "16"
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether tooltip is interactive"
+        },
+        "attribute": "interactive",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "trigger": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\r\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\r\nprogrammatically."
+        },
+        "attribute": "trigger",
+        "reflect": false,
+        "defaultValue": "\"hover focus\""
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhTooltipLocalizedText",
+          "resolved": "StzhLocaleComponent & { close: string; }",
+          "references": {
+            "StzhTooltipLocalizedText": {
+              "location": "import",
+              "path": "./stzh-tooltip.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "computedPlacement": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhOpen",
+        "name": "stzhOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip open event"
+        },
+        "complexType": {
+          "original": "StzhTooltipOpenEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipOpenEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpened",
+        "name": "stzhOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip opened event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhTooltipOpenedEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipOpenedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip close event"
+        },
+        "complexType": {
+          "original": "StzhTooltipCloseEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipCloseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClosed",
+        "name": "stzhClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip closed event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhTooltipClosedEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipClosedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show tooltip content",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide tooltip content",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle tooltip content",
+          "tags": []
+        }
+      },
+      "update": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openWatcher"
+      }, {
+        "propName": "trigger",
+        "methodName": "triggerWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/stzh-tooltip/stzh-tooltip.localization.js

@@ -0,0 +1 @@
+export {};