@ptcwebops/ptcw-design 5.0.2 → 5.0.5

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

@@ -750,6 +750,313 @@ ptc-link, ptc-square-card,
   height: 72px;
 }
 
+.skeleton-blog-detail {
+  padding-bottom: 196px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail {
+    padding-bottom: 112px;
+  }
+}
+.skeleton-blog-detail .is-mobile {
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .is-mobile {
+    display: none;
+  }
+}
+.skeleton-blog-detail .is-desktop {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .is-desktop {
+    display: block;
+  }
+}
+.skeleton-blog-detail .skeleton-jumbotron {
+  padding-top: 48px;
+  padding-bottom: 60px;
+}
+.skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+  height: 168px;
+  margin-bottom: 16px;
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 216px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 332px;
+    margin-bottom: 24px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 100%;
+    margin-bottom: 0;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+}
+.skeleton-blog-detail .flex-container {
+  display: flex;
+  gap: 12px;
+}
+.skeleton-blog-detail .is-centered-vertically {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.skeleton-blog-detail .skeleton-block {
+  margin-bottom: 0;
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+}
+.skeleton-blog-detail .skeleton-block.h-xx-small {
+  height: 4px;
+}
+.skeleton-blog-detail .skeleton-block.h-x-small {
+  height: 8px;
+}
+.skeleton-blog-detail .skeleton-block.h-small {
+  height: 12px;
+}
+.skeleton-blog-detail .skeleton-block.h-medium {
+  height: 16px;
+}
+.skeleton-blog-detail .skeleton-block.h-large {
+  height: 24px;
+}
+.skeleton-blog-detail .skeleton-block.h-x-large {
+  height: 32px;
+}
+.skeleton-blog-detail .skeleton-block.h-xx-large {
+  height: 36px;
+}
+.skeleton-blog-detail .skeleton-block.h-xxx-large {
+  height: 48px;
+}
+.skeleton-blog-detail .skeleton-block.date {
+  width: 45px;
+  height: 8px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 58px;
+    height: 10px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 90px;
+    height: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 84px;
+    height: 14px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 104px;
+    height: 18px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 116px;
+    height: 20px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.author {
+  width: 50px;
+  height: 8px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 65px;
+    height: 10px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 99px;
+    height: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 84px;
+    height: 14px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 105px;
+    height: 17px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 116px;
+    height: 20px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 28px;
+    height: 28px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 44px;
+    height: 44px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 48px;
+    height: 48px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 52px;
+    height: 52px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.button-1 {
+  width: 92px;
+  height: 24px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 120px;
+    height: 30px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 184px;
+    height: 46px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 140px;
+    height: 35px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 176px;
+    height: 43px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 196px;
+    height: 48px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.button-2 {
+  width: 136px;
+  height: 24px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 176px;
+    height: 30px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 272px;
+    height: 46px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 212px;
+    height: 35px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 264px;
+    height: 43px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 292px;
+    height: 48px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.social-share {
+  width: 32px;
+  height: 32px;
+}
+.skeleton-blog-detail .skeleton-block.text-line-1 {
+  width: 93%;
+}
+.skeleton-blog-detail .skeleton-block.text-line-2 {
+  width: 95%;
+}
+.skeleton-blog-detail .skeleton-block.cta-image {
+  width: 45%;
+  height: 350px;
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  top: 200px;
+  transform: translateY(-50%);
+}
+.skeleton-blog-detail .skeleton-block.cta-body {
+  width: 80%;
+  height: 400px;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+.skeleton-blog-detail .skeleton-cta {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

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

@@ -21,6 +21,9 @@ export class PtcPreloaderSection {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-jumbotron-image" }), 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-3-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block 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" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), 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" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12 is-col-9-lg" }, h("div", { class: "sekleton" }, h("div", { class: "is-grid" }, h("div", { class: "left is-col-6" }, h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" })), h("div", { class: "right is-col-6" }, h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }))), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "is-grid" }, h("div", { class: "left is-col-6" }, h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), 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 medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block narrow" })), h("div", { class: "right is-col-6" }, h("div", { class: "skeleton-long-image" }))), h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" })))))));
       case 'case-product-page':
         return (h("div", { class: "preloader-wrapper" }, 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: "skeleton-block extra-bold" }), h("div", { class: "ptc-container section-two-col" }, h("div", { class: "skeleton-block thin short center" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-6" }, h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin", style: { 'width': '92%' } }), h("div", { class: "skeleton-block thin", style: { 'width': '87%' } }), h("div", { class: "skeleton-block thin", style: { 'width': '95%' } }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" })), h("div", { class: "is-col-6" }, h("div", { class: "skeleton-jumbotron-image" })))), h("div", { class: "ptc-container section-icon-component" }, h("div", { class: "skeleton-block thick medium center" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin wide center" }), h("div", { class: "skeleton-block thin medium center" }), 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("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: "is-grid icon-grid" }, h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), 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: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" }))))));
+      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" }))))))));
+      }
       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

@@ -1037,7 +1037,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 {
@@ -1054,7 +1054,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-social-icons/ptc-social-icons.css

@@ -70,4 +70,9 @@ ptc-link, ptc-square-card,
   align-items: center;
   border-radius: 4px;
   background-color: var(--color-gray-10);
+}
+:host div a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
 }

package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.js

@@ -18,6 +18,8 @@ export class PtcSocialIconsFooter {
     this.youkuUrl = undefined;
     this.wechatQrImageUrl = undefined;
     this.wechatQrImageAltText = undefined;
+    this.wechatImageUrl = undefined;
+    this.wechatImageAlt = undefined;
     this.instagramImageUrl = undefined;
     this.facebookImageUrl = undefined;
     this.linkedinImageUrl = undefined;
@@ -40,7 +42,7 @@ export class PtcSocialIconsFooter {
     modal.show = true;
   }
   render() {
-    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", null, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", null, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", null, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", null, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", null, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", null, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", null, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", null, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: 'WeChat', innerHTML: wechatSVG }), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
+    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", null, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", null, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", null, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", null, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", null, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", null, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", null, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", null, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
   }
   static get is() { return "ptc-social-icons-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -209,6 +211,40 @@ export class PtcSocialIconsFooter {
         "attribute": "wechat-qr-image-alt-text",
         "reflect": false
       },
+      "wechatImageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "wechat-image-url",
+        "reflect": false
+      },
+      "wechatImageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "wechat-image-alt",
+        "reflect": false
+      },
       "instagramImageUrl": {
         "type": "string",
         "mutable": false,

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

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

@@ -651,5 +651,4 @@ div.block h6 {
 }
 :host div {
   position: relative;
-  display: inline-block;
 }