@ptcwebops/ptcw-design 6.2.32-beta → 6.2.34-beta

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js

@@ -2,62 +2,46 @@ import { Host, h } from '@stencil/core';
 import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class EventPodcastSliderExample {
   componentDidLoad() {
-    const swiperContainer = this.el.querySelector('.swiper-container');
-    const slides = swiperContainer.querySelectorAll('.swiper-slide');
+    //const swiperContainer = this.el.querySelector('.swiper-container');
+    //const slides = swiperContainer.querySelectorAll('.swiper-slide');
     // Define a desktop breakpoint
-    const isDesktop = window.matchMedia('(min-width: 992px)').matches;
+    //const isDesktop = window.matchMedia('(min-width: 992px)').matches;
     setTimeout(() => {
       let list = this.el.querySelector('.event-slider-cards');
-      if (!isDesktop || slides.length >= 4) {
-        this.listSwp = new Swiper(list, {
-          // Customize options here
-          modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-          slidesPerView: 'auto',
-          spaceBetween: 24,
-          //centeredSlides: true,
-          centeredSlidesBounds: true,
-          initialSlide: 0,
-          centerInsufficientSlides: false,
-          freeMode: true,
-          scrollbar: {
-            el: this.swiperPaginationRef,
-            draggable: true,
+      this.listSwp = new Swiper(list, {
+        // Customize options here
+        modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+        slidesPerView: 'auto',
+        spaceBetween: 24,
+        //centeredSlides: true,
+        centeredSlidesBounds: true,
+        initialSlide: 0,
+        centerInsufficientSlides: false,
+        freeMode: true,
+        scrollbar: {
+          el: this.swiperPaginationRef,
+          draggable: true,
+        },
+        navigation: {
+          nextEl: this.swiperButtonNextRef,
+          prevEl: this.swiperButtonPrevRef,
+        },
+        mousewheel: {
+          forceToAxis: true,
+          sensitivity: 100,
+        },
+        breakpoints: {
+          992: {
+            slidesPerView: 4,
           },
-          navigation: {
-            nextEl: this.swiperButtonNextRef,
-            prevEl: this.swiperButtonPrevRef,
+          1200: {
+            spaceBetween: 32,
           },
-          mousewheel: {
-            forceToAxis: true,
-            sensitivity: 100,
+          1400: {
+            spaceBetween: 40,
           },
-          breakpoints: {
-            992: {
-              slidesPerView: 4,
-            },
-            1200: {
-              spaceBetween: 32,
-            },
-            1400: {
-              spaceBetween: 40,
-            },
-          },
-        });
-      }
-      else {
-        const nextBtn = this.el.querySelector('.swiper-button-next');
-        const prevBtn = this.el.querySelector('.swiper-button-prev');
-        const scrollbar = this.el.querySelector('.swiper-scrollbar');
-        if (nextBtn) {
-          nextBtn.setAttribute('style', 'display: none;');
-        }
-        if (prevBtn) {
-          prevBtn.setAttribute('style', 'display: none;');
-        }
-        if (scrollbar) {
-          scrollbar.setAttribute('style', 'display: none;');
-        }
-      }
+        },
+      });
     }, 100);
   }
   render() {

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

@@ -265,6 +265,7 @@ ptc-link, ptc-square-card,
 
 .bar-close {
   max-width: 36px;
+  max-height: 36px;
   cursor: pointer;
   margin-left: var(--ptc-element-spacing-08);
   position: relative;
@@ -279,6 +280,10 @@ ptc-link, ptc-square-card,
   transform: translate(-50%, -50%);
   z-index: 1;
 }
+.bar-close:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 ptc-tooltip-v2.after-space::after {
   content: " ";
@@ -297,6 +302,7 @@ ptc-tooltip-v2.after-space::after {
 
   .bar-close {
     max-width: 18px;
+    max-height: 18px;
   }
   .bar-close::before {
     width: 34px;

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

@@ -51,7 +51,7 @@ export class PtcAnnouncement {
     //desktop view
     h("div", { class: "description" }, !!this.description ? (
     // <ptc-tooltip text-display="inline" max-length="165" z-index="z-2" description={this.description + ' '} position="bottom"></ptc-tooltip>
-    h("ptc-tooltip-v2", { "element-display": "inline", "max-length": "165", "z-index": "3", class: "after-space" }, this.description + ' ')) : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, h("ptc-tooltip-v2", { "element-display": "inline-block", "max-length": "25", "z-index": "2", position: 'bottom', styles: ".tooltip-content.bottom{transform:translate(-20%, 12px)}.tooltip-text{text-decoration:underline;}" }, this.linkText))) : null))), h("icon-asset", { id: "announcement-bar-close", color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close mf-listen", focusOn: true, trackerId: "announcement-bar-close", onKeyDown: this.handleKeyClick })))));
+    h("ptc-tooltip-v2", { "element-display": "inline", "max-length": "165", "z-index": "3", class: "after-space" }, this.description + ' ')) : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, h("ptc-tooltip-v2", { "element-display": "inline-block", "max-length": "25", "z-index": "2", position: 'bottom', styles: ".tooltip-content.bottom{transform:translate(-20%, 12px)}.tooltip-text{text-decoration:underline;}" }, this.linkText))) : null))), h("icon-asset", { id: "announcement-bar-close", color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close mf-listen", focusOn: true, trackerId: "announcement-bar-close", onKeyDown: this.handleKeyClick, tabIndex: 0 })))));
   }
   getCssClassMap() {
     return {

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,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-modal/ptc-modal.css

@@ -429,6 +429,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 +442,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-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",