@ptcwebops/ptcw-design 1.3.0 → 1.3.2

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

@@ -1,298 +1,298 @@
-import { Host, h } from '@stencil/core';
-export class PtcReadmore {
-  constructor() {
-    this.moreText = 'read more';
-    this.lessText = undefined;
-    this.readMorePosition = 'right';
-    this.display = 'inline';
-    this.visibleLines = 'line2';
-    this.visibleLinesCustom = undefined;
-    this.zIndex = 'z-auto';
-    this.checked = false;
-    this.size = 'small';
-    this.isIcon = false;
-    this.color = 'blue';
-  }
-  addBtnTruncated() {
-    const appRoot = this.el.shadowRoot;
-    const ps = appRoot.querySelectorAll('.read-more-text');
-    ps.forEach(p => {
-      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
-    });
-  }
-  // 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.addBtnTruncated();
-          }, 100);
-        });
-      }
-    }
-  }
-  componentDidLoad() {
-    this.addBtnTruncated();
-    document.addEventListener("readystatechange", () => {
-      if (document.readyState === "complete") {
-        this.addBtnTruncated();
-      }
-    });
-    this.enableAddTruncatedClass('tab-header');
-    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-  }
-  // click event handler
-  handleClick(event) {
-    ;
-    this.addBtnTruncated();
-    // check if the input box is checked
-    this.checked = event.target.checked;
-    // Getting cta element
-    const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
-    // Updating the cta text 
-    this.checked
-      ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
-      : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
-    this.checked ? cta.classList.add('show-less-cta') : cta.classList.remove('show-less-cta');
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e) }), h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex} read-more-cta-label`, style: { textAlign: `${this.readMorePosition}` } }, h("span", null, this.moreText)))));
-  }
-  getCssClassMap() {
-    return {
-      ['box']: true,
-      [this.color]: true,
-      [this.size]: true,
-      ['add-icon']: this.isIcon
-    };
-  }
-  static get is() { return "ptc-readmore"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-readmore.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-readmore.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "moreText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "customize read more text"
-        },
-        "attribute": "more-text",
-        "reflect": false,
-        "defaultValue": "'read more'"
-      },
-      "lessText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "customize less more text"
-        },
-        "attribute": "less-text",
-        "reflect": false
-      },
-      "readMorePosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Read more text position: left or right"
-        },
-        "attribute": "read-more-position",
-        "reflect": false,
-        "defaultValue": "'right'"
-      },
-      "display": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'inline' | 'block'",
-          "resolved": "\"block\" | \"inline\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "returns",
-              "text": "string"
-            }],
-          "text": ""
-        },
-        "attribute": "display",
-        "reflect": false,
-        "defaultValue": "'inline'"
-      },
-      "visibleLines": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'  | 'line10'",
-          "resolved": "\"line1\" | \"line10\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "visible lines"
-        },
-        "attribute": "visible-lines",
-        "reflect": false,
-        "defaultValue": "'line2'"
-      },
-      "visibleLinesCustom": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "visible lines custom numebr"
-        },
-        "attribute": "visible-lines-custom",
-        "reflect": false
-      },
-      "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 lable"
-        },
-        "attribute": "z-index",
-        "reflect": false,
-        "defaultValue": "'z-auto'"
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input element state"
-        },
-        "attribute": "checked",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size: Font size of the read more text. Options small=16px | medium=18px | large=24px"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'small'"
-      },
-      "isIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon: if true show up/down icon besides text"
-        },
-        "attribute": "is-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'blue' | 'gray' | 'green' | 'initial'",
-          "resolved": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "color: Read more text color. Options: default is blue.  'blue' | 'gray' | 'green' | 'initial'"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'blue'"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "addBtnTruncated",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcReadmore {
+  constructor() {
+    this.moreText = 'read more';
+    this.lessText = undefined;
+    this.readMorePosition = 'right';
+    this.display = 'inline';
+    this.visibleLines = 'line2';
+    this.visibleLinesCustom = undefined;
+    this.zIndex = 'z-auto';
+    this.checked = false;
+    this.size = 'small';
+    this.isIcon = false;
+    this.color = 'blue';
+  }
+  addBtnTruncated() {
+    const appRoot = this.el.shadowRoot;
+    const ps = appRoot.querySelectorAll('.read-more-text');
+    ps.forEach(p => {
+      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  // 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.addBtnTruncated();
+          }, 100);
+        });
+      }
+    }
+  }
+  componentDidLoad() {
+    this.addBtnTruncated();
+    document.addEventListener("readystatechange", () => {
+      if (document.readyState === "complete") {
+        this.addBtnTruncated();
+      }
+    });
+    this.enableAddTruncatedClass('tab-header');
+    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
+  }
+  // click event handler
+  handleClick(event) {
+    ;
+    this.addBtnTruncated();
+    // check if the input box is checked
+    this.checked = event.target.checked;
+    // Getting cta element
+    const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
+    // Updating the cta text 
+    this.checked
+      ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
+      : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
+    this.checked ? cta.classList.add('show-less-cta') : cta.classList.remove('show-less-cta');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e) }), h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex} read-more-cta-label`, style: { textAlign: `${this.readMorePosition}` } }, h("span", null, this.moreText)))));
+  }
+  getCssClassMap() {
+    return {
+      ['box']: true,
+      [this.color]: true,
+      [this.size]: true,
+      ['add-icon']: this.isIcon
+    };
+  }
+  static get is() { return "ptc-readmore"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-readmore.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-readmore.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "moreText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "customize read more text"
+        },
+        "attribute": "more-text",
+        "reflect": false,
+        "defaultValue": "'read more'"
+      },
+      "lessText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "customize less more text"
+        },
+        "attribute": "less-text",
+        "reflect": false
+      },
+      "readMorePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read more text position: left or right"
+        },
+        "attribute": "read-more-position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "display": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inline' | 'block'",
+          "resolved": "\"block\" | \"inline\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "string"
+            }],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "visibleLines": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'  | 'line10'",
+          "resolved": "\"line1\" | \"line10\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visible lines"
+        },
+        "attribute": "visible-lines",
+        "reflect": false,
+        "defaultValue": "'line2'"
+      },
+      "visibleLinesCustom": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visible lines custom numebr"
+        },
+        "attribute": "visible-lines-custom",
+        "reflect": false
+      },
+      "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 lable"
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "'z-auto'"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Input element state"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size: Font size of the read more text. Options small=16px | medium=18px | large=24px"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "isIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon: if true show up/down icon besides text"
+        },
+        "attribute": "is-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'blue' | 'gray' | 'green' | 'initial'",
+          "resolved": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "color: Read more text color. Options: default is blue.  'blue' | 'gray' | 'green' | 'initial'"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'blue'"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "addBtnTruncated",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}