@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/cjs/ptc-tooltip-v3.cjs.entry.js

@@ -9,18 +9,18 @@ const ptcTooltipV3Css = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-l
 const PtcTooltipV3 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.fullContentstring = '';
+    this.fullContentstring = "";
     this.maxChars = undefined;
     this.maxLines = undefined;
     this.showTooltip = false;
-    this.truncatedContent = '';
+    this.truncatedContent = "";
     this.htmlTagType = undefined;
     this.maxCharEnable = false;
     this.maxLinesEnable = false;
-    this.zIndex = 'auto';
-    this.position = 'bottom';
-    this.theme = 'standard';
-    this.width = 'default';
+    this.zIndex = "auto";
+    this.position = "bottom";
+    this.theme = "standard";
+    this.width = "default";
     this.styles = undefined;
     this.hideOnMobile = false;
     this.isSmallScreen = undefined;
@@ -42,33 +42,36 @@ const PtcTooltipV3 = class {
     this.isSmallScreen = window.innerWidth < 768;
     this.hideIfMobile = this.hideOnMobile && this.isSmallScreen;
     const content = this.el.innerText || this.el.textContent;
-    this.maxCharEnable = this.maxChars && (content.length > this.maxChars);
+    this.maxCharEnable = this.maxChars && content.length > this.maxChars;
     this.maxLinesEnable = this.maxLines && this.maxLines > 0;
     this.fullContentstring = content;
     this.getSortedText(content);
   }
   getSortedText(content) {
     const trimmedContent = content.trim();
-    this.truncatedContent = (this.maxCharEnable && !this.maxLinesEnable && !this.hideIfMobile) ? trimmedContent.slice(0, this.maxChars) + '...' : trimmedContent;
+    this.truncatedContent =
+      this.maxCharEnable && !this.maxLinesEnable && !this.hideIfMobile
+        ? trimmedContent.slice(0, this.maxChars) + "..."
+        : trimmedContent;
   }
   checkMaxLines() {
     const appRoot = this.el;
-    const text = appRoot.querySelectorAll('.trunc-text');
-    text.forEach(t => {
+    const text = appRoot.querySelectorAll(".trunc-text");
+    text.forEach((t) => {
       this.maxLinesShowCheck = t.scrollHeight > t.clientHeight;
     });
   }
   componentDidLoad() {
     this.updateContentMarkup();
     // Hide the slot and element from the DOM
-    const slotElement = this.el.querySelector('.slot-wrap');
+    const slotElement = this.el.querySelector(".slot-wrap");
     if (slotElement) {
       slotElement.remove();
     }
     this.checkMaxLines();
   }
   updateContentMarkup() {
-    const truncDiv = this.el.querySelector('.trunc-text');
+    const truncDiv = this.el.querySelector(".trunc-text");
     if (truncDiv) {
       if (this.htmlTagType) {
         let tagHtml = `<${this.htmlTagType}>${this.truncatedContent}</${this.htmlTagType}>`;
@@ -83,26 +86,28 @@ const PtcTooltipV3 = class {
     this.showTooltip = show;
   }
   renderTooltip() {
-    return (((this.maxCharEnable && this.showTooltip) || (this.maxLinesEnable && this.showTooltip && this.maxLinesShowCheck)) ? (index.h("div", { class: `tooltip-box ${this.position} ${this.width}`, style: { 'z-index': this.zIndex }, ref: el => (this.tooltipBox = el) }, this.fullContentstring)) : '');
+    return (this.maxCharEnable && this.showTooltip) ||
+      (this.maxLinesEnable &&
+        this.showTooltip &&
+        this.maxLinesShowCheck) ? (index.h("div", { class: `tooltip-box ${this.position} ${this.width}`, style: { "z-index": this.zIndex }, ref: (el) => (this.tooltipBox = el) }, this.fullContentstring)) : ("");
   }
   render() {
     const classMap = this.getCssClassMap();
     const clampStyle = this.getLineCuttoff();
-    return (index.h(index.Host, null, index.h("div", { class: "tooltip-container", onMouseEnter: () => this.toggleTooltip(true), onMouseLeave: () => this.toggleTooltip(false) }, index.h("div", { class: classMap, style: clampStyle }), index.h("div", { class: 'slot-wrap' }, index.h("slot", null)), !this.hideIfMobile &&
-      this.renderTooltip())));
+    return (index.h(index.Host, null, index.h("div", { class: "tooltip-container", onMouseEnter: () => this.toggleTooltip(true), onMouseLeave: () => this.toggleTooltip(false) }, index.h("div", { class: classMap, style: clampStyle }), index.h("div", { class: "slot-wrap" }, index.h("slot", null)), !this.hideIfMobile && this.renderTooltip())));
   }
   getCssClassMap() {
     return {
-      'trunc-text': true,
-      'line-clamp': this.maxLinesEnable,
-      'hide-on-mobile': this.hideOnMobile
+      "trunc-text": true,
+      "line-clamp": this.maxLinesEnable,
+      "hide-on-mobile": this.hideOnMobile,
     };
   }
   getLineCuttoff() {
     let result;
     if (this.maxLinesEnable) {
       result = {
-        ['-webkit-line-clamp']: `${this.maxLines}`,
+        ["-webkit-line-clamp"]: `${this.maxLines}`,
       };
     }
     return result;

package/dist/cjs/ptc-tooltip.cjs.entry.js

@@ -9,25 +9,25 @@ const ptcTooltipCss = "h1.sc-ptc-tooltip,h2.sc-ptc-tooltip,h3.sc-ptc-tooltip,h4.
 const PtcTooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.textDisplay = 'inline';
+    this.textDisplay = "inline";
     this.maxLength = 45;
     this.textLines = undefined;
-    this.description = 'This is a tooltip text placeholder';
-    this.zIndex = 'z-auto';
-    this.position = 'bottom';
+    this.description = "This is a tooltip text placeholder";
+    this.zIndex = "z-auto";
+    this.position = "bottom";
     this.styles = undefined;
-    this.mode = 'text-only';
-    this.theme = 'standard';
-    this.width = 'default';
+    this.mode = "text-only";
+    this.theme = "standard";
+    this.width = "default";
     this.hideOnMobile = false;
     this.isSmallScreen = undefined;
     this.noOverflow = false;
   }
   addTruncatedClass() {
     const appRoot = this.el;
-    const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
-    text.forEach(t => {
-      t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
+    const text = appRoot.querySelectorAll(".ellipsis-by-line-boxing");
+    text.forEach((t) => {
+      t.classList[t.scrollHeight > t.clientHeight ? "add" : "remove"]("truncated");
     });
   }
   windowResize() {
@@ -42,7 +42,7 @@ const PtcTooltip = class {
     for (const element of Array.from(allTabHeaders)) {
       let tabHeader = element;
       if (tabHeader) {
-        tabHeader.addEventListener('click', () => {
+        tabHeader.addEventListener("click", () => {
           setTimeout(() => {
             this.addTruncatedClass();
           }, 100);
@@ -58,18 +58,18 @@ const PtcTooltip = class {
     setTimeout(() => {
       this.addTruncatedClass();
     }, 1000);
-    this.enableAddTruncatedClass('tab-header');
-    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-    this.enableAddTruncatedClass('ptc-product-card');
-    document.addEventListener('readystatechange', () => {
-      if (document.readyState === 'complete') {
+    this.enableAddTruncatedClass("tab-header");
+    this.enableAddTruncatedClass("ptc-ellipsis-dropdown");
+    this.enableAddTruncatedClass("ptc-product-card");
+    document.addEventListener("readystatechange", () => {
+      if (document.readyState === "complete") {
         this.addTruncatedClass();
       }
     });
   }
   render() {
-    if (this.mode == 'wrapper') {
-      return (index.h(index.Host, { class: this.textDisplay }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "wrapper-content" }, index.h("div", { class: "slot-content" }, index.h("slot", null)), index.h("div", { class: `tooltip ${this.position} ${this.theme}` }, index.h("slot", { name: "description" }), this.description && index.h("span", { innerHTML: this.description })))));
+    if (this.mode == "wrapper") {
+      return (index.h(index.Host, { class: this.textDisplay }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "wrapper-content" }, index.h("div", { class: "slot-content" }, index.h("slot", null)), index.h("div", { class: `tooltip ${this.position} ${this.theme}` }, index.h("slot", { name: "description" }), this.description && (index.h("span", { innerHTML: this.description }))))));
     }
     else {
       const classMap = this.getCssClassMap();
@@ -78,24 +78,30 @@ const PtcTooltip = class {
       if (this.description.length > this.maxLength) {
         //const lastSpace = truncatedText.lastIndexOf(' ');
         //truncatedText = truncatedText.substring(0, lastSpace);
-        truncatedText += '... ';
+        truncatedText += "... ";
       }
-      return (index.h(index.Host, { class: { [this.textDisplay]: true, [this.width]: true, 'no-overflow': this.noOverflow } }, this.styles && index.h("style", null, this.styles), this.hideOnMobile && this.isSmallScreen ? (index.h("div", null, this.description)) : (index.h("div", { class: "text-content" }, this.textLines > 0 && !!this.textLines ? (index.h("div", { class: "ellipsis-by-line-boxing", style: cutOff, innerHTML: this.description })) : (index.h("div", { class: classMap }, truncatedText)), index.h("div", { class: `tooltip ${this.position} ${this.theme}`, innerHTML: this.description })))));
+      return (index.h(index.Host, { class: {
+          [this.textDisplay]: true,
+          [this.width]: true,
+          "no-overflow": this.noOverflow,
+        } }, this.styles && index.h("style", null, this.styles), this.hideOnMobile && this.isSmallScreen ? (index.h("div", null, this.description)) : (index.h("div", { class: "text-content" }, this.textLines > 0 && !!this.textLines ? (index.h("div", { class: "ellipsis-by-line-boxing", style: cutOff, innerHTML: this.description })) : (index.h("div", { class: classMap }, truncatedText)), index.h("div", { class: `tooltip ${this.position} ${this.theme}`, innerHTML: this.description })))));
     }
   }
   getCssClassMap() {
     return {
       // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
-      ['text-ellipsis']: true,
+      ["text-ellipsis"]: true,
       [this.zIndex]: this.description.length > this.maxLength ? true : false,
-      ['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
+      ["truncated"]: this.description.length > this.maxLength && !this.textLines
+        ? true
+        : false,
     };
   }
   getLineCuttoff() {
     let result;
     if (this.textLines && this.textLines > 0) {
       result = {
-        ['-webkit-line-clamp']: `${this.textLines}`,
+        ["-webkit-line-clamp"]: `${this.textLines}`,
       };
     }
     return result;

package/dist/cjs/ptc-two-column-media.cjs.entry.js

@@ -17,7 +17,7 @@ const PtcTwoColumnMedia = class {
   }
   getCssClassMap() {
     return {
-      [this.componentType]: this.componentType ? true : false
+      [this.componentType]: this.componentType ? true : false,
     };
   }
 };

package/dist/cjs/ptc-value-led-card.cjs.entry.js

@@ -13,7 +13,7 @@ const PtcValueLedCard = class {
     this.cardUpNext = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("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: "" }), index.h("div", { class: "card-content" }, index.h("span", { class: 'tag' }, this.cardUpNext), index.h("slot", { name: "card-title" }), index.h("ptc-spacer", { size: "x-small" }), index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("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: "" }), index.h("div", { class: "card-content" }, index.h("span", { class: "tag" }, this.cardUpNext), index.h("slot", { name: "card-title" }), index.h("ptc-spacer", { size: "x-small" }), index.h("slot", null))));
   }
 };
 PtcValueLedCard.style = ptcValueLedCardCss;

package/dist/cjs/ptc-value-led-content.cjs.entry.js

@@ -12,8 +12,7 @@ const PtcValueLedContent = class {
     this.contentTag = undefined;
   }
   render() {
-    return (index.h(index.Host, null, this.contentTag &&
-      index.h("div", { class: 'content-tag' }, this.contentTag), index.h("div", { class: "vl-content-title" }, index.h("slot", { name: "vl-content-title" })), index.h("slot", null)));
+    return (index.h(index.Host, null, this.contentTag && (index.h("div", { class: "content-tag" }, this.contentTag)), index.h("div", { class: "vl-content-title" }, index.h("slot", { name: "vl-content-title" })), index.h("slot", null)));
   }
 };
 PtcValueLedContent.style = ptcValueLedContentCss;

package/dist/cjs/ptc-value-led-intro.cjs.entry.js

@@ -12,7 +12,7 @@ const PtcValueLedIntro = class {
     this.contentTag = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'content-tag' }, this.contentTag), index.h("slot", null)));
+    return (index.h(index.Host, null, index.h("div", { class: "content-tag" }, this.contentTag), index.h("slot", null)));
   }
 };
 PtcValueLedIntro.style = ptcValueLedIntroCss;

package/dist/cjs/ptc-value-led-layout.cjs.entry.js

@@ -41,28 +41,37 @@ const PtcValueLedLayout = class {
     //if (!this.isMobile) {
     this.setActiveItem();
     //}
-    this.selectBtn = this.hostElement.shadowRoot.querySelector('.select-button');
-    this.customSelect = this.hostElement.shadowRoot.querySelector(".custom-select");
+    this.selectBtn =
+      this.hostElement.shadowRoot.querySelector(".select-button");
+    this.customSelect =
+      this.hostElement.shadowRoot.querySelector(".custom-select");
     this.optionsList = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li");
-    this.selectBtn.addEventListener('click', this.handleSelectButtonClick.bind(this));
+    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');
+    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');
+        ptcContainer.classList.remove("ptc-container");
+        item.classList.add("u-paddingTop-flush");
       }
     });
   }
   handleScroll() {
-    const scrollableEl = this.hostElement.shadowRoot.querySelector('.vl-layout-wrap');
+    const scrollableEl = this.hostElement.shadowRoot.querySelector(".vl-layout-wrap");
     if (scrollableEl) {
       const divRect = scrollableEl.getBoundingClientRect();
-      if (window.scrollY >= divRect.top && window.scrollY <= divRect.height) {
+      if (window.scrollY >= divRect.top &&
+        window.scrollY <= divRect.height) {
         this.setActiveItem();
-        const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+        const activeListItem = this.hostElement.shadowRoot.querySelector(".vl-list-wrap ul li.active");
         if (activeListItem) {
-          activeListItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          activeListItem.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "nearest",
+          });
         }
       }
     }
@@ -71,10 +80,10 @@ const PtcValueLedLayout = class {
     this.setActiveItem();
   }
   handleKeyDown(event) {
-    if (event.key === 'ArrowUp' ||
-      event.key === 'ArrowDown' ||
-      event.key === 'PageUp' ||
-      event.key === 'PageDown') {
+    if (event.key === "ArrowUp" ||
+      event.key === "ArrowDown" ||
+      event.key === "PageUp" ||
+      event.key === "PageDown") {
       this.setActiveItem();
     }
   }
@@ -106,40 +115,46 @@ const PtcValueLedLayout = class {
     this.customSelectDropdown();
   }
   handleDropdownScroll() {
-    let dropdownWrap = this.hostElement.shadowRoot.querySelector('.custom-select');
+    let dropdownWrap = this.hostElement.shadowRoot.querySelector(".custom-select");
     if (dropdownWrap) {
-      let body = dropdownWrap.querySelector('.select-dropdown');
+      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');
+      if (height < scrollHeight) {
+        //has scrollbar
+        if (scrollTop > 0) {
+          //can scroll up
+          dropdownWrap.classList.add("scroll-top");
         }
         else {
-          dropdownWrap.classList.remove('scroll-top');
+          dropdownWrap.classList.remove("scroll-top");
         }
-        if (offset + scrollTop < scrollHeight) { //can scroll down
-          dropdownWrap.classList.add('scroll-bottom');
+        if (offset + scrollTop < scrollHeight) {
+          //can scroll down
+          dropdownWrap.classList.add("scroll-bottom");
         }
         else {
-          dropdownWrap.classList.remove('scroll-bottom');
+          dropdownWrap.classList.remove("scroll-bottom");
         }
       }
     }
   }
   handleSelectButtonClick() {
     this.customSelect.classList.toggle("active");
-    this.selectBtn.setAttribute("aria-expanded", this.selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true");
+    this.selectBtn.setAttribute("aria-expanded", this.selectBtn.getAttribute("aria-expanded") === "true"
+      ? "false"
+      : "true");
   }
   getSidebarList() {
-    const sidebarList = document.querySelectorAll('.vl-content-item');
-    sidebarList.forEach(listItem => {
+    const sidebarList = document.querySelectorAll(".vl-content-item");
+    sidebarList.forEach((listItem) => {
       var _a, _b, _c, _d;
       //let itemTitle = listItem.getAttribute('comp-title');
-      let itemTitle = ((_b = (_a = listItem.querySelector('ptc-title h2')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || ((_d = (_c = listItem.querySelector('ptc-title h1')) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim());
-      let itemRef = listItem.getAttribute('id');
+      let itemTitle = ((_b = (_a = listItem.querySelector("ptc-title h2")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) ||
+        ((_d = (_c = listItem.querySelector("ptc-title h1")) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim());
+      let itemRef = listItem.getAttribute("id");
       let vlItem = { title: itemTitle, ref: itemRef };
       this.sidebarData.push(vlItem);
     });
@@ -158,58 +173,65 @@ const PtcValueLedLayout = class {
     else {
       this.updateActiveItem(0);
       if (this.isMobile) {
-        this.selectedValue.textContent = this.optionsList[0].textContent;
+        this.selectedValue.textContent =
+          this.optionsList[0].textContent;
       }
     }
   }
   updateActiveItem(index) {
     const listItem = this.hostElement.shadowRoot.querySelector(`.vl-list-wrap ul li:nth-child(${index + 1})`);
-    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+    const activeListItem = this.hostElement.shadowRoot.querySelector(".vl-list-wrap ul li.active");
     if (activeListItem) {
-      activeListItem.classList.remove('active');
+      activeListItem.classList.remove("active");
     }
     if (listItem) {
-      listItem.classList.add('active');
+      listItem.classList.add("active");
     }
     // Update the selected option in the mobile select
-    this.mobileSelect = this.hostElement.shadowRoot.querySelector('.mobile-select');
+    this.mobileSelect = this.hostElement.shadowRoot.querySelector(".mobile-select");
     if (this.mobileSelect) {
       // this.mobileSelect.selectedIndex = index;
-      this.selectedValue = this.hostElement.shadowRoot.querySelector(".selected-value");
+      this.selectedValue =
+        this.hostElement.shadowRoot.querySelector(".selected-value");
       this.optionsList = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li");
       this.optionsList.forEach((option) => {
         if (parseInt(option.id) === index) {
-          this.selectedValue.textContent = option.children[1].textContent;
+          this.selectedValue.textContent =
+            option.children[1].textContent;
         }
       });
       const listItemDrop = this.hostElement.shadowRoot.querySelector(`.select-dropdown li:nth-child(${index + 1})`);
-      const activeListItemDrop = this.hostElement.shadowRoot.querySelector('.select-dropdown li.active');
+      const activeListItemDrop = this.hostElement.shadowRoot.querySelector(".select-dropdown li.active");
       if (activeListItemDrop) {
-        activeListItemDrop.classList.remove('active');
+        activeListItemDrop.classList.remove("active");
       }
       if (listItemDrop) {
-        listItemDrop.classList.add('active');
+        listItemDrop.classList.add("active");
       }
     }
   }
   handleSelectChange(selectedIndex) {
     const section = document.getElementById(this.sidebarData[selectedIndex].ref);
     if (section) {
-      section.scrollIntoView({ behavior: 'smooth' });
+      section.scrollIntoView({ behavior: "smooth" });
       const sectionTop = section.offsetTop;
       window.scrollTo(0, sectionTop - 75);
     }
   }
   customSelectDropdown() {
-    this.selectedValue = this.hostElement.shadowRoot.querySelector(".selected-value");
+    this.selectedValue =
+      this.hostElement.shadowRoot.querySelector(".selected-value");
     if (this.customSelect && this.isMobile) {
       // add click event to select button
       this.optionsList.forEach((option, index) => {
         // Use arrow function to preserve the 'this' context
         const handler = (e) => {
           // Click Events
-          if (e.type === "click" && e.clientX !== 0 && e.clientY !== 0) {
-            this.selectedValue.textContent = option.children[1].textContent;
+          if (e.type === "click" &&
+            e.clientX !== 0 &&
+            e.clientY !== 0) {
+            this.selectedValue.textContent =
+              option.children[1].textContent;
             this.customSelect.classList.remove("active");
             // Call handleSelectChange with the selected index
             this.handleSelectChange(index);
@@ -233,19 +255,25 @@ const PtcValueLedLayout = class {
   onMenuitemKeydown(event) {
     let tgt = event.currentTarget, key = event.key;
     //let flag = false;
-    let dropdownLength = this.hostElement.shadowRoot.querySelectorAll('.select-dropdown li').length;
-    let dropButton = this.hostElement.shadowRoot.querySelector('.select-button');
+    let dropdownLength = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li").length;
+    let dropButton = this.hostElement.shadowRoot.querySelector(".select-button");
     if (event.ctrlKey || event.altKey || event.metaKey) {
       return;
     }
-    if (key === 'Tab') {
-      if ((dropdownLength - 1) == tgt.id) {
+    if (key === "Tab") {
+      if (dropdownLength - 1 == tgt.id) {
         dropButton.focus();
       }
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), index.h("div", { class: 'ptc-container' }, index.h("div", { class: "pdf-slot-wrapper" }, index.h("slot", { name: 'pdf-slot' })), index.h("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (index.h("div", { class: 'vl-sidebar' }, index.h("div", { class: 'vl-list-wrap' }, index.h("ul", { id: 'vl-side-list' }, this.sidebarData.map((item, index$1) => (index.h("li", { id: 'list-' + index$1, class: 'mf-listen' }, index.h("a", { href: "#" + item.ref, id: index$1, onClick: () => { this.updateActiveItem(index$1); } }, index.h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), index.h("span", { style: { display: 'none !important' } }), index.h("div", { class: 'vl-content-wrap' }, index.h("div", { class: "custom-select mobile-select" }, index.h("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, index.h("span", { class: "selected-value" }, "Select option"), index.h("span", { class: "arrow" })), index.h("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index$1) => (index.h("li", { role: "option", id: index$1, onClick: () => this.selectDropOption(index$1), tabIndex: 0, onKeyDown: (e) => { this.onMenuitemKeydown(e); } }, index.h("input", { type: "radio", id: item.title, name: "vl-drop-list", tabIndex: -1 }), index.h("label", { htmlFor: item.title }, index.h("i", { class: "bx bxl-github" }), item.title)))))), index.h("div", { class: 'vl-content-slot-wrap' }, index.h("slot", null)))))));
+    return (index.h(index.Host, null, index.h("div", { class: "top-image", style: {
+        backgroundImage: `url(${this.topBackgroundImage})`,
+      } }), index.h("div", { class: "ptc-container" }, index.h("div", { class: "pdf-slot-wrapper" }, index.h("slot", { name: "pdf-slot" })), index.h("div", { class: "vl-layout-wrap" }, this.sidebarData.length > 0 && !this.isMobile && (index.h("div", { class: "vl-sidebar" }, index.h("div", { class: "vl-list-wrap" }, index.h("ul", { id: "vl-side-list" }, this.sidebarData.map((item, index$1) => (index.h("li", { id: "list-" + index$1, class: "mf-listen" }, index.h("a", { href: "#" + item.ref, id: index$1, onClick: () => {
+        this.updateActiveItem(index$1);
+      } }, index.h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), index.h("span", { style: { display: "none !important" } }), index.h("div", { class: "vl-content-wrap" }, index.h("div", { class: "custom-select mobile-select" }, index.h("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, index.h("span", { class: "selected-value" }, "Select option"), index.h("span", { class: "arrow" })), index.h("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index$1) => (index.h("li", { role: "option", id: index$1, onClick: () => this.selectDropOption(index$1), tabIndex: 0, onKeyDown: (e) => {
+        this.onMenuitemKeydown(e);
+      } }, index.h("input", { type: "radio", id: item.title, name: "vl-drop-list", tabIndex: -1 }), index.h("label", { htmlFor: item.title }, index.h("i", { class: "bx bxl-github" }), item.title)))))), index.h("div", { class: "vl-content-slot-wrap" }, index.h("slot", null)))))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const ptcValueLedSpeedBumpCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{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,.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,.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,.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,.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,.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,.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,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.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,.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,.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,.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,.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,.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{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{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{color:var(--color-green-06)}.vjs-social-share-links a{color:var(--color-white)}.vjs-social-share-links a:hover{color:var(--color-white)}: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}:host .sb-card .card-content-wrap .card-content ::slotted([slot=title-slot]){color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small) !important;font-weight:var(--ptc-font-weight-bold) !important;line-height:var(--ptc-line-height-p) !important;margin:0 0 4px 0;text-decoration:none}@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 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 ptcValueLedSpeedBumpCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{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,.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,.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,.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,.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,.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,.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,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form 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,.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,.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,.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,.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,.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,.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{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{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{color:var(--color-green-06)}.vjs-social-share-links a{color:var(--color-white)}.vjs-social-share-links a:hover{color:var(--color-white)}: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}:host .sb-card .card-content-wrap .card-content ::slotted([slot=title-slot]){color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small) !important;font-weight:var(--ptc-font-weight-bold) !important;line-height:var(--ptc-line-height-p) !important;margin:0 0 4px 0;text-decoration:none}@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 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 = class {
   constructor(hostRef) {
@@ -18,13 +18,16 @@ const PtcValueLedSpeedBump = class {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
-    this.ctaLink = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('link-href');
-    this.ctaTarget = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('target');
+    this.ctaLink = document
+      .querySelector("ptc-value-led-speed-bump ptc-button")
+      .getAttribute("link-href");
+    this.ctaTarget = document
+      .querySelector("ptc-value-led-speed-bump ptc-button")
+      .getAttribute("target");
   }
   render() {
-    const Tag = !!this.isMobile ? 'a' : 'div';
-    return (index.h(index.Host, null, index.h(Tag, { class: "sb-card", href: this.ctaLink, target: this.ctaTarget }, this.cardImage &&
-      index.h("div", { class: 'img-wrap' }, index.h("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}" })), index.h("div", { class: 'card-content-wrap' }, index.h("div", { class: 'card-content' }, index.h("slot", { name: 'title-slot' }), index.h("p", null, index.h("slot", null))), index.h("div", { class: 'cta-slot' }, index.h("slot", { name: 'cta-slot' }))))));
+    const Tag = !!this.isMobile ? "a" : "div";
+    return (index.h(index.Host, null, index.h(Tag, { class: "sb-card", href: this.ctaLink, target: this.ctaTarget }, this.cardImage && (index.h("div", { class: "img-wrap" }, index.h("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}" }))), index.h("div", { class: "card-content-wrap" }, index.h("div", { class: "card-content" }, index.h("slot", { name: "title-slot" }), index.h("p", null, index.h("slot", null))), index.h("div", { class: "cta-slot" }, index.h("slot", { name: "cta-slot" }))))));
   }
 };
 PtcValueLedSpeedBump.style = ptcValueLedSpeedBumpCss;

package/dist/cjs/ptc-value-prop-card.cjs.entry.js

@@ -10,13 +10,13 @@ const PtcValuePropCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cardHref = undefined;
-    this.target = '_self';
+    this.target = "_self";
     this.rel = undefined;
     this.cardTitle = undefined;
     this.backgroundImage = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("a", { href: this.cardHref, rel: this.rel, target: this.target, class: 'vp-card' }, index.h("ptc-img", { "image-type": "smart-img", "img-url": this.backgroundImage, "load-mode": "lazy-bg" }, index.h("div", { class: "overlay" }), index.h("div", { class: 'caption' }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-align": "center", "para-color": "primary-white", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-z-index": "z-auto" }, this.cardTitle), index.h("slot", null))))));
+    return (index.h(index.Host, null, index.h("a", { href: this.cardHref, rel: this.rel, target: this.target, class: "vp-card" }, index.h("ptc-img", { "image-type": "smart-img", "img-url": this.backgroundImage, "load-mode": "lazy-bg" }, index.h("div", { class: "overlay" }), index.h("div", { class: "caption" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-align": "center", "para-color": "primary-white", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-z-index": "z-auto" }, this.cardTitle), index.h("slot", null))))));
   }
 };
 PtcValuePropCard.style = ptcValuePropCardCss;