@ptcwebops/ptcw-design 3.6.8 → 3.7.0

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

@@ -6,225 +6,225 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcValueLedLayoutCss = "h1,h2,h3,h4,h5,h6,p,ul,li{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{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}}.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) {
-    index.registerInstance(this, hostRef);
-    this.sidebarData = [];
-    this.dropFlag = false;
-    this.topBackgroundImage = undefined;
-    this.isMobile = undefined;
-    this.selectedValue = 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);
-  //     }
-  //   }
-  // }
-  componentWillLoad() {
-    this.getSidebarList();
-    this.isMobile = window.innerWidth < 992;
-  }
-  componentDidLoad() {
-    //if (!this.isMobile) {
-    this.setActiveItem();
-    //}
-    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.customSelectDropdown();
-    document.querySelectorAll('.video-embad-container-value-led-class').forEach(item => {
-      const ptcContainer = item.querySelector('.ptc-container');
-      if (ptcContainer) {
-        ptcContainer.classList.remove('ptc-container');
-        item.classList.add('u-paddingTop-flush');
-      }
-    });
-  }
-  // @Listen('scroll', { target: 'window' })
-  // handleScroll() {
-  //   this.setActiveItem();
-  // }
-  handleWheel( /*event: WheelEvent*/) {
-    //console.log(event);
-    this.setActiveItem();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'ArrowUp' ||
-      event.key === 'ArrowDown' ||
-      event.key === 'PageUp' ||
-      event.key === 'PageDown') {
-      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();
-    this.customSelectDropdown();
-  }
-  handleDropdownScroll() {
-    let dropdownWrap = this.hostElement.shadowRoot.querySelector('.custom-select');
-    if (dropdownWrap) {
-      let body = dropdownWrap.querySelector('.select-dropdown');
-      var height = body.clientHeight;
-      var scrollHeight = body.scrollHeight;
-      var scrollTop = body.scrollTop;
-      var offset = body.offsetHeight;
-      if (height < scrollHeight) { //has scrollbar
-        if (scrollTop > 0) { //can scroll up
-          dropdownWrap.classList.add('scroll-top');
-        }
-        else {
-          dropdownWrap.classList.remove('scroll-top');
-        }
-        if (offset + scrollTop < scrollHeight) { //can scroll down
-          dropdownWrap.classList.add('scroll-bottom');
-        }
-        else {
-          dropdownWrap.classList.remove('scroll-bottom');
-        }
-      }
-    }
-  }
-  handleSelectButtonClick() {
-    this.customSelect.classList.toggle("active");
-    this.selectBtn.setAttribute("aria-expanded", this.selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true");
-  }
-  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);
-        if (section && section.offsetTop <= windowScroll + scrollAdd) {
-          this.updateActiveItem(i);
-        }
-      });
-    }
-    else {
-      this.updateActiveItem(0);
-      if (this.isMobile) {
-        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');
-    if (activeListItem) {
-      activeListItem.classList.remove('active');
-    }
-    if (listItem) {
-      listItem.classList.add('active');
-    }
-    // Update the selected option in the 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.optionsList = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li");
-      this.optionsList.forEach((option) => {
-        if (parseInt(option.id) === index) {
-          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');
-      if (activeListItemDrop) {
-        activeListItemDrop.classList.remove('active');
-      }
-      if (listItemDrop) {
-        listItemDrop.classList.add('active');
-      }
-    }
-  }
-  handleSelectChange(selectedIndex) {
-    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
-    if (section) {
-      section.scrollIntoView({ behavior: 'smooth' });
-      const sectionTop = section.offsetTop;
-      window.scrollTo(0, sectionTop - 75);
-    }
-  }
-  customSelectDropdown() {
-    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;
-            this.customSelect.classList.remove("active");
-            // Call handleSelectChange with the selected index
-            this.handleSelectChange(index);
-          }
-          // Key Events
-          if (e.key === "Enter") {
-            this.selectedValue.textContent = option.textContent;
-            this.customSelect.classList.remove("active");
-            // Call handleSelectChange with the selected index
-            this.handleSelectChange(index);
-          }
-        };
-        option.addEventListener("keyup", handler);
-        option.addEventListener("click", handler);
-      });
-    }
-  }
-  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, 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); }
-};
+const PtcValueLedLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sidebarData = [];
+    this.dropFlag = false;
+    this.topBackgroundImage = undefined;
+    this.isMobile = undefined;
+    this.selectedValue = 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);
+  //     }
+  //   }
+  // }
+  componentWillLoad() {
+    this.getSidebarList();
+    this.isMobile = window.innerWidth < 992;
+  }
+  componentDidLoad() {
+    //if (!this.isMobile) {
+    this.setActiveItem();
+    //}
+    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.customSelectDropdown();
+    document.querySelectorAll('.video-embad-container-value-led-class').forEach(item => {
+      const ptcContainer = item.querySelector('.ptc-container');
+      if (ptcContainer) {
+        ptcContainer.classList.remove('ptc-container');
+        item.classList.add('u-paddingTop-flush');
+      }
+    });
+  }
+  // @Listen('scroll', { target: 'window' })
+  // handleScroll() {
+  //   this.setActiveItem();
+  // }
+  handleWheel( /*event: WheelEvent*/) {
+    //console.log(event);
+    this.setActiveItem();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'PageUp' ||
+      event.key === 'PageDown') {
+      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();
+    this.customSelectDropdown();
+  }
+  handleDropdownScroll() {
+    let dropdownWrap = this.hostElement.shadowRoot.querySelector('.custom-select');
+    if (dropdownWrap) {
+      let body = dropdownWrap.querySelector('.select-dropdown');
+      var height = body.clientHeight;
+      var scrollHeight = body.scrollHeight;
+      var scrollTop = body.scrollTop;
+      var offset = body.offsetHeight;
+      if (height < scrollHeight) { //has scrollbar
+        if (scrollTop > 0) { //can scroll up
+          dropdownWrap.classList.add('scroll-top');
+        }
+        else {
+          dropdownWrap.classList.remove('scroll-top');
+        }
+        if (offset + scrollTop < scrollHeight) { //can scroll down
+          dropdownWrap.classList.add('scroll-bottom');
+        }
+        else {
+          dropdownWrap.classList.remove('scroll-bottom');
+        }
+      }
+    }
+  }
+  handleSelectButtonClick() {
+    this.customSelect.classList.toggle("active");
+    this.selectBtn.setAttribute("aria-expanded", this.selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true");
+  }
+  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);
+        if (section && section.offsetTop <= windowScroll + scrollAdd) {
+          this.updateActiveItem(i);
+        }
+      });
+    }
+    else {
+      this.updateActiveItem(0);
+      if (this.isMobile) {
+        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');
+    if (activeListItem) {
+      activeListItem.classList.remove('active');
+    }
+    if (listItem) {
+      listItem.classList.add('active');
+    }
+    // Update the selected option in the 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.optionsList = this.hostElement.shadowRoot.querySelectorAll(".select-dropdown li");
+      this.optionsList.forEach((option) => {
+        if (parseInt(option.id) === index) {
+          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');
+      if (activeListItemDrop) {
+        activeListItemDrop.classList.remove('active');
+      }
+      if (listItemDrop) {
+        listItemDrop.classList.add('active');
+      }
+    }
+  }
+  handleSelectChange(selectedIndex) {
+    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+      const sectionTop = section.offsetTop;
+      window.scrollTo(0, sectionTop - 75);
+    }
+  }
+  customSelectDropdown() {
+    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;
+            this.customSelect.classList.remove("active");
+            // Call handleSelectChange with the selected index
+            this.handleSelectChange(index);
+          }
+          // Key Events
+          if (e.key === "Enter") {
+            this.selectedValue.textContent = option.textContent;
+            this.customSelect.classList.remove("active");
+            // Call handleSelectChange with the selected index
+            this.handleSelectChange(index);
+          }
+        };
+        option.addEventListener("keyup", handler);
+        option.addEventListener("click", handler);
+      });
+    }
+  }
+  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, 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); }
+};
 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 = "h1,h2,h3,h4,h5,h6,p,ul,li{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{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}}: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) {
-    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", "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("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", "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("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;

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

@@ -6,19 +6,19 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcValuePropCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li{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{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}}: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) {
-    index.registerInstance(this, hostRef);
-    this.cardHref = undefined;
-    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" }, index.h("ptc-tooltip", { "max-length": "70", description: this.cardTitle })), index.h("slot", null))))));
-  }
-};
+const PtcValuePropCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardHref = undefined;
+    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" }, index.h("ptc-tooltip", { "max-length": "70", description: this.cardTitle })), index.h("slot", null))))));
+  }
+};
 PtcValuePropCard.style = ptcValuePropCardCss;
 
 exports.ptc_value_prop_card = PtcValuePropCard;