@justifi/webcomponents 4.4.0 → 4.5.1

package/dist/components/business-owners.js.map

@@ -1 +1 @@
-{"file":"business-owners.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,sjxCAAsjxC;;ACGhlxC,MAAM,aAAa;EAAnB;IACE,SAAI,GAAW,EAAE,CAAC;IAClB,UAAK,GAAW,EAAE,CAAC;IACnB,UAAK,GAAW,EAAE,CAAC;IACnB,UAAK,GAAW,EAAE,CAAC;IACnB,YAAO,GAAW,EAAE,CAAC;IACrB,cAAS,GAAW,EAAE,CAAC;IACvB,aAAQ,GAAW,EAAE,CAAC;IACtB,0BAAqB,GAAW,EAAE,CAAC;IACnC,aAAQ,GAAY,IAAI,CAAC;IACzB,aAAQ,GAAQ,EAAE,CAAC;IACnB,YAAO,GAAQ,EAAE,CAAC;GACnB;CAAA;MAYY,cAAc;;;;;yBAEO,EAAE;kBACT,EAAE;kBACQ,EAAE;;EAGrC,kBAAkB,CAAC,SAAc;IAC/B,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;GACtD;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,qBAAQ,aAAa,CAAC,MAAM,CAAE,CAAC,CAAC,CAAC;IACjH,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,qBAAQ,MAAM,CAAC,MAAM,CAAE,CAAC,CAAC,CAAC;GACtF;EAED,YAAY,CAAC,IAAY,EAAE,KAAa,EAAE,KAAa;IACrD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,YAAY,mCAAQ,aAAa,CAAC,KAAK,CAAC,KAAE,CAAC,IAAI,GAAG,KAAK,GAAE,CAAC;IAChE,aAAa,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC;IACpC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC;GAC7B;EAED,QAAQ,CAAC,KAAiB;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC;IACtC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAED,WAAW,CAAC,KAAiB,EAAE,KAAa;IAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B,IAC3C,gBAAU,KAAK,EAAC,MAAM,IACnB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,2BAAuB,EAC/C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAqB,EAAE,KAAa;;MACpD,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,KAAK,IACd,yBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,IAAI,EAC7C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,IAAI,EAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,KAAK,IACd,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,KAAK,IACd,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,KAAK,IACd,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,OAAO,EAChD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,EAClC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,SAAS,EAClD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,SAAS,EACpC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,sBAAsB,EAC5B,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,QAAQ,EACjD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,QAAQ,EACnC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,MAAM,IACf,yBACE,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,qBAAqB,EAC9D,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,qBAAqB,EAChD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,KAAK,EAAC,cAAc,GACpB,CACE,EAEN,cAAQ,KAAK,EAAC,MAAM,qBAAwB,EAE5C,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,gBAAgB,EACtB,YAAY,EAAE,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACvD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACzC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK;UACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;UACzC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC,EACD,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,YAAY,EAAE,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,IAAI,EACtD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,IAAI,EACxC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK;UACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;UACxC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC,EACD,KAAK,EAAC,cAAc,GACpB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACvD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACzC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK;UACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;UACzC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC,EACD,KAAK,EAAC,cAAc,GACpB,CACE,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,yBACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,aAAa,EACnB,YAAY,EAAE,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,WAAW,EAC7D,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,WAAW,EAC/C,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK;UACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;UAC/C,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAChC,EACD,KAAK,EAAC,cAAc,GACpB,CACE,CACF,EACN,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,qBAEzF,CACL,CACF,EACN;KACH,CAAC,EACF,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,QAAQ,IACjB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,qBAE3E,CACL,CACF,CACG,CACN,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/business-form/business-owners/business-owners.scss?tag=justifi-business-owners","src/components/business-form/business-owners/business-owners.tsx"],"sourcesContent":["@import 'reboot';\n@import 'grid';\n@import 'buttons';\n\n:host {\n  @include host-base-styles;\n  display: block;\n}\n\n*::part(label) {\n  color: var(--jfi-form-label-color);\n  font-family: var(--jfi-form-label-font-family);\n  font-weight: var(--jfi-form-label-font-weight);\n  font-size: var(--jfi-form-label-font-size);\n  margin: var(--jfi-form-label-margin);\n}\n\n*::part(input) {\n  font-family: var(--jfi-layout-font-family);\n  background-color: var(--jfi-form-control-background-color);\n  border-color: var(--jfi-form-control-border-color);\n  border-width: var(--jfi-form-control-border-width);\n  border-bottom-width: var(--jfi-form-control-border-bottom-width);\n  border-left-width: var(--jfi-form-control-border-left-width);\n  border-right-width: var(--jfi-form-control-border-right-width);\n  border-top-width: var(--jfi-form-control-border-top-width);\n  border-radius: var(--jfi-form-control-border-radius);\n  border-style: var(--jfi-form-control-border-style);\n  box-shadow: var(--jfi-form-control-box-shadow);\n  color: var(--jfi-form-control-color);\n  font-size: var(--jfi-form-control-font-size);\n  font-weight: var(--jfi-form-control-font-weight);\n  line-height: var(--jfi-form-control-line-height);\n  margin: var(--jfi-form-control-margin);\n  padding: var(--jfi-form-control-padding);\n\n  &:focus {\n    color: var(--jfi-form-control-color-focus);\n    border-color: var(--jfi-form-control-border-color-focus);\n    box-shadow: var(--jfi-form-control-box-shadow-focus);\n  }\n}\n\n*::part(input-invalid) {\n  border-color: var(--jfi-form-control-border-color-error);\n  box-shadow: var(--jfi-form-control-box-shadow-error);\n\n  &:focus {\n    border-color: var(--jfi-form-control-border-color-error);\n    box-shadow: var(--jfi-form-control-box-shadow-error-focus);\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { FormController } from '../../form/form';\n\nclass BusinessOwner {\n  name: string = '';\n  title: string = '';\n  email: string = '';\n  phone: string = '';\n  dob_day: string = '';\n  dob_month: string = '';\n  dob_year: string = '';\n  identification_number: string = '';\n  is_owner: boolean = true;\n  metadata: any = {};\n  address: any = {};\n}\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-owners',\n  styleUrl: 'business-owners.scss',\n  shadow: false,\n})\nexport class BusinessOwners {\n  @Prop() formController: FormController;\n  @State() defaultValues: any[] = [];\n  @State() errors: any[] = [];\n  @State() owners: BusinessOwner[] = [];\n\n  @Watch('owners')\n  handleOwnersChange(newValues: any) {\n    this.formController.setValues({ owners: newValues });\n  }\n\n  componentDidLoad() {\n    this.formController.defaultValues.subscribe(defaultValues => (this.defaultValues = { ...defaultValues.owners }));\n    this.formController.errors.subscribe(errors => (this.errors = { ...errors.owners }));\n  }\n\n  inputHandler(name: string, value: string, index: number): void {\n    const updatedOwners = [...this.owners];\n    const updatedOwner = { ...updatedOwners[index], [name]: value };\n    updatedOwners[index] = updatedOwner;\n    this.owners = updatedOwners;\n  }\n\n  addOwner(event: MouseEvent): void {\n    event.preventDefault();\n    this.owners.push(new BusinessOwner());\n    this.owners = [...this.owners];\n  }\n\n  removeOwner(event: MouseEvent, index: number): void {\n    event.preventDefault();\n    this.owners.splice(index, 1);\n    this.owners = [...this.owners];\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset class=\"mb-4\">\n          {!!this.owners.length && <legend>Owners</legend>}\n          {this.owners.map((_owner: BusinessOwner, index: number) => {\n            return (\n              <div class=\"row gx-2 gy-2 mb-4\">\n                <div class=\"col-12\">\n                  <div class=\"row mb-3\">\n                    <div class=\"col\">\n                      <form-control-text\n                        name=\"name\"\n                        label=\"Full Name\"\n                        defaultValue={this.defaultValues[index]?.name}\n                        error={this.errors[index]?.name}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col\">\n                      <form-control-text\n                        name=\"title\"\n                        label=\"Title\"\n                        defaultValue={this.defaultValues[index]?.title}\n                        error={this.errors[index]?.title}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col\">\n                      <form-control-text\n                        name=\"email\"\n                        label=\"Email\"\n                        defaultValue={this.defaultValues[index]?.email}\n                        error={this.errors[index]?.email}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col\">\n                      <form-control-text\n                        name=\"phone\"\n                        label=\"Phone\"\n                        defaultValue={this.defaultValues[index]?.phone}\n                        error={this.errors[index]?.phone}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-4\">\n                      <form-control-text\n                        name=\"dob_day\"\n                        label=\"Date of Birth - Day\"\n                        defaultValue={this.defaultValues[index]?.dob_day}\n                        error={this.errors[index]?.dob_day}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col-4\">\n                      <form-control-text\n                        name=\"dob_month\"\n                        label=\"Date of Birth - Month\"\n                        defaultValue={this.defaultValues[index]?.dob_month}\n                        error={this.errors[index]?.dob_month}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col-4\">\n                      <form-control-text\n                        name=\"dob_year\"\n                        label=\"Date of Birth - Year\"\n                        defaultValue={this.defaultValues[index]?.dob_year}\n                        error={this.errors[index]?.dob_year}\n                        inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                        class=\"form-control\"\n                      />\n                    </div>\n                  </div>\n\n                  <div class=\"mb-3\">\n                    <form-control-text\n                      name=\"identification_number\"\n                      label=\"Identification Number\"\n                      defaultValue={this.defaultValues[index]?.identification_number}\n                      error={this.errors[index]?.identification_number}\n                      inputHandler={(name, value) => this.inputHandler(name, value, index)}\n                      class=\"form-control\"\n                    />\n                  </div>\n\n                  <legend class=\"mb-3\">Owner Address:</legend>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                      <form-control-text\n                        name=\"line1\"\n                        label=\"Street Address\"\n                        defaultValue={this.defaultValues[index]?.address?.line1}\n                        error={this.errors[index]?.address?.line1}\n                        inputHandler={(_name, value) => {\n                          this.owners[index].address.line1 = value;\n                          this.owners = [...this.owners];\n                        }}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col-6\">\n                      <form-control-text\n                        name=\"city\"\n                        label=\"City\"\n                        defaultValue={this.defaultValues[index]?.address?.city}\n                        error={this.errors[index]?.address?.city}\n                        inputHandler={(_name, value) => {\n                          this.owners[index].address.city = value;\n                          this.owners = [...this.owners];\n                        }}\n                        class=\"form-control\"\n                      />\n                    </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                      <form-control-text\n                        name=\"state\"\n                        label=\"State\"\n                        defaultValue={this.defaultValues[index]?.address?.state}\n                        error={this.errors[index]?.address?.state}\n                        inputHandler={(_name, value) => {\n                          this.owners[index].address.state = value;\n                          this.owners = [...this.owners];\n                        }}\n                        class=\"form-control\"\n                      />\n                    </div>\n                    <div class=\"col-6\">\n                      <form-control-text\n                        name=\"postal_code\"\n                        label=\"Postal Code\"\n                        defaultValue={this.defaultValues[index]?.address?.postal_code}\n                        error={this.errors[index]?.address?.postal_code}\n                        inputHandler={(_name, value) => {\n                          this.owners[index].address.postal_code = value;\n                          this.owners = [...this.owners];\n                        }}\n                        class=\"form-control\"\n                      />\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-danger mt-3\" onClick={event => this.removeOwner(event, index)}>\n                    - Remove owner\n                  </button>\n                </div>\n              </div>\n            );\n          })}\n          <div class=\"row gy-3\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-primary\" onClick={event => this.addOwner(event)}>\n                + Add an owner\n              </button>\n            </div>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"business-owners.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,knxHAAknxH;;ACI5oxH,MAAM,aAAa;EAAnB;IACE,SAAI,GAAW,EAAE,CAAC;IAClB,UAAK,GAAW,EAAE,CAAC;IACnB,UAAK,GAAW,EAAE,CAAC;IACnB,UAAK,GAAW,EAAE,CAAC;IACnB,YAAO,GAAW,EAAE,CAAC;IACrB,cAAS,GAAW,EAAE,CAAC;IACvB,aAAQ,GAAW,EAAE,CAAC;IACtB,0BAAqB,GAAW,EAAE,CAAC;IACnC,aAAQ,GAAY,IAAI,CAAC;IACzB,aAAQ,GAAQ,EAAE,CAAC;IACnB,YAAO,GAAQ,EAAE,CAAC;GACnB;CAAA;MAYY,cAAc;EAMzB;;;;;kBAHyB,EAAE;kBACQ,EAAE;IAGnC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAChD;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;MACzC,IAAI,CAAC,MAAM,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,EAAE,CAAC;KACpC,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAClC,MAAM,KAAK,IAAI,CAAC,MAAM,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,EAAE,CAAC,CAC/C,CAAC;GACH;EAED,YAAY,CAAC,IAAY,EAAE,KAAa,EAAE,KAAa;IACrD,IAAI,CAAC,cAAc,CAAC,SAAS,iCACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KACxC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,KAAK,EAAE;UACf,uCACK,KAAK,KACR,CAAC,IAAI,GAAG,KAAK,IACb;SACH;QACD,OAAO,KAAK,CAAC;OACd,CAAC,IACF,CAAC;GACJ;EAED,mBAAmB,CAAC,IAAY,EAAE,KAAa,EAAE,KAAa;IAC5D,IAAI,CAAC,cAAc,CAAC,SAAS,iCACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KACxC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,KAAK,EAAE;UACf,uCACK,KAAK,KACR,OAAO,kCACF,KAAK,CAAC,OAAO,KAChB,CAAC,IAAI,GAAG,KAAK,OAEf;SACH;QACD,OAAO,KAAK,CAAC;OACd,CAAC,IACF,CAAC;GACJ;EAED,QAAQ,CAAC,KAAiB;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,cAAc,CAAC,SAAS,iCACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KACxC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,oBAAO,IAAI,aAAa,EAAE,EAAG,IACpD,CAAC;GACJ;EAED,WAAW,CAAC,KAAiB,EAAE,KAAa;IAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,cAAc,CAAC,SAAS,iCACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KACxC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,IACtD,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,kBAAkB,GACtB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC;IAErD,QACE,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B,IAC3C,gBAAU,KAAK,EAAC,MAAM,IACnB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,2BAAuB,EAC/C,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,MAAM,CAAA;MACpB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAqB,EAAE,KAAa;;QACnD,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,IAAI,EAC7C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,IAAI,EAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,kCACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,KAAK,EAC9C,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAK,EAChC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,IAAI,EAAE,WAAW,CAAC,EAAE,EACpB,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,6BACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,OAAO,EAChD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,EAClC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,6BACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,SAAS,EAClD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,SAAS,EACpC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,6BACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,sBAAsB,EAC5B,YAAY,EAAE,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,QAAQ,EACjD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,QAAQ,EACnC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,MAAM,IACf,2BACE,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EACV,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,qBAAqB,EAElD,KAAK,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,qBAAqB,EAChD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAEvC,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EAEN,WAAK,KAAK,EAAC,YAAY,IACrB,cAAQ,KAAK,EAAC,MAAM,qBAAwB,EAE5C,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,gBAAgB,EACtB,YAAY,EACV,MAAA,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EAE3C,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACzC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,YAAY,EACV,MAAA,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,IAAI,EAE1C,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,IAAI,EACxC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,CACF,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,YAAY,EACV,MAAA,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EAE3C,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,KAAK,EACzC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,2BACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,aAAa,EACnB,YAAY,EACV,MAAA,MAAA,kBAAkB,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,WAAW,EAEjD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,OAAO,0CAAE,WAAW,EAC/C,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACE,CACF,CACF,EACN,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,qBAGzC,CACL,CACF,EACN;OACH,CAAC,EACJ,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,QAAQ,IACjB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,qBAG/B,CACL,CACF,CACG,CACN,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/business-form/business-owners/business-owners.scss?tag=justifi-business-owners","src/components/business-form/business-owners/business-owners.tsx"],"sourcesContent":["@import 'reboot';\n@import 'grid';\n@import 'buttons';\n@import 'bootstrap-utilities';\n\n:host {\n  @include host-base-styles;\n  display: block;\n}\n\n*::part(label) {\n  color: var(--jfi-form-label-color);\n  font-family: var(--jfi-form-label-font-family);\n  font-weight: var(--jfi-form-label-font-weight);\n  font-size: var(--jfi-form-label-font-size);\n  margin: var(--jfi-form-label-margin);\n}\n\n*::part(input) {\n  font-family: var(--jfi-layout-font-family);\n  background-color: var(--jfi-form-control-background-color);\n  border-color: var(--jfi-form-control-border-color);\n  border-width: var(--jfi-form-control-border-width);\n  border-bottom-width: var(--jfi-form-control-border-bottom-width);\n  border-left-width: var(--jfi-form-control-border-left-width);\n  border-right-width: var(--jfi-form-control-border-right-width);\n  border-top-width: var(--jfi-form-control-border-top-width);\n  border-radius: var(--jfi-form-control-border-radius);\n  border-style: var(--jfi-form-control-border-style);\n  box-shadow: var(--jfi-form-control-box-shadow);\n  color: var(--jfi-form-control-color);\n  font-size: var(--jfi-form-control-font-size);\n  font-weight: var(--jfi-form-control-font-weight);\n  line-height: var(--jfi-form-control-line-height);\n  margin: var(--jfi-form-control-margin);\n  padding: var(--jfi-form-control-padding);\n\n  &:focus {\n    color: var(--jfi-form-control-color-focus);\n    border-color: var(--jfi-form-control-border-color-focus);\n    box-shadow: var(--jfi-form-control-box-shadow-focus);\n  }\n}\n\n*::part(input-invalid) {\n  border-color: var(--jfi-form-control-border-color-error);\n  box-shadow: var(--jfi-form-control-box-shadow-error);\n\n  &:focus {\n    border-color: var(--jfi-form-control-border-color-error);\n    box-shadow: var(--jfi-form-control-box-shadow-error-focus);\n  }\n}\n","import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { FormController } from '../../form/form';\nimport { PHONE_MASKS } from '../../../utils/phone-masks';\n\nclass BusinessOwner {\n  name: string = '';\n  title: string = '';\n  email: string = '';\n  phone: string = '';\n  dob_day: string = '';\n  dob_month: string = '';\n  dob_year: string = '';\n  identification_number: string = '';\n  is_owner: boolean = true;\n  metadata: any = {};\n  address: any = {};\n}\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-owners',\n  styleUrl: 'business-owners.scss',\n  shadow: false,\n})\nexport class BusinessOwners {\n  @Prop() formController: FormController;\n  @Prop() isEditing: boolean;\n  @State() errors: any[] = [];\n  @State() owners: BusinessOwner[] = [];\n\n  constructor() {\n    this.inputHandler = this.inputHandler.bind(this);\n    this.addOwner = this.addOwner.bind(this);\n    this.removeOwner = this.removeOwner.bind(this);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = errors?.owners || [];\n    });\n    this.formController.values.subscribe(\n      values => (this.owners = values?.owners || []),\n    );\n  }\n\n  inputHandler(name: string, value: string, index: number): void {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      owners: this.owners.map((owner, i) => {\n        if (i === index) {\n          return {\n            ...owner,\n            [name]: value,\n          };\n        }\n        return owner;\n      }),\n    });\n  }\n\n  addressInputHandler(name: string, value: string, index: number): void {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      owners: this.owners.map((owner, i) => {\n        if (i === index) {\n          return {\n            ...owner,\n            address: {\n              ...owner.address,\n              [name]: value,\n            },\n          };\n        }\n        return owner;\n      }),\n    });\n  }\n\n  addOwner(event: MouseEvent): void {\n    event.preventDefault();\n\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      owners: [...this.owners, { ...new BusinessOwner() }],\n    });\n  }\n\n  removeOwner(event: MouseEvent, index: number): void {\n    event.preventDefault();\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      owners: this.owners.filter((_owner, i) => i !== index),\n    });\n  }\n\n  render() {\n    const ownersDefaultValue =\n      this.formController.values.getValue().owners || [];\n\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset class=\"mb-4\">\n          {!!this.owners.length && <legend>Owners</legend>}\n          {!!this?.owners.length &&\n            this.owners.map((_owner: BusinessOwner, index: number) => {\n              return (\n                <div class=\"row gx-2 gy-2 mb-4\">\n                  <div class=\"col-12\">\n                    <div class=\"row mb-3\">\n                      <div class=\"col-12 col-md-6\">\n                        <form-control-text\n                          name=\"name\"\n                          label=\"Full Name\"\n                          defaultValue={ownersDefaultValue[index]?.name}\n                          error={this.errors[index]?.name}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                      <div class=\"col-12 col-md-6\">\n                        <form-control-text\n                          name=\"title\"\n                          label=\"Title\"\n                          defaultValue={ownersDefaultValue[index]?.title}\n                          error={this.errors[index]?.title}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                    </div>\n\n                    <div class=\"row mb-3\">\n                      <div class=\"col-12 col-md-6\">\n                        <form-control-text\n                          name=\"email\"\n                          label=\"Email\"\n                          defaultValue={ownersDefaultValue[index]?.email}\n                          error={this.errors[index]?.email}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                      <div class=\"col-12 col-md-6\">\n                        <form-control-number-masked\n                          name=\"phone\"\n                          label=\"Phone\"\n                          defaultValue={ownersDefaultValue[index]?.phone}\n                          error={this.errors[index]?.phone}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          mask={PHONE_MASKS.US}\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                    </div>\n\n                    <div class=\"row mb-3\">\n                      <div class=\"col-12 col-md-4\">\n                        <form-control-datepart\n                          name=\"dob_day\"\n                          label=\"Date of Birth - Day\"\n                          defaultValue={ownersDefaultValue[index]?.dob_day}\n                          error={this.errors[index]?.dob_day}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          type=\"day\"\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                      <div class=\"col-12 col-md-4\">\n                        <form-control-datepart\n                          name=\"dob_month\"\n                          label=\"Date of Birth - Month\"\n                          defaultValue={ownersDefaultValue[index]?.dob_month}\n                          error={this.errors[index]?.dob_month}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          type=\"month\"\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                      <div class=\"col-12 col-md-4\">\n                        <form-control-datepart\n                          name=\"dob_year\"\n                          label=\"Date of Birth - Year\"\n                          defaultValue={ownersDefaultValue[index]?.dob_year}\n                          error={this.errors[index]?.dob_year}\n                          inputHandler={(name, value) =>\n                            this.inputHandler(name, value, index)\n                          }\n                          type=\"year\"\n                          disabled={this.isEditing}\n                        />\n                      </div>\n                    </div>\n\n                    <div class=\"mb-3\">\n                      <form-control-number\n                        name=\"identification_number\"\n                        label=\"Identification Number\"\n                        defaultValue={\n                          ownersDefaultValue[index]?.identification_number\n                        }\n                        error={this.errors[index]?.identification_number}\n                        inputHandler={(name, value) =>\n                          this.inputHandler(name, value, index)\n                        }\n                        disabled={this.isEditing}\n                      />\n                    </div>\n\n                    <div class=\"grid gap-3\">\n                      <legend class=\"mb-3\">Owner Address:</legend>\n\n                      <div class=\"row mb-3\">\n                        <div class=\"col-12 col-md-6\">\n                          <form-control-text\n                            name=\"line1\"\n                            label=\"Street Address\"\n                            defaultValue={\n                              ownersDefaultValue[index]?.address?.line1\n                            }\n                            error={this.errors[index]?.address?.line1}\n                            inputHandler={(name, value) =>\n                              this.addressInputHandler(name, value, index)\n                            }\n                            disabled={this.isEditing}\n                          />\n                        </div>\n                        <div class=\"col-12 col-md-6\">\n                          <form-control-text\n                            name=\"city\"\n                            label=\"City\"\n                            defaultValue={\n                              ownersDefaultValue[index]?.address?.city\n                            }\n                            error={this.errors[index]?.address?.city}\n                            inputHandler={(name, value) =>\n                              this.addressInputHandler(name, value, index)\n                            }\n                            disabled={this.isEditing}\n                          />\n                        </div>\n                      </div>\n\n                      <div class=\"row mb-3\">\n                        <div class=\"col-12 col-md-6\">\n                          <form-control-text\n                            name=\"state\"\n                            label=\"State\"\n                            defaultValue={\n                              ownersDefaultValue[index]?.address?.state\n                            }\n                            error={this.errors[index]?.address?.state}\n                            inputHandler={(name, value) =>\n                              this.addressInputHandler(name, value, index)\n                            }\n                            disabled={this.isEditing}\n                          />\n                        </div>\n                        <div class=\"col-12 col-md-6\">\n                          <form-control-number\n                            name=\"postal_code\"\n                            label=\"Postal Code\"\n                            defaultValue={\n                              ownersDefaultValue[index]?.address?.postal_code\n                            }\n                            error={this.errors[index]?.address?.postal_code}\n                            inputHandler={(name, value) =>\n                              this.addressInputHandler(name, value, index)\n                            }\n                            disabled={this.isEditing}\n                          />\n                        </div>\n                      </div>\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-danger\"\n                      onClick={event => this.removeOwner(event, index)}\n                    >\n                      - Remove owner\n                    </button>\n                  </div>\n                </div>\n              );\n            })}\n          <div class=\"row gy-3\">\n            <div class=\"col-12\">\n              <button\n                type=\"button\"\n                class=\"btn btn-primary\"\n                onClick={event => this.addOwner(event)}\n              >\n                + Add an owner\n              </button>\n            </div>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/business-representative.js

@@ -1,4 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PHONE_MASKS } from './phone-masks.js';
+import { d as defineCustomElement$6 } from './form-control-datepart2.js';
+import { d as defineCustomElement$5 } from './form-control-number2.js';
+import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './business-address-form.js';
@@ -11,47 +15,59 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
     this.__registerHost();
     this.formController = undefined;
     this.errors = {};
