@justifi/webcomponents 4.17.0 → 4.19.0

package/dist/collection/components/business-forms/business-form/business-form.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { FormController } from "../../form/form";
 import { businessFormSchema } from "../schemas/business-form-schema";
 import { Api } from "../../../api";
@@ -7,6 +7,7 @@ import { config } from "../../../../config";
 import { BusinessFormClickActions, BusinessFormServerErrors } from "../utils/business-form-types";
 import { Business } from "../../../api/Business";
 import JustifiAnalytics from "../../../api/Analytics";
+import { StyledHost } from "../../../ui-components";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -96,13 +97,13 @@ export class BusinessForm {
         this.instantiateBusiness(response.data);
     }
     render() {
-        return (h(Host, { key: '45680caa8914ba51c85f605684fac0430b6ffcc9', exportparts: "label,input,input-invalid" }, h("form", { key: 'f5b210518f3616a6d266b5de54e676477bd5a5ed', onSubmit: this.validateAndSubmit }, h("div", { key: '76565b0c32821cf9cc8a9d3bc4898fcc384ca88f', class: "row gap-3" }, h("h1", { key: '7740dc649b465ff6582695acaac0b7dc7ef9c552' }, this.title), h("form-alert", { key: '2e14533a0910ba29cd2f4fc87d93757d32b3f86d', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'cb8dbe6002b1fc620b8c2a89aa3f688d9cfe5751', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'af26c67fc3be48b4e4784e8f2cd69cfee58dddb9', formController: this.formController })), h("div", { key: '893e89039a22489e11b46f3c4aef57dd666a960a', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: 'adff3c3490af6cba6b5d97ccd38c923745483c41', formController: this.formController })), h("div", { key: '68cd2396c0be8ad943541cfbb2380ce71b55957c', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: '773260dcff883db1e4569519e50b1cbe02fa3a92', formController: this.formController })), h("div", { key: '31a70331b2c5fb65bc67bdd35745a66627df5834', class: "col-12 mb-4" }, h("justifi-business-representative", { key: 'f0ed38705dc8ecaa03576c36df4d62094d1ea76b', formController: this.formController })), h("div", { key: 'ec6295f344dbca620929848a3b062558081eca08', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: '6c1678dba66a17417667e6303af76b7fe94dbf37', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(StyledHost, { key: '60989d23631d6a02e9a25313dd7297a61063a09c', exportparts: "label,input,input-invalid" }, h("form", { key: 'd961174a3e93ed505012919a0e7e036bd61a4902', onSubmit: this.validateAndSubmit }, h("div", { key: '2be81a7f0e3b568266ee66127f2b537d57c36762', class: "row gap-3" }, h("h1", { key: 'eefc257f687ff24cebf13155a571398e3ddbcabd' }, this.title), h("form-alert", { key: '173d3ee84f5a952a51884ab5f3818c768fcc9b08', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'bfd7fd73aca630fcf56f468d912759d5a96de172', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'dc15f46a28301c03ccd884ff09740e87d67b2e5a', formController: this.formController })), h("div", { key: 'b4cd6ba605ea28a7692cc561951bb69ad93bb8f5', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: '670f320ff6d1ba86a34f5b42dd97a5d38e96c209', formController: this.formController })), h("div", { key: '0afb9d18e6ecb951cefda4df5dd133d31359cecc', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: '6953718bea9525126db35adc44a9c8754234816a', formController: this.formController })), h("div", { key: 'f88b576b9159cd43f17d5a63c26acc4b53dfa9a0', class: "col-12 mb-4" }, h("justifi-business-representative", { key: '4353116715c7f7b906c3c0eae322df04703fd8e5', formController: this.formController })), h("div", { key: 'd626b0738ce71f7529fa270d7a2c479f517e48a2', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: '9469e132726c9bd02b8a1f4c4ca1a4c2a9000c1b', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get is() { return "justifi-business-form"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["business-form.scss"]
+            "$": ["business-form.css"]
         };
     }
     static get styleUrls() {

package/dist/collection/components/business-forms/business-form/business-representative/business-representative.js

@@ -26,7 +26,7 @@ export class BusinessRepresentative {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: '21aef5028007bfac782975b84f6a8e634e2f9d40', exportparts: "label,input,input-invalid" }, h("fieldset", { key: 'e2d1e4fba7e20b5ed3d72b9a0c39d3f157ffa767' }, h("legend", { key: 'd67f71ddcfc7a0a5877b020218c26e11c0971052' }, "Representative"), h("hr", { key: '4e638af72e155b7761a774ef3c8557f1baa4f0ec' }), h("div", { key: '4f0187d3f85ac985b55409adce4657ac4bfc1ad8', class: "row gy-3" }, h("div", { key: '126ab48d1457e0995c0e50d47a2fb0326b1e22a6', class: "col-12 col-md-8" }, h("form-control-text", { key: '47424dc1a820457a39feb52c9c3eac3096dadd84', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '61806cf6e9b957594e7553c48bbcc486aafe33ea', class: "col-12 col-md-4" }, h("form-control-text", { key: '68171b9d5abdcf2aab91a202c284d3e56bd5d0f2', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'bc68fe6035685fab636ab67da574a08d312ab5c9', class: "col-12 col-md-6" }, h("form-control-text", { key: '4b04b0afe8dfa9fa9ab60e37b50bae6e49d36eac', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'e5c2d68541587709ae067989a7f1e7f3ffaf1b5e', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '47bef60ff18ac186727c7e331b8d4e6c9a8031bf', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'b8b06d9e33530be2d5166b658ddfd6f59f38e621', class: "col-12 col-md-4" }, h("form-control-date", { key: '61dee02ca9c35b307a48c873e357686d76598d20', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: 'a2e7a921789726641aca8eabf68ff3099cd9e18b', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '28248a2447c934cc1d534ebc666f2e9fd61e681e', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '23650027826bee18f2b12562280fd30d7515e6b8', class: "col-12" }, h("justifi-identity-address-form", { key: '1f2a2d5e7bc58fbc3467cd94ded09804bd132d0f', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { key: '857634ffd34ea218dce687fb0eaa95830a58bfb1', exportparts: "label,input,input-invalid" }, h("fieldset", { key: 'b3b073dc456e58c4fa67182ea3518581038419e3' }, h("legend", { key: '3c1997f718c340b5dd32e4cdbe9400d64eecf577' }, "Representative"), h("hr", { key: 'd51e5d797106af2050b884fc09802c497a180e1d' }), h("div", { key: '7e5631f8eb5c28f0a5c4193ece3039a3adc35d0a', class: "row gy-3" }, h("div", { key: '399a1f505781ed0b82fa85366ca66580e977f3e5', class: "col-12 col-md-8" }, h("form-control-text", { key: '0820b8e0b6178b997ba1938efc045ad334f061d3', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '2bb15a86304ce8755e1183835c0ed7c310a0e8b2', class: "col-12 col-md-4" }, h("form-control-text", { key: '2cc405cea169ec1bd5d72b110ce403101d029fff', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'd2927f863bd374c38b8028a148568068144294d7', class: "col-12 col-md-6" }, h("form-control-text", { key: '0fa24fa492e060978facf23aac2b151595bb129c', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '8c9f75ebc3c5d87fafaff48e489ad5dc091fbca4', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'f060196556cd11d9f68dab3aa7e87cba24e38afe', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '19f7bcd2a18ef1f8c937a90602bdd9f0ac8f91e5', class: "col-12 col-md-4" }, h("form-control-date", { key: '5392a1ce2cbb43a88c2d90981b56ef55ba4fdb31', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '36203f898451d610b34afabc4bac9e20f01e53f7', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '4d4b9e4dcc0f5829068d4916d7373f6506ee9e74', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '560e1dabe186e54a201ad02fb9054505ab5bb84c', class: "col-12" }, h("justifi-identity-address-form", { key: 'b47b48c19ca88248a9609c0e1858ba649f44c2da', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get is() { return "justifi-business-representative"; }
     static get properties() {

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

@@ -23,7 +23,7 @@ export class LegalAddressForm {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { key: '3ac0b2a1486562bae6bb23ca84f52e8e839da19d', exportparts: "label,input,input-invalid" }, h("fieldset", { key: '0e967630ba6b9999ec4b18fedd983ca44d3ad2d7' }, h("legend", { key: '0419d670b40357246f5ac6567e0f1e150a37ee1e' }, "Business Legal Address"), h("hr", { key: 'acd06b0d3012eee2f46069a3c0e19d2ccc1fc61e' }), h("div", { key: '48679acfd5ca3501913f816e0aaa7371e2c17ad8', class: "row gy-3" }, h("div", { key: '0ceaf8cda2272bc1e8ff1d3882cca323710ae4dd', class: "col-12" }, h("form-control-text", { key: 'b61dc1e5ddf14e3bf7ed9b47f6933ab20980ee43', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: 'e49bb7dff45664f94c7cae0367595effe8513f29', class: "col-12" }, h("form-control-text", { key: '8984be074fb88a357333f16413cefbd3468ea5e6', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: 'bd75dd38711cbca74e694d71b0ef117e7ca5a08a', class: "col-12" }, h("form-control-text", { key: '2ea3f9d74180f9a63d46eb32432ab0cd79719de0', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '2c1486eb00e5d3a3c9183f4d37638c9bae46b4a7', class: "col-12" }, h("form-control-select", { key: '24f0f2c7ab4a56ea7ee396df5dab7fe2dde1c457', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '6ca320c24bec1d82df08b4dabc87322084e2ce2a', class: "col-12" }, h("form-control-text", { key: '05f573f81feef8166ea6e8198cb570f5c7ec4db9', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: '752249ceb0a283619742dbf847162541f0679bcd', class: "col-12" }, h("form-control-select", { key: 'bdc98fcf213072820120bf2224694c87d86da1f0', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: '794669fd0c563f54abde94146df007b114c30465', exportparts: "label,input,input-invalid" }, h("fieldset", { key: '34cf40bcf68c4b0af97363700ede8d5ef778c38c' }, h("legend", { key: 'deb0acfa3da0128a9337ddddd76592d7569685c6' }, "Business Legal Address"), h("hr", { key: '1d01aa0b9577c47c24af4e85728828d41164c5ee' }), h("div", { key: '2199ba800c530bb9a5704431103660a39bdf70fb', class: "row gy-3" }, h("div", { key: '811fa71f919e62d6ecf44fd97e5940473bdb2a51', class: "col-12" }, h("form-control-text", { key: '06305b11aecb6b49bc8d3c0b39b8652f3968083e', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: 'c1a2aad7893ac8f5aed57e662ce0704a4e0ed2fa', class: "col-12" }, h("form-control-text", { key: '858e3e7be65828a89b07f954e82033c76f4ab350', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '641805ddb44395c77020e708b60ff2a09ffc5d5b', class: "col-12" }, h("form-control-text", { key: '6d881c0aacf9a689305a15f353d376917a6e8aff', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '6bab46c2823b9da84ac66496b80a4f98d237ccfe', class: "col-12" }, h("form-control-select", { key: '0cc60022e6862884df786ea7414cf4cae4c45728', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: 'ff349be7524f3b3fc7a3adee03259f7b8bf10390', class: "col-12" }, h("form-control-text", { key: '015277e0bde6a15077744f9d09bc016a0db4b465', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'd6097ef782c0d47a2d93c4624635e7f820dac95d', class: "col-12" }, h("form-control-select", { key: '396a8c6bc10f288bde9289b7177c161e42f60b7e', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }

package/dist/collection/components/business-forms/owner-form/identity-address/identity-address-form.js

@@ -17,7 +17,7 @@ export class IdentityAddressForm {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '83dd1e3c2e9d5e1d9da9d64143045530ea3c49e6', exportparts: "label,input,input-invalid" }, h("div", { key: 'd2ccac17954bea719da0dba261359547b4873f25', class: "row gy-3" }, h("div", { key: 'ae78ba39a640f5798a90665eb2500195ce429215', class: "col-12 col-md-8" }, h("form-control-text", { key: '0c11aa4ac520f2d37fd6f079e67898fb50089d40', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler })), h("div", { key: '9130d253adc984b15540c779fcd348b43a47a92d', class: "col-12 col-md-4" }, h("form-control-text", { key: '1eb5d471e0d77d0055aa26cc9e75ab84aee87772', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '64b045b949e95e98db793495ddb53191b93db5eb', class: "col-12" }, h("form-control-text", { key: '98a05e17ebe3a676510614a218a8545af8c72c86', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: '27995692a60f0c5663bad8c588ed8757d8a19e88', class: "col-12 col-md-6" }, h("form-control-select", { key: 'e83aae9954a38e03af941ae270b10d170be3c85a', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '8111c0cda61ebdf3df4464f32ebae2171c44dc74', class: "col-12 col-md-6" }, h("form-control-text", { key: 'b1b591ec7b419574d8245d710212809d153cd2d9', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '5420333a8133ee51f4c2d8100a0c0d59dae5e383', class: "col-12" }, h("form-control-select", { key: 'e0b19506594ad3051c5a1211421729d24352f572', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: 'd090676d3bb1d9de9ae947ff25d94b5985ace914', exportparts: "label,input,input-invalid" }, h("div", { key: '64ddec6db508d27b709ad551f60fe58494631fe3', class: "row gy-3" }, h("div", { key: '7e0f89b7b8d5a466b89efad75498c5d1f2cac8ea', class: "col-12 col-md-8" }, h("form-control-text", { key: 'ea6055fb3457e28666b11b72173ad70b83a87659', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler })), h("div", { key: '5f6f456c573fb9318e58976decb67274b209fa23', class: "col-12 col-md-4" }, h("form-control-text", { key: '86fffd4641953d0445a7c24d332cda513121b65e', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: 'e06339cefebe37ae0629631fbc5101c9dbc040a6', class: "col-12" }, h("form-control-text", { key: 'd2af696b33092247b6741c8034aaf12ab51aa878', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'b655a66fb68f059fa91ae5f9f60fdebe0ae04fad', class: "col-12 col-md-6" }, h("form-control-select", { key: '50a65861a5a39daac199571c5a0273340556e476', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '30255517e0fa1ede35d7b2525625ebc389c44525', class: "col-12 col-md-6" }, h("form-control-text", { key: 'b7b0a773c7b2dbe05c4bf8e9fc7235a01bf36832', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '804e9aa1ca7b4ae167ae64969107ad6352559ed7', class: "col-12" }, h("form-control-select", { key: '1aa3734e10502bc8f1732f386b60135b8a7d94a6', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true })))));
     }

package/dist/collection/components/business-forms/owner-form/owner-form-core.js

@@ -0,0 +1,520 @@
+import { h } from "@stencil/core";
+import { FormController } from "../../form/form";
+import { Owner } from "../../../api/Identity";
+import { BusinessFormClickActions } from "../utils/business-form-types";
+import { identitySchema } from "../schemas/business-identity-schema";
+import { parseIdentityInfo } from "../utils/payload-parsers";
+import { Button } from "../../../ui-components";
+export class BusinessOwnerFormCore {
+    loadingWatcher() {
+        this.formLoading.emit(this.isLoading);
+    }
+    constructor() {
+        this.getData = () => {
+            this.isLoading = true;
+            this.getOwner({
+                onSuccess: (response) => {
+                    this.instantiateOwner(response.data);
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => this.isLoading = false
+            });
+        };
+        this.sendData = () => {
+            this.isLoading = true;
+            return new Promise((resolve) => {
+                if (this.ownerId) {
+                    this.patchOwner({
+                        payload: this.payload,
+                        onSuccess: (response) => {
+                            this.submitted.emit({
+                                data: response,
+                                metadata: { ownerID: response.data.id }
+                            });
+                            this.ownerSubmitted.emit({ id: response.data.id });
+                            this.instantiateOwner(response.data);
+                            resolve(true);
+                        },
+                        onError: ({ error, code, severity }) => {
+                            this.submitted.emit({ data: { error } });
+                            this.errorEvent.emit({
+                                message: error,
+                                errorCode: code,
+                                severity: severity
+                            });
+                            resolve(false);
+                        },
+                        final: () => this.isLoading = false
+                    });
+                }
+                else {
+                    this.postOwner({
+                        payload: this.payload,
+                        onSuccess: (response) => {
+                            this.submitted.emit({
+                                data: response,
+                                metadata: { ownerID: response.data.id }
+                            });
+                            this.ownerSubmitted.emit({ id: response.data.id });
+                            this.instantiateOwner(response.data);
+                            resolve(true);
+                        },
+                        onError: ({ error, code, severity }) => {
+                            this.submitted.emit({ data: { error } });
+                            this.errorEvent.emit({
+                                message: error,
+                                errorCode: code,
+                                severity: severity
+                            });
+                            resolve(false);
+                        },
+                        final: () => this.isLoading = false
+                    });
+                }
+            });
+        };
+        this.instantiateOwner = async (data) => {
+            this.owner = Object.assign({}, new Owner(data));
+            await this.formController.setInitialValues(this.owner);
+        };
+        this.handleAddOwner = () => {
+            const eventName = this.ownerId ? BusinessFormClickActions.updateOwner : BusinessFormClickActions.addOwner;
+            this.clickEvent.emit({ name: eventName });
+        };
+        this.handleRemoveOwner = () => {
+            this.removeOwner(this.ownerId);
+            this.clickEvent.emit({ name: BusinessFormClickActions.removeOwner });
+        };
+        this.isLoading = false;
+        this.formController = undefined;
+        this.errors = {};
+        this.owner = {};
+        this.ownerId = undefined;
+        this.businessId = undefined;
+        this.getOwner = undefined;
+        this.patchOwner = undefined;
+        this.postOwner = undefined;
+        this.allowOptionalFields = undefined;
+        this.removeOwner = undefined;
+        this.newFormOpen = undefined;
+        this.ownersLength = undefined;
+        this.validate = this.validate.bind(this);
+        this.submit = this.submit.bind(this);
+        this.validateAndSubmit = this.validateAndSubmit.bind(this);
+    }
+    async returnOwnerData() {
+        return this.ownerId;
+    }
+    async validate() {
+        return this.formController.validate();
+    }
+    async submit() {
+        const isValid = await this.validate();
+        if (isValid) {
+            return this.sendData();
+        }
+    }
+    async validateAndSubmit(event) {
+        event.preventDefault();
+        const isValid = await this.validate();
+        if (isValid) {
+            this.submit();
+        }
+    }
+    get payload() {
+        let formValues = parseIdentityInfo(this.formController.values.getValue());
+        if (this.ownerId) {
+            return JSON.stringify(formValues);
+        }
+        else {
+            return JSON.stringify(Object.assign(Object.assign({}, formValues), { business_id: this.businessId }));
+        }
+    }
+    get formTitle() {
+        return this.ownerId ? 'Edit Business Owner' : 'Add Business Owner';
+    }
+    get submitButtonText() {
+        return this.ownerId ? 'Update' : 'Add';
+    }
+    get showRemoveButton() {
+        const blankForm = !this.ownerId && this.newFormOpen;
+        if (this.ownersLength <= 1) {
+            return false;
+        }
+        else {
+            if (blankForm) {
+                return true;
+            }
+            else if (this.ownerId && !this.newFormOpen) {
+                return true;
+            }
+        }
+    }
+    componentWillLoad() {
+        this.formController = new FormController(identitySchema('owner', this.allowOptionalFields));
+        this.ownerId ? this.getData() : this.instantiateOwner({});
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
+    }
+    render() {
+        return (h("form", { key: 'b2e2aaced859260e9d2ef59bc3f8a0763d05872c', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '2a93ddb4c945be0ec081ce31d6d9eff4b302d622' }, h("legend", { key: 'ea9859e55099e3f8263024d884edfb48b3666eaa', class: "fw-semibold fs-5" }, this.formTitle), h("br", { key: 'f646c1ecc544c358d87e701aba8e151fcb96c54e' }), h("div", { key: '874bf4ebd7cef0afbdee96fa4d5679b6d683b0f0', class: "row gy-3" }, h("owner-form-inputs", { key: '866dbf0002ec1ac70d7942c6011c67f8cd144960', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '15d907270ecf3d16769cedea39ba279d7ffb0748', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '84c09ef594e7fa387e64a09014de81ed713cc765', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: '1dafd97aa7b84644c9d011224a152ad7f99ce620', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'f1f31da4d147afcd01ef96acd01d63ee9497dd6b' }))));
+    }
+    static get is() { return "owner-form-core"; }
+    static get properties() {
+        return {
+            "ownerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "owner-id",
+                "reflect": false
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            },
+            "getOwner": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "patchOwner": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "postOwner": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
+            },
+            "removeOwner": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(id: string) => void",
+                    "resolved": "(id: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "newFormOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "new-form-open",
+                "reflect": false
+            },
+            "ownersLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "owners-length",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "formController": {},
+            "errors": {},
+            "owner": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormSubmitEvent",
+                    "resolved": "BusinessFormSubmitEvent",
+                    "references": {
+                        "BusinessFormSubmitEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "ownerSubmitted",
+                "name": "ownerSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormClickEvent",
+                    "resolved": "BusinessFormClickEvent",
+                    "references": {
+                        "BusinessFormClickEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "formLoading",
+                "name": "formLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "returnOwnerData": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "submit": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validateAndSubmit": {
+                "complexType": {
+                    "signature": "(event: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isLoading",
+                "methodName": "loadingWatcher"
+            }];
+    }
+}