@ptcwebops/ptcw-design 3.3.3 → 3.3.5

package/dist/custom-elements/index.js

@@ -796,7 +796,7 @@ const ListItem$2 = class extends HTMLElement$1 {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h$1(Host, { class: classMap }, this.styles && h$1("style", null, this.styles), h$1("li", null, this.linkHref ? (h$1("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { arialLabel: this.ariaLabel } : {})), h$1("slot", null))) : (h$1("slot", null)))));
+    return (h$1(Host, { class: classMap }, this.styles && h$1("style", null, this.styles), h$1("li", null, this.linkHref ? (h$1("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { 'aria-label': this.ariaLabel } : {})), h$1("slot", null))) : (h$1("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -966,6 +966,12 @@ function getSeoTagType(element, defaultTag = "span") {
   else {
     return [defaultTag, element];
   }
+}
+function seoSlotReset(element) {
+  if (element && element.children && element.children.length == 1) {
+    let firstChild = element.firstElementChild;
+    element.innerHTML = firstChild.innerHTML;
+  }
 }
 
 const myComponentCss = ":host{display:block}";
@@ -1305,7 +1311,7 @@ const PtcBackgroundVideo$1 = class extends HTMLElement$1 {
   }
   render() {
     const videoContent = this.isIframe ? (h$1("div", { class: "iframe-wrapper" }, h$1("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h$1("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (h$1(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h$1("div", { class: "play-button" }, this.paused && (h$1("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h$1("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, h$1("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h$1("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h$1("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, h$1("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h$1("div", { class: "video-overlay" }) : '', this.type == 'default' ? h$1("slot", null) : ''));
+    return (h$1(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h$1("div", { class: "play-button" }, this.paused && (h$1("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h$1("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }", "aria-label": "Video Play button" }, h$1("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h$1("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h$1("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" }, h$1("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h$1("div", { class: "video-overlay" }) : '', this.type == 'default' ? h$1("slot", null) : ''));
   }
   toggleVideoPlay(e) {
     e.preventDefault();
@@ -1454,17 +1460,36 @@ const PtcButton$1 = class extends HTMLElement$1 {
     this.size = undefined;
     this.buttonTitle = undefined;
     this.ariaLabel = '';
+    this.seoCompatibilityMode = false;
   }
   clickEventHandler() {
     this.clickEvent.emit();
   }
-  render() {
+  seoCompRender() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    const [TagType, firstChild] = getSeoTagType(this.el, Tag);
+    const html = firstChild && firstChild.innerHTML;
+    if (this.el == firstChild) {
+      this.el.innerHTML = '';
+    }
+    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1(TagType, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), h$1("span", { innerHTML: html }, h$1("slot", { name: "slot-before-text" }), h$1("slot", { name: "slot-after-text" })))));
+  }
+  standardRender() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';
     return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 }), { title: this.buttonTitle }, (this.ariaLabel !== '' ? { ariaLabel: this.ariaLabel } : {})), this.iconAnimation == 'reveal-down' ?
       h$1("span", null, h$1("div", { class: "content" }, h$1("slot", null)), h$1("div", { class: "icon-wrapper" }, h$1("div", { class: "icon" }, h$1("slot", { name: "slot-after-text" })))) :
       h$1("span", null, h$1("slot", { name: "slot-before-text" }), h$1("slot", null), h$1("slot", { name: "slot-after-text" })))));
   }
+  render() {
+    if (this.seoCompatibilityMode) {
+      return this.seoCompRender();
+    }
+    else {
+      return this.standardRender();
+    }
+  }
   getCssClassMap() {
     return {
       [this.color]: true,
@@ -1476,6 +1501,7 @@ const PtcButton$1 = class extends HTMLElement$1 {
       [this.size]: true
     };
   }
+  get el() { return this; }
   static get style() { return ptcButtonCss; }
 };
 
@@ -11812,12 +11838,41 @@ const PtcLink$1 = class extends HTMLElement$1 {
     this.fontSize = 'medium';
     this.fontWeight = undefined;
     this.linkArea = undefined;
+    this.seoCompatibilityMode = false;
     this.styles = undefined;
   }
-  render() {
+  seoCompRender() {
+    const classMap = this.getCssClassMap();
+    const [TagType, firstChild] = getSeoTagType(this.el, "a");
+    const html = firstChild && firstChild.innerHTML;
+    if (this.el == firstChild) {
+      this.el.innerHTML = '';
+    }
+    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("div", { class: classMap }, h$1(TagType, { innerHTML: html, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, h$1("slot", null)))));
+  }
+  standardRender() {
     const classMap = this.getCssClassMap();
     return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, h$1("slot", null))));
   }
+  // render() {
+  //   const classMap = this.getCssClassMap();
+  //   return (
+  //     <Host>
+  //       {this.styles && <style>{this.styles}</style>}
+  //       <a class={classMap} href={this.href} target={this.external ? '_blank' : this.target} title={this.linkTitle}>
+  //         <slot></slot>
+  //       </a>
+  //     </Host>
+  //   );
+  // }
+  render() {
+    if (this.seoCompatibilityMode) {
+      return this.seoCompRender();
+    }
+    else {
+      return this.standardRender();
+    }
+  }
   getCssClassMap() {
     const classOptions = [
       'simple',
@@ -11847,6 +11902,7 @@ const PtcLink$1 = class extends HTMLElement$1 {
       [this.fontWeight]: this.fontWeight ? true : false,
     };
   }
+  get el() { return this; }
   static get style() { return ptcLinkCss; }
 };
 
@@ -12750,9 +12806,9 @@ const PtcModalQuiz$1 = class extends HTMLElement$1 {
     const PriorityOptions = () => {
       return h$1("div", { class: "options-container" }, h$1("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, h$1("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), h$1("label", { class: "option-label", htmlFor: `1` }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: "low-level-label" })))), h$1("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, h$1("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), h$1("label", { class: "option-label", htmlFor: `2` }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: "medium-level-label" })))), h$1("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, h$1("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), h$1("label", { class: "option-label", htmlFor: `3` }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: "high-level-label" })))));
     };
