@ptcwebops/ptcw-design 3.2.2 → 3.2.3

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

@@ -6,102 +6,102 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcTooltipCss = ".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); }
-};
+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

@@ -6,21 +6,21 @@ 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 PtcTwoColumnMedia = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.componentType = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("slot", null)));
-  }
-  getCssClassMap() {
-    return {
-      [this.componentType]: this.componentType ? true : false
-    };
-  }
-};
+const PtcTwoColumnMedia = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.componentType = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.componentType]: this.componentType ? true : false
+    };
+  }
+};
 PtcTwoColumnMedia.style = ptcTwoColumnMediaCss;
 
 exports.ptc_two_column_media = PtcTwoColumnMedia;

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

@@ -6,16 +6,16 @@ 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:16px}@media only screen and (min-width: 768px){:host{display:inline-flex;align-items:flex-start;gap:24px}}:host ptc-picture{max-width:200px;min-width:150px;margin-bottom:24px}@media only screen and (min-width: 480px){:host ptc-picture{min-width:200px}}@media only screen and (min-width: 768px){:host ptc-picture{margin-bottom:0}}:host .card-content .tag{display:block;margin-bottom:8px;font-size:14px;font-weight:600;line-height:1.5}";
 
-const PtcValueLedCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardImage = 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' }, "Up Next"), index.h("ptc-title", { type: "h3", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), index.h("ptc-spacer", { size: "x-small" }), index.h("slot", null))));
-  }
-};
+const PtcValueLedCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardImage = 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' }, "Up Next"), index.h("ptc-title", { type: "h3", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), index.h("ptc-spacer", { size: "x-small" }), index.h("slot", null))));
+  }
+};
 PtcValueLedCard.style = ptcValueLedCardCss;
 
 exports.ptc_value_led_card = PtcValueLedCard;

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

@@ -6,14 +6,14 @@ 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:0 0 48px 0}@media only screen and (min-width: 480px){.sc-ptc-value-led-content-highlight-h{margin:0 0 48px 40px}}@media only screen and (min-width: 992px){.sc-ptc-value-led-content-highlight-h{margin:8px 0 48px 48px}}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>p{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul li{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}.sc-ptc-value-led-content-highlight-h.sc-ptc-value-led-content-highlight-s>ul{padding-left:12px}";
 
-const PtcValueLedContentHighlight = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
+const PtcValueLedContentHighlight = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
 PtcValueLedContentHighlight.style = ptcValueLedContentHighlightCss;
 
 exports.ptc_value_led_content_highlight = PtcValueLedContentHighlight;

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

@@ -6,14 +6,14 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcValueLedContentCss = ":host{display:block;padding-bottom:48px}:host .vl-content-title{margin-bottom:24px}@media only screen and (min-width: 768px){:host .vl-content-title{margin-bottom:32px}}";
 
-const PtcValueLedContent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "vl-content-title" }, index.h("slot", { name: "vl-content-title" })), index.h("slot", null)));
-  }
-};
+const PtcValueLedContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "vl-content-title" }, index.h("slot", { name: "vl-content-title" })), index.h("slot", null)));
+  }
+};
 PtcValueLedContent.style = ptcValueLedContentCss;
 
 exports.ptc_value_led_content = PtcValueLedContent;

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

@@ -6,15 +6,15 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcValueLedIntroCss = ":host{display:block;padding-bottom:48px;padding-top:32px}@media only screen and (min-width: 768px){:host{padding-top:0}}:host .content-tag{font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);font-weight:var(--ptc-font-weight-semibold);margin-bottom:var(--ptc-element-spacing-01)}";
 
-const PtcValueLedIntro = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.contentTag = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'content-tag' }, this.contentTag), index.h("slot", null)));
-  }
-};
+const PtcValueLedIntro = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.contentTag = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: 'content-tag' }, this.contentTag), index.h("slot", null)));
+  }
+};
 PtcValueLedIntro.style = ptcValueLedIntroCss;
 
 exports.ptc_value_led_intro = PtcValueLedIntro;

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

