@ptcwebops/ptcw-design 3.4.5 → 3.4.6

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

@@ -62,6 +62,28 @@ export class PtcValueLedLayout {
       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();
@@ -187,8 +209,11 @@ export class PtcValueLedLayout {
       });
     }
   }
+  selectDropOption(index) {
+    this.updateActiveItem(index);
+  }
   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, index) => (h("li", null, h("a", { href: "#" + item.ref, onClick: () => { this.updateActiveItem(index); } }, 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", onScroll: () => this.handleDropdownScroll() }, 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)))))));
+    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, index) => (h("li", null, h("a", { href: "#" + item.ref, id: index, onClick: () => { this.updateActiveItem(index); } }, 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", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index) => (h("li", { role: "option", id: index, onClick: () => this.selectDropOption(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"; }
@@ -259,6 +284,36 @@ export class PtcValueLedLayout {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "mousedown",
+        "method": "handleMouseDown",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseup",
+        "method": "handleMouseUp",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchstart",
+        "method": "handleTouchStart",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchmove",
+        "method": "handleTouchMove",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchend",
+        "method": "handleTouchEnd",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }, {
         "name": "resize",
         "method": "handleResize",

package/dist/custom-elements/index.js

@@ -799,11 +799,20 @@ const ListItem$2 = class extends HTMLElement$1 {
     return (h$1(Host, { class: classMap }, this.styles && h$1("style", null, this.styles), h$1("li", null, this.linkHref ? (h$1("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { 'aria-label': this.ariaLabel } : {})), h$1("slot", null))) : (h$1("slot", null)))));
   }
   getCssClassMap() {
+    let bcEnable = false;
+    if (this.hostElement && this.hostElement.parentElement) {
+      try {
+        bcEnable = (this.hostElement.parentElement.classList.contains('center') && this.hostElement.parentElement.tagName === 'PTC-BREADCRUMB');
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
     return {
       [this.listType]: true,
       ['flush-before']: this.flushBefore ? true : false,
       [this.color]: !!this.color ? true : false,
-      ['breadcrumb-center']: (this.hostElement.parentElement.classList.contains('center') && this.hostElement.parentElement.tagName === 'PTC-BREADCRUMB')
+      ['breadcrumb-center']: bcEnable
     };
   }
   get hostElement() { return this; }
@@ -25683,7 +25692,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;font-family:var(--ptc-font-latin)}:host .top-image{background-color:rgba(0, 0, 0, 0.6);background-blend-mode:multiply;position:absolute;z-index:-1;width:100%;height:500px;background-size:cover;background-position:center}:host .pdf-slot-wrapper{padding:var(--ptc-element-spacing-04) 0;width:100%;text-align:right}:host .vl-layout-wrap{margin-top:var(--ptc-element-spacing-04);width:100%;position:relative}@media only screen and (min-width: 992px){:host .vl-layout-wrap{display:flex;margin-top:40px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-sidebar{width:22%;margin-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-sidebar{margin-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 1440px){:host .vl-layout-wrap .vl-sidebar{margin-right:40px}}:host .vl-layout-wrap .vl-list-wrap{width:100%;padding:8px 0;box-shadow:var(--ptc-shadow-x-large);max-height:calc(100vh - 64px);background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap{z-index:105;margin:auto;position:sticky;top:32px;right:0;float:right;overflow-y:auto;overflow-x:hidden;padding:var(--ptc-layout-spacing-02) 0}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap{padding:var(--ptc-layout-spacing-03) 0}}:host .vl-layout-wrap .vl-list-wrap ul{margin:0;padding:0;list-style:none}:host .vl-layout-wrap .vl-list-wrap ul li{display:none}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-list-wrap ul li{display:block;margin:0 8px 4px 8px}}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap ul li{margin:0 16px 8px 16px}}:host .vl-layout-wrap .vl-list-wrap ul li a{display:block;padding:8px 16px;font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);text-decoration:none;color:var(--color-gray-10);position:relative;background-color:transparent;border-radius:var(--ptc-border-radius-standard)}@media only screen and (min-width: 1200px){:host .vl-layout-wrap .vl-list-wrap ul li a{font-size:var(--ptc-font-size-small)}}:host .vl-layout-wrap .vl-list-wrap ul li a::before{content:\"\";display:block;width:2px;height:calc(100% - 16px);background-color:transparent;position:absolute;left:4px}:host .vl-layout-wrap .vl-list-wrap ul li a:hover{background-color:var(--color-gray-02)}:host .vl-layout-wrap .vl-list-wrap ul li.active{display:block}:host .vl-layout-wrap .vl-list-wrap ul li.active a{font-weight:var(--ptc-font-weight-bold)}:host .vl-layout-wrap .vl-list-wrap ul li.active a::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar{width:8px}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-track{background:transparent}:host .vl-layout-wrap .vl-list-wrap::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .vl-layout-wrap .vl-list-wrap select{z-index:105;background-color:var(--color-white)}:host .vl-layout-wrap .vl-content-wrap{width:100%;padding:0 20px 20px 20px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-large)}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap{padding:0 32px 32px 32px}}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap{width:78%;padding:48px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select{position:sticky;top:-1px;z-index:1056;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--color-white);width:calc(100% + 40px);margin-left:-20px;border-top-left-radius:4px;border-top-right-radius:4px}@media only screen and (min-width: 480px){:host .vl-layout-wrap .vl-content-wrap .mobile-select{width:calc(100% + 64px);margin-left:-32px}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:block}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select{display:none}}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button{width:100%;background-color:transparent;border-radius:0.25rem;cursor:pointer;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-size:var(--ptc-font-size-small);display:flex;justify-content:space-between;align-items:center;border-radius:4px 4px 0px 0px;box-shadow:var(--ptc-shadow-x-large);padding:var(--ptc-element-spacing-06);border:none;color:var(--color-gray-10);position:relative}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button::after{content:\"\";width:100%;height:0;background-color:transparent;display:block;position:absolute;bottom:0;box-shadow:0 16px 16px rgba(0, 0, 0, 0.2);left:0;right:0;z-index:105666}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .selected-value{text-align:left;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-size:var(--ptc-font-size-small);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-button .arrow{min-width:14px;width:14px;height:10px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M2 2.30469L6.94975 7.60799L11.8995 2.30469\" stroke=\"%2300890B\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>');background-repeat:no-repeat;transition:transform ease-in-out 0.3s;margin-left:15px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown{position:absolute;list-style:none;width:100%;border-radius:0 0 4px 4px;background:var(--color-white);margin:0;padding:16px 0;max-height:70vh;overflow-y:auto;transition:0.5s ease;z-index:30000;box-shadow:0px 16px 16px rgba(0, 0, 0, 0.24);border-top:1px solid var(--color-gray-02);opacity:0;visibility:hidden}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li{position:relative;cursor:pointer}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label{display:block;width:100%;box-sizing:border-box;padding:16px 32px;cursor:pointer;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-regular);color:var(--color-gray-10)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li label::before{content:\"\";display:block;width:2px;height:calc(100% - 32px);background-color:transparent;position:absolute;left:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown li.active label::before{background-color:var(--color-green-07)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]{position:absolute;left:0;opacity:0}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown input[type=radio]:checked~label{font-weight:700}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar{width:7px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track{background:var(--color-white);border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:25px}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow{transform:rotate(180deg)}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .select-dropdown{opacity:1;visibility:visible}:host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.scroll-top.active .select-button::after{height:16px}:host .vl-layout-wrap .vl-content-wrap .mobile-select:focus-visible{outline:none}:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:var(--ptc-element-spacing-07) 0 0 0}@media only screen and (min-width: 992px){:host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap{padding:0}}:host .select-dropdown input:focus~label{background-color:#dfdfdf}";
+const ptcValueLedLayoutCss = ".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$1 = class extends HTMLElement$1 {
   constructor() {
@@ -25751,6 +25760,28 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
       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();
@@ -25876,8 +25907,11 @@ const PtcValueLedLayout$1 = class extends HTMLElement$1 {
       });
     }
   }
+  selectDropOption(index) {
+    this.updateActiveItem(index);
+  }
   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, index) => (h$1("li", null, h$1("a", { href: "#" + item.ref, onClick: () => { this.updateActiveItem(index); } }, 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", onScroll: () => this.handleDropdownScroll() }, 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)))))));
+    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, index) => (h$1("li", null, h$1("a", { href: "#" + item.ref, id: index, onClick: () => { this.updateActiveItem(index); } }, 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", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index) => (h$1("li", { role: "option", id: index, onClick: () => this.selectDropOption(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; }
@@ -26476,7 +26510,7 @@ const PtcValueLedCard = /*@__PURE__*/proxyCustomElement(PtcValueLedCard$1, [1,"p
 const PtcValueLedContent = /*@__PURE__*/proxyCustomElement(PtcValueLedContent$1, [1,"ptc-value-led-content",{"contentTag":[1,"content-tag"]}]);
 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"],"selectedValue":[1032,"selected-value"],"isMobile":[32]},[[9,"wheel","handleWheel"],[8,"keydown","handleKeyDown"],[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,"wheel","handleWheel"],[8,"keydown","handleKeyDown"],[9,"mousedown","handleMouseDown"],[9,"mouseup","handleMouseUp"],[9,"touchstart","handleTouchStart"],[9,"touchmove","handleTouchMove"],[9,"touchend","handleTouchEnd"],[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":[1],"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"]]]);