@ptcwebops/ptcw-design 3.2.2 → 3.2.3

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

@@ -1,185 +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" }, 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))));
-  }
-  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
-      }];
-  }
-}
+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" }, 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))));
+  }
+  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.js

@@ -1,96 +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: 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' }))));
-  }
-  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
-      }
-    };
-  }
-}
+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: 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' }))));
+  }
+  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
+      }
+    };
+  }
+}