@ptcwebops/ptcw-design 6.2.22-beta → 6.2.22

package/dist/collection/components/ptc-featured-list/ptc-featured-list.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, .podcast-cta-section 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), .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), .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, .podcast-cta-section 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):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):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, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section 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).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).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, .podcast-cta-section 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):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):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);
@@ -159,6 +159,13 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
 :host {
   display: block;
   box-sizing: border-box;

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -139,26 +139,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, .podcast-cta-section 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), .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), .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, .podcast-cta-section 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):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):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, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section 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).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).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, .podcast-cta-section 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):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):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);
@@ -216,6 +216,13 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
 :host {
   display: block;
   position: relative;

package/dist/collection/components/ptc-icon-component/ptc-icon-component.css

@@ -875,12 +875,20 @@ ptc-link, ptc-square-card,
   width: 44px;
   height: 44px;
 }
+:host .swiper-container .swiper-button-next:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .swiper-container .swiper-button-prev {
   left: 0;
   top: 84px;
   height: 44px;
   width: 44px;
 }
+:host .swiper-container .swiper-button-prev:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .ptc-link {
   font-size: var(--ptc-font-size-small);
   font-weight: var(--ptc-font-weight-extrabold);
@@ -895,6 +903,10 @@ ptc-link, ptc-square-card,
 :host .ptc-link:hover {
   color: var(--color-green-06);
 }
+:host .ptc-link:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .ptc-link:visited {
   color: var(--color-gray-10);
 }

package/dist/collection/components/ptc-icon-component/ptc-icon-component.js

@@ -15,11 +15,13 @@ export class PtcIconComponent {
     this.renderSlides();
     setTimeout(() => {
       this.initSlider();
+      this.setUpTabIndex();
     }, 200);
   }
   componentDidUpdate() {
     setTimeout(() => {
       this.initSlider();
+      this.setUpTabIndex();
     }, 200);
   }
   renderSlides() {
@@ -29,6 +31,7 @@ export class PtcIconComponent {
       slidesList.forEach((node) => {
         const slideElement = document.createElement('div');
         slideElement.classList.add('swiper-slide');
+        slideElement.querySelectorAll("a").forEach(item => item.tabIndex = -1);
         let cloneNode = node.cloneNode(true);
         slideElement.appendChild(cloneNode);
         swiperWrapper.appendChild(slideElement);
@@ -53,6 +56,10 @@ export class PtcIconComponent {
           nextEl: this.swiperButtonNextRef,
           prevEl: this.swiperButtonPrevRef,
         },
+        // keyboard: {
+        //   enabled: true,
+        //   onlyInViewport: true
+        // }
       });
     }
   }
@@ -71,8 +78,44 @@ export class PtcIconComponent {
       this.iconSwiper = null;
     }
   }
+  onNextBtnClick(e) {
+    let btn = e.currentTarget;
+    e.preventDefault();
+    if (btn && !btn.classList.contains('disabled')) {
+      this.iconSwiper.slideNext();
+      this.setUpTabIndex();
+    }
+  }
+  onPrevBtnClick(e) {
+    let btn = e.currentTarget;
+    e.preventDefault();
+    if (btn && !btn.classList.contains('disabled')) {
+      this.iconSwiper.slidePrev();
+      this.setUpTabIndex();
+    }
+  }
+  onPrevBtnKeydown(e) {
+    if (e.key === "Enter") {
+      this.onPrevBtnClick(e);
+    }
+  }
+  onNextBtnKeydown(e) {
+    if (e.key === "Enter") {
+      this.onNextBtnClick(e);
+    }
+  }
+  setUpTabIndex() {
+    if (this.iconSwiper) {
+      if (this.iconSwiper.slides) {
+        this.iconSwiper.slides.forEach(i => i.querySelectorAll("a").forEach(item => item.tabIndex = -1));
+        if (this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a")) {
+          this.iconSwiper.slides[this.iconSwiper.activeIndex].querySelectorAll("a").forEach(item => item.tabIndex = 0);
+        }
+      }
+    }
+  }
   render() {
-    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el, tabindex: 0, onClick: (e) => this.onPrevBtnClick(e), onKeyDown: (e) => this.onPrevBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el, tabindex: 0, onClick: (e) => this.onNextBtnClick(e), onKeyDown: (e) => this.onNextBtnKeydown(e) }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }))));
   }
   static get is() { return "ptc-icon-component"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.css

@@ -125,4 +125,12 @@ ptc-link, ptc-square-card,
 }
 .ptc-icon-minimize .header .icon:active icon-asset {
   outline: none !important;
+}
+.ptc-icon-minimize .checkbox-icon .icon:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  margin-right: 5px;
+}
+.ptc-icon-minimize .checkbox-icon .icon:focus-visible icon-asset {
+  outline: none !important;
 }

