@ptcwebops/ptcw-design 6.3.36 → 6.3.37-beta

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

@@ -15,7 +15,7 @@ export class PtcQuote {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' && this.quoteImage &&
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' &&
       h("ptc-picture", { alt: "quote", src: this.quoteImage }), h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
   }
   getCssClassMap() {

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

@@ -82,26 +82,26 @@ a:focus-visible {
   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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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);

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

@@ -82,26 +82,26 @@ a:focus-visible {
   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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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, .podcast-cta-section 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);

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

@@ -3,32 +3,6 @@ import { createFocusTrap } from 'focus-trap';
 export class PtcRelatedCardRail {
   constructor() {
     //lastFocusElement: HTMLElement;
-    this.setFocusTrap = () => {
-      //console.log('this.focusTrap: ' + this.focusTrap)
-      if (!this.focusTrap) {
-        this.focusTrap = createFocusTrap(this.el, {
-          escapeDeactivates: true,
-          returnFocusOnDeactivate: true,
-          onActivate: () => {
-            if (!this.openedByKeyboard) {
-              this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
-            }
-          },
-          onDeactivate: () => {
-            setTimeout(() => {
-              this.closed = true;
-            }, 0);
-          },
-          tabbableOptions: {
-            getShadowRoot: true,
-          },
-        });
-      }
-      if (this.isVisible === true && this.openedByKeyboard === true) {
-        this.focusTrap && this.focusTrap.activate();
-        //console.log('activate focus trap');
-      }
-    };
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
@@ -105,7 +79,33 @@ export class PtcRelatedCardRail {
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
           this.el.style.display = 'block';
-          this.isVisible = true;
+          if (!this.focusTrap) {
+            this.focusTrap = createFocusTrap(this.el, {
+              escapeDeactivates: true,
+              returnFocusOnDeactivate: true,
+              // setReturnFocus:"#last-focus",
+              onActivate: () => {
+                if (!this.openedByKeyboard) {
+                  this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
+                }
+              },
+              onDeactivate: () => {
+                // this.focusTrap?.deactivate();
+                // this.focusTrap = undefined;
+                console.log('Hello~~~ onDeactivate');
+                setTimeout(() => {
+                  this.closed = true;
+                }, 0);
+                //this.setReturnFocus();
+              },
+              tabbableOptions: {
+                getShadowRoot: true,
+              },
+            });
+            if (this.openedByKeyboard && this.closed === false) {
+              this.focusTrap.activate();
+            }
+          }
         }
         else {
           if (this.focusTrap && this.closed === true) {
@@ -113,7 +113,6 @@ export class PtcRelatedCardRail {
             this.focusTrap = undefined;
           }
           this.el.style.display = 'none';
-          this.isVisible = false;
         }
         let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
         let pageFooter = document.querySelector(this.footerQuerySelector);
@@ -151,7 +150,7 @@ export class PtcRelatedCardRail {
         if (this.focusTrap && this.closed === true) {
           this.focusTrap.deactivate();
           this.focusTrap = undefined;
-          //console.log('flag');
+          console.log("flag");
         }
       }
     };
@@ -160,7 +159,6 @@ export class PtcRelatedCardRail {
     };
     this.footerQuerySelector = undefined;
     this.railTitle = 'Read More Case Studies';
-    this.isVisible = false;
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
@@ -171,16 +169,15 @@ export class PtcRelatedCardRail {
     };
     this.openedByKeyboard = false;
   }
-  onVisibleChanged(newValue) {
-    if (newValue) {
-      this.setFocusTrap();
-      //console.log('isVisible: ' + this.isVisible);
-    }
-  }
   handleKeyClose(event) {
     if (event.key === 'Enter' || event.key === 'Esc') {
       event.preventDefault();
-      this.closed = true;
+      if (this.focusTrap) {
+        this.focusTrap.deactivate();
+      }
+      else {
+        this.closed = true;
+      }
     }
   }
   connectedCallback() {
@@ -209,9 +206,9 @@ export class PtcRelatedCardRail {
       }
     }
     this.handleOnScrollBehaviour();
-    this.setScreenBasedProps();
   }
   componentDidLoad() {
+    this.setScreenBasedProps();
     window.addEventListener('scroll', this.handleOnScrollBehaviour);
     window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
@@ -228,7 +225,9 @@ export class PtcRelatedCardRail {
         if (this.focusTrap) {
           this.focusTrap.deactivate();
         }
-        this.closed = true;
+        else {
+          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);
       }, onClick: () => {
@@ -283,24 +282,6 @@ export class PtcRelatedCardRail {
         "attribute": "rail-title",
         "reflect": false,
         "defaultValue": "'Read More Case Studies'"
-      },
-      "isVisible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-visible",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -314,10 +295,4 @@ export class PtcRelatedCardRail {
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "isVisible",
-        "methodName": "onVisibleChanged"
-      }];
-  }
 }

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

