@ptcwebops/ptcw-design 6.3.14 → 6.3.15-beta

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

@@ -5602,26 +5602,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/ptc-preferance-center-form/ptc-preferance-center-form.js

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

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -3164,425 +3164,6 @@ ptc-link, ptc-square-card,
   margin-top: 44px;
 }
 
-.preloader-storefront .jumbotron {
-  margin-bottom: -60px;
-}
-.preloader-storefront .jumbotron .jumbotron-bg {
-  height: 400px;
-  background-color: var(--color-gray-03);
-  position: relative;
-}
-.preloader-storefront .jumbotron .jumbotron-bg .grid-cards-div {
-  position: relative;
-  z-index: 3;
-}
-.preloader-storefront .jumbotron .sf-grid {
-  position: relative;
-  top: -104px;
-  height: 100%;
-  width: 100%;
-  margin-bottom: 3rem;
-}
-.preloader-storefront .jumbotron .sf-cards-grid {
-  grid-column-gap: 1.5rem;
-  grid-row-gap: 1.5rem;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-storefront .jumbotron .sf-cards-grid {
-    grid-column-gap: 2.5rem;
-    grid-row-gap: 2.5rem;
-  }
-}
-.preloader-storefront .jumbotron .sf-cards-grid .short-2 {
-  height: 464px;
-}
-@media (min-width: 992px) {
-  .preloader-storefront .jumbotron .sf-cards-grid .short-2 {
-    height: 318px;
-  }
-}
-.preloader-storefront .jumbotron .sf-cards-grid .short-4 {
-  display: none;
-}
-@media (min-width: 992px) {
-  .preloader-storefront .jumbotron .sf-cards-grid .short-4 {
-    display: block;
-  }
-}
-.preloader-storefront .ptc-section {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-.preloader-storefront .promo-banner-block {
-  width: auto;
-  height: 259px;
-}
-.preloader-storefront .short-16 {
-  width: 25%;
-  margin-bottom: 1.25rem;
-}
-.preloader-storefront .short-11 {
-  width: 60%;
-  margin-bottom: 16px;
-}
-.preloader-storefront .grid-wrapper {
-  padding-left: 24px;
-  padding-bottom: 152px;
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-storefront .grid-wrapper {
-    padding-left: 0;
-    padding-right: 0;
-    max-width: 1136px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .preloader-storefront .grid-wrapper {
-    padding-left: 0;
-    padding-right: 0;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-.preloader-storefront .short-1 {
-  height: 341px;
-}
-.preloader-storefront .cards-grid-2 {
-  display: flex;
-  flex-direction: row;
-  grid-column-gap: 4px;
-  grid-row-gap: 4px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-storefront .cards-grid-2 {
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-  }
-}
-.preloader-storefront .cards-grid-2 .card {
-  min-width: 270px;
-}
-
-.preloader-store-listing-page .top {
-  padding-top: 25px;
-}
-.preloader-store-listing-page .top .top-block {
-  width: 98px;
-}
-.preloader-store-listing-page .search-box {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
-  width: 100%;
-}
-.preloader-store-listing-page .search-box .search-input-box {
-  background-color: #fff;
-  width: 100%;
-  height: 48px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.preloader-store-listing-page .search-box .search-btn-box {
-  height: 48px;
-  width: 58px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.preloader-store-listing-page .search-btn {
-  background-color: #fff;
-  border-radius: 4px;
-  width: auto;
-  height: 48px;
-  margin: 10px;
-  margin-left: 24px;
-}
-.preloader-store-listing-page .card-block {
-  height: 309px;
-}
-@media only screen and (min-width: 480px) {
-  .preloader-store-listing-page .card-block {
-    height: 465px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-store-listing-page .card-block {
-    height: 397px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-store-listing-page .card-block {
-    height: 364px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-store-listing-page .card-block {
-    height: 366px;
-  }
-}
-.preloader-store-listing-page .filter-block {
-  display: none;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-store-listing-page .filter-block {
-    height: 853px;
-    display: block;
-  }
-}
-.preloader-store-listing-page .mobile-block {
-  display: grid;
-  margin-bottom: 4px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-store-listing-page .mobile-block {
-    display: none;
-  }
-}
-.preloader-store-listing-page .desktop-grid {
-  display: none;
-}
-@media (min-width: 992px) {
-  .preloader-store-listing-page .desktop-grid {
-    display: block;
-  }
-}
-.preloader-store-listing-page .desktop-grid .search-filters {
-  margin-top: 24px;
-  background-color: white;
-  border-radius: 4px;
-  padding: 20px 16px 32px 16px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-block-1 {
-  padding: 0px;
-  padding-bottom: 10px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-block-1 .block-1 {
-  width: 40%;
-  margin-bottom: 10px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter {
-  border-top: solid 1px #E4E7E9;
-  padding: 20px 0;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-top {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0px;
-  margin-bottom: 13px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-top .block-1 {
-  width: 50%;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-top .block-2 {
-  width: 10%;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-body {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 0px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-body .block-1 {
-  width: 22px;
-  height: 22px;
-  margin-bottom: 12px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-body .block-2 {
-  width: 50%;
-  margin-left: 12px;
-  height: 16px;
-  margin-bottom: 12px;
-}
-.preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-body .block-3 {
-  width: 35%;
-  margin-left: 12px;
-  height: 16px;
-  margin-bottom: 12px;
-}
-.preloader-store-listing-page .desktop-grid .desktop-cards-wrapper {
-  padding: 20px 20px 24px 24px;
-  background-color: white;
-  border-radius: 4px;
-  margin-top: 14px;
-  margin-bottom: 100px;
-}
-.preloader-store-listing-page .desktop-grid .desktop-cards-wrapper .div-top-lines {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0px;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
-  border-bottom: solid 2px #E4E7E9;
-}
-.preloader-store-listing-page .desktop-grid .desktop-cards-wrapper .div-top-lines .block-1 {
-  width: 10%;
-}
-.preloader-store-listing-page .desktop-grid .desktop-cards-wrapper .div-top-lines .block-2 {
-  width: 100px;
-}
-.preloader-store-listing-page .mobile-cards-wrapper {
-  padding: 20px 20px 24px 24px;
-  background-color: white;
-  border-radius: 4px;
-  margin-top: 14px;
-  margin-bottom: 100px;
-}
-@media (min-width: 992px) {
-  .preloader-store-listing-page .mobile-cards-wrapper {
-    display: none;
-  }
-}
-.preloader-store-listing-page .mobile-cards-wrapper .div-top-lines {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0px;
-  padding-bottom: 10px;
-  border-bottom: solid 2px #E4E7E9;
-}
-.preloader-store-listing-page .mobile-cards-wrapper .div-top-lines .block-1 {
-  width: 49px;
-}
-.preloader-store-listing-page .mobile-cards-wrapper .div-top-lines .block-2 {
-  width: 100px;
-}
-.preloader-store-listing-page .cards-mobile {
-  display: block;
-}
-@media (min-width: 768px) {
-  .preloader-store-listing-page .cards-mobile {
-    display: none;
-  }
-}
-.preloader-store-listing-page .cards-ipad {
-  display: none;
-}
-@media (min-width: 768px) {
-  .preloader-store-listing-page .cards-ipad {
-    display: block;
-  }
-}
-.preloader-store-listing-page .cards-div {
-  border-bottom: solid 2px #E4E7E9;
-}
-.preloader-store-listing-page .cards-div .cards-div-block {
-  padding-top: 27px;
-  padding-left: 0px;
-  padding-bottom: 33px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block .thinner {
-  height: 16px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block .block-1 {
-  width: 65%;
-  margin-bottom: 16px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block .block-2 {
-  width: 95%;
-}
-.preloader-store-listing-page .cards-div .cards-div-block .block-3 {
-  width: 55%;
-  margin-bottom: 26px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block .block-4 {
-  width: 20%;
-  padding-bottom: 0px;
-  margin-bottom: 0px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block-right {
-  padding-top: 27px;
-  padding-left: 0px;
-  padding-bottom: 33px;
-  align-items: end;
-}
-.preloader-store-listing-page .cards-div .cards-div-block-right .thinner {
-  height: 16px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block-right .block-1 {
-  width: 121px;
-  height: 40px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block-right .block-2 {
-  width: 158px;
-  margin-bottom: 17px;
-}
-.preloader-store-listing-page .cards-div .cards-div-block-right .block-3 {
-  width: 121px;
-  height: 55px;
-  padding-bottom: 0px;
-  margin-bottom: 0px;
-}
-.preloader-store-listing-page .mobile-cards {
-  display: grid;
-  padding-bottom: 28px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-store-listing-page .mobile-cards {
-    display: none;
-  }
-}
-.preloader-store-listing-page .ipad-cards {
-  display: none;
-  padding-bottom: 28px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-store-listing-page .ipad-cards {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-store-listing-page .ipad-cards {
-    display: none;
-  }
-}
-.preloader-store-listing-page .filter-div {
-  display: none;
-  margin-bottom: 28px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-store-listing-page .filter-div {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-store-listing-page .filter-div {
-    display: none;
-  }
-}
-.preloader-store-listing-page .filter-top {
-  margin-bottom: 24px;
-}
-.preloader-store-listing-page .desktop-cards {
-  display: none;
-  padding-bottom: 48px;
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-store-listing-page .desktop-cards {
-    display: grid;
-  }
-}
-.preloader-store-listing-page .pagination-block {
-  padding-bottom: 48px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-store-listing-page .pagination-block {
-    margin-top: 28px;
-  }
-}
-.preloader-store-listing-page .page-block {
-  width: 40px;
-  height: 40px;
-  margin: 0 5px;
-}
-
 @keyframes pulse {
   0% {
     opacity: 0.5;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -78,23 +78,18 @@ export class PtcPreloaderSection {
       case 'ppc-skeleton': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ppc-skeleton-preloader" }, h("div", { class: "ptc-container " }, h("div", { class: "dots-loader" })))));
       }
+      case 'search-results': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
+      }
       case 'news': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "news-skeleton-preloader" }, h("div", { class: "ptc-container ptc-section-standard" }, h("ptc-spacer", { breakpoint: "large", size: "medium" }), h("div", { class: "is-grid has-row-gap-md" }, h("div", { class: "is-col-6-lg skeleton-block thick thick-on-mobile" }), h("div", { class: "is-col-6-lg skeleton-block thick medium-md right" })), h("ptc-spacer", { size: "xxx-large" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block narrow thick center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block short thin center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block big-block" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md  has-col-gap-lg" }, h("div", { class: "is-col-8-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-4-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md  has-col-gap-lg" }, h("div", { class: "is-col-8-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-4-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" })))));
       }
-      case 'resource-center':
+      case 'resource-center': {
         return (h("div", { class: "preloader-wrapper resource-center-skeleton-preloader" }, h("div", { class: "skeleton jumbo-image-mobile" }), h("div", { class: "skeleton-jumbotron" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" }))))))), h("div", { class: 'ptc-container' }, h("div", { class: "is-grid desktop-cards" }, h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block bold long" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12-xs is-col-9-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 15 }).map(() => (h("div", { class: "is-col-6-sm is-col-4-xl skeleton-block card-block" })))))))));
-      case 'search-results': {
-        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
       }
       case 'ppc-embedded-form-skeleton': {
         return (h("div", { class: "preloader-wrapper preloader-ppc-embedded-form" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid grid-1" }, h("div", { class: "is-col-12-xs is-col-12-sm is-col-10-md is-col-7-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold line-1" }), h("div", { class: "skeleton-block thin line-2" }), h("div", { class: "skeleton-block thin line-3" }), h("div", { class: "skeleton-block thin line-4" }), h("div", { class: "skeleton-block thin line-5" }), h("div", { class: "skeleton-block thin line-6" }), h("div", { class: "skeleton-block thin line-7" }), h("div", { class: "skeleton-block thin line-3" }), h("div", { class: "skeleton-block thin line-4" }), h("div", { class: "skeleton-block thin line-5" }), h("div", { class: "skeleton-block thin line-8" }))), h("div", { class: "is-col-1-lg" }), h("div", { class: "is-col-12-xs is-col-12-sm is-col-4-lg form-block-2" })))));
       }
-      case 'storefront': {
-        return (h("div", { class: "preloader-wrapper preloader-storefront" }, h("div", { class: "jumbotron " }, h("div", { class: "jumbotron-bg" }), h("div", { class: "sf-grid" }, h("div", { class: "tab-container ptc-container" }, h("div", { class: "is-grid sf-cards-grid" }, h("div", { class: "is-col-12 is-col-6-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-2" }))), h("div", { class: "is-col-12 is-col-6-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-2" }))), h("div", { class: "is-col-12 is-col-6-lg short-4" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-2" }))), h("div", { class: "is-col-12 is-col-6-lg short-4" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-2" }))))))), h("div", { class: "ptc-container ptc-section" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block promo-banner-block" }))), h("div", { class: "ptc-container" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-16" }), h("div", { class: "skeleton-block thin short-11" })))), h("div", { class: "grid-wrapper" }, h("div", { class: "cards-grid-2" }, h("div", { class: "card" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block short-1" }))), h("div", { class: "card" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block short-1" }))), h("div", { class: "card" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block short-1" }))), h("div", { class: "card" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block short-1" })))))));
-      }
-      case 'store-listing-page': {
-        return (h("div", { class: "preloader-wrapper preloader-store-listing-page" }, h("div", { class: "ptc-container" }, h("div", { class: "top" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block top-block thin" }))), h("div", { class: "is-grid has-no-col-gap mobile-block" }, h("div", { class: "is-col-7 is-col-8-sm" }, h("div", { class: "search-box" }, h("div", { class: "search-input-box" }), h("div", { class: "skeleton-block search-btn-box" }))), h("div", { class: "is-col-5 is-col-4-sm" }, h("div", { class: "search-btn" }))), h("div", { class: "is-grid has-col-1" }, h("div", { class: "mobile-cards-wrapper" }, h("div", { class: "div-top-lines skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thick" })), Array.from({ length: 6 }).map(() => (h("div", { class: "cards-div cards-mobile" }, h("div", { class: "skeleton cards-div-block" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thinner" }), h("div", { class: "skeleton-block block-3 thinner" }), h("div", { class: "skeleton-block block-4" }))))), Array.from({ length: 6 }).map(() => (h("div", { class: "cards-div cards-ipad" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-6" }, h("div", { class: "skeleton cards-div-block" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thinner" }), h("div", { class: "skeleton-block block-3 thinner" }), h("div", { class: "skeleton-block block-4" }))), h("div", { class: "is-col-6" }, h("div", { class: "skeleton cards-div-block-right" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thinner" }), h("div", { class: "skeleton-block block-3" }))))))))), h("div", { class: "desktop-grid" }, h("div", { class: "is-grid has-col-gap-md" }, h("div", { class: "is-col-3" }, h("div", { class: "search-box" }, h("div", { class: "search-input-box" }), h("div", { class: "skeleton-block search-btn-box" })), h("div", { class: "search-filters" }, h("div", { class: "div-block-1 skeleton" }, h("div", { class: "skeleton-block block-1" })), Array.from({ length: 4 }).map(() => (h("div", { class: "div-filter" }, h("div", { class: "div-filter-top skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2" })), h("div", { class: "div-filter-body skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2" })), h("div", { class: "div-filter-body skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-3" })), h("div", { class: "div-filter-body skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2" })), h("div", { class: "div-filter-body skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-3" }))))))), h("div", { class: "is-col-9" }, h("div", { class: "desktop-cards-wrapper" }, h("div", { class: "div-top-lines skeleton" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thick" })), Array.from({ length: 6 }).map(() => (h("div", { class: "cards-div cards-ipad" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-6" }, h("div", { class: "skeleton cards-div-block" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thinner" }), h("div", { class: "skeleton-block block-3 thinner" }), h("div", { class: "skeleton-block block-4" }))), h("div", { class: "is-col-6" }, h("div", { class: "skeleton cards-div-block-right" }, h("div", { class: "skeleton-block block-1" }), h("div", { class: "skeleton-block block-2 thinner" }), h("div", { class: "skeleton-block block-3" }))))))))))))));
-      }
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

