@ptcwebops/ptcw-design 1.5.3 → 1.5.6

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

@@ -1,322 +1,342 @@
-import { h, Host } from '@stencil/core';
-export class PtcTooltip {
-  constructor() {
-    this.textDisplay = 'inline';
-    this.maxLength = 45;
-    this.textLines = undefined;
-    this.description = 'This is a tooltip text placeholder';
-    this.zIndex = 'z-auto';
-    this.position = 'bottom';
-    this.styles = undefined;
-    this.mode = 'text-only';
-    this.theme = 'standard';
-    this.hideOnMobile = false;
-    this.isSmallScreen = undefined;
-  }
-  addTruncatedClass() {
-    const appRoot = this.el;
-    const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
-    text.forEach(t => {
-      t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
-    });
-  }
-  windowResize() {
-    this.verifiyScreenSize();
-  }
-  verifiyScreenSize() {
-    this.isSmallScreen = window.innerWidth < 768;
-  }
-  // Created this function to initialize the truncate function on specific elements like tabs
-  enableAddTruncatedClass(element) {
-    const allTabHeaders = document.querySelectorAll(element);
-    for (const element of Array.from(allTabHeaders)) {
-      let tabHeader = element;
-      if (tabHeader) {
-        tabHeader.addEventListener('click', () => {
-          setTimeout(() => {
-            this.addTruncatedClass();
-          }, 100);
-        });
-      }
-    }
-  }
-  componentWillLoad() {
-    this.verifiyScreenSize();
-  }
-  componentDidLoad() {
-    //this.addTruncatedClass();
-    setTimeout(() => {
-      this.addTruncatedClass();
-    }, 1000);
-    this.enableAddTruncatedClass('tab-header');
-    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-    document.addEventListener('readystatechange', () => {
-      if (document.readyState === 'complete') {
-        this.addTruncatedClass();
-      }
-    });
-  }
-  render() {
-    if (this.mode == 'wrapper') {
-      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("div", { class: "slot-content" }, h("slot", null)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
-    }
-    else {
-      const classMap = this.getCssClassMap();
-      const cutOff = this.getLineCuttoff();
-      let truncatedText = this.description.substring(0, this.maxLength);
-      if (this.description.length > this.maxLength) {
-        const lastSpace = truncatedText.lastIndexOf(' ');
-        truncatedText = truncatedText.substring(0, lastSpace);
-        truncatedText += '... ';
-      }
-      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), (this.hideOnMobile && this.isSmallScreen) ? (h("div", null, this.description)) : (h("div", null, this.textLines > 0 && !!this.textLines ? (h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description)) : (h("div", { class: classMap }, truncatedText)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)))));
-    }
-  }
-  getCssClassMap() {
-    return {
-      // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
-      ['text-ellipsis']: true,
-      [this.zIndex]: this.description.length > this.maxLength ? true : false,
-      ['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
-    };
-  }
-  getLineCuttoff() {
-    let result;
-    if (this.textLines && this.textLines > 0) {
-      result = {
-        ['-webkit-line-clamp']: `${this.textLines}`,
-      };
-    }
-    return result;
-  }
-  static get is() { return "ptc-tooltip"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "textDisplay": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'inline' | 'block'",
-          "resolved": "\"block\" | \"inline\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component Display\nplease don't set it to be inline-block"
-        },
-        "attribute": "text-display",
-        "reflect": false,
-        "defaultValue": "'inline'"
-      },
-      "maxLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "max length"
-        },
-        "attribute": "max-length",
-        "reflect": false,
-        "defaultValue": "45"
-      },
-      "textLines": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "returns",
-              "text": "string"
-            }],
-          "text": "Ellipsis apply to X lines"
-        },
-        "attribute": "text-lines",
-        "reflect": false
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "injected Description"
-        },
-        "attribute": "description",
-        "reflect": false,
-        "defaultValue": "'This is a tooltip text placeholder'"
-      },
-      "zIndex": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
-          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "index of hover element"
-        },
-        "attribute": "z-index",
-        "reflect": false,
-        "defaultValue": "'z-auto'"
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
-          "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip position"
-        },
-        "attribute": "position",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS Styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'wrapper' | 'text-only'",
-          "resolved": "\"text-only\" | \"wrapper\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If tool tip is only for text use 'text-only' otherwise it will wrap content instead of replacing"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'text-only'"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'standard' | 'danger'",
-          "resolved": "\"danger\" | \"standard\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If tool tip is only for text use 'text-only' otherwise it will wrap content instead of replacing"
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "'standard'"
-      },
-      "hideOnMobile": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If tooltip hide-on-mobile = \"true\" then the tooltip will not be visible belwo 768px devices"
-        },
-        "attribute": "hide-on-mobile",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isSmallScreen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-small-screen",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "addTruncatedClass",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "resize",
-        "method": "windowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcTooltip {
+  constructor() {
+    this.textDisplay = 'inline';
+    this.maxLength = 45;
+    this.textLines = undefined;
+    this.description = 'This is a tooltip text placeholder';
+    this.zIndex = 'z-auto';
+    this.position = 'bottom';
+    this.styles = undefined;
+    this.mode = 'text-only';
+    this.theme = 'standard';
+    this.width = 'default';
+    this.hideOnMobile = false;
+    this.isSmallScreen = undefined;
+  }
+  addTruncatedClass() {
+    const appRoot = this.el;
+    const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
+    text.forEach(t => {
+      t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  windowResize() {
+    this.verifiyScreenSize();
+  }
+  verifiyScreenSize() {
+    this.isSmallScreen = window.innerWidth < 768;
+  }
+  // Created this function to initialize the truncate function on specific elements like tabs
+  enableAddTruncatedClass(element) {
+    const allTabHeaders = document.querySelectorAll(element);
+    for (const element of Array.from(allTabHeaders)) {
+      let tabHeader = element;
+      if (tabHeader) {
+        tabHeader.addEventListener('click', () => {
+          setTimeout(() => {
+            this.addTruncatedClass();
+          }, 100);
+        });
+      }
+    }
+  }
+  componentWillLoad() {
+    this.verifiyScreenSize();
+  }
+  componentDidLoad() {
+    //this.addTruncatedClass();
+    setTimeout(() => {
+      this.addTruncatedClass();
+    }, 1000);
+    this.enableAddTruncatedClass('tab-header');
+    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
+    this.enableAddTruncatedClass('ptc-product-card');
+    document.addEventListener('readystatechange', () => {
+      if (document.readyState === 'complete') {
+        this.addTruncatedClass();
+      }
+    });
+  }
+  render() {
+    if (this.mode == 'wrapper') {
+      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("div", { class: "slot-content" }, h("slot", null)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
+    }
+    else {
+      const classMap = this.getCssClassMap();
+      const cutOff = this.getLineCuttoff();
+      let truncatedText = this.description.substring(0, this.maxLength);
+      if (this.description.length > this.maxLength) {
+        const lastSpace = truncatedText.lastIndexOf(' ');
+        truncatedText = truncatedText.substring(0, lastSpace);
+        truncatedText += '... ';
+      }
+      return (h(Host, { class: this.textDisplay + " " + this.width }, this.styles && h("style", null, this.styles), (this.hideOnMobile && this.isSmallScreen) ? (h("div", null, this.description)) : (h("div", null, this.textLines > 0 && !!this.textLines ? (h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description)) : (h("div", { class: classMap }, truncatedText)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)))));
+    }
+  }
+  getCssClassMap() {
+    return {
+      // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
+      ['text-ellipsis']: true,
+      [this.zIndex]: this.description.length > this.maxLength ? true : false,
+      ['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
+    };
+  }
+  getLineCuttoff() {
+    let result;
+    if (this.textLines && this.textLines > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.textLines}`,
+      };
+    }
+    return result;
+  }
+  static get is() { return "ptc-tooltip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "textDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inline' | 'block'",
+          "resolved": "\"block\" | \"inline\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component Display\r\nplease don't set it to be inline-block"
+        },
+        "attribute": "text-display",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "max length"
+        },
+        "attribute": "max-length",
+        "reflect": false,
+        "defaultValue": "45"
+      },
+      "textLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "string"
+            }],
+          "text": "Ellipsis apply to X lines"
+        },
+        "attribute": "text-lines",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "injected Description"
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "'This is a tooltip text placeholder'"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
+          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "index of hover element"
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "'z-auto'"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
+          "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS Styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'wrapper' | 'text-only'",
+          "resolved": "\"text-only\" | \"wrapper\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If tool tip is only for text use 'text-only' otherwise it will wrap content instead of replacing"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'text-only'"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'danger'",
+          "resolved": "\"danger\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If tool tip is only for text use 'text-only' otherwise it will wrap content instead of replacing"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'full-width' | 'default'",
+          "resolved": "\"default\" | \"full-width\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "This will make the width 100% respective to its parent"
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "hideOnMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If tooltip hide-on-mobile = \"true\" then the tooltip will not be visible belwo 768px devices"
+        },
+        "attribute": "hide-on-mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmallScreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-small-screen",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "addTruncatedClass",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "resize",
+        "method": "windowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}