@ptcwebops/ptcw-design 6.2.15 → 6.2.16-beta

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

@@ -1966,28 +1966,18 @@ ptc-link, ptc-square-card,
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
-  width: 70%;
+  width: 335px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
-    width: 335px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
     width: 445px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
-  width: 85%;
+  width: 397px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
-    width: 397px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
     width: 525px;
@@ -2004,72 +1994,47 @@ ptc-link, ptc-square-card,
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
-  width: 95%;
+  width: 411px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
-    width: 411px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
     width: 621px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
-  width: 85%;
+  width: 383px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
-    width: 383px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
-  width: 98%;
+  width: 435px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
-    width: 435px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
-  width: 60%;
+  width: 199px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
-    width: 199px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
-  width: 70%;
+  width: 411px;
   margin-top: 32px;
   margin-bottom: 65px;
   align-self: center;
 }
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
-    width: 411px;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
     width: 232px;
@@ -2117,14 +2082,8 @@ ptc-link, ptc-square-card,
   }
 }
 .preloader-events-listing .short-15 {
-  width: 70%;
+  width: 290px;
   align-self: center;
-  margin-bottom: 100px;
-}
-@media only screen and (min-width: 480px) {
-  .preloader-events-listing .short-15 {
-    width: 290px;
-  }
 }
 .preloader-events-listing .grid-cards {
   display: flex;
@@ -2246,372 +2205,6 @@ ptc-link, ptc-square-card,
   }
 }
 
