@stemy/ngx-dynamic-form 19.1.9 → 19.1.10

package/fesm2022/stemy-ngx-dynamic-form.mjs

@@ -1,8 +1,8 @@
 import * as i1 from '@ng-dynamic-forms/core';
-import { DynamicInputControlModel, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, serializable, DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormGroupModel as DynamicFormGroupModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicCheckboxModel, DynamicDatePickerModel, DynamicInputModel, DynamicTextAreaModel, DynamicFileUploadModel, DynamicFormService as DynamicFormService$1, DynamicRadioGroupModel, DynamicFormValueControlModel, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
+import { DynamicInputControlModel, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, serializable, DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormGroupModel as DynamicFormGroupModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicCheckboxModel, DynamicDatePickerModel, DynamicInputModel, DynamicTextAreaModel, DynamicFileUploadModel, DynamicFormService as DynamicFormService$1, DynamicRadioGroupModel, DynamicFormValueControlModel, isString, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
 export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicDatePickerModel, DynamicFileUploadModel, DynamicFormControlComponent, DynamicFormControlModel, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import * as i2 from '@stemy/ngx-utils';
-import { ObjectUtils, TimerUtils, cachedFactory, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
+import { ObjectUtils, TimerUtils, cachedFactory, StringUtils, OpenApiService, ObservableUtils, TOASTER_SERVICE, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
 import { __decorate } from 'tslib';
 import { BehaviorSubject, isObservable, of, Subject, firstValueFrom, Subscription } from 'rxjs';
 import { map, debounceTime, first, groupBy, mergeMap } from 'rxjs/operators';
@@ -748,38 +748,41 @@ class DynamicFormService extends DynamicFormService$1 {
         this.api.cache = {};
         this.schemas = await this.openApi.getSchemas();
         const fieldSets = [];
-        const options = ObjectUtils.isObject(customizeOrOptions) ? customizeOrOptions : {};
-        const customizeModel = ObjectUtils.isFunction(customizeOrOptions)
-            ? customizeOrOptions : options.customizer;
-        const customizeModels = async (property, schema, modelType, config, path) => {
-            const pathPrefix = !path ? `` : `${path}.`;
-            config.label = !config.label || !options.labelPrefix
-                ? config.label || ""
-                : await this.language.getTranslation(`${options.labelPrefix}.${pathPrefix}${config.label}`);
-            const model = new modelType(config);
-            if (model instanceof DynamicFormValueControlModel) {
-                model.value = (model instanceof DynamicDatePickerModel)
-                    ? this.convertToDate(property.default) : property.default;
-            }
-            const layout = `${pathPrefix}${model.id}`.toLowerCase().replace(/\./g, "-");
-            model.layout = {
-                grid: {
-                    host: `${layout} control-${model.id}`,
-                    container: `${layout}-container`
+        const schemaOptions = ObjectUtils.isObject(customizeOrOptions) ? customizeOrOptions : {};
+        const customizeModel = ObjectUtils.isFunction(customizeOrOptions) ? customizeOrOptions : schemaOptions.customizer;
+        const schema = this.schemas[name];
+        const wrapOptions = {
+            ...schemaOptions,
+            schema,
+            customizer: async (property, options, modelType, config, path) => {
+                const pathPrefix = !path ? `` : `${path}.`;
+                config.label = !config.label || !options.labelPrefix
+                    ? config.label || ""
+                    : await this.language.getTranslation(`${options.labelPrefix}.${pathPrefix}${config.label}`);
+                const model = new modelType(config);
+                if (model instanceof DynamicFormValueControlModel) {
+                    model.value = (model instanceof DynamicDatePickerModel)
+                        ? this.convertToDate(property.default) : property.default;
+                }
+                const layout = `${pathPrefix}${model.id}`.toLowerCase().replace(/\./g, "-");
+                model.layout = {
+                    grid: {
+                        host: `${layout} control-${model.id}`,
+                        container: `${layout}-container`
+                    }
+                };
+                if (!ObjectUtils.isFunction(customizeModel))
+                    return [model];
+                let res = customizeModel(property, schema, model, config, this.injector);
+                if (!res)
+                    return [model];
+                if (res instanceof Promise) {
+                    res = await res;
                 }
-            };
-            if (!ObjectUtils.isFunction(customizeModel))
-                return [model];
-            let res = customizeModel(property, schema, model, config, this.injector);
-            if (!res)
-                return [model];
-            if (res instanceof Promise) {
-                res = await res;
+                return Array.isArray(res) ? res : [res];
             }
-            return Array.isArray(res) ? res : [res];
         };
-        const schema = this.schemas[name];
-        const controls = await this.getFormModelForSchemaDef(schema, fieldSets, customizeModels, "");
+        const controls = await this.getFormModelForSchemaDef(schema, fieldSets, wrapOptions, "");
         const group = [...controls];
         // Add id fields if necessary
         if (controls.length > 0) {
@@ -794,11 +797,11 @@ class DynamicFormService extends DynamicFormService$1 {
             group,
             fieldSets
         };
-        const root = await customizeModels({
+        const root = await wrapOptions.customizer({
             id: "root",
             type: "object",
             properties: schema?.properties || {}
-        }, schema, DynamicFormGroupModel, config, "");
+        }, wrapOptions, DynamicFormGroupModel, config, "");
         // Check if the customized root wrapper returned an array
         controls.length = 0;
         for (const model of root) {
@@ -814,7 +817,7 @@ class DynamicFormService extends DynamicFormService$1 {
             group: controls
         });
     }
-    async getFormModelForSchemaDef(schema, fieldSets, customizeModels, path) {
+    async getFormModelForSchemaDef(schema, fieldSets, options, path) {
         if (!schema)
             return [];
         const keys = Object.keys(schema.properties || {});
@@ -831,7 +834,7 @@ class DynamicFormService extends DynamicFormService$1 {
                     fieldSets.push({ id: fsName, legend: `legend.${fsName}`, fields: [p] });
                 }
             }
-            const models = await this.getFormControlModels(property, schema, customizeModels, path);
+            const models = await this.getFormControlModels(property, options, path);
             controls.push(...models);
         }
         return controls.filter(t => null !== t);
@@ -841,13 +844,13 @@ class DynamicFormService extends DynamicFormService$1 {
             return false;
         return EDITOR_FORMATS.indexOf(property.format) >= 0 || property.format.endsWith("script");
     }
-    async getFormControlModels(property, schema, customizeModels, path) {
+    async getFormControlModels(property, options, path) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum) || isStringWithVal(property.optionsPath) || isStringWithVal(property.endpoint)) {
             if (property.format == "radio") {
-                return customizeModels(property, schema, DynamicRadioGroupModel, this.getFormRadioConfig(property, schema), path);
+                return options.customizer(property, options, DynamicRadioGroupModel, this.getFormRadioConfig(property, options), path);
             }
-            return customizeModels(property, schema, DynamicSelectModel, this.getFormSelectConfig(property, schema), path);
+            return options.customizer(property, options, DynamicSelectModel, this.getFormSelectConfig(property, options), path);
         }
         switch (property.type) {
             case "string":
@@ -855,31 +858,31 @@ class DynamicFormService extends DynamicFormService$1 {
             case "integer":
             case "textarea":
                 if (this.checkIsEditorProperty(property)) {
-                    return customizeModels(property, schema, DynamicEditorModel, this.getFormEditorConfig(property, schema), path);
+                    return options.customizer(property, options, DynamicEditorModel, this.getFormEditorConfig(property, options), path);
                 }
                 if (property.format == "textarea") {
-                    return customizeModels(property, schema, DynamicTextAreaModel, this.getFormTextareaConfig(property, schema), path);
+                    return options.customizer(property, options, DynamicTextAreaModel, this.getFormTextareaConfig(property, options), path);
                 }
                 if (property.format == "date") {
-                    return customizeModels(property, schema, DynamicDatePickerModel, this.getFormDatepickerConfig(property, schema), path);
+                    return options.customizer(property, options, DynamicDatePickerModel, this.getFormDatepickerConfig(property, options), path);
                 }
-                return customizeModels(property, schema, DynamicInputModel, this.getFormInputConfig(property, schema), path);
+                return options.customizer(property, options, DynamicInputModel, this.getFormInputConfig(property, options), path);
             case "object":
-                return customizeModels(property, schema, DynamicEditorModel, this.getFormEditorConfig(property, schema), path);
+                return options.customizer(property, options, DynamicEditorModel, this.getFormEditorConfig(property, options), path);
             case "boolean":
-                return customizeModels(property, schema, DynamicCheckboxModel, this.getFormCheckboxConfig(property, schema), path);
+                return options.customizer(property, options, DynamicCheckboxModel, this.getFormCheckboxConfig(property, options), path);
             case "array":
                 if (findRefs(property).length > 0) {
-                    return customizeModels(property, schema, DynamicFormArrayModel, await this.getFormArrayConfig(property, schema, customizeModels, path), path);
+                    return options.customizer(property, options, DynamicFormArrayModel, await this.getFormArrayConfig(property, options, path), path);
                 }
                 else {
-                    return customizeModels(property, schema, DynamicInputModel, this.getFormInputConfig(property, schema), path);
+                    return options.customizer(property, options, DynamicInputModel, this.getFormInputConfig(property, options), path);
                 }
             case "file":
-                return customizeModels(property, schema, DynamicFileUploadModel, this.getFormUploadConfig(property, schema), path);
+                return options.customizer(property, options, DynamicFileUploadModel, this.getFormUploadConfig(property, options), path);
         }
         if (findRefs(property).length > 0) {
-            return customizeModels(property, schema, DynamicFormGroupModel, await this.getFormGroupConfig(property, schema, customizeModels, !path ? property.id : `${path}.${property.id}`), path);
+            return options.customizer(property, options, DynamicFormGroupModel, await this.getFormGroupConfig(property, options, !path ? property.id : `${path}.${property.id}`), path);
         }
         return [];
     }
@@ -898,10 +901,11 @@ class DynamicFormService extends DynamicFormService$1 {
         }
         return parent;
     }
-    getFormControlConfig(property, schema) {
-        const validators = this.getValidators(property, schema);
+    getFormControlConfig(property, options) {
+        const validators = this.getValidators(property, options);
         const errorMessages = Object.keys(validators).reduce((res, key) => {
-            res[key] = `error.${key}`;
+            res[key] = options.labelPrefix
+                ? this.language.getTranslationSync(`${options.labelPrefix}.error.${key}`) : `error.${key}`;
             return res;
         }, {});
         return {
@@ -917,11 +921,11 @@ class DynamicFormService extends DynamicFormService$1 {
             }, property)
         };
     }
-    async getFormArrayConfig(property, schema, customizeModels, path) {
+    async getFormArrayConfig(property, options, path) {
         const fieldSets = [];
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, customizeModels, path)));
-        return Object.assign(this.getFormControlConfig(property, schema), {
+        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, options, path)));
+        return Object.assign(this.getFormControlConfig(property, options), {
             groupFactory: () => mergeFormModels(ObjectUtils.copy(subModels)),
             initialCount: property.initialCount || 0,
             sortable: property.sortable || false,
@@ -934,16 +938,16 @@ class DynamicFormService extends DynamicFormService$1 {
             clearItems: property.clearItems !== false
         });
     }
-    async getFormGroupConfig(property, schema, customizeModels, path) {
+    async getFormGroupConfig(property, options, path) {
         const fieldSets = [];
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, customizeModels, path)));
-        return Object.assign(this.getFormControlConfig(property, schema), {
+        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, options, path)));
+        return Object.assign(this.getFormControlConfig(property, options), {
             fieldSets,
             group: mergeFormModels(subModels)
         });
     }
-    getFormInputConfig(property, schema) {
+    getFormInputConfig(property, options) {
         let inputType = StringUtils.has(property.id, "password", "Password") ? "password" : (property.format || property.items?.type || property.type);
         switch (inputType) {
             case "string":
@@ -960,7 +964,7 @@ class DynamicFormService extends DynamicFormService$1 {
                 break;
         }
         const sub = property.type == "array" ? property.items || property : property;
-        return Object.assign(this.getFormControlConfig(property, schema), {
+        return Object.assign(this.getFormControlConfig(property, options), {
             inputType,
             autoComplete: property.autoComplete || "off",
             multiple: property.type == "array",
@@ -975,9 +979,9 @@ class DynamicFormService extends DynamicFormService$1 {
             placeholder: property.placeholder || ""
         });
     }
-    getFormEditorConfig(property, schema) {
+    getFormEditorConfig(property, options) {
         const sub = property.type == "array" ? property.items || property : property;
-        return Object.assign(this.getFormControlConfig(property, schema), {
+        return Object.assign(this.getFormControlConfig(property, options), {
             inputType: property.format || "json",
             convertObject: property.type !== "string",
             autoComplete: property.autoComplete || "off",
@@ -991,8 +995,8 @@ class DynamicFormService extends DynamicFormService$1 {
             placeholder: property.placeholder || ""
         });
     }
-    getFormTextareaConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
+    getFormTextareaConfig(property, options) {
+        return Object.assign(this.getFormControlConfig(property, options), {
             cols: property.cols || null,
             rows: property.rows || 10,
             wrap: property.wrap || false,
@@ -1003,22 +1007,24 @@ class DynamicFormService extends DynamicFormService$1 {
             placeholder: property.placeholder || ""
         });
     }
-    getFormDatepickerConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
+    getFormDatepickerConfig(property, options) {
+        return Object.assign(this.getFormControlConfig(property, options), {
             format: property.dateFormat || "dd.MM.yyyy",
             min: this.convertToDate(property.min),
             max: this.convertToDate(property.max),
         });
     }
-    getFormSelectOptions(property, schema) {
+    getFormSelectOptions(property, options) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum)) {
             return new FormSelectSubject((selectModel, formControl) => {
-                const options = $enum.map(value => {
-                    const label = property.translatable ? `${property.id}.${value}` : `${value}`;
+                const selectOptions = $enum.map(value => {
+                    const label = options.labelPrefix
+                        ? this.language.getTranslationSync(`${options.labelPrefix}.${property.id}.${value}`)
+                        : `${property.id}.${value}`;
                     return { value, label };
                 });
-                return this.fixSelectOptions(selectModel, formControl, options);
+                return this.fixSelectOptions(selectModel, formControl, selectOptions);
             });
         }
         if (isStringWithVal(property.optionsPath)) {
@@ -1077,24 +1083,24 @@ class DynamicFormService extends DynamicFormService$1 {
             return this.fixSelectOptions(selectModel, control, options);
         });
     }
-    getFormRadioConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            options: this.getFormSelectOptions(property, schema),
+    getFormRadioConfig(property, options) {
+        return Object.assign(this.getFormControlConfig(property, options), {
+            options: this.getFormSelectOptions(property, options),
         });
     }
-    getFormSelectConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            options: this.getFormSelectOptions(property, schema),
+    getFormSelectConfig(property, options) {
+        return Object.assign(this.getFormControlConfig(property, options), {
+            options: this.getFormSelectOptions(property, options),
             multiple: property.type == "array",
             groupBy: property.groupBy,
             inline: property.inline,
             allowEmpty: property.allowEmpty,
         });
     }
-    getFormUploadConfig(property, schema) {
+    getFormUploadConfig(property, options) {
         const url = this.api.url(property.url || "assets");
         const { accept, autoUpload, maxSize, minSize, removeUrl, showFileList } = property;
-        return Object.assign(this.getFormControlConfig(property, schema), {
+        return Object.assign(this.getFormControlConfig(property, options), {
             url,
             accept,
             autoUpload,
@@ -1104,8 +1110,8 @@ class DynamicFormService extends DynamicFormService$1 {
             showFileList
         });
     }
-    getFormCheckboxConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
+    getFormCheckboxConfig(property, options) {
+        return Object.assign(this.getFormControlConfig(property, options), {
             indeterminate: property.indeterminate || false
         });
     }
@@ -1136,8 +1142,9 @@ class DynamicFormService extends DynamicFormService$1 {
         }
         return options;
     }
-    getValidators(property, schema) {
+    getValidators(property, options) {
         const validators = {};
+        const schema = options.schema;
         if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
             validators.required = null;
         }
@@ -1160,6 +1167,9 @@ class DynamicFormService extends DynamicFormService$1 {
         if (!isNaN(property.maximum)) {
             validators.max = property.maximum;
         }
+        if (isString(property.pattern) && property.pattern.length) {
+            validators.pattern = property.pattern;
+        }
         switch (property.format) {
             case "email":
                 validators.email = null;
@@ -1198,6 +1208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class AsyncSubmitDirective {
     toaster;
     cdr;
+    zone;
     elem;
     renderer;
     method;
@@ -1208,8 +1219,7 @@ class AsyncSubmitDirective {
     loading;
     disabled;
     callback;
-    onStatusChange;
-    onSubmit;
+    subscription;
     get isDisabled() {
         return this.disabled;
     }
@@ -1224,9 +1234,10 @@ class AsyncSubmitDirective {
     get isLoading() {
         return this.loading;
     }
-    constructor(toaster, cdr, elem, renderer) {
+    constructor(toaster, cdr, zone, elem, renderer) {
         this.toaster = toaster;
         this.cdr = cdr;
+        this.zone = zone;
         this.elem = elem;
         this.renderer = renderer;
         this.onSuccess = new EventEmitter();
@@ -1235,12 +1246,29 @@ class AsyncSubmitDirective {
             return;
         renderer.setAttribute(elem.nativeElement, "type", "button");
     }
-    ngOnInit() {
+    ngOnChanges(changes) {
+        // Clear old subscription
+        this.subscription?.unsubscribe();
+        // Check if form changed
+        if (changes.form) {
+            const form = changes.form.currentValue;
+            if (!form)
+                return;
+            // Force form for checking changes after fields get autofilled by the browser
+            // setTimeout(() => {
+            //     console.log(
+            //         this.elem.nativeElement,
+            //         this.elem.nativeElement.focus
+            //     );
+            //     this.elem.nativeElement.focus?.();
+            // }, 1500);
+        }
+        // Handle other things if we have a form instance
         if (!this.form)
             return;
         this.isDisabled = this.form.group?.status !== "VALID";
         this.cdr.detectChanges();
-        this.onStatusChange = this.form.group?.statusChanges.subscribe(() => {
+        this.subscription = ObservableUtils.multiSubscription(this.form.group?.statusChanges.subscribe(() => {
             const status = this.form.group?.status;
             this.isDisabled = status !== "VALID";
             this.cdr.detectChanges();
@@ -1250,14 +1278,10 @@ class AsyncSubmitDirective {
                 this.callback();
             }
             this.callback = null;
-        });
-        this.onSubmit = this.form.onSubmit?.pipe(debounceTime(200)).subscribe(() => this.callMethod());
+        }), this.form.onSubmit?.pipe(debounceTime(200)).subscribe(() => this.callMethod()));
     }
     ngOnDestroy() {
-        if (this.onStatusChange)
-            this.onStatusChange.unsubscribe();
-        if (this.onSubmit)
-            this.onSubmit.unsubscribe();
+        this.subscription?.unsubscribe();
     }
     click() {
         this.callback = () => this.callMethod();
@@ -1285,8 +1309,8 @@ class AsyncSubmitDirective {
             this.toaster.error(reason.message, reason.context);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AsyncSubmitDirective, deps: [{ token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: ["async-submit", "method"], form: "form", context: "context" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AsyncSubmitDirective, deps: [{ token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: ["async-submit", "method"], form: "form", context: "context" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
             type: Directive,
@@ -1298,7 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TOASTER_SERVICE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { method: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { method: [{
                 type: Input,
                 args: ["async-submit"]
             }], form: [{