@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

package/dist/collection/components/business-forms/{business-form-stepped/business-form-stepped.js → payment-provisioning/payment-provisioning.js}

@@ -6,15 +6,21 @@ import { BusinessFormClickActions } from "../utils/business-form-types";
  * @exportedPart input: The input fields
  * @exportedPart input-invalid: Invalid state for inputfs
  */
-export class BusinessFormStepped {
+export class PaymentProvisioning {
     constructor() {
         this.refs = [];
         this.componentStepMapping = {
-            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
+            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+        };
+        this.handleFormLoading = (e) => {
+            this.formLoading = e.detail;
+        };
+        this.handleServerErrors = (e) => {
+            this.errorMessage = e.detail.message;
         };
         this.incrementSteps = () => {
             if (this.currentStep < this.totalSteps) {
@@ -26,6 +32,7 @@ export class BusinessFormStepped {
         this.businessId = undefined;
         this.testMode = false;
         this.hideErrors = false;
+        this.allowOptionalFields = false;
         this.formLoading = false;
         this.errorMessage = '';
         this.currentStep = 0;
@@ -47,12 +54,6 @@ export class BusinessFormStepped {
         this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef];
         this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
     }
-    handleFormLoading(e) {
-        this.formLoading = e.detail;
-    }
-    handleServerErrors(e) {
-        this.errorMessage = e.detail.message;
-    }
     showPreviousStepButton() {
         return this.currentStep > 0;
     }
@@ -61,8 +62,7 @@ export class BusinessFormStepped {
     }
     previousStepButtonOnClick() {
         this.clickEvent.emit({ name: BusinessFormClickActions.previousStep });
-        const currentStep = this.refs[this.currentStep];
-        currentStep.validateAndSubmit({ onSuccess: this.decrementSteps });
+        this.decrementSteps();
     }
     nextStepButtonOnClick(e, clickEventName) {
         e.preventDefault();
@@ -79,15 +79,15 @@ export class BusinessFormStepped {
     render() {
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.formLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Next')), this.showSubmitButton() && (h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Submit'))))));
     }
-    static get is() { return "justifi-business-form-stepped"; }
+    static get is() { return "justifi-payment-provisioning"; }
     static get originalStyleUrls() {
         return {
-            "$": ["business-form-stepped.scss"]
+            "$": ["payment-provisioning.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["business-form-stepped.css"]
+            "$": ["payment-provisioning.css"]
         };
     }
     static get properties() {
@@ -161,6 +161,24 @@ export class BusinessFormStepped {
                 "attribute": "hide-errors",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -175,7 +193,7 @@ export class BusinessFormStepped {
     static get events() {
         return [{
                 "method": "clickEvent",
-                "name": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/business-forms/payment-provisioning/test/payment-provisioning.spec.js

@@ -0,0 +1,61 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentProvisioning } from "../payment-provisioning";
+describe.skip('justifi-payment-provisioning', () => {
+    let consoleSpy;
+    // Initialize the spy in the beforeEach
+    beforeEach(() => {
+        consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    });
+    // Restore the original function in the afterEach
+    afterEach(() => {
+        consoleSpy.mockRestore();
+    });
+    it('should log a warning if no authToken is provided', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning></justifi-payment-provisioning>`,
+        });
+    });
+    it('should log a warning if no businessId is provided', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit server error event if server error when fetching data', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit server error event if server error when patching data', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should render', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should call onSuccess when a step is successfully completed', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit clickEvent when a button is clicked', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit submitted event when a step is completed', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+});

package/dist/collection/components/business-forms/schemas/business-additional-questions-schema.js

@@ -1,7 +1,16 @@
 import { object, string } from "yup";
-export const additionQuestionsSchema = object({
-    business_revenue: string().required('Enter business revenue'),
-    business_payment_volume: string().required('Enter business payment volume'),
-    business_dispute_volume: string().required('Enter business dispute volume'),
-    business_receivable_volume: string().required('Enter business receivable volume'),
-});
+export const additionalQuestionsSchema = (allowOptionalFields) => {
+    const schema = object({
+        business_revenue: string().required('Enter business revenue'),
+        business_payment_volume: string().required('Enter business payment volume'),
+        business_dispute_volume: string().required('Enter business dispute volume'),
+        business_receivable_volume: string().required('Enter business receivable volume'),
+    });
+    const easySchema = object({
+        business_revenue: string().nullable(),
+        business_payment_volume: string().nullable(),
+        business_dispute_volume: string().nullable(),
+        business_receivable_volume: string().nullable()
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-address-schema.js

@@ -1,15 +1,51 @@
 import { object, string } from "yup";
-export const legalAddressSchema = object({
-    line1: string().required('Enter street address'),
-    line2: string().nullable(),
-    city: string().required('Enter city'),
-    state: string().required('Select state'),
-    postal_code: string().required('Enter postal code'),
-    country: string().required('Select country'),
-});
-export const identityAddressSchema = object({
-    line1: string().required('Enter street address'),
-    city: string().required('Enter city'),
-    state: string().required('Select state'),
-    postal_code: string().required('Enter postal code'),
+import StateOptions from "../../../utils/state-options";
+const lineOneValidation = string()
+    .min(5, 'Address must be at least 5 characters')
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Invalid characters in address')
+    .transform((value) => {
+    return value === '' ? null : value;
 });
+const lineTwoValidation = string()
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Invalid characters in address')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+const cityValidation = string()
+    .min(2, 'City must be at least 2 characters')
+    .max(50, 'City must be less than 50 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z\s]*$/, 'Invalid characters in city')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+const stateValidation = string()
+    .oneOf(StateOptions.map((option) => option.value), 'Select state')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+const postalValidation = string()
+    .matches(/^[0-9]{5}$/, 'Enter valid postal code')
+    .transform((value) => {
+    return value === '' ? null : value;
+});
+export const addressSchema = (allowOptionalFields) => {
+    const schema = object({
+        line1: lineOneValidation.required('Enter street address'),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.required('Enter city'),
+        state: stateValidation.required('Select state'),
+        postal_code: postalValidation.required('Enter postal code'),
+        country: string().required('Select country')
+    });
+    const easySchema = object({
+        line1: lineOneValidation.nullable(),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.nullable(),
+        state: stateValidation.nullable(),
+        postal_code: postalValidation.nullable(),
+        country: string().required('Select country')
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-core-info-schema.js

@@ -1,13 +1,25 @@
 import { object, string } from "yup";
-export const businessCoreInfoSchema = object({
-    legal_name: string().required('Enter legal name'),
-    website_url: string()
-        .url('Enter valid website url')
-        .required('Enter website url'),
-    email: string().email('Enter valid email').required('Enter email'),
-    phone: string().required('Enter phone number'),
-    doing_business_as: string().required('Enter doing business as'),
-    business_type: string().required('Select business type'),
-    business_structure: string().required('Select business structure'),
-    industry: string().required('Enter a business industry'),
-});
+import { phoneRegex, urlRegex } from "../utils/helpers";
+export const businessCoreInfoSchema = (allowOptionalFields) => {
+    const schema = object({
+        legal_name: string().required('Enter legal name'),
+        website_url: string().matches(urlRegex, 'Enter valid website url').required('Enter website url'),
+        email: string().email('Enter valid email').required('Enter email'),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
+        doing_business_as: string().required('Enter doing business as'),
+        business_type: string().required('Select business type'),
+        business_structure: string().required('Select business structure'),
+        industry: string().required('Enter a business industry'),
+    });
+    const easySchema = object({
+        legal_name: string().required('Enter legal name'),
+        website_url: string().matches(urlRegex, 'Enter valid website url').nullable(),
+        email: string().email('Enter valid email').nullable(),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').nullable(),
+        doing_business_as: string().nullable(),
+        business_type: string().nullable(),
+        business_structure: string().nullable(),
+        industry: string().nullable(),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

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

@@ -1,6 +1,6 @@
 import { object } from "yup";
 import { businessCoreInfoSchema } from "./business-core-info-schema";
-import { additionQuestionsSchema } from "./business-additional-questions-schema";
-import { representativeSchema } from "./business-identity-schema";
-import { legalAddressSchema } from "./business-address-schema";
-export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));
+import { additionalQuestionsSchema } from "./business-additional-questions-schema";
+import { identitySchema } from "./business-identity-schema";
+import { addressSchema } from "./business-address-schema";
+export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('Representative') }));

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -1,35 +1,30 @@
 import { object, string } from "yup";
-import { identityAddressSchema } from "./business-address-schema";
-export const phoneRegex = /^[0-9]+$/;
-export const representativeSchema = object({
-    name: string().required('Enter representative name'),
-    email: string()
-        .email('Enter valid representative email')
-        .required('Enter representative email'),
-    phone: string()
-        .required('Enter representative phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter representative birth day'),
-    dob_month: string().required('Enter representative birth month'),
-    dob_year: string().required('Enter representative birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
-export const ownerSchema = object({
-    name: string().required('Enter owner name'),
-    email: string()
-        .email('Enter valid owner email')
-        .required('Enter owner email'),
-    phone: string()
-        .required('Enter owner phone number')
-        .matches(phoneRegex, 'Phone number must contain only numbers')
-        .min(10, 'Phone number must contain 10 digits')
-        .max(10, 'Phone number must contain 10 digits'),
-    dob_day: string().required('Enter owner birth day'),
-    dob_month: string().required('Enter owner birth month'),
-    dob_year: string().required('Enter owner birth year'),
-    identification_number: string(),
-    address: identityAddressSchema,
-});
+import { addressSchema } from "./business-address-schema";
+import { phoneRegex } from "../utils/helpers";
+export const identitySchema = (title, allowOptionalFields) => {
+    const schema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .required(`Enter ${title} email`),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
+        dob_day: string().required(`Enter ${title} birth day`),
+        dob_month: string().required(`Enter ${title} birth month`),
+        dob_year: string().required(`Enter ${title} birth year`),
+        identification_number: string(),
+        address: addressSchema(allowOptionalFields),
+    });
+    const easySchema = object({
+        name: string().required(`Enter ${title} name`),
+        email: string()
+            .email(`Enter valid ${title} email`)
+            .nullable(),
+        phone: string().matches(phoneRegex, 'Enter valid phone number').nullable(),
+        dob_day: string().nullable(),
+        dob_month: string().nullable(),
+        dob_year: string().nullable(),
+        identification_number: string().nullable(),
+        address: addressSchema(allowOptionalFields),
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

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

@@ -15,3 +15,10 @@ export var OwnerFormServerErrors;
     OwnerFormServerErrors["patchData"] = "Error updating owner data";
     OwnerFormServerErrors["postData"] = "Error adding owner data";
 })(OwnerFormServerErrors || (OwnerFormServerErrors = {}));
+export var OwnerFormClickActions;
+(function (OwnerFormClickActions) {
+    OwnerFormClickActions["removeOwner"] = "removeOwner";
+    OwnerFormClickActions["addOwner"] = "addOwner";
+    OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
+    OwnerFormClickActions["updateOwner"] = "updateOwner";
+})(OwnerFormClickActions || (OwnerFormClickActions = {}));

package/dist/collection/components/business-forms/utils/helpers.js

@@ -0,0 +1,2 @@
+export const phoneRegex = /^\d{10}$/;
+export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;

package/dist/collection/components/checkout/checkout-core.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { extractComputedFontsToLoad } from "../../utils/utils";
+import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 export class CheckoutCore {
     constructor() {
@@ -11,7 +11,7 @@ export class CheckoutCore {
         this.checkoutId = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
-        this.checkout = {};
+        this.checkout = undefined;
         this.serverError = false;
         this.errorMessage = '';
         this.creatingNewPaymentMethod = false;
@@ -78,8 +78,8 @@ export class CheckoutCore {
         });
     }
     render() {
-        var _a, _b;
-        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), h("div", null, "Product desctiption"), h("div", null, "Total $100.00")), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_a = this.checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.credit_card_payments) || true, "show-ach": ((_b = this.checkout.payment_settings) === null || _b === void 0 ? void 0 : _b.ach_payments) || true, "client-id": this.checkout.payment_client_id, "account-id": this.checkout.account_id, savedPaymentMethods: this.checkout.payment_methods }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), this.checkout && (h("div", null, h("div", null, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, "Total ", formatCurrency(+this.checkout.payment_amount))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, "client-id": (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_client_id, "account-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.account_id, savedPaymentMethods: (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.payment_methods }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class DatePartInput {
         this.name = undefined;
         this.error = undefined;
         this.defaultValue = undefined;
-        this.type = undefined;
+        this.type = 'day';
         this.inputHandler = undefined;
         this.disabled = undefined;
     }
@@ -15,45 +15,49 @@ export class DatePartInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            let maskOptions;
-            switch (this.type) {
-                case 'day':
-                    maskOptions = { mask: Number, min: 1, max: 31 };
-                    break;
-                case 'month':
-                    maskOptions = { mask: Number, min: 1, max: 12 };
-                    break;
-                case 'year':
-                    maskOptions = {
-                        mask: Number,
-                        min: 1900,
-                        max: new Date().getFullYear(),
-                    };
-                    break;
-                default:
-                    throw new Error('Invalid type prop');
-            }
-            this.imask = IMask(this.textInput, maskOptions);
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-            this.updateInput(this.defaultValue);
+        this.initializeMask();
+        this.updateInput(this.defaultValue);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    initializeMask() {
+        if (!this.textInput) {
+            return;
         }
+        let maskOptions;
+        switch (this.type) {
+            default:
+            case 'day':
+                maskOptions = { mask: Number, min: 1, max: 31 };
+                break;
+            case 'month':
+                maskOptions = { mask: Number, min: 1, max: 12 };
+                break;
+            case 'year':
+                maskOptions = {
+                    mask: Number,
+                    min: 1900,
+                    max: new Date().getFullYear(),
+                };
+                break;
+        }
+        this.imask = IMask(this.textInput, maskOptions);
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => {
+            this.formControlBlur.emit();
+        });
     }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
         }
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
     render() {
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
@@ -154,7 +158,8 @@ export class DatePartInput {
                     "text": ""
                 },
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'day'"
             },
             "inputHandler": {
                 "type": "unknown",

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

@@ -13,29 +13,31 @@ export class MonetaryInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            this.imask = IMask(this.textInput, {
-                mask: Number,
-                scale: 2,
-                thousandsSeparator: ',',
-                padFractionalZeros: true,
-                normalizeZeros: true,
-                radix: '.',
-            });
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-        }
+        this.initializeIMask();
         this.updateInput(this.defaultValue);
     }
     disconnectedCallback() {
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    initializeIMask() {
+        if (!this.textInput)
+            return;
+        this.imask = IMask(this.textInput, {
+            mask: Number,
+            scale: 2,
+            thousandsSeparator: ',',
+            padFractionalZeros: true,
+            normalizeZeros: true,
+            radix: '.',
+        });
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
+    }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
@@ -76,11 +78,11 @@ export class MonetaryInput {
                 "reflect": false
             },
             "name": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

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

@@ -22,6 +22,7 @@ export class NumberInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit({ name, value: target.value });
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);

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

@@ -19,12 +19,14 @@ export class SelectInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        var _a;
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-select"; }
     static get encapsulation() { return "shadow"; }