-.preloader-blogs-listing-page .block-heading {
-  width: 188px;
-  height: 43px;
-  margin-top: 64px;
-  align-self: center;
-}
-@media only screen and (min-width: 480px) {
-  .preloader-blogs-listing-page .block-heading {
-    width: 196px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .block-heading {
-    width: 254px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .block-heading {
-    width: 195.11px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .block-heading {
-    width: 235.207px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .preloader-blogs-listing-page .block-heading {
-    width: 248px;
-  }
-}
-.preloader-blogs-listing-page .block-para {
-  width: 256px;
-  height: 20px;
-  margin-bottom: 45px;
-  align-self: center;
-}
-@media only screen and (min-width: 480px) {
-  .preloader-blogs-listing-page .block-para {
-    width: 264px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .block-para {
-    width: 340px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .block-para {
-    width: 280px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .block-para {
-    width: 337.296px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .preloader-blogs-listing-page .block-para {
-    width: 356px;
-  }
-}
-.preloader-blogs-listing-page .topsection-block {
-  height: 754px;
-  margin-bottom: 28px;
-  align-self: center;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .topsection-block {
-    height: 547px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .topsection-block {
-    margin-bottom: 69px;
-  }
-}
-.preloader-blogs-listing-page .card-block {
-  height: 309px;
-}
-@media only screen and (min-width: 480px) {
-  .preloader-blogs-listing-page .card-block {
-    height: 465px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .card-block {
-    height: 397px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .card-block {
-    height: 364px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .card-block {
-    height: 366px;
-  }
-}
-.preloader-blogs-listing-page .filter-block {
-  display: none;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .filter-block {
-    height: 853px;
-    display: block;
-  }
-}
-.preloader-blogs-listing-page .mobile-block {
-  display: grid;
-  margin-bottom: 28px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .mobile-block {
-    display: none;
-  }
-}
-.preloader-blogs-listing-page .mobile-cards {
-  display: grid;
-  padding-bottom: 28px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .mobile-cards {
-    display: none;
-  }
-}
-.preloader-blogs-listing-page .ipad-cards {
-  display: none;
-  padding-bottom: 28px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .ipad-cards {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .ipad-cards {
-    display: none;
-  }
-}
-.preloader-blogs-listing-page .filter-div {
-  display: none;
-  margin-bottom: 28px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-blogs-listing-page .filter-div {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .filter-div {
-    display: none;
-  }
-}
-.preloader-blogs-listing-page .filter-top {
-  margin-bottom: 24px;
-}
-.preloader-blogs-listing-page .desktop-cards {
-  display: none;
-  padding-bottom: 48px;
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-blogs-listing-page .desktop-cards {
-    display: grid;
-  }
-}
-.preloader-blogs-listing-page .pagination-block {
-  padding-bottom: 48px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-blogs-listing-page .pagination-block {
-    margin-top: 28px;
-  }
-}
-.preloader-blogs-listing-page .page-block {
-  width: 40px;
-  height: 40px;
-  margin: 0 5px;
-}
-
-.preloader-cs-listing-page .jumbotron-img {
-  height: 300px;
-  background: #fff;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .jumbotron-img {
-    display: none;
-  }
-}
-.preloader-cs-listing-page .jumbotron {
-  background-color: var(--color-gray-02);
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .jumbotron {
-    background: #fff;
-  }
-}
-.preloader-cs-listing-page .jumbotron .jumbotron-content {
-  background-color: var(--color-gray-02);
-  padding-top: 18px;
-  padding-bottom: 20px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .jumbotron .jumbotron-content {
-    padding-top: 106px;
-    padding-bottom: 106px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .jumbotron .jumbotron-content {
-    background: #fff;
-  }
-}
-.preloader-cs-listing-page .skeleton-jumbotron {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .skeleton-jumbotron {
-    padding-left: 24px;
-    padding-bottom: 24px;
-  }
-}
-.preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
-  display: flex;
-  width: 50%;
-  column-gap: 14px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
-    column-gap: 24px;
-  }
-}
-.preloader-cs-listing-page .bold-1 {
-  width: 97%;
-  margin-bottom: 24px;
-}
-.preloader-cs-listing-page .narrow-1 {
-  margin-bottom: 20px;
-}
-.preloader-cs-listing-page .bold-2 {
-  margin-bottom: 18px;
-}
-.preloader-cs-listing-page .card-block {
-  height: 347px;
-}
-.preloader-cs-listing-page .filter-block {
-  display: none;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .filter-block {
-    height: 853px;
-    display: block;
-  }
-}
-.preloader-cs-listing-page .mobile-block {
-  display: grid;
-  margin-bottom: 28px;
-  margin-top: 48px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .mobile-block {
-    display: none;
-  }
-}
-.preloader-cs-listing-page .mobile-cards {
-  display: grid;
-  padding-bottom: 28px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-cs-listing-page .mobile-cards {
-    display: none;
-  }
-}
-.preloader-cs-listing-page .ipad-cards {
-  display: none;
-  padding-bottom: 28px;
-  margin-top: 64px;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-cs-listing-page .ipad-cards {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-cs-listing-page .ipad-cards {
-    display: none;
-  }
-}
-.preloader-cs-listing-page .filter-div {
-  display: none;
-  margin-bottom: 28px;
-}
-@media only screen and (min-width: 992px) {
-  .preloader-cs-listing-page .filter-div {
-    display: grid;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-cs-listing-page .filter-div {
-    display: none;
-  }
-}
-.preloader-cs-listing-page .filter-top {
-  margin-bottom: 24px;
-}
-.preloader-cs-listing-page .desktop-cards {
-  display: none;
-  padding-bottom: 48px;
-  margin-top: 64px;
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-cs-listing-page .desktop-cards {
-    display: grid;
-  }
-}
-.preloader-cs-listing-page .pagination-block {
-  padding-bottom: 48px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-@media only screen and (min-width: 768px) {
-  .preloader-cs-listing-page .pagination-block {
-    margin-top: 28px;
-  }
-}
-.preloader-cs-listing-page .page-block {
-  width: 40px;
-  height: 40px;
-  margin: 0 5px;
-}
-
-.ppc-skeleton-preloader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: #F3F3F3;
-}
-.ppc-skeleton-preloader .dots-loader {
-  color: var(--Green-6, #33A13C);
-  width: 4px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
-  transform: translateX(-38px);
-  animation: dotsAnimation 0.5s infinite alternate linear;
-}
-@keyframes dotsAnimation {
-  50% {
-    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
-  }
-  100% {
-    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
-  }
-}
-
 @keyframes pulse {
   0% {
     opacity: 0.5;

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

@@ -42,12 +42,6 @@ export class PtcPreloaderSection {
       case 'blogs-listing': {
         return (h("div", { class: "is-grid has-col-1 has-col-2-md has-col-3-xl has-col-gap-md has-row-gap-md cards-preload-min-height" }, Array.from({ length: this.numberOfCards }).map(() => (h("div", { class: "is-col-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-card-media" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }))))))));
       }
-      case 'blogs-listing-page': {
-        return (h("div", { class: "preloader-wrapper preloader-blogs-listing-page" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-heading" }), h("div", { class: "skeleton-block block-para" }), h("div", { class: "skeleton-block topsection-block" })))), h("div", { class: "is-grid has-col-gap-md has-row-gap-md mobile-block" }, h("div", { class: "is-col-9" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" }))), h("div", { class: "is-col-3" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" })))), h("div", { class: "is-grid has-col-1 has-col-2-md has-col-3-xl cards-preload-min-height mobile-cards" }, Array.from({ length: 7 }).map(() => (h("div", { class: "is-col-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))), h("div", { class: "is-grid mobile-cards is-centered" }, h("div", { class: "is-col-12 pagination-block skeleton" }, h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }))), h("div", { class: "is-grid ipad-cards has-no-row-gap" }, h("div", { class: "skeleton is-col-12" }, h("div", { class: "skeleton-block thin narrow" })), h("div", { class: "is-col-12-xs is-col-4-lg filter-div" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick filter-top" }), h("div", { class: "skeleton-block filter-block" }))), h("div", { class: "is-col-12-xs is-col-8-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 14 }).map(() => (h("div", { class: "is-col-6" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))), h("div", { class: "is-grid is-centered" }, h("div", { class: "is-col-12 pagination-block skeleton" }, h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }))))), h("div", { class: "is-grid desktop-cards has-no-row-gap" }, h("div", { class: "skeleton is-col-12" }, h("div", { class: "skeleton-block thin narrow" })), h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton filter-top" }, h("div", { class: "skeleton-block thick filter-top" }), h("div", { class: "skeleton-block filter-block" }))), 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-4" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))), h("div", { class: "is-grid is-centered" }, h("div", { class: "is-col-12 pagination-block skeleton" }, h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }), h("div", { class: "skeleton-block page-block" }))))))));
-      }
-      case 'case-studies-listing-page': {
-        return (h("div", { class: "preloader-wrapper preloader-cs-listing-page" }, h("div", { class: "jumbotron-img" }), h("div", { class: "jumbotron" }, h("div", { class: "skeleton-jumbotron 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 jumbotron-content" }, 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 has-row-gap-md mobile-block" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin narrow narrow-1" }), h("div", { class: "skeleton-block bold bold-1" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" })))), h("div", { class: "is-grid has-col-1 has-col-2-md has-col-3-xl cards-preload-min-height mobile-cards" }, Array.from({ length: 4 }).map(() => (h("div", { class: "is-col-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))), h("div", { class: "is-grid ipad-cards has-no-row-gap" }, h("div", { class: "is-col-12-xs is-col-4-lg filter-div" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin narrow narrow-1" }), h("div", { class: "skeleton-block bold bold-1" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }))), h("div", { class: "is-col-12-xs is-col-8-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 8 }).map(() => (h("div", { class: "is-col-6" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))))), h("div", { class: "is-grid desktop-cards has-no-row-gap" }, h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin narrow narrow-1" }), h("div", { class: "skeleton-block bold bold-1" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }), h("div", { class: "skeleton-block bold bold-2" }))), h("div", { class: "is-col-12-xs is-col-9-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 12 }).map(() => (h("div", { class: "is-col-4" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block card-block" })))))))))));
-      }
       case 'blog-detail': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-blog-detail" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg is-rtl-lg" }, h("div", { class: "is-col-12 is-col-6-lg" }, h("div", { class: "skeleton-jumbotron-image" })), h("div", { class: "is-col-12 is-col-6-lg is-ltr" }, h("div", { class: "skeleton-block wide-sm h-xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("div", { class: "skeleton-block h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block wide h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("div", { class: "skeleton-block date" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "is-centered-vertically" }, h("div", { class: "skeleton-block circle" }), h("div", { class: "skeleton-block author" })), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "large", size: "small" }), h("div", { class: "flex-container" }, h("div", { class: "skeleton-block button-1" }), h("div", { class: "skeleton-block button-2" }))))), h("div", { class: "ptc-container" }, h("div", { class: "is-grid" }, h("div", { class: "is-desktop is-col-3-lg" }, h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large short" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "flex-container" }, h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }))), h("div", { class: "is-col-12 is-col-7-lg" }, h("div", { class: "is-mobile" }, h("div", { class: "skeleton-block h-xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("div", { class: "skeleton-block h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block medium h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" })), h("div", { class: "is-desktop" }, h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xxxx-large" }), h("div", { class: "skeleton-block h-x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-x-large medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-x-large short" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", { class: "skeleton-cta" }, h("div", { class: "skeleton-block cta-image" }), h("div", { class: "skeleton-block cta-body" })), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }))))))));
       }