package/dist/collection/components/ptc-previous-url/ptc-previous-url.css

@@ -82,4 +82,20 @@ ptc-link, ptc-square-card,
   text-decoration: underline;
   text-decoration-color: var(--color-green-07);
   outline: none;
+}
+
+.light {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.54);
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  padding: 0.25rem 1rem 0.5rem 0.75rem;
+  cursor: pointer;
+  position: relative;
+  display: block;
+}
+.light:hover span {
+  text-decoration: underline;
+  text-decoration-color: var(--color-green-07);
+  outline: none;
 }

package/dist/collection/components/ptc-previous-url/ptc-previous-url.js

@@ -3,10 +3,18 @@ export class PtcPreviousUrl {
   constructor() {
     this.href = undefined;
     this.text = undefined;
+    this.theme = 'standard';
     this.styles = undefined;
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, this.theme == 'light' ?
+      (h("a", { class: this.getCssClassMap() }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("span", { class: "back-to-videos" }, this.text))) :
+      [h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)]), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.theme]: true
+    };
   }
   static get is() { return "ptc-previous-url"; }
   static get encapsulation() { return "shadow"; }
@@ -56,6 +64,24 @@ export class PtcPreviousUrl {
         "attribute": "text",
         "reflect": false
       },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'light'",
+          "resolved": "\"light\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
       "styles": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js

