@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

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

@@ -1,10 +1,15 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * This component is used internally by `limel-tooltip`.
  *
  * @private
  */
 export class TooltipContent {
+  constructor() {
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = undefined;
+  }
   render() {
     let isLabelsTextLong = false;
     if (this.helperLabel && this.maxlength) {
@@ -18,70 +23,74 @@ export class TooltipContent {
       };
     }
     return [
-      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props),
-        h("div", { class: "label" }, this.label),
-        h("div", { class: "helper-label" }, this.helperLabel)),
+      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)),
     ];
   }
   static get is() { return "limel-tooltip-content"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip-content.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip-content.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Read more in tooltip.tsx"
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Read more in tooltip.tsx"
-      },
-      "attribute": "helper-label",
-      "reflect": true
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read more in tooltip.tsx"
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Read more in tooltip.tsx"
+      "helperLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Read more in tooltip.tsx"
+        },
+        "attribute": "helper-label",
+        "reflect": true
       },
-      "attribute": "maxlength",
-      "reflect": true
-    }
-  }; }
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Read more in tooltip.tsx"
+        },
+        "attribute": "maxlength",
+        "reflect": true
+      }
+    };
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Element, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 const DEFAULT_MAX_LENGTH = 50;
 /**
@@ -47,11 +47,6 @@ const DEFAULT_MAX_LENGTH = 50;
  */
 export class Tooltip {
   constructor() {
-    /**
-     * The maximum amount of characters before rendering 'label' and
-     * 'helperLabel' in two rows.
-     */
-    this.maxlength = DEFAULT_MAX_LENGTH;
     this.showTooltip = () => {
       const tooltipDelay = 500;
       this.showTooltipTimeoutHandle = window.setTimeout(() => {
@@ -62,6 +57,11 @@ export class Tooltip {
       clearTimeout(this.showTooltipTimeoutHandle);
       this.open = false;
     };
+    this.elementId = undefined;
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = DEFAULT_MAX_LENGTH;
+    this.open = undefined;
     this.portalId = createRandomString();
     this.tooltipId = createRandomString();
   }
@@ -74,12 +74,10 @@ export class Tooltip {
   }
   render() {
     const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (h("div", { class: "trigger-anchor" },
-      h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
-          'z-index': tooltipZIndex,
-          'pointer-events': 'none',
-        } },
-        h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+    return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
+        'z-index': tooltipZIndex,
+        'pointer-events': 'none',
+      } }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
   }
   setOwnerAriaLabel() {
     const owner = this.getOwnerElement();
@@ -98,96 +96,103 @@ export class Tooltip {
     owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
   }
   getOwnerElement() {
-    var _a;
     let element = this.host;
     do {
       element = element.parentNode;
     } while (element &&
       element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
       element.nodeType !== Node.DOCUMENT_NODE);
-    return (_a = element) === null || _a === void 0 ? void 0 : _a.getElementById(this.elementId);
+    return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
   }
   static get is() { return "limel-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip.css"]
-  }; }
-  static get properties() { return {
-    "elementId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "ID of the owner element that the tooltip should describe.\nMust be a child within the same document fragment as the tooltip element\nitself."
-      },
-      "attribute": "element-id",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Short descriptive text of the owner element."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "elementId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID of the owner element that the tooltip should describe.\nMust be a child within the same document fragment as the tooltip element\nitself."
+        },
+        "attribute": "element-id",
+        "reflect": true
       },
-      "attribute": "helper-label",
-      "reflect": true
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Short descriptive text of the owner element."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The maximum amount of characters before rendering 'label' and\n'helperLabel' in two rows."
+      "helperLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Additional helper text for the element.\nExample usage can be a keyboard shortcut to activate the function of the\nowner element."
+        },
+        "attribute": "helper-label",
+        "reflect": true
       },
-      "attribute": "maxlength",
-      "reflect": true,
-      "defaultValue": "DEFAULT_MAX_LENGTH"
-    }
-  }; }
-  static get states() { return {
-    "open": {}
-  }; }
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum amount of characters before rendering 'label' and\n'helperLabel' in two rows."
+        },
+        "attribute": "maxlength",
+        "reflect": true,
+        "defaultValue": "DEFAULT_MAX_LENGTH"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
   static get elementRef() { return "host"; }
 }