@ptcwebops/ptcw-design 6.2.23 → 6.2.25-beta

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

@@ -875,20 +875,12 @@ 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);
@@ -903,10 +895,6 @@ 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,13 +15,11 @@ export class PtcIconComponent {
     this.renderSlides();
     setTimeout(() => {
       this.initSlider();
-      this.setUpTabIndex();
     }, 200);
   }
   componentDidUpdate() {
     setTimeout(() => {
       this.initSlider();
-      this.setUpTabIndex();
     }, 200);
   }
   renderSlides() {
@@ -31,7 +29,6 @@ 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);
@@ -56,10 +53,6 @@ export class PtcIconComponent {
           nextEl: this.swiperButtonNextRef,
           prevEl: this.swiperButtonPrevRef,
         },
-        // keyboard: {
-        //   enabled: true,
-        //   onlyInViewport: true
-        // }
       });
     }
   }
@@ -78,44 +71,8 @@ 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-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 }))));
+    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" }))))));
   }
   static get is() { return "ptc-icon-component"; }
   static get encapsulation() { return "shadow"; }

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

@@ -125,12 +125,4 @@ 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,7 +12,6 @@ export class PtcIconMinimize {
     this.listType = "default";
     this.dataRefineValue = undefined;
     this.trackerId = undefined;
-    this.tabIndexValue = 0;
   }
   componentWillLoad() {
     this.timeStamp = Date.now().toString();
@@ -22,20 +21,11 @@ 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) {
@@ -45,26 +35,6 @@ 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");
@@ -75,23 +45,6 @@ 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() {
@@ -138,9 +91,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: this.tabIndexValue }, 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: 0 }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
       : this.listType == "checkbox" ?
-        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 })))
+        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 })))
         : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
   }
   static get is() { return "ptc-icon-minimize"; }
@@ -243,24 +196,6 @@ 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,16 +1151,15 @@ 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 {
@@ -1191,26 +1190,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), .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 {
   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):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 {
   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):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 {
   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):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 {
   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).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 {
   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):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 {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -1268,13 +1267,6 @@ 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,10 +5,9 @@ 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" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo mf-listen", href: this.linkUrl, tabindex: "0", id: this.trackerId }, 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 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));
   }
   static get is() { return "ptc-minimized-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -95,23 +94,6 @@ 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,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;
@@ -425,8 +429,6 @@ 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: "";
@@ -438,19 +440,10 @@ 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;
-  flex-wrap: wrap;
-  column-gap: 0.5em;
+  padding: var(--ptc-element-spacing-06);
+  gap: 0.5em;
 }
 :host .wrapper .event-list-header .text-wrapper span {
   display: inline-block;

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

@@ -1,6 +1,14 @@
 import { Host, h } from '@stencil/core';
 export class PtcModal {
   constructor() {
+    this.handleKeyPress = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.openedByKeyboard = true;
+      }
+    };
+    this.handleMouseDown = () => {
+      this.openedByKeyboard = false;
+    };
     this.iframeUrl = undefined;
     this.size = 'sm';
     this.customClass = undefined;
@@ -22,6 +30,8 @@ export class PtcModal {
     this.headerOnlyText1 = undefined;
     this.headerOnlyText2 = undefined;
     this.bottomCloseBtn = undefined;
+    this.initialFocus = true;
+    this.openedByKeyboard = false;
     this.bodyOverflowSetting = undefined;
   }
   fireOnClosed(modal) {
@@ -34,6 +44,23 @@ export class PtcModal {
       const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
       wrapperEle && wrapperEle.focus();
     }, 100);
+    if (this.openedByKeyboard) {
+      this.initialFocus &&
+        setTimeout(() => {
+          this.setInitialFocus();
+        }, 150);
+    }
+    else {
+      this.openedByKeyboard = false;
+    }
+  }
+  connectedCallback() {
+    document.addEventListener('keydown', this.handleKeyPress);
+    document.addEventListener('mousedown', this.handleMouseDown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.handleKeyPress);
+    document.removeEventListener('mousedown', this.handleMouseDown);
   }
   componentWillLoad() {
     let body = document.querySelector('body');
@@ -108,14 +135,17 @@ export class PtcModal {
       var scrollHeight = body.scrollHeight;
       var scrollTop = body.scrollTop;
       var offset = body.offsetHeight;
-      if (height < scrollHeight) { //has scrollbar
-        if (scrollTop > 0) { //can scroll up
+      if (height < scrollHeight) {
+        //has scrollbar
+        if (scrollTop > 0) {
+          //can scroll up
           modal.classList.add('scroll-top');
         }
         else {
           modal.classList.remove('scroll-top');
         }
-        if (offset + scrollTop < scrollHeight) { //can scroll down
+        if (offset + scrollTop < scrollHeight) {
+          //can scroll down
           modal.classList.add('scroll-bottom');
         }
         else {
@@ -127,52 +157,75 @@ 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) {
+      closeSvg.focus();
+    }
+    else if (firstFocusableElement) {
+      firstFocusableElement.focus();
+    }
+  }
   render() {
     let content;
     let overlay;
     let type = this.iframeUrl ? 'frame' : 'html';
-    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } })));
-    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } }, h("span", null, this.bottomCloseBtn)));
+    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: e => {
+        e.preventDefault();
+        this.close();
+      }, onKeyPress: e => {
+        e.preventDefault();
+        this.close();
+      } })));
+    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+        e.preventDefault();
+        this.close();
+      }, onKeyPress: e => {
+        e.preventDefault();
+        this.close();
+      } }, 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 }));
+      content = h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: '100%', width: '100%', scrolling: "no", onLoad: this.resizeIframe });
     }
     else {
       if (this.showHeaderFooter) {
-        content = (h("slot", { name: "body" }));
+        content = h("slot", { name: "body" });
       }
       else {
-        content = (h("slot", null));
+        content = h("slot", null);
       }
     }
     if (this.overlay) {
       if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+        overlay = h("div", { class: "overlay", onClick: _ => this.close() });
       }
       else {
         overlay = h("div", { class: "overlay" });
       }
     }
