@ptcwebops/ptcw-design 6.4.18 → 6.4.19-beta

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -145,14 +145,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -161,38 +164,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -201,24 +213,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -226,14 +244,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -241,14 +262,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -268,10 +292,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -252,7 +252,8 @@ ptc-footer {
   border-radius: 4px 4px 0px 0px;
   border-bottom: 2px solid var(--color-blue-07);
   background: transparent;
-  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+          backdrop-filter: blur(12px);
   padding: 24px;
   word-wrap: normal;
   color: var(--color-white);

package/dist/collection/components/ptc-image-download-strip/ptc-image-download-strip.css

@@ -66,7 +66,8 @@ ptc-footer {
 :host .strip {
   position: absolute;
   bottom: 0;
-  backdrop-filter: blur(15.2px);
+  -webkit-backdrop-filter: blur(15.2px);
+          backdrop-filter: blur(15.2px);
   background: white;
   background: rgba(255, 255, 255, 0.3);
   width: 100%;

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

@@ -128,4 +128,80 @@ ptc-footer {
   .hidden-lg {
     display: none !important;
   }
+}
+.lazy-bg {
+  background-image: none !important;
+  background-color: var(--color-gray-03);
+}
+
+.ptc-img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.low-quality,
+.medium-quality,
+.high-quality {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.low-quality {
+  z-index: 1;
+}
+
+.medium-quality {
+  z-index: 2;
+  opacity: 0;
+}
+
+.high-quality {
+  z-index: 3;
+  opacity: 0;
+}
+
+.ptc-img--lazy .lazy-bg {
+  background-image: none !important;
+  background-color: var(--color-gray-03);
+}
+.ptc-img--lazy .low-quality,
+.ptc-img--lazy .medium-quality,
+.ptc-img--lazy .high-quality {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  transition: opacity 0.5s ease-in-out;
+}
+.ptc-img--lazy .low-quality {
+  z-index: 1;
+}
+.ptc-img--lazy .medium-quality {
+  z-index: 2;
+  opacity: 0;
+}
+.ptc-img--lazy .high-quality {
+  z-index: 3;
+  opacity: 0;
 }

package/dist/collection/components/ptc-img/ptc-img.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ResponsiveBgVariables } from "../../utils/interfaces";
 export class PtcImg {
   constructor() {
@@ -11,26 +11,95 @@ export class PtcImg {
     this.borderRadius = "";
     this.loadMode = "lazy-bg";
     this.styles = undefined;
+    this.enableLazyLoad = false;
+    this.delay = 2000;
+    this.bgSrcLazy = undefined;
+    this.bgSrcMedium = undefined;
+    this.bgSrcHigh = undefined;
+    this.isInViewport = false;
+    this.isImageUpgraded = false;
   }
-  /**
-   * Image Z Index
-   */
-  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
   WindowResize() {
     this.setResponsiveBg();
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": `${this.imgUrl}`, "data-sm": `${this.imgUrl}`, "data-md": `${this.imgUrl}`, "data-lg": `${this.imgUrl}` }, this.imageType == "smart-bg" ? h("slot", null) : null)));
+    if (this.enableLazyLoad && this.imgUrl) {
+      // Lazy loading functionality
+      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h("div", { class: "low-quality", style: {
+          backgroundImage: `url(${this.bgSrcLazy})`,
+          opacity: "1",
+          transition: "opacity 0.5s ease-in-out",
+        } }), h("div", { class: "medium-quality", style: {
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
+        } }), h("div", { class: "high-quality", style: {
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
+        } }), this.imageType == "smart-bg" ? h("slot", null) : null)));
+    }
+    else {
+      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": this.bgSrcLazy || this.imgUrl, "data-sm": this.bgSrcLazy || this.imgUrl, "data-md": this.bgSrcLazy || this.imgUrl, "data-lg": this.bgSrcLazy || this.imgUrl, style: {
+          backgroundImage: `url(${this.bgSrcLazy || this.imgUrl})`,
+        } }, this.imageType == "smart-bg" ? h("slot", null) : null)));
+    }
+  }
+  componentWillLoad() {
+    if (this.enableLazyLoad) {
+      this.isInViewport = false;
+    }
+    if (this.enableLazyLoad && this.imgUrl) {
+      this.bgSrcLazy = this.getImageUrl("lq");
+      this.bgSrcMedium = this.getImageUrl("mq");
+      this.bgSrcHigh = this.getImageUrl("hq");
+    }
+    else {
+      console.warn("Image URL is undefined or invalid.");
+      this.bgSrcLazy = "";
+      this.bgSrcMedium = "";
+      this.bgSrcHigh = "";
+    }
   }
   componentDidLoad() {
     this.addIntersectionObserver();
     this.setResponsiveBg();
+    if (this.enableLazyLoad && this.imgUrl) {
+      const that = this;
+      setTimeout(() => {
+        that.upgradeImageQuality();
+      }, that.delay);
+    }
   }
   componentWillUpdate() {
     this.addIntersectionObserver();
     this.setResponsiveBg();
   }
+  upgradeImageQuality() {
+    if (this.isInViewport && !this.isImageUpgraded) {
+      console.log("Low-quality image is visible.");
+      this.isImageUpgraded = true;
+      setTimeout(() => {
+        const mediumLayer = this.el.querySelector(".medium-quality");
+        if (mediumLayer) {
+          mediumLayer.style.backgroundImage = `url(${this.bgSrcMedium})`;
+          mediumLayer.style.opacity = "1";
+          console.log("Medium-quality image is now visible.");
+        }
+        setTimeout(() => {
+          const highLayer = this.el.querySelector(".high-quality");
+          if (highLayer) {
+            highLayer.style.backgroundImage = `url(${this.bgSrcHigh})`;
+            highLayer.style.opacity = "1";
+            console.log("High-quality image is now visible.");
+          }
+          if (mediumLayer) {
+            mediumLayer.style.opacity = "0";
+            console.log("Medium-quality image is hidden.");
+          }
+        }, this.delay);
+      }, this.delay / 2);
+    }
+  }
   //responsive image
   setResponsiveBg() {
     // Define local variables
@@ -68,6 +137,8 @@ export class PtcImg {
             const image = entry.target;
             image.classList.remove("lazy-bg");
             bgObserver.unobserve(image);
+            this.isInViewport = true;
+            this.upgradeImageQuality();
           }
         });
       });
@@ -81,12 +152,21 @@ export class PtcImg {
       // }, 5000);
     }
   }
+  getImageUrl(quality) {
+    if (this.imgUrl && this.imgUrl.includes("?")) {
+      return `${this.imgUrl}&t=ptcjumbdesk${quality}`;
+    }
+    else {
+      return `${this.imgUrl}?t=ptcjumbdesk${quality}`;
+    }
+  }
   getCssClassMap() {
     return {
       [this.imageType]: true,
-      "ptc-img": true,
+      'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      [this.enableLazyLoad ? 'ptc-img--lazy' : '']: true,
       // [this.imageZIndex] : true
     };
   }
@@ -298,9 +378,54 @@ export class PtcImg {
         },
         "attribute": "styles",
         "reflect": false
+      },
+      "enableLazyLoad": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) enable lazy loading"
+        },
+        "attribute": "enable-lazy-load",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) setTimeout delay fro Lazy loading"
+        },
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "2000"
       }
     };
   }
+  static get states() {
+    return {
+      "bgSrcLazy": {},
+      "bgSrcMedium": {},
+      "bgSrcHigh": {},
+      "isInViewport": {},
+      "isImageUpgraded": {}
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -1220,14 +1220,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -1236,38 +1239,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -1276,24 +1288,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -1301,14 +1319,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -1316,14 +1337,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -1343,10 +1367,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;
@@ -1808,8 +1828,7 @@ ptc-info-tile:focus-visible {
   outline-offset: 2px;
 }
 
-:host(.light-video-jumbotron) .bg-overlay,
-:host(.light-jumbotron) .bg-overlay {
+:host(.light-video-jumbotron),
+:host(.light-jumbotron) {
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  box-sizing: border-box;
 }

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js

@@ -30,6 +30,7 @@ export class PtcJumbotron {
     this.hasCountdown = false;
     this.logo = "";
     this.styles = undefined;
+    this.enableLazy = false;
     this.defer = undefined;
     this.hasCtaSlot = undefined;
   }
@@ -68,10 +69,10 @@ export class PtcJumbotron {
         break;
       case "dark":
       case "light":
-        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
+        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
         break;
       default:
-        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }));
+        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }));
     }
     return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: {
         parent: true,
@@ -92,14 +93,19 @@ export class PtcJumbotron {
       !this.isHomepage && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === "text" &&
         this.isMobile
         ? "x-small"
-        : "small", "font-weight": "w-4", "para-margin": `${this.jumbotronType === "text" || this.jumbotronType === "blog" ? "margin-flush" : "margin-bottom-6"}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === "text"
+        : "small", "font-weight": "w-4", "para-margin": `${this.jumbotronType === "text" ||
+        this.jumbotronType === "blog"
+        ? "margin-flush"
+        : "margin-bottom-6"}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === "text"
         ? "center"
         : "left", "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: "0" } }), h("p", { style: { margin: "0" } }, h("slot", { name: "blog-date" })), this.jumbotronType === "blog" && (h("div", null, h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this
         .blogAuthorImageAlt, src: this
         .blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this
         .blogAuthorQueryHref, target: this
         .blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this
-      .blogAuthorName))))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === "text" ? " text-adjustment" : ""}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo &&
+      .blogAuthorName))))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === "text"
+        ? " text-adjustment"
+        : ""}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo &&
       this.jumbotronType !== "png" ? (h("slot", { name: "video" })) : null, this.hasCountdown ? (h("slot", { name: "countdown" })) : null, this.jumbotronType === "png" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? (h("slot", { name: "video" })) : null))) : null, this.jumbotronType === "gif" ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === "blog" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
   }
   getCssClassMap() {
@@ -623,6 +629,24 @@ export class PtcJumbotron {
         "attribute": "styles",
         "reflect": false
       },
+      "enableLazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "(optional) to enable lazy loading"
+        },
+        "attribute": "enable-lazy",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "defer": {
         "type": "boolean",
         "mutable": false,