@ptcwebops/ptcw-design 2.9.5 → 2.9.7

package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.css

@@ -2,8 +2,6 @@
   display: block;
 }
 :host .back-to-top-button {
-  position: fixed;
-  bottom: 140px;
   right: 24px;
   width: 64px;
   height: 58px;
@@ -25,6 +23,14 @@
 :host .back-to-top-button:hover {
   opacity: 1;
 }
+:host .back-to-top-button-fixed {
+  position: fixed;
+  bottom: 140px;
+}
+:host .back-to-top-button-absolute {
+  position: absolute;
+  bottom: 140px;
+}
 :host .arrow {
   margin-bottom: 5px;
 }

package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.js

@@ -3,7 +3,42 @@ export class PtcBackToTop {
   constructor() {
     this.handleScroll = () => {
       const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+      const containerHeight = document.querySelector('.ptc-container-relative');
       this.showButton = scrollY > window.innerHeight * 1;
+      if (containerHeight) {
+        if (this.showButton && scrollY <= (containerHeight.clientHeight - window.innerHeight)) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.add('back-to-top-button-fixed');
+            }
+            if (btnelement.classList.contains('back-to-top-button-absolute')) {
+              btnelement.classList.remove('back-to-top-button-absolute');
+            }
+          }
+        }
+        else if (this.showButton && scrollY > (containerHeight.clientHeight - window.innerHeight)) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.remove('back-to-top-button-fixed');
+            }
+            if (!btnelement.classList.contains('back-to-top-button-absolute')) {
+              btnelement.classList.add('back-to-top-button-absolute');
+            }
+          }
+        }
+      }
+      else {
+        if (this.showButton) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.add('back-to-top-button-fixed');
+            }
+          }
+        }
+      }
     };
     this.showButton = false;
   }
@@ -49,6 +84,7 @@ export class PtcBackToTop {
       "showButton": {}
     };
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.js

@@ -28,8 +28,8 @@ export class PtcTheaterVideoModal {
     // });
     // console.log(this.cards);
     console.log(currentModalIndex);
-    this.modalType = this.cards[this.currentCardIndex].modalType;
     this.currentCardIndex = currentModalIndex;
+    this.modalType = this.cards[this.currentCardIndex].modalType;
     this.showModal = true;
   }
   closeCardModal() {

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

@@ -0,0 +1,212 @@
+.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;
+  }
+}
+:host .vl-layout-wrap .vl-list-wrap ul li a {
+  display: block;
+  padding: 12px 32px;
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-densest);
+  text-decoration: none;
+  color: var(--color-gray-10);
+  position: relative;
+}
+:host .vl-layout-wrap .vl-list-wrap ul li a::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: calc(100% - 24px);
+  background-color: transparent;
+  position: absolute;
+  left: 24px;
+}
+:host .vl-layout-wrap .vl-list-wrap ul li a:hover {
+  font-weight: 700;
+}
+:host .vl-layout-wrap .vl-list-wrap ul li a:hover::before {
+  background-color: var(--color-green-07);
+}
+: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 32px 32px 32px;
+  background-color: #fff;
+  border-radius: var(--ptc-border-radius-standard);
+}
+@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.is-pinned {
+  padding-top: 75px;
+}
+: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;
+  /* Firefox */
+  -webkit-appearance: none;
+  /* 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% + 64px);
+  margin-left: -32px;
+  background-position: calc(100% - 24px) 50%;
+}

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

@@ -0,0 +1,162 @@
+import { Host, h } from '@stencil/core';
+export class PtcValueLedLayout {
+  constructor() {
+    this.sidebarData = [];
+    this.dropFlag = false;
+    this.topBackgroundImage = undefined;
+    this.isMobile = undefined;
+  }
+  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() {
+    this.handleMobileChange();
+    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);
+    });
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    this.setActiveItem();
+  }
+  handleScroll() {
+    this.setActiveItem();
+  }
+  setActiveItem() {
+    const windowScroll = window.scrollY || window.pageYOffset;
+    if (windowScroll >= 100) {
+      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) {
+          this.updateActiveItem(i);
+        }
+      });
+    }
+    else {
+      this.updateActiveItem(0);
+    }
+  }
+  updateActiveItem(index) {
+    // console.log(index);
+    const activeListItem = this.hostElement.shadowRoot.querySelector('.vl-list-wrap ul li.active');
+    if (activeListItem) {
+      activeListItem.classList.remove('active');
+    }
+    const listItem = this.hostElement.shadowRoot.querySelector(`.vl-list-wrap ul li:nth-child(${index + 1})`);
+    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;
+    }
+  }
+  handleListItemClick(index) {
+    // Handle list item click
+    // console.log('test');
+    const section = document.getElementById(this.sidebarData[index].ref);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+    }
+    this.setActiveItem();
+  }
+  handleSelectChange(event) {
+    // console.log('changed');
+    const selectedIndex = event.target.selectedIndex;
+    const section = document.getElementById(this.sidebarData[selectedIndex].ref);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+    }
+    this.updateActiveItem(selectedIndex);
+  }
+  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) }, item.title)))))))), 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("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 watchers() {
+    return [{
+        "propName": "isMobile",
+        "methodName": "handleMobileChange"
+      }];
+  }
+  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/custom-elements/index.d.ts

@@ -698,6 +698,12 @@ export const PtcTwoColumnMedia: {
   new (): PtcTwoColumnMedia;
 };
 
+interface PtcValueLedLayout extends Components.PtcValueLedLayout, HTMLElement {}
+export const PtcValueLedLayout: {
+  prototype: PtcValueLedLayout;
+  new (): PtcValueLedLayout;
+};
+
 interface PtcValuePropCard extends Components.PtcValuePropCard, HTMLElement {}
 export const PtcValuePropCard: {
   prototype: PtcValuePropCard;