@ptcwebops/ptcw-design 5.3.6 → 5.3.7

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

@@ -0,0 +1,232 @@
+import { Host, h } from '@stencil/core';
+export class PtcReadmoreNew {
+  constructor() {
+    this.maxCharacters = 100;
+    this.readMoreText = "Read More";
+    this.readLessText = "Read Less";
+    this.maxLines = undefined;
+    this.expanded = false;
+    this.fullText = '';
+    this.truncated = false;
+  }
+  componentWillLoad() {
+    requestAnimationFrame(() => {
+      let slot = this.el.shadowRoot.querySelector('slot');
+      this.processText(slot);
+    });
+  }
+  slotChangeHandler(event) {
+    const slot = event.target;
+    this.processText(slot);
+  }
+  processText(slot) {
+    if (slot) {
+      const nodes = slot.assignedNodes({ flatten: true });
+      this.fullText = nodes
+        .map(node => node.textContent)
+        .join('')
+        .trim();
+      if (this.maxLines) {
+        this.truncateByLines();
+      }
+      else if (this.fullText.length > this.maxCharacters) {
+        this.truncated = true;
+      }
+    }
+    this.displayText.emit(this.truncated);
+  }
+  truncateByLines() {
+    const paragraph = document.createElement('p');
+    paragraph.style.visibility = 'hidden';
+    paragraph.style.position = 'fixed';
+    paragraph.innerText = this.fullText;
+    document.body.appendChild(paragraph);
+    const lineHeight = parseInt(window.getComputedStyle(paragraph).lineHeight, 10);
+    const maxHeight = lineHeight * this.maxLines;
+    paragraph.style.maxHeight = `${maxHeight}px`;
+    paragraph.style.overflow = 'hidden';
+    if (paragraph.scrollHeight > maxHeight) {
+      this.truncated = true;
+    }
+    document.body.removeChild(paragraph);
+  }
+  getContent() {
+    if (this.expanded) {
+      return this.fullText;
+    }
+    else if (this.maxLines) {
+      const paragraph = document.createElement('p');
+      paragraph.style.visibility = 'hidden';
+      paragraph.style.position = 'fixed';
+      paragraph.innerText = this.fullText;
+      document.body.appendChild(paragraph);
+      const lineHeight = parseInt(window.getComputedStyle(paragraph).lineHeight, 10);
+      const maxHeight = lineHeight * this.maxLines;
+      console.log("lineHeight: " + lineHeight);
+      paragraph.style.maxHeight = `${maxHeight}px`;
+      paragraph.style.overflow = 'hidden';
+      let truncatedText = '';
+      for (let i = 0; i < this.fullText.length; i++) {
+        paragraph.innerText = this.fullText.slice(0, i) + '...';
+        if (paragraph.scrollHeight > maxHeight) {
+          truncatedText = this.fullText.slice(0, i - 1) + '...';
+          break;
+        }
+      }
+      document.body.removeChild(paragraph);
+      return truncatedText;
+    }
+    else {
+      return this.fullText.substring(0, this.maxCharacters) + '...';
+    }
+  }
+  getLabel() {
+    return this.expanded ? this.readLessText : this.readMoreText;
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+    this.readMoreTrigger.emit(this.expanded);
+  }
+  render() {
+    return (h(Host, null, h("p", { class: "description" }, this.truncated ? this.getContent() : h("slot", null)), this.truncated ?
+      h("label", { class: "label", onClick: () => this.toggleExpand() }, this.getLabel())
+      : null));
+  }
+  static get is() { return "ptc-readmore-new"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-readmore-new.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-readmore-new.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "maxCharacters": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-characters",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "readMoreText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-more-text",
+        "reflect": false,
+        "defaultValue": "\"Read More\""
+      },
+      "readLessText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-less-text",
+        "reflect": false,
+        "defaultValue": "\"Read Less\""
+      },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {},
+      "fullText": {},
+      "truncated": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "readMoreTrigger",
+        "name": "readMoreTrigger",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "displayText",
+        "name": "displayText",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "slotchange",
+        "method": "slotChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/ptc-readmore-v2/ptc-readmore-v2.css

@@ -70,5 +70,5 @@ ptc-link, ptc-square-card,
 }
 :host .truncated-label::before {
   content: "";
-  padding-left: 8px;
+  padding-left: var(--ptc-element-spacing-02);
 }

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+
+  .description{
+    display: inline;
+  }
+
+  .label{
+    cursor: pointer;
+    color: var(--color-hyperlink);
+    font-size: var(--ptc-font-size-small);
+    font-weight: var(--ptc-font-weight-bold);
+    text-decoration-line: underline;
+    line-height: var(--ptc-line-height-densest);
+
+    &::before{
+      content: '';
+      padding-left: 8px;
+    }
+  }
+}

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

@@ -0,0 +1,231 @@
+import { Host, h } from '@stencil/core';
+export class PtcReadmoreV3 {
+  constructor() {
+    this.maxCharacters = 100;
+    this.readMoreText = 'Read More';
+    this.readLessText = 'Read Less';
+    this.maxLines = undefined;
+    this.expanded = false;
+    this.fullText = '';
+    this.truncated = false;
+  }
+  componentWillLoad() {
+    requestAnimationFrame(() => {
+      let slot = this.el.shadowRoot.querySelector('slot');
+      this.processText(slot);
+    });
+  }
+  slotChangeHandler(event) {
+    const slot = event.target;
+    this.processText(slot);
+  }
+  processText(slot) {
+    if (slot) {
+      const nodes = slot.assignedNodes({ flatten: true });
+      this.fullText = nodes
+        .map(node => node.textContent)
+        .join('')
+        .trim();
+      if (this.maxLines) {
+        this.truncateByLines();
+      }
+      else if (this.fullText.length > this.maxCharacters) {
+        this.truncated = true;
+      }
+    }
+    this.displayText.emit(this.truncated);
+  }
+  truncateByLines() {
+    const paragraph = document.createElement('p');
+    paragraph.style.visibility = 'hidden';
+    paragraph.style.position = 'fixed';
+    paragraph.innerText = this.fullText;
+    document.body.appendChild(paragraph);
+    const lineHeight = parseFloat(window.getComputedStyle(paragraph).lineHeight);
+    console.log('lineHeight: ' + lineHeight);
+    const maxHeight = lineHeight * this.maxLines;
+    paragraph.style.maxHeight = `${maxHeight}px`;
+    paragraph.style.overflow = 'hidden';
+    if (paragraph.scrollHeight > maxHeight) {
+      this.truncated = true;
+    }
+    document.body.removeChild(paragraph);
+  }
+  getContent() {
+    if (this.expanded) {
+      return this.fullText;
+    }
+    else if (this.maxLines) {
+      const paragraph = document.createElement('p');
+      paragraph.style.visibility = 'hidden';
+      paragraph.style.position = 'fixed';
+      paragraph.innerText = this.fullText;
+      document.body.appendChild(paragraph);
+      const lineHeight = parseFloat(window.getComputedStyle(paragraph).lineHeight);
+      const maxHeight = lineHeight * this.maxLines;
+      console.log('lineHeight: ' + lineHeight);
+      paragraph.style.maxHeight = `${maxHeight}px`;
+      paragraph.style.overflow = 'hidden';
+      let truncatedText = '';
+      for (let i = 0; i < this.fullText.length; i++) {
+        paragraph.innerText = this.fullText.slice(0, i) + '...';
+        if (paragraph.scrollHeight > maxHeight) {
+          truncatedText = this.fullText.slice(0, i - 1) + '...';
+          break;
+        }
+      }
+      document.body.removeChild(paragraph);
+      return truncatedText;
+    }
+    else {
+      return this.fullText.substring(0, this.maxCharacters) + '...';
+    }
+  }
+  getLabel() {
+    return this.expanded ? this.readLessText : this.readMoreText;
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+    this.readMoreTrigger.emit(this.expanded);
+  }
+  render() {
+    return (h(Host, null, h("p", { class: "description" }, this.truncated ? this.getContent() : h("slot", null)), this.truncated ? (h("label", { class: "label", onClick: () => this.toggleExpand() }, this.getLabel())) : null));
+  }
+  static get is() { return "ptc-readmore-v3"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-readmore-v3.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-readmore-v3.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "maxCharacters": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-characters",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "readMoreText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-more-text",
+        "reflect": false,
+        "defaultValue": "'Read More'"
+      },
+      "readLessText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-less-text",
+        "reflect": false,
+        "defaultValue": "'Read Less'"
+      },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {},
+      "fullText": {},
+      "truncated": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "readMoreTrigger",
+        "name": "readMoreTrigger",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "displayText",
+        "name": "displayText",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "slotchange",
+        "method": "slotChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/custom-elements/index.d.ts

@@ -704,12 +704,24 @@ export const PtcReadmoreChar: {
   new (): PtcReadmoreChar;
 };
 
+interface PtcReadmoreNew extends Components.PtcReadmoreNew, HTMLElement {}
+export const PtcReadmoreNew: {
+  prototype: PtcReadmoreNew;
+  new (): PtcReadmoreNew;
+};
+
 interface PtcReadmoreV2 extends Components.PtcReadmoreV2, HTMLElement {}
 export const PtcReadmoreV2: {
   prototype: PtcReadmoreV2;
   new (): PtcReadmoreV2;
 };
 
+interface PtcReadmoreV3 extends Components.PtcReadmoreV3, HTMLElement {}
+export const PtcReadmoreV3: {
+  prototype: PtcReadmoreV3;
+  new (): PtcReadmoreV3;
+};
+
 interface PtcRelatedCardRail extends Components.PtcRelatedCardRail, HTMLElement {}
 export const PtcRelatedCardRail: {
   prototype: PtcRelatedCardRail;