@ptcwebops/ptcw-design 1.6.7 → 1.6.9

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.js

@@ -0,0 +1,91 @@
+import { Host, h } from '@stencil/core';
+import { Swiper, Navigation, Pagination, Thumbs, Autoplay, FreeMode, EffectFade, Grid } from 'swiper';
+export class PtcCaseStudiesSlider {
+  constructor() {
+    // SLider List
+    this.caseStudiesThumbs = null;
+    this.caseStudiesSlides = null;
+  }
+  componentDidLoad() {
+    this.initSlider();
+    this.slideChangeHandler();
+    this.renderSlides('swiper-slide-thumb', 'swiper-wrapper-thumbs');
+    this.renderSlides('swiper-slide-content', 'swiper-wrapper-content');
+  }
+  initSlider() {
+    this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
+      modules: [Navigation, Pagination, FreeMode, Grid],
+      loop: false,
+      slidesPerView: 'auto',
+      freeMode: true,
+      watchSlidesProgress: true,
+      centerInsufficientSlides: true,
+      breakpoints: {
+        992: {
+          slidesPerView: 7,
+        },
+      }
+    });
+    this.caseStudiesSlides = new Swiper(this.caseStudiesSlidesRef, {
+      modules: [Navigation, Pagination, Thumbs, Autoplay, EffectFade],
+      loop: false,
+      grabCursor: true,
+      effect: 'fade',
+      autoplay: {
+        delay: 10000,
+        disableOnInteraction: false,
+        waitForTransition: true,
+      },
+      thumbs: {
+        swiper: this.caseStudiesThumbs,
+      },
+      pagination: {
+        el: this.paginationRef,
+        clickable: true,
+      },
+    });
+  }
+  slideChangeHandler() {
+    this.caseStudiesSlides.on('slideChange', () => {
+      const visibleSlide = this.caseStudiesSlides.slides[this.caseStudiesSlides.activeIndex];
+      const tagName = visibleSlide.querySelector('ptc-text-copy-with-background').shadowRoot;
+      const content = tagName.querySelector('.card-wrap');
+      const parent = tagName.querySelector('.card-wrap').parentNode;
+      parent.removeChild(content);
+      parent.appendChild(content);
+    });
+  }
+  renderSlides(slideName, wrapperName) {
+    const slidesList = Array.from(this.hostElement.querySelectorAll('.' + slideName));
+    if (slidesList.length > 0) {
+      const swiperWrapper = this.hostElement.shadowRoot.querySelector('.' + wrapperName);
+      slidesList.forEach((node, index) => {
+        const cloneNode = node.cloneNode(true);
+        swiperWrapper.appendChild(cloneNode);
+        node.remove;
+        const imageElement = node.querySelector('img');
+        if (imageElement) {
+          imageElement.addEventListener('click', () => {
+            this.caseStudiesSlides.slideTo(index); // Change the slide to the corresponding index
+          });
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "case-studies-thumbs", ref: el => this.caeStudiesThumbRef = el }, h("span", { class: "hide" }, h("slot", { name: 'thumb-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-thumbs' })), h("div", { class: "case-studies-slides", ref: el => this.caseStudiesSlidesRef = el }, h("span", { class: "hide" }, h("slot", { name: 'content-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-content' }), h("div", { class: "swiper-pagination", ref: el => this.paginationRef = el }))));
+  }
+  static get is() { return "ptc-case-studies-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-case-studies-slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-case-studies-slider.css"]
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/ptc-image-download-strip/ptc-image-download-strip.css

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--ptc-font-secondary-latin);
+}
+:host .strip {
+  position: absolute;
+  bottom: 0;
+  backdrop-filter: blur(15.2px);
+  background: white;
+  background: rgba(255, 255, 255, 0.3);
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  text-align: right;
+}
+:host .strip .dl-btn {
+  width: 54px;
+  height: 40px;
+  background-image: -o-linear-gradient(162deg, #74c34d, #00783e);
+  background-image: linear-gradient(288deg, #74c34d, #00783e);
+  border: 1px solid #fff;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: auto;
+  align-items: center;
+  text-decoration: none;
+}
+:host .strip .dl-btn .dl-text {
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 1px;
+  display: none;
+}
+:host .strip .dl-btn:hover {
+  box-shadow: 0 3px 20px 0 #74c34d;
+}
+:host .strip .dl-btn:hover .dl-text {
+  display: block;
+}
+:host .strip .dl-btn img {
+  max-height: 18px;
+  width: 12px;
+}

package/dist/collection/components/ptc-image-download-strip/ptc-image-download-strip.js

@@ -0,0 +1,51 @@
+import { Host, h } from '@stencil/core';
+export class PtcImageDownloadStrip {
+  constructor() {
+    this.downloadUrl = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { class: "strip" }, h("a", { class: "dl-btn", href: "javascript:void()", onClick: () => { this.openModal(); } }, h("span", { class: "dl-text" }, "Download"), h("img", { src: "https://www.ptc.com/dist/ptc/images/download-arrow.svg", alt: "Down Arrow" }))), h("ptc-modal", { id: "strip-download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+  }
+  openModal() {
+    let modal = this.el.shadowRoot.querySelector('#strip-download-modal');
+    modal.setAttribute('show', 'true');
+    setTimeout(() => {
+      modal.setAttribute('show', 'false');
+      window.open(`${this.downloadUrl}`, "_self");
+    }, 1000);
+  }
+  static get is() { return "ptc-image-download-strip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-image-download-strip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-image-download-strip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "downloadUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News download url"
+        },
+        "attribute": "download-url",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -994,23 +994,6 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
   }
 }
 
-.all-product-banner {
-  padding: 50px 0 44px 0px;
-}
-@media only screen and (min-width: 992px) {
-  .all-product-banner {
-    padding: 50px 0 72px 0px;
-    display: flex;
-    min-height: 300px;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-.all-product-gradient {
-  background: linear-gradient(180deg, #f3f3f3 2.6%, rgba(225, 241, 226, 0.2) 40.63%, #f3f3f3 82.29%), linear-gradient(0deg, #f3f3f3, #f3f3f3);
-}
-
 :host {
   display: block;
 }

package/dist/collection/components/ptc-news/ptc-news.css

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+:host .news-container {
+  max-width: 990px;
+  padding: 30px;
+  margin: auto;
+}
+:host .news-tag {
+  color: var(--color-gray-10);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-densest);
+  display: inline-block;
+}
+:host .news-title > div {
+  margin-bottom: 12px !important;
+}
+:host .news-title h1 {
+  margin: 0;
+}
+:host .news-secondary-title {
+  margin: 0 0 20px 0;
+  font-size: var(--ptc-font-size-large);
+  color: var(--color-gray-10);
+}
+:host .news-date {
+  margin-bottom: 20px;
+  display: inline-block;
+}
+:host .news-summary {
+  font-size: var(--ptc-font-size-medium);
+  color: var(--color-gray-10);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-normal);
+  margin: 0 0 20px 0;
+}
+:host .news-content {
+  padding-top: var(--ptc-element-spacing-08);
+}
+:host ptc-sticky-icons {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  :host ptc-sticky-icons {
+    display: block;
+  }
+}

package/dist/collection/components/ptc-news/ptc-news.js

@@ -0,0 +1,169 @@
+import { Host, h } from '@stencil/core';
+export class PtcNews {
+  constructor() {
+    this.newsTag = undefined;
+    this.newsTitle = undefined;
+    this.newsSecondaryTitle = undefined;
+    this.newsDate = undefined;
+    this.newsSummary = undefined;
+    this.newsImage = undefined;
+    this.newsImageAlt = undefined;
+    this.newsDownloadUrl = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), this.newsTitle && h("ptc-title", { type: 'h1', upperline: "no-upperline", "title-margin": "margin-5", class: "news-title" }, this.newsTitle), this.newsSecondaryTitle && h("h2", { class: "news-secondary-title" }, this.newsSecondaryTitle), this.newsDate && h("span", { class: "news-date" }, this.newsDate), this.newsSummary && h("h2", { class: "news-summary" }, this.newsSummary), this.newsImage &&
+      h("ptc-image-download-strip", { "download-url": this.newsDownloadUrl }, h("ptc-picture", { alt: this.newsImageAlt, src: this.newsImage, "is-full-width": "true" })), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
+  }
+  static get is() { return "ptc-news"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-news.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-news.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "newsTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News tag"
+        },
+        "attribute": "news-tag",
+        "reflect": false
+      },
+      "newsTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "News Title"
+        },
+        "attribute": "news-title",
+        "reflect": false
+      },
+      "newsSecondaryTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News Secondary Title"
+        },
+        "attribute": "news-secondary-title",
+        "reflect": false
+      },
+      "newsDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News Date"
+        },
+        "attribute": "news-date",
+        "reflect": false
+      },
+      "newsSummary": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News summary"
+        },
+        "attribute": "news-summary",
+        "reflect": false
+      },
+      "newsImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News Image"
+        },
+        "attribute": "news-image",
+        "reflect": false
+      },
+      "newsImageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News Image"
+        },
+        "attribute": "news-image-alt",
+        "reflect": false
+      },
+      "newsDownloadUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News download url"
+        },
+        "attribute": "news-download-url",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -939,23 +939,6 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
   }
 }
 
-.all-product-banner {
-  padding: 50px 0 44px 0px;
-}
-@media only screen and (min-width: 992px) {
-  .all-product-banner {
-    padding: 50px 0 72px 0px;
-    display: flex;
-    min-height: 300px;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-.all-product-gradient {
-  background: linear-gradient(180deg, #f3f3f3 2.6%, rgba(225, 241, 226, 0.2) 40.63%, #f3f3f3 82.29%), linear-gradient(0deg, #f3f3f3, #f3f3f3);
-}
-
 :host {
   display: block;
   color: var(--color-gray-10);

package/dist/collection/components/ptc-product-card/ptc-product-card.css

@@ -25,7 +25,7 @@
 }
 @media only screen and (min-width: 768px) {
   :host .card-wrap .content {
-    padding: 0 44px 24px 44px;
+    padding: 0 24px 24px 44px;
   }
 }
 @media only screen and (min-width: 1200px) {
@@ -37,11 +37,14 @@
 :host .card-wrap .content .cta-wrap {
   margin-left: 0;
   margin-top: 24px;
+  min-width: 146px;
+  text-align: left;
 }
 @media only screen and (min-width: 1200px) {
   :host .card-wrap .content .cta-wrap {
     margin-top: 0px;
     margin-left: 44px;
+    text-align: right;
   }
 }
 :host .toggle-btn {
@@ -56,6 +59,24 @@
   vertical-align: middle;
   margin-top: -2px;
 }
+:host .toggle-btn .toggleText::before {
+  content: "";
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="18" rx="4" fill="%2300890B"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z" fill="white"/></svg>');
+  margin-right: 12px;
+  vertical-align: middle;
+  margin-top: -2px;
+}
 :host .product-highlights-container {
   padding: 0px 20px 16px 20px;
+  display: none;
+}
+
+:host(.has-opened) .toggleText::before {
+  background-image: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.632812" width="17.9798" height="18" rx="4" fill="%2300890B"/><g clip-path="url(%23clip0_220_1413)"><path d="M4.86328 7.98749V10.0125H14.382V7.98749H4.86328Z" fill="white"/></g><defs><clipPath id="clip0_220_1413"><rect width="9.51872" height="9.52941" fill="white" transform="translate(4.86328 4.23529)"/></clipPath></defs></svg>');
+}
+:host(.has-opened) .product-highlights-container {
+  display: block;
 }

package/dist/collection/components/ptc-product-card/ptc-product-card.js

@@ -14,8 +14,9 @@ export class PtcProductCard {
     this.isOpen = !this.isOpen;
   }
   render() {
-    return (h(Host, null, h("div", { class: "card-wrap" }, h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h("div", { class: "content" }, h("div", null, h("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-height": "densest", "title-margin": 'margin-flush' }, h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "16", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))), h("div", { class: 'cta-wrap' }, h("slot", { name: "cta" })))), this.toggleCtaTitle &&
-      h("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "18", height: "18", rx: "4", fill: "#00890B" }), this.isOpen ? (h("g", { "clip-path": "url(#clip0_187_1609)" }, h("path", { d: "M4.86328 7.98779V10.0128H14.382V7.98779H4.86328Z", fill: "white" }))) : (h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_187_1609" }, h("rect", { width: "9.53", height: "9", fill: "white", transform: "translate(4.16328  4.23535)" })))), h("span", null, this.toggleCtaTitle)), this.isOpen && (h("div", { class: 'product-highlights-container' }, h("slot", null)))));
+    return (h(Host, null, h("div", { class: "card-wrap" }, this.cardImage &&
+      h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h("div", { class: "content" }, h("div", null, h("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "16", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))), h("div", { class: 'cta-wrap' }, h("slot", { name: "cta" })))), this.toggleCtaTitle &&
+      h("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h("span", { class: 'toggleText' }, this.toggleCtaTitle)), h("div", { class: 'product-highlights-container' }, h("slot", null))));
   }
   static get is() { return "ptc-product-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-product-list/ptc-product-list.js

@@ -87,6 +87,29 @@ export class PtcProductList {
     this.addIds();
     this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
     this.productList = this.hostElement.shadowRoot.querySelector('.product-list');
+    const productCards = this.hostElement.querySelectorAll('ptc-product-category ptc-product-card');
+    productCards.forEach(card => {
+      const toggleBtn = (card.shadowRoot).querySelector('.toggle-btn');
+      if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => {
+          if (card.classList.contains('has-opened')) {
+            card.classList.remove('has-opened');
+          }
+          else {
+            card.classList.add('has-opened');
+          }
+          this.hideAllCards(card);
+        });
+      }
+    });
+  }
+  hideAllCards(selectedCard) {
+    const productCards = this.hostElement.querySelectorAll('ptc-product-category ptc-product-card');
+    productCards.forEach(card => {
+      if (selectedCard != card) {
+        card.classList.remove('has-opened');
+      }
+    });
   }
   handleClick(event) {
     this.clearCtaClicked.emit({

package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.css

@@ -25,9 +25,14 @@
   }
 }
 :host .filter-result-wrap label {
-  font-size: var(--ptc-font-size-x-small);
+  font-size: var(--ptc-font-size-xx-small);
   font-weight: 600;
 }
+@media only screen and (min-width: 992px) {
+  :host .filter-result-wrap label {
+    font-size: var(--ptc-font-size-x-small);
+  }
+}
 :host .filter-result-wrap .result-header {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.js

@@ -89,7 +89,6 @@ export class PtcProductSidebar {
     const { sender, isOpen } = event.detail;
     if (sender) {
       this.productListWrap.classList.add('hide');
-      this.clearBtn.classList.add('show');
       if (isOpen) {
         let input = this.hostElement.shadowRoot.querySelector('input');
         if (input) {
@@ -107,9 +106,20 @@ export class PtcProductSidebar {
       this.clearSearch(mouseEvent);
     }
   }
+  handleSelectedValues(event) {
+    const { sender, selectedOptions } = event.detail;
+    if (sender) {
+      if (selectedOptions.length > 0) {
+        this.clearBtn.classList.add('show');
+      }
+      else {
+        this.clearBtn.classList.remove('show');
+      }
+    }
+  }
   render() {
     return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Filter Result"), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, "Filter"), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
-      h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, "Technology"), h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Jump to Product"), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, item.categoryName)), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
+      h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, "Technology"), h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Jump to Product"), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
   }
   static get is() { return "ptc-product-sidebar"; }
   static get encapsulation() { return "shadow"; }
@@ -232,6 +242,12 @@ export class PtcProductSidebar {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "selectedValues",
+        "method": "handleSelectedValues",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }