@ptcwebops/ptcw-design 3.4.5 → 3.4.7

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

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cd9a1b1a.js');
+
+const ptcTooltipCss = "h1.sc-ptc-tooltip,h2.sc-ptc-tooltip,h3.sc-ptc-tooltip,h4.sc-ptc-tooltip,h5.sc-ptc-tooltip,h6.sc-ptc-tooltip,p.sc-ptc-tooltip,ul.sc-ptc-tooltip,li.sc-ptc-tooltip,span.sc-ptc-tooltip{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}.sc-ptc-tooltip-h{position:relative}.inline.sc-ptc-tooltip-h{display:inline}.inline.sc-ptc-tooltip-h .text-content.sc-ptc-tooltip{display:inline}.block.sc-ptc-tooltip-h{display:block}.text-ellipsis.sc-ptc-tooltip{position:relative;display:inline}.text-ellipsis.sc-ptc-tooltip:not(.truncated){z-index:auto !important}.z-auto.sc-ptc-tooltip{z-index:auto}.z-1.sc-ptc-tooltip{z-index:1}.z-2.sc-ptc-tooltip{z-index:2}.z-3.sc-ptc-tooltip{z-index:3}.z-999.sc-ptc-tooltip{z-index:999}.tooltip.sc-ptc-tooltip{position:absolute;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:2px;width:auto;height:auto;visibility:hidden;text-align:left;text-shadow:none;white-space:normal}@media only screen and (min-width: 480px){.tooltip.sc-ptc-tooltip{width:273px}}.tooltip.danger.sc-ptc-tooltip{color:var(--color-red-07);font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);border:2px solid var(--color-red-07);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);padding:var(--ptc-element-spacing-06)}.tooltip.danger.sc-ptc-tooltip a.sc-ptc-tooltip{color:var(--color-blue-07)}.tooltip.bottom.sc-ptc-tooltip{bottom:-12px;transform:translateY(100%)}.tooltip.bottom.sc-ptc-tooltip::after{top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.left.sc-ptc-tooltip{bottom:-12px;transform:translate(-80%, 100%)}.tooltip.left.sc-ptc-tooltip::after{top:1px;right:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.right.sc-ptc-tooltip{bottom:-12px;transform:translateY(100%);right:0px}@-moz-document url-prefix(){.tooltip.right{right:unset !important;bottom:unset !important;transform:translate(60%, 8px) !important}@media screen and (min-width: 992px){.tooltip.right{transform:translate(100%, 8px) !important}}}.tooltip.right.sc-ptc-tooltip::after{top:1px;left:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.top.sc-ptc-tooltip{top:-8px;transform:translateY(-100%)}.tooltip.top.sc-ptc-tooltip::after{left:50%;bottom:1px;transform:translate(-50%, 100%);border:8px solid transparent;border-top:8px solid var(--color-gray-09)}.tooltip.bottom-right.sc-ptc-tooltip{bottom:-12px;transform:translate(-60%, 100%)}.tooltip.bottom-right.sc-ptc-tooltip::after{top:1px;left:75%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.danger.sc-ptc-tooltip::after{top:0;border-bottom:8px solid var(--color-red-07)}.truncated.sc-ptc-tooltip{cursor:help}.truncated.sc-ptc-tooltip:hover+.tooltip.sc-ptc-tooltip{visibility:visible;z-index:9999}.wrapper-content.sc-ptc-tooltip{display:inline-block;position:relative}.wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{width:auto;min-width:72px;max-width:273px}.wrapper-content.sc-ptc-tooltip .slot-content.sc-ptc-tooltip:hover+.tooltip.sc-ptc-tooltip{visibility:visible;z-index:9999}.tooltip.sc-ptc-tooltip::after{content:\"\";position:absolute}.ellipsis-by-line-boxing.sc-ptc-tooltip{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}.full-width.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{width:100%}@media only screen and (min-width: 480px){.full-width.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{width:100%}}.no-overflow.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{display:none !important}.no-overflow.sc-ptc-tooltip-h .truncated.sc-ptc-tooltip.sc-ptc-tooltip{cursor:pointer}";
+
+const PtcTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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.styles = undefined;
+    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');
+    });
+  }
+  windowResize() {
+    this.verifiyScreenSize();
+  }
+  verifiyScreenSize() {
+    this.isSmallScreen = window.innerWidth < 768;
+  }
+  // Created this function to initialize the truncate function on specific elements like tabs
+  enableAddTruncatedClass(element) {
+    const allTabHeaders = document.querySelectorAll(element);
+    for (const element of Array.from(allTabHeaders)) {
+      let tabHeader = element;
+      if (tabHeader) {
+        tabHeader.addEventListener('click', () => {
+          setTimeout(() => {
+            this.addTruncatedClass();
+          }, 100);
+        });
+      }
+    }
+  }
+  componentWillLoad() {
+    this.verifiyScreenSize();
+  }
+  componentDidLoad() {
+    //this.addTruncatedClass();
+    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.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 })))));
+    }
+    else {
+      const classMap = this.getCssClassMap();
+      const cutOff = this.getLineCuttoff();
+      let truncatedText = this.description.substring(0, this.maxLength);
+      if (this.description.length > this.maxLength) {
+        //const lastSpace = truncatedText.lastIndexOf(' ');
+        //truncatedText = truncatedText.substring(0, lastSpace);
+        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 })))));
+    }
+  }
+  getCssClassMap() {
+    return {
+      // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
+      ['text-ellipsis']: true,
+      [this.zIndex]: this.description.length > this.maxLength ? 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}`,
+      };
+    }
+    return result;
+  }
+  get el() { return index.getElement(this); }
+};
+PtcTooltip.style = ptcTooltipCss;
+
+exports.ptc_tooltip = PtcTooltip;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-const ptcTwoColumnMediaCss = ":host{display:block;padding:var(--ptc-layout-spacing-02) 0}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-04) 0}}";
+const ptcTwoColumnMediaCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}:host{display:block;padding:var(--ptc-layout-spacing-02) 0}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-04) 0}}";
 
 const PtcTwoColumnMedia = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-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);color:var(--color-gray-10)}";
+const ptcValueLedCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}: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);color:var(--color-gray-10)}";
 
 const PtcValueLedCard = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-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 ptcValueLedContentHighlightCss = "h1.sc-ptc-value-led-content-highlight,h2.sc-ptc-value-led-content-highlight,h3.sc-ptc-value-led-content-highlight,h4.sc-ptc-value-led-content-highlight,h5.sc-ptc-value-led-content-highlight,h6.sc-ptc-value-led-content-highlight,p.sc-ptc-value-led-content-highlight,ul.sc-ptc-value-led-content-highlight,li.sc-ptc-value-led-content-highlight,span.sc-ptc-value-led-content-highlight{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}.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 = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-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)}: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 ptcValueLedContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}: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)}: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 PtcValueLedContent = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-const ptcValueLedIntroCss = ":host{display:block;margin-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{margin-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 ptcValueLedIntroCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}:host{display:block;margin-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{margin-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 = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-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;font-family:var(--ptc-font-latin)}: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-02) 0}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap{padding:var(--ptc-layout-spacing-03) 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 8px 4px 8px}}@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 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:var(--ptc-element-spacing-07) 0 0 0}@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 = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}.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;font-family:var(--ptc-font-latin)}: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-02) 0}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap{padding:var(--ptc-layout-spacing-03) 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 8px 4px 8px}}@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 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}@media only screen and (min-width: 992px){: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:var(--ptc-element-spacing-07) 0 0 0}@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 = class {
   constructor(hostRef) {
@@ -70,6 +70,28 @@ const PtcValueLedLayout = class {
       this.setActiveItem();
     }
   }
+  handleMouseDown( /*event: MouseEvent*/) {
+    // Add logic for mouse down on scrollbar
+    // For example, you can set a flag to track scrollbar dragging
+    this.setActiveItem();
+  }
+  handleMouseUp( /*event: MouseEvent*/) {
+    // Add logic for mouse up on scrollbar
+    // For example, you can reset the flag used for tracking scrollbar dragging
+    this.setActiveItem();
+  }
+  handleTouchStart( /*event: TouchEvent*/) {
+    // Add logic for touch start on scrollbar
+    this.setActiveItem();
+  }
+  handleTouchMove( /*event: TouchEvent*/) {
+    // Add logic for touch move on scrollbar
+    this.setActiveItem();
+  }
+  handleTouchEnd( /*event: TouchEvent*/) {
+    // Add logic for touch end on scrollbar
+    this.setActiveItem();
+  }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
     this.setActiveItem();
@@ -195,8 +217,11 @@ const PtcValueLedLayout = class {
       });
     }
   }
+  selectDropOption(index) {
+    this.updateActiveItem(index);
+  }
   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", null, this.sidebarData.map((item, index$1) => (index.h("li", null, index.h("a", { href: "#" + item.ref, 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 }, index.h("input", { type: "radio", id: item.title, name: "vl-drop-list" }), 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", null, this.sidebarData.map((item, index$1) => (index.h("li", null, 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) }, index.h("input", { type: "radio", id: item.title, name: "vl-drop-list" }), 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-cd9a1b1a.js');
 
-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 ptcValueLedSpeedBumpCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}: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 = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-const ptcValuePropCardCss = ":host{display:block}:host .vp-card{display:block;position:relative;box-shadow:var(--ptc-shadow-x-large);border-radius:var(--ptc-border-radius-large);overflow:hidden;height:200px}@media only screen and (min-width: 480px){:host .vp-card{height:250px}}@media only screen and (min-width: 768px){:host .vp-card{height:300px}}@media only screen and (min-width: 992px){:host .vp-card{height:548px}}:host .vp-card .overlay{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.33);z-index:1;opacity:0;transition:0.3s ease-out}:host .vp-card .caption{position:absolute;bottom:0;left:0;width:75%;text-align:center;padding:1rem;border-radius:var(--ptc-border-radius-large);border:1px solid var(--color-white);background-color:rgba(0, 0, 0, 0.6);backdrop-filter:blur(2px);color:var(--color-white);z-index:10;display:flex;justify-content:center;align-items:center;min-height:54px}@media only screen and (min-width: 480px){:host .vp-card .caption{width:60%}}@media only screen and (min-width: 768px){:host .vp-card .caption{width:75%}}:host .vp-card .caption ptc-para{text-decoration-color:var(--color-green-06);text-decoration-line:none;text-decoration-style:initial;text-underline-offset:5px;text-decoration-thickness:2px}:host .vp-card:hover .overlay{opacity:1;transition:0.3s ease-out}:host .vp-card:hover .caption ptc-para{text-decoration-line:underline}";
+const ptcValuePropCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,span{word-break:break-word;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;-webkit-hyphenate-limit-last:always;-webkit-hyphenate-limit-zone:6%;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-moz-hyphenate-limit-last:always;-moz-hyphenate-limit-zone:6%;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2;-ms-hyphenate-limit-last:always;-ms-hyphenate-limit-zone:6%}:host{display:block}:host .vp-card{display:block;position:relative;box-shadow:var(--ptc-shadow-x-large);border-radius:var(--ptc-border-radius-large);overflow:hidden;height:200px}@media only screen and (min-width: 480px){:host .vp-card{height:250px}}@media only screen and (min-width: 768px){:host .vp-card{height:300px}}@media only screen and (min-width: 992px){:host .vp-card{height:548px}}:host .vp-card .overlay{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.33);z-index:1;opacity:0;transition:0.3s ease-out}:host .vp-card .caption{position:absolute;bottom:0;left:0;width:75%;text-align:center;padding:1rem;border-radius:var(--ptc-border-radius-large);border:1px solid var(--color-white);background-color:rgba(0, 0, 0, 0.6);backdrop-filter:blur(2px);color:var(--color-white);z-index:10;display:flex;justify-content:center;align-items:center;min-height:54px}@media only screen and (min-width: 480px){:host .vp-card .caption{width:60%}}@media only screen and (min-width: 768px){:host .vp-card .caption{width:75%}}:host .vp-card .caption ptc-para{text-decoration-color:var(--color-green-06);text-decoration-line:none;text-decoration-style:initial;text-underline-offset:5px;text-decoration-thickness:2px}:host .vp-card:hover .overlay{opacity:1;transition:0.3s ease-out}:host .vp-card:hover .caption ptc-para{text-decoration-line:underline}";
 
 const PtcValuePropCard = class {
   constructor(hostRef) {