npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.21 → 6.3.22-beta - Mend

@ptcwebops/ptcw-design 6.3.21 → 6.3.22-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (244) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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" : ""}` })));
       });

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.js CHANGED Viewed

@@ -117,7 +117,7 @@ export class PtcPricingTabs {
   }
   renderTabs() {
     let tabs = this.getCurrentTabs();
-    return (h("div", { class: "tabs" }, h("ptc-para", { styles: "p.primary-grey { margin: 1.5rem 0 .75rem 0;", "font-size": 'x-small', "font-weight": "w-4" }, this.tabLabel, h("div", { class: "attached" }, h("slot", { name: "attached" }))), tabs && tabs.map((tab, index) => h("ptc-pricing-block", { "data-id": tab.id, active: tab.active, onClick: () => this.handleTabClick(tab, index), onKeyDown: (event) => this.handleKeyDown(event, tab, index), tabindex: "0", "tracker-id": `pricing-block-${index}` }, h("span", { slot: "left-text", innerHTML: tab.header }), h("span", { slot: "right-text", innerHTML: tab.label })))));
+    return (h("div", { class: "tabs" }, h("ptc-para", { styles: "p.primary-grey { margin: 1.5rem 0 .75rem 0; max-width: 64%; }", "font-size": 'x-small', "font-weight": "w-4" }, this.tabLabel, h("div", { class: "attached" }, h("slot", { name: "attached" }))), tabs && tabs.map((tab, index) => h("ptc-pricing-block", { "data-id": tab.id, active: tab.active, onClick: () => this.handleTabClick(tab, index), onKeyDown: (event) => this.handleKeyDown(event, tab, index), tabindex: "0", "tracker-id": `pricing-block-${index}` }, h("span", { slot: "left-text", innerHTML: tab.header }), h("span", { slot: "right-text", innerHTML: tab.label })))));
   }
   render() {
     let tabs = this.getCurrentTabs();