@scania/tegel 0.0.2 → 0.0.5

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

@@ -1,229 +1,230 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class Tooltip {
-  constructor() {
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.text = '';
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.mouseOverTooltip = false;
-    this.show = false;
-    this.placement = 'bottom';
-    this.popperInstance = undefined;
-    this.target = undefined;
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    const thisValue = this;
-    this.popperInstance = createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  /* Slot on line 118 is added to support adding HTML elements to component */
-  render() {
-    return (h("span", { ref: (el) => {
-        this.tooltip = el;
-      }, class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
-  }
-  static get is() { return "sdds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The CSS-selector for an element that will trigger the tooltip"
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "referenceEl": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Element that will trigger the tooltip (takes priority over selector)"
-        }
-      },
-      "mouseOverTooltip": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
-        },
-        "attribute": "mouse-over-tooltip",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prop in control of showing and hiding prop"
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"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": "@popperjs/core"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of tooltip."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-}
+import { h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class Tooltip {
+  constructor() {
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.text = '';
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.mouseOverTooltip = false;
+    this.show = false;
+    this.placement = 'bottom';
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    const thisValue = this;
+    this.popperInstance = createPopper(this.target, this.tooltip, {
+      placement: thisValue.placement,
+      modifiers: [
+        {
+          name: 'positionCalc',
+          enabled: true,
+          phase: 'main',
+          fn({ state }) {
+            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+              thisValue.border = 'top-left';
+            }
+            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+              thisValue.border = 'top-right';
+            }
+            else if (state.placement === 'top-end' || state.placement === 'left-end') {
+              thisValue.border = 'bottom-right';
+            }
+            else if (state.placement === 'top-start' || state.placement === 'right-end') {
+              thisValue.border = 'bottom-left';
+            }
+            else if (state.placement === 'bottom' || state.placement === 'top') {
+              thisValue.border = 'default';
+            }
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showTooltip = () => {
+      this.show = true;
+    };
+    const hideTooltip = () => {
+      this.show = false;
+    };
+    // For tabbing over element
+    this.target.addEventListener('focusin', () => {
+      showTooltip();
+    });
+    this.target.addEventListener('focusout', () => {
+      hideTooltip();
+    });
+    // For hovering over element with selector
+    this.target.addEventListener('mouseenter', () => {
+      showTooltip();
+    });
+    this.target.addEventListener('mouseleave', () => {
+      hideTooltip();
+    });
+    // For hovering over tooltip itself:
+    if (this.mouseOverTooltip === true) {
+      this.tooltip.addEventListener('mouseenter', () => {
+        showTooltip();
+      });
+      this.tooltip.addEventListener('mouseleave', () => {
+        hideTooltip();
+      });
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /* Slot on line 118 is added to support adding HTML elements to component */
+  render() {
+    return (h("span", { ref: (el) => {
+        this.tooltip = el;
+      }, class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+  }
+  static get is() { return "sdds-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The CSS-selector for an element that will trigger the tooltip"
+        },
+        "attribute": "selector",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "referenceEl": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Element that will trigger the tooltip (takes priority over selector)"
+        }
+      },
+      "mouseOverTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
+        },
+        "attribute": "mouse-over-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop in control of showing and hiding prop"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"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": "@popperjs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of tooltip."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "popperInstance": {},
+      "target": {}
+    };
+  }
+}
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,OAAO,OAAO;;IAyBlB,mBAAc,GAAW,CAAC,CAAC;IAE3B,mBAAc,GAAW,CAAC,CAAC;gBAzBJ,EAAE;oBAGE,EAAE;;4BAMO,KAAK;gBAGA,KAAK;qBAGf,QAAQ;;;;EAcvC,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;MAC5D,SAAS,EAAE,SAAS,CAAC,SAAS;MAC9B,SAAS,EAAE;QACT;UACE,IAAI,EAAE,cAAc;UACpB,OAAO,EAAE,IAAI;UACb,KAAK,EAAE,MAAM;UACb,EAAE,CAAC,EAAE,KAAK,EAAE;YACV,IAAI,KAAK,CAAC,SAAS,KAAK,cAAc,IAAI,KAAK,CAAC,SAAS,KAAK,aAAa,EAAE;cAC3E,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;aAC/B;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,EAAE;cAC/E,SAAS,CAAC,MAAM,GAAG,WAAW,CAAC;aAChC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;cAC1E,SAAS,CAAC,MAAM,GAAG,cAAc,CAAC;aACnC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW,EAAE;cAC7E,SAAS,CAAC,MAAM,GAAG,aAAa,CAAC;aAClC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;cACpE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC;aAC9B;UACH,CAAC;SACF;QACD;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEF,2BAA2B;IAC3B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;MAC3C,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;MAC5C,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,0CAA0C;IAC1C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;MAC9C,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;MAC9C,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,oCAAoC;IACpC,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;MAClC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;QAC/C,WAAW,EAAE,CAAC;MAChB,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;QAC/C,WAAW,EAAE,CAAC;MAChB,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,4EAA4E;EAC5E,MAAM;IACJ,OAAO,CACL,YACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;QACV,IAAI,CAAC,OAAO,GAAG,EAAsB,CAAC;MACxC,CAAC,EACD,KAAK,EAAE,6BAA6B,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE;MAExF,IAAI,CAAC,IAAI;MACV,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"]}