@ptcwebops/ptcw-design 2.6.6 → 2.6.8

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

@@ -0,0 +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": []
+        }
+      }
+    };
+  }
+}