@ptcwebops/ptcw-design 2.7.7 → 2.7.9

package/dist/collection/components/ptc-select/ptc-select.js

@@ -1,190 +1,190 @@
-import { h, Host } from '@stencil/core';
-import { MDCSelect } from '@material/select';
-// import { MDCSelectHelperText } from '@material/select/helper-text';
-export class PtcSelect {
-  constructor() {
-    this.label = undefined;
-    this.isRequired = true;
-    this.helpertext = 'Please select a value!';
-    this.name = undefined;
-    this.disabled = false;
-    this.selectedValue = '';
-    this.ptcDataEloquaName = undefined;
-  }
-  // helperTextComponent: any;
-  componentDidLoad() {
-    const select = new MDCSelect(this.el.querySelector('.mdc-select'));
-    select.listen('MDCSelect:change', () => {
-      this.valueChange.emit(select.value);
-      this.selectedValue = select.value;
-    });
-    // this.helperTextComponent = new MDCSelectHelperText(this.el.querySelector('.mdc-select-helper-text'));
-  }
-  getSelectClassName() {
-    let className = 'mdc-select mdc-select--outlined mdc-select--no-label';
-    if (this.isRequired) {
-      className = `${className} mdc-select--required`;
-    }
-    return className;
-  }
-  render() {
-    return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: "demo-selected-text", class: "mdc-select__selected-text", "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" }, h("slot", null))), h("p", { id: this.name, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext)));
-  }
-  static get is() { return "ptc-select"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "isRequired": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-required",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "helpertext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "helpertext",
-        "reflect": false,
-        "defaultValue": "'Please select a value!'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectedValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "ptcDataEloquaName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Eloqua Data"
-        },
-        "attribute": "ptc-data-eloqua-name",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+import { h, Host } from '@stencil/core';
+import { MDCSelect } from '@material/select';
+// import { MDCSelectHelperText } from '@material/select/helper-text';
+export class PtcSelect {
+  constructor() {
+    this.label = undefined;
+    this.isRequired = true;
+    this.helpertext = 'Please select a value!';
+    this.name = undefined;
+    this.disabled = false;
+    this.selectedValue = '';
+    this.ptcDataEloquaName = undefined;
+  }
+  // helperTextComponent: any;
+  componentDidLoad() {
+    const select = new MDCSelect(this.el.querySelector('.mdc-select'));
+    select.listen('MDCSelect:change', () => {
+      this.valueChange.emit(select.value);
+      this.selectedValue = select.value;
+    });
+    // this.helperTextComponent = new MDCSelectHelperText(this.el.querySelector('.mdc-select-helper-text'));
+  }
+  getSelectClassName() {
+    let className = 'mdc-select mdc-select--outlined mdc-select--no-label';
+    if (this.isRequired) {
+      className = `${className} mdc-select--required`;
+    }
+    return className;
+  }
+  render() {
+    return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: "demo-selected-text", class: "mdc-select__selected-text", "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" }, h("slot", null))), h("p", { id: this.name, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext)));
+  }
+  static get is() { return "ptc-select"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "isRequired": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "helpertext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "'Please select a value!'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selectedValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "ptcDataEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Eloqua Data"
+        },
+        "attribute": "ptc-data-eloqua-name",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js

@@ -1,97 +1,97 @@
-import { Host, h } from '@stencil/core';
-import ShoppingCartBlack from '../../media/svg-imgs/ptc-shopping-cart-black.svg';
-import ShoppingCartWhite from '../../media/svg-imgs/ptc-shopping-cart-white.svg';
-export class PtcShoppingCart {
-  constructor() {
-    this.cartCount = undefined;
-    this.color = 'white';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const svg = this.color == 'black' ? ShoppingCartBlack : ShoppingCartWhite;
-    const svgClass = this.color == 'black' ? "cart clear-background" : "cart black-background";
-    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }))));
-    /*
-            if(this.color == 'black'){
-                return (
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart" innerHTML={ShoppingCartBlack}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartBlack}></div>)
-                        }
-                    </Host>
-                );
-            } else if(this.color == 'white'){
-                return(
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart black-background" innerHTML={ShoppingCartWhite}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
-                        }
-                    </Host>
-                );
-            }*/
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-shopping-cart']: true,
-    };
-  }
-  static get is() { return "ptc-shopping-cart"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-shopping-cart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-shopping-cart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cartCount": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "cart-count",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'black' | 'white'",
-          "resolved": "\"black\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'white'"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+import ShoppingCartBlack from '../../media/svg-imgs/ptc-shopping-cart-black.svg';
+import ShoppingCartWhite from '../../media/svg-imgs/ptc-shopping-cart-white.svg';
+export class PtcShoppingCart {
+  constructor() {
+    this.cartCount = undefined;
+    this.color = 'white';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const svg = this.color == 'black' ? ShoppingCartBlack : ShoppingCartWhite;
+    const svgClass = this.color == 'black' ? "cart clear-background" : "cart black-background";
+    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }))));
+    /*
+            if(this.color == 'black'){
+                return (
+                    <Host class={classMap}>
+                        {this.cartCount ? (
+                            <div class="cart" innerHTML={ShoppingCartBlack}>
+                                <div class="cart__count">{this.cartCount}</div>
+                            </div>
+                        ) : (
+                            <div innerHTML={ShoppingCartBlack}></div>)
+                        }
+                    </Host>
+                );
+            } else if(this.color == 'white'){
+                return(
+                    <Host class={classMap}>
+                        {this.cartCount ? (
+                            <div class="cart black-background" innerHTML={ShoppingCartWhite}>
+                                <div class="cart__count">{this.cartCount}</div>
+                            </div>
+                        ) : (
+                            <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
+                        }
+                    </Host>
+                );
+            }*/
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-shopping-cart']: true,
+    };
+  }
+  static get is() { return "ptc-shopping-cart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-shopping-cart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-shopping-cart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cartCount": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cart-count",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'black' | 'white'",
+          "resolved": "\"black\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'white'"
+      }
+    };
+  }
+}