package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js

@@ -12,6 +12,7 @@ export class PtcIconMinimize {
     this.listType = "default";
     this.dataRefineValue = undefined;
     this.trackerId = undefined;
+    this.tabIndexValue = 0;
   }
   componentWillLoad() {
     this.timeStamp = Date.now().toString();
@@ -21,11 +22,20 @@ export class PtcIconMinimize {
     if (this.opened && !content.style.maxHeight) {
       content.style.maxHeight = content.scrollHeight + "px";
     }
+    if (!this.opened) {
+      this.setTabIndex();
+    }
   }
   dropdownToggle() {
     this.opened = !this.opened;
+    this.setTabIndex();
+  }
+  setTabIndex() {
     var checkList = this.host.querySelector(".fitler-check-list");
     var checkListModal = this.host.querySelector(".fitler-check-list-modal");
+    if (checkList == null) {
+      checkList = this.host.querySelector(".filter-checkbox-list");
+    }
     if (checkList) {
       var checkBoxesList = checkList.querySelectorAll("ptc-checkbox");
       if (checkBoxesList) {
@@ -35,6 +45,26 @@ export class PtcIconMinimize {
           }
         });
       }
+      var checkBoxesIconList = checkList.querySelectorAll("ptc-icon-minimize");
+      if (checkBoxesIconList) {
+        checkBoxesIconList.forEach(item => {
+          if (item.shadowRoot.querySelector(".icon")) {
+            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
+              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
+            if (childrenCheckBoxesList) {
+              childrenCheckBoxesList.forEach(childitem => {
+                if (childitem.shadowRoot.querySelector("label")) {
+                  childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
+                }
+              });
+            }
+          }
+        });
+      }
+    }
+    if (checkListModal == null) {
+      checkListModal = this.host.querySelector(".filter-check-list-modal");
     }
     if (checkListModal) {
       var checkBoxesListModal = checkListModal.querySelectorAll("ptc-checkbox");
@@ -45,6 +75,23 @@ export class PtcIconMinimize {
           }
         });
       }
+      var checkBoxesModelIconList = checkListModal.querySelectorAll("ptc-icon-minimize");
+      if (checkBoxesModelIconList) {
+        checkBoxesModelIconList.forEach(item => {
+          if (item.shadowRoot.querySelector(".icon")) {
+            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
+              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
+            if (childrenCheckBoxesList) {
+              childrenCheckBoxesList.forEach(childitem => {
+                if (childitem.shadowRoot.querySelector("label")) {
+                  childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
+                }
+              });
+            }
+          }
+        });
+      }
     }
   }
   getScrollHeight() {
@@ -91,9 +138,9 @@ export class PtcIconMinimize {
     let scrollHeight = this.getScrollHeight();
     let icon = this.opened ? 'minus' : 'plus';
     return (h("div", { class: 'ptc-icon-minimize' }, this.listType == "default" ?
-      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
       : this.listType == "checkbox" ?
-        h("div", { class: "header" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
+        h("div", { class: "header checkbox-icon" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading, tabIndex: this.tabIndexValue }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
         : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
   }
   static get is() { return "ptc-icon-minimize"; }
@@ -196,6 +243,24 @@ export class PtcIconMinimize {
         },
         "attribute": "tracker-id",
         "reflect": false
+      },
+      "tabIndexValue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tab-index-value",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }

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

@@ -1151,15 +1151,16 @@ ptc-preloader-section.min-height {
 }
 
 ptc-nav-submenu {
+  margin-top: 6px;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
 }
 ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
+  margin-top: 4px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
-  margin-top: -2px;
-  margin-bottom: -2px;
 }
 
 a {
@@ -1190,26 +1191,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, .podcast-cta-section 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), .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), .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, .podcast-cta-section 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):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):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, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section 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, .podcast-cta-section 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).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).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, .podcast-cta-section 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):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):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);
@@ -1267,6 +1268,13 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.js

