@ptcwebops/ptcw-design 6.3.60-beta → 6.3.62-beta

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

@@ -108,14 +108,11 @@ export class PtcCountdown {
     this.calculateTimeLeft();
     this.timer = window.setInterval(() => this.calculateTimeLeft(), 1000);
   }
-  shouldUse12HourFormat() {
-    if (this.displayLocale === 'en') {
-      return true;
-    }
-    else if (this.useHourFormat !== undefined) {
-      return this.useHourFormat;
-    }
-  }
+  // private shouldUse12HourFormat() : boolean {
+  //   if(this.useHourFormat !== undefined){
+  //     return this.useHourFormat
+  //   }
+  // }
   detectLocaleFromURL() {
     const url = window.location.href;
     if (url.includes('/cn/')) {
@@ -149,14 +146,14 @@ export class PtcCountdown {
     const formattedEventTime = dayjs(this.transformDate(this.eventTime))
       .utcOffset(this.getOffsetFromAbbr(this.eventTimeZone), true)
       .format('YYYY-MM-DD HH:mm');
-    const hour12 = this.shouldUse12HourFormat();
+    //const hour12 = this.shouldUse12HourFormat();
     return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, this.daysText)), h("div", { class: "hours" }, h("div", null, hours), h("span", null, this.hoursText)), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, this.minutesText)), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, this.secondsText)))) : (h("div", { class: "expired" }, `${this.expiredText} ${formattedEventTime} ${this.eventTimeZone}`)), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleDateString(this.displayLocale, {
       month: 'long',
       day: 'numeric',
       year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
-      hour12: hour12,
+      hour12: this.useHourFormat,
     }), ' ', "(", this.eventTimeZone, ")")));
   }
   static get is() { return "ptc-countdown"; }

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

@@ -2,11 +2,6 @@ import { Host, h } from '@stencil/core';
 import { ResponsiveBgVariables } from '../../utils/interfaces';
 export class PtcImg {
   constructor() {
-    /**
-     * Lazy Load Transforms array
-     **/
-    this.transformParameters = ['t=ptcjumbdesklq', 't=ptcjumbdeskmq', 't=ptcjumbdeskhq'];
-    this.transformIndex = 0;
     this.sizeXs = '510x340';
     this.sizeSm = '1240x496';
     this.sizeMd = '1366x500';
@@ -19,33 +14,54 @@ export class PtcImg {
     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.bgSrcLazy ? this.bgSrcLazy : this.imgUrl}`, "data-sm": `${this.bgSrcLazy ? this.bgSrcLazy : this.imgUrl}`, "data-md": `${this.bgSrcLazy ? this.bgSrcLazy : this.imgUrl}`, "data-lg": `${this.bgSrcLazy ? this.bgSrcLazy : 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) {
-      if (this.imgUrl && this.imgUrl.includes('?')) {
-        this.bgSrcLazy = `${this.imgUrl}&t=ptcjumbdesklq`;
-      }
-      else {
-        this.bgSrcLazy = `${this.imgUrl}?t=ptcjumbdesklq`;
-      }
+      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 = '';
     }
-    console.log(this.bgSrcLazy);
   }
   componentDidLoad() {
     this.addIntersectionObserver();
     this.setResponsiveBg();
-    if (this.enableLazyLoad) {
+    if (this.enableLazyLoad && this.imgUrl) {
       const that = this;
       setTimeout(() => {
         that.upgradeImageQuality();
@@ -57,22 +73,29 @@ export class PtcImg {
     this.setResponsiveBg();
   }
   upgradeImageQuality() {
-    const that = this;
-    that.transformIndex++;
-    if (that.transformIndex < that.transformParameters.length) {
-      if (this.imgUrl && this.imgUrl.includes('?')) {
-        this.bgSrcLazy = `${this.imgUrl}&${that.transformParameters[that.transformIndex]}`;
-      }
-      else {
-        this.bgSrcLazy = `${this.imgUrl}?${that.transformParameters[that.transformIndex]}`;
-      }
+    if (this.isInViewport && !this.isImageUpgraded) {
+      console.log('Low-quality image is visible.');
+      this.isImageUpgraded = true;
       setTimeout(() => {
-        console.log(this.bgSrcLazy);
-        that.upgradeImageQuality();
-      }, that.delay);
-    }
-    else {
-      that.bgSrcLazy = that.imgUrl;
+        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
@@ -102,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();
           }
         });
       });
@@ -121,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,
@@ -379,7 +412,11 @@ export class PtcImg {
   }
   static get states() {
     return {
-      "bgSrcLazy": {}
+      "bgSrcLazy": {},
+      "bgSrcMedium": {},
+      "bgSrcHigh": {},
+      "isInViewport": {},
+      "isImageUpgraded": {}
     };
   }
   static get elementRef() { return "el"; }

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

@@ -47,6 +47,9 @@ export class PtcJumbotron {
   componentDidLoad() {
     //this.adjustJumbotronHeight();
   }
+  componentDidUpdate() {
+    this.getContentBackground();
+  }
   render() {
     const classMap = this.getCssClassMap();
     let mediaElement;

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

@@ -3810,4 +3810,42 @@ ptc-link, ptc-square-card,
 }
 .ptc-text-field.email-signup .mdc-text-field__input::placeholder {
   font-size: var(--ptc-font-size-small);
+}
+.ptc-text-field textarea.mdc-text-field__input {
+  min-height: 56px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: var(--ptc-font-size-xx-small);
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  display: block;
+  margin: 0;
+  position: static;
+  padding-right: 8px;
+  line-height: var(--ptc-font-size-small);
+}
+.ptc-text-field .mdc-text-field--outlined {
+  height: 34px;
+  width: 273px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__trailing {
+  border-radius: 0px !important;
+}
+.ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__leading {
+  border-radius: 0px !important;
+}
+.ptc-text-field .mdc-text-field--outlined:has(textarea.mdc-text-field__input) {
+  min-height: 34px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.ptc-text-field .mdc-text-field:has(textarea.mdc-text-field__input) {
+  padding-right: 1px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }

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

@@ -249,9 +249,11 @@ export class PtcTextfield {
       h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
           ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
           this.mdcTextfield = mdcTextfield;
-        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
+        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), this.type === 'textarea' ? (h("textarea", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
           this.customInput = customInput;
-        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText }))),
+        }, id: this.fieldId, class: this.getInputClassName() }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) }))) : (h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
+          this.customInput = customInput;
+        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText })))),
       h("div", { class: `mdc-text-field-helper-line
                    ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
       /* Alert message */
@@ -520,11 +522,14 @@ export class PtcTextfield {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(input: HTMLInputElement) => string",
-          "resolved": "(input: HTMLInputElement) => string",
+          "original": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
+          "resolved": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
           "references": {
             "HTMLInputElement": {
               "location": "global"
+            },
+            "HTMLTextAreaElement": {
+              "location": "global"
             }
           }
         },