@ptcwebops/ptcw-design 3.2.4 → 3.2.6

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

@@ -1,156 +1,156 @@
-import { Host, h } from '@stencil/core';
-export class PtcValueLedLayout {
-  constructor() {
-    this.sidebarData = [];
-    this.dropFlag = false;
-    this.topBackgroundImage = undefined;
-    this.isMobile = undefined;
-  }
-  // @Watch('isMobile')
-  // handleMobileChange() {
-  //   if (this.isMobile) {
-  //     const mobileSelect = this.hostElement.shadowRoot.querySelector(".mobile-select");
-  //     const contentWrap = this.hostElement.shadowRoot.querySelector(".vl-content-wrap");
-  //     const observer = new IntersectionObserver(
-  //       ([e]) => {
-  //         const isPinned = e.intersectionRatio < 1;
-  //         mobileSelect.classList.toggle("is-pinned", isPinned);
-  //         contentWrap.classList.toggle("is-pinned", isPinned);
-  //       },
-  //       { threshold: [1] }
-  //     );
-  //     if (mobileSelect) {
-  //       observer.observe(mobileSelect);
-  //     }
-  //   }
-  // }
-  handleResize() {
-    this.isMobile = window.innerWidth < 992;
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
-  }
-  handleScroll() {
-    this.setActiveItem();
-  }
-  componentWillLoad() {
-    this.getSidebarList();
-    this.isMobile = window.innerWidth < 992;
-  }
-  componentDidLoad() {
-    if (!this.isMobile) {
-      this.setActiveItem();
-    }
-  }
-  getSidebarList() {
-    const sidebarList = document.querySelectorAll('.vl-content-item');
-    sidebarList.forEach(listItem => {
-      let itemTitle = listItem.getAttribute('comp-title');
-      let itemRef = listItem.getAttribute('id');
-      let vlItem = { title: itemTitle, ref: itemRef };
-      this.sidebarData.push(vlItem);
-    });
-  }
-  setActiveItem() {
-    const windowScroll = window.scrollY || window.pageYOffset;
-    let scrollAdd = this.isMobile ? 85 : 5;
-    if (windowScroll >= 149) {
-      this.sidebarData.forEach((item, i) => {
-        const section = document.getElementById(item.ref);
-        // console.log(section);
-        // console.log(section.offsetTop);
-        // console.log(windowScroll);
-        if (section && section.offsetTop <= windowScroll + scrollAdd) {
-          this.updateActiveItem(i);
-        }
-      });
-    }
-    else {
-      this.updateActiveItem(0);
-    }
-  }
-  updateActiveItem(index) {
-    // console.log(index);
-    //  debugger
-    const listItem = this.hostElement.shadowRoot.querySelector(`.vl-list-wrap ul li:nth-child(${index + 1})`);
-    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
-    if (activeListItem) {
-      activeListItem.classList.remove('active');
-    }
-    if (listItem) {
-      listItem.classList.add('active');
-    }
-    // Update the selected option in the mobile select
-    const mobileSelect = this.hostElement.shadowRoot.querySelector('.mobile-select');
-    if (mobileSelect) {
-      mobileSelect.selectedIndex = index;
-    }
-  }
-  handleSelectChange(event) {
-    const selectedIndex = event.target.selectedIndex;
-    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
-    if (section) {
-      section.scrollIntoView({ behavior: 'smooth' });
-      const sectionTop = section.offsetTop;
-      window.scrollTo(0, sectionTop - 75);
-    }
-  }
-  render() {
-    return (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)))))));
-  }
-  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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "scroll",
-        "method": "handleScroll",
-        "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;
+  }
+  // @Watch('isMobile')
+  // handleMobileChange() {
+  //   if (this.isMobile) {
+  //     const mobileSelect = this.hostElement.shadowRoot.querySelector(".mobile-select");
+  //     const contentWrap = this.hostElement.shadowRoot.querySelector(".vl-content-wrap");
+  //     const observer = new IntersectionObserver(
+  //       ([e]) => {
+  //         const isPinned = e.intersectionRatio < 1;
+  //         mobileSelect.classList.toggle("is-pinned", isPinned);
+  //         contentWrap.classList.toggle("is-pinned", isPinned);
+  //       },
+  //       { threshold: [1] }
+  //     );
+  //     if (mobileSelect) {
+  //       observer.observe(mobileSelect);
+  //     }
+  //   }
+  // }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    if (!this.isMobile) {
+      this.setActiveItem();
+    }
+  }
+  handleScroll() {
+    this.setActiveItem();
+  }
+  componentWillLoad() {
+    this.getSidebarList();
+    this.isMobile = window.innerWidth < 992;
+  }
+  componentDidLoad() {
+    if (!this.isMobile) {
+      this.setActiveItem();
+    }
+  }
+  getSidebarList() {
+    const sidebarList = document.querySelectorAll('.vl-content-item');
+    sidebarList.forEach(listItem => {
+      let itemTitle = listItem.getAttribute('comp-title');
+      let itemRef = listItem.getAttribute('id');
+      let vlItem = { title: itemTitle, ref: itemRef };
+      this.sidebarData.push(vlItem);
+    });
+  }
+  setActiveItem() {
+    const windowScroll = window.scrollY || window.pageYOffset;
+    let scrollAdd = this.isMobile ? 85 : 5;
+    if (windowScroll >= 149) {
+      this.sidebarData.forEach((item, i) => {
+        const section = document.getElementById(item.ref);
+        // console.log(section);
+        // console.log(section.offsetTop);
+        // console.log(windowScroll);
+        if (section && section.offsetTop <= windowScroll + scrollAdd) {
+          this.updateActiveItem(i);
+        }
+      });
+    }
+    else {
+      this.updateActiveItem(0);
+    }
+  }
+  updateActiveItem(index) {
+    // console.log(index);
+    //  debugger
+    const listItem = this.hostElement.shadowRoot.querySelector(`.vl-list-wrap ul li:nth-child(${index + 1})`);
+    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+    if (activeListItem) {
+      activeListItem.classList.remove('active');
+    }
+    if (listItem) {
+      listItem.classList.add('active');
+    }
+    // Update the selected option in the mobile select
+    const mobileSelect = this.hostElement.shadowRoot.querySelector('.mobile-select');
+    if (mobileSelect) {
+      mobileSelect.selectedIndex = index;
+    }
+  }
+  handleSelectChange(event) {
+    const selectedIndex = event.target.selectedIndex;
+    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+      const sectionTop = section.offsetTop;
+      window.scrollTo(0, sectionTop - 75);
+    }
+  }
+  render() {
+    return (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)))))));
+  }
+  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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -1,97 +1,97 @@
-import { Host, h } from '@stencil/core';
-export class PtcValueLedSpeedBump {
-  constructor() {
-    this.cardTitle = undefined;
-    this.cardImage = undefined;
-    this.isMobile = undefined;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 768;
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 768;
-    this.ctaLink = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('link-href');
-    this.ctaTarget = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('target');
-  }
-  render() {
-    const Tag = !!this.isMobile ? 'a' : 'div';
-    return (h(Host, null, h(Tag, { class: "sb-card", href: this.ctaLink, target: this.ctaTarget }, this.cardImage &&
-      h("div", { class: 'img-wrap' }, h("ptc-picture", { alt: "image", "border-radius": "radius-standard", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "" })), h("div", { class: 'card-content-wrap' }, h("div", { class: 'card-content' }, h("h4", null, this.cardTitle), h("p", null, h("slot", null))), h("div", { class: 'cta-slot' }, h("slot", { name: 'cta-slot' }))))));
-  }
-  static get is() { return "ptc-value-led-speed-bump"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-value-led-speed-bump.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-value-led-speed-bump.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-title",
-        "reflect": false
-      },
-      "cardImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-image",
-        "reflect": false
-      },
-      "isMobile": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-mobile",
-        "reflect": false
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcValueLedSpeedBump {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+    this.ctaLink = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('link-href');
+    this.ctaTarget = document.querySelector('ptc-value-led-speed-bump ptc-button').getAttribute('target');
+  }
+  render() {
+    const Tag = !!this.isMobile ? 'a' : 'div';
+    return (h(Host, null, h(Tag, { class: "sb-card", href: this.ctaLink, target: this.ctaTarget }, this.cardImage &&
+      h("div", { class: 'img-wrap' }, h("ptc-picture", { alt: "image", "border-radius": "radius-standard", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "" })), h("div", { class: 'card-content-wrap' }, h("div", { class: 'card-content' }, h("h4", null, this.cardTitle), h("p", null, h("slot", null))), h("div", { class: 'cta-slot' }, h("slot", { name: 'cta-slot' }))))));
+  }
+  static get is() { return "ptc-value-led-speed-bump"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-speed-bump.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-speed-bump.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-image",
+        "reflect": false
+      },
+      "isMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-mobile",
+        "reflect": false
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}