-    return (h$1(Host, null, h$1("div", { class: "modal-quiz-container" }, h$1("div", null, h$1("div", null, h$1("div", { class: "modal-quiz-progress" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h$1("slot", { name: "of-text" }), " ", this.totalQuestions), h$1(ProgressDots, null)), h$1("div", { class: "modal-quiz-content" }, h$1("div", { class: "content" }, h$1("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h$1("slot", { name: `question-${this.currentQuestion}-title` })), h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: `question-${this.currentQuestion}-subtitle` })), h$1(PriorityOptions, null), h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h$1("slot", { name: this.getPriorityAnswerSlotName() }) : null), h$1("div", { class: "modal-quiz-ctas" }, h$1("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, h$1("slot", { name: "previous-ques-text" })), h$1("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
-      h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, h$1("slot", { name: "email-results-text" })) :
-      h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, h$1("slot", { name: "next-ques-text" })))), h$1("div", { class: "image" }, h$1("slot", { name: `question-${this.currentQuestion}-image` })))))), h$1("slot", { name: "script" })));
+    return (h$1(Host, null, h$1("div", { class: "modal-quiz-container" }, h$1("div", null, h$1("div", null, h$1("div", { class: "modal-quiz-progress" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h$1("slot", { name: "of-text" }), " ", this.totalQuestions), h$1(ProgressDots, null)), h$1("div", { class: "modal-quiz-content" }, h$1("div", { class: "content" }, h$1("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h$1("slot", { name: `question-${this.currentQuestion}-title` })), h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h$1("slot", { name: `question-${this.currentQuestion}-subtitle` })), h$1(PriorityOptions, null), h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h$1("slot", { name: this.getPriorityAnswerSlotName() }) : null), h$1("div", { class: "modal-quiz-ctas" }, h$1("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1), styles: "button{margin-bottom:20px;}" }, h$1("slot", { name: "previous-ques-text" })), h$1("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, h$1("slot", { name: "email-results-text" })) :
+      h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, h$1("slot", { name: "next-ques-text" })))), h$1("div", { class: "image" }, h$1("slot", { name: `question-${this.currentQuestion}-image` })))))), h$1("slot", { name: "script" })));
   }
   get el() { return this; }
   static get style() { return ptcModalQuizCss; }
