@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class PtcIconMinimize {
   constructor() {
     this.handleKeyDown = (e) => {
@@ -18,7 +18,7 @@ export class PtcIconMinimize {
     this.timeStamp = Date.now().toString();
   }
   componentDidLoad() {
-    let content = this.host.shadowRoot.querySelector('.content');
+    let content = this.host.shadowRoot.querySelector(".content");
     if (this.opened && !content.style.maxHeight) {
       content.style.maxHeight = content.scrollHeight + "px";
     }
@@ -39,21 +39,29 @@ export class PtcIconMinimize {
     if (checkList) {
       var checkBoxesList = checkList.querySelectorAll("ptc-checkbox");
       if (checkBoxesList) {
-        checkBoxesList.forEach(item => {
+        checkBoxesList.forEach((item) => {
           if (item.shadowRoot.querySelector("label")) {
-            item.shadowRoot.querySelector("label").tabIndex = this.opened ? 0 : -1;
+            item.shadowRoot.querySelector("label").tabIndex = this
+              .opened
+              ? 0
+              : -1;
           }
         });
       }
       var checkBoxesIconList = checkList.querySelectorAll("ptc-icon-minimize");
       if (checkBoxesIconList) {
-        checkBoxesIconList.forEach(item => {
+        checkBoxesIconList.forEach((item) => {
           if (item.shadowRoot.querySelector(".icon")) {
-            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
-              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            this.opened
+              ? item.shadowRoot
+                .querySelector(".icon")
+                .setAttribute("tabindex", "0")
+              : item.shadowRoot
+                .querySelector(".icon")
+                .setAttribute("tabindex", "-1");
             var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
             if (childrenCheckBoxesList) {
-              childrenCheckBoxesList.forEach(childitem => {
+              childrenCheckBoxesList.forEach((childitem) => {
                 if (childitem.shadowRoot.querySelector("label")) {
                   childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
                 }
@@ -69,21 +77,29 @@ export class PtcIconMinimize {
     if (checkListModal) {
       var checkBoxesListModal = checkListModal.querySelectorAll("ptc-checkbox");
       if (checkBoxesListModal) {
-        checkBoxesListModal.forEach(item => {
+        checkBoxesListModal.forEach((item) => {
           if (item.shadowRoot.querySelector("label")) {
-            item.shadowRoot.querySelector("label").tabIndex = this.opened ? 0 : -1;
+            item.shadowRoot.querySelector("label").tabIndex = this
+              .opened
+              ? 0
+              : -1;
           }
         });
       }
       var checkBoxesModelIconList = checkListModal.querySelectorAll("ptc-icon-minimize");
       if (checkBoxesModelIconList) {
-        checkBoxesModelIconList.forEach(item => {
+        checkBoxesModelIconList.forEach((item) => {
           if (item.shadowRoot.querySelector(".icon")) {
-            this.opened ? item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "0") :
-              item.shadowRoot.querySelector(".icon").setAttribute("tabindex", "-1");
+            this.opened
+              ? item.shadowRoot
+                .querySelector(".icon")
+                .setAttribute("tabindex", "0")
+              : item.shadowRoot
+                .querySelector(".icon")
+                .setAttribute("tabindex", "-1");
             var childrenCheckBoxesList = item.querySelectorAll("ptc-checkbox");
             if (childrenCheckBoxesList) {
-              childrenCheckBoxesList.forEach(childitem => {
+              childrenCheckBoxesList.forEach((childitem) => {
                 if (childitem.shadowRoot.querySelector("label")) {
                   childitem.shadowRoot.querySelector("label").tabIndex = item.opened ? 0 : -1;
                 }
@@ -96,24 +112,27 @@ export class PtcIconMinimize {
   }
   getScrollHeight() {
     let result = undefined;
-    let content = this.host.shadowRoot.querySelector('.content');
+    let content = this.host.shadowRoot.querySelector(".content");
     if (this.opened && content) {
-      result = { 'max-height': content.scrollHeight + "px" };
+      result = { "max-height": content.scrollHeight + "px" };
       if (this.listType == "checkbox") {
-        let parentItem = this.upTo(this.host, 'ptc-icon-minimize');
+        let parentItem = this.upTo(this.host, "ptc-icon-minimize");
         if (parentItem) {
-          let parentContent = parentItem.shadowRoot.querySelector('.content');
+          let parentContent = parentItem.shadowRoot.querySelector(".content");
           if (parentContent) {
-            parentContent.style.maxHeight = parentContent.scrollHeight + content.scrollHeight + "px";
+            parentContent.style.maxHeight =
+              parentContent.scrollHeight +
+                content.scrollHeight +
+                "px";
           }
         }
       }
     }
     else if (this.opened) {
-      result = { 'max-height': 350 + "px" };
+      result = { "max-height": 350 + "px" };
     }
     else if (content && content.style.maxHeight) {
-      content.style.removeProperty('max-height');
+      content.style.removeProperty("max-height");
     }
     return result;
   }
@@ -125,7 +144,7 @@ export class PtcIconMinimize {
         return el;
       }
     }
-    // Many DOM methods return null if they don't 
+    // Many DOM methods return null if they don't
     // find the element they are searching for
     // It would be OK to omit the following and just
     // return undefined
@@ -136,12 +155,8 @@ export class PtcIconMinimize {
   }
   render() {
     let scrollHeight = this.getScrollHeight();
-    let icon = this.opened ? 'minus' : 'plus';
-    return (h("div", { class: 'ptc-icon-minimize' }, this.listType == "default" ?
-      h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
-      : this.listType == "checkbox" ?
-        h("div", { class: "header checkbox-icon" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading, tabIndex: this.tabIndexValue }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))
-        : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
+    let icon = this.opened ? "minus" : "plus";
+    return (h("div", { class: "ptc-icon-minimize" }, this.listType == "default" ? (h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))) : this.listType == "checkbox" ? (h("div", { class: "header checkbox-icon" }, h("div", { class: "title" }, h("ptc-checkbox", { checked: "unchecked", "data-refine": this.dataRefineValue, "input-name": "", value: this.heading, tabIndex: this.tabIndexValue }, this.heading)), h("div", { class: "icon mf-listen", id: this.trackerId, onClick: () => this.dropdownToggle(), onKeyDown: this.handleKeyDown, tabIndex: this.tabIndexValue }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon })))) : null, h("div", { class: "content", style: scrollHeight }, h("slot", null))));
   }
   static get is() { return "ptc-icon-minimize"; }
   static get encapsulation() { return "shadow"; }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,17 +1,19 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcImageDownloadStrip {
   constructor() {
     this.downloadUrl = undefined;
     this.trackerId = undefined;
   }
   render() {
-    return (h(Host, null, h("slot", null), h("div", { class: "strip mf-listen" }, h("a", { class: "dl-btn", href: "javascript:void()", onClick: () => { this.openModal(); }, tabindex: "0" }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" }))), h("ptc-modal", { id: "strip-download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+    return (h(Host, null, h("slot", null), h("div", { class: "strip mf-listen" }, h("a", { class: "dl-btn", href: "javascript:void()", onClick: () => {
+        this.openModal();
+      }, tabindex: "0" }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" }))), h("ptc-modal", { id: "strip-download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: "h2", "text-align": "center", "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
   }
   openModal() {
-    let modal = this.el.shadowRoot.querySelector('#strip-download-modal');
-    modal.setAttribute('show', 'true');
+    let modal = this.el.shadowRoot.querySelector("#strip-download-modal");
+    modal.setAttribute("show", "true");
     setTimeout(() => {
-      modal.setAttribute('show', 'false');
+      modal.setAttribute("show", "false");
       window.open(`${this.downloadUrl}`, "_self");
     }, 1000);
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -171,4 +175,33 @@ img {
 .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,15 +1,15 @@
-import { Host, h } from '@stencil/core';
-import { ResponsiveBgVariables } from '../../utils/interfaces';
+import { Host, h, } from "@stencil/core";
+import { ResponsiveBgVariables } from "../../utils/interfaces";
 export class PtcImg {
   constructor() {
-    this.sizeXs = '510x340';
-    this.sizeSm = '1240x496';
-    this.sizeMd = '1366x500';
-    this.sizeLg = '1920x1080';
+    this.sizeXs = "510x340";
+    this.sizeSm = "1240x496";
+    this.sizeMd = "1366x500";
+    this.sizeLg = "1920x1080";
     this.imgUrl = undefined;
-    this.imageType = 'smart-bg';
-    this.borderRadius = '';
-    this.loadMode = 'lazy-bg';
+    this.imageType = "smart-bg";
+    this.borderRadius = "";
+    this.loadMode = "lazy-bg";
     this.styles = undefined;
     this.enableLazyLoad = false;
     this.delay = 2000;
@@ -28,18 +28,20 @@ export class PtcImg {
       // 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',
+          opacity: "1",
+          transition: "opacity 0.5s ease-in-out",
         } }), h("div", { class: "medium-quality", style: {
-          opacity: '0',
-          transition: 'opacity 0.5s ease-in-out',
+          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)));
+          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)));
+      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() {
@@ -47,15 +49,15 @@ export class PtcImg {
       this.isInViewport = false;
     }
     if (this.enableLazyLoad && this.imgUrl) {
-      this.bgSrcLazy = this.getImageUrl('lq');
-      this.bgSrcMedium = this.getImageUrl('mq');
-      this.bgSrcHigh = this.getImageUrl('hq');
+      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.warn("Image URL is undefined or invalid.");
+      this.bgSrcLazy = "";
+      this.bgSrcMedium = "";
+      this.bgSrcHigh = "";
     }
   }
   componentDidLoad() {
@@ -74,25 +76,25 @@ export class PtcImg {
   }
   upgradeImageQuality() {
     if (this.isInViewport && !this.isImageUpgraded) {
-      console.log('Low-quality image is visible.');
+      console.log("Low-quality image is visible.");
       this.isImageUpgraded = true;
       setTimeout(() => {
-        const mediumLayer = this.el.querySelector('.medium-quality');
+        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.');
+          mediumLayer.style.opacity = "1";
+          console.log("Medium-quality image is now visible.");
         }
         setTimeout(() => {
-          const highLayer = this.el.querySelector('.high-quality');
+          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.');
+            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.');
+            mediumLayer.style.opacity = "0";
+            console.log("Medium-quality image is hidden.");
           }
         }, this.delay);
       }, this.delay / 2);
@@ -106,14 +108,18 @@ export class PtcImg {
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
       el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
+      elData = el.getAttribute("data-" + currentBreakpoint);
       // If the data attribute exists, set the background
       if (elData !== null) {
         el.style.backgroundImage = "url('" + elData + "')";
       }
       else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        if (typeof console == "object") {
+          console.warn("Data attribute: data-" +
+            currentBreakpoint +
+            " not found on element:\n\n" +
+            el.outerHTML +
+            "\n\n\n");
         }
       }
     }
@@ -123,20 +129,20 @@ export class PtcImg {
     if (!this.imgUrl) {
       return;
     }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+    if ("IntersectionObserver" in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll(".lazy-bg");
       let bgObserver = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove('lazy-bg');
+            image.classList.remove("lazy-bg");
             bgObserver.unobserve(image);
             this.isInViewport = true;
             this.upgradeImageQuality();
           }
         });
       });
-      lazyLoadBgs.forEach(image => {
+      lazyLoadBgs.forEach((image) => {
         bgObserver.observe(image);
       });
     }
@@ -147,7 +153,7 @@ export class PtcImg {
     }
   }
   getImageUrl(quality) {
-    if (this.imgUrl && this.imgUrl.includes('?')) {
+    if (this.imgUrl && this.imgUrl.includes("?")) {
       return `${this.imgUrl}&t=ptcjumbdesk${quality}`;
     }
     else {
@@ -160,19 +166,20 @@ export class PtcImg {
       'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      [this.enableLazyLoad ? 'ptc-img--lazy' : '']: true,
       // [this.imageZIndex] : true
     };
   }
   getCurrentBreakPoints() {
     // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
+    let doc = window.document, temp = doc.createElement("div"), env;
     // Append test node
     doc.body.appendChild(temp);
     // Loop through breakpoints
     for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
       env = ResponsiveBgVariables.envs[i];
       // Add classes
-      temp.className = 'hidden-' + env;
+      temp.className = "hidden-" + env;
       // Found breakpoint
       if (temp.offsetParent === null) {
         // Remove our test node
@@ -186,17 +193,17 @@ export class PtcImg {
     return this.getFallbackBreakpoint();
   }
   getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
+    if (window.matchMedia("(min-width: 992px)").matches) {
+      return "lg";
     }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
+    else if (window.matchMedia("(min-width: 768px)").matches) {
+      return "md";
     }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
+    else if (window.matchMedia("(min-width: 576px)").matches) {
+      return "sm";
     }
     else {
-      return 'xs';
+      return "xs";
     }
   }
   static get is() { return "ptc-img"; }
@@ -228,7 +235,7 @@ export class PtcImg {
         },
         "attribute": "size-xs",
         "reflect": false,
-        "defaultValue": "'510x340'"
+        "defaultValue": "\"510x340\""
       },
       "sizeSm": {
         "type": "string",
@@ -246,7 +253,7 @@ export class PtcImg {
         },
         "attribute": "size-sm",
         "reflect": false,
-        "defaultValue": "'1240x496'"
+        "defaultValue": "\"1240x496\""
       },
       "sizeMd": {
         "type": "string",
@@ -264,7 +271,7 @@ export class PtcImg {
         },
         "attribute": "size-md",
         "reflect": false,
-        "defaultValue": "'1366x500'"
+        "defaultValue": "\"1366x500\""
       },
       "sizeLg": {
         "type": "string",
@@ -282,7 +289,7 @@ export class PtcImg {
         },
         "attribute": "size-lg",
         "reflect": false,
-        "defaultValue": "'1920x1080'"
+        "defaultValue": "\"1920x1080\""
       },
       "imgUrl": {
         "type": "string",
@@ -305,7 +312,7 @@ export class PtcImg {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'smart-bg' | 'smart-img'",
+          "original": "\"smart-bg\" | \"smart-img\"",
           "resolved": "\"smart-bg\" | \"smart-img\"",
           "references": {}
         },
@@ -317,13 +324,13 @@ export class PtcImg {
         },
         "attribute": "image-type",
         "reflect": false,
-        "defaultValue": "'smart-bg'"
+        "defaultValue": "\"smart-bg\""
       },
       "borderRadius": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'radius-standard' | 'radius-large' | 'radius-large-top' | 'radius-standard-top' | ''",
+          "original": "| \"radius-standard\"\r\n\t\t| \"radius-large\"\r\n\t\t| \"radius-large-top\"\r\n\t\t| \"radius-standard-top\"\r\n\t\t| \"\"",
           "resolved": "\"\" | \"radius-large\" | \"radius-large-top\" | \"radius-standard\" | \"radius-standard-top\"",
           "references": {}
         },
@@ -335,13 +342,13 @@ export class PtcImg {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "loadMode": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'lazy-bg' | 'eager-bg'",
+          "original": "\"lazy-bg\" | \"eager-bg\"",
           "resolved": "\"eager-bg\" | \"lazy-bg\"",
           "references": {}
         },
@@ -353,7 +360,7 @@ export class PtcImg {
         },
         "attribute": "load-mode",
         "reflect": false,
-        "defaultValue": "'lazy-bg'"
+        "defaultValue": "\"lazy-bg\""
       },
       "styles": {
         "type": "string",

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -105,7 +109,7 @@ ptc-link, ptc-square-card,
 .tile.image .tile-content {
   border-top: 2px solid var(--color-white);
   border-bottom: 2px solid var(--color-white);
-  background: #FFF;
+  background: #fff;
   text-align: left;
   flex: 1;
   box-sizing: border-box;
@@ -192,7 +196,8 @@ ptc-link, ptc-square-card,
   position: absolute;
 }
 
-::slotted(span[slot=tile-title]), ::slotted(p[slot=tile-title]) {
+::slotted(span[slot=tile-title]),
+::slotted(p[slot=tile-title]) {
   color: var(--color-blue-07) !important;
   font-family: var(--ptc-font-latin) !important;
   font-size: var(--ptc-font-size-xx-small) !important;
@@ -201,7 +206,9 @@ ptc-link, ptc-square-card,
   margin: 0px !important;
 }
 
-::slotted(p[slot=tile-description]), ::slotted(h2[slot=tile-description]), ::slotted(h3[slot=tile-description]) {
+::slotted(p[slot=tile-description]),
+::slotted(h2[slot=tile-description]),
+::slotted(h3[slot=tile-description]) {
   color: var(--color-gray-10) !important;
   font-family: var(--ptc-font-latin) !important;
   font-size: var(--ptc-font-size-x-small) !important;
@@ -211,7 +218,8 @@ ptc-link, ptc-square-card,
   margin-bottom: 0px !important;
 }
 
-::slotted(h2[slot=tile-description]), ::slotted(h3[slot=tile-description]) {
+::slotted(h2[slot=tile-description]),
+::slotted(h3[slot=tile-description]) {
   margin-top: 0px !important;
 }