@@ -70,14 +64,11 @@ export class PtcPreloaderSection {
         return (h("div", { class: "preloader-wrapper preloader-generic-form" }, h("div", { class: "jumbotron" }, h("div", { class: "ptc-container skeleton-jumbotron" }, 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 block form-block-1" }, h("div", { class: "is-col-12" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))), h("div", { class: "is-grid block 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 thin 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" }), h("div", { class: "skeleton-block thin line-6" }), 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 block-2" }))), 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" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))))));
       }
       case 'events-listing': {
-        return (h("div", { class: "preloader-wrapper preloader-events-listing" }, h("div", { class: "jumbotron " }, h("div", { class: "jumbotron-bg" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short-1" }), h("div", { class: "skeleton-block thin short-2" }), h("div", { class: "skeleton-block bold short-3" }), h("div", { class: "skeleton-block thin short-4" }), h("div", { class: "skeleton-block thin short-5" }), h("div", { class: "skeleton-block thin short-6" }), h("div", { class: "skeleton-block thin short-7" }), h("div", { class: "skeleton-block thin short-8" }), h("div", { class: "skeleton-block thin short-9" }), h("div", { class: "skeleton-block thick short-10" }))))), h("div", { class: "grid-cards-div" }, h("div", { class: "skeleton grid-cards" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" })), h("div", { class: "skeleton grid-cards-desktop ptc-container" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }))), h("div", { class: "white-placeholder" }))), h("div", { class: "ptc-container grid-2" }, h("div", { class: "is-grid has-no-row-gap" }, 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: "skeleton-block thin short-12" }))))), h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "ptc-container skeleton" }, h("div", { class: "grid-long-cards-mobile " }, h("div", { class: "skeleton-block short-13" }))), h("div", { class: "skeleton" }, h("div", { class: "grid-long-cards" }, h("div", { class: "skeleton-block short-13" }), h("div", { class: "skeleton-block short-14" })), h("div", { class: "skeleton-block bold short-15" }))))));
+        return (h("div", { class: "preloader-wrapper preloader-events-listing" }, h("div", { class: "jumbotron " }, h("div", { class: "jumbotron-bg" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short-1" }), h("div", { class: "skeleton-block thin short-2" }), h("div", { class: "skeleton-block bold short-3" }), h("div", { class: "skeleton-block thin short-4" }), h("div", { class: "skeleton-block thin short-5" }), h("div", { class: "skeleton-block thin short-6" }), h("div", { class: "skeleton-block thin short-7" }), h("div", { class: "skeleton-block thin short-8" }), h("div", { class: "skeleton-block thin short-9" }), h("div", { class: "skeleton-block thick short-10" }))))), h("div", { class: "grid-cards-div" }, h("div", { class: "skeleton grid-cards" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" })), h("div", { class: "skeleton grid-cards-desktop ptc-container" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }))), h("div", { class: "white-placeholder" }))), h("div", { class: "ptc-container grid-2" }, h("div", { class: "is-grid has-no-row-gap" }, 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: "skeleton-block thin short-12" }))))), h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "ptc-container skeleton" }, h("div", { class: "grid-long-cards-mobile " }, h("div", { class: "skeleton-block short-13" }))), h("div", { class: "skeleton" }, h("div", { class: "grid-long-cards" }, h("div", { class: "skeleton-block short-13" }), h("div", { class: "skeleton-block short-14" })), h("div", { class: "skeleton-block thick short-15" }))))));
       }
       case 'pdf-skeleton': {
         return (h("div", { class: "preloader-wrapper pdf-skeleton-preloader" }, h("div", { class: "jumbotron-sec" }, h("div", { class: "ptc-container skeleton-jumbotron" }, 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: "ptc-container" }, h("div", { class: "section-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block line-1" }), h("div", { class: "skeleton-block line-2 thin" }), h("div", { class: "skeleton-block line-3 thin" }), h("div", { class: "skeleton-block line-4 thin" }))), h("div", { class: "pdf-area" }, h("div", { class: "pdf-section" }, h("div", { class: "top-border" }), h("div", { class: "pdf-body" }, h("div", { class: "skeleton" }, 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("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thick-block" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }))))))));
       }
-      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" })))));
-      }
       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,