@ptcwebops/ptcw-design 1.5.3 → 1.5.5

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

@@ -0,0 +1,185 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductDropdown {
+  constructor() {
+    this.internalOptions = undefined;
+    this.newOptions = undefined;
+    this.selectedOptions = [];
+    this.placeholder = undefined;
+    this.isOpen = false;
+  }
+  parseOptions() {
+    let options = Array.from(this.hostElement.querySelectorAll('span'));
+    if (options) {
+      this.internalOptions = options.map((option) => {
+        return option.textContent;
+      });
+    }
+  }
+  toggleDropdown() {
+    this.isOpen = !this.isOpen;
+    this.dropdownTouched.emit({
+      'sender': this,
+      'isOpen': this.isOpen
+    });
+  }
+  handleSearchResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      if (searchTerm === "") {
+        this.selectedOptions = [];
+        this.isOpen = false;
+      }
+    }
+  }
+  handleinputChanged(event) {
+    const { sender } = event.detail;
+    if (sender) {
+      this.selectedOptions = [];
+      this.isOpen = false;
+    }
+  }
+  handleCheckboxChange(option) {
+    const index = this.selectedOptions.indexOf(option);
+    if (index > -1) {
+      this.selectedOptions.splice(index, 1);
+      //console.log(this.selectedOptions);
+      this.selectedValues.emit({
+        'sender': this,
+        'selectedOptions': this.selectedOptions
+      });
+    }
+    else {
+      this.selectedOptions.push(option);
+      //console.log(this.selectedOptions);
+      this.selectedValues.emit({
+        'sender': this,
+        'selectedOptions': this.selectedOptions
+      });
+    }
+  }
+  componentWillLoad() {
+    this.parseOptions();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, this.placeholder), h("span", { class: "caret" })), this.isOpen && (h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), h("div", { class: "hidden" }, h("slot", null))));
+  }
+  static get is() { return "ptc-product-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "newOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "selectedOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalOptions": {},
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedValues",
+        "name": "selectedValues",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "dropdownTouched",
+        "name": "dropdownTouched",
+        "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": "clearsearch",
+        "method": "handleSearchResult",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "inputChanged",
+        "method": "handleinputChanged",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,11 @@
+:host {
+  max-width: 300px;
+  display: block;
+  padding: 18px 10px 12px 10px;
+  border: 1px solid var(--color-gray-04);
+  border-radius: var(--ptc-border-radius-standard);
+  margin: auto;
+}
+:host ptc-picture {
+  min-height: 100px;
+}

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

@@ -0,0 +1,96 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductHighlightCard {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+    this.cardImageAltText = undefined;
+    this.cardDescription = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h("ptc-picture", { alt: "image-test", src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
+  }
+  static get is() { return "ptc-product-highlight-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-highlight-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-highlight-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\ncardTitle"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\ncardImage"
+        },
+        "attribute": "card-image",
+        "reflect": false
+      },
+      "cardImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\ncardImageAltText"
+        },
+        "attribute": "card-image-alt-text",
+        "reflect": false
+      },
+      "cardDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\ncardDescription"
+        },
+        "attribute": "card-description",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+  padding-bottom: 52px;
+}
+@media only screen and (min-width: 992px) {
+  :host {
+    padding-bottom: 102px;
+  }
+}
+:host .no-result-wrap {
+  display: none;
+}
+:host .no-result-wrap.show {
+  display: block;
+}
+:host .no-result-wrap .no-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 160px;
+  padding: 20px;
+  text-align: center;
+}

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;
+}