@ptcwebops/ptcw-design 3.3.2 → 3.3.4

package/dist/collection/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.css

@@ -2,29 +2,29 @@
   display: block;
   border-left: 7px solid var(--color-green-07);
   padding-left: 32px;
-  margin: 0 0 48px 0;
+  margin: 40px 0 40px 0;
 }
 @media only screen and (min-width: 480px) {
   :host {
-    margin: 0 0 48px 40px;
+    margin: 48px 40px 48px 40px;
   }
 }
 @media only screen and (min-width: 992px) {
   :host {
-    margin: 8px 0 48px 48px;
+    margin: 56px 48px 56px 48px;
   }
 }
 :host::slotted(p) {
   color: var(--color-gray-10);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.5;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-p);
 }
 :host::slotted(ul li) {
   color: var(--color-gray-10);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.5;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-p);
 }
 :host::slotted(ul) {
   padding-left: 12px;

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

@@ -1,16 +1,22 @@
 :host {
   display: block;
-  padding-bottom: 48px;
-  padding-top: 32px;
+  padding-bottom: var(--ptc-element-spacing-07);
+  padding-top: var(--ptc-element-spacing-07);
 }
 @media only screen and (min-width: 768px) {
   :host {
     padding-top: 0;
   }
 }
+@media only screen and (min-width: 1440px) {
+  :host {
+    padding-bottom: var(--ptc-element-spacing-09);
+  }
+}
 :host .content-tag {
   font-size: var(--ptc-font-size-xx-small);
   line-height: var(--ptc-line-height-p);
-  font-weight: var(--ptc-font-weight-semibold);
+  font-weight: var(--ptc-font-weight-medium);
   margin-bottom: var(--ptc-element-spacing-01);
+  color: var(--color-gray-10);
 }

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

@@ -63,7 +63,7 @@
   box-sizing: border-box;
 }
 :host .top-image {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.6);
   background-blend-mode: multiply;
   position: absolute;
   z-index: -1;
@@ -73,31 +73,43 @@
   background-position: center;
 }
 :host .pdf-slot-wrapper {
-  padding: 1rem 0;
+  padding: var(--ptc-element-spacing-04) 0;
   width: 100%;
   text-align: right;
 }
 :host .vl-layout-wrap {
-  margin-top: 64px;
+  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: #fff;
+  background-color: var(--color-white);
   border-radius: var(--ptc-border-radius-standard);
 }
 @media only screen and (min-width: 992px) {
@@ -110,6 +122,12 @@
     float: right;
     overflow-y: auto;
     overflow-x: hidden;
+    padding: var(--ptc-layout-spacing-03) 0;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .vl-layout-wrap .vl-list-wrap {
+    padding: var(--ptc-layout-spacing-04) 0;
   }
 }
 :host .vl-layout-wrap .vl-list-wrap ul {
@@ -123,13 +141,18 @@
 @media only screen and (min-width: 992px) {
   :host .vl-layout-wrap .vl-list-wrap ul li {
     display: block;
+    margin: 0 16px 4px 16px;
+  }
+}
+@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-small);
+  font-size: var(--ptc-font-size-x-small);
   line-height: var(--ptc-line-height-densest);
   text-decoration: none;
   color: var(--color-gray-10);
@@ -137,6 +160,11 @@
   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;
@@ -144,7 +172,7 @@
   height: calc(100% - 16px);
   background-color: transparent;
   position: absolute;
-  left: 8px;
+  left: 4px;
 }
 :host .vl-layout-wrap .vl-list-wrap ul li a:hover {
   background-color: var(--color-gray-02);
@@ -153,7 +181,7 @@
   display: block;
 }
 :host .vl-layout-wrap .vl-list-wrap ul li.active a {
-  font-weight: 700;
+  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);
@@ -170,13 +198,14 @@
 }
 :host .vl-layout-wrap .vl-list-wrap select {
   z-index: 105;
-  background-color: #fff;
+  background-color: var(--color-white);
 }
 :host .vl-layout-wrap .vl-content-wrap {
   width: 100%;
   padding: 0 20px 20px 20px;
-  background-color: #fff;
+  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 {
@@ -201,6 +230,8 @@
   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 {
@@ -221,22 +252,37 @@
   background-color: transparent;
   border-radius: 0.25rem;
   cursor: pointer;
-  font-weight: 700;
-  line-height: 1.5;
-  font-size: 18px;
+  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: 0px 4px 8px 0px rgba(0, 0, 0, 0.24);
-  padding: 24px;
+  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: 700;
-  line-height: 1.5;
-  font-size: 18px;
+  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;
@@ -260,13 +306,13 @@
   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);
+  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;
 }
@@ -283,9 +329,10 @@
   box-sizing: border-box;
   padding: 16px 32px;
   cursor: pointer;
-  font-size: 18px;
-  line-height: 1.25;
-  font-weight: 400;
+  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: "";
@@ -314,11 +361,11 @@
   width: 7px;
 }
 :host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--color-white);
   border-radius: 25px;
 }
 :host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select .select-dropdown::-webkit-scrollbar-thumb {
-  background: #ccc;
+  background: var(--color-gray-02);
   border-radius: 25px;
 }
 :host .vl-layout-wrap .vl-content-wrap .mobile-select.custom-select.active .arrow {
@@ -328,6 +375,9 @@
   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;
 }
@@ -336,7 +386,7 @@
 }
 @media only screen and (min-width: 768px) {
   :host .vl-layout-wrap .vl-content-wrap .vl-content-slot-wrap {
-    padding-top: 32px;
+    padding-top: var(--ptc-element-spacing-07);
   }
 }
 @media only screen and (min-width: 992px) {

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

@@ -38,15 +38,59 @@ export class PtcValueLedLayout {
     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');
+      }
+    });
   }
-  handleScroll() {
+  // @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");
@@ -144,7 +188,7 @@ export class PtcValueLedLayout {
     }
   }
   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("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)))))));
+    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"; }
@@ -204,11 +248,17 @@ export class PtcValueLedLayout {
   static get elementRef() { return "hostElement"; }
   static get listeners() {
     return [{
-        "name": "scroll",
-        "method": "handleScroll",
+        "name": "wheel",
+        "method": "handleWheel",
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "resize",
         "method": "handleResize",

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

@@ -1,10 +1,15 @@
 :host {
   display: block;
-  margin-bottom: 48px;
+  margin-bottom: var(--ptc-element-spacing-07);
+}
+@media only screen and (min-width: 1440px) {
+  :host {
+    margin-bottom: var(--ptc-element-spacing-09);
+  }
 }
 :host .sb-card {
   display: block;
-  border-radius: 4px;
+  border-radius: var(--ptc-border-radius-standard);
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-x-small);
   text-decoration: none;
@@ -18,30 +23,37 @@
   width: 100%;
   max-height: 120px;
   overflow: hidden;
+  border-top-left-radius: var(--ptc-border-radius-standard);
+  border-top-right-radius: var(--ptc-border-radius-standard);
 }
 @media only screen and (min-width: 480px) {
   :host .sb-card .img-wrap {
     max-width: 120px;
     max-height: initial;
+    border-top-left-radius: var(--ptc-border-radius-standard);
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: var(--ptc-border-radius-standard);
   }
 }
 :host .sb-card .img-wrap ptc-picture {
   height: 100%;
+  min-height: 95px;
 }
 :host .sb-card .card-content-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 16px 16px 16px 16px;
+  padding: var(--ptc-element-spacing-04);
   box-sizing: border-box;
 }
 @media only screen and (min-width: 768px) {
   :host .sb-card .card-content-wrap .card-content {
-    padding-right: 24px;
+    padding-right: var(--ptc-element-spacing-06);
   }
 }
-:host .sb-card .card-content-wrap h4, :host .sb-card .card-content-wrap p {
+:host .sb-card .card-content-wrap h4,
+:host .sb-card .card-content-wrap p {
   color: var(--color-gray-10);
   font-size: var(--ptc-font-size-xx-small);
   font-weight: var(--ptc-font-weight-bold);
@@ -51,7 +63,7 @@
 }
 :host .sb-card .card-content-wrap p {
   margin: 0;
-  font-weight: var(--ptc-font-weight-semibold);
+  font-weight: var(--ptc-font-weight-medium);
 }
 :host .sb-card .card-content-wrap .cta-slot {
   display: none;

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

@@ -16,7 +16,7 @@ export class PtcValueLedSpeedBump {
   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' }))))));
+      h("div", { class: 'img-wrap' }, h("ptc-picture", { alt: "image", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "img{ min-height: 95px}" })), 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"; }