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

package/dist/collection/components/ptc-video-embed/ptc-video-embed.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-video-embed/ptc-video-embed.js

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class PtcVideoEmbed {
   constructor() {
     this.src = undefined;
     this.width = undefined;
-    this.type = 'Brightcove';
+    this.type = "Brightcove";
     this.videoLoaded = undefined;
   }
   componentWillLoad() {
@@ -13,13 +13,13 @@ export class PtcVideoEmbed {
     return this.getRenderer();
   }
   renderPreloader() {
-    return (h("div", { class: "skeleton-block" }));
+    return h("div", { class: "skeleton-block" });
   }
   renderHtmlVideoEmbed() {
-    let videoUrl = this.src || '';
+    let videoUrl = this.src || "";
     let type = "video/mp4";
-    if (videoUrl.indexOf('.') > 0) {
-      let parts = videoUrl.split('.');
+    if (videoUrl.indexOf(".") > 0) {
+      let parts = videoUrl.split(".");
       let type = parts[parts.length - 1];
       switch (type) {
         case "webm":
@@ -29,7 +29,7 @@ export class PtcVideoEmbed {
           type = 'video/ogv; codecs="theora, vorbis"';
           break;
         case "ogg":
-          type = 'video/ogg';
+          type = "video/ogg";
           break;
       }
     }
@@ -41,37 +41,37 @@ export class PtcVideoEmbed {
   renderBrightcoveVideoEmbed() {
     return (h("div", { class: "video-container", style: this.getWidth() }, h("iframe", { src: `https://players.brightcove.net/1532789042001/HknUe20R_default/index.html?videoId=${this.src}`, allowfullScreen: true, allow: "encrypted-media" })));
     /*return (
-        <div class="video-module embed-responsive embed-responsive-16by9">
-            <div>
-                <video-js data-account="1532789042001" data-player="HknUe20R" data-embed="default"
-                    controls="" data-video-id={this.src} data-playlist-id="" data-application-id=""
-                    class="vjs-fluid">
-                </video-js>
+            <div class="video-module embed-responsive embed-responsive-16by9">
+                <div>
+                    <video-js data-account="1532789042001" data-player="HknUe20R" data-embed="default"
+                        controls="" data-video-id={this.src} data-playlist-id="" data-application-id=""
+                        class="vjs-fluid">
+                    </video-js>
+                </div>
+                <script
+                    src="https://players.brightcove.net/1532789042001/HknUe20R_default/index.min.js"></script>
             </div>
-            <script
-                src="https://players.brightcove.net/1532789042001/HknUe20R_default/index.min.js"></script>
-        </div>
-    );*/
+        );*/
   }
   getWidth() {
     if (this.width) {
       return {
         maxWidth: `${this.width}px`,
-        width: '100%'
+        width: "100%",
       };
     }
     else {
       return {
-        width: '100%'
+        width: "100%",
       };
     }
   }
   getRenderer() {
     if (this.videoLoaded) {
       switch (this.type) {
-        case 'Youtube':
+        case "Youtube":
           return this.renderYoutubeVideoEmbed();
-        case 'Brightcove':
+        case "Brightcove":
           return this.renderBrightcoveVideoEmbed();
         default:
           return this.renderHtmlVideoEmbed();
@@ -133,7 +133,7 @@ export class PtcVideoEmbed {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'Brightcove' | 'Youtube' | 'HTML'",
+          "original": "\"Brightcove\" | \"Youtube\" | \"HTML\"",
           "resolved": "\"Brightcove\" | \"HTML\" | \"Youtube\"",
           "references": {}
         },
@@ -145,7 +145,7 @@ export class PtcVideoEmbed {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'Brightcove'"
+        "defaultValue": "\"Brightcove\""
       }
     };
   }

package/dist/collection/components/ptc-white-paper/ptc-white-paper.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 */
@@ -5654,39 +5658,155 @@ a.disabled {
   cursor: not-allowed;
 }
 a:focus-visible {
-  outline: 5px solid #003DD6 !important;
+  outline: 5px solid #003dd6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.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 {
+.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);
   margin: -2px;
   border: 2px solid transparent;
 }
-.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 {
+.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 {
+.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 {
   transition: none;
   color: var(--color-blue-07);
 }
-.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 {
+.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 {
   color: var(--color-blue-05);
 }
-.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 {
+.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;
   cursor: not-allowed;
 }
-.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 {
+.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);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+.light-links .podcast-cta-section a,
+.background-grey-10 .podcast-cta-section a,
+.background-plm-grey .podcast-cta-section a {
   border: 2px solid transparent;
 }
-.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+.light-links .podcast-cta-section a:focus-visible,
+.background-grey-10 .podcast-cta-section a:focus-visible,
+.background-plm-grey .podcast-cta-section a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -5750,8 +5870,9 @@ a:focus-visible {
   /* Fonts */
   --ptc-font-latin: "Raleway", sans-serif;
   --ptc-font-secondary-latin: "Rajdhani", sans-serif;
-  --ptc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --ptc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
   /* Font sizes */
   --ptc-font-size-xxx-small: 0.75rem;
   /* 12px */
@@ -5810,8 +5931,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;
@@ -5830,8 +5953,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 */
@@ -6123,7 +6248,12 @@ blockquote p {
   font-size: var(--ptc-font-size-small);
   line-height: var(--ptc-line-height-p);
 }
-:host .sub-heading h1, :host .sub-heading h2, :host .sub-heading h3, :host .sub-heading h4, :host .sub-heading h5, :host .sub-heading h6,
+:host .sub-heading h1,
+:host .sub-heading h2,
+:host .sub-heading h3,
+:host .sub-heading h4,
+:host .sub-heading h5,
+:host .sub-heading h6,
 :host .wp-component h1,
 :host .wp-component h2,
 :host .wp-component h3,

package/dist/collection/components/ptc-white-paper/ptc-white-paper.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from "@stencil/core";
 export class PtcWhitePaper {
   constructor() {
     this.items = undefined;
@@ -28,7 +28,8 @@ export class PtcWhitePaper {
       window.scrollTo(0, 0);
       if (newPage == 2) {
         let modalForm = document.querySelector("#modal-form");
-        modalForm.focusBackElement = this.el.shadowRoot.querySelectorAll('.pagination button')[2];
+        modalForm.focusBackElement =
+          this.el.shadowRoot.querySelectorAll(".pagination button")[2];
         if (modalForm) {
           modalForm.setAttribute("show", "true");
           setTimeout(() => {
@@ -88,9 +89,19 @@ export class PtcWhitePaper {
       var _a, _b;
       let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
       let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
-      return h("div", { key: i }, (heading && heading.innerText && ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== '') ? (this.currentPage == 1
-        ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))
-        : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : "", (subHeading && subHeading.innerText && ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== '') ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i));
+      return (h("div", { key: i }, heading &&
+        heading.innerText &&
+        ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== "" ? (this.currentPage == 1 ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading
+          ? "dotted"
+          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" }))) : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading
+          ? "dotted"
+          : "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : (""), subHeading &&
+        subHeading.innerText &&
+        ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== "" ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : (""), comp.componentType ===
+        "two-column-with-text-media" &&
+        this.renderTwoColumnText(comp, i), comp.componentType === "fullspan-media" &&
+        this.renderfullspanMedia(comp, i), comp.componentType === "fullspan-text" &&
+        this.renderFullspanText(comp, i)));
     })));
   }
   renderTwoColumnText(_, index) {
@@ -107,9 +118,9 @@ export class PtcWhitePaper {
     const pageNumber = this.currentPage;
     const componentNumber = index + 1;
     const classes = {
-      'wp-component': true,
-      'wp-fullspan-text': true,
-      'text-center': comp.isCenterText,
+      "wp-component": true,
+      "wp-fullspan-text": true,
+      "text-center": comp.isCenterText,
     };
     return (h("div", { class: classes, key: index }, h("div", { class: "" }, h("slot", { name: `main-content-page${pageNumber}-comp${componentNumber}` })), h("div", { class: "" }, h("slot", { name: `main-content-multi-line-page${pageNumber}-comp${componentNumber}` })), comp.mainContentChart && (h("div", { class: "" }, h("ptc-spacer", { size: "large" }), h("object", { id: "", type: "text/html", width: "100%", height: comp.mainContentChartHeight, "data-dw-widget": "Edge", data: comp.mainContentChart, tabindex: "-1" }), h("ptc-spacer", { size: "large" })))));
   }
@@ -117,7 +128,9 @@ export class PtcWhitePaper {
     const startIndex = (this.currentPage - 1) * this.itemsPerPage;
     const endIndex = startIndex + this.itemsPerPage;
     const currentItems = JSON.parse(this.items).slice(startIndex, endIndex);
-    return (h(Host, null, h("div", { class: "hero-image" }, h("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h("div", { class: "ptc-container " }, h("div", { class: "content-container" }, h("div", { class: "pagination-wrap" }, h("div", { class: "pagination" }, h("button", { class: "mf-listen", id: "prevPageBtnID", onClick: () => this.handlePrevPage(), onKeyPress: () => this.handlePrevPage(), tabIndex: 0, disabled: this.currentPage === 1 }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_left_mini" }, h("path", { d: "M12 12.833L8.304 9 12 5.167 10.821 4 6 9l4.821 5L12 12.833z", class: "icon_chevron_left" }))))), this.renderPaginationButtons(), h("button", { class: "mf-listen", id: "nextPageBtnID", onClick: () => this.handleNextPage(), onKeyPress: () => this.handleNextPage(), tabIndex: 0, disabled: this.currentPage === this.totalPages }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_right_mini" }, h("path", { d: "M6 5.167L9.696 9 6 12.833 7.179 14 12 9 7.179 4 6 5.167z", class: "icon_chevron_right" })))))), h("div", { class: "mf-listen dl-btn-wrapper", id: "downloadBtnID" }, h("a", { class: "dl-btn", tabindex: 0, onKeyPress: (e) => this.downloadCtaClicked.emit(e), onClick: (e) => { this.downloadCtaClicked.emit(e); } }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" })))), h("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
+    return (h(Host, null, h("div", { class: "hero-image" }, h("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h("div", { class: "ptc-container " }, h("div", { class: "content-container" }, h("div", { class: "pagination-wrap" }, h("div", { class: "pagination" }, h("button", { class: "mf-listen", id: "prevPageBtnID", onClick: () => this.handlePrevPage(), onKeyPress: () => this.handlePrevPage(), tabIndex: 0, disabled: this.currentPage === 1 }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_left_mini" }, h("path", { d: "M12 12.833L8.304 9 12 5.167 10.821 4 6 9l4.821 5L12 12.833z", class: "icon_chevron_left" }))))), this.renderPaginationButtons(), h("button", { class: "mf-listen", id: "nextPageBtnID", onClick: () => this.handleNextPage(), onKeyPress: () => this.handleNextPage(), tabIndex: 0, disabled: this.currentPage === this.totalPages }, h("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h("g", { class: "icon_chevron_right_mini" }, h("path", { d: "M6 5.167L9.696 9 6 12.833 7.179 14 12 9 7.179 4 6 5.167z", class: "icon_chevron_right" })))))), h("div", { class: "mf-listen dl-btn-wrapper", id: "downloadBtnID" }, h("a", { class: "dl-btn", tabindex: 0, onKeyPress: (e) => this.downloadCtaClicked.emit(e), onClick: (e) => {
+        this.downloadCtaClicked.emit(e);
+      } }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" })))), h("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
   }
   static get is() { return "ptc-white-paper"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.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/subnav/ptc-nav-link/ptc-nav-link.js

@@ -1,36 +1,36 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class PtcNavLink {
   constructor() {
     this.href = undefined;
     this.isOutsideLink = false;
-    this.titleText = '';
+    this.titleText = "";
     this.trackerId = undefined;
   }
   handleClick(event) {
     // Prevent the event from propagating to the underlying <a> element
     event.stopPropagation();
     // Check if the href starts with #
-    if (this.href && this.href.startsWith('#')) {
+    if (this.href && this.href.startsWith("#")) {
       // Find the corresponding section
       const section = document.querySelector(this.href);
       section.scrollIntoView({
-        behavior: 'smooth',
+        behavior: "smooth",
       });
       this.navLinkClicked.emit();
     }
   }
   trimString(inputString, maxLength) {
     if (inputString.length > maxLength) {
-      return inputString.slice(0, maxLength) + '...';
+      return inputString.slice(0, maxLength) + "...";
     }
     else {
       return inputString;
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "tracker-div mf-listen" }, h("a", { id: this.trackerId, href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
+    return (h(Host, null, h("div", { class: "tracker-div mf-listen" }, h("a", { id: this.trackerId, href: this.href, target: this.isOutsideLink ? "_blank" : "_self", title: this.titleText, onClick: (event) => {
         this.handleClick(event);
-      } }, h("slot", null), !this.href.startsWith('#') && (h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))))));
+      } }, h("slot", null), !this.href.startsWith("#") && (h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))))));
   }
   static get is() { return "ptc-nav-link"; }
   static get encapsulation() { return "shadow"; }
@@ -97,7 +97,7 @@ export class PtcNavLink {
         },
         "attribute": "title-text",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "trackerId": {
         "type": "string",

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.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/subnav/ptc-nav-slider/ptc-nav-slider.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcNavSlider {
   constructor() {
     this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
@@ -9,32 +9,40 @@ export class PtcNavSlider {
     // use the ID to select elements within the component's shadow root
     this.updateSlider(this);
     const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
-    const boxWrap = shadowRoot.querySelector('.box-wrap');
-    boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
+    const boxWrap = shadowRoot.querySelector(".box-wrap");
+    boxWrap.addEventListener("scroll", this.updateSlider.bind(this));
     setTimeout(() => {
       this.updateSlider(this);
     }, 3100);
   }
   handledropdownClickEvent(element) {
-    const sliderId = element.target.querySelector('.nav-slider').id;
-    const boxWrap = element.target.querySelector('.nav-slider').shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
-    let notDropdown = element.target.tagName.toLowerCase() != 'ptc-nav-submenu';
+    const sliderId = element.target.querySelector(".nav-slider").id;
+    const boxWrap = element.target
+      .querySelector(".nav-slider")
+      .shadowRoot.querySelector(".box-wrap");
+    const prevBtn = document
+      .querySelector(`#${sliderId}`)
+      .shadowRoot.querySelector("#prevBtn");
+    const nextBtn = document
+      .querySelector(`#${sliderId}`)
+      .shadowRoot.querySelector("#nextBtn");
+    let notDropdown = element.target.tagName.toLowerCase() != "ptc-nav-submenu";
     this.updateArrows(boxWrap, prevBtn, nextBtn, notDropdown);
   }
   updateArrows(boxWrap, prevBtn, nextBtn, isNotDropdown) {
-    if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+    if (boxWrap.offsetWidth == boxWrap.scrollWidth) {
       prevBtn.style.visibility = "hidden";
       nextBtn.style.visibility = "hidden";
       if (isNotDropdown)
-        prevBtn.closest('.btn-wrap-left').style.display = 'none';
+        prevBtn.closest(".btn-wrap-left").style.display = "none";
     }
-    else if ((boxWrap.scrollLeft + boxWrap.offsetWidth) <= boxWrap.scrollWidth) {
+    else if (boxWrap.scrollLeft + boxWrap.offsetWidth <=
+      boxWrap.scrollWidth) {
       if (isNotDropdown)
-        prevBtn.closest('.btn-wrap-left').style.display = '';
+        prevBtn.closest(".btn-wrap-left").style.display = "";
       if (boxWrap.scrollLeft > 0) {
-        if ((boxWrap.scrollLeft + boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+        if (boxWrap.scrollLeft + boxWrap.offsetWidth ==
+          boxWrap.scrollWidth) {
           nextBtn.style.visibility = "hidden";
           prevBtn.style.visibility = "visible";
         }
@@ -54,11 +62,17 @@ export class PtcNavSlider {
     }
   }
   updateSlider(event) {
-    const boxWrap = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#nextBtn');
+    const boxWrap = document
+      .querySelector(`#${this.sliderId}`)
+      .shadowRoot.querySelector(".box-wrap");
+    const prevBtn = document
+      .querySelector(`#${this.sliderId}`)
+      .shadowRoot.querySelector("#prevBtn");
+    const nextBtn = document
+      .querySelector(`#${this.sliderId}`)
+      .shadowRoot.querySelector("#nextBtn");
     if (event !== undefined && event.target) {
-      let notDropdown = !event.target.closest('.dropdown-content');
+      let notDropdown = !event.target.closest(".dropdown-content");
       this.updateArrows(event.target, prevBtn, nextBtn, notDropdown);
     }
     else {
@@ -67,14 +81,18 @@ export class PtcNavSlider {
   }
   leftScroll(ele) {
     const sliderId = ele.sliderId;
-    const left = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    const left = document
+      .querySelector(`#${sliderId}`)
+      .shadowRoot.querySelector(`.box-wrap`);
     if (left.scrollLeft > 0) {
       left.scrollBy(-200, 0);
     }
   }
   rightScroll(ele) {
     const sliderId = ele.sliderId;
-    const right = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    const right = document
+      .querySelector(`#${sliderId}`)
+      .shadowRoot.querySelector(`.box-wrap`);
     if (right.scrollLeft + right.offsetWidth < right.scrollWidth) {
       right.scrollBy(200, 0);
     }