@ptcwebops/ptcw-design 1.5.3 → 1.5.6

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

@@ -0,0 +1,179 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductCard {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+    this.cardImageAltText = undefined;
+    this.cardDescription = undefined;
+    this.cardCtaText = undefined;
+    this.toggleCtaTitle = undefined;
+    this.isOpen = false;
+    this.isSlotEmpty = undefined;
+  }
+  togglePanel() {
+    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.86365 7.98779V10.0128H14.3824V7.98779H4.86365Z", 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.51872", height: "9.52941", fill: "white", transform: "translate(4.86365 4.23535)" })))), h("span", null, this.toggleCtaTitle)), this.isOpen && (h("div", { class: 'product-highlights-container' }, h("slot", null)))));
+  }
+  static get is() { return "ptc-product-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\ncardTitle"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\ncardImage"
+        },
+        "attribute": "card-image",
+        "reflect": false
+      },
+      "cardImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\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": "\r\ncardDescription"
+        },
+        "attribute": "card-description",
+        "reflect": false
+      },
+      "cardCtaText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\ncardCtaText"
+        },
+        "attribute": "card-cta-text",
+        "reflect": false
+      },
+      "toggleCtaTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\ntoggleCtaTitle"
+        },
+        "attribute": "toggle-cta-title",
+        "reflect": false
+      },
+      "isSlotEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-slot-empty",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "isOpenProductHighlight",
+        "name": "isOpenProductHighlight",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding-bottom: var(--ptc-layout-spacing-03);
+}

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

@@ -0,0 +1,60 @@
+import { Host, h } from '@stencil/core';
+export class PtcProductCategory {
+  constructor() {
+    this.categoryTitle = undefined;
+    this.categoryDescription = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-999", description: this.categoryTitle, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "large" }), h("slot", null)));
+  }
+  static get is() { return "ptc-product-category"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-product-category.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-product-category.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "categoryTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "category-title",
+        "reflect": false
+      },
+      "categoryDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "category-description",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1,79 @@
+: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;
+}
+:host .dropdown .dropdown-toggle .dropdown-placeholder {
+  font-size: 14px;
+  color: var(--color-gray-07);
+}
+:host .caret {
+  display: inline-block;
+  margin-left: 0.25rem;
+  width: 0;
+  height: 0;
+  border-top: 0.4rem solid;
+  border-right: 0.4rem solid transparent;
+  border-left: 0.4rem solid transparent;
+  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;
+}
+: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;
+}

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": "\r\ncardTitle"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\ncardImage"
+        },
+        "attribute": "card-image",
+        "reflect": false
+      },
+      "cardImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "\r\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": "\r\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;
+}