@@ -5,9 +5,10 @@ export class PtcMinimizedNav {
     this.imgSrc = '';
     this.imgAlt = 'PTC';
     this.navType = 'minimized-header';
+    this.trackerId = undefined;
   }
   render() {
-    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header mf-listen" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl, tabindex: "0" }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
+    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container mf-listen", id: this.trackerId }, h("a", { class: "mini-navbar-logo", href: this.linkUrl, tabindex: "0" }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
   }
   static get is() { return "ptc-minimized-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -94,6 +95,23 @@ export class PtcMinimizedNav {
         "attribute": "nav-type",
         "reflect": false,
         "defaultValue": "'minimized-header'"
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

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

@@ -82,7 +82,6 @@ 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 {
@@ -98,9 +97,6 @@ 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;
@@ -429,6 +425,8 @@ ptc-link, ptc-square-card,
   transform: translateY(-100%);
   border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;
   align-items: center;
+  padding: var(--ptc-element-spacing-06);
+  box-sizing: border-box;
 }
 :host .wrapper .event-list-header::before {
   content: "";
@@ -440,10 +438,19 @@ ptc-link, ptc-square-card,
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
   z-index: 1;
 }
+:host .wrapper .event-list-header + .close {
+  margin-top: 0px;
+  margin-right: 0px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 :host .wrapper .event-list-header .text-wrapper {
   display: flex;
-  padding: var(--ptc-element-spacing-06);
-  gap: 0.5em;
+  flex-wrap: wrap;
+  column-gap: 0.5em;
 }
 :host .wrapper .event-list-header .text-wrapper span {
   display: inline-block;

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

@@ -34,9 +34,6 @@ export class PtcModal {
       const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
       wrapperEle && wrapperEle.focus();
     }, 100);
-    setTimeout(() => {
-      this.setInitialFocus();
-    }, 150);
   }
   componentWillLoad() {
     let body = document.querySelector('body');
@@ -130,20 +127,6 @@ export class PtcModal {
   close() {
     this.show = false;
   }
-  setInitialFocus() {
-    var _a, _b, _c;
-    const firstFocusableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]), ptc-close-icon');
-    const closeIcon = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ptc-close-icon');
-    const closeSvg = (_c = closeIcon === null || closeIcon === void 0 ? void 0 : closeIcon.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('svg');
-    if (closeSvg) {
-      console.log('close svg found');
-      closeSvg.focus();
-    }
-    else if (firstFocusableElement) {
-      console.log('first focus ele found!');
-      firstFocusableElement.focus();
-    }
-  }
   render() {
     let content;
     let overlay;
@@ -244,8 +227,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max'| 'sm-modal'",
-          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max'| 'sm-modal'",
+          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,

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

@@ -165,6 +165,19 @@ export class PtcPagenation {
       this.setupEventPresets();
     }
   }
+  componentDidLoad() {
+    const filterContainer = this.el.shadowRoot.querySelector(".standard-filter");
+    if (!filterContainer)
+      return;
+    filterContainer.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        const target = event.target;
+        if (target.tagName === "A") {
+          this.paginationItemKeydown.emit();
+        }
+      }
+    });
+  }
   setupStandardPresets() {
     if (this.clickedPageNumber < 1) {
       this.clickedPageNumber == 1;
@@ -545,6 +558,21 @@ export class PtcPagenation {
   }
   static get events() {
     return [{
+        "method": "paginationItemKeydown",
+        "name": "paginationItemKeydown",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
         "method": "pageClicked",
         "name": "pageClicked",
         "bubbles": true,
@@ -561,6 +589,7 @@ export class PtcPagenation {
         }
       }];
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",

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

@@ -104,9 +104,6 @@ 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' | 'primary-green' | 'white' | 'gray-darker'",
-          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
+          "original": "'primary-grey' | 'white' | 'gray-darker'",
+          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,