@ptcwebops/ptcw-design 6.2.31-beta → 6.2.33-beta

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,38 @@ 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() {
+    this.iconSwiper.slides.forEach(i => i.querySelectorAll("a").forEach(item => item.tabIndex = -1));
+    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-jumbotron/ptc-jumbotron.css

@@ -1163,7 +1163,7 @@ ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -1171,21 +1171,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -1268,6 +1268,13 @@ a:not(.vjs-social-share-links 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-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-podcast-card/ptc-podcast-card.css

@@ -5574,7 +5574,7 @@ Credits to Dave Berning
   background-color: var(--color-gray-06);
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -5582,21 +5582,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -5679,6 +5679,13 @@ a:not(.vjs-social-share-links 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;
   padding: 2rem 0;

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

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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;
   background-color: var(--color-white);

package/dist/collection/components/ptc-product-category/ptc-product-category.css

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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;
   padding-bottom: var(--ptc-layout-spacing-03);

package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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 {
   max-width: 300px;
   display: block;

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

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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-readmore-v3/ptc-readmore-v3.css

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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-tooltip-v2/ptc-tooltip-v2.css

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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(.block) {
   display: block;
 }

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css

@@ -54,7 +54,7 @@ ptc-link, ptc-square-card,
   }
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -62,21 +62,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -159,6 +159,13 @@ a:not(.vjs-social-share-links 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;
   margin-bottom: var(--ptc-element-spacing-07);

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -5631,7 +5631,7 @@ Credits to Dave Berning
   background-color: var(--color-gray-06);
 }
 
-a:not(.vjs-social-share-links a) {
+a {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   text-decoration-line: underline;
@@ -5639,21 +5639,21 @@ a:not(.vjs-social-share-links a) {
   transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
   font-weight: var(--ptc-font-weight-bold);
 }
-a:not(.vjs-social-share-links a):visited {
+a:visited {
   color: var(--color-blue-10);
 }
-a:not(.vjs-social-share-links a):active, a:not(.vjs-social-share-links a):visited:active {
+a:active, a:visited:active {
   transition: none;
   color: var(--color-blue-09);
 }
-a:not(.vjs-social-share-links a):hover, a:not(.vjs-social-share-links a):visited:hover {
+a:hover, a:visited:hover {
   color: var(--color-blue-08);
 }
-a:not(.vjs-social-share-links a).disabled {
+a.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-a:not(.vjs-social-share-links a):focus-visible {
+a:focus-visible {
   outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
@@ -5736,6 +5736,13 @@ a:not(.vjs-social-share-links 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);
+}
+
 /*
    * Typography tokens
    */