@ptcwebops/ptcw-design 2.7.7 → 2.7.8

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.js

@@ -1,209 +1,209 @@
-import { h } from '@stencil/core';
-import { MDCCheckbox } from '@material/checkbox';
-import { MDCFormField } from '@material/form-field';
-export class PtcFormCheckbox {
-  constructor() {
-    this.checkboxId = undefined;
-    this.label = undefined;
-    this.required = true;
-    this.isChecked = false;
-    this.name = undefined;
-    this.helpertext = 'This field is required';
-    this.hasError = false;
-  }
-  handleChange(event) {
-    const isCheckedStatus = event.target.checked;
-    this.checkboxChanged.emit(isCheckedStatus);
-    this.isChecked = isCheckedStatus;
-    this.validateCheckbox();
-    console.log('log: isChecked:' + this.isChecked);
-  }
-  componentDidLoad() {
-    this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
-    this.mdcFormfieldComponent = MDCFormField.attachTo(this.mdcFormfield);
-  }
-  async validateCheckbox() {
-    // this.isCheckboxChecked = !this.isCheckboxChecked; // Toggle checkbox state
-    if (!this.checkboxInput.checked) {
-      this.hasError = true; // Set error state to true
-    }
-    else {
-      this.hasError = false; // Reset error state
-    }
-  }
-  render() {
-    return [
-      h("div", { class: `mdc-form-field ${this.hasError ? 'invalid-checkbox' : ''}`, ref: mdcFormfield => {
-          this.mdcFormfield = mdcFormfield;
-        } }, h("div", { class: "mdc-checkbox", ref: mdcCheckbox => {
-          this.mdcCheckbox = mdcCheckbox;
-        } }, h("input", Object.assign({ id: this.checkboxId, ref: checkboxInput => {
-          this.checkboxInput = checkboxInput;
-        }, type: "checkbox" }, (this.required ? { required: true } : {}), { class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this) })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId }, this.label)),
-      this.hasError ? (h("div", { class: "checkbox-helper-wrapper" }, h("p", { id: this.name }, 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))) : null,
-    ];
-  }
-  static get is() { return "ptc-form-checkbox"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-form-checkbox.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-form-checkbox.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "checkboxId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "checkbox-id",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "isChecked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-checked",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "helpertext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "helpertext",
-        "reflect": false,
-        "defaultValue": "'This field is required'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasError": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "checkboxChanged",
-        "name": "checkboxChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "validateCheckbox": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}
+import { h } from '@stencil/core';
+import { MDCCheckbox } from '@material/checkbox';
+import { MDCFormField } from '@material/form-field';
+export class PtcFormCheckbox {
+  constructor() {
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.required = true;
+    this.isChecked = false;
+    this.name = undefined;
+    this.helpertext = 'This field is required';
+    this.hasError = false;
+  }
+  handleChange(event) {
+    const isCheckedStatus = event.target.checked;
+    this.checkboxChanged.emit(isCheckedStatus);
+    this.isChecked = isCheckedStatus;
+    this.validateCheckbox();
+    console.log('log: isChecked:' + this.isChecked);
+  }
+  componentDidLoad() {
+    this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
+    this.mdcFormfieldComponent = MDCFormField.attachTo(this.mdcFormfield);
+  }
+  async validateCheckbox() {
+    // this.isCheckboxChecked = !this.isCheckboxChecked; // Toggle checkbox state
+    if (!this.checkboxInput.checked) {
+      this.hasError = true; // Set error state to true
+    }
+    else {
+      this.hasError = false; // Reset error state
+    }
+  }
+  render() {
+    return [
+      h("div", { class: `mdc-form-field ${this.hasError ? 'invalid-checkbox' : ''}`, ref: mdcFormfield => {
+          this.mdcFormfield = mdcFormfield;
+        } }, h("div", { class: "mdc-checkbox", ref: mdcCheckbox => {
+          this.mdcCheckbox = mdcCheckbox;
+        } }, h("input", Object.assign({ id: this.checkboxId, ref: checkboxInput => {
+          this.checkboxInput = checkboxInput;
+        }, type: "checkbox" }, (this.required ? { required: true } : {}), { class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this) })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId }, this.label)),
+      this.hasError ? (h("div", { class: "checkbox-helper-wrapper" }, h("p", { id: this.name }, 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))) : null,
+    ];
+  }
+  static get is() { return "ptc-form-checkbox"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-form-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-form-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checkboxId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checkbox-id",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "isChecked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "helpertext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "'This field is required'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasError": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "checkboxChanged",
+        "name": "checkboxChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "validateCheckbox": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -1,86 +1,86 @@
-import { Host, h } from '@stencil/core';
-export class PtcHero {
-  constructor() {
-    this.heroType = undefined;
-    this.bgUrl = undefined;
-    this.contentAlignment = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null))) : (h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-      [this.contentAlignment]: this.contentAlignment ? true : false
-    };
-  }
-  static get is() { return "ptc-hero"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-hero.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-hero.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "heroType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'jumbotron' | 'footer-cta' | 'simple'",
-          "resolved": "\"footer-cta\" | \"jumbotron\" | \"simple\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hero Type"
-        },
-        "attribute": "hero-type",
-        "reflect": false
-      },
-      "bgUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hero Background Image URL"
-        },
-        "attribute": "bg-url",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "contentAlignment": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right' | 'center'",
-          "resolved": "\"center\" | \"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Content Alignment"
-        },
-        "attribute": "content-alignment",
-        "reflect": false
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcHero {
+  constructor() {
+    this.heroType = undefined;
+    this.bgUrl = undefined;
+    this.contentAlignment = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null))) : (h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+      [this.contentAlignment]: this.contentAlignment ? true : false
+    };
+  }
+  static get is() { return "ptc-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-hero.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-hero.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heroType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'jumbotron' | 'footer-cta' | 'simple'",
+          "resolved": "\"footer-cta\" | \"jumbotron\" | \"simple\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hero Type"
+        },
+        "attribute": "hero-type",
+        "reflect": false
+      },
+      "bgUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hero Background Image URL"
+        },
+        "attribute": "bg-url",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "contentAlignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'center'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Content Alignment"
+        },
+        "attribute": "content-alignment",
+        "reflect": false
+      }
+    };
+  }
+}