mmhglobal-dynamicform 2.26.0 → 2.28.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -6,7 +6,7 @@ import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@
 import { BehaviorSubject, forkJoin, of, tap as tap$1, map as map$1, first, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, auditTime } from 'rxjs';
 import { tap, switchMap, map, take, delay, concatMap, ignoreElements } from 'rxjs/operators';
 import * as i2 from 'mmhglobal-zcore';
-import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
+import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, TriggerFromType, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
 import * as i2$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 import * as i3 from 'mmhglobal-zmodal';
@@ -828,8 +828,8 @@ class MainService {
     getResourceServerData() {
         return this.resourceApiService.loadData();
     }
-    getGroupFields(fieldElementName, formType, group, propertyName) {
-        return this.fieldService.getFormFieldCode(fieldElementName, formType, group, propertyName);
+    getGroupFields(fieldElementName, formType, triggerFrom, group, propertyName) {
+        return this.fieldService.getFormFieldCode(fieldElementName, formType, group, propertyName, triggerFrom);
     }
     initializeGroup(group, ctrlName, pageName, me) {
         if (me.subscription) {
@@ -839,7 +839,7 @@ class MainService {
         group.resourceURLName = resourceName;
         Object.assign(group, {
             resourceURL: this.resourceApiService.getURL(resourceName),
-            gridColumnFields: this.fieldService.getFormFieldCode(ctrlName, "FormField", null, null),
+            gridColumnFields: this.fieldService.getFormFieldCode(ctrlName, "FormField"),
             ctrlScope: me,
             pageName,
             ctrlName,
@@ -879,23 +879,12 @@ class MainService {
         me.subscription = group.subject.subscribe((event) => this.subjectEvent(event, group, me));
         return me.subscription;
     }
-    getModel$(group, id) {
+    getModel$(group, id, triggerFrom) {
         const recId = id || group.referenceId;
         return this.webApiService
-            .httpGet$(group.resourceURL + "/" + recId, null)
+            .httpGet$(`${group.resourceURL}/${recId}`, null, { triggerFrom: triggerFrom })
             .pipe(tap((zmodel) => {
             group.zModel = zmodel;
-            //if (
-            //  group.parentReferenceField &&
-            //  Object.keys(zmodel).indexOf(group.parentReferenceField) !== -1 &&
-            //  !group.backNavigationPage.endsWith(".edit")
-            //) {
-            //  group.backNavigationPage =
-            //    group.backNavigationPage +
-            //    "/" +
-            //    zmodel[group.parentReferenceField].toString() +
-            //    "/edit";
-            //}
         }), switchMap(() => {
             if (group.afterGetModelSuccess) {
                 return this.afterGetModelSuccess(group);
@@ -1365,7 +1354,7 @@ class MainService {
         }), switchMap(() => {
             const newModel = Object.assign({}, group.zModel);
             ZComponentHelper.removeNullFields(newModel);
-            return this.webApiService.httpPost$(group.resourceURL, newModel).pipe(tap((resp) => {
+            return this.webApiService.httpPost$(group.resourceURL, newModel, { buttonDetail: event, group: group, triggerFrom: event.triggerFrom }).pipe(tap((resp) => {
                 createModelres = resp;
                 return resp;
             }), tap((res) => {
@@ -1411,7 +1400,7 @@ class MainService {
             }
             return of(false);
         }
-        updateAPIObservable = updateAPIObservable || this.webApiService.httpPut$(`${group.resourceURL}/${group.zModel.Id}`, group.zModel, false).pipe(tap((res) => {
+        updateAPIObservable = updateAPIObservable || this.webApiService.httpPut$(`${group.resourceURL}/${group.zModel.Id}`, group.zModel, { buttonDetail: event, group: group, triggerFrom: event.triggerFrom }).pipe(tap((res) => {
             this.handleSuccess(res, resMessage);
         }
         //this.handleSuccess(res, "Record is updated successfully.")
@@ -1501,7 +1490,7 @@ class MainService {
                 group.zModel.Disabled = true;
                 let tempResponse = {};
                 return this.webApiService
-                    .httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel)
+                    .httpPut$(`${group.resourceURL}/${group.zModel.Id}`, group.zModel, { buttonDetail: event, group: group, triggerFrom: event.triggerFrom })
                     .pipe(tap((res) => {
                     tempResponse = Object.assign({}, res);
                     this.handleSuccess(res, resMessage);
@@ -1795,7 +1784,7 @@ class MainService {
         if (formId === respResult.Id?.toString() && eventName === window.location.href) {
             if (respResult.UserName === this.authService.e1Token.myProfile.UserName) {
                 if (respResult.Action === ActionType.Update) {
-                    this.webApiService.httpGet$(`${this.group.resourceURL}/${formId}`, null).subscribe(resp => {
+                    this.webApiService.httpGet$(`${this.group.resourceURL}/${formId}`, null, { triggerFrom: TriggerFromType.signalRAlert }).subscribe(resp => {
                         this.reloadDataAndWorkflowButton(resp);
                     });
                 }
@@ -4004,7 +3993,7 @@ class UipageComponent {
             const fieldElementName = this.group.fieldName ? this.group.fieldName : ctrlName;
             this.group.fieldName = fieldElementName; // to be decprecated 
             this.group.fieldElementName = fieldElementName;
-            return this.mainService.getGroupFields(fieldElementName, formType, this.group, "fields");
+            return this.mainService.getGroupFields(fieldElementName, formType, TriggerFromType.initialPageLoad, this.group, "fields");
             //let formFieldName = this.group.fieldName ? this.group.fieldName : ctrlName;
             //this.group.fieldName = formFieldName;
             //if(UipageComponent.signalrEventSubscription){
@@ -4049,7 +4038,7 @@ class UipageComponent {
                     return this.group.getModel(this.group, this.group.referenceId);
                 }
                 else {
-                    return this.mainService.getModel$(this.group, this.group.referenceId);
+                    return this.mainService.getModel$(this.group, this.group.referenceId, TriggerFromType.initialPageLoad);
                 }
             }
             else {
@@ -5303,7 +5292,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
         this.componentService.decrementComponentCounterForField(this.data);
     }
     loadButton() {
-        const field$ = this.fieldService.getFormFieldCode(this.data.Value, "FormField", null, null);
+        const field$ = this.fieldService.getFormFieldCode(this.data.Value, "FormField");
         this.group.zButtonsCount++;
         if (this.group.zButtonsCount === 1) {
             this.FirstZbtn = true;
@@ -5354,6 +5343,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
                 SubType: this.data.SubType,
                 Type: button.Type,
                 buttonData: button,
+                eventId: ZComponentHelper.generateTimeStampId()
             };
         }
         if (button['PositionX'] && button['PositionX'] === "right") {
@@ -5378,7 +5368,8 @@ class ZbuttonsComponent extends ButtonFieldBase {
         this.group.subject.next({
             type: "buttonClick",
             target: item.clickEvent,
-            data: item
+            data: item,
+            triggerFrom: TriggerFromType.button
         });
     }
     getButtonDisableTriggerValue(data, button) {
@@ -6852,13 +6843,13 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
             if (this.group.resourceURL) {
                 this.isLocalHostAPI = this.group.resourceURL.toLowerCase().includes("localhost") ? true : false;
             }
-            this.loadButton();
+            this.loadButton(TriggerFromType.initialPageLoad);
         });
     }
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
-    loadButton() {
+    loadButton(triggerFrom) {
         this.leftBtns = [];
         this.rightBtns = [];
         this.items = [];
@@ -6872,7 +6863,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
         try {
             of(true).pipe(concatMap(() => {
                 // retrieve the workflow button
-                return this.workflowService.getWorkflowButtonsField(this.data.WorkflowCode, this.e1wfs_wfcGetWorkflowButtonURL, String(this.isLocalHostAPI));
+                return this.workflowService.getWorkflowButtonsField(this.data.WorkflowCode, this.e1wfs_wfcGetWorkflowButtonURL, String(this.isLocalHostAPI), triggerFrom);
             }), tap(resultData => {
                 if (resultData) {
                     resultData.forEach((button) => {
@@ -6908,7 +6899,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
                     this.items.push(...this.leftBtns, ...this.rightBtns);
                 }
                 else {
-                    console.warn('Unable to get workflow button. Data returned null.');
+                    console.warn(`Unable to get workflow button. Data returned null.`);
                 }
             }), switchMap(() => {
                 return super.translateButtonsLabel(this.items);
@@ -6955,19 +6946,6 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
         const formGroup = this.group.form;
         const attributes = JSON.parse(button.Attributes);
         const buttonTypeCode = button.TypeCode.toUpperCase();
-        //// Skip if the button's click event includes backnavigation
-        //if (buttonTypeCode === 'GOTO') {
-        //  // Check if the form has unsaved changes
-        //  if (!this.data.SkipCheckFormDirty && !formGroup.dirty) {
-        //    console.warn(`Record not saved because the form is not dirty.`);
-        //    return;
-        //  }
-        //  // Check if the form is valid
-        //  if (this.data.UseDefaultValidate && !formGroup.valid) {
-        //    this.componentErrorHandlerService.showFormGroupErrorMessage(this.group, formGroup);
-        //    return;
-        //  }
-        //}
         // Type 1 == functional;
         // Type 2 == GOTO;
         this.group.isTriggered = button.disableTrigger != undefined ? !button.disableTrigger : true;
@@ -6977,11 +6955,10 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
                 if (!this.group.isTriggered) {
                     return;
                 }
-                const group = this.group;
                 // Disable trigger timer
                 if (!attributes['DisableTriggerTimer']) {
                     setTimeout(function () {
-                        group['isTriggered'] = false;
+                        this.group['isTriggered'] = false;
                     }, 500);
                 }
                 console.log("Functional Button: ", button.Name);
@@ -6993,7 +6970,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
                 // Call the workflow service to handle the GOTO button click event
                 this.workflowService.gotoButton_Onclick(button, this.data, attributes, this.group, this.isLocalHostAPI).subscribe(res => {
                     // Reload the button
-                    this.loadButton();
+                    this.loadButton(TriggerFromType.goToButton);
                     // Reset trigger status
                     this.group.isTriggered = false;
                     if (res) {
@@ -7017,6 +6994,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
         };
         const newButton = {
             ...button,
+            eventId: ZComponentHelper.generateTimeStampId(),
             Attributes: JSON.stringify(newAttributes),
             disableTrigger: this.isButtonDisableTrigger(this.data, button),
         };
@@ -7215,6 +7193,7 @@ class ZselectmultipleComponent extends InputFieldBase {
         this.itemDataField = null;
         this.itemTemplate = "{{item[itemTextField]}}";
         this.infiniteScrollPageNo = 0;
+        this.infiniteDataLoaded = false;
         this.isLoading = true;
         this.allowCustomValue = false;
         this.autoClose = true;
@@ -7432,6 +7411,8 @@ class ZselectmultipleComponent extends InputFieldBase {
                 this.infiniteScrollPageNo = 0;
                 this.modelzData = [];
             }
+            this.infiniteDataLoaded = false;
+            ZComponentHelper.cancelGetInfiniteData;
             this.getInfiniteData(event);
         }
         else {
@@ -7529,7 +7510,10 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
     handleOpen(event) {
         if (this.data.HasInfiniteScroll) {
-            this.handleFilter(null);
+            if (!this.infiniteDataLoaded) {
+                this.infiniteDataLoaded = true;
+                this.handleFilter(null);
+            }
         }
         // Ensure multiselect value meets the search length requirement
         if (this.multiselect && this.data.SearchLength && this.multiselect.value.length < this.data.SearchLength) {
@@ -8245,7 +8229,7 @@ class ZuploadComponent extends InputFieldBase {
     //   DivClass: "col-md-12 col-md-6",
     //   Visible: true
     // }];
-    constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService) {
+    constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService, alertService) {
         super(componentService);
         this.componentService = componentService;
         this.authService = authService;
@@ -8253,6 +8237,7 @@ class ZuploadComponent extends InputFieldBase {
         this.zcoreService = zcoreService;
         this.ngZone = ngZone;
         this.sharePointService = sharePointService;
+        this.alertService = alertService;
         this.uploadAttachmentUrl = null;
         this.uploadSaveUrl = "/Attachment/Chunk_Upload_Save"; // should represent an actual API endpoint
         this.uploadRemoveUrl = "/Attachment/Chunk_Upload_Remove"; // should represent an actual API endpoint
@@ -8313,6 +8298,9 @@ class ZuploadComponent extends InputFieldBase {
         if (this.data.Multiple) {
             this.isMultiple = this.data.Multiple;
         }
+        if (this.data.AllowedFileExtension) {
+            this.restrictions.allowedExtensions = this.restrictions.allowedExtensions.concat(this.data.AllowedFileExtension);
+        }
         this.componentProperties.style.style6 = this.componentProperties.style.style6 || "margin: 5px; border: 1px solid gray;";
     }
     onSuccess(e) {
@@ -8407,18 +8395,24 @@ class ZuploadComponent extends InputFieldBase {
         // Image Preview
         const me = this;
         e.files.forEach((file) => {
-            if (file.rawFile && file.rawFile.type.includes("image")) {
-                if (!file.validationErrors) {
-                    const reader = new FileReader();
-                    reader.onload = function (ev) {
-                        if (me.data.EnableImagePreview) {
-                            if (!me.uid.includes(file.uid)) {
-                                me.uid.push(file.uid);
-                                me.imagePreviews.push({ ...file, src: reader.result });
+            if (!me.isValidUploadedFile(me, file)) {
+                e.preventDefault();
+                return;
+            }
+            else {
+                if (file.rawFile && file.rawFile.type.includes("image")) {
+                    if (!file.validationErrors) {
+                        const reader = new FileReader();
+                        reader.onload = function (ev) {
+                            if (me.data.EnableImagePreview) {
+                                if (!me.uid.includes(file.uid)) {
+                                    me.uid.push(file.uid);
+                                    me.imagePreviews.push({ ...file, src: reader.result });
+                                }
                             }
-                        }
-                    };
-                    reader.readAsDataURL(file.rawFile);
+                        };
+                        reader.readAsDataURL(file.rawFile);
+                    }
                 }
             }
         });
@@ -8482,38 +8476,60 @@ class ZuploadComponent extends InputFieldBase {
             });
         }
     }
+    isValidUploadedFile(me, file) {
+        const fileSize = file.rawFile.size;
+        const fileExtension = file.rawFile.name.split('.').pop().toLowerCase();
+        // Check if file size and extension are valid
+        if (fileSize > me.restrictions.maxFileSize || !me.restrictions.allowedExtensions.includes(fileExtension)) {
+            let errorMessage = 'Error: ';
+            if (!me.restrictions.allowedExtensions.includes(fileExtension)) {
+                errorMessage = `Invalid file type. Allowed types are: ${me.restrictions.allowedExtensions.join(', ')}.`;
+            }
+            else if (fileSize > me.restrictions.maxFileSize) {
+                errorMessage = `File size cannot exceeds ${me.formatFileSize(me.restrictions.maxFileSize)}.`;
+            }
+            me.alertService.showOkay('Failed to upload', errorMessage, ['col-4']);
+            return false;
+        }
+        return true;
+    }
     selectEventHandler(e) {
         const me = this;
-        /****** sharepoint ******/
+        //#region sharepoint
         const attachmentInfo = this.sharePointService.getAttachmentInfo(this.data["DownloadFileConfig"]);
-        //change uploadSaveUrl
+        // Change uploadSaveUrl if saving to SharePoint
         if (attachmentInfo && attachmentInfo.isSaveToSharePoint && attachmentInfo.siteName) {
             const attachmentSourceUrl = this.zcoreService.getEnvironment().attachmentSourceUrl;
             this.uploadSaveUrl = attachmentSourceUrl + '/Chunk_Upload_Save';
         }
-        /****** sharepoint ******/
+        //#endregion
         if (this.data['SelectFileOnly']) {
-            // append all file to component memory
+            // Append all files to component memory
             e.files.forEach(async (file) => {
-                if (file.rawFile) {
-                    const reader = new FileReader();
-                    reader.onload = function (ev) {
-                        // clone the data and also add the readed file to the object
-                        const fileData = Object.assign({}, file);
-                        fileData['file'] = ev.target["result"];
-                        // push to component fileList
-                        me.fileList.push(fileData);
-                        me.group['zupload_' + me.data.Value] = me.fileList;
-                        if (me.data['FileSelectedEvent']) {
-                            // call the project event
-                            me.group.subject.next({
-                                type: "zupload-fileSelectedEvent",
-                                target: me.data['FileSelectedEvent'],
-                                data: me.fileList
-                            });
-                        }
-                    };
-                    await reader.readAsDataURL(file.rawFile);
+                if (me.isValidUploadedFile(me, file)) {
+                    if (file.rawFile) {
+                        const reader = new FileReader();
+                        reader.onload = function (ev) {
+                            // Clone the data and also add the read file to the object
+                            const fileData = Object.assign({}, file);
+                            fileData['file'] = ev.target["result"];
+                            // Push to component fileList
+                            me.fileList.push(fileData);
+                            me.group['zupload_' + me.data.Value] = me.fileList;
+                            if (me.data['FileSelectedEvent']) {
+                                // Call the project event
+                                me.group.subject.next({
+                                    type: "zupload-fileSelectedEvent",
+                                    target: me.data['FileSelectedEvent'],
+                                    data: me.fileList
+                                });
+                            }
+                        };
+                        await reader.readAsDataURL(file.rawFile);
+                    }
+                }
+                else {
+                    e.preventDefault();
                 }
             });
         }
@@ -8525,29 +8541,32 @@ class ZuploadComponent extends InputFieldBase {
                 //Check if Image Compression is enabled.
                 if (imageCompressionEnabled === true) {
                     e.files.forEach((file) => {
-                        // Compress only if it is an image file
-                        if (file.rawFile && file.rawFile.type.includes("image")) {
-                            if (!file.validationErrors) {
-                                const imgConfig = this.compressionConfigHandler(this.data.Compression);
-                                if (file.size > imgConfig.FileSizeMinSizeByte) {
-                                    me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
-                                        .pipe(take(1))
-                                        .subscribe(compressFile => {
-                                        this.ngZone.run(() => {
-                                            file.rawFile = compressFile;
-                                            file.size = compressFile.size;
-                                            // clone the data and also add the readed file to the object
-                                            const fileData = Object.assign({}, file);
-                                            // push to component fileList
-                                            me.fileList.push(fileData);
-                                            const reader = new FileReader();
-                                            reader.readAsDataURL(file.rawFile);
+                        if (me.isValidUploadedFile(me, file)) {
+                            // Compress only if it is an image file
+                            if (file.rawFile && file.rawFile.type.includes("image")) {
+                                if (!file.validationErrors) {
+                                    const imgConfig = this.compressionConfigHandler(this.data.Compression);
+                                    if (file.size > imgConfig.FileSizeMinSizeByte) {
+                                        me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
+                                            .pipe(take(1))
+                                            .subscribe(compressFile => {
+                                            this.ngZone.run(() => {
+                                                file.rawFile = compressFile;
+                                                file.size = compressFile.size;
+                                                // Push to component fileList
+                                                me.fileList.push(Object.assign({}, file));
+                                                const reader = new FileReader();
+                                                reader.readAsDataURL(file.rawFile);
+                                            });
+                                            console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
                                         });
-                                        console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
-                                    });
-                                } // file size check
-                            } // validationErrors check
-                        } // file type check
+                                    } // file size check
+                                } // validationErrors check
+                            } // file type check
+                        }
+                        else {
+                            e.preventDefault();
+                        }
                     }); // loop each file
                 } // imagecompression check
                 // add to group scope
@@ -8559,13 +8578,20 @@ class ZuploadComponent extends InputFieldBase {
         this.uploadComponent.clearFiles();
         this.group['zupload_' + this.data.Value] = this.fileList;
     }
+    formatFileSize(bytes) {
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes === 0)
+            return '0 Byte';
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
+    }
 }
-ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }], target: i0.ɵɵFactoryTarget.Component });
-ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ 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"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload\r\n    *ngIf=\"!data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\"\r\n    [removeUrl]=\"uploadRemoveUrl\"\r\n    [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\"\r\n    [chunkable]=\"chunkSettings\"\r\n    [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect\r\n    *ngIf=\"data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    [formControlName]=\"data.Value\"\r\n    (valueChange)=\"onChange($event)\" \r\n    [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-fileselect>\r\n\r\n  <div\r\n    *ngIf=\"imagePreviews.length\"\r\n    class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div\r\n      class=\"label-container e1tag-style3\"\r\n      [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div\r\n      class=\"image-container e1tag-style4\"\r\n      [style]=\"componentProperties.style.style4\">\r\n      <img\r\n        *ngFor=\"let image of imagePreviews\"\r\n        [src]=\"image.src\"\r\n        alt=\"image preview\"\r\n        height=\"100\"\r\n        class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ 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"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }]; }, propDecorators: { uploadComponent: [{
+            args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload\r\n    *ngIf=\"!data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\"\r\n    [removeUrl]=\"uploadRemoveUrl\"\r\n    [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\"\r\n    [chunkable]=\"chunkSettings\"\r\n    [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect\r\n    *ngIf=\"data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    [formControlName]=\"data.Value\"\r\n    (valueChange)=\"onChange($event)\" \r\n    [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-fileselect>\r\n\r\n  <div\r\n    *ngIf=\"imagePreviews.length\"\r\n    class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div\r\n      class=\"label-container e1tag-style3\"\r\n      [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div\r\n      class=\"image-container e1tag-style4\"\r\n      [style]=\"componentProperties.style.style4\">\r\n      <img\r\n        *ngFor=\"let image of imagePreviews\"\r\n        [src]=\"image.src\"\r\n        alt=\"image preview\"\r\n        height=\"100\"\r\n        class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }, { type: i2.AlertService }]; }, propDecorators: { uploadComponent: [{
                 type: ViewChild,
                 args: ["uploadComponent"]
             }] } });