@ptcwebops/ptcw-design 3.2.6 → 3.2.7

package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.css

@@ -96,7 +96,7 @@
 :host .vl-layout-wrap .vl-list-wrap {
   width: 100%;
   padding: 8px 0;
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - 64px);
   background-color: #fff;
   border-radius: var(--ptc-border-radius-standard);
 }
@@ -190,9 +190,6 @@
   }
 }
 :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;
@@ -202,15 +199,8 @@
   /* Safari and Chrome */
   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 {
@@ -218,6 +208,126 @@
     margin-left: -32px;
   }
 }
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select {
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  :host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select {
+    display: none;
+  }
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-weight: 700;
+  line-height: 1.5;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px 4px 0px 0px;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.24);
+  padding: 24px;
+  border: none;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .selected-value {
+  text-align: left;
+  font-weight: 700;
+  line-height: 1.5;
+  font-size: 18px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .arrow {
+  min-width: 14px;
+  width: 14px;
+  height: 10px;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M2 2.30469L6.94975 7.60799L11.8995 2.30469" stroke="%2300890B" stroke-width="3" stroke-linecap="round"/></svg>');
+  background-repeat: no-repeat;
+  transition: transform ease-in-out 0.3s;
+  margin-left: 15px;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown {
+  position: absolute;
+  list-style: none;
+  width: 100%;
+  border-radius: 0 0 4px 4px;
+  background: var(--color-white);
+  margin: 0;
+  padding: 0;
+  /* Drop Shadow (X-Large) */
+  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.24);
+  max-height: 70vh;
+  overflow-y: auto;
+  transition: 0.5s ease;
+  z-index: 30000;
+  opacity: 0;
+  visibility: hidden;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown:focus-within {
+  box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li {
+  position: relative;
+  cursor: pointer;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px 32px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1.25;
+  font-weight: 400;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: calc(100% - 32px);
+  background-color: transparent;
+  position: absolute;
+  left: 16px;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label {
+  font-weight: 700;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label::before {
+  background-color: var(--color-green-07);
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio] {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]:checked ~ label {
+  font-weight: 700;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar {
+  width: 7px;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 25px;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 25px;
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow {
+  transform: rotate(180deg);
+}
+:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .select-dropdown {
+  opacity: 1;
+  visibility: visible;
+}
 :host .vl-layout-wrap .vl-content-wrap .mobile-select:focus-visible {
   outline: none;
 }
@@ -233,4 +343,7 @@
   :host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap {
     padding: 0;
   }
+}
+:host .select-dropdown input:focus ~ label {
+  background-color: #dfdfdf;
 }

package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js

@@ -5,6 +5,7 @@ export class PtcValueLedLayout {
     this.dropFlag = false;
     this.topBackgroundImage = undefined;
     this.isMobile = undefined;
+    this.selectedValue = undefined;
   }
   // @Watch('isMobile')
   // handleMobileChange() {
@@ -24,23 +25,31 @@ export class PtcValueLedLayout {
   //     }
   //   }
   // }
-  handleResize() {
+  componentWillLoad() {
+    this.getSidebarList();
     this.isMobile = window.innerWidth < 992;
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
+  }
+  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();
   }
   handleScroll() {
     this.setActiveItem();
   }
-  componentWillLoad() {
-    this.getSidebarList();
+  handleResize() {
     this.isMobile = window.innerWidth < 992;
+    this.setActiveItem();
+    this.customSelectDropdown();
   }
-  componentDidLoad() {
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
+  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');
@@ -57,9 +66,6 @@ export class PtcValueLedLayout {
     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);
         }
@@ -67,11 +73,12 @@ export class PtcValueLedLayout {
     }
     else {
       this.updateActiveItem(0);
+      if (this.isMobile) {
+        this.selectedValue = this.optionsList[0].textContent;
+      }
     }
   }
   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) {
@@ -81,13 +88,27 @@ export class PtcValueLedLayout {
       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;
+    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(event) {
-    const selectedIndex = event.target.selectedIndex;
+  handleSelectChange(selectedIndex) {
     const section = document.getElementById(this.sidebarData[selectedIndex].ref);
     if (section) {
       section.scrollIntoView({ behavior: 'smooth' });
@@ -95,9 +116,35 @@ export class PtcValueLedLayout {
       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);
+      });
+    }
+  }
   render() {
-    return (h(Host, null, h("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h("div", { class: 'ptc-container' }, h("div", { class: "pdf-slot-wrapper" }, h("slot", { name: 'pdf-slot' })), h("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h("div", { class: 'vl-sidebar' }, h("div", { class: 'vl-list-wrap' }, h("ul", null, this.sidebarData.map((item) => (h("li", null, h("a", { href: "#" + item.ref }, h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h("div", { class: 'vl-content-wrap' }, this.isMobile &&
-      h("select", { class: 'mobile-select', onChange: (event) => this.handleSelectChange(event) }, this.sidebarData.map((item) => (h("option", { value: item.title }, " ", item.title)))), h("div", { class: 'vl-content-slot-wrap' }, h("slot", null)))))));
+    return (h(Host, null, h("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h("div", { class: 'ptc-container' }, h("div", { class: "pdf-slot-wrapper" }, h("slot", { name: 'pdf-slot' })), h("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h("div", { class: 'vl-sidebar' }, h("div", { class: 'vl-list-wrap' }, h("ul", null, this.sidebarData.map((item) => (h("li", null, h("a", { href: "#" + item.ref }, h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h("span", { style: { display: 'none !important' } }), h("div", { class: 'vl-content-wrap' }, h("div", { class: "custom-select mobile-select" }, h("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h("span", { class: "selected-value" }, "Select option"), h("span", { class: "arrow" })), h("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown" }, this.sidebarData.map((item, index) => (h("li", { role: "option", id: index }, h("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h("label", { htmlFor: item.title }, h("i", { class: "bx bxl-github" }), item.title)))))), h("div", { class: 'vl-content-slot-wrap' }, h("slot", null)))))));
   }
   static get is() { return "ptc-value-led-layout"; }
   static get encapsulation() { return "shadow"; }
@@ -129,6 +176,23 @@ export class PtcValueLedLayout {
         },
         "attribute": "top-background-image",
         "reflect": false
+      },
+      "selectedValue": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-value",
+        "reflect": false
       }
     };
   }
@@ -140,14 +204,14 @@ export class PtcValueLedLayout {
   static get elementRef() { return "hostElement"; }
   static get listeners() {
     return [{
-        "name": "resize",
-        "method": "handleResize",
+        "name": "scroll",
+        "method": "handleScroll",
         "target": "window",
         "capture": false,
         "passive": true
       }, {
-        "name": "scroll",
-        "method": "handleScroll",
+        "name": "resize",
+        "method": "handleResize",
         "target": "window",
         "capture": false,
         "passive": true

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.js

@@ -68,7 +68,7 @@ export class PtcValueLedSpeedBump {
       },
       "isMobile": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

package/dist/custom-elements/index.js

@@ -25564,7 +25564,7 @@ const PtcValueLedIntro$1 = class extends HTMLElement$1 {
   static get style() { return ptcValueLedIntroCss; }
 };
 
-const ptcValueLedLayoutCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}:host{display:block;position:relative}:host *{box-sizing:border-box}:host .top-image{background-color:rgba(0, 0, 0, 0.8);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:1rem 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:64px;width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-04)}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;max-height:calc(100vh - 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 ptcValueLedLayoutCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}:host{display:block;position:relative}:host *{box-sizing:border-box}:host .top-image{background-color:rgba(0, 0, 0, 0.8);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:1rem 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:64px;width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-04)}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;max-height:calc(100vh - 64px);background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap{z-index:105;margin:auto;position:sticky;top:32px;right:0;float:right;overflow-y:auto;overflow-x:hidden}}:host .vl-layout-wrap .vl-list-wrap ul{margin:0;padding:0;list-style:none}:host .vl-layout-wrap .vl-list-wrap ul li{display:none}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap ul li{display:block;margin:0 16px 8px 16px}}:host .vl-layout-wrap .vl-list-wrap ul li a{display:block;padding:8px 16px;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);text-decoration:none;color:var(--color-gray-10);position:relative;background-color:transparent;border-radius:var(--ptc-border-radius-standard)}:host .vl-layout-wrap .vl-list-wrap ul li a::before{content:\"\";display:block;width:2px;height:calc(100% - 16px);background-color:transparent;position:absolute;left:8px}:host .vl-layout-wrap .vl-list-wrap ul li a:hover{background-color:var(--color-gray-02)}:host .vl-layout-wrap .vl-list-wrap ul li.active{display:block}:host .vl-layout-wrap .vl-list-wrap ul li.active a{font-weight:700}:host .vl-layout-wrap .vl-list-wrap ul li.active a::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar{width:8px}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-track{background:transparent}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .vl-layout-wrap .vl-list-wrap select{z-index:105;background-color:#fff}:host .vl-layout-wrap .vl-content-wrap{width:100%;padding:0 20px 20px 20px;background-color:#fff;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap{padding:0 32px 32px 32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap{width:78%;padding:48px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select{position:sticky;top:-1px;z-index:1056;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--color-white);width:calc(100% + 40px);margin-left:-20px}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap .mobile-select{width:calc(100% + 64px);margin-left:-32px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:block}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:none}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button{width:100%;background-color:transparent;border-radius:0.25rem;cursor:pointer;font-weight:700;line-height:1.5;font-size:18px;display:flex;justify-content:space-between;align-items:center;border-radius:4px 4px 0px 0px;box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.24);padding:24px;border:none}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .selected-value{text-align:left;font-weight:700;line-height:1.5;font-size:18px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .arrow{min-width:14px;width:14px;height:10px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M2 2.30469L6.94975 7.60799L11.8995 2.30469\" stroke=\"%2300890B\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>');background-repeat:no-repeat;transition:transform ease-in-out 0.3s;margin-left:15px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown{position:absolute;list-style:none;width:100%;border-radius:0 0 4px 4px;background:var(--color-white);margin:0;padding:0;box-shadow:0px 8px 24px 0px rgba(0, 0, 0, 0.24);max-height:70vh;overflow-y:auto;transition:0.5s ease;z-index:30000;opacity:0;visibility:hidden}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown:focus-within{box-shadow:0 10px 25px rgba(94, 108, 233, 0.6)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li{position:relative;cursor:pointer}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label{display:block;width:100%;box-sizing:border-box;padding:16px 32px;cursor:pointer;font-size:18px;line-height:1.25;font-weight:400}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label::before{content:\"\";display:block;width:2px;height:calc(100% - 32px);background-color:transparent;position:absolute;left:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]{position:absolute;left:0;opacity:0}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]:checked~label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar{width:7px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow{transform:rotate(180deg)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .select-dropdown{opacity:1;visibility:visible}:host .vl-layout-wrap .vl-content-wrap .mobile-select:focus-visible{outline:none}:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}@media only screen and (min-width: 768px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding-top:32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}}:host .select-dropdown input:focus~label{background-color:#dfdfdf}";
 
 const PtcValueLedLayout$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25575,6 +25575,7 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
     this.dropFlag = false;
     this.topBackgroundImage = undefined;
     this.isMobile = undefined;
+    this.selectedValue = undefined;
   }
   // @Watch('isMobile')
   // handleMobileChange() {
@@ -25594,23 +25595,31 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
   //     }
   //   }
   // }
-  handleResize() {
+  componentWillLoad() {
+    this.getSidebarList();
     this.isMobile = window.innerWidth < 992;
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
+  }
+  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();
   }
   handleScroll() {
     this.setActiveItem();
   }
-  componentWillLoad() {
-    this.getSidebarList();
+  handleResize() {
     this.isMobile = window.innerWidth < 992;
+    this.setActiveItem();
+    this.customSelectDropdown();
   }
-  componentDidLoad() {
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
+  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');
@@ -25627,9 +25636,6 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
     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);
         }
@@ -25637,11 +25643,12 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
     }
     else {
       this.updateActiveItem(0);
+      if (this.isMobile) {
+        this.selectedValue = this.optionsList[0].textContent;
+      }
     }
   }
   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) {
@@ -25651,13 +25658,27 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
       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;
+    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(event) {
-    const selectedIndex = event.target.selectedIndex;
+  handleSelectChange(selectedIndex) {
     const section = document.getElementById(this.sidebarData[selectedIndex].ref);
     if (section) {
       section.scrollIntoView({ behavior: 'smooth' });
@@ -25665,9 +25686,35 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
       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);
+      });
+    }
+  }
   render() {
-    return (h$1(Host, null, h$1("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h$1("div", { class: 'ptc-container' }, h$1("div", { class: "pdf-slot-wrapper" }, h$1("slot", { name: 'pdf-slot' })), h$1("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h$1("div", { class: 'vl-sidebar' }, h$1("div", { class: 'vl-list-wrap' }, h$1("ul", null, this.sidebarData.map((item) => (h$1("li", null, h$1("a", { href: "#" + item.ref }, h$1("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h$1("div", { class: 'vl-content-wrap' }, this.isMobile &&
-      h$1("select", { class: 'mobile-select', onChange: (event) => this.handleSelectChange(event) }, this.sidebarData.map((item) => (h$1("option", { value: item.title }, " ", item.title)))), h$1("div", { class: 'vl-content-slot-wrap' }, h$1("slot", null)))))));
+    return (h$1(Host, null, h$1("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h$1("div", { class: 'ptc-container' }, h$1("div", { class: "pdf-slot-wrapper" }, h$1("slot", { name: 'pdf-slot' })), h$1("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h$1("div", { class: 'vl-sidebar' }, h$1("div", { class: 'vl-list-wrap' }, h$1("ul", null, this.sidebarData.map((item) => (h$1("li", null, h$1("a", { href: "#" + item.ref }, h$1("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h$1("span", { style: { display: 'none !important' } }), h$1("div", { class: 'vl-content-wrap' }, h$1("div", { class: "custom-select mobile-select" }, h$1("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h$1("span", { class: "selected-value" }, "Select option"), h$1("span", { class: "arrow" })), h$1("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown" }, this.sidebarData.map((item, index) => (h$1("li", { role: "option", id: index }, h$1("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h$1("label", { htmlFor: item.title }, h$1("i", { class: "bx bxl-github" }), item.title)))))), h$1("div", { class: 'vl-content-slot-wrap' }, h$1("slot", null)))))));
   }
   get hostElement() { return this; }
   static get style() { return ptcValueLedLayoutCss; }
@@ -26477,8 +26524,8 @@ const PtcValueLedCard = /*@__PURE__*/proxyCustomElement(PtcValueLedCard$1, [1,"p
 const PtcValueLedContent = /*@__PURE__*/proxyCustomElement(PtcValueLedContent$1, [1,"ptc-value-led-content"]);
 const PtcValueLedContentHighlight = /*@__PURE__*/proxyCustomElement(PtcValueLedContentHighlight$1, [6,"ptc-value-led-content-highlight"]);
 const PtcValueLedIntro = /*@__PURE__*/proxyCustomElement(PtcValueLedIntro$1, [1,"ptc-value-led-intro",{"contentTag":[1,"content-tag"]}]);
-const PtcValueLedLayout = /*@__PURE__*/proxyCustomElement(PtcValueLedLayout$1, [1,"ptc-value-led-layout",{"topBackgroundImage":[1,"top-background-image"],"isMobile":[32]},[[9,"resize","handleResize"],[9,"scroll","handleScroll"]]]);
-const PtcValueLedSpeedBump = /*@__PURE__*/proxyCustomElement(PtcValueLedSpeedBump$1, [1,"ptc-value-led-speed-bump",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"isMobile":[4,"is-mobile"]},[[9,"resize","handleResize"]]]);
+const PtcValueLedLayout = /*@__PURE__*/proxyCustomElement(PtcValueLedLayout$1, [1,"ptc-value-led-layout",{"topBackgroundImage":[1,"top-background-image"],"selectedValue":[1032,"selected-value"],"isMobile":[32]},[[9,"scroll","handleScroll"],[9,"resize","handleResize"]]]);
+const PtcValueLedSpeedBump = /*@__PURE__*/proxyCustomElement(PtcValueLedSpeedBump$1, [1,"ptc-value-led-speed-bump",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"isMobile":[1028,"is-mobile"]},[[9,"resize","handleResize"]]]);
 const PtcValuePropCard = /*@__PURE__*/proxyCustomElement(PtcValuePropCard$1, [1,"ptc-value-prop-card",{"cardHref":[1,"card-href"],"target":[1],"rel":[1],"cardTitle":[1,"card-title"],"backgroundImage":[1,"background-image"]}]);
 const PtcWhitePaper = /*@__PURE__*/proxyCustomElement(PtcWhitePaper$1, [1,"ptc-white-paper",{"items":[16],"topBackgroundImage":[1,"top-background-image"],"topBackgroundImageAlt":[1,"top-background-image-alt"],"itemsPerPage":[2,"items-per-page"],"currentPage":[32],"totalPages":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]);
 const SequentialBundle = /*@__PURE__*/proxyCustomElement(SequentialBundle$1, [1,"sequential-bundle",{"isMobile":[32]},[[9,"resize","handleResize"]]]);