mmhglobal-dynamicform 2.25.0 → 2.27.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -1769,9 +1769,6 @@ class MainService {
                 this.signalrService.joinGroup(firstProjectCode);
             }
         }
-        else {
-            console.warn('signalR not enabled.');
-        }
     }
     handleSignalRModificationAlert(formId) {
         if (this.signalrService.signalREnabled() && this.environment.enableFormPageModificationAlert) {
@@ -4430,7 +4427,7 @@ class ButtonFieldBase extends FieldBase {
         return isVisible;
     }
     getButtonLabel(button) {
-        let labelResult = button.Label || '';
+        let labelResult = button.Label || button.Name || '';
         let labelExpr = labelResult.match(/^{{.*}}$/gi);
         if (labelExpr) {
             labelExpr = labelExpr[0].slice(2, -2);
@@ -8248,7 +8245,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;
@@ -8256,6 +8253,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
@@ -8316,6 +8314,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) {
@@ -8410,18 +8411,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);
+                    }
                 }
             }
         });
@@ -8485,38 +8492,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();
                 }
             });
         }
@@ -8528,29 +8557,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
@@ -8562,13 +8594,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"]
             }] } });
@@ -8799,7 +8838,7 @@ class InputFieldAddOnsComponent extends InputFieldBase {
         if (this.addOn.IconList) {
             this.addOn.IconList = this.addOn.IconList.filter(x => x);
             this.addOn.IconList.forEach((i) => {
-                if (i.ToolTipText == undefined || i.ToolTipText == null) {
+                if (!i.ToolTipText) {
                     i.ToolTipText = "";
                 }
                 else if (i.ToolTipText.indexOf("group.") !== -1) {
@@ -8831,7 +8870,7 @@ class InputFieldAddOnsComponent extends InputFieldBase {
         if (this.addOn.TextList) {
             this.addOn.TextList = this.addOn.TextList.filter(x => x);
             this.addOn.TextList.forEach((i) => {
-                if (i.ToolTipText == undefined || i.ToolTipText == null) {
+                if (!i.ToolTipText) {
                     i.ToolTipText = "";
                 }
                 else if (i.ToolTipText.indexOf("group.") !== -1) {
@@ -10037,9 +10076,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /********** Angular **********/
 class ZmfbComponent extends ButtonFieldBase {
-    constructor(componentService, fieldService, resourceApiService, workflowService) {
+    constructor(componentService, fontAweSomeService, fieldService, resourceApiService, workflowService) {
         super(componentService);
         this.componentService = componentService;
+        this.fontAweSomeService = fontAweSomeService;
         this.fieldService = fieldService;
         this.resourceApiService = resourceApiService;
         this.workflowService = workflowService;
@@ -10233,12 +10273,12 @@ class ZmfbComponent extends ButtonFieldBase {
         }
     }
 }
-ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
+ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n                size=\"2x\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <fa-icon [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\" size=\"1x\"></fa-icon>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }]; } });
+            args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\"\r\n       *ngIf=\"dialOpen\"\r\n       [style]=\"componentProperties.style.style1\">\r\n  </div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\"\r\n                              class=\"e1tag-style2\"\r\n                              dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"align\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\"\r\n                              [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\"\r\n                size=\"2x\"\r\n               class=\"e1tag-style3\"\r\n               [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate\r\n                 let-item\r\n                 let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\"\r\n            [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\"\r\n                    [themeColor]=\"buttonColor\"\r\n                    class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <fa-icon [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\" size=\"1x\"></fa-icon>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }]; } });
 
 /********** Angular **********/
 class ZmodalComponent extends DialogContentBase {
@@ -12301,11 +12341,13 @@ class ZudfComponent extends ContainerFieldBase {
         if (this.data.Value == undefined && this.data.FieldElementCode) {
             const fieldName = ZComponentHelper.getGroupValue(this.data.FieldElementCode, this.group);
             const fieldFormType = ZComponentHelper.getGroupValue(this.data.FieldElementFormType, this.group);
-            if (fieldFormType && fieldFormType == FormType.listField) {
-                obs = this.fieldService.getListFieldByFieldElementName(fieldName);
-            }
-            else {
-                obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
+            if (fieldName) {
+                if (fieldFormType && fieldFormType == FormType.listField) {
+                    obs = this.fieldService.getListFieldByFieldElementName(fieldName);
+                }
+                else {
+                    obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
+                }
             }
         }
         super.initComponent().pipe(switchMap(() => obs), switchMap((field) => {
@@ -14303,6 +14345,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             args: [{ selector: "app-kscrollview", template: "<div class=\"kscrollview-container\" [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n  *ngIf=\"!isLoading\">\r\n  <kendo-scrollview [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1 scrollview\"\r\n    [ngClass]=\"data.Class\" [data]=\"panelItems\" [arrows]=\"options.arrows\" [pageable]=\"options.pageAble\"\r\n    [endless]=\"options.endless\">\r\n    <ng-template let-item=\"item\">\r\n      <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\" (click)=\"onItemClick($event, item)\">\r\n        <div [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3 kscrollview-title\">\r\n          {{item.Label}}\r\n        </div>\r\n        <img [src]='item.SourceUrl' [alt]='item.Label' [style]=\"componentProperties.containerStyle.style4\"\r\n          class=\"e1tag-container-style4\" draggable=\"true\" />\r\n      </div>\r\n    </ng-template>\r\n  </kendo-scrollview>\r\n</div>\r\n", styles: [".k-scrollview-wrap{margin:0 auto}.kscrollview-title{position:absolute;top:0;left:0;right:0;margin:0;padding:8px 8px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.8),rgba(202,202,202,.4705882353));text-align:center;font-size:16px}.scrollview{height:400px}.title-bottom .kscrollview-title{top:unset;bottom:0;background:linear-gradient(rgba(202,202,202,.4705882353),rgba(0,0,0,.8));padding-bottom:15px;padding-top:10px}.show-title-when-hover .kscrollview-title{opacity:0;transition:opacity .5s}.show-title-when-hover:hover .kscrollview-title{opacity:1;transition:opacity .5s}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
+class FiconComponent {
+    constructor(fontAweSomeService) {
+        this.fontAweSomeService = fontAweSomeService;
+        this.size = "large";
+        this.rounded = "medium";
+        this.fillMode = "solid";
+        this.icons = [];
+        this.filteredIcons = [];
+        this.searchTerm = '';
+    }
+    ngOnInit() {
+        this.icons = this.fontAweSomeService.getAllIcons().map(icon => ({
+            ...icon,
+            formattedName: this.toCamelCase(`${icon.name}`)
+            //  formattedName: this.toCamelCase(`${icon.prefix === 'fas' ? 'fa' : icon.prefix}-${icon.name}`)
+        }));
+        this.filteredIcons = [...this.icons];
+        ZComponentHelper.setComponentProperties(this);
+        ZComponentHelper.registerComponent(this);
+    }
+    toCamelCase(str) {
+        return str
+            .split('-')
+            .map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+    }
+    filterIcon(searchTerm) {
+        this.searchTerm = searchTerm;
+        this.filteredIcons = this.icons.filter(icon => icon.name.toLowerCase().includes(searchTerm.toLowerCase()));
+    }
+}
+FiconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FiconComponent, deps: [{ token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+FiconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FiconComponent, selector: "app-ficon", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div>  \r\n  <div class=\"search-box\">\r\n    <kendo-floatinglabel [labelCssClass]=\"'custom-label-class'\"\r\n                         text=\"Search icons\">\r\n      <kendo-textbox [(ngModel)]=\"searchTerm\"\r\n                     (ngModelChange)=\"filterIcon(searchTerm)\"\r\n                     placeholder=\"Search icons\"\r\n                     [clearButton]=\"true\"\r\n                     [rounded]=\"rounded\"\r\n                     [style.width.px]=\"480\">\r\n      </kendo-textbox>\r\n    </kendo-floatinglabel> \r\n  </div>\r\n\r\n  <ul class=\"icons-wrapper\">\r\n    <li *ngFor=\"let icon of filteredIcons\" class=\"icon-item\">\r\n      <fa-icon [icon]=\"icon.definition\" size=\"3x\"></fa-icon>\r\n      <div class=\"icon-name\" style=\"text-align:center\">{{ icon.formattedName }}</div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".icons-wrapper{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:1em;margin:1em}.icon-item{display:flex;flex-direction:column;align-items:center;margin:0 8px 16px 0;width:150px;height:100px;text-align:center;font-size:12px;box-shadow:0 4px 8px #0000001a;border-radius:8px;padding:12px;background-color:#f5f5f5}.icon-item kendo-svgicon{margin-bottom:8px}.icon-name{word-spacing:100px;white-space:initial;max-width:150px;padding-top:1em}.k-icon{display:block;clear:both;margin:0 auto 10px;color:#656565;font-size:32px}.custom-label-class{margin-left:30px}.search-box{display:flex;justify-content:center;margin-top:30px;margin-bottom:20px}\n"], components: [{ type: i15.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FiconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ficon', template: "<div>  \r\n  <div class=\"search-box\">\r\n    <kendo-floatinglabel [labelCssClass]=\"'custom-label-class'\"\r\n                         text=\"Search icons\">\r\n      <kendo-textbox [(ngModel)]=\"searchTerm\"\r\n                     (ngModelChange)=\"filterIcon(searchTerm)\"\r\n                     placeholder=\"Search icons\"\r\n                     [clearButton]=\"true\"\r\n                     [rounded]=\"rounded\"\r\n                     [style.width.px]=\"480\">\r\n      </kendo-textbox>\r\n    </kendo-floatinglabel> \r\n  </div>\r\n\r\n  <ul class=\"icons-wrapper\">\r\n    <li *ngFor=\"let icon of filteredIcons\" class=\"icon-item\">\r\n      <fa-icon [icon]=\"icon.definition\" size=\"3x\"></fa-icon>\r\n      <div class=\"icon-name\" style=\"text-align:center\">{{ icon.formattedName }}</div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".icons-wrapper{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:1em;margin:1em}.icon-item{display:flex;flex-direction:column;align-items:center;margin:0 8px 16px 0;width:150px;height:100px;text-align:center;font-size:12px;box-shadow:0 4px 8px #0000001a;border-radius:8px;padding:12px;background-color:#f5f5f5}.icon-item kendo-svgicon{margin-bottom:8px}.icon-name{word-spacing:100px;white-space:initial;max-width:150px;padding-top:1em}.k-icon{display:block;clear:both;margin:0 auto 10px;color:#656565;font-size:32px}.custom-label-class{margin-left:30px}.search-box{display:flex;justify-content:center;margin-top:30px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.FontAweSomeService }]; }, propDecorators: { data: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
 /********** Angular **********/
 class MmhglobalDynamicformModule {
 }
@@ -14388,7 +14474,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         ZcolorpickerComponent,
         KmenuComponent,
         KScrollViewComponent,
-        ContextMenuComponent], imports: [IonicModule,
+        ContextMenuComponent,
+        FiconComponent], imports: [IonicModule,
         IonicSelectableModule,
         CommonModule,
         RouterModule,
@@ -14515,7 +14602,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         VirtualScrollComponent,
         ZcolorpickerComponent,
         KmenuComponent,
-        KScrollViewComponent] });
+        KScrollViewComponent,
+        FiconComponent] });
 MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MmhglobalDynamicformModule, providers: [
         ModalService
     ], imports: [[
@@ -14654,7 +14742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ZcolorpickerComponent,
                         KmenuComponent,
                         KScrollViewComponent,
-                        ContextMenuComponent
+                        ContextMenuComponent,
+                        FiconComponent
                     ],
                     imports: [
                         IonicModule,
@@ -14788,6 +14877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ZcolorpickerComponent,
                         KmenuComponent,
                         KScrollViewComponent,
+                        FiconComponent
                     ],
                     providers: [
                         ModalService
@@ -14804,5 +14894,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
+export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FiconComponent, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map