@@ -13387,11 +13443,9 @@ const PtcPara$1 = class extends HTMLElement$1 {
   }
   render() {
     if (this.seoCompatibilityMode) {
-      return this.seoCompRender();
-    }
-    else {
-      return this.standardRender();
+      seoSlotReset(this.el);
     }
+    return this.standardRender();
   }
   standardRender() {
     const classMap = this.getCssClassMap();
@@ -13399,13 +13453,6 @@ const PtcPara$1 = class extends HTMLElement$1 {
     const cutOff = this.getLineCuttoff();
     return (h$1(Host, { class: `${colorClass} ${this.paraZIndex}` }, this.styles && h$1("style", null, this.styles), h$1("p", { class: classMap, part: "part-para", style: cutOff }, h$1("slot", null))));
   }
-  seoCompRender() {
-    const classMap = this.getCssClassMap();
-    const colorClass = this.addWhiteClass();
-    const cutOff = this.getLineCuttoff();
-    const [TagType, firstChild] = getSeoTagType(this.el, "p");
-    return (h$1(Host, { class: `${colorClass} ${this.paraZIndex}` }, this.styles && h$1("style", null, this.styles), h$1(TagType, { class: classMap, innerHTML: firstChild && firstChild.innerHTML, part: "part-para", style: cutOff })));
-  }
   getCssClassMap() {
     return {
       [this.fontSize]: true,
@@ -14657,7 +14704,7 @@ const PtcProgressBar$1 = class extends HTMLElement$1 {
 
 const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.12 32.76"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#cac8c8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><g class="cls-1"><path class="cls-2" d="M24,0,18,15.12h5.4L19.68,32.76H0l3.72-18L11.4,0ZM48.12,0l-6,15.12h5.4L43.8,32.76H24.12l3.72-18L35.52,0Z"/></g></g></g></g></svg>`;
 
-const ptcQuoteCss = ":host{display:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}:host(.value-led-quote){margin-bottom:48px}:host(.value-led-quote) blockquote{margin:0;border-left:7px solid var(--color-green-07);padding-left:32px}@media only screen and (min-width: 480px){:host(.value-led-quote) blockquote{margin:0 0 0 40px}}@media only screen and (min-width: 992px){:host(.value-led-quote) blockquote{margin:8px 0 8px 48px}}:host(.value-led-quote) blockquote p,:host(.value-led-quote) blockquote span{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}:host(.value-led-quote) blockquote .quote-name{font-weight:500}";
+const ptcQuoteCss = ":host{display:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}:host(.value-led-quote){margin-bottom:32px}@media only screen and (min-width: 480px){:host(.value-led-quote){margin-bottom:48px}}:host(.value-led-quote) blockquote{margin:8px 0 8px 0;border-left:7px solid var(--color-green-07);padding-left:32px}@media only screen and (min-width: 480px){:host(.value-led-quote) blockquote{margin:16px 40px 0 40px}}@media only screen and (min-width: 992px){:host(.value-led-quote) blockquote{margin:24px 48px 8px 48px}}@media only screen and (min-width: 1440px){:host(.value-led-quote) blockquote{margin:8px 48px 8px 48px}}:host(.value-led-quote) blockquote p,:host(.value-led-quote) blockquote span{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}:host(.value-led-quote) blockquote .quote-name{font-weight:500}";
 
 const PtcQuote$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25570,7 +25617,7 @@ const PtcTwoColumnMedia$1 = class extends HTMLElement$1 {
   static get style() { return ptcTwoColumnMediaCss; }
 };
 
-const ptcValueLedCardCss = ":host{display:block;padding:32px;border-radius:var(--ptc-border-radius-standard);border:1px solid var(--color-gray-02);margin-bottom:16px}@media only screen and (min-width: 768px){:host{display:inline-flex;align-items:flex-start;gap:24px}}:host ptc-picture{max-width:200px;min-width:150px;margin-bottom:24px}@media only screen and (min-width: 480px){:host ptc-picture{min-width:200px}}@media only screen and (min-width: 768px){:host ptc-picture{margin-bottom:0}}:host .card-content .tag{display:block;margin-bottom:8px;font-size:14px;font-weight:600;line-height:1.5}";
+const ptcValueLedCardCss = ":host{display:block;padding:32px;border-radius:var(--ptc-border-radius-standard);border:1px solid var(--color-gray-02);margin-bottom:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host{display:inline-flex;align-items:flex-start;gap:var(--ptc-layout-spacing-03)}}:host ptc-picture{max-width:200px;min-width:150px;margin-bottom:var(--ptc-element-spacing-06)}@media only screen and (min-width: 480px){:host ptc-picture{min-width:200px}}@media only screen and (min-width: 768px){:host ptc-picture{margin-bottom:0}}:host .card-content .tag{display:block;margin-bottom:var(--ptc-element-spacing-02);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-p)}";
 
 const PtcValueLedCard$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25586,7 +25633,7 @@ const PtcValueLedCard$1 = class extends HTMLElement$1 {
   static get style() { return ptcValueLedCardCss; }
 };
 
-const ptcValueLedContentCss = ":host{display:block;padding-bottom:48px}:host .vl-content-title{margin-bottom:24px}@media only screen and (min-width: 768px){:host .vl-content-title{margin-bottom:32px}}";
+const ptcValueLedContentCss = ":host{display:block;margin-bottom:var(--ptc-element-spacing-07)}@media only screen and (min-width: 1440px){:host{margin-bottom:var(--ptc-element-spacing-09)}}:host .vl-content-title{margin-bottom:var(--ptc-element-spacing-04)}";
 
 const PtcValueLedContent$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25600,7 +25647,7 @@ const PtcValueLedContent$1 = class extends HTMLElement$1 {
   static get style() { return ptcValueLedContentCss; }
 };
 
-const ptcValueLedContentHighlightCss = ".sc-ptc-value-led-content-highlight-h{display:block;border-left:7px solid var(--color-green-07);padding-left:32px;margin:0 0 48px 0}@media only screen and (min-width: 480px){.sc-ptc-value-led-content-highlight-h{margin:0 0 48px 40px}}@media only screen and (min-width: 992px){.sc-ptc-value-led-content-highlight-h{margin:8px 0 48px 48px}}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>p{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul li{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul{padding-left:12px}";
+const ptcValueLedContentHighlightCss = ".sc-ptc-value-led-content-highlight-h{display:block;border-left:7px solid var(--color-green-07);padding-left:32px;margin:40px 0 40px 0}@media only screen and (min-width: 480px){.sc-ptc-value-led-content-highlight-h{margin:48px 40px 48px 40px}}@media only screen and (min-width: 992px){.sc-ptc-value-led-content-highlight-h{margin:56px 48px 56px 48px}}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>p{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-p)}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul li{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-p)}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul{padding-left:12px}";
 
 const PtcValueLedContentHighlight$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25613,7 +25660,7 @@ const PtcValueLedContentHighlight$1 = class extends HTMLElement$1 {
   static get style() { return ptcValueLedContentHighlightCss; }
 };
 
-const ptcValueLedIntroCss = ":host{display:block;padding-bottom:48px;padding-top:32px}@media only screen and (min-width: 768px){:host{padding-top:0}}:host .content-tag{font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);font-weight:var(--ptc-font-weight-semibold);margin-bottom:var(--ptc-element-spacing-01)}";
+const ptcValueLedIntroCss = ":host{display:block;padding-bottom:var(--ptc-element-spacing-07);padding-top:var(--ptc-element-spacing-07)}@media only screen and (min-width: 768px){:host{padding-top:0}}@media only screen and (min-width: 1440px){:host{padding-bottom:var(--ptc-element-spacing-09)}}:host .content-tag{font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);font-weight:var(--ptc-font-weight-medium);margin-bottom:var(--ptc-element-spacing-01);color:var(--color-gray-10)}";
 
 const PtcValueLedIntro$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25628,7 +25675,7 @@ const PtcValueLedIntro$1 = class extends HTMLElement$1 {
   static get style() { return ptcValueLedIntroCss; }
 };
 
-const ptcValueLedLayoutCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}:host{display:block;position:relative}:host *{box-sizing:border-box}:host .top-image{background-color:rgba(0, 0, 0, 0.8);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:1rem 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:64px;width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-04)}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;max-height:calc(100vh - 64px);background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap{z-index:105;margin:auto;position:sticky;top:32px;right:0;float:right;overflow-y:auto;overflow-x:hidden}}:host .vl-layout-wrap .vl-list-wrap ul{margin:0;padding:0;list-style:none}:host .vl-layout-wrap .vl-list-wrap ul li{display:none}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap ul li{display:block;margin:0 16px 8px 16px}}:host .vl-layout-wrap .vl-list-wrap ul li a{display:block;padding:8px 16px;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);text-decoration:none;color:var(--color-gray-10);position:relative;background-color:transparent;border-radius:var(--ptc-border-radius-standard)}:host .vl-layout-wrap .vl-list-wrap ul li a::before{content:\"\";display:block;width:2px;height:calc(100% - 16px);background-color:transparent;position:absolute;left:8px}:host .vl-layout-wrap .vl-list-wrap ul li a:hover{background-color:var(--color-gray-02)}:host .vl-layout-wrap .vl-list-wrap ul li.active{display:block}:host .vl-layout-wrap .vl-list-wrap ul li.active a{font-weight:700}:host .vl-layout-wrap .vl-list-wrap ul li.active a::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar{width:8px}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-track{background:transparent}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .vl-layout-wrap .vl-list-wrap select{z-index:105;background-color:#fff}:host .vl-layout-wrap .vl-content-wrap{width:100%;padding:0 20px 20px 20px;background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap{padding:0 32px 32px 32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap{width:78%;padding:48px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select{position:sticky;top:-1px;z-index:1056;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--color-white);width:calc(100% + 40px);margin-left:-20px}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap .mobile-select{width:calc(100% + 64px);margin-left:-32px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:block}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:none}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button{width:100%;background-color:transparent;border-radius:0.25rem;cursor:pointer;font-weight:700;line-height:1.5;font-size:18px;display:flex;justify-content:space-between;align-items:center;border-radius:4px 4px 0px 0px;box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.24);padding:24px;border:none}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .selected-value{text-align:left;font-weight:700;line-height:1.5;font-size:18px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .arrow{min-width:14px;width:14px;height:10px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M2 2.30469L6.94975 7.60799L11.8995 2.30469\" stroke=\"%2300890B\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>');background-repeat:no-repeat;transition:transform ease-in-out 0.3s;margin-left:15px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown{position:absolute;list-style:none;width:100%;border-radius:0 0 4px 4px;background:var(--color-white);margin:0;padding:0;box-shadow:0px 8px 24px 0px rgba(0, 0, 0, 0.24);max-height:70vh;overflow-y:auto;transition:0.5s ease;z-index:30000;opacity:0;visibility:hidden}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown:focus-within{box-shadow:0 10px 25px rgba(94, 108, 233, 0.6)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li{position:relative;cursor:pointer}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label{display:block;width:100%;box-sizing:border-box;padding:16px 32px;cursor:pointer;font-size:18px;line-height:1.25;font-weight:400}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label::before{content:\"\";display:block;width:2px;height:calc(100% - 32px);background-color:transparent;position:absolute;left:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]{position:absolute;left:0;opacity:0}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]:checked~label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar{width:7px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow{transform:rotate(180deg)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .select-dropdown{opacity:1;visibility:visible}:host .vl-layout-wrap .vl-content-wrap .mobile-select:focus-visible{outline:none}:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}@media only screen and (min-width: 768px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding-top:32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}}:host .select-dropdown input:focus~label{background-color:#dfdfdf}";
+const ptcValueLedLayoutCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}:host{display:block;position:relative}:host *{box-sizing:border-box}:host .top-image{background-color:rgba(0, 0, 0, 0.6);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:var(--ptc-element-spacing-04) 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:var(--ptc-element-spacing-04);width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex;margin-top:40px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-sidebar{margin-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 1440px){:host .vl-layout-wrap .vl-sidebar{margin-right:40px}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;box-shadow:var(--ptc-shadow-x-large);max-height:calc(100vh - 64px);background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap{z-index:105;margin:auto;position:sticky;top:32px;right:0;float:right;overflow-y:auto;overflow-x:hidden;padding:var(--ptc-layout-spacing-03) 0}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap{padding:var(--ptc-layout-spacing-04) 0}}:host .vl-layout-wrap .vl-list-wrap ul{margin:0;padding:0;list-style:none}:host .vl-layout-wrap .vl-list-wrap ul li{display:none}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap ul li{display:block;margin:0 16px 4px 16px}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap ul li{margin:0 16px 8px 16px}}:host .vl-layout-wrap .vl-list-wrap ul li a{display:block;padding:8px 16px;font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);text-decoration:none;color:var(--color-gray-10);position:relative;background-color:transparent;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap ul li a{font-size:var(--ptc-font-size-small)}}:host .vl-layout-wrap .vl-list-wrap ul li a::before{content:\"\";display:block;width:2px;height:calc(100% - 16px);background-color:transparent;position:absolute;left:4px}:host .vl-layout-wrap .vl-list-wrap ul li a:hover{background-color:var(--color-gray-02)}:host .vl-layout-wrap .vl-list-wrap ul li.active{display:block}:host .vl-layout-wrap .vl-list-wrap ul li.active a{font-weight:var(--ptc-font-weight-bold)}:host .vl-layout-wrap .vl-list-wrap ul li.active a::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar{width:8px}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-track{background:transparent}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .vl-layout-wrap .vl-list-wrap select{z-index:105;background-color:var(--color-white)}:host .vl-layout-wrap .vl-content-wrap{width:100%;padding:0 20px 20px 20px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large)}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap{padding:0 32px 32px 32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap{width:78%;padding:48px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select{position:sticky;top:-1px;z-index:1056;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--color-white);width:calc(100% + 40px);margin-left:-20px;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap .mobile-select{width:calc(100% + 64px);margin-left:-32px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:block}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:none}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button{width:100%;background-color:transparent;border-radius:0.25rem;cursor:pointer;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-size:var(--ptc-font-size-small);display:flex;justify-content:space-between;align-items:center;border-radius:4px 4px 0px 0px;box-shadow:var(--ptc-shadow-x-large);padding:var(--ptc-element-spacing-06);border:none;color:var(--color-gray-10);position:relative}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button::after{content:\"\";width:100%;height:0;background-color:transparent;display:block;position:absolute;bottom:0;box-shadow:0 16px 16px rgba(0, 0, 0, 0.2);left:0;right:0;z-index:105666}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .selected-value{text-align:left;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-size:var(--ptc-font-size-small);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .arrow{min-width:14px;width:14px;height:10px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M2 2.30469L6.94975 7.60799L11.8995 2.30469\" stroke=\"%2300890B\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>');background-repeat:no-repeat;transition:transform ease-in-out 0.3s;margin-left:15px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown{position:absolute;list-style:none;width:100%;border-radius:0 0 4px 4px;background:var(--color-white);margin:0;padding:16px 0;max-height:70vh;overflow-y:auto;transition:0.5s ease;z-index:30000;box-shadow:0px 16px 16px rgba(0, 0, 0, 0.24);border-top:1px solid var(--color-gray-02);opacity:0;visibility:hidden}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown:focus-within{box-shadow:0 10px 25px rgba(94, 108, 233, 0.6)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li{position:relative;cursor:pointer}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label{display:block;width:100%;box-sizing:border-box;padding:16px 32px;cursor:pointer;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-regular);color:var(--color-gray-10)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label::before{content:\"\";display:block;width:2px;height:calc(100% - 32px);background-color:transparent;position:absolute;left:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]{position:absolute;left:0;opacity:0}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]:checked~label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar{width:7px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track{background:var(--color-white);border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow{transform:rotate(180deg)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .select-dropdown{opacity:1;visibility:visible}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.scroll-top.active .select-button::after{height:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select:focus-visible{outline:none}:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}@media only screen and (min-width: 768px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding-top:var(--ptc-element-spacing-07)}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}}:host .select-dropdown input:focus~label{background-color:#dfdfdf}";
 
 const PtcValueLedLayout$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25672,15 +25719,59 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
     this.optionsList = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li");
     this.selectBtn.addEventListener('click', this.handleSelectButtonClick.bind(this));
     this.customSelectDropdown();
+    document.querySelectorAll('.video-embad-container-value-led-class').forEach(item => {
+      const ptcContainer = item.querySelector('.ptc-container');
+      if (ptcContainer) {
+        ptcContainer.classList.remove('ptc-container');
+        item.classList.add('u-paddingTop-flush');
+      }
+    });
   }