-    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.modalType === "event-listing" && this.headerOnlyBg ? [
-      h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": 'smart-img', styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1 ? this.headerOnlyText1 : ""), h("span", null, this.headerOnlyText2 ? this.headerOnlyText2 : "")))
-    ] : null, this.showHeaderFooter ? [
-      h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
-      h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
-      h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
-    ] : [
-      closebtn,
-      h("div", { class: "modal-body" }, content)
-    ], this.modalType === "event-listing" && this.bottomCloseBtn ? [
-      bottomCloseBtnEle
-    ] : null))));
+    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? 'show' : 'hide'} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.modalType === 'event-listing' && this.headerOnlyBg
+      ? [
+        h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": "smart-img", styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1 ? this.headerOnlyText1 : ''), h("span", null, this.headerOnlyText2 ? this.headerOnlyText2 : ''))),
+      ]
+      : null, this.showHeaderFooter
+      ? [
+        h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
+        h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
+        h("div", { class: "modal-footer" }, h("slot", { name: "footer" })),
+      ]
+      : [closebtn, h("div", { class: "modal-body" }, content)], this.modalType === 'event-listing' && this.bottomCloseBtn ? [bottomCloseBtnEle] : null))));
   }
   getCssClassMap() {
     return {
-      ["no-container"]: this.hideContainer,
-      ["bio-modal"]: this.isBioModal,
-      ["enclose-modal"]: !this.isBioModal && this.keepInViewport,
+      ['no-container']: this.hideContainer,
+      ['bio-modal']: this.isBioModal,
+      ['enclose-modal']: !this.isBioModal && this.keepInViewport,
       [this.borderRadius]: true,
       [this.modalType]: true,
-      ['vh-center']: this.vhCenter
+      ['vh-center']: this.vhCenter,
     };
   }
   async showModal() {
@@ -227,8 +280,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,
@@ -558,12 +611,31 @@ 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"
       }
     };
   }
   static get states() {
     return {
       "overlayHeight": {},
+      "openedByKeyboard": {},
       "bodyOverflowSetting": {}
     };
   }

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

@@ -83,9 +83,4 @@ ptc-link, ptc-square-card,
   :host ptc-sticky-icons {
     display: block;
   }
-}
-
-ptc-news .news-date {
-  font-size: var(--ptc-font-size-small);
-  color: var(--color-gray-10);
 }