@ptcwebops/ptcw-design 6.3.13 → 6.3.14-beta

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

@@ -1198,26 +1198,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);
@@ -1303,20 +1303,6 @@ a:focus-visible {
   z-index: 1;
 }
 
-.logo-frame {
-  background-color: transparent;
-  margin-top: 24px;
-  display: flex;
-  width: 152px;
-  height: max-content;
-}
-.logo-frame img {
-  box-sizing: border-box;
-  max-width: 100%;
-  height: 100%;
-  max-height: 64.02px;
-}
-
 .hp-adjustments {
   background-color: var(--color-black);
   height: auto;
@@ -1539,10 +1525,6 @@ a:focus-visible {
   margin-bottom: 0;
   margin-top: 20px;
 }
-:host(.text-jumbotron) .parent .logo-frame {
-  justify-self: center;
-  justify-content: center;
-}
 
 :host(.png-jumbotron) .desktop-media-image,
 :host(.png-jumbotron) .mobile-media-image {

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

@@ -28,7 +28,6 @@ export class PtcJumbotron {
     this.blogAuthorQueryHref = "";
     this.blogAuthorQueryTarget = "";
     this.hasCountdown = false;
-    this.logo = "";
     this.styles = undefined;
     this.defer = undefined;
     this.hasCtaSlot = undefined;
@@ -70,7 +69,7 @@ export class PtcJumbotron {
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), !!this.logo && h("div", { class: "logo-frame" }, h("img", { alt: "Logo", src: this.logo })), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), h("p", { style: { margin: '0' } }, h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.hasCountdown ? h("slot", { name: "countdown" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), h("p", { style: { margin: '0' } }, h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.hasCountdown ? h("slot", { name: "countdown" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
   }
   getCssClassMap() {
     return {
@@ -556,24 +555,6 @@ export class PtcJumbotron {
         "reflect": false,
         "defaultValue": "false"
       },
-      "logo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "logo",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
       "styles": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-media-card/ptc-media-card.js

@@ -37,6 +37,8 @@ export class PtcMediaCard {
   }
   setTabNavigatedState() {
     this.el.parentElement.tagName === 'DYNAMIC-PRODUCT-DRIVERS' ? this.isTabNavigated = false : this.isTabNavigated = true;
+    //console.log('parent ele tag name: ' + this.el.parentElement.tagName)
+    //console.log('isTabNavigated value: ' + this.isTabNavigated)
   }
   componentWillLoad() {
     this.setTabNavigatedState();
@@ -55,8 +57,13 @@ export class PtcMediaCard {
         ? true
         : false
       : false;
+    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false), style: this.cardType != 'case-study-icon'
+    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
+      // {...(!isVideoUrl
+      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
+      //   : null)}
+      style: this.cardType != 'case-study-icon'
         ? this.isHovered && this.hoverBackgroundImage
           ? { backgroundImage: `url(${this.hoverBackgroundImage})` }
           : { backgroundImage: `url(${this.activeBackgroundImage})` }

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

@@ -50,7 +50,7 @@ export class PtcMobileSelect {
     let mySelect = new MobileSelect({
       trigger: `#${this.triggerName}`,
       title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2', 'test3'] }],
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
       position: [0],
       ensureBtnText: this.ensureBtnText,
       cancelBtnText: this.cancelBtnText,
@@ -59,15 +59,24 @@ export class PtcMobileSelect {
       titleColor: 'var(--color-gray-12)',
       onShow: function (_1, _2, context) {
         if (that.selectedId) {
+          /*let liEle = context.mobileSelect.querySelectorAll('[data-id]'); // document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });*/
           try {
             const item = that.getMobileSelectedItem(context);
             context.locatePosition(0, item.index);
             storeIndex = item.index;
+            //console.log("storeIndex: "+ storeIndex)
           }
           catch (error) {
             console.log(error);
             // debugger
           }
+          //e.locatePosition(0, storeIndex);
         }
         else {
           return;
@@ -90,6 +99,7 @@ export class PtcMobileSelect {
             context.setTriggerInnerText(selectedItem.value);
             context.show();
           }
+          //console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
         }
       }.bind(this),
     });
@@ -167,7 +177,7 @@ export class PtcMobileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wheel Data (Mandatory)\r\neg: data: [{ id: \"1\", value: \"English\" }],"
+          "text": "Wheel Data (Mandatory)\r\neg: data: [{ id: \"1\", value: \"\u9644\u8FD1\" }],"
         }
       },
       "selectedId": {

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

@@ -82,6 +82,7 @@ ptc-link, ptc-square-card,
   align-content: flex-end;
   z-index: 50020;
   transform: translateY(-100%);
+  position: relative;
 }
 @media only screen and (min-width: 992px) {
   .wrapper .modal-popup {
@@ -97,6 +98,9 @@ ptc-link, ptc-square-card,
 .wrapper .modal-popup.xl {
   max-width: 64.0625rem;
 }
+.wrapper .modal-popup.fit-content {
+  max-width: fit-content;
+}
 .wrapper .modal-popup.max {
   width: calc(100% - 4rem);
   max-width: 75rem;
@@ -481,10 +485,10 @@ ptc-link, ptc-square-card,
   text-decoration-line: underline;
   line-height: var(--ptc-line-height-densest);
 }
-:host .wrapper .bottom-close span:hover {
-  color: var(--color-blue-08);
-}
-:host .wrapper .bottom-close:focus-visible {
+:host .wrapper .bottom-close span:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
+}
+:host .wrapper .bottom-close span:hover {
+  color: var(--color-blue-08);
 }

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

@@ -3,33 +3,37 @@ import { createFocusTrap } from 'focus-trap';
 export class PtcModal {
   constructor() {
     this.setReturnFocus = () => {
-      var _a, _b;
-      if (!this.lastFocusElement)
-        return;
-      // Try focusing the last focused element directly
-      if (this.lastFocusElement.tabIndex === 0) {
+      if (this.lastFocusElement instanceof HTMLElement) {
         this.lastFocusElement.focus();
-        return;
       }
-      // If it's inside a shadow DOM, try finding a focusable child
-      const shadowRoot = this.lastFocusElement.shadowRoot;
-      if (shadowRoot) {
-        const focusableElementList = shadowRoot.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
-        if (focusableElementList) {
-          let focusableElement = focusableElementList[focusableElementList.length - 1];
-          focusableElement.focus();
-          return;
+    };
+    //change it with @Watch
+    // componentDidUpdate() {
+    //   if (this.show) {
+    //     this.lastFocusElement = document.activeElement as HTMLElement;
+    //     this.fireOnOpened(this);
+    //   } else {
+    //     this.fireOnClosed(this);
+    //   }
+    // }
+    this.trackLastFocusedElement = (event) => {
+      if (event.key === "Enter") {
+        let activeElement = document.activeElement;
+        // Traverse shadow DOM to get the innermost focused element
+        while (activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) {
+          activeElement = activeElement.shadowRoot.activeElement;
+        }
+        if (activeElement instanceof HTMLElement) {
+          this.lastFocusElement = activeElement;
         }
-      }
-      // As a fallback, try to find a focusable child within the element
-      const fallbackElement = (_b = (_a = this.lastFocusElement).querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, 'button, [tabindex]:not([tabindex="-1"])');
-      if (fallbackElement instanceof HTMLElement) {
-        fallbackElement.focus();
       }
     };
     this.handleKeyPress = (event) => {
       if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
         this.openedByKeyboard = true;
+        if (event.key === 'Enter') {
+          this.trackLastFocusedElement(event);
+        }
       }
     };
     this.handleMouseDown = () => {
@@ -56,12 +60,13 @@ export class PtcModal {
     this.headerOnlyText1 = undefined;
     this.headerOnlyText2 = undefined;
     this.bottomCloseBtn = undefined;
+    this.initialFocus = true;
     this.openedByKeyboard = false;
     this.bodyOverflowSetting = undefined;
   }
   onShowChange(newValue) {
     if (newValue) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     else {
@@ -156,7 +161,7 @@ export class PtcModal {
   }
   componentDidLoad() {
     if (this.show) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     if (this.showHeaderFooter) {
@@ -228,16 +233,12 @@ export class PtcModal {
           this.trap.deactivate();
         }
       } })));
-    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: e => {
         e.preventDefault();
         this.close();
       }, onKeyPress: e => {
         e.preventDefault();
         this.close();
-        this.setReturnFocus();
-        if (this.trap) {
-          this.trap.deactivate();
-        }
       } }, h("span", null, this.bottomCloseBtn)));
     if (this.iframeUrl) {
       content = h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: '100%', width: '100%', scrolling: "no", onLoad: this.resizeIframe });
@@ -332,8 +333,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max' | 'sm-modal'",
-          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max' | 'sm-modal'",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,
@@ -663,6 +664,24 @@ export class PtcModal {
         },
         "attribute": "bottom-close-btn",
         "reflect": false
+      },
+      "initialFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-focus",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ptc-office-locations/ptc-office-locations.js

@@ -34,14 +34,11 @@ export class PtcOfficeLocations {
       this.showMap = true;
       if (!this.cardScroll) {
         const mapTop = this.hostEl.shadowRoot.querySelector(".office-location-list-wrapper");
-        setTimeout(() => {
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({ inline: 'nearest', block: 'start' });
-        }, 100);
+        mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({ inline: 'nearest', block: 'start' });
         setTimeout(() => {
           var _a;
-          (_a = event.target) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: 'nearest', block: 'center' });
+          (_a = event.target) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: 'nearest', block: 'nearest' });
           this.cardScroll = this.showMap;
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({ inline: 'nearest', block: 'start' });
         }, 500);
       }
     }

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

@@ -104,6 +104,9 @@ p.main {
 p.primary-grey {
   color: var(--color-gray-10);
 }
+p.primary-green {
+  color: var(--color-green-06);
+}
 p.gray-darker {
   color: var(--color-gray-11);
 }

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

@@ -185,8 +185,8 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary-grey' | 'white' | 'gray-darker'",
-          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
+          "original": "'primary-grey' | 'primary-green' | 'white' | 'gray-darker'",
+          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,

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

@@ -69,6 +69,7 @@ export class PtcPicture {
         image.src = this.setResponsiveBg();
         image.onload = () => {
           image.removeAttribute('data-src');
+          console.log('loaded fallback');
         };
       }, 5000);
     }

package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css

@@ -5602,26 +5602,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-preferance-center-form/ptc-preferance-center-form.js

@@ -18,7 +18,7 @@ export class PtcPreferanceCenterForm {
   onDataLookup() {
     const dataLookupElement = this.el.closest('ptc-data-lookup');
     if (dataLookupElement) {
-      //console.log('Perform Data Lookup...');
+      console.log('Perform Data Lookup...');
       dataLookupElement.performSubscriptionLookup();
     }
     else {