@@ -279,15 +279,18 @@ export class PtcPricingPackagingTable {
         for (let i = 0; i < tableRowHeaderP.length; i++) {
           let ptcH4 = document.createElement('h4');
           ptcH4.setAttribute("class", "row-header-h4");
+          // ptcPara.setAttribute("font-weight", "w-6");
+          // ptcPara.setAttribute("para-align", "left");
+          // ptcPara.setAttribute("para-color", "primary-grey");
+          // ptcPara.setAttribute("para-line-h", "line-height-p");
+          // ptcPara.setAttribute("para-margin", "margin-flush");
           ptcH4.innerHTML = tableRowHeaderP[i].innerHTML;
           tableRowHeaderP[i].replaceWith(ptcH4);
         }
-        if (tableRowHeaderP.length > 0) {
-          let containerDiv = document.createElement('div');
-          containerDiv.slot = rowHeader.getAttribute('slot');
-          containerDiv.innerHTML = rowHeader.innerHTML;
-          rowHeader.replaceWith(containerDiv);
-        }
+        let slotValue = rowHeader.getAttribute('slot');
+        let headerContent = rowHeader.innerHTML;
+        this.el.insertAdjacentHTML('afterbegin', `<div slot="desktop-${slotValue}">${headerContent}</div><div slot="mobile-${slotValue}">${headerContent}</div>`);
+        rowHeader.remove();
       }
     };
     this.preProcessCtaButtons = () => {
@@ -438,9 +441,8 @@ export class PtcPricingPackagingTable {
     };
     const TableDataRows = () => {
       return ([...Array(this.dataRows).keys()]).map(row => {
-        return h(Fragment, null, (!this.isDesktopView) ?
-          h("div", { class: "mobile-sticky-row-header" }, h("slot", { name: `row-header-${row + 1}` })) : null, h("div", { class: `mf-listen table-row ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, (this.isDesktopView) ?
-          h("div", { class: `desktop-sticky-row-header ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, h("slot", { name: `row-header-${row + 1}` })) : null, ([...Array(this.dataCols).keys()]).map(col => {
+        return h(Fragment, null, h("div", { class: "mobile-sticky-row-header" }, h("slot", { name: `mobile-row-header-${row + 1}` })), h("div", { class: `mf-listen table-row ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, (this.isDesktopView) ?
+          h("div", { class: `desktop-sticky-row-header ${(this.isDesktopView && (row % 2 != 0)) ? "desktop-alternate-row" : ""}` }, h("slot", { name: `desktop-row-header-${row + 1}` })) : null, ([...Array(this.dataCols).keys()]).map(col => {
           return h("div", { class: `table-cell ${(col + 1) === this.dataCols ? "table-last-cell" : ""}`, "data-cell-slot": `cell-r${row + 1}-c${col + 1}`, onFocusin: e => this.handleAutoScrollOnFocus(e, `cell-r${row + 1}-c${col + 1}`) }, h("slot", { name: `cell-r${row + 1}-c${col + 1}` }));
         }), h("div", { class: `table-filler-cell ${this.showFillerCells ? "show" : ""}` })));
       });