@@ -277,9 +277,10 @@ export class PtcSelect {
     if (this.defaultValue)
       this.setValue();
     this.defaultSelect.listen('MDCSelect:change', () => {
-      if (this.selectedValue !== this.defaultSelect.value) {
-        this.valueChange.emit(this.defaultSelect.value);
-        this.selectedValue = this.defaultSelect.value;
+      const select = new MDCSelect(this.el.querySelector('.mdc-select'));
+      if (this.selectedValue !== select.value) {
+        this.valueChange.emit(select.value);
+        this.selectedValue = select.value;
         if (this.fieldId === 'contact-country') {
           const countryCode = this.selectedValue ? this.map[this.selectedValue] : '';
           const telField = document.querySelector('ptc-textfield[field-id="contact-phone"]');
@@ -292,11 +293,6 @@ export class PtcSelect {
     this.addKeyboardAccessibility();
     this.setupFocusHandlers();
   }
-  disconnectedCallback() {
-    if (this.defaultSelect) {
-      this.defaultSelect.destroy();
-    }
-  }
   addKeyboardAccessibility() {
     const selectAnchor = this.el.querySelector('.mdc-select__anchor');
     const menu = this.el.querySelector('.mdc-select__menu');

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js

@@ -11,7 +11,6 @@ export class PtcStickyIcons {
   }
   setHostLocation() {
     let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-    const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
     const element = document.querySelector("ptc-sticky-icons");
@@ -20,14 +19,6 @@ export class PtcStickyIcons {
       if (width < 992) {
         currEle.parentElement.appendChild(currEle);
         currEle.parentElement.style.paddingRight = "0px";
-        // Code for case study page only
-        // Moving sticky icon in the last ptc-section div
-        if (detailSection) {
-          const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
-          if (lastSection && !lastSection.contains(element)) {
-            lastSection.appendChild(currEle);
-          }
-        }
       }
       else {
         currEle.parentElement.prepend(currEle);

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -11,20 +11,6 @@ export class PtcTextCopyWithBackground {
     this.disableLightLinks = false;
     this.styles = undefined;
   }
-  componentDidLoad() {
-    var _a;
-    // Run logic only if type is 'hero-footer-cta'
-    if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
-      const centerWell = document.querySelector('.center-well');
-      if (centerWell) {
-        const sectionCount = centerWell.querySelectorAll(':scope > section').length;
-        // Add class only if more than one <section> inside .center-well
-        if (sectionCount > 1) {
-          (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
-        }
-      }
-    }
-  }
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
@@ -230,5 +216,4 @@ export class PtcTextCopyWithBackground {
       }
     };
   }
-  static get elementRef() { return "hostEle"; }
 }

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -3634,28 +3634,20 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing,
-.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__leading,
-.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined.mouse-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mouse-focus .mdc-notched-outline__trailing {
   border-color: var(--color-blue-07);
 }
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
 .ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
-.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading,
-.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__notch,
-.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
   border-color: var(--keyboard-nav-outline);
   border-width: 5px;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading,
-.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__leading {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__leading {
   border-top-left-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-left-radius: var(--ptc-border-radius-standard) !important;
 }
-.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing,
-.ptc-text-field .mdc-text-field--outlined.keyboard-focus .mdc-notched-outline__trailing {
+.ptc-text-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.keyboard-focus .mdc-notched-outline__trailing {
   border-top-right-radius: var(--ptc-border-radius-standard) !important;
   border-bottom-right-radius: var(--ptc-border-radius-standard) !important;
 }
@@ -3818,61 +3810,4 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field.email-signup .mdc-text-field__input::placeholder {
   font-size: var(--ptc-font-size-small);
-}
-.ptc-text-field textarea.mdc-text-field__input {
-  min-height: 56px;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: var(--ptc-font-size-xx-small);
-  width: 100%;
-  box-sizing: border-box;
-  resize: vertical;
-  display: block;
-  margin: 0;
-  position: static;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  line-height: var(--ptc-font-size-small);
-}
-.ptc-text-field .mdc-text-field--outlined {
-  height: 34px;
-  width: 273px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__trailing {
-  border-radius: 0px !important;
-}
-.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__leading {
-  border-radius: 0px !important;
-}
-.ptc-text-field .mdc-text-field--outlined:has(textarea.mdc-text-field__input) {
-  min-height: 34px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-.ptc-text-field .mdc-text-field:has(textarea.mdc-text-field__input) {
-  padding-right: 8px;
-  padding-top: 2px;
-  padding-bottom: 8px;
-}
-.ptc-text-field .mdc-text-field--with-internal-counter textarea.mdc-text-field__input {
-  padding-bottom: 32px;
-  overflow-y: auto;
-  word-break: break-word;
-}
-.ptc-text-field .textarea-wrapper {
-  position: relative;
-  z-index: 9;
-  padding-bottom: 20px;
-}
-.ptc-text-field .textarea-wrapper .mdc-text-field-character-counter {
-  position: absolute;
-  top: unset;
-  bottom: -28px;
-  right: 0;
-  z-index: 9;
 }

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

@@ -76,9 +76,6 @@ export class PtcTextfield {
       this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
     }
   }
-  async getValidationMessage(type) {
-    return ValidationMessages[this.language][type];
-  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -102,6 +99,9 @@ export class PtcTextfield {
     }
     this.setupFocusHandlers();
   }
+  getValidationMessage(type) {
+    return ValidationMessages[this.language][type];
+  }
   getPhoneValidation() {
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
       if (!this.required && this.inputValue === '') {
@@ -165,14 +165,14 @@ export class PtcTextfield {
     }
     return validationPattern;
   }
-  async setHelperText() {
-    this.helpertext = await this.getValidationMessage('required');
+  setHelperText() {
+    this.helpertext = this.getValidationMessage('required');
     if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('email');
+        this.helpertext = this.getValidationMessage('email');
       }
       else if (!this.customInput.validity.valid) {
-        this.helpertext = await this.getValidationMessage('validemail');
+        this.helpertext = this.getValidationMessage('validemail');
       }
       else if (this.customInput.validity.valid) {
         this.helpertext = '';
@@ -180,33 +180,33 @@ export class PtcTextfield {
     }
     else if (this.fieldName === 'firstname') {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('required');
+        this.helpertext = this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('firstname');
+        this.helpertext = this.getValidationMessage('firstname');
       }
     }
     else if (this.fieldName === 'lastname') {
       if (this.customInput.validity.valueMissing) {
-        this.helpertext = await this.getValidationMessage('required');
+        this.helpertext = this.getValidationMessage('required');
       }
       else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = await this.getValidationMessage('lastname');
+        this.helpertext = this.getValidationMessage('lastname');
       }
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
         if (this.inputValue === '' && this.required) {
-          this.helpertext = await this.getValidationMessage('tel');
+          this.helpertext = this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
-          this.helpertext = await this.getValidationMessage('validtel');
+          this.helpertext = this.getValidationMessage('validtel');
         }
       }
     }
     else if (this.fieldId === "confirm-email") {
       if (!this.matchStatus && !!this.customInput.value) {
-        this.helpertext = await this.getValidationMessage('confirmemail');
+        this.helpertext = this.getValidationMessage('confirmemail');
       }
     }
   }
@@ -224,7 +224,6 @@ export class PtcTextfield {
     const textFields = document.querySelectorAll('.mdc-text-field');
     textFields.forEach((textField) => {
       const input = textField.querySelector('input');
-      const textArea = textField.querySelector('textarea');
       if (input) {
         input.addEventListener('focus', () => {
           if (this.lastInteraction === 'keyboard') {
@@ -240,21 +239,6 @@ export class PtcTextfield {
           textField.classList.remove('keyboard-focus', 'mouse-focus');
         });
       }
-      if (textArea) {
-        textArea.addEventListener('focus', () => {
-          if (this.lastInteraction === 'keyboard') {
-            textField.classList.add('keyboard-focus');
-            textField.classList.remove('mouse-focus');
-          }
-          else {
-            textField.classList.add('mouse-focus');
-            textField.classList.remove('keyboard-focus');
-          }
-        });
-        textArea.addEventListener('blur', () => {
-          textField.classList.remove('keyboard-focus', 'mouse-focus');
-        });
-      }
     });
   }
   render() {
@@ -265,13 +249,11 @@ export class PtcTextfield {
       h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
           ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
           this.mdcTextfield = mdcTextfield;
-        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), this.type === 'textarea' ? (h("div", { class: "textarea-wrapper" }, h("textarea", Object.assign({ ref: customInput => {
-          this.customInput = customInput;
-        }, id: this.fieldId, class: this.getInputClassName() }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) })), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)) : (h("input", Object.assign({ ref: customInput => {
+        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
           this.customInput = customInput;
-        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText })))),
+        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText }))),
       h("div", { class: `mdc-text-field-helper-line
-                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, (this.ptcMaxLength && this.type === 'text') ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
       /* Alert message */
       h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
     ]) : (h("input", { id: this.fieldId, name: this.fieldName, type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
@@ -538,14 +520,11 @@ export class PtcTextfield {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
-          "resolved": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
+          "original": "(input: HTMLInputElement) => string",
+          "resolved": "(input: HTMLInputElement) => string",
           "references": {
             "HTMLInputElement": {
               "location": "global"
-            },
-            "HTMLTextAreaElement": {
-              "location": "global"
             }
           }
         },
@@ -669,25 +648,6 @@ export class PtcTextfield {
           "text": "",
           "tags": []
         }
-      },
-      "getValidationMessage": {
-        "complexType": {
-          "signature": "(type: string) => Promise<string>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
       }
     };
   }

package/dist/collection/components/ptc-theater-video/ptc-theater-video.css

@@ -82,14 +82,8 @@ ptc-link, ptc-square-card,
   position: relative;
   border-radius: 12px;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.24);
-  margin-top: 5px;
   cursor: pointer;
 }
-:host .img-wrap:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 :host .img-wrap img {
   max-width: 100%;
   border-radius: 12px;