mmhglobal-dynamicform 2.1.1 → 2.2.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Input, Directive, ViewChild, Inject, HostListener, Pipe, ViewContainerRef, TemplateRef, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
-import { of, switchMap, forkJoin, tap, BehaviorSubject, Subject, map as map$1, isObservable, interval, takeWhile, from, delay as delay$1, filter as filter$1, first } from 'rxjs';
+import { of, switchMap, forkJoin, tap, Subject, BehaviorSubject, map as map$1, isObservable, interval, takeWhile, from, delay as delay$1, filter as filter$1, first } from 'rxjs';
 import { map, tap as tap$1, switchMap as switchMap$1, delay, take, filter, concatMap } from 'rxjs/operators';
 import * as i2 from 'mmhglobal-zcore';
 import { ZComponentHelper, ZComponentProperties, ZGroup, MESSAGETYPE, ZSelectPostApiParams, UploadMetaData, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
@@ -204,6 +204,8 @@ class ZComponentService {
         this.componentObjectService = componentObjectService;
         this.translateService = translateService;
         this.zcoreService = zcoreService;
+        this.componentCounter = 0;
+        this.componentLoadSubject = new Subject();
         this.DEFAULT_ISEDIT = true;
         //#region DateTime Conversion
         this.timePickerDateType = ['zuidatetime', 'ztime', 'zuitime'];
@@ -440,6 +442,21 @@ class ZComponentService {
         const result = `${(Math.abs(num) / 60).toString().padStart(2, '0')}:00`;
         return `${prefix}${result}`;
     }
+    //#endregion
+    //#region track component loaded
+    get componentLoaded$() {
+        return this.componentLoadSubject.asObservable();
+    }
+    incrementComponentCounter() {
+        this.componentCounter++;
+    }
+    decrementComponentCounter() {
+        this.componentCounter--;
+        if (this.componentCounter === 0) {
+            this.componentLoadSubject.next();
+            this.componentLoadSubject.complete();
+        }
+    }
 }
 ZComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ZComponentService, deps: [{ token: i1.ComponentObjectService }, { token: i2.TranslationService }, { token: i2.ZCoreService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ZComponentService, providedIn: 'root' });
@@ -6545,11 +6562,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /********** Angular **********/
 class ZselectmultipleComponent extends InputFieldBase {
-    constructor(resourceApiService, webApiService, cacheService, compService) {
-        super(compService);
+    constructor(resourceApiService, webApiService, cacheService, componentService) {
+        super(componentService);
         this.resourceApiService = resourceApiService;
         this.webApiService = webApiService;
         this.cacheService = cacheService;
+        this.componentService = componentService;
         this.items = [];
         this.infinitezData = [];
         this.infiniteSearchText = null;
@@ -6690,6 +6708,11 @@ class ZselectmultipleComponent extends InputFieldBase {
         }
         super.focusOnDefault(this.focus.bind(this));
     }
+    ngAfterViewInit() {
+        if (this.data.SubType === 'zudf') {
+            this.componentService.decrementComponentCounter();
+        }
+    }
     // Auto select first option (if required & only 1 option)
     autoSelectFirstOption(required, data, zModelPropertyName, id) {
         if (ZComponentHelper.isNullUndefinedEmpty(id) && required) {
@@ -11491,13 +11514,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /********** Angular **********/
 class ZudfComponent extends ContainerFieldBase {
-    constructor(compService, alertService, authService, fieldService, toastService, componentErrorHandlerService, cdr) {
-        super(compService);
+    constructor(alertService, authService, fieldService, toastService, componentErrorHandlerService, componentService, cdr) {
+        super(componentService);
         this.alertService = alertService;
         this.authService = authService;
         this.fieldService = fieldService;
         this.toastService = toastService;
         this.componentErrorHandlerService = componentErrorHandlerService;
+        this.componentService = componentService;
         this.cdr = cdr;
         // formFields: any[]; // populate using field element. 
         this.componentProperties = new ZComponentProperties();
@@ -11532,8 +11556,14 @@ class ZudfComponent extends ContainerFieldBase {
             obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
         }
         super.initComponent().pipe(switchMap$1(() => obs), switchMap$1((field) => {
+            if (this.data.FieldElementCode) {
+                // use obs value only if FieldElementCode is set. if nto default as null.
+                this.data.Value = field;
+            }
+            else {
+                this.data.Value = null;
+            }
             // Store initial data value and set component scope and prefix
-            this.data.Value = field;
             this.initialDataValue = this.data.Value;
             this.componentScopeName = 'zudf_' + this.data.Name;
             this.componentPrefix = 'zudf_' + this.data.Name;
@@ -11706,6 +11736,26 @@ class ZudfComponent extends ContainerFieldBase {
             this.data.Value = fieldElements;
             this.group[this.componentScopeName].form = this.form;
             this.group[this.componentScopeName]['loadedFieldsSequence'] = this.loadedFieldsSequence;
+            this.componentService.componentLoaded$.subscribe(() => {
+                // All components have finished loading
+                const zudfGroup = this.group[this.componentScopeName];
+                zudfGroup['linkedComponent'].forEach(item => {
+                    const linkedComponentSegments = item.value.split('_');
+                    const parentComponentName = linkedComponentSegments.slice(0, -1).join('_') + '_' + item.linkedComponent;
+                    const parentComponent = ZComponentHelper.getComponentByValue(this.group, parentComponentName);
+                    const childComponent = ZComponentHelper.getComponentByValue(this.group, item.value);
+                    if (parentComponent && childComponent) {
+                        const originalSelectOptions = childComponent.data['originalSelectOptions'] ?? Object.assign([], childComponent.data.SelectOptions);
+                        const filteredSelectionOptions = originalSelectOptions.filter(option => option.parentExpression == zudfGroup.zModel[parentComponentName]);
+                        // manually patch the component formcontrol value
+                        const zudfForm = zudfGroup.form;
+                        const componentFormControl = zudfForm.controls[item.value];
+                        childComponent.setSelectOption(filteredSelectionOptions);
+                        componentFormControl.patchValue(zudfGroup.zModel[item.value]);
+                    }
+                });
+                // To consider: Trigger the "onchange" event or perform any other necessary actions here
+            });
         }
     }
     generateFormControls(fieldArray, formControls, containerName, isMultiValueGroup = false, fieldValueGrouped = false, index = '') {
@@ -11742,7 +11792,6 @@ class ZudfComponent extends ContainerFieldBase {
                     // this for later on, we can easily know this field belong to which zudf and under which container.
                     if (containerName) {
                         field['containerName'] = containerName;
-                        ;
                         if (!zudfGroup[containerName]) {
                             zudfGroup[containerName] = [];
                         }
@@ -11754,6 +11803,9 @@ class ZudfComponent extends ContainerFieldBase {
                         if (!this.loadedFieldsSequence) {
                             this.loadedFieldsSequence = {};
                         }
+                        if (field.Type === 'zuiselectmultiple') {
+                            this.componentService.incrementComponentCounter();
+                        }
                         field.Name = this.generateFormControlName(field.Name, containerName);
                         field.Value = this.generateFormControlName(field.Value, containerName);
                         this.loadedFieldsSequence[fieldIndex] = {
@@ -12338,12 +12390,12 @@ class ZudfComponent extends ContainerFieldBase {
         }
     }
 }
-ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ZudfComponent, deps: [{ token: ZComponentService }, { token: i2.AlertService }, { token: i2.AuthService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: ComponentErrorHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ZudfComponent, deps: [{ token: i2.AlertService }, { token: i2.AuthService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: ComponentErrorHandlerService }, { token: ZComponentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ZudfComponent, selector: "app-zudf", usesInheritance: true, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"], components: [{ type: i3$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$3.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ZudfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zudf', template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AlertService }, { type: i2.AuthService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: ComponentErrorHandlerService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i2.AlertService }, { type: i2.AuthService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: ComponentErrorHandlerService }, { type: ZComponentService }, { type: i0.ChangeDetectorRef }]; } });
 var ComponentType;
 (function (ComponentType) {
     ComponentType["text"] = "text";