@ptcwebops/ptcw-design 3.6.2 → 3.6.4

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

@@ -1,303 +1,303 @@
-import { h } from '@stencil/core';
-import { MDCCheckbox } from '@material/checkbox';
-import { MDCFormField } from '@material/form-field';
-import { ValidationMessages } from '../../utils/validation-messages';
-import { getLanguageFromURL } from '../../utils/utils';
-export class PtcFormCheckbox {
-  constructor() {
-    this.checkboxId = undefined;
-    this.label = undefined;
-    this.isRequired = true;
-    this.isChecked = false;
-    this.name = undefined;
-    this.helpertext = 'This field is required';
-    this.hideCheckbox = false;
-    this.disabled = false;
-    this.ptcDataEloquaName = undefined;
-    this.hasError = false;
-    this.language = 'en';
-    this.ignoreBlindSubmit = false;
-  }
-  handleChange(event) {
-    if (this.disabled) {
-      event.preventDefault();
-    }
-    else {
-      const isCheckedStatus = event.target.checked;
-      this.checkboxChanged.emit(isCheckedStatus);
-      this.isChecked = isCheckedStatus;
-      this.validateCheckbox();
-      console.log('log: isChecked:' + this.isChecked);
-    }
-  }
-  componentWillLoad() {
-    this.language = getLanguageFromURL();
-    this.helpertext = this.getValidationMessage('required');
-  }
-  componentDidLoad() {
-    this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
-    this.mdcFormfieldComponent = MDCFormField.attachTo(this.mdcFormfield);
-  }
-  async validateCheckbox() {
-    // this.isCheckboxChecked = !this.isCheckboxChecked; // Toggle checkbox state
-    if (this.isRequired) {
-      if (!this.checkboxInput.checked) {
-        this.hasError = true; // Set error state to true
-      }
-      else {
-        this.hasError = false; // Reset error state
-      }
-    }
-  }
-  getValidationMessage(type) {
-    // console.log("lang type: " + type);
-    return ValidationMessages[this.language][type];
-  }
-  render() {
-    return [
-      h("div", { class: `mdc-form-field ${this.hasError && this.isRequired ? 'invalid-checkbox' : ''} ${this.hideCheckbox ? 'label-only' : ''}`, 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.isRequired ? { required: true } : { required: false }), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { "data-eloqua-name": this.ptcDataEloquaName, 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, innerHTML: 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
-      },
-      "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"
-      },
-      "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": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "helpertext",
-        "reflect": false,
-        "defaultValue": "'This field is required'"
-      },
-      "hideCheckbox": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-checkbox",
-        "reflect": false,
-        "defaultValue": "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"
-      },
-      "ptcDataEloquaName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ptc-data-eloqua-name",
-        "reflect": false
-      },
-      "ignoreBlindSubmit": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ignore-blind-submit",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasError": {},
-      "language": {}
-    };
-  }
-  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';
+import { ValidationMessages } from '../../utils/validation-messages';
+import { getLanguageFromURL } from '../../utils/utils';
+export class PtcFormCheckbox {
+  constructor() {
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.isRequired = true;
+    this.isChecked = false;
+    this.name = undefined;
+    this.helpertext = 'This field is required';
+    this.hideCheckbox = false;
+    this.disabled = false;
+    this.ptcDataEloquaName = undefined;
+    this.hasError = false;
+    this.language = 'en';
+    this.ignoreBlindSubmit = false;
+  }
+  handleChange(event) {
+    if (this.disabled) {
+      event.preventDefault();
+    }
+    else {
+      const isCheckedStatus = event.target.checked;
+      this.checkboxChanged.emit(isCheckedStatus);
+      this.isChecked = isCheckedStatus;
+      this.validateCheckbox();
+      console.log('log: isChecked:' + this.isChecked);
+    }
+  }
+  componentWillLoad() {
+    this.language = getLanguageFromURL();
+    this.helpertext = this.getValidationMessage('required');
+  }
+  componentDidLoad() {
+    this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
+    this.mdcFormfieldComponent = MDCFormField.attachTo(this.mdcFormfield);
+  }
+  async validateCheckbox() {
+    // this.isCheckboxChecked = !this.isCheckboxChecked; // Toggle checkbox state
+    if (this.isRequired) {
+      if (!this.checkboxInput.checked) {
+        this.hasError = true; // Set error state to true
+      }
+      else {
+        this.hasError = false; // Reset error state
+      }
+    }
+  }
+  getValidationMessage(type) {
+    // console.log("lang type: " + type);
+    return ValidationMessages[this.language][type];
+  }
+  render() {
+    return [
+      h("div", { class: `mdc-form-field ${this.hasError && this.isRequired ? 'invalid-checkbox' : ''} ${this.hideCheckbox ? 'label-only' : ''}`, 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.isRequired ? { required: true } : { required: false }), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { "data-eloqua-name": this.ptcDataEloquaName, 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, innerHTML: 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
+      },
+      "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"
+      },
+      "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": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "'This field is required'"
+      },
+      "hideCheckbox": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-checkbox",
+        "reflect": false,
+        "defaultValue": "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"
+      },
+      "ptcDataEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-eloqua-name",
+        "reflect": false
+      },
+      "ignoreBlindSubmit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ignore-blind-submit",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasError": {},
+      "language": {}
+    };
+  }
+  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.css

@@ -13,6 +13,38 @@ li {
   -moz-hyphens: manual;
   -ms-hyphens: manual;
 }
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
 
 :host {
   display: block;