@justifi/webcomponents 4.2.2 → 4.4.0

package/dist/collection/components/form/form-control-text.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+export class TextInput {
+  constructor() {
+    this.label = undefined;
+    this.name = undefined;
+    this.error = undefined;
+    this.defaultValue = undefined;
+    this.inputHandler = undefined;
+  }
+  handleFormControlInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.inputHandler(name, target.value);
+  }
+  ;
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text" }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "form-control-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-control-text.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-control-text.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "name": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "inputHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(name: string, value: string) => void",
+          "resolved": "(name: string, value: string) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "formControlInput",
+        "name": "formControlInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "formControlBlur",
+        "name": "formControlBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=form-control-text.js.map

package/dist/collection/components/form/form-control-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-text.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;;;;;;;;EASpB,sBAAsB,CAAC,KAAU;IAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAAA,CAAC;EAEF,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IACtD,IAAI,CAAC,KAAK,CACL;MACR,aACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC3D,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EAC9D,IAAI,EAAC,MAAM,GACX;MACD,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'form-control-text',\n  styleUrl: 'form-control-text.scss',\n  shadow: true,\n})\nexport class TextInput {\n  @Prop() label: string;\n  @Prop() name: any;\n  @Prop() error: string;\n  @Prop() defaultValue: string;\n  @Prop() inputHandler: (name: string, value: string) => void;\n  @Event() formControlInput: EventEmitter<any>;\n  @Event() formControlBlur: EventEmitter<any>;\n\n  handleFormControlInput(event: any) {\n    const target = event.target;\n    const name = target.getAttribute('name');\n    this.inputHandler(name, target.value);\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\" htmlFor={this.name}>\n          {this.label}\n        </label>\n        <input\n          id={this.name}\n          name={this.name}\n          onInput={(event: any) => this.handleFormControlInput(event)}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-control is-invalid' : 'form-control'}\n          type=\"text\"\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/form/form.js

@@ -0,0 +1,85 @@
+import { BehaviorSubject } from "rxjs";
+export class FormController {
+  constructor(schema, defaultValues = {}) {
+    this.defaultValues = new BehaviorSubject({});
+    this.values = new BehaviorSubject({});
+    this.errors = new BehaviorSubject({});
+    this._defaultValues = {};
+    this._values = {};
+    this._errors = {};
+    this._isValid = true;
+    this._schema = schema;
+    this._defaultValues = defaultValues;
+  }
+  processArrayError(obj, property, remainingProperties, message) {
+    // Extract array name and index from the property string
+    const [arrayName, indexStr] = property.match(/^([a-zA-Z0-9]+)\[(\d+)\]/).slice(1);
+    const index = parseInt(indexStr, 10);
+    // Ensure the array exists and has an entry at the given index
+    obj[arrayName] = obj[arrayName] || [];
+    obj[arrayName][index] = obj[arrayName][index] || {};
+    // Recursively set the error if there are remaining properties, else set the error message
+    if (remainingProperties.length) {
+      this.setNestedError(obj[arrayName][index], remainingProperties, message);
+    }
+    else {
+      obj[arrayName][index] = message;
+    }
+  }
+  processRegularError(obj, property, remainingProperties, message) {
+    // Ensure the property exists
+    obj[property] = obj[property] || {};
+    // Recursively set the error if there are remaining properties, else set the error message
+    if (remainingProperties.length) {
+      this.setNestedError(obj[property], remainingProperties, message);
+    }
+    else {
+      obj[property] = message;
+    }
+  }
+  setNestedError(obj, properties, message) {
+    const property = properties.shift();
+    const isArrayError = property.includes('[');
+    if (isArrayError) {
+      this.processArrayError(obj, property, properties, message);
+    }
+    else {
+      this.processRegularError(obj, property, properties, message);
+    }
+  }
+  setError(obj, path, message) {
+    // Convert path to properties array
+    const properties = Array.isArray(path) ? path : path.split('.');
+    this.setNestedError(obj, properties, message);
+  }
+  async validate() {
+    this._isValid = true;
+    this._errors = {};
+    try {
+      await this._schema.validate(this._values, { abortEarly: false });
+    }
+    catch (err) {
+      this._isValid = false;
+      err.inner.forEach((item) => {
+        this.setError(this._errors, item.path, item.message);
+      });
+    }
+    this.errors.next(this._errors);
+    return this._isValid;
+  }
+  async validateAndSubmit(submitHandler) {
+    const isValid = await this.validate();
+    if (isValid) {
+      submitHandler();
+    }
+  }
+  setValues(values) {
+    this._values = Object.assign(Object.assign({}, this._values), values);
+    this.values.next(this._values);
+  }
+  setDefaultValues(values) {
+    this._defaultValues = Object.assign(Object.assign({}, this._defaultValues), values);
+    this.defaultValues.next(this._defaultValues);
+  }
+}
+//# sourceMappingURL=form.js.map

package/dist/collection/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAGvC,MAAM,OAAO,cAAc;EAWzB,YAAY,MAAyB,EAAE,gBAAqB,EAAE;IAVvD,kBAAa,GAAG,IAAI,eAAe,CAAM,EAAE,CAAC,CAAC;IAC7C,WAAM,GAAG,IAAI,eAAe,CAAM,EAAE,CAAC,CAAC;IACtC,WAAM,GAAG,IAAI,eAAe,CAAM,EAAE,CAAC,CAAC;IAGrC,mBAAc,GAAQ,EAAE,CAAC;IACzB,YAAO,GAAQ,EAAE,CAAC;IAClB,YAAO,GAAQ,EAAE,CAAC;IAClB,aAAQ,GAAG,IAAI,CAAC;IAGtB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;EACtC,CAAC;EAEO,iBAAiB,CAAC,GAAQ,EAAE,QAAgB,EAAE,mBAA6B,EAAE,OAAe;IAClG,wDAAwD;IACxD,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAErC,8DAA8D;IAC9D,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACtC,GAAG,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAEpD,0FAA0F;IAC1F,IAAI,mBAAmB,CAAC,MAAM,EAAE;MAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,EAAE,mBAAmB,EAAE,OAAO,CAAC,CAAC;KAC1E;SAAM;MACL,GAAG,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;KACjC;EACH,CAAC;EAEO,mBAAmB,CAAC,GAAQ,EAAE,QAAgB,EAAE,mBAA6B,EAAE,OAAe;IACpG,6BAA6B;IAC7B,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,0FAA0F;IAC1F,IAAI,mBAAmB,CAAC,MAAM,EAAE;MAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,OAAO,CAAC,CAAC;KAClE;SAAM;MACL,GAAG,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC;KACzB;EACH,CAAC;EAEO,cAAc,CAAC,GAAQ,EAAE,UAAoB,EAAE,OAAe;IACpE,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC;IACpC,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE5C,IAAI,YAAY,EAAE;MAChB,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;KAC5D;SAAM;MACL,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;KAC9D;EACH,CAAC;EAEO,QAAQ,CAAC,GAAQ,EAAE,IAAY,EAAE,OAAe;IACtD,mCAAmC;IACnC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChE,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;EAChD,CAAC;EAEO,KAAK,CAAC,QAAQ;IACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IAElB,IAAI;MACF,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;KAClE;IAAC,OAAO,GAAG,EAAE;MACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAqB,EAAE,EAAE;QAC1C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;MACvD,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,IAAI,CAAC,QAAQ,CAAC;EACvB,CAAC;EAEM,KAAK,CAAC,iBAAiB,CAAC,aAAyB;IACtD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;IACtC,IAAI,OAAO,EAAE;MACX,aAAa,EAAE,CAAC;KACjB;EACH,CAAC;EAEM,SAAS,CAAC,MAAW;IAC1B,IAAI,CAAC,OAAO,mCAAQ,IAAI,CAAC,OAAO,GAAK,MAAM,CAAE,CAAC;IAC9C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACjC,CAAC;EAEM,gBAAgB,CAAC,MAAW;IACjC,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,MAAM,CAAE,CAAC;IAC5D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC/C,CAAC;CACF","sourcesContent":["import { BehaviorSubject } from 'rxjs';\nimport { ObjectSchema, ValidationError } from 'yup';\n\nexport class FormController {\n  public defaultValues = new BehaviorSubject<any>({});\n  public values = new BehaviorSubject<any>({});\n  public errors = new BehaviorSubject<any>({});\n\n  private _schema: ObjectSchema<any>;\n  private _defaultValues: any = {};\n  private _values: any = {};\n  private _errors: any = {};\n  private _isValid = true;\n\n  constructor(schema: ObjectSchema<any>, defaultValues: any = {}) {\n    this._schema = schema;\n    this._defaultValues = defaultValues;\n  }\n\n  private processArrayError(obj: any, property: string, remainingProperties: string[], message: string): void {\n    // Extract array name and index from the property string\n    const [arrayName, indexStr] = property.match(/^([a-zA-Z0-9]+)\\[(\\d+)\\]/).slice(1);\n    const index = parseInt(indexStr, 10);\n\n    // Ensure the array exists and has an entry at the given index\n    obj[arrayName] = obj[arrayName] || [];\n    obj[arrayName][index] = obj[arrayName][index] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[arrayName][index], remainingProperties, message);\n    } else {\n      obj[arrayName][index] = message;\n    }\n  }\n\n  private processRegularError(obj: any, property: string, remainingProperties: string[], message: string): void {\n    // Ensure the property exists\n    obj[property] = obj[property] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[property], remainingProperties, message);\n    } else {\n      obj[property] = message;\n    }\n  }\n\n  private setNestedError(obj: any, properties: string[], message: string): void {\n    const property = properties.shift();\n    const isArrayError = property.includes('[');\n\n    if (isArrayError) {\n      this.processArrayError(obj, property, properties, message);\n    } else {\n      this.processRegularError(obj, property, properties, message);\n    }\n  }\n\n  private setError(obj: any, path: string, message: string): void {\n    // Convert path to properties array\n    const properties = Array.isArray(path) ? path : path.split('.');\n    this.setNestedError(obj, properties, message);\n  }\n\n  private async validate(): Promise<boolean> {\n    this._isValid = true;\n    this._errors = {};\n\n    try {\n      await this._schema.validate(this._values, { abortEarly: false });\n    } catch (err) {\n      this._isValid = false;\n      err.inner.forEach((item: ValidationError) => {\n        this.setError(this._errors, item.path, item.message);\n      });\n    }\n\n    this.errors.next(this._errors);\n    return this._isValid;\n  }\n\n  public async validateAndSubmit(submitHandler: () => void): Promise<void> {\n    const isValid = await this.validate();\n    if (isValid) {\n      submitHandler();\n    }\n  }\n\n  public setValues(values: any): void {\n    this._values = { ...this._values, ...values };\n    this.values.next(this._values);\n  }\n\n  public setDefaultValues(values: any): void {\n    this._defaultValues = { ...this._defaultValues, ...values };\n    this.defaultValues.next(this._defaultValues);\n  }\n}\n"]}