@ptcwebops/ptcw-design 6.4.3-beta → 6.4.3

package/dist/collection/components/ptc-featured-list/ptc-featured-list.css

@@ -88,17 +88,14 @@ 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);
@@ -107,47 +104,38 @@ 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 {
@@ -156,30 +144,24 @@ 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 {
@@ -187,17 +169,14 @@ 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;
@@ -205,17 +184,14 @@ 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);

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

@@ -145,17 +145,14 @@ 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);
@@ -164,47 +161,38 @@ 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 {
@@ -213,30 +201,24 @@ 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 {
@@ -244,17 +226,14 @@ 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;
@@ -262,17 +241,14 @@ 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);

package/dist/collection/components/ptc-form-radio-button/ptc-form-radio-button.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class PtcFormRadioButton {
   constructor() {
     this.radioButtonOnClick = (radioButton) => {
@@ -20,6 +20,16 @@ export class PtcFormRadioButton {
     this.isChecked = false;
     this.checked = this.isChecked;
   }
+  onIsCheckedChange(newValue) {
+    this.checked = newValue;
+    const svgCircle = this.el.shadowRoot.querySelector("svg");
+    if (svgCircle) {
+      svgCircle.setAttribute("data-checked", String(this.checked));
+    }
+  }
+  componentWillLoad() {
+    this.checked = this.isChecked;
+  }
   componentDidLoad() {
     const svgCircle = this.el.shadowRoot.querySelector("svg");
     svgCircle.setAttribute("data-checked", String(this.checked));
@@ -91,7 +101,7 @@ export class PtcFormRadioButton {
           "text": ""
         },
         "attribute": "is-checked",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       }
     };
@@ -120,4 +130,10 @@ export class PtcFormRadioButton {
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isChecked",
+        "methodName": "onIsCheckedChange"
+      }];
+  }
 }

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

@@ -128,80 +128,4 @@ 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,95 +11,26 @@ 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();
-    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 = "";
-    }
+    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)));
   }
   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
@@ -137,8 +68,6 @@ export class PtcImg {
             const image = entry.target;
             image.classList.remove("lazy-bg");
             bgObserver.unobserve(image);
-            this.isInViewport = true;
-            this.upgradeImageQuality();
           }
         });
       });
@@ -152,21 +81,12 @@ 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
     };
   }
@@ -378,54 +298,9 @@ 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 [{