@justifi/webcomponents 4.2.2 → 4.5.0

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js

@@ -0,0 +1,72 @@
+import { Host, h } from "@stencil/core";
+import { BusinessStructureOptions, BusinessTypeOptions, } from "../business-form-schema";
+import { PHONE_MASKS } from "../../../utils/phone-masks";
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class BusinessGenericInfo {
+  constructor() {
+    this.formController = undefined;
+    this.errors = {};
+    this.business = {};
+    this.inputHandler = this.inputHandler.bind(this);
+  }
+  componentDidLoad() {
+    this.formController.errors.subscribe(errors => {
+      this.errors = Object.assign({}, errors);
+    });
+    this.formController.values.subscribe(values => (this.business = Object.assign({}, values)));
+  }
+  inputHandler(name, value) {
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+  }
+  render() {
+    const genericInfoDefaultValue = this.formController.getInitialValues();
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))));
+  }
+  static get is() { return "justifi-business-generic-info"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-generic-info.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-generic-info.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "formController": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FormController",
+          "resolved": "FormController",
+          "references": {
+            "FormController": {
+              "location": "import",
+              "path": "../../form/form",
+              "id": "src/components/form/form.ts::FormController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "errors": {},
+      "business": {}
+    };
+  }
+}
+//# sourceMappingURL=business-generic-info.js.map

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-generic-info.js","sourceRoot":"","sources":["../../../../../src/components/business-form/business-generic-info/business-generic-info.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\n\nimport {\n  BusinessStructureOptions,\n  BusinessTypeOptions,\n} from '../business-form-schema';\nimport { FormController } from '../../form/form';\nimport { PHONE_MASKS } from '../../../utils/phone-masks';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-generic-info',\n  styleUrl: 'business-generic-info.scss',\n})\nexport class BusinessGenericInfo {\n  @Prop() formController: FormController;\n  @State() errors: any = {};\n  @State() business: any = {};\n\n  constructor() {\n    this.inputHandler = this.inputHandler.bind(this);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = { ...errors };\n    });\n    this.formController.values.subscribe(\n      values => (this.business = { ...values }),\n    );\n  }\n\n  inputHandler(name: string, value: string) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      [name]: value,\n    });\n  }\n\n  render() {\n    const genericInfoDefaultValue = this.formController.getInitialValues();\n\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <div class=\"row gy-3\">\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"legal_name\"\n              label=\"Legal Name\"\n              defaultValue={genericInfoDefaultValue.legal_name}\n              error={this.errors.legal_name}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"doing_business_as\"\n              label=\"Doing Business As (DBA)\"\n              defaultValue={genericInfoDefaultValue.doing_business_as}\n              error={this.errors.doing_business_as}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-select\n              name=\"business_type\"\n              label=\"Business Type\"\n              options={BusinessTypeOptions}\n              defaultValue={genericInfoDefaultValue.business_type}\n              error={this.errors.business_type}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-select\n              name=\"business_structure\"\n              label=\"Business Structure\"\n              options={BusinessStructureOptions}\n              defaultValue={genericInfoDefaultValue.business_structure}\n              error={this.errors.business_structure}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"industry\"\n              label=\"Industry\"\n              defaultValue={genericInfoDefaultValue.industry}\n              error={this.errors.business_structure}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-number\n              name=\"tax_id\"\n              label=\"Tax ID\"\n              defaultValue={genericInfoDefaultValue.tax_id}\n              error={this.errors.tax_id}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"website_url\"\n              label=\"Website URL\"\n              defaultValue={genericInfoDefaultValue.website_url}\n              error={this.errors.website_url}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"email\"\n              label=\"Email Address\"\n              defaultValue={genericInfoDefaultValue.email}\n              error={this.errors.email}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-number-masked\n              name=\"phone\"\n              label=\"Phone Number\"\n              defaultValue={genericInfoDefaultValue.phone}\n              error={this.errors.phone}\n              inputHandler={this.inputHandler}\n              mask={PHONE_MASKS.US}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}