npm - @dso-toolkit/core - Versions diffs - 45.1.0 → 46.0.0 - Mend

@dso-toolkit/core 45.1.0 → 46.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (349) hide show

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

@@ -1,44 +1,23 @@
-import { beforeWrite, createPopper } from '@popperjs/core';
-import maxSize from 'popper-max-size-modifier';
-import { h, Component, Element, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import clsx from 'clsx';
+import { beforeWrite, createPopper } from "@popperjs/core";
+import maxSize from "popper-max-size-modifier";
+import { h, Host } from "@stencil/core";
+import clsx from "clsx";
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
 function hasOverflow(el) {
   const style = window.getComputedStyle(el);
-  const overflowX = style.getPropertyValue('overflow-x');
-  const overflowY = style.getPropertyValue('overflow-y');
-  const overflowValues = ['hidden', 'clip'];
-  return overflowValues.indexOf(overflowX) != -1 || overflowValues.indexOf(overflowY) != -1;
+  const overflowX = style.getPropertyValue("overflow-x");
+  const overflowY = style.getPropertyValue("overflow-y");
+  const overflowValues = ["hidden", "clip"];
+  return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
 }
 export class Tooltip {
   constructor() {
-    /**
-     * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
-     */
-    this.descriptive = false;
-    /**
-     * Set position of tooltip relative to target
-     */
-    this.position = 'top';
-    /**
-     * Set position strategy of tooltip
-     */
-    this.strategy = 'auto';
-    /**
-     * Set attribute `no-arrow` to hide the arrow
-     */
-    this.noArrow = false;
-    /**
-     * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.
-     */
-    this.active = false;
-    this.hidden = true;
     this.applyMaxSize = {
-      name: 'applyMaxSize',
+      name: "applyMaxSize",
       enabled: true,
       phase: beforeWrite,
-      requires: ['maxSize'],
+      requires: ["maxSize"],
       fn({ state }) {
         let { width } = state.modifiersData.maxSize;
         if (width < 160) {
@@ -48,10 +27,19 @@ export class Tooltip {
       },
     };
     this.keyDownListener = (event) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         this.deactivate();
       }
     };
+    this.descriptive = false;
+    this.position = "top";
+    this.strategy = "auto";
+    this.for = undefined;
+    this.noArrow = false;
+    this.stateless = undefined;
+    this.small = undefined;
+    this.active = false;
+    this.hidden = true;
   }
   /**
    * Activate the tooltip (Sets the `active` attribute)
@@ -70,7 +58,7 @@ export class Tooltip {
       return;
     }
     this.popper.setOptions({
-      placement: this.position
+      placement: this.position,
     });
   }
   watchStrategy() {
@@ -80,24 +68,24 @@ export class Tooltip {
     if (!this.popper) {
       return;
     }
-    if (this.strategy == 'absolute' || this.strategy == 'fixed') {
+    if (this.strategy === "absolute" || this.strategy === "fixed") {
       this.popper.setOptions({
         strategy: this.strategy,
       });
       return;
     }
     let element = this.element;
-    while ((element === null || element === void 0 ? void 0 : element.parentNode) != null && element.parentNode != document) {
+    while (element && element.parentNode !== document) {
       element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
-      if (element != null && hasOverflow(element)) {
+      if (element !== null && hasOverflow(element)) {
         this.popper.setOptions({
-          strategy: 'fixed',
+          strategy: "fixed",
         });
         return;
       }
     }
     this.popper.setOptions({
-      strategy: 'absolute',
+      strategy: "absolute",
     });
   }
   watchActive() {
@@ -108,18 +96,18 @@ export class Tooltip {
         setTimeout(() => {
           var _a;
           (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-            modifiers: [{ name: 'eventListeners', enabled: true }]
+            modifiers: [{ name: "eventListeners", enabled: true }],
           });
-          document.addEventListener('keydown', this.keyDownListener);
+          document.addEventListener("keydown", this.keyDownListener);
         });
       }
     }
     else {
       if (!this.stateless) {
         (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-          modifiers: [{ name: 'eventListeners', enabled: false }]
+          modifiers: [{ name: "eventListeners", enabled: false }],
         });
-        document.removeEventListener('keydown', this.keyDownListener);
+        document.removeEventListener("keydown", this.keyDownListener);
       }
       setTimeout(() => (this.hidden = true), transitionDuration);
     }
@@ -132,9 +120,9 @@ export class Tooltip {
     if (this.popper) {
       return;
     }
-    const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
+    const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
     if (!(tooltip instanceof HTMLElement)) {
-      throw new Error('tooltip element is not instanceof HTMLElement');
+      throw new Error("tooltip element is not instanceof HTMLElement");
     }
     this.target = this.getTarget();
     this.popper = createPopper(this.target, tooltip, {
@@ -143,23 +131,23 @@ export class Tooltip {
     });
     this.callbacks = {
       activate: () => (this.active = true),
-      deactivate: () => (this.active = false)
+      deactivate: () => (this.active = false),
     };
     if (!this.stateless) {
-      this.target.addEventListener('mouseenter', this.callbacks.activate);
-      this.target.addEventListener('mouseleave', this.callbacks.deactivate);
-      this.target.addEventListener('focus', this.callbacks.activate);
-      this.target.addEventListener('blur', this.callbacks.deactivate);
+      this.target.addEventListener("mouseenter", this.callbacks.activate);
+      this.target.addEventListener("mouseleave", this.callbacks.deactivate);
+      this.target.addEventListener("focus", this.callbacks.activate);
+      this.target.addEventListener("blur", this.callbacks.deactivate);
     }
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
     if (!this.stateless && this.target && this.callbacks) {
-      this.target.removeEventListener('mouseenter', this.callbacks.activate);
-      this.target.removeEventListener('mouseleave', this.callbacks.deactivate);
-      this.target.removeEventListener('focus', this.callbacks.activate);
-      this.target.removeEventListener('blur', this.callbacks.deactivate);
+      this.target.removeEventListener("mouseenter", this.callbacks.activate);
+      this.target.removeEventListener("mouseleave", this.callbacks.deactivate);
+      this.target.removeEventListener("focus", this.callbacks.activate);
+      this.target.removeEventListener("blur", this.callbacks.deactivate);
     }
     this.callbacks = undefined;
     this.target = undefined;
@@ -172,17 +160,13 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, { class: { 'hidden': this.hidden } },
-      h("div", { class: clsx('tooltip', { in: this.active }) },
-        !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }),
-        h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx('tooltip-inner', { 'dso-small': this.small }) },
-          h("slot", null)))));
+    return (h(Host, { class: { hidden: this.hidden } }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", null)))));
   }
   getTarget() {
     if (this.for instanceof HTMLElement) {
       return this.for;
     }
-    if (typeof this.for === 'string') {
+    if (typeof this.for === "string") {
       const rootNode = this.element.getRootNode();
       if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
         throw new Error(`rootNode is not instance of Document or ShadowRoot`);
@@ -195,218 +179,232 @@ export class Tooltip {
     }
     const { parentElement } = this.element;
     if (!parentElement) {
-      throw new Error('No reference given with [for] attribute but no parent found either');
+      throw new Error("No reference given with [for] attribute but no parent found either");
     }
     return parentElement;
   }
   static get is() { return "dso-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip.css"]
-  }; }
-  static get properties() { return {
-    "descriptive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`."
-      },
-      "attribute": "descriptive",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'top' | 'right' | 'bottom' | 'left'",
-        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set position of tooltip relative to target"
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "descriptive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`."
+        },
+        "attribute": "descriptive",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "position",
-      "reflect": false,
-      "defaultValue": "'top'"
-    },
-    "strategy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'auto' | 'absolute' | 'fixed'",
-        "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
-        "references": {}
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set position of tooltip relative to target"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "\"top\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set position strategy of tooltip"
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set position strategy of tooltip"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "strategy",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    },
-    "for": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | HTMLElement",
-        "resolved": "HTMLElement | string | undefined",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLElement",
+          "resolved": "HTMLElement | string | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify target element that the tooltip will describe and listens to for events.\n* `undefined`: The direct parent is used.\n* `string`: The element is located using `document.getElementById()`\n* `HTMLElement`: Pass the target element directly\nIf the element is not found an Error is thrown."
-      },
-      "attribute": "for",
-      "reflect": false
-    },
-    "noArrow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set attribute `no-arrow` to hide the arrow"
-      },
-      "attribute": "no-arrow",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "stateless": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Deactivates mouseover behaviour"
-      },
-      "attribute": "stateless",
-      "reflect": false
-    },
-    "small": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines if the tooltip has a smaller max-width"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify target element that the tooltip will describe and listens to for events.\r\n* `undefined`: The direct parent is used.\r\n* `string`: The element is located using `document.getElementById()`\r\n* `HTMLElement`: Pass the target element directly\r\nIf the element is not found an Error is thrown."
+        },
+        "attribute": "for",
+        "reflect": false
       },
-      "attribute": "small",
-      "reflect": false
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "noArrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set attribute `no-arrow` to hide the arrow"
+        },
+        "attribute": "no-arrow",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods."
+      "stateless": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Deactivates mouseover behaviour"
+        },
+        "attribute": "stateless",
+        "reflect": false
       },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hidden": {}
-  }; }
-  static get methods() { return {
-    "activate": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines if the tooltip has a smaller max-width"
+        },
+        "attribute": "small",
+        "reflect": false
       },
-      "docs": {
-        "text": "Activate the tooltip (Sets the `active` attribute)",
-        "tags": []
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    },
-    "deactivate": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "hidden": {}
+    };
+  }
+  static get methods() {
+    return {
+      "activate": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Activate the tooltip (Sets the `active` attribute)",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Deactivate the tooltip (Removes the `active` attribute)",
-        "tags": []
+      "deactivate": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Deactivate the tooltip (Removes the `active` attribute)",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "position",
-      "methodName": "watchPosition"
-    }, {
-      "propName": "strategy",
-      "methodName": "watchStrategy"
-    }, {
-      "propName": "active",
-      "methodName": "watchActive"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "listenClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "position",
+        "methodName": "watchPosition"
+      }, {
+        "propName": "strategy",
+        "methodName": "watchStrategy"
+      }, {
+        "propName": "active",
+        "methodName": "watchActive"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "listenClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }