@justifi/webcomponents 4.2.2 → 4.5.0

package/dist/collection/components/legal-address-form/legal-address-form.js

@@ -0,0 +1,90 @@
+import { Host, h } from "@stencil/core";
+import countryOptions from "../../utils/country-options";
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class LegalAddressForm {
+  constructor() {
+    this.formController = undefined;
+    this.legend = undefined;
+    this.errors = {};
+    this.legal_address = {};
+    this.inputHandler = this.inputHandler.bind(this);
+  }
+  componentDidLoad() {
+    this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
+    this.formController.values.subscribe(values => (this.legal_address = Object.assign({}, values.legal_address)));
+  }
+  inputHandler(name, value) {
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { legal_address: Object.assign(Object.assign({}, this.formController.values.getValue().legal_address), { [name]: value }) }));
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", { class: "mb-4" }, this.legend && h("legend", null, this.legend), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: countryOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+      // just for now so we skip handling country specificities
+      disabled: true }))))));
+  }
+  static get is() { return "justifi-legal-address-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["legal-address-form.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["legal-address-form.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": ""
+        }
+      },
+      "legend": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "legend",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "errors": {},
+      "legal_address": {}
+    };
+  }
+}
+//# sourceMappingURL=legal-address-form.js.map

package/dist/collection/components/legal-address-form/legal-address-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legal-address-form.js","sourceRoot":"","sources":["../../../../src/components/legal-address-form/legal-address-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, h } from '@stencil/core';\nimport { FormController } from '../form/form';\nimport countryOptions from '../../utils/country-options';\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-legal-address-form',\n  styleUrl: 'legal-address-form.scss',\n})\nexport class LegalAddressForm {\n  @Prop() formController: FormController;\n  @Prop() legend: string;\n  @State() errors: any = {};\n  @State() legal_address: any = {};\n\n  constructor() {\n    this.inputHandler = this.inputHandler.bind(this);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(\n      errors => (this.errors = { ...errors }),\n    );\n    this.formController.values.subscribe(\n      values => (this.legal_address = { ...values.legal_address }),\n    );\n  }\n\n  inputHandler(name: string, value: string) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      legal_address: {\n        ...this.formController.values.getValue().legal_address,\n        [name]: value,\n      },\n    });\n  }\n\n  render() {\n    const legalAddressDefaultValue =\n      this.formController.getInitialValues().legal_address;\n\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset class=\"mb-4\">\n          {this.legend && <legend>{this.legend}</legend>}\n          <div class=\"row gx-2 gy-2\">\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"line1\"\n                label=\"Legal Address\"\n                inputHandler={this.inputHandler}\n                defaultValue={legalAddressDefaultValue?.line1}\n                error={this.errors?.legal_address?.line1}\n              />\n            </div>\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"line2\"\n                label=\"Address Line 2\"\n                inputHandler={(name, value) => this.inputHandler(name, value)}\n                defaultValue={legalAddressDefaultValue?.line2}\n              />\n            </div>\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"city\"\n                label=\"City\"\n                inputHandler={this.inputHandler}\n                defaultValue={legalAddressDefaultValue?.city}\n                error={this.errors?.legal_address?.city}\n              />\n            </div>\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"state\"\n                label=\"State\"\n                inputHandler={this.inputHandler}\n                defaultValue={legalAddressDefaultValue?.state}\n                error={this.errors?.legal_address?.state}\n              />\n            </div>\n            <div class=\"col-12\">\n              <form-control-number\n                name=\"postal_code\"\n                label=\"Postal Code\"\n                inputHandler={this.inputHandler}\n                defaultValue={legalAddressDefaultValue?.postal_code}\n                error={this.errors?.legal_address?.postal_code}\n              />\n            </div>\n            <div class=\"col-12\">\n              <form-control-select\n                name=\"country\"\n                label=\"Country\"\n                options={countryOptions}\n                inputHandler={this.inputHandler}\n                defaultValue={legalAddressDefaultValue?.country}\n                error={this.errors?.legal_address?.country}\n                // just for now so we skip handling country specificities\n                disabled={true}\n              />\n            </div>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/payment-details/example.js

@@ -0,0 +1,12 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-payment-details')}
+
+<body>
+  <justifi-payment-details></justifi-payment-details>
+</body>
+
+</html>`;