-    this.defaultValues = {};
     this.representative = {};
-  }
-  handleRepresentativeChange(newValue) {
-    this.formController.setValues({ representative: newValue });
+    this.inputHandler = this.inputHandler.bind(this);
+    this.onAddressFormUpdate = this.onAddressFormUpdate.bind(this);
   }
   componentDidLoad() {
-    this.formController.errors.subscribe((errors) => this.errors = Object.assign({}, errors.representative));
-    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = Object.assign({}, defaultValues.representative));
+    this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
+    this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
   }
   inputHandler(name, value) {
-    this.representative = Object.assign(Object.assign({}, this.representative), { [name]: value });
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
   }
-  ;
   onAddressFormUpdate(values) {
-    this.representative = Object.assign(Object.assign({}, this.representative), { address: values });
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
   }
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: this.defaultValues.name, error: this.errors.name, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: this.defaultValues.title, options: [{ label: 'Select Prefix', value: '' }, { label: 'Mrs.', value: 'Mrs.' }], error: this.errors.title, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: this.defaultValues.email, error: this.errors.email, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "phone", label: "Phone Number", defaultValue: this.defaultValues.phone, error: this.errors.phone, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_day", label: "Day", defaultValue: this.defaultValues.dob_day, error: this.errors.dob_day, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_month", label: "Month", defaultValue: this.defaultValues.dob_month, error: this.errors.dob_month, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_year", label: "Year", defaultValue: this.defaultValues.dob_year, error: this.errors.dob_year, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "identification_number", label: "EIN/SSN", defaultValue: this.defaultValues.identification_number, error: this.errors.identification_number, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: this.defaultValues.address, onFormUpdate: (values) => this.onAddressFormUpdate(values) }))))));
+    const representativeDefaultValue = this.formController.getInitialValues().representative;
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, options: [
+        { label: 'Select Prefix', value: '' },
+        { label: 'Mrs.', value: 'Mrs.' },
+      ], error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, onFormUpdate: values => this.onAddressFormUpdate(values) }))))));
   }
-  static get watchers() { return {
-    "representative": ["handleRepresentativeChange"]
-  }; }
   static get style() { return businessRepresentativeCss; }
 }, [0, "justifi-business-representative", {
     "formController": [16],
     "errors": [32],
-    "defaultValues": [32],
     "representative": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["justifi-business-representative", "form-control-select", "form-control-text", "justifi-business-address-form"];
+  const components = ["justifi-business-representative", "form-control-datepart", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-business-address-form"];
   components.forEach(tagName => { switch (tagName) {
     case "justifi-business-representative":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BusinessRepresentative);
       }
       break;
+    case "form-control-datepart":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "form-control-number":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "form-control-number-masked":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
     case "form-control-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();

package/dist/components/business-representative.js.map

@@ -1 +1 @@
-{"file":"business-representative.js","mappings":"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","names":[],"sources":["src/components/business-form/business-representative/business-representative.scss?tag=justifi-business-representative","src/components/business-form/business-representative/business-representative.tsx"],"sourcesContent":["@import 'reboot';\n@import 'grid';\n@import 'buttons';\n\n:host {\n  @include host-base-styles;\n  display: block;\n}\n\n*::part(label) {\n  color: var(--jfi-form-label-color);\n  font-family: var(--jfi-form-label-font-family);\n  font-weight: var(--jfi-form-label-font-weight);\n  font-size: var(--jfi-form-label-font-size);\n  margin: var(--jfi-form-label-margin);\n}\n\n*::part(input) {\n  font-family: var(--jfi-layout-font-family);\n  background-color: var(--jfi-form-control-background-color);\n  border-color: var(--jfi-form-control-border-color);\n  border-width: var(--jfi-form-control-border-width);\n  border-bottom-width: var(--jfi-form-control-border-bottom-width);\n  border-left-width: var(--jfi-form-control-border-left-width);\n  border-right-width: var(--jfi-form-control-border-right-width);\n  border-top-width: var(--jfi-form-control-border-top-width);\n  border-radius: var(--jfi-form-control-border-radius);\n  border-style: var(--jfi-form-control-border-style);\n  box-shadow: var(--jfi-form-control-box-shadow);\n  color: var(--jfi-form-control-color);\n  font-size: var(--jfi-form-control-font-size);\n  font-weight: var(--jfi-form-control-font-weight);\n  line-height: var(--jfi-form-control-line-height);\n  margin: var(--jfi-form-control-margin);\n  padding: var(--jfi-form-control-padding);\n\n  &:focus {\n    color: var(--jfi-form-control-color-focus);\n    border-color: var(--jfi-form-control-border-color-focus);\n    box-shadow: var(--jfi-form-control-box-shadow-focus);\n  }\n}\n\n*::part(input-invalid) {\n  border-color: var(--jfi-form-control-border-color-error);\n  box-shadow: var(--jfi-form-control-box-shadow-error);\n\n  &:focus {\n    border-color: var(--jfi-form-control-border-color-error);\n    box-shadow: var(--jfi-form-control-box-shadow-error-focus);\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { FormController } from '../../form/form';\n\n@Component({\n  tag: 'justifi-business-representative',\n  styleUrl: 'business-representative.scss',\n  shadow: false,\n})\nexport class BusinessRepresentative {\n  @Prop() formController: FormController\n  @State() errors: any = {};\n  @State() defaultValues: any = {};\n  @State() representative: any = {};\n\n  @Watch('representative')\n  handleRepresentativeChange(newValue: any) {\n    this.formController.setValues({ representative: newValue });\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe((errors) => this.errors = { ...errors.representative });\n    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = { ...defaultValues.representative });\n  }\n\n  inputHandler(name: string, value: string) {\n    this.representative = { ...this.representative, [name]: value };\n  };\n\n  onAddressFormUpdate(values: any): void {\n    this.representative = { ...this.representative, address: values };\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset>\n          <legend>Representative</legend>\n          <div class=\"row gx-2 gy-2\">\n            <div class=\"col-8\">\n              <form-control-text\n                name=\"name\"\n                label=\"Full Name\"\n                defaultValue={this.defaultValues.name}\n                error={this.errors.name}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-select\n                name=\"title\"\n                label=\"Prefix\"\n                defaultValue={this.defaultValues.title}\n                options={[{ label: 'Select Prefix', value: '' }, { label: 'Mrs.', value: 'Mrs.' }]}\n                error={this.errors.title}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"email\"\n                label=\"Email Address\"\n                defaultValue={this.defaultValues.email}\n                error={this.errors.email}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"phone\"\n                label=\"Phone Number\"\n                defaultValue={this.defaultValues.phone}\n                error={this.errors.phone}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <label part=\"label\" class=\"form-label\">Birth Date</label>\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_day\"\n                label=\"Day\"\n                defaultValue={this.defaultValues.dob_day}\n                error={this.errors.dob_day}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_month\"\n                label=\"Month\"\n                defaultValue={this.defaultValues.dob_month}\n                error={this.errors.dob_month}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_year\"\n                label=\"Year\"\n                defaultValue={this.defaultValues.dob_year}\n                error={this.errors.dob_year}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"identification_number\"\n                label=\"EIN/SSN\"\n                defaultValue={this.defaultValues.identification_number}\n                error={this.errors.identification_number}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <justifi-business-address-form\n                errors={this.errors.address}\n                defaultValues={this.defaultValues.address}\n                onFormUpdate={(values) => this.onAddressFormUpdate(values)} />\n            </div>\n          </div>\n        </fieldset>\n      </Host >\n    );\n  }\n\n}\n"],"version":3}
+{"file":"business-representative.js","mappings":"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","names":[],"sources":["src/components/business-form/business-representative/business-representative.scss?tag=justifi-business-representative","src/components/business-form/business-representative/business-representative.tsx"],"sourcesContent":["@import 'reboot';\n@import 'grid';\n@import 'buttons';\n\n:host {\n  @include host-base-styles;\n  display: block;\n}\n\n*::part(label) {\n  color: var(--jfi-form-label-color);\n  font-family: var(--jfi-form-label-font-family);\n  font-weight: var(--jfi-form-label-font-weight);\n  font-size: var(--jfi-form-label-font-size);\n  margin: var(--jfi-form-label-margin);\n}\n\n*::part(input) {\n  font-family: var(--jfi-layout-font-family);\n  background-color: var(--jfi-form-control-background-color);\n  border-color: var(--jfi-form-control-border-color);\n  border-width: var(--jfi-form-control-border-width);\n  border-bottom-width: var(--jfi-form-control-border-bottom-width);\n  border-left-width: var(--jfi-form-control-border-left-width);\n  border-right-width: var(--jfi-form-control-border-right-width);\n  border-top-width: var(--jfi-form-control-border-top-width);\n  border-radius: var(--jfi-form-control-border-radius);\n  border-style: var(--jfi-form-control-border-style);\n  box-shadow: var(--jfi-form-control-box-shadow);\n  color: var(--jfi-form-control-color);\n  font-size: var(--jfi-form-control-font-size);\n  font-weight: var(--jfi-form-control-font-weight);\n  line-height: var(--jfi-form-control-line-height);\n  margin: var(--jfi-form-control-margin);\n  padding: var(--jfi-form-control-padding);\n\n  &:focus {\n    color: var(--jfi-form-control-color-focus);\n    border-color: var(--jfi-form-control-border-color-focus);\n    box-shadow: var(--jfi-form-control-box-shadow-focus);\n  }\n}\n\n*::part(input-invalid) {\n  border-color: var(--jfi-form-control-border-color-error);\n  box-shadow: var(--jfi-form-control-box-shadow-error);\n\n  &:focus {\n    border-color: var(--jfi-form-control-border-color-error);\n    box-shadow: var(--jfi-form-control-box-shadow-error-focus);\n  }\n}\n","import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { FormController } from '../../form/form';\nimport { PHONE_MASKS } from '../../../utils/phone-masks';\n\n@Component({\n  tag: 'justifi-business-representative',\n  styleUrl: 'business-representative.scss',\n})\nexport class BusinessRepresentative {\n  @Prop() formController: FormController;\n  @State() errors: any = {};\n  @State() representative: any = {};\n\n  constructor() {\n    this.inputHandler = this.inputHandler.bind(this);\n    this.onAddressFormUpdate = this.onAddressFormUpdate.bind(this);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(\n      errors => (this.errors = { ...errors.representative }),\n    );\n    this.formController.values.subscribe(\n      values => (this.representative = { ...values.representative }),\n    );\n  }\n\n  inputHandler(name: string, value: string) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      representative: {\n        ...this.formController.values.getValue().representative,\n        [name]: value,\n      },\n    });\n  }\n\n  onAddressFormUpdate(values: any): void {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      representative: {\n        ...this.formController.values.getValue().representative,\n        address: {\n          ...this.formController.values.getValue().representative.address,\n          ...values,\n        },\n      },\n    });\n  }\n\n  render() {\n    const representativeDefaultValue =\n      this.formController.getInitialValues().representative;\n\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset>\n          <legend>Representative</legend>\n          <div class=\"row gy-3\">\n            <div class=\"col-12 col-md-8\">\n              <form-control-text\n                name=\"name\"\n                label=\"Full Name\"\n                defaultValue={representativeDefaultValue?.name}\n                error={this.errors.name}\n                inputHandler={this.inputHandler}\n              />\n            </div>\n\n            <div class=\"col-12 col-md-4\">\n              <form-control-select\n                name=\"title\"\n                label=\"Prefix\"\n                defaultValue={representativeDefaultValue?.title}\n                options={[\n                  { label: 'Select Prefix', value: '' },\n                  { label: 'Mrs.', value: 'Mrs.' },\n                ]}\n                error={this.errors.title}\n                inputHandler={this.inputHandler}\n              />\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <form-control-text\n                name=\"email\"\n                label=\"Email Address\"\n                defaultValue={representativeDefaultValue?.email}\n                error={this.errors.email}\n                inputHandler={this.inputHandler}\n              />\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <form-control-number-masked\n                name=\"phone\"\n                label=\"Phone Number\"\n                defaultValue={representativeDefaultValue?.phone}\n                error={this.errors.phone}\n                inputHandler={this.inputHandler}\n                mask={PHONE_MASKS.US}\n              />\n            </div>\n\n            <div class=\"col-12\">\n              <label part=\"label\" class=\"form-label\">\n                Birth Date\n              </label>\n            </div>\n\n            <div class=\"col-12 col-md-4\">\n              <form-control-datepart\n                name=\"dob_day\"\n                label=\"Day\"\n                defaultValue={representativeDefaultValue?.dob_day}\n                error={this.errors.dob_day}\n                inputHandler={this.inputHandler}\n                type=\"day\"\n              />\n            </div>\n\n            <div class=\"col-12 col-md-4\">\n              <form-control-datepart\n                name=\"dob_month\"\n                label=\"Month\"\n                defaultValue={representativeDefaultValue?.dob_month}\n                error={this.errors.dob_month}\n                inputHandler={this.inputHandler}\n                type=\"month\"\n              />\n            </div>\n\n            <div class=\"col-12 col-md-4\">\n              <form-control-datepart\n                name=\"dob_year\"\n                label=\"Year\"\n                defaultValue={representativeDefaultValue?.dob_year}\n                error={this.errors.dob_year}\n                inputHandler={this.inputHandler}\n                type=\"year\"\n              />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-number\n                name=\"identification_number\"\n                label=\"EIN/SSN\"\n                defaultValue={representativeDefaultValue?.identification_number}\n                error={this.errors.identification_number}\n                inputHandler={this.inputHandler}\n              />\n            </div>\n\n            <div class=\"col-12\">\n              <justifi-business-address-form\n                errors={this.errors.address}\n                defaultValues={representativeDefaultValue?.address}\n                onFormUpdate={values => this.onAddressFormUpdate(values)}\n              />\n            </div>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}