@ptcwebops/ptcw-design 5.4.2 → 5.4.3

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

@@ -764,6 +764,107 @@ ptc-link, ptc-square-card,
   }
 }
 
+.skeleton-on-demand .jumbotron-section {
+  padding-top: 89px;
+  padding-bottom: 89px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-on-demand .jumbotron-section {
+    padding-bottom: 69px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-on-demand .jumbotron-section {
+    padding-bottom: 113px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .jumbotron-section {
+    padding-bottom: 117px;
+  }
+}
+.skeleton-on-demand .block .block-1 {
+  width: 316px;
+  height: 501px;
+  border-radius: 12px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-on-demand .block .block-1 {
+    width: 434px;
+    height: 501px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-on-demand .block .block-1 {
+    width: 342px;
+    height: 501px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .block .block-1 {
+    width: 445px;
+    height: 501px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-on-demand .block .block-1 {
+    width: 355px;
+    height: 664px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-on-demand .block .block-1 {
+    width: 374px;
+    height: 664px;
+  }
+}
+.skeleton-on-demand .block .block-2 {
+  border-radius: 12px;
+  display: none;
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-on-demand .block .block-2 {
+    width: 342px;
+    height: 501px;
+    display: block;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-on-demand .block .block-2 {
+    width: 445px;
+    height: 501px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-on-demand .block .block-2 {
+    width: 355px;
+    height: 664px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-on-demand .block .block-2 {
+    width: 374px;
+    height: 664px;
+  }
+}
+.skeleton-on-demand .block .block-3 {
+  border-radius: 12px;
+  display: none;
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-on-demand .block .block-3 {
+    width: 355px;
+    height: 664px;
+    display: block;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-on-demand .block .block-3 {
+    width: 374px;
+    height: 664px;
+  }
+}
+
 .section-two-col {
   padding-top: 76px;
   padding-bottom: 76px;

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

@@ -45,6 +45,9 @@ export class PtcPreloaderSection {
       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" }))))))));
       }
+      case 'on-demand-listing': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container skeleton-on-demand" }, 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" }))))));
+      }
       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-product-category/ptc-product-category.js

@@ -5,7 +5,7 @@ export class PtcProductCategory {
     this.categoryDescription = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "category-header" }, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large", "title-height": "densest" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-999", description: this.categoryTitle, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' }))), h("slot", null)));
+    return (h(Host, null, h("div", { class: "category-header" }, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large", "title-height": "densest" }, this.categoryTitle), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' }))), h("slot", null)));
   }
   static get is() { return "ptc-product-category"; }
   static get encapsulation() { return "shadow"; }