@ptcwebops/ptcw-design 6.3.59-beta → 6.3.61-beta

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

@@ -124,4 +124,51 @@ ptc-link, ptc-square-card,
   .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;
 }

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

@@ -11,26 +11,93 @@ 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: {
+          backgroundImage: `url(${this.bgSrcMedium})`,
+          opacity: '0',
+          transition: 'opacity 0.5s ease-in-out',
+        } }), h("div", { class: "high-quality", style: {
+          backgroundImage: `url(${this.bgSrcHigh})`,
+          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.opacity = '1';
+          console.log('Medium-quality image is now visible.');
+        }
+        setTimeout(() => {
+          const highLayer = this.el.querySelector('.high-quality');
+          if (highLayer) {
+            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
@@ -58,12 +125,14 @@ export class PtcImg {
     }
     if ('IntersectionObserver' in window) {
       let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
-      let bgObserver = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
+      let bgObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const image = entry.target;
             image.classList.remove('lazy-bg');
             bgObserver.unobserve(image);
+            this.isInViewport = true;
+            this.upgradeImageQuality();
           }
         });
       });
@@ -77,6 +146,14 @@ 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,
@@ -294,9 +371,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.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;
   }
@@ -46,6 +47,9 @@ export class PtcJumbotron {
   componentDidLoad() {
     //this.adjustJumbotronHeight();
   }
+  componentDidUpdate() {
+    this.getContentBackground();
+  }
   render() {
     const classMap = this.getCssClassMap();
     let mediaElement;
@@ -65,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, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), !!this.logo && h("div", { class: "logo-frame" }, h("img", { alt: "Logo", src: this.logo })), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!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' ? '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 && 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)))));
   }
@@ -591,6 +595,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/stories/ResponsiveWrapper.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Utilities/Responsive Wrapper',
+  tags: [ 'autodocs' ],
+};
+
+const Template = args => { return html `<ptc-responsive-wrapper>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</ptc-responsive-wrapper>`;}
+
+export const Example = Template.bind({});
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: `<h4>Please note: This atom is based on the content’s width</h4>`,
+    },
+  },
+};

package/dist/collection/stories/organisms/ptc/Academic Form/preview.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Academic Form'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<academic-form-test id="myForm"></academic-form-test>
+<script>
+      const myForm = document.getElementById('myForm');
+      myForm.addEventListener('formSubmit', (event) => {
+        const formData = event.detail;
+        console.olog('Form submitted: ', formData)
+      })
+    </script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();