@ptcwebops/ptcw-design 6.4.9 → 6.4.10-beta

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

@@ -77,6 +77,7 @@ ptc-footer {
 :host .strip .dl-btn {
   width: 54px;
   height: 40px;
+  background-image: -o-linear-gradient(162deg, #74c34d, #00783e);
   background-image: linear-gradient(288deg, #74c34d, #00783e);
   border: 1px solid #fff;
   color: #fff;

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-info-tile/ptc-info-tile.css

@@ -190,8 +190,7 @@ ptc-footer {
 ::slotted(img[slot=tile-image]) {
   width: 120px !important;
   height: 100% !important;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   display: block;
   max-height: 100%;
   position: absolute;

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.css

@@ -63,7 +63,6 @@ ptc-footer {
 }
 :host .small-inline-cta-container {
   width: 100%;
-  height: -moz-max-content;
   height: max-content;
   display: grid;
   position: relative;
@@ -156,7 +155,6 @@ ptc-footer {
 }
 :host .big-inline-cta-container {
   width: 100%;
-  height: -moz-max-content;
   height: max-content;
   display: grid;
   position: relative;
@@ -339,7 +337,6 @@ ptc-footer {
     left: 0;
   }
   :host .bottom-inline-cta-container .cta-body {
-    height: -moz-max-content;
     height: max-content;
     width: 50%;
     display: block;

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

@@ -578,10 +578,6 @@ ptc-footer {
   overflow: hidden;
 }
 
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
 .u-background-white {
   background-color: var(--color-white);
 }
@@ -710,68 +706,56 @@ ptc-footer {
 }
 
 .grid-large-col-gap-md {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 992px) {
   .grid-large-col-gap-md {
-    -moz-column-gap: 3rem;
-         column-gap: 3rem;
+    column-gap: 3rem;
   }
 }
 
 .grid-large-col-gap-sm {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 768px) {
   .grid-large-col-gap-sm {
-    -moz-column-gap: 3rem;
-         column-gap: 3rem;
+    column-gap: 3rem;
   }
 }
 
 .grid-x-large-col-gap-md {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 992px) {
   .grid-x-large-col-gap-md {
-    -moz-column-gap: 4rem;
-         column-gap: 4rem;
+    column-gap: 4rem;
   }
 }
 
 .grid-x-large-col-gap-sm {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 768px) {
   .grid-x-large-col-gap-sm {
-    -moz-column-gap: 4rem;
-         column-gap: 4rem;
+    column-gap: 4rem;
   }
 }
 
 .grid-medium-col-gap-md {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 992px) {
   .grid-medium-col-gap-md {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
+    column-gap: 2rem;
   }
 }
 
 .grid-medium-col-gap-sm {
-  -moz-column-gap: 0;
-       column-gap: 0;
+  column-gap: 0;
 }
 @media only screen and (min-width: 768px) {
   .grid-medium-col-gap-sm {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
+    column-gap: 2rem;
   }
 }
 
@@ -1220,14 +1204,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 +1223,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 +1272,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 +1303,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 +1321,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);
@@ -1420,7 +1428,6 @@ ptc-modal inline-form a,
   margin-top: 24px;
   display: flex;
   width: 152px;
-  height: -moz-max-content;
   height: max-content;
 }
 .logo-frame img {
@@ -1697,10 +1704,8 @@ ptc-modal inline-form a,
   width: 100%;
   height: 100%;
   border-radius: var(--ptc-border-radius-circle);
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: center;
-     object-position: center;
+  object-fit: cover;
+  object-position: center;
 }
 :host(.blog-jumbotron) .blog-author-name {
   color: inherit;
@@ -1802,9 +1807,4 @@ ptc-modal inline-form a,
 ptc-info-tile:focus-visible {
   outline: 3px solid var(--color-blue-07);
   outline-offset: 2px;
-}
-
-:host(.light-video-jumbotron),
-:host(.light-jumbotron) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }

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,

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

@@ -303,8 +303,7 @@ ptc-footer {
 }
 .nav-card-link:hover {
   color: var(--color-white);
-  -webkit-text-decoration: underline var(--color-green-06) solid 1px;
-          text-decoration: underline var(--color-green-06) solid 1px;
+  text-decoration: underline var(--color-green-06) solid 1px;
   text-underline-offset: 2px;
 }
 .nav-card-link:active {

package/dist/collection/components/ptc-media-card/ptc-media-card.css

@@ -78,8 +78,7 @@ ptc-footer {
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host video {
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   height: 100%;
   width: 100%;
   z-index: 0;
@@ -173,8 +172,7 @@ ptc-footer {
   justify-content: center;
   align-items: center;
   border-radius: 4px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   position: absolute;
   z-index: 1;
   box-shadow: var(--ptc-shadow-large);

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.css

@@ -148,8 +148,14 @@ ptc-footer {
   z-index: 1000;
   padding: 0;
   height: 60px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
   background-color: var(--color-gray-10);
 }