@ptcwebops/ptcw-design 5.6.6 → 5.6.7

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

@@ -776,38 +776,93 @@ ptc-link, ptc-square-card,
 }
 .skeleton-on-demand .skeleton-block {
   background: linear-gradient(to right, #32373B 25%, var(--color-gray-09) 50%, #32373B 75%);
-  height: 24px;
   background-size: 200% 100%;
   margin-bottom: 8px;
   border-radius: 4px;
   animation: loading 2.5s ease-in-out infinite;
 }
+.skeleton-on-demand .skeleton-block.short {
+  width: 80%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.short {
+    width: 30%;
+  }
+}
 .skeleton-on-demand .skeleton-block.wide-sm-1 {
-  width: 40%;
+  width: 90%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.wide-sm-1 {
+    width: 40%;
+  }
 }
 .skeleton-on-demand .skeleton-block.wide-md {
-  width: 43%;
+  width: 93%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.wide-md {
+    width: 43%;
+  }
 }
 .skeleton-on-demand .skeleton-block.wide-md-1 {
-  width: 45%;
+  width: 95%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.wide-md-1 {
+    width: 45%;
+  }
 }
 .skeleton-on-demand .skeleton-block.wide-sm-2 {
-  width: 27%;
+  width: 77%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.wide-sm-2 {
+    width: 27%;
+  }
 }
 .skeleton-on-demand .skeleton-block.smallest {
-  width: 10%;
+  width: 60%;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.smallest {
+    width: 10%;
+  }
+}
+.skeleton-on-demand .skeleton-block.medium-1 {
+  width: 100%;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-on-demand .skeleton-block.medium-1 {
+    width: 90%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .skeleton-block.medium-1 {
+    width: 50%;
+  }
 }
 .skeleton-on-demand .on-demand-vl {
   padding-top: 19px;
   padding-bottom: 338px;
 }
 .skeleton-on-demand .on-demand-vl .grid-top {
-  padding-bottom: 113px;
+  padding-bottom: 90px;
+}
+@media only screen and (min-width: 1600px) {
+  .skeleton-on-demand .on-demand-vl .grid-top {
+    padding-bottom: 113px;
+  }
 }
 .skeleton-on-demand .on-demand-vl .grid-medium {
-  padding-top: 97px;
+  padding-top: 84px;
   padding-bottom: 100px;
 }
+@media only screen and (min-width: 1600px) {
+  .skeleton-on-demand .on-demand-vl .grid-medium {
+    padding-top: 97px;
+  }
+}
 .skeleton-on-demand .on-demand-vl .grid-medium-2 {
   padding-bottom: 59px;
 }
@@ -822,6 +877,30 @@ ptc-link, ptc-square-card,
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  column-gap: 28px;
+}
+.skeleton-on-demand .on-demand-vl .grid-vl .block {
+  flex-basis: 100%;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-on-demand .on-demand-vl .grid-vl .block {
+    flex-basis: 50%;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-on-demand .on-demand-vl .grid-vl .block {
+    flex-basis: 33%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-on-demand .on-demand-vl .grid-vl .block {
+    flex-basis: 25%;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-on-demand .on-demand-vl .grid-vl .block {
+    flex-basis: 20%;
+  }
 }
 .skeleton-on-demand .jumbotron-section {
   padding-top: 89px;
@@ -842,6 +921,49 @@ ptc-link, ptc-square-card,
     padding-bottom: 117px;
   }
 }
+.skeleton-on-demand .hide-bl {
+  display: block;
+}
+.skeleton-on-demand .hide-xs {
+  display: none;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-on-demand .hide-xs {
+    display: block;
+  }
+}
+.skeleton-on-demand .hide-sm {
+  display: none;
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-on-demand .hide-sm {
+    display: block;
+  }
+}
+.skeleton-on-demand .hide-md {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .hide-md {
+    display: block;
+  }
+}
+.skeleton-on-demand .hide-lg {
+  display: none;
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-on-demand .hide-lg {
+    display: block;
+  }
+}
+.skeleton-on-demand .hide-xl {
+  display: none;
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-on-demand .hide-xl {
+    display: block;
+  }
+}
 .skeleton-on-demand .block .block-1 {
   width: 316px;
   height: 501px;
@@ -995,172 +1117,127 @@ ptc-link, ptc-square-card,
   }
 }
 .skeleton-on-demand .block .block-6 {
-  width: 330px;
+  width: auto;
   height: 173px;
   border-radius: 12px;
 }
 @media only screen and (min-width: 480px) {
   .skeleton-on-demand .block .block-6 {
-    width: 432px;
     height: 173px;
   }
 }
 @media only screen and (min-width: 768px) {
   .skeleton-on-demand .block .block-6 {
-    width: 704px;
     height: 173px;
   }
 }
 @media only screen and (min-width: 992px) {
   .skeleton-on-demand .block .block-6 {
-    width: 211.985px;
     height: 161.633px;
   }
 }
 @media only screen and (min-width: 1200px) {
   .skeleton-on-demand .block .block-6 {
-    width: 260.619px;
     height: 187.869px;
   }
 }
 @media only screen and (min-width: 1440px) {
   .skeleton-on-demand .block .block-6 {
-    width: 316px;
     height: 220px;
   }
 }
 @media only screen and (min-width: 1600px) {
   .skeleton-on-demand .block .block-6 {
-    width: 442.164px;
     height: 291.109px;
   }
 }
 .skeleton-on-demand .block .block-7 {
-  width: 87.264px;
+  width: auto;
   height: 114px;
   border-radius: 12px;
 }
 @media only screen and (min-width: 480px) {
   .skeleton-on-demand .block .block-7 {
-    width: 114px;
     height: 114px;
   }
 }
 @media only screen and (min-width: 768px) {
   .skeleton-on-demand .block .block-7 {
-    width: 114px;
     height: 114px;
   }
 }
 @media only screen and (min-width: 992px) {
   .skeleton-on-demand .block .block-7 {
-    width: 76.476px;
     height: 83.755px;
   }
 }
 @media only screen and (min-width: 1200px) {
   .skeleton-on-demand .block .block-7 {
-    width: 94.021px;
     height: 97.35px;
   }
 }
 @media only screen and (min-width: 1440px) {
   .skeleton-on-demand .block .block-7 {
-    width: 114px;
+    width: auto;
     height: 114px;
   }
 }
 @media only screen and (min-width: 1600px) {
   .skeleton-on-demand .block .block-7 {
-    width: 159.42px;
+    width: auto;
     height: 150.848px;
   }
 }
 .skeleton-on-demand .block .block-8 {
   border-radius: 12px;
-  width: 328px;
+  width: auto;
   height: 138px;
-  display: none;
   margin-bottom: 12px;
 }
 @media only screen and (min-width: 480px) {
   .skeleton-on-demand .block .block-8 {
-    width: 203.048px;
     height: 138px;
   }
 }
 @media only screen and (min-width: 768px) {
   .skeleton-on-demand .block .block-8 {
-    width: 216.524px;
     height: 138px;
   }
 }
 @media only screen and (min-width: 992px) {
   .skeleton-on-demand .block .block-8 {
-    width: 279px;
     height: 138px;
   }
 }
 @media only screen and (min-width: 1200px) {
   .skeleton-on-demand .block .block-8 {
-    width: 255px;
     height: 138px;
   }
 }
 @media only screen and (min-width: 1440px) {
   .skeleton-on-demand .block .block-8 {
-    width: 246px;
     height: 159px;
   }
 }
 @media only screen and (min-width: 1600px) {
   .skeleton-on-demand .block .block-8 {
-    width: 344.545px;
     height: 159px;
   }
 }
 .skeleton-on-demand .block .block-9 {
   border-radius: 12px;
-  width: 328px;
+  width: auto;
   height: 381px;
-  display: none;
   margin-bottom: 12px;
 }
 @media only screen and (min-width: 480px) {
   .skeleton-on-demand .block .block-9 {
-    width: 203.048px;
     height: 381px;
   }
 }
-@media only screen and (min-width: 768px) {
-  .skeleton-on-demand .block .block-9 {
-    width: 216.524px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .skeleton-on-demand .block .block-9 {
-    width: 279px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .skeleton-on-demand .block .block-9 {
-    width: 255px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .skeleton-on-demand .block .block-9 {
-    width: 246px;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  .skeleton-on-demand .block .block-9 {
-    width: 344.545px;
-  }
-}
 .skeleton-on-demand .block .block-10 {
   border-radius: 12px;
   height: 268px;
-  display: none;
 }
 @media only screen and (min-width: 1600px) {
   .skeleton-on-demand .block .block-10 {
@@ -1176,34 +1253,6 @@ ptc-link, ptc-square-card,
     height: 141.829px;
   }
 }
-.skeleton-on-demand .block .hide-bl {
-  display: block;
-}
-@media only screen and (min-width: 480px) {
-  .skeleton-on-demand .block .hide-xs {
-    display: block;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .skeleton-on-demand .block .hide-sm {
-    display: block;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .skeleton-on-demand .block .hide-md {
-    display: block;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .skeleton-on-demand .block .hide-lg {
-    display: block;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .skeleton-on-demand .block .hide-xl {
-    display: block;
-  }
-}
 
 .section-two-col {
   padding-top: 76px;

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

@@ -26,7 +26,7 @@ export class PtcPreloaderSection {
   }
   componentWillLoad() {
     if (this.autoShow) {
-      setTimeout(() => (this.isLoading = false), 3000);
+      setTimeout(() => (this.isLoading = false), 3000000000000000000);
     }
   }
   renderHTML() {
@@ -49,10 +49,10 @@ export class PtcPreloaderSection {
         return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container " }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg is-centered jumbotron-section" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin center narrow" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block thick center medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin center wide" }), h("div", { class: "skeleton-block thin center long" }), h("div", { class: "skeleton-block thin medium center" })))), h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" }))))));
       }
       case 'on-demand-video-landing': {
-        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container-lg skeleton-on-demand" }, h("div", { class: "skeleton" }, h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" }), h("div", { class: "skeleton-block thin left narrow" }), h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" })), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "grid-left is-col-12-xs is-col-8-lg is-col-9-xl" }, h("div", { class: "is-grid has-row-gap-lg" }, h("div", { class: "is-col-12 block" }, h("div", { class: "block-4 skeleton-block" })), h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6 block is-placed-left" }, h("div", { class: "block-5 skeleton-block" })), h("div", { class: "is-col-6 block is-placed-right" }, h("div", { class: "block-5 skeleton-block" })))))), h("div", { class: "grid-right is-col-12-xs is-col-4-lg is-col-3-xl" }, h("div", { class: "block" }, h("div", { class: "block-6 skeleton-block" })), h("ptc-spacer", { breakpoint: "small", size: "large", class: "large" }), h("div", { class: "skeleton-block thin left wide" }), h("ptc-spacer", { breakpoint: "small", size: "small", class: "small" }), h("div", { class: "is-grid has-row-gap-sm" }, Array.from({ length: 7 }).map(() => (h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-row-gap-md has-col-gap" }, h("div", { class: "is-col-4 block is-placed-left" }, h("div", { class: "block-7 skeleton-block" })), h("div", { class: "is-col-8 skeleton centered padding-left-sm" }, h("div", { class: "skeleton-block thin left" }), h("div", { class: "skeleton-block thin medium left" }))))))))))));
+        return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container-lg" }, h("div", { class: "skeleton" }, h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" }), h("div", { class: "skeleton-block thin left narrow" }), h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" })), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "grid-left is-col-12-xs is-col-8-lg is-col-9-xl" }, h("div", { class: "is-grid has-row-gap-lg" }, h("div", { class: "is-col-12 block" }, h("div", { class: "block-4 skeleton-block" })), h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6 block is-placed-left" }, h("div", { class: "block-5 skeleton-block" })), h("div", { class: "is-col-6 block is-placed-right" }, h("div", { class: "block-5 skeleton-block" })))))), h("div", { class: "grid-right is-col-12-xs is-col-4-lg is-col-3-xl" }, h("div", { class: "block" }, h("div", { class: "block-6 skeleton-block" })), h("ptc-spacer", { breakpoint: "small", size: "large", class: "large" }), h("div", { class: "skeleton-block thin left wide" }), h("ptc-spacer", { breakpoint: "small", size: "small", class: "small" }), h("div", { class: "is-grid has-row-gap-sm" }, Array.from({ length: 7 }).map(() => (h("div", { class: "is-col-12 is-col-6-md is-col-12-lg" }, h("div", { class: "is-grid has-row-gap-md has-col-gap" }, h("div", { class: "is-col-4 is-col-5-xl block is-placed-left" }, h("div", { class: "block-7 skeleton-block" })), h("div", { class: "is-col-8 is-col-7-xl skeleton centered padding-left-sm" }, h("div", { class: "skeleton-block thin left" }), h("div", { class: "skeleton-block thin medium left" }))))))))))));
       }
       case 'on-demand-video-listing': {
-        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container-lg skeleton-on-demand" }, h("div", { class: "skeleton" }, h("div", { class: "on-demand-vl" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium right" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short left" }), h("div", { class: "skeleton-block thin wide-sm-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-md-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-sm-2 left" }), h("div", { class: "skeleton-block thin smallest left" })))), h("div", { class: "grid-medium" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-bl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xs" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-sm" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-lg" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))), h("div", { class: "grid-medium-2" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-bl" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-xs" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-sm" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-lg" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-xl" })))), h("div", { class: "grid-bottom-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "is-grid has-col-gap-sm" }, h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-bl" }))), h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-sm" }))))), h("div", { class: "grid-bottom-2" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-11" }))))), h("div", { class: "grid-bottom" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-bl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xs" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-sm" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-lg" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))))))));
+        return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container-lg" }, h("div", { class: "skeleton" }, h("div", { class: "on-demand-vl" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium-1 left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium-1 right" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short left" }), h("div", { class: "skeleton-block thin wide-sm-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-md-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-sm-2 left" }), h("div", { class: "skeleton-block thin smallest left" })))), h("div", { class: "grid-medium" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))), h("div", { class: "grid-medium-2" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-9 " })))), h("div", { class: "grid-bottom-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "is-grid has-col-gap-sm" }, h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-bl" }))), h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-sm" }))))), h("div", { class: "grid-bottom-2" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-11" }))))), h("div", { class: "grid-bottom" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))))))));
       }
       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-pricing-tabs/ptc-pricing-tabs.css

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

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

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input.iti__tel-input,
-.iti input.iti__tel-input[type=text],
-.iti input.iti__tel-input[type=tel] {
+.iti input,
+.iti input[type=text],
+.iti input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,35 +2256,26 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__dropdown-content {
+.iti__country-list {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
+  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__dropdown-content--dropup {
+.iti__country-list--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
-.iti__search-input {
-  width: 100%;
-  border-width: 0;
-}
-.iti__country-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.iti--flexible-dropdown-width .iti__country-list {
-  white-space: nowrap;
-}
 @media (max-width: 500px) {
-  .iti--flexible-dropdown-width .iti__country-list {
+  .iti__country-list {
     white-space: normal;
   }
 }
@@ -2316,20 +2307,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
+.iti--allow-dropdown input,
+.iti--allow-dropdown input[type=text],
+.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
+.iti--separate-dial-code input[type=text],
+.iti--separate-dial-code input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input,
+[dir=rtl] .iti--allow-dropdown input[type=text],
+[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
+[dir=rtl] .iti--separate-dial-code input[type=text],
+[dir=rtl] .iti--separate-dial-code input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2348,12 +2339,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
   cursor: default;
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2377,26 +2368,18 @@
   cursor: pointer;
 }
 
-.iti--fullscreen-popup.iti--container {
-  background-color: rgba(0, 0, 0, 0.5);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.iti-mobile .iti--container {
+  top: 30px;
+  bottom: 30px;
+  left: 30px;
+  right: 30px;
   position: fixed;
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
-  justify-content: flex-start;
 }
-.iti--fullscreen-popup .iti__dropdown-content {
+.iti-mobile .iti__country-list {
   max-height: 100%;
-  position: relative;
+  width: 100%;
 }
-.iti--fullscreen-popup .iti__country {
+.iti-mobile .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2422,7 +2405,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3488,7 +3471,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (min-resolution: 2x) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }