@ptcwebops/ptcw-design 6.3.37 → 6.3.38

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

@@ -1,20 +1,20 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcReadmore {
   constructor() {
     /**
-   * Handle keyboard interactions
-   */
+     * Handle keyboard interactions
+     */
     this.handleKeyDown = (event) => {
-      if (event.key !== 'Enter')
+      if (event.key !== "Enter")
         return;
-      const checkBoxEl = this.el.shadowRoot.querySelector('#expanded');
-      const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
+      const checkBoxEl = this.el.shadowRoot.querySelector("#expanded");
+      const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
       if (!checkBoxEl || !cta)
         return;
       checkBoxEl.checked = !checkBoxEl.checked;
       const isExpanded = checkBoxEl.checked;
-      cta.innerHTML = `<span>${isExpanded ? this.lessText || '' : this.moreText || ''}</span>`;
-      cta.classList.toggle('show-less-cta', isExpanded);
+      cta.innerHTML = `<span>${isExpanded ? this.lessText || "" : this.moreText || ""}</span>`;
+      cta.classList.toggle("show-less-cta", isExpanded);
       if (isExpanded) {
         // Focus on the first element with tabindex="-1" within 'ptc-readmore'
         const firstTabIndexMinusOne = this.el.querySelector('[tabindex="-1"]');
@@ -22,26 +22,26 @@ export class PtcReadmore {
       }
       else {
         cta.focus();
-        const readMoreText = this.el.shadowRoot.querySelector('.read-more-text');
-        readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add('truncated');
+        const readMoreText = this.el.shadowRoot.querySelector(".read-more-text");
+        readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add("truncated");
       }
       this.setTabIndex();
       // if lessText content is not present then add tabindex=-1 to the more/less label
-      if (cta.textContent == '') {
-        cta.setAttribute('tabindex', '-1');
+      if (cta.textContent == "") {
+        cta.setAttribute("tabindex", "-1");
       }
     };
-    this.moreText = 'read more';
+    this.moreText = "read more";
     this.lessText = undefined;
-    this.readMorePosition = 'right';
-    this.display = 'inline';
-    this.visibleLines = 'line2';
+    this.readMorePosition = "right";
+    this.display = "inline";
+    this.visibleLines = "line2";
     this.visibleLinesCustom = undefined;
-    this.zIndex = 'z-auto';
+    this.zIndex = "z-auto";
     this.checked = false;
-    this.size = 'small';
+    this.size = "small";
     this.isIcon = false;
-    this.color = 'blue';
+    this.color = "blue";
     this.isContentSlotted = false;
   }
   async updateReadmoreStatus() {
@@ -51,13 +51,13 @@ export class PtcReadmore {
   }
   addBtnTruncated() {
     const appRoot = this.el.shadowRoot;
-    const ps = appRoot.querySelectorAll('.read-more-text');
-    ps.forEach(p => {
+    const ps = appRoot.querySelectorAll(".read-more-text");
+    ps.forEach((p) => {
       // if (this.visibleCharacters){
       //   const truncatedText = p.textContent.slice(0, this.visibleCharacters);
       //   p.textContent = truncatedText;
       // }
-      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
+      p.classList[p.scrollHeight > p.clientHeight ? "add" : "remove"]("truncated");
     });
   }
   // Created this function to initialize the truncate function on specific elements like tabs
@@ -66,7 +66,7 @@ export class PtcReadmore {
     for (const element of Array.from(allTabHeaders)) {
       let tabHeader = element;
       if (tabHeader) {
-        tabHeader.addEventListener('click', () => {
+        tabHeader.addEventListener("click", () => {
           setTimeout(() => {
             this.addBtnTruncated();
           }, 100);
@@ -81,9 +81,9 @@ export class PtcReadmore {
         this.addBtnTruncated();
       }
     });
-    this.enableAddTruncatedClass('tab-header');
-    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-    this.enableAddTruncatedClass('ptc-product-card');
+    this.enableAddTruncatedClass("tab-header");
+    this.enableAddTruncatedClass("ptc-ellipsis-dropdown");
+    this.enableAddTruncatedClass("ptc-product-card");
     // added code for tabnavigation
     setTimeout(() => {
       this.setTabIndex();
@@ -97,25 +97,27 @@ export class PtcReadmore {
       links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
     }
     else {
-      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector('slot').assignedNodes();
-      links = (slot[0] instanceof HTMLElement)
-        ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-        : null;
+      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector("slot").assignedNodes();
+      links =
+        slot[0] instanceof HTMLElement
+          ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+          : null;
     }
     let bottom = 999999;
-    let rects = (_c = this.el.shadowRoot.querySelector('.read-more-text')) === null || _c === void 0 ? void 0 : _c.getClientRects();
+    let rects = (_c = this.el.shadowRoot
+      .querySelector(".read-more-text")) === null || _c === void 0 ? void 0 : _c.getClientRects();
     if (rects && rects.length > 0) {
       bottom = rects[0].bottom;
     }
     if (links) {
-      links.forEach(link => {
+      links.forEach((link) => {
         let linkRects = link.getClientRects();
         if (linkRects && linkRects.length > 0) {
           if (linkRects[0].top < bottom) {
-            link.setAttribute('tabindex', '0');
+            link.setAttribute("tabindex", "0");
           }
           else {
-            link.setAttribute('tabindex', '-1');
+            link.setAttribute("tabindex", "-1");
           }
         }
       });
@@ -129,12 +131,14 @@ export class PtcReadmore {
     // 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');
+    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');
+      ? (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");
     // Emit the state change event
     this.readmoreToggle.emit({
       event: event,
@@ -143,8 +147,8 @@ export class PtcReadmore {
     });
     if (links) {
       if (this.checked) {
-        links.forEach(link => {
-          link.setAttribute('tabindex', '0');
+        links.forEach((link) => {
+          link.setAttribute("tabindex", "0");
         });
       }
       else {
@@ -154,14 +158,16 @@ export class PtcReadmore {
   }
   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), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)) : null, h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + ' ' + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, h("span", null, this.moreText)))));
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? (h("p", { class: `read-more-text ${this.visibleLines}`, style: {
+        WebkitLineClamp: `${this.visibleLinesCustom}`,
+      } }, h("slot", null))) : null, h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + " " + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, h("span", null, this.moreText)))));
   }
   getCssClassMap() {
     return {
-      ['box']: true,
+      ["box"]: true,
       [this.color]: true,
       [this.size]: true,
-      ['add-icon']: this.isIcon
+      ["add-icon"]: this.isIcon,
     };
   }
   static get is() { return "ptc-readmore"; }
@@ -194,7 +200,7 @@ export class PtcReadmore {
         },
         "attribute": "more-text",
         "reflect": false,
-        "defaultValue": "'read more'"
+        "defaultValue": "\"read more\""
       },
       "lessText": {
         "type": "string",
@@ -217,7 +223,7 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'right' | 'center'",
+          "original": "\"left\" | \"right\" | \"center\"",
           "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },
@@ -229,13 +235,13 @@ export class PtcReadmore {
         },
         "attribute": "read-more-position",
         "reflect": false,
-        "defaultValue": "'right'"
+        "defaultValue": "\"right\""
       },
       "display": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'inline' | 'block'",
+          "original": "\"inline\" | \"block\"",
           "resolved": "\"block\" | \"inline\"",
           "references": {}
         },
@@ -250,13 +256,13 @@ export class PtcReadmore {
         },
         "attribute": "display",
         "reflect": false,
-        "defaultValue": "'inline'"
+        "defaultValue": "\"inline\""
       },
       "visibleLines": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'  | 'line10'",
+          "original": "| \"line1\"\r\n\t\t| \"line2\"\r\n\t\t| \"line3\"\r\n\t\t| \"line4\"\r\n\t\t| \"line5\"\r\n\t\t| \"line10\"",
           "resolved": "\"line1\" | \"line10\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
           "references": {}
         },
@@ -268,7 +274,7 @@ export class PtcReadmore {
         },
         "attribute": "visible-lines",
         "reflect": false,
-        "defaultValue": "'line2'"
+        "defaultValue": "\"line2\""
       },
       "visibleLinesCustom": {
         "type": "number",
@@ -291,7 +297,7 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
+          "original": "\"z-auto\" | \"z-1\" | \"z-2\" | \"z-3\" | \"z-999\"",
           "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
           "references": {}
         },
@@ -303,7 +309,7 @@ export class PtcReadmore {
         },
         "attribute": "z-index",
         "reflect": false,
-        "defaultValue": "'z-auto'"
+        "defaultValue": "\"z-auto\""
       },
       "checked": {
         "type": "boolean",
@@ -327,7 +333,7 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'small' | 'medium' | 'large'",
+          "original": "\"small\" | \"medium\" | \"large\"",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {}
         },
@@ -339,7 +345,7 @@ export class PtcReadmore {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'small'"
+        "defaultValue": "\"small\""
       },
       "isIcon": {
         "type": "boolean",
@@ -363,7 +369,7 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'blue' | 'gray' | 'green' | 'initial'",
+          "original": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
           "resolved": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
           "references": {}
         },
@@ -375,7 +381,7 @@ export class PtcReadmore {
         },
         "attribute": "color",
         "reflect": false,
-        "defaultValue": "'blue'"
+        "defaultValue": "\"blue\""
       },
       "isContentSlotted": {
         "type": "boolean",

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -77,39 +81,131 @@ a.disabled {
   cursor: not-allowed;
 }
 a:focus-visible {
-  outline: 5px solid #003DD6 !important;
+  outline: 5px solid #003dd6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a),
+.light-links a.light-link,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a),
+.background-grey-10 a.light-link,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a),
+.background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited,
+.light-links a.light-link:visited,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited,
+.background-grey-10 a.light-link:visited,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited,
+.background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:active,
+.light-links a.light-link:active,
+.light-links a.light-link:visited:active,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):active,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:active,
+.background-grey-10 a.light-link:active,
+.background-grey-10 a.light-link:visited:active,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):active,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:active,
+.background-plm-grey a.light-link:active,
+.background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:hover,
+.light-links a.light-link:hover,
+.light-links a.light-link:visited:hover,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):hover,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:hover,
+.background-grey-10 a.light-link:hover,
+.background-grey-10 a.light-link:visited:hover,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):hover,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):visited:hover,
+.background-plm-grey a.light-link:hover,
+.background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a).disabled,
+.light-links a.light-link.disabled,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a).disabled,
+.background-grey-10 a.light-link.disabled,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a).disabled,
+.background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):focus-visible,
+.light-links a.light-link:focus-visible,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):focus-visible,
+.background-grey-10 a.light-link:focus-visible,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.vjs-social-share-links a):focus-visible,
+.background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+.light-links .podcast-cta-section a,
+.background-grey-10 .podcast-cta-section a,
+.background-plm-grey .podcast-cta-section a {
   border: 2px solid transparent;
 }
-.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+.light-links .podcast-cta-section a:focus-visible,
+.background-grey-10 .podcast-cta-section a:focus-visible,
+.background-plm-grey .podcast-cta-section a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcReadmoreChar {
   constructor() {
     this.expanded = false;
@@ -16,13 +16,13 @@ export class PtcReadmoreChar {
     this.readMoreClicked.emit(this.expanded);
   }
   render() {
-    const contentText = this.description
-      ? this.description.trim()
-      : '';
-    const truncatedContent = contentText.length > this.maxCharacters ? contentText.substring(0, this.maxCharacters) + '...' : contentText;
+    const contentText = this.description ? this.description.trim() : "";
+    const truncatedContent = contentText.length > this.maxCharacters
+      ? contentText.substring(0, this.maxCharacters) + "..."
+      : contentText;
     const label = this.expanded ? this.readLessText : this.readMoreText;
-    return (h(Host, null, h("p", { class: "description" }, this.expanded ? (this.description) : (truncatedContent)), contentText.length > this.maxCharacters && (h("div", { id: this.trackerId, class: 'tracker-div' }, h("label", { class: "truncated-label mf-listen", onClick: () => this.toggleExpand(), onKeyDown: (e) => {
-        if (e.key === 'Enter') {
+    return (h(Host, null, h("p", { class: "description" }, this.expanded ? this.description : truncatedContent), contentText.length > this.maxCharacters && (h("div", { id: this.trackerId, class: "tracker-div" }, h("label", { class: "truncated-label mf-listen", onClick: () => this.toggleExpand(), onKeyDown: (e) => {
+        if (e.key === "Enter") {
           this.toggleExpand();
         }
       }, tabIndex: 0 }, label)))));

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcReadmoreNew {
   constructor() {
     this.maxCharacters = 100;
@@ -6,12 +6,12 @@ export class PtcReadmoreNew {
     this.readLessText = "Read Less";
     this.maxLines = undefined;
     this.expanded = false;
-    this.fullText = '';
+    this.fullText = "";
     this.truncated = false;
   }
   componentWillLoad() {
     requestAnimationFrame(() => {
-      let slot = this.el.shadowRoot.querySelector('slot');
+      let slot = this.el.shadowRoot.querySelector("slot");
       this.processText(slot);
     });
   }
@@ -23,8 +23,8 @@ export class PtcReadmoreNew {
     if (slot) {
       const nodes = slot.assignedNodes({ flatten: true });
       this.fullText = nodes
-        .map(node => node.textContent)
-        .join('')
+        .map((node) => node.textContent)
+        .join("")
         .trim();
       if (this.maxLines) {
         this.truncateByLines();
@@ -36,15 +36,15 @@ export class PtcReadmoreNew {
     this.displayText.emit(this.truncated);
   }
   truncateByLines() {
-    const paragraph = document.createElement('p');
-    paragraph.style.visibility = 'hidden';
-    paragraph.style.position = 'fixed';
+    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';
+    paragraph.style.overflow = "hidden";
     if (paragraph.scrollHeight > maxHeight) {
       this.truncated = true;
     }
@@ -55,20 +55,20 @@ export class PtcReadmoreNew {
       return this.fullText;
     }
     else if (this.maxLines) {
-      const paragraph = document.createElement('p');
-      paragraph.style.visibility = 'hidden';
-      paragraph.style.position = 'fixed';
+      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';
-      let truncatedText = '';
+      paragraph.style.overflow = "hidden";
+      let truncatedText = "";
       for (let i = 0; i < this.fullText.length; i++) {
-        paragraph.innerText = this.fullText.slice(0, i) + '...';
+        paragraph.innerText = this.fullText.slice(0, i) + "...";
         if (paragraph.scrollHeight > maxHeight) {
-          truncatedText = this.fullText.slice(0, i - 1) + '...';
+          truncatedText = this.fullText.slice(0, i - 1) + "...";
           break;
         }
       }
@@ -76,7 +76,7 @@ export class PtcReadmoreNew {
       return truncatedText;
     }
     else {
-      return this.fullText.substring(0, this.maxCharacters) + '...';
+      return this.fullText.substring(0, this.maxCharacters) + "...";
     }
   }
   getLabel() {
@@ -87,9 +87,7 @@ export class PtcReadmoreNew {
     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));
+    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"; }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */