@ptcwebops/ptcw-design 1.5.2 → 1.5.5

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

@@ -0,0 +1,171 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductList {
+  handleSearchResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      this.sortCards(searchTerm);
+    }
+  }
+  handleMultipleSearchResult(event) {
+    const { sender, selectedOptions } = event.detail;
+    if (sender) {
+      this.sortMultipleCards(selectedOptions);
+    }
+  }
+  handleEmptyResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      this.noresultSection.classList.add('show');
+      this.sortCards(searchTerm);
+    }
+  }
+  sortMultipleCards(searchItems) {
+    const categoryList = Array.from(this.hostElement.querySelectorAll('ptc-product-category'));
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute('category-title');
+      const productList = Array.from(category.querySelectorAll('ptc-product-card'));
+      if (searchItems.length > 0) {
+        const shouldDisplayCategory = searchItems.some(searchItem => categoryTitle && categoryTitle.includes(searchItem));
+        category.style.display = shouldDisplayCategory ? 'block' : 'none';
+        if (shouldDisplayCategory) {
+          productList.forEach(product => {
+            product.style.display = 'block';
+          });
+        }
+        else {
+          productList.forEach(product => {
+            const productTitle = product.getAttribute('card-title');
+            const shouldDisplayProduct = searchItems.some(searchItem => productTitle && productTitle.includes(searchItem));
+            product.style.display = shouldDisplayProduct ? 'block' : 'none';
+          });
+        }
+      }
+      else {
+        category.style.display = 'block';
+        productList.forEach(product => {
+          product.style.display = 'block';
+        });
+      }
+    });
+  }
+  // Sorting the
+  sortCards(searchItem) {
+    const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute('category-title');
+      const productList = category.querySelectorAll('ptc-product-card');
+      category.style.display = 'none';
+      if (searchItem === '') {
+        category.style.display = 'block';
+        productList.forEach(product => {
+          product.style.display = 'block';
+        });
+        this.noresultSection.classList.remove('show');
+      }
+      else {
+        const searchItemLowerCase = searchItem; //
+        if (searchItemLowerCase === categoryTitle) {
+          category.style.display = 'block';
+          productList.forEach(product => {
+            product.style.display = 'block';
+          });
+        }
+        else {
+          productList.forEach(product => {
+            const productTitle = product.getAttribute('card-title');
+            product.style.display = 'none';
+            if (searchItemLowerCase === productTitle) {
+              product.style.display = 'block';
+              category.style.display = 'block';
+            }
+          });
+        }
+      }
+    });
+  }
+  componentDidLoad() {
+    this.addIds();
+    this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
+    this.productList = this.hostElement.shadowRoot.querySelector('.product-list');
+  }
+  handleClick(event) {
+    this.clearCtaClicked.emit({
+      'sender': this,
+      'event': event,
+    });
+  }
+  // Adding id to the category and product cards
+  addIds() {
+    const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute('category-title');
+      category.setAttribute('id', categoryTitle);
+      const productList = category.querySelectorAll('ptc-product-card');
+      productList.forEach(product => {
+        const productTitle = product.getAttribute('card-title');
+        product.setAttribute('id', productTitle);
+      });
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "product-list" }, h("slot", null)), h("div", { class: "no-result-wrap" }, h("div", { class: "no-result" }, h("div", null, h("ptc-title", { type: 'h3', "title-margin": "margin-flush", upperline: 'no-upperline', "title-size": "large" }, "No Results Found"), h("ptc-para", { "font-size": "x-small" }, "Try changing or removing some of your filters"), h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => { this.handleClick(e); } }, "Clear Filters"))))));
+  }
+  static get is() { return "ptc-product-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-list.css"]
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clearCtaClicked",
+        "name": "clearCtaClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "selectedResult",
+        "method": "handleSearchResult",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "clearsearch",
+        "method": "handleSearchResult",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "selectedValues",
+        "method": "handleMultipleSearchResult",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "emptyResult",
+        "method": "handleEmptyResult",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+  position: relative;
+}
+:host .hide {
+  display: none !important;
+}
+:host .white-box {
+  padding: 12px;
+  background-color: var(--color-white);
+  border-radius: var(--ptc-border-radius-standard);
+}
+:host .sort-wrap {
+  display: block;
+}
+@media only screen and (min-width: 480px) {
+  :host .sort-wrap {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .sort-wrap {
+    display: block;
+  }
+}
+:host .filter-result-wrap label {
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: 600;
+}
+:host .filter-result-wrap .result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+@media only screen and (min-width: 992px) {
+  :host .filter-result-wrap .result-header {
+    margin-bottom: 26px;
+  }
+}
+:host .filter-result-wrap .result-header .clear-cta {
+  cursor: pointer;
+  display: none;
+  color: var(--color-gray-07);
+  font-size: var(--ptc-font-size-x-small);
+  text-decoration: underline;
+}
+:host .filter-result-wrap .result-header .clear-cta.show {
+  display: block;
+}
+:host .filter-result-wrap .typeahead-input {
+  box-sizing: border-box;
+  margin-bottom: 14px;
+  width: 100%;
+  margin-right: 0;
+}
+@media only screen and (min-width: 480px) {
+  :host .filter-result-wrap .typeahead-input {
+    margin-right: 40px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .filter-result-wrap .typeahead-input {
+    margin-right: 0;
+  }
+}
+:host .filter-result-wrap .typeahead-input .input-wrap {
+  position: relative;
+}
+:host .filter-result-wrap .typeahead-input .input-wrap svg {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+}
+:host .filter-result-wrap .typeahead-input .input-wrap input {
+  margin-top: 4px;
+  padding: 8px 8px 8px 34px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--color-gray-03);
+  font-size: 14px;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap {
+  position: relative;
+  width: 100%;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions {
+  border: 1px solid var(--color-gray-03);
+  box-shadow: 0px 2px 4px rgba(35, 43, 45, 0.3);
+  background-color: var(--color-white);
+  position: absolute;
+  z-index: 105;
+  top: 0;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  max-height: 400px;
+  overflow-y: auto;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar {
+  width: 5px;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-05);
+  outline: 1px solid var(--color-gray-05);
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li {
+  list-style: none;
+  padding: 10px 16px;
+  cursor: pointer;
+  display: block;
+  font-size: 14px;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child {
+  padding-top: 20px;
+}
+:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child {
+  padding-bottom: 20px;
+}
+:host .filter-result-wrap .dropdwon-filter {
+  margin-bottom: 10px;
+  width: 100%;
+}
+:host .product-list-wrap {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  :host .product-list-wrap {
+    display: block;
+  }
+}
+:host .product-list-wrap .category-list {
+  display: block;
+  padding: 12px 4px;
+  font-size: var(--ptc-font-size-x-small);
+}
+:host .product-list-wrap .category-list ptc-para {
+  padding-bottom: 4px;
+  display: block;
+}
+:host .product-list-wrap .category-list ul {
+  padding-left: 20px;
+  margin: 0;
+}

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

@@ -0,0 +1,237 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductSidebar {
+  constructor() {
+    this.searchTerm = '';
+    this.suggestions = [];
+    this.suggestionList = [];
+  }
+  componentWillLoad() {
+    this.getDomData();
+  }
+  componentDidLoad() {
+    this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
+    this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
+  }
+  // Getting category title and products list
+  getDomData() {
+    const categoryList = document.querySelectorAll('ptc-product-category');
+    categoryList.forEach(category => {
+      let categoryTitle = category.getAttribute('category-title');
+      let categoryObject = { categoryName: categoryTitle, products: [] };
+      this.suggestionList.push(categoryObject);
+      let productList = category.querySelectorAll('ptc-product-card');
+      productList.forEach(product => {
+        let productTitle = product.getAttribute('card-title');
+        categoryObject.products.push(productTitle);
+      });
+    });
+  }
+  handleInputChange(event) {
+    const inputElement = event.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    this.productListWrap.classList.add('hide');
+    this.clearBtn.classList.add('show');
+    this.getSuggestions();
+    this.inputChanged.emit({
+      'sender': this,
+      'event': event,
+    });
+  }
+  getSuggestions() {
+    const searchTerm = this.searchTerm.toLowerCase();
+    const suggestions = this.suggestionList.reduce((acc, item) => {
+      if (item.categoryName.toLowerCase().includes(searchTerm)) {
+        acc.push(item.categoryName); // Include the category if it matches the search term
+      }
+      const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
+      if (matchedProducts.length > 0) {
+        acc.push(...matchedProducts); // Include the matching products
+      }
+      return acc;
+    }, []);
+    this.suggestions = suggestions;
+  }
+  handleSelectSuggestion(suggestion, event) {
+    this.searchTerm = suggestion;
+    //this.serachInput.setAttribute('value', this.searchTerm);
+    this.selectedResult.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.searchTerm
+    });
+  }
+  handleKeyUp(e) {
+    const inputElement = e.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    if (e.keyCode === 13 && this.suggestions.length == 0) {
+      console.log('Enter key pressed');
+      this.emptyResult.emit({
+        'sender': this,
+        'event': e,
+      });
+    }
+  }
+  clearSearch(event) {
+    let input = this.hostElement.shadowRoot.querySelector('input');
+    this.productListWrap.classList.remove('hide');
+    this.clearBtn.classList.remove('show');
+    if (input) {
+      input.value = "";
+    }
+    this.suggestions = [];
+    this.clearsearch.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': input.value
+    });
+  }
+  handleDropdownTouched(event) {
+    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) {
+          input.value = "";
+        }
+      }
+    }
+  }
+  handleClick() {
+    this.suggestions = [];
+  }
+  handleclearCtaClicked(event) {
+    const { sender, event: mouseEvent, } = event.detail;
+    if (sender) {
+      this.clearSearch(mouseEvent);
+    }
+  }
+  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)))))))))));
+  }
+  static get is() { return "ptc-product-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-sidebar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-sidebar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "suggestionList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ categoryName: string, products: string[] }[]",
+          "resolved": "{ categoryName: string; products: string[]; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "searchTerm": {},
+      "suggestions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedResult",
+        "name": "selectedResult",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "clearsearch",
+        "name": "clearsearch",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "emptyResult",
+        "name": "emptyResult",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "dropdownTouched",
+        "method": "handleDropdownTouched",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "clearCtaClicked",
+        "method": "handleclearCtaClicked",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}