@@ -6,109 +6,109 @@ 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}:host .top-image{background-color:rgba(0, 0, 0, 0.8);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:1rem 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:64px;width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-04)}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;max-height:calc(100vh - 200px);background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap{z-index:105;margin:auto;position:sticky;top:32px;right:0;float:right;overflow-y:auto;overflow-x:hidden}}:host .vl-layout-wrap .vl-list-wrap ul{margin:0;padding:0;list-style:none}:host .vl-layout-wrap .vl-list-wrap ul li{display:none}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap ul li{display:block;margin:0 16px 8px 16px}}:host .vl-layout-wrap .vl-list-wrap ul li a{display:block;padding:8px 16px;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);text-decoration:none;color:var(--color-gray-10);position:relative;background-color:transparent;border-radius:var(--ptc-border-radius-standard)}:host .vl-layout-wrap .vl-list-wrap ul li a::before{content:\"\";display:block;width:2px;height:calc(100% - 16px);background-color:transparent;position:absolute;left:8px}:host .vl-layout-wrap .vl-list-wrap ul li a:hover{background-color:var(--color-gray-02)}:host .vl-layout-wrap .vl-list-wrap ul li.active{display:block}:host .vl-layout-wrap .vl-list-wrap ul li.active a{font-weight:700}:host .vl-layout-wrap .vl-list-wrap ul li.active a::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar{width:8px}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-track{background:transparent}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .vl-layout-wrap .vl-list-wrap select{z-index:105;background-color:#fff}:host .vl-layout-wrap .vl-content-wrap{width:100%;padding:0 20px 20px 20px;background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap{padding:0 32px 32px 32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap{width:78%;padding:48px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select{font-size:18px;font-weight:700;line-height:1.5;position:sticky;top:-1px;z-index:1056;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--color-white);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;border-radius:4px 4px 0px 0px;box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.24);padding:24px 48px 24px 24px;border:none;width:calc(100% + 40px);margin-left:-20px;background-position:calc(100% - 24px) 50%}@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:focus-visible{outline:none}:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}@media only screen and (min-width: 768px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding-top:32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}}";
 
-const PtcValueLedLayout = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sidebarData = [];
-    this.dropFlag = false;
-    this.topBackgroundImage = undefined;
-    this.isMobile = undefined;
-  }
-  // @Watch('isMobile')
-  // handleMobileChange() {
-  //   if (this.isMobile) {
-  //     const mobileSelect = this.hostElement.shadowRoot.querySelector(".mobile-select");
-  //     const contentWrap = this.hostElement.shadowRoot.querySelector(".vl-content-wrap");
-  //     const observer = new IntersectionObserver(
-  //       ([e]) => {
-  //         const isPinned = e.intersectionRatio < 1;
-  //         mobileSelect.classList.toggle("is-pinned", isPinned);
-  //         contentWrap.classList.toggle("is-pinned", isPinned);
-  //       },
-  //       { threshold: [1] }
-  //     );
-  //     if (mobileSelect) {
-  //       observer.observe(mobileSelect);
-  //     }
-  //   }
-  // }
-  handleResize() {
-    this.isMobile = window.innerWidth < 992;
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
-  }
-  handleScroll() {
-    this.setActiveItem();
-  }
-  componentWillLoad() {
-    this.getSidebarList();
-    this.isMobile = window.innerWidth < 992;
-  }
-  componentDidLoad() {
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
-  }
-  getSidebarList() {
-    const sidebarList = document.querySelectorAll('.vl-content-item');
-    sidebarList.forEach(listItem => {
-      let itemTitle = listItem.getAttribute('comp-title');
-      let itemRef = listItem.getAttribute('id');
-      let vlItem = { title: itemTitle, ref: itemRef };
-      this.sidebarData.push(vlItem);
-    });
-  }
-  setActiveItem() {
-    const windowScroll = window.scrollY || window.pageYOffset;
-    let scrollAdd = this.isMobile ? 85 : 5;
-    if (windowScroll >= 149) {
-      this.sidebarData.forEach((item, i) => {
-        const section = document.getElementById(item.ref);
-        // console.log(section);
-        // console.log(section.offsetTop);
-        // console.log(windowScroll);
-        if (section && section.offsetTop <= windowScroll + scrollAdd) {
-          this.updateActiveItem(i);
-        }
-      });
-    }
-    else {
-      this.updateActiveItem(0);
-    }
-  }
-  updateActiveItem(index) {
-    // console.log(index);
-    //  debugger
-    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');
-    if (activeListItem) {
-      activeListItem.classList.remove('active');
-    }
-    if (listItem) {
-      listItem.classList.add('active');
-    }
-    // Update the selected option in the mobile select
-    const mobileSelect = this.hostElement.shadowRoot.querySelector('.mobile-select');
-    if (mobileSelect) {
-      mobileSelect.selectedIndex = index;
-    }
-  }
-  handleSelectChange(event) {
-    const selectedIndex = event.target.selectedIndex;
-    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
-    if (section) {
-      section.scrollIntoView({ behavior: 'smooth' });
-      const sectionTop = section.offsetTop;
-      window.scrollTo(0, sectionTop - 75);
-    }
-  }
-  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.h("li", null, index.h("a", { href: "#" + item.ref }, index.h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), index.h("div", { class: 'vl-content-wrap' }, this.isMobile &&
-      index.h("select", { class: 'mobile-select', onChange: (event) => this.handleSelectChange(event) }, this.sidebarData.map((item) => (index.h("option", { value: item.title }, " ", item.title)))), index.h("div", { class: 'vl-content-slot-wrap' }, index.h("slot", null)))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
+const PtcValueLedLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sidebarData = [];
+    this.dropFlag = false;
+    this.topBackgroundImage = undefined;
+    this.isMobile = undefined;
+  }
+  // @Watch('isMobile')
+  // handleMobileChange() {
+  //   if (this.isMobile) {
+  //     const mobileSelect = this.hostElement.shadowRoot.querySelector(".mobile-select");
+  //     const contentWrap = this.hostElement.shadowRoot.querySelector(".vl-content-wrap");
+  //     const observer = new IntersectionObserver(
+  //       ([e]) => {
+  //         const isPinned = e.intersectionRatio < 1;
+  //         mobileSelect.classList.toggle("is-pinned", isPinned);
+  //         contentWrap.classList.toggle("is-pinned", isPinned);
+  //       },
+  //       { threshold: [1] }
+  //     );
+  //     if (mobileSelect) {
+  //       observer.observe(mobileSelect);
+  //     }
+  //   }
+  // }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    if (!this.isMobile) {
+      this.setActiveItem();
+    }
+  }
+  handleScroll() {
+    this.setActiveItem();
+  }
+  componentWillLoad() {
+    this.getSidebarList();
+    this.isMobile = window.innerWidth < 992;
+  }
+  componentDidLoad() {
+    if (!this.isMobile) {
+      this.setActiveItem();
+    }
+  }
+  getSidebarList() {
+    const sidebarList = document.querySelectorAll('.vl-content-item');
+    sidebarList.forEach(listItem => {
+      let itemTitle = listItem.getAttribute('comp-title');
+      let itemRef = listItem.getAttribute('id');
+      let vlItem = { title: itemTitle, ref: itemRef };
+      this.sidebarData.push(vlItem);
+    });
+  }
+  setActiveItem() {
+    const windowScroll = window.scrollY || window.pageYOffset;
+    let scrollAdd = this.isMobile ? 85 : 5;
+    if (windowScroll >= 149) {
+      this.sidebarData.forEach((item, i) => {
+        const section = document.getElementById(item.ref);
+        // console.log(section);
+        // console.log(section.offsetTop);
+        // console.log(windowScroll);
+        if (section && section.offsetTop <= windowScroll + scrollAdd) {
+          this.updateActiveItem(i);
+        }
+      });
+    }
+    else {
+      this.updateActiveItem(0);
+    }
+  }
+  updateActiveItem(index) {
+    // console.log(index);
+    //  debugger
+    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');
+    if (activeListItem) {
+      activeListItem.classList.remove('active');
+    }
+    if (listItem) {
+      listItem.classList.add('active');
+    }
+    // Update the selected option in the mobile select
+    const mobileSelect = this.hostElement.shadowRoot.querySelector('.mobile-select');
+    if (mobileSelect) {
+      mobileSelect.selectedIndex = index;
+    }
+  }
+  handleSelectChange(event) {
+    const selectedIndex = event.target.selectedIndex;
+    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+      const sectionTop = section.offsetTop;
+      window.scrollTo(0, sectionTop - 75);
+    }
+  }
+  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.h("li", null, index.h("a", { href: "#" + item.ref }, index.h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), index.h("div", { class: 'vl-content-wrap' }, this.isMobile &&
+      index.h("select", { class: 'mobile-select', onChange: (event) => this.handleSelectChange(event) }, this.sidebarData.map((item) => (index.h("option", { value: item.title }, " ", item.title)))), index.h("div", { class: 'vl-content-slot-wrap' }, index.h("slot", null)))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
 PtcValueLedLayout.style = ptcValueLedLayoutCss;
 
 exports.ptc_value_led_layout = PtcValueLedLayout;

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

@@ -6,27 +6,27 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcValueLedSpeedBumpCss = ":host{display:block;margin-bottom:48px}:host .sb-card{display:block;border-radius:4px;background:var(--color-white);box-shadow:var(--ptc-shadow-x-small);text-decoration:none}@media only screen and (min-width: 480px){:host .sb-card{display:flex}}:host .sb-card .img-wrap{width:100%;max-height:120px;overflow:hidden}@media only screen and (min-width: 480px){:host .sb-card .img-wrap{max-width:120px;max-height:initial}}:host .sb-card .img-wrap ptc-picture{height:100%}:host .sb-card .card-content-wrap{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 16px 16px 16px;box-sizing:border-box}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .card-content{padding-right:24px}}:host .sb-card .card-content-wrap h4,:host .sb-card .card-content-wrap p{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);margin:0 0 4px 0;text-decoration:none}:host .sb-card .card-content-wrap p{margin:0;font-weight:var(--ptc-font-weight-semibold)}:host .sb-card .card-content-wrap .cta-slot{display:none}@media only screen and (min-width: 768px){:host .sb-card .card-content-wrap .cta-slot{display:block;min-width:140px;text-align:right}}";
 
-const PtcValueLedSpeedBump = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardImage = undefined;
-    this.isMobile = undefined;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 768;
-  }
-  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');
-  }
-  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", "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-wrap' }, index.h("div", { class: 'card-content' }, index.h("h4", null, this.cardTitle), index.h("p", null, index.h("slot", null))), index.h("div", { class: 'cta-slot' }, index.h("slot", { name: 'cta-slot' }))))));
-  }
-};
+const PtcValueLedSpeedBump = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  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');
+  }
+  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", "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-wrap' }, index.h("div", { class: 'card-content' }, index.h("h4", null, this.cardTitle), index.h("p", null, index.h("slot", null))), index.h("div", { class: 'cta-slot' }, index.h("slot", { name: 'cta-slot' }))))));
+  }
+};
 PtcValueLedSpeedBump.style = ptcValueLedSpeedBumpCss;
 
 exports.ptc_value_led_speed_bump = PtcValueLedSpeedBump;