-  handleScroll() {
+  // @Listen('scroll', { target: 'window' })
+  // handleScroll() {
+  //   this.setActiveItem();
+  // }
+  handleWheel(event) {
+    console.log(event);
     this.setActiveItem();
   }
+  handleKeyDown(event) {
+    if (event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'PageUp' ||
+      event.key === 'PageDown') {
+      this.setActiveItem();
+    }
+  }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
     this.setActiveItem();
     this.customSelectDropdown();
   }
+  handleDropdownScroll() {
+    let dropdownWrap = this.hostElement.shadowRoot.querySelector('.custom-select');
+    if (dropdownWrap) {
+      let body = dropdownWrap.querySelector('.select-dropdown');
+      var height = body.clientHeight;
+      var scrollHeight = body.scrollHeight;
+      var scrollTop = body.scrollTop;
+      var offset = body.offsetHeight;
+      if (height < scrollHeight) { //has scrollbar
+        if (scrollTop > 0) { //can scroll up
+          dropdownWrap.classList.add('scroll-top');
+        }
+        else {
+          dropdownWrap.classList.remove('scroll-top');
+        }
+        if (offset + scrollTop < scrollHeight) { //can scroll down
+          dropdownWrap.classList.add('scroll-bottom');
+        }
+        else {
+          dropdownWrap.classList.remove('scroll-bottom');
+        }
+      }
+    }
+  }
   handleSelectButtonClick() {
     this.customSelect.classList.toggle("active");
     this.selectBtn.setAttribute("aria-expanded", this.selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true");
@@ -25778,13 +25869,13 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h$1(Host, null, h$1("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h$1("div", { class: 'ptc-container' }, h$1("div", { class: "pdf-slot-wrapper" }, h$1("slot", { name: 'pdf-slot' })), h$1("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h$1("div", { class: 'vl-sidebar' }, h$1("div", { class: 'vl-list-wrap' }, h$1("ul", null, this.sidebarData.map((item) => (h$1("li", null, h$1("a", { href: "#" + item.ref }, h$1("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h$1("span", { style: { display: 'none !important' } }), h$1("div", { class: 'vl-content-wrap' }, h$1("div", { class: "custom-select mobile-select" }, h$1("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h$1("span", { class: "selected-value" }, "Select option"), h$1("span", { class: "arrow" })), h$1("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown" }, this.sidebarData.map((item, index) => (h$1("li", { role: "option", id: index }, h$1("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h$1("label", { htmlFor: item.title }, h$1("i", { class: "bx bxl-github" }), item.title)))))), h$1("div", { class: 'vl-content-slot-wrap' }, h$1("slot", null)))))));
+    return (h$1(Host, null, h$1("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h$1("div", { class: 'ptc-container' }, h$1("div", { class: "pdf-slot-wrapper" }, h$1("slot", { name: 'pdf-slot' })), h$1("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h$1("div", { class: 'vl-sidebar' }, h$1("div", { class: 'vl-list-wrap' }, h$1("ul", null, this.sidebarData.map((item, index) => (h$1("li", null, h$1("a", { href: "#" + item.ref, onClick: () => { this.updateActiveItem(index); } }, h$1("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h$1("span", { style: { display: 'none !important' } }), h$1("div", { class: 'vl-content-wrap' }, h$1("div", { class: "custom-select mobile-select" }, h$1("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h$1("span", { class: "selected-value" }, "Select option"), h$1("span", { class: "arrow" })), h$1("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index) => (h$1("li", { role: "option", id: index }, h$1("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h$1("label", { htmlFor: item.title }, h$1("i", { class: "bx bxl-github" }), item.title)))))), h$1("div", { class: 'vl-content-slot-wrap' }, h$1("slot", null)))))));
   }
   get hostElement() { return this; }
   static get style() { return ptcValueLedLayoutCss; }
 };
 
-const ptcValueLedSpeedBumpCss = ":host{display:block;margin-bottom:48px}:host .sb-card{display:block;border-radius:4px;background:var(--color-white);box-shadow:var(--ptc-shadow-x-small);text-decoration:none}@media only screen and (min-width: 480px){:host .sb-card{display:flex}}:host .sb-card .img-wrap{width:100%;max-height:120px;overflow:hidden}@media only screen and (min-width: 480px){:host .sb-card .img-wrap{max-width:120px;max-height:initial}}:host .sb-card .img-wrap ptc-picture{height:100%}:host .sb-card .card-content-wrap{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 16px 16px 16px;box-sizing:border-box}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .card-content{padding-right:24px}}:host .sb-card .card-content-wrap h4,:host .sb-card .card-content-wrap p{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);margin:0 0 4px 0;text-decoration:none}:host .sb-card .card-content-wrap p{margin:0;font-weight:var(--ptc-font-weight-semibold)}:host .sb-card .card-content-wrap .cta-slot{display:none}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .cta-slot{display:block;min-width:140px;text-align:right}}";
+const ptcValueLedSpeedBumpCss = ":host{display:block;margin-bottom:var(--ptc-element-spacing-07)}@media only screen and (min-width: 1440px){:host{margin-bottom:var(--ptc-element-spacing-09)}}:host .sb-card{display:block;border-radius:var(--ptc-border-radius-standard);background:var(--color-white);box-shadow:var(--ptc-shadow-x-small);text-decoration:none}@media only screen and (min-width: 480px){:host .sb-card{display:flex}}:host .sb-card .img-wrap{width:100%;max-height:120px;overflow:hidden;border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 480px){:host .sb-card .img-wrap{max-width:120px;max-height:initial;border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:0px;border-bottom-left-radius:var(--ptc-border-radius-standard)}}:host .sb-card .img-wrap ptc-picture{height:100%;min-height:95px}:host .sb-card .card-content-wrap{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--ptc-element-spacing-04);box-sizing:border-box}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .card-content{padding-right:var(--ptc-element-spacing-06)}}:host .sb-card .card-content-wrap h4,:host .sb-card .card-content-wrap p{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);margin:0 0 4px 0;text-decoration:none}:host .sb-card .card-content-wrap p{margin:0;font-weight:var(--ptc-font-weight-medium)}:host .sb-card .card-content-wrap .cta-slot{display:none}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .cta-slot{display:block;min-width:140px;text-align:right}}";
 
 const PtcValueLedSpeedBump$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25806,7 +25897,7 @@ const PtcValueLedSpeedBump$1 = class extends HTMLElement$1 {
   render() {
     const Tag = !!this.isMobile ? 'a' : 'div';
     return (h$1(Host, null, h$1(Tag, { class: "sb-card", href: this.ctaLink, target: this.ctaTarget }, this.cardImage &&
-      h$1("div", { class: 'img-wrap' }, h$1("ptc-picture", { alt: "image", "border-radius": "radius-standard", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "" })), h$1("div", { class: 'card-content-wrap' }, h$1("div", { class: 'card-content' }, h$1("h4", null, this.cardTitle), h$1("p", null, h$1("slot", null))), h$1("div", { class: 'cta-slot' }, h$1("slot", { name: 'cta-slot' }))))));
+      h$1("div", { class: 'img-wrap' }, h$1("ptc-picture", { alt: "image", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "img{ min-height: 95px}" })), h$1("div", { class: 'card-content-wrap' }, h$1("div", { class: 'card-content' }, h$1("h4", null, this.cardTitle), h$1("p", null, h$1("slot", null))), h$1("div", { class: 'cta-slot' }, h$1("slot", { name: 'cta-slot' }))))));
   }
   static get style() { return ptcValueLedSpeedBumpCss; }
 };
@@ -25837,227 +25928,7 @@ const PtcWhitePaper$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.items = [
-      {
-        component1: {
-          type: 'two-column-with-text-media',
-          heading: 'Why Now Is the Time to Use Advanced Technologies to Remotely Connect Your Medical Devices',
-          subHeading: 'Subheading text',
-          leftColumnContent: `There is growing interest in using the Internet of
-          Things (IoT) in medical devices. The data gathered
-          with IoT-enabled medical devices&mdash;the so-called
-          Internet of Medical Things (IoMT) devices&mdash;can be
-          used to remotely monitor and fix devices. The use
-          of IoT brings numerous benefits. Medical device
-          manufacturers can incorporate data collected from
-          their fleet of products in the field into product
-          design considerations. They can also leverage the
-          data to offer innovative services that differentiate
-          them from the competition.<br />
-          <br />
-          To get a better understanding of how advanced
-          technologies like IoT are being used to connect
-          medical devices remotely, we recently sat
-          down with Rene Zoelfl, Business Development
-          Director, PTC.<br />
-          <br />
-          We explored the role of IoT in medical devices
-          for remote management, how the technology is
-          being used, how the technology can support
-          new business models, and then covered some
-          real-world examples of the IoMT in action.<br />
-          <br />
-          <img alt="zoelfl1" src="https://www.ptc.com/-/media/99F1C78BD774420AB51AA313C2D560D9.ashx" /><br />
-          <strong>RTInsights:</strong> How can manufacturers, healthcare
-          facilities, and patients best benefit from remote
-          monitoring?<br />
-          <br />
-          <strong>Zoelfl:</strong> I would say remote monitoring gives two
-          main benefits. One is remote monitoring lets
-          device manufacturers optimize their processes,
-          and the other benefit is that they can optimize the
-          relationship with their customers, clients, and
-          patients. These things can help transform the way
-          they are doing business.<br />
-          <br />`,
-          rightColumnContent: `What are the key advanced technologies that are
-          enabling innovations in the design and use of
-          remote devices? On one hand, we have IoT technologies
-          that enable connectivity, advanced
-          analytics or artificial intelligence, and the ability to
-          automate decisions and processes to a higher level.
-          The other key element, the other key technology,
-          I'd like to highlight is augmented reality, which
-          gives us a different way, a different capability, to
-          interact with equipment in the context of its use
-          and in the context of the location where it is used.<br />
-          <br />
-          <img alt="zoelfl1b" src="https://www.ptc.com/-/media/2161D33FD40E43D8BD453C4BC6C1CFC5.ashx" /><br />
-          <strong>RTInsights:</strong> How can companies use these technologies
-          in the product life cycle?<br />
-          <br />
-          <strong>Zoelfl:</strong> There are multiple ways. Where to begin?
-          A manufacturer can use IoT technologies internally.
-          They can make sure that when teams are working
-          together on the design of new products, they can
-          more easily communicate and get access to the
-          generated data. Then they also could have the
-          same capabilities or the same technologies to use
-          when it comes to handing over that information
-          into manufacturing.<br />
-          <br />
-          For instance, when a manufacturer thinks about
-          non-conformances that might occur in the manufacturing
-          process, because of maybe some difficult
-          designs, or maybe some materials that they have
-          selected, they can feed that information back into
-          the development and engineering organizations.
-          They can react much faster before the product
-          might have left the company and not when it is at
-          the patient or the caregiving facility.`,
-        },
-      },
-      {
-        component2: {
-          type: 'fullspan-media',
-          heading: '',
-          subHeading: `<h3>Case Study: Digital Transformation for Service Optimization</h3>
-        <p>A major manufacturer of power equipment fueled its service
-        network by streamlining dealership networks and the end
-        users they service.</p>
-        <ul>
-        <li>The OEM embedded Industrial Internet of Things (IIoT)
-        technologies into its products to gain visibility, which derivatively
-        impacted critical service and operational KPIs for its dealership
-        and end user. This also offloaded service-related costs (warranty,
-        total cost of ownership, truck rolls etc.) from its outstanding
-        liabilities.</li>
-        <li>The dealership improved the customer relationship by increasing
-        asset uptime and optimizing service delivery costs through
-        equipping technicians with critical repair insights for severity,
-        proximity, skillset, and remediating actions required.</li>
-        <li>The end user operating a mine in a sub-zero environment
-        improved the reliability, availability, and uptime of mission-critical
-        assets.</li>
-        </ul>
-        <p>While the service network can take many different complex
-        forms, this example illustrates the mutually beneficial impact
-        and largely untapped potential of gaining visibility across the
-        service lifecycle.</p>`,
-          mainImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c01e7beaaccc4ff9a33bd1b07c04a50a',
-          mainImageAlt: 'reducing-service-costs-1',
-          mainImageDescription: 'Some image description',
-        },
-      },
-      {
-        component3: {
-          type: 'fullspan-text',
-          heading: '',
-          subHeading: '',
-          mainContent: `<h3>Choose a Partner</h3>
-        <p>Finally, a critical step in preparing for predictive maintenance implementation is choosing the right IoT partner to have by your side throughout the process. Once you&rsquo;ve cultivated executive support for predictive maintenance across the organization, identified the machine condition for prediction, and secured enterprise-wide buy-in, partner with experts that have a background in implementing IoT for predictive maintenance. </p>
-        <p>Service organizations should look for IoT partners that can provide the support structure needed for predictive maintenance implementation, offering experience with: </p>
-        <ul>
-            <li>Data selection</li>
-            <li>Model building</li>
-            <li>Analytics</li>
-            <li>Data collection and management strategy</li>
-            <li>Data architecture, design, and governance</li>
-            <li>Simulation expertise</li>
-            <li>Ecosystem availability</li>
-        </ul>
-        <h3>Build a Predictive Model</h3>
-        <p>Your partners in predictive maintenance can help you find the right technology to build a predictive model and get valuable insights to speed service and reduce downtime.</p>
-        <p><strong>Establish Industrial Connectivity</strong><br />
-        As a critical first step in building a predictive model, industrial connectivity enables enterprise-wide visibility and data comparison. One way to establish industrial connectivity is through PTC&rsquo;s <a href="~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z">ThingWorx Kepware Server</a>, which provides secure, standardized data connectivity across disparate equipment (both new and legacy), establishing a foundation on which to scale with IoT<sup>2</sup>.</p>
-        <p><strong>Get Actionable Insights from IoT Analytics</strong><br />
-        PTC&rsquo;s <a href="~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z">ThingWorx IoT platform</a>&nbsp;automates analytics and AI so organizations can access actionable IoT insights quickly and easily. These insights are delivered through ThingWorx capabilities including machine learning, which enables your team to predict based on what they learn from IoT data&mdash;without involving complex math or data scientists<sup>3</sup>.</p>
-        <br class="t-last-br" />
-        <sup>2</sup><a href="~/link.aspx?_id=931E5AE1D6D34267BE309685D12FA527&amp;_z=z">ThingWorx Kepware Server</a>
-        <sup>3</sup><a href="~/link.aspx?_id=C8B5851AA3564A55899937AE7D929360&amp;_z=z">ThingWorx IoT platform</a><br class="t-last-br" />`,
-          mainContentMultiLine: 'mainContent MultiLine to predict and resolve equipment issues before they result in costly downtime—but the perceived mystery behind data science and AI can be daunting enough to deter service organizations from pursuing a pr',
-          mainContentChart: 'eee',
-          mainContentChartHeight: 'sfsf',
-          isCenterText: false,
-          isStyledHeading: false,
-        },
-      },
-      {
-        component32: {
-          type: 'fullspan-text',
-          heading: '',
-          subHeading: '',
-          mainContent: `<p><strong>Predictive Maintenance in Action at Howden</strong></p>
-        <p>For Howden, a global engineering leader, predictive maintenance helps reduce costly unplanned downtime, optimize performance and energy efficiency, and deliver valuable domain knowledge about machines to its customers.</p>
-        <p>Howden partnered with PTC and selected the ThingWorx platform for predictive analytics. The partnership powers Howden&rsquo;s Data Driven Advantage (DDA) program, which offers its customers actionable data insights to &ldquo;avoid costly outages by detecting early warning signs,&rdquo; improving uptime<sup>4</sup>.  </p>
-        <p><a href="~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z">Watch Howden&rsquo;s Full Predictive Maintenance Story</a></p>
-        <p><strong>Predictive Maintenance in Action at Parata</strong></p>
-        <p>For Parata Systems, a leading pharmacy automation company, ThingWorx replaced an IoT platform that lacked capabilities in visibility, reporting, and analytics. With goals to improve its customer experience in a scalable way, Parata started with remote condition monitoring and later built a service optimization solution. Now, ThingWorx enables proactive alerts and machine learning for improvements across service efficiency, resource utilization, parts consumption, and service profitability<sup>5</sup>.</p>
-        <p><a href="~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z">Watch Parata&rsquo;s Full Predictive Maintenance Story</a></p>
-        <h3>Scale Your Predictive Maintenance Strategy</h3>
-        <p>With a dedicated IoT partnership and a predictive model in place, you can focus on expanding your predictive maintenance strategy at scale by:  </p>
-        <ol>
-            <li>Monitoring the efficacy of your predictive model over time</li>
-            <li>Gathering data and updating your predictive model</li>
-        </ol>
-        <br class="t-last-br" />
-        <p>
-        <sup>4</sup> <a href="~/link.aspx?_id=333F47DC33954CB7B05001C6709432EC&amp;_z=z">Predictive Analytics Delivering Real Value&mdash;a Practitioner&rsquo;s Perspective</a>&nbsp;webcast replay<br />
-        <sup>5 </sup><a href="~/link.aspx?_id=13B6392FAD9146DCA33C34948C228EA9&amp;_z=z">Proving the Value of Industrial IoT</a> webcast replay </p>
-        <br class="t-last-br" />`,
-          mainContentMultiLine: '',
-          mainContentChart: '',
-          mainContentChartHeight: '',
-          isCenterText: false,
-          isStyledHeading: false,
-        },
-      },
-      {
-        component32: {
-          type: 'fullspan-text',
-          heading: 'Remote Condition Monitoring: Solving Problems Before They Happen',
-          subHeading: '',
-          mainContent: `<h3>What It Looks Like</h3>
-        <p>Machines that seamlessly send real-time performance data allow service
-        professionals to assess, analyze, and act on issues before they become
-        problems. With a centralized remote condition monitoring platform, service
-        teams can easily leverage the sensor data and diagnostics they need to
-        become more proactive and less reactive. Data insights from remote condition
-        monitoring better enable technicians to understand and monitor usage,
-        performance, target parameters, productivity, and more. These patterns
-        enable technicians to detect faults and prevent downtime before it occurs&mdash;
-        and often before the customer is aware of any issue.</p>
-        <h3>Real-World Results</h3>
-        <p>With IoT remote data monitoring through ThingWorx, <a href="~/link.aspx?_id=70971B9D25B14D02BFD1A75F24F63292&amp;_z=z">Flowserve </a>avoided a
-        costly cavitation problem in a customer&rsquo;s running pump ($1.6 million or more
-        if not solved within 30 minutes; $16 million or more if not solved within 45-
-        60 minutes). Now, with their IoT solution in place, Flowserve decreases costs,
-        limits emergency work orders, improves profit, and enhances safety. Most
-        importantly, they exceed customer expectations with improved equipment
-        availability and efficiency.</p>
-        <p>IoT monitoring helped Flowserve prevent a $16 million
-        cavitation problem&mdash;before it impacted the customer.</p>`,
-          mainContentMultiLine: '',
-          mainContentChart: '',
-          mainContentChartHeight: '',
-          isCenterText: false,
-          isStyledHeading: false,
-        },
-        component1: {
-          type: 'two-column-with-text-media',
-          heading: '',
-          subHeading: '',
-          leftColumnContent: `<h3 class="wp-h3">
-        <img alt="Flowserve" src="https://www.ptc.com/-/media/CDD4A14F36164A0B8285B3B95EE52996.ashx" /></h3>
-        <br />`,
-          rightColumnContent: `<p><strong>“In Flowserve, we truly had an a-ha moment when we saw
-        some of the first information come back from the field in the
-        IoT platform...That was the moment where we thought, ‘Oh my
-        gosh. We’ve got something incredible here.'"</strong></p>
-        – Aric Zurek, Vice President, Marketing and Sales, Flowserve`,
-        },
-      },
-    ];
+    this.items = undefined;
     this.topBackgroundImage = undefined;
     this.topBackgroundImageAlt = undefined;
     this.itemsPerPage = 5;
@@ -26076,8 +25947,8 @@ const PtcWhitePaper$1 = class extends HTMLElement$1 {
     this.calculateTotalPages();
   }
   calculateTotalPages() {
-    console.log(this.items.length);
-    this.totalPages = Math.ceil(this.items.length / this.itemsPerPage);
+    console.log(JSON.parse(this.items).length);
+    this.totalPages = Math.ceil(JSON.parse(this.items).length / this.itemsPerPage);
   }
   handlePageChange(newPage) {
     if (newPage > 0 && newPage <= this.totalPages) {
@@ -26130,7 +26001,7 @@ const PtcWhitePaper$1 = class extends HTMLElement$1 {
   }
   renderContent(item, index) {
     const components = Object.values(item);
-    return (h$1("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h$1("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (h$1("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-3" }, comp.heading, h$1("ptc-spacer", { size: "large" }))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h$1("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.type === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.type === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.type === 'fullspan-text' && this.renderFullspanText(comp, i))))));
+    return (h$1("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h$1("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (h$1("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-3" }, comp.heading, h$1("ptc-spacer", { size: "large" }))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h$1("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', 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(comp, index) {
     return (h$1("div", null, comp.leftColumnContent && (h$1("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h$1("div", { class: "is-col-6-md" }, h$1("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h$1("div", { class: "is-col-6-md" }, h$1("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));
@@ -26149,7 +26020,7 @@ const PtcWhitePaper$1 = class extends HTMLElement$1 {
   render() {
     const startIndex = (this.currentPage - 1) * this.itemsPerPage;
     const endIndex = startIndex + this.itemsPerPage;
-    const currentItems = this.items.slice(startIndex, endIndex);
+    const currentItems = JSON.parse(this.items).slice(startIndex, endIndex);
     return (h$1(Host, null, h$1("div", { class: "hero-image" }, h$1("ptc-img", { "image-type": "smart-bg", "img-url": this.topBackgroundImage, "load-mode": "lazy-bg", styles: "" })), h$1("div", { class: "ptc-container " }, h$1("div", { class: "content-container" }, h$1("div", { class: "pagination-wrap" }, h$1("div", { class: "pagination" }, h$1("button", { onClick: () => this.handlePrevPage(), disabled: this.currentPage === 1 }, h$1("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h$1("g", { id: "icon_chevron_left_mini", viewBox: "0 0 18 18" }, h$1("g", { class: "icon_chevron_left_mini" }, h$1("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$1("button", { onClick: () => this.handleNextPage(), disabled: this.currentPage === this.totalPages }, h$1("svg", { preserveAspectRatio: "xMidYMid meet", focusable: "false", viewBox: "0 0 18 18" }, h$1("g", { id: "icon_chevron_right_mini", viewBox: "0 0 18 18" }, h$1("g", { class: "icon_chevron_right_mini" }, h$1("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$1("a", { class: "dl-btn" }, h$1("span", { class: "dl-text" }, "Download"), h$1("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" }))), h$1("div", null, currentItems.map((item, index) => this.renderContent(item, index)))))));
   }
   static get watchers() { return {
@@ -26492,7 +26363,7 @@ const PtcBackgroundVideo = /*@__PURE__*/proxyCustomElement(PtcBackgroundVideo$1,
 const PtcBioCard = /*@__PURE__*/proxyCustomElement(PtcBioCard$1, [1,"ptc-bio-card",{"name":[1],"jobTitle":[1,"job-title"],"image":[1],"linkedin":[1],"twitter":[1],"showModal":[32]}]);
 const PtcBreadcrumb = /*@__PURE__*/proxyCustomElement(PtcBreadcrumb$1, [1,"ptc-breadcrumb",{"position":[1],"removeTopMargin":[4,"remove-top-margin"],"color":[1],"styles":[1]}]);
 const PtcBrightcovVideo = /*@__PURE__*/proxyCustomElement(PtcBrightcovVideo$1, [2,"ptc-brightcov-video",{"videoId":[1,"video-id"]}]);
-const PtcButton = /*@__PURE__*/proxyCustomElement(PtcButton$1, [1,"ptc-button",{"disabled":[516],"active":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"linkTitle":[1,"link-title"],"target":[1],"rel":[1],"tabNav":[2,"tab-nav"],"styles":[1],"textAlign":[1,"text-align"],"size":[1],"buttonTitle":[1,"button-title"],"ariaLabel":[1,"aria-label"]}]);
+const PtcButton = /*@__PURE__*/proxyCustomElement(PtcButton$1, [1,"ptc-button",{"disabled":[516],"active":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"linkTitle":[1,"link-title"],"target":[1],"rel":[1],"tabNav":[2,"tab-nav"],"styles":[1],"textAlign":[1,"text-align"],"size":[1],"buttonTitle":[1,"button-title"],"ariaLabel":[1,"aria-label"],"seoCompatibilityMode":[4,"seo-compatibility-mode"]}]);
 const PtcCard = /*@__PURE__*/proxyCustomElement(PtcCard$1, [1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"headingTransform":[1,"heading-transform"],"cardDate":[1,"card-date"],"country":[1],"styles":[1],"ribbonText":[1,"ribbon-text"],"eventType":[1,"event-type"],"cardLogo":[1,"card-logo"],"titleLineCutOff":[2,"title-line-cut-off"],"maxChars":[2,"max-chars"],"maxLines":[2,"max-lines"],"cardOverflow":[1,"card-overflow"],"isCreoCard":[4,"is-creo-card"]}]);
 const PtcCardBottom = /*@__PURE__*/proxyCustomElement(PtcCardBottom$1, [1,"ptc-card-bottom",{"cardType":[1,"card-type"],"styles":[1]}]);
 const PtcCardContent = /*@__PURE__*/proxyCustomElement(PtcCardContent$1, [1,"ptc-card-content",{"cardType":[1,"card-type"],"outlineColor":[1,"outline-color"],"styles":[1],"isLoading":[4,"is-loading"]}]);
@@ -26521,7 +26392,7 @@ const PtcIconMinimize = /*@__PURE__*/proxyCustomElement(PtcIconMinimize$1, [1,"p
 const PtcImageDownloadStrip = /*@__PURE__*/proxyCustomElement(PtcImageDownloadStrip$1, [1,"ptc-image-download-strip",{"downloadUrl":[1,"download-url"]}]);
 const PtcImg = /*@__PURE__*/proxyCustomElement(PtcImg$1, [4,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"],"styles":[1]},[[9,"resize","WindowResize"]]]);
 const PtcJumbotron = /*@__PURE__*/proxyCustomElement(PtcJumbotron$1, [1,"ptc-jumbotron",{"jumbotronType":[1,"jumbotron-type"],"hasPopupVideo":[4,"has-popup-video"],"mainTitle":[1,"main-title"],"subTitle":[1,"sub-title"],"pngSrc":[1,"png-src"],"gifSrc":[1,"gif-src"],"bgVideoSrc":[1,"bg-video-src"],"bgSrc":[1,"bg-src"],"isIframe":[4,"is-iframe"],"playButtonTitle":[1,"play-button-title"],"pauseButtonTitle":[1,"pause-button-title"],"hasCtaSlot":[4,"has-cta-slot"],"contentBackground":[32],"contentColor":[32],"textAlign":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
-const PtcLink = /*@__PURE__*/proxyCustomElement(PtcLink$1, [1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"linkArea":[1,"link-area"],"styles":[1]}]);
+const PtcLink = /*@__PURE__*/proxyCustomElement(PtcLink$1, [1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"linkArea":[1,"link-area"],"seoCompatibilityMode":[4,"seo-compatibility-mode"],"styles":[1]}]);
 const PtcList = /*@__PURE__*/proxyCustomElement(PtcList$1, [1,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]);
 const PtcMediaCard = /*@__PURE__*/proxyCustomElement(PtcMediaCard$1, [1,"ptc-media-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"activeBackgroundImage":[1025,"active-background-image"],"hoverBackgroundImage":[1025,"hover-background-image"],"heading":[1025],"headingTransform":[1025,"heading-transform"],"category":[1025],"isHovered":[32]}]);
 const PtcMinimizedNav = /*@__PURE__*/proxyCustomElement(PtcMinimizedNav$1, [1,"ptc-minimized-nav",{"linkUrl":[513,"link-url"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"navType":[1,"nav-type"]}]);
@@ -26588,10 +26459,10 @@ const PtcValueLedCard = /*@__PURE__*/proxyCustomElement(PtcValueLedCard$1, [1,"p
 const PtcValueLedContent = /*@__PURE__*/proxyCustomElement(PtcValueLedContent$1, [1,"ptc-value-led-content"]);
 const PtcValueLedContentHighlight = /*@__PURE__*/proxyCustomElement(PtcValueLedContentHighlight$1, [6,"ptc-value-led-content-highlight"]);
 const PtcValueLedIntro = /*@__PURE__*/proxyCustomElement(PtcValueLedIntro$1, [1,"ptc-value-led-intro",{"contentTag":[1,"content-tag"]}]);
-const PtcValueLedLayout = /*@__PURE__*/proxyCustomElement(PtcValueLedLayout$1, [1,"ptc-value-led-layout",{"topBackgroundImage":[1,"top-background-image"],"selectedValue":[1032,"selected-value"],"isMobile":[32]},[[9,"scroll","handleScroll"],[9,"resize","handleResize"]]]);
+const PtcValueLedLayout = /*@__PURE__*/proxyCustomElement(PtcValueLedLayout$1, [1,"ptc-value-led-layout",{"topBackgroundImage":[1,"top-background-image"],"selectedValue":[1032,"selected-value"],"isMobile":[32]},[[9,"wheel","handleWheel"],[8,"keydown","handleKeyDown"],[9,"resize","handleResize"]]]);
 const PtcValueLedSpeedBump = /*@__PURE__*/proxyCustomElement(PtcValueLedSpeedBump$1, [1,"ptc-value-led-speed-bump",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"isMobile":[1028,"is-mobile"]},[[9,"resize","handleResize"]]]);
 const PtcValuePropCard = /*@__PURE__*/proxyCustomElement(PtcValuePropCard$1, [1,"ptc-value-prop-card",{"cardHref":[1,"card-href"],"target":[1],"rel":[1],"cardTitle":[1,"card-title"],"backgroundImage":[1,"background-image"]}]);
-const PtcWhitePaper = /*@__PURE__*/proxyCustomElement(PtcWhitePaper$1, [1,"ptc-white-paper",{"items":[16],"topBackgroundImage":[1,"top-background-image"],"topBackgroundImageAlt":[1,"top-background-image-alt"],"itemsPerPage":[2,"items-per-page"],"currentPage":[32],"totalPages":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
+const PtcWhitePaper = /*@__PURE__*/proxyCustomElement(PtcWhitePaper$1, [1,"ptc-white-paper",{"items":[1],"topBackgroundImage":[1,"top-background-image"],"topBackgroundImageAlt":[1,"top-background-image-alt"],"itemsPerPage":[2,"items-per-page"],"currentPage":[32],"totalPages":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
 const SequentialBundle = /*@__PURE__*/proxyCustomElement(SequentialBundle$1, [1,"sequential-bundle",{"isMobile":[32]},[[9,"resize","handleResize"]]]);
 const SequentialBundleExample = /*@__PURE__*/proxyCustomElement(SequentialBundleExample$1, [1,"sequential-bundle-example",{"isInteralCardsExpanded":[1040],"isMobile":[32],"expandedCardIndex":[32]},[[9,"resize","handleResize"]]]);
 const TabContent = /*@__PURE__*/proxyCustomElement(TabContent$1, [4,"tab-content",{"name":[1],"isSelected":[32]}]);