@ptcwebops/ptcw-design 3.4.2 → 3.4.4

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

@@ -1,270 +1,270 @@
-import { Host, h } from '@stencil/core';
-export class PtcValueLedLayout {
-  constructor() {
-    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) {
-    console.log(event);
-    this.setActiveItem();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'ArrowUp' ||
-      event.key === 'ArrowDown' ||
-      event.key === 'PageUp' ||
-      event.key === 'PageDown') {
-      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 = 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);
-      });
-    }
-  }
-  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)))))));
-  }
-  static get is() { return "ptc-value-led-layout"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-value-led-layout.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-value-led-layout.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "topBackgroundImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "wheel",
-        "method": "handleWheel",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcValueLedLayout {
+  constructor() {
+    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();
+    }
+  }
+  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);
+      });
+    }
+  }
+  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)))))));
+  }
+  static get is() { return "ptc-value-led-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-layout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-layout.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "topBackgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "wheel",
+        "method": "handleWheel",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}