@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/esm/ptc-product-dropdown.entry.js

@@ -2,75 +2,75 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcProductDropdownCss = ":host{display:block;margin-top:4px;background-color:var(--color-white)}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;width:100%;font-size:16px}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;box-sizing:border-box}:host .dropdown .dropdown-toggle .dropdown-placeholder{font-size:14px;color:var(--color-gray-07)}:host .caret{display:inline-block;vertical-align:middle}:host .dropdown-menu{position:absolute;top:100%;left:0;min-width:10rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);z-index:105;max-height:400px;overflow-y:auto;width:100%;box-sizing:border-box}:host .dropdown-menu::-webkit-scrollbar{width:5px}:host .dropdown-menu::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .checkbox-label{display:flex;align-items:flex-start;padding:6px 16px;cursor:pointer;font-size:14px}:host .checkbox-label:first-child{padding-top:20px}:host .checkbox-label:last-child{padding-bottom:20px}:host .checkbox-label input[type=checkbox]{min-width:20px;margin-right:8px;width:20px;height:20px;margin-top:0}";
 
-const PtcProductDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedValues = createEvent(this, "selectedValues", 7);
-    this.dropdownTouched = createEvent(this, "dropdownTouched", 7);
-    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" }, h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.86537 0.917969L6.14614 4.56922L10.4269 0.917969L11.9769 2.23997L6.14614 7.21323L0.31543 2.23997L1.86537 0.917969Z", fill: "#323B42" })))), 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))));
-  }
-  get hostElement() { return getElement(this); }
-};
+const PtcProductDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedValues = createEvent(this, "selectedValues", 7);
+    this.dropdownTouched = createEvent(this, "dropdownTouched", 7);
+    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" }, h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.86537 0.917969L6.14614 4.56922L10.4269 0.917969L11.9769 2.23997L6.14614 7.21323L0.31543 2.23997L1.86537 0.917969Z", fill: "#323B42" })))), 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))));
+  }
+  get hostElement() { return getElement(this); }
+};
 PtcProductDropdown.style = ptcProductDropdownCss;
 
 export { PtcProductDropdown as ptc_product_dropdown };

package/dist/esm/ptc-product-highlight-card.entry.js

@@ -2,18 +2,18 @@ import { r as registerInstance, h, H as Host } from './index-62587d0b.js';
 
 const ptcProductHighlightCardCss = ":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;height:100%}:host ptc-picture{min-height:100px}";
 
-const PtcProductHighlightCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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: this.cardImageAltText, 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": "5", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
-  }
-};
+const PtcProductHighlightCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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: this.cardImageAltText, 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": "5", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
+  }
+};
 PtcProductHighlightCard.style = ptcProductHighlightCardCss;
 
 export { PtcProductHighlightCard as ptc_product_highlight_card };

package/dist/esm/ptc-product-list.entry.js

@@ -2,146 +2,146 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcProductListCss = ":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}";
 
-const PtcProductList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clearCtaClicked = createEvent(this, "clearCtaClicked", 7);
-  }
-  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');
-    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({
-      '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"))))));
-  }
-  get hostElement() { return getElement(this); }
-};
+const PtcProductList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.clearCtaClicked = createEvent(this, "clearCtaClicked", 7);
+  }
+  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');
+    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({
+      '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"))))));
+  }
+  get hostElement() { return getElement(this); }
+};
 PtcProductList.style = ptcProductListCss;
 
 export { PtcProductList as ptc_product_list };