@ptcwebops/ptcw-design 6.2.30-beta → 6.2.31-beta

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

@@ -2899,6 +2899,261 @@ ptc-link, ptc-square-card,
   height: 26px;
 }
 
+.preloader-ppc-embedded-form {
+  background: var(--Gray-3, #BEC6CA);
+}
+.preloader-ppc-embedded-form .form-block-2 {
+  border-radius: 4px;
+  background: #FFF;
+  margin-bottom: 111px;
+  height: 533px;
+  width: 336px;
+  flex-shrink: 0;
+}
+@media only screen and (min-width: 360px) {
+  .preloader-ppc-embedded-form .form-block-2 {
+    width: 338px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .form-block-2 {
+    margin-bottom: 88px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-ppc-embedded-form .form-block-2 {
+    margin-bottom: 90px;
+  }
+}
+.preloader-ppc-embedded-form .is-grid {
+  grid-row-gap: 0px;
+}
+.preloader-ppc-embedded-form .grid-1 {
+  padding-top: 91px;
+  justify-self: center;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-ppc-embedded-form .grid-1 {
+    padding-top: 94px;
+    justify-self: normal;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .grid-1 {
+    padding-top: 94px;
+  }
+}
+@media only screen and (min-width: 360px) {
+  .preloader-ppc-embedded-form .grid-1 {
+    padding-top: 71px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton {
+  padding: 0px;
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.very-bold {
+  margin-bottom: 12px;
+  height: 40px;
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-1 {
+  width: 308px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-1 {
+    width: 354px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-1 {
+    width: 399px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-1 {
+    width: 468px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-1 {
+    width: 494px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-2 {
+  width: 263px;
+  margin-bottom: 21px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-2 {
+    width: 302px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-2 {
+    width: 341px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-2 {
+    width: 400px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-2 {
+    width: 422px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-3 {
+  width: 290px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-3 {
+    width: 333px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-3 {
+    width: 376px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-3 {
+    width: 440px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-3 {
+    width: 465px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-4 {
+  width: 312px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-4 {
+    width: 358px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-4 {
+    width: 404px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-4 {
+    width: 473px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-4 {
+    width: 500px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-5 {
+  width: 299px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-5 {
+    width: 343px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-5 {
+    width: 387px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-5 {
+    width: 453px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-5 {
+    width: 478px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-6 {
+  width: 301px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-6 {
+    width: 346px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-6 {
+    width: 391px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-6 {
+    width: 458px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-6 {
+    width: 484px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-7 {
+  width: 182px;
+  margin-bottom: 40px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-7 {
+    width: 209px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-7 {
+    width: 236px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-7 {
+    width: 276px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-7 {
+    width: 291px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.line-8 {
+  width: 91px;
+  margin-bottom: 48px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-8 {
+    width: 105px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-8 {
+    width: 118px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-8 {
+    width: 138px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-ppc-embedded-form .skeleton .skeleton-block.line-8 {
+    width: 146px;
+  }
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.thin {
+  height: 24px;
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.thinner {
+  height: 18px;
+}
+.preloader-ppc-embedded-form .skeleton .skeleton-block.block-2 {
+  height: 418px;
+  width: auto;
+  margin-top: 44px;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

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

@@ -87,6 +87,9 @@ export class PtcPreloaderSection {
       case 'resource-center': {
         return (h("div", { class: "preloader-wrapper resource-center-skeleton-preloader" }, h("div", { class: "skeleton jumbo-image-mobile" }), h("div", { class: "skeleton-jumbotron" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" }))))))), h("div", { class: 'ptc-container' }, h("div", { class: "is-grid desktop-cards" }, h("div", { class: "is-col-12-xs is-col-3-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block bold long" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12-xs is-col-9-lg" }, h("div", { class: "is-grid" }, Array.from({ length: 15 }).map(() => (h("div", { class: "is-col-6-sm is-col-4-xl skeleton-block card-block" })))))))));
       }
+      case 'ppc-embedded-form-skeleton': {
+        return (h("div", { class: "preloader-wrapper preloader-ppc-embedded-form" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid grid-1" }, h("div", { class: "is-col-12-xs is-col-12-sm is-col-10-md is-col-7-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold line-1" }), h("div", { class: "skeleton-block thin line-2" }), h("div", { class: "skeleton-block thin line-3" }), h("div", { class: "skeleton-block thin line-4" }), h("div", { class: "skeleton-block thin line-5" }), h("div", { class: "skeleton-block thin line-6" }), h("div", { class: "skeleton-block thin line-7" }), h("div", { class: "skeleton-block thin line-3" }), h("div", { class: "skeleton-block thin line-4" }), h("div", { class: "skeleton-block thin line-5" }), h("div", { class: "skeleton-block thin line-8" }))), h("div", { class: "is-col-1-lg" }), h("div", { class: "is-col-12-xs is-col-12-sm is-col-4-lg form-block-2" })))));
+      }
       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" })))))));
     }