npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.37 → 6.3.38 - Mend

@ptcwebops/ptcw-design 6.3.37 → 6.3.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (856) hide show

package/dist/collection/components/ptc-readmore-v2/ptc-readmore-v2.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcReadmoreV2 {
   constructor() {
     this.getContent = () => {
-      return (this.fullText.length > this.maxCharacters) ?
-        this.fullText.substring(0, this.maxCharacters) + '...' :
-        this.fullText;
+      return this.fullText.length > this.maxCharacters
+        ? this.fullText.substring(0, this.maxCharacters) + "..."
+        : this.fullText;
     };
     this.getLabel = () => {
       return this.expanded ? this.readLessText : this.readMoreText;
@@ -14,8 +14,8 @@ export class PtcReadmoreV2 {
     this.readLessText = "Read Less";
     this.truncated = false;
     this.expanded = false;
-    this.fullText = '';
-    this.displayText = '';
+    this.fullText = "";
+    this.displayText = "";
   }
   slotChangeHandler(event) {
     const slot = event.target;
@@ -23,7 +23,7 @@ export class PtcReadmoreV2 {
   }
   componentWillLoad() {
     requestAnimationFrame(() => {
-      let slot = this.el.shadowRoot.querySelector('slot');
+      let slot = this.el.shadowRoot.querySelector("slot");
       this.processText(slot);
     });
   }
@@ -31,8 +31,8 @@ export class PtcReadmoreV2 {
     if (slot) {
       const nodes = slot.assignedNodes({ flatten: true });
       this.fullText = nodes
-        .map(node => node.textContent)
-        .join('')
+        .map((node) => node.textContent)
+        .join("")
         .trim();
       if (this.fullText.length > this.maxCharacters) {
         this.truncated = true;
@@ -44,11 +44,7 @@ export class PtcReadmoreV2 {
     this.readMoreClicked.emit(this.expanded);
   }
   render() {
-    return (h(Host, null, h("p", { class: "description" }, this.truncated ?
-      (this.expanded ? h("slot", null) : this.getContent()) :
-      h("slot", null)), this.truncated ?
-      h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, this.getLabel()) :
-      null));
+    return (h(Host, null, h("p", { class: "description" }, this.truncated ? (this.expanded ? (h("slot", null)) : (this.getContent())) : (h("slot", null))), this.truncated ? (h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, this.getLabel())) : null));
   }
   static get is() { return "ptc-readmore-v2"; }
   static get encapsulation() { return "shadow"; }

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

@@ -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-v3/ptc-readmore-v3.js CHANGED Viewed

@@ -1,19 +1,19 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcReadmoreV3 {
   constructor() {
     this.maxCharacters = 100;
-    this.readMoreText = 'Read More';
-    this.readLessText = 'Read Less';
+    this.readMoreText = "Read More";
+    this.readLessText = "Read Less";
     this.maxLines = undefined;
     this.contentStyles = undefined;
     this.trackerId = "";
     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 PtcReadmoreV3 {
   }
   // Helper method to parse the style string into an object
   parseStyles(styleString) {
-    return styleString.split(';').reduce((styleObj, style) => {
-      const [key, value] = style.split(':').map(item => item.trim());
+    return styleString.split(";").reduce((styleObj, style) => {
+      const [key, value] = style.split(":").map((item) => item.trim());
       if (key && value) {
         styleObj[key] = value;
       }
@@ -35,8 +35,8 @@ export class PtcReadmoreV3 {
     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();
@@ -48,15 +48,15 @@ export class PtcReadmoreV3 {
     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 = parseFloat(window.getComputedStyle(paragraph).lineHeight);
     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;
     }
@@ -68,9 +68,9 @@ export class PtcReadmoreV3 {
       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";
       // Apply parsed styles dynamically
       //Object.assign(paragraph.style, parsedStyles);
       paragraph.innerText = this.fullText;
@@ -78,12 +78,12 @@ export class PtcReadmoreV3 {
       const lineHeight = parseFloat(window.getComputedStyle(paragraph).lineHeight);
       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;
         }
       }
@@ -91,7 +91,7 @@ export class PtcReadmoreV3 {
       return truncatedText;
     }
     else {
-      return this.fullText.substring(0, this.maxCharacters) + '...';
+      return this.fullText.substring(0, this.maxCharacters) + "...";
     }
   }
   getLabel() {
@@ -102,7 +102,7 @@ export class PtcReadmoreV3 {
     this.readMoreTrigger.emit(this.expanded);
   }
   handleKeyDown(event) {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       this.toggleExpand();
     }
   }
@@ -158,7 +158,7 @@ export class PtcReadmoreV3 {
         },
         "attribute": "read-more-text",
         "reflect": false,
-        "defaultValue": "'Read More'"
+        "defaultValue": "\"Read More\""
       },
       "readLessText": {
         "type": "string",
@@ -176,7 +176,7 @@ export class PtcReadmoreV3 {
         },
         "attribute": "read-less-text",
         "reflect": false,
-        "defaultValue": "'Read Less'"
+        "defaultValue": "\"Read Less\""
       },
       "maxLines": {
         "type": "number",

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.css CHANGED Viewed

@@ -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 */
@@ -154,6 +158,7 @@ ptc-link, ptc-square-card,
 @media only screen and (min-width: 768px) {
   :host .card-rail-container .card-rail-content icon-asset#left-arrow {
     left: 11px;
+    /* [Expected(24) - HitAreaPadding(13)] */
   }
   :host .card-rail-container .card-rail-content icon-asset#right-arrow {
     right: 11px;

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
+import { Host, h } from "@stencil/core";
+import { createFocusTrap } from "focus-trap";
 export class PtcRelatedCardRail {
   constructor() {
     //lastFocusElement: HTMLElement;
@@ -38,73 +38,76 @@ export class PtcRelatedCardRail {
       };
       if (windowWidth >= 2600) {
         props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1980) {
         props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1440) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 1200) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 992) {
         props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
+        props.parahFontSize = "xx-small";
       }
       else if (windowWidth >= 768) {
         props.contentCards = 2;
-        props.parahFontSize = 'xxx-small';
+        props.parahFontSize = "xxx-small";
       }
       else {
         props.contentCards = 1;
-        props.parahFontSize = 'xxx-small';
+        props.parahFontSize = "xxx-small";
       }
       this.screenBasedProps = Object.assign({}, props);
     };
     this.handlePrevClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
       if (this.cardInView > 0) {
         this.cardInView -= 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.handleNextClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < contentCards.length - this.screenBasedProps.contentCards) {
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
+      if (this.cardInView <
+        contentCards.length - this.screenBasedProps.contentCards) {
         this.cardInView += 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.handleOnScrollBehaviour = () => {
       if (!this.closed) {
-        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
+        let windowHeight = window.innerHeight ||
+          (document.documentElement || document.body).clientHeight;
         let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
-        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
+        let scrollTop = window.scrollY ||
+          (document.documentElement || document.body).scrollTop;
         let trackLength = documentHeight - windowHeight;
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
-          this.el.style.display = 'block';
+          this.el.style.display = "block";
           this.isVisible = true;
         }
         else {
@@ -112,10 +115,10 @@ export class PtcRelatedCardRail {
             this.focusTrap.deactivate();
             this.focusTrap = undefined;
           }
-          this.el.style.display = 'none';
+          this.el.style.display = "none";
           this.isVisible = false;
         }
-        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
+        let cardRailContainer = this.el.shadowRoot.querySelector(".card-rail-container");
         let pageFooter = document.querySelector(this.footerQuerySelector);
         if (pageFooter) {
           let pageFooterTop = pageFooter.getBoundingClientRect().top;
@@ -136,17 +139,17 @@ export class PtcRelatedCardRail {
     this.handleOnResizeBehaviour = () => {
       var _a, _b;
       this.setScreenBasedProps();
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll(".content");
       contentContainer.scrollTo({
         left: contentCards[0].offsetLeft - contentContainerMarginLeft,
       });
       this.cardInView = 0;
     };
     this.handleKeyPress = (event) => {
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
         this.openedByKeyboard = true;
         if (this.focusTrap && this.closed === true) {
           this.focusTrap.deactivate();
@@ -159,7 +162,7 @@ export class PtcRelatedCardRail {
       this.openedByKeyboard = false;
     };
     this.footerQuerySelector = undefined;
-    this.railTitle = 'Read More Case Studies';
+    this.railTitle = "Read More Case Studies";
     this.isVisible = false;
     this.closed = false;
     this.cardInView = 0;
@@ -178,32 +181,32 @@ export class PtcRelatedCardRail {
     }
   }
   handleKeyClose(event) {
-    if (event.key === 'Enter' || event.key === 'Esc') {
+    if (event.key === "Enter" || event.key === "Esc") {
       event.preventDefault();
       this.closed = true;
     }
   }
   connectedCallback() {
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    document.addEventListener('mousedown', this.handleMouseDown, true);
+    document.addEventListener("keydown", this.handleKeyPress, true);
+    document.addEventListener("mousedown", this.handleMouseDown, true);
   }
   componentWillLoad() {
     const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
     for (let ind in relatedCards) {
       let card = relatedCards[ind];
-      if (card.tagName === 'DIV') {
+      if (card.tagName === "DIV") {
         let cardData = {
           image: undefined,
           text: undefined,
           href: undefined,
           altText: undefined,
         };
-        let cardImage = card.querySelector('img');
-        let cardLink = card.querySelector('a');
-        cardData.image = cardImage.getAttribute('src');
-        cardData.altText = cardImage.getAttribute('alt');
+        let cardImage = card.querySelector("img");
+        let cardLink = card.querySelector("a");
+        cardData.image = cardImage.getAttribute("src");
+        cardData.altText = cardImage.getAttribute("alt");
         cardData.text = cardLink.innerText;
-        cardData.href = cardLink.getAttribute('href');
+        cardData.href = cardLink.getAttribute("href");
         this.data.push(cardData);
         card.remove();
       }
@@ -212,28 +215,30 @@ export class PtcRelatedCardRail {
     this.setScreenBasedProps();
   }
   componentDidLoad() {
-    window.addEventListener('scroll', this.handleOnScrollBehaviour);
-    window.addEventListener('resize', this.handleOnResizeBehaviour);
+    window.addEventListener("scroll", this.handleOnScrollBehaviour);
+    window.addEventListener("resize", this.handleOnResizeBehaviour);
   }
   disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    document.removeEventListener('mousedown', this.handleMouseDown, true);
+    document.removeEventListener("keydown", this.handleKeyPress, true);
+    document.removeEventListener("mousedown", this.handleMouseDown, true);
     if (this.focusTrap) {
       this.focusTrap.deactivate();
       this.focusTrap = undefined;
     }
   }
   render() {
-    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: el => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: event => this.handleKeyClose(event), onClick: () => {
+    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => {
         if (this.focusTrap) {
           this.focusTrap.deactivate();
         }
         this.closed = true;
       }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => (h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => {
-        event.key === 'Enter' && window.open(item.href);
+        event.key === "Enter" &&
+          window.open(item.href);
       }, onClick: () => {
         window.open(item.href);
-      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
+      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps
+        .parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }
@@ -282,7 +287,7 @@ export class PtcRelatedCardRail {
         },
         "attribute": "rail-title",
         "reflect": false,
-        "defaultValue": "'Read More Case Studies'"
+        "defaultValue": "\"Read More Case Studies\""
       },
       "isVisible": {
         "type": "boolean",

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 //import ResizeObserver from "resize-observer-polyfill";
 export class PtcResponsiveWrapper {
   componentDidLoad() {
-    this.ro = new ResizeObserver(entries => {
+    this.ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         this.applySizeClasses(entry.contentRect.width);
       }