@wavemaker/app-ng-runtime 12.0.0-next.45191 → 12.0.0-next.45196

app-ng-runtime/components/input/file-upload/bundles/index.umd.js

@@ -50,7 +50,8 @@
             ['filelistheight', i3.PROP_NUMBER],
             ['width', { value: 'auto', ...i3.PROP_STRING }],
             ['showprogressbar', i3.PROP_BOOLEAN],
-            ['showprogressbarpercentage', i3.PROP_BOOLEAN]
+            ['showprogressbarpercentage', i3.PROP_BOOLEAN],
+            ['deleteiconhint', { value: 'Delete', ...i3.PROP_STRING }]
         ]));
         i3.registerFormWidget(i1.FormWidgetType.UPLOAD, new Map([
             ['disabled', i3.PROP_BOOLEAN],
@@ -185,14 +186,14 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("innerHTML", ctx_r1.caption, i0__namespace.ɵɵsanitizeHtml);
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_span_8_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_span_8_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span");
         i0__namespace.ɵɵpipe(1, "stateClass");
     } if (rf & 2) {
         const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit;
         i0__namespace.ɵɵclassMapInterpolate1("status-icon ", i0__namespace.ɵɵpipeBind1(1, 3, ft_r7.status), "");
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_span_10_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_span_10_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "span", 47);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵpipe(2, "filesize");
@@ -202,7 +203,7 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵtextInterpolate(i0__namespace.ɵɵpipeBind2(2, 1, ft_r7.size, 0));
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_span_11_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_span_11_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 34);
         i0__namespace.ɵɵpipe(1, "stateClass");
     } if (rf & 2) {
@@ -211,12 +212,12 @@
         i0__namespace.ɵɵclassMapInterpolate1("status-icon ", i0__namespace.ɵɵpipeBind1(1, 4, ft_r7.status), "");
         i0__namespace.ɵɵpropertyInterpolate("title", ft_r7.errMsg || ctx_r1.appLocale.MESSAGE_FILE_UPLOAD_FAILED);
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_span_12_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_span_12_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "span", 48);
         i0__namespace.ɵɵtext(1, "Upload Failed");
         i0__namespace.ɵɵelementEnd();
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 49);
         i0__namespace.ɵɵelement(1, "div", 50);
         i0__namespace.ɵɵelementEnd();
@@ -225,7 +226,7 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("ngClass", ft_r7.status === "error" ? "progress-bar-danger" : "progress-bar-info")("ngStyle", i0__namespace.ɵɵpureFunction1(2, _c3, ft_r7.progress + "%"));
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 51);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
@@ -234,17 +235,17 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵtextInterpolate1("", ft_r7.progress + "%", " ");
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_div_15_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template(rf, ctx) { if (rf & 1) {
         const _r8 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 45)(1, "a", 52);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_15_Template_a_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
+        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template_a_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
         i0__namespace.ɵɵelement(2, "i", 53);
         i0__namespace.ɵɵelementEnd()();
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_a_17_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template(rf, ctx) { if (rf & 1) {
         const _r9 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "a", 54);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_a_17_Template_a_click_0_listener() { i0__namespace.ɵɵrestoreView(_r9); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.clear(ft_r7)); });
+        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template_a_click_0_listener() { i0__namespace.ɵɵrestoreView(_r9); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.clear(ft_r7)); });
         i0__namespace.ɵɵelement(1, "i");
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
@@ -253,31 +254,35 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵclassMap(ctx_r1.cleariconclass);
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_div_18_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template(rf, ctx) { if (rf & 1) {
         const _r10 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 45)(1, "a", 55);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_18_Template_a_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r10); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileDelete($event, ft_r7)); });
-        i0__namespace.ɵɵelement(2, "i", 56);
+        i0__namespace.ɵɵelementStart(0, "div", 45)(1, "a", 54);
+        i0__namespace.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template_a_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r10); const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileDelete($event, ft_r7)); });
+        i0__namespace.ɵɵelement(2, "i", 55);
         i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext(4);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.deleteiconhint);
     } }
-    function FileUploadComponent_ul_4_div_1_li_1_Template(rf, ctx) { if (rf & 1) {
+    function FileUploadComponent_ul_4_ng_container_1_li_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "li", 32)(1, "div", 33);
         i0__namespace.ɵɵelement(2, "div", 34);
         i0__namespace.ɵɵpipe(3, "fileIconClass");
         i0__namespace.ɵɵelementStart(4, "div", 35)(5, "p", 36)(6, "span", 37);
         i0__namespace.ɵɵtext(7);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(8, FileUploadComponent_ul_4_div_1_li_1_span_8_Template, 2, 5, "span", 38);
+        i0__namespace.ɵɵtemplate(8, FileUploadComponent_ul_4_ng_container_1_li_1_span_8_Template, 2, 5, "span", 38);
         i0__namespace.ɵɵelement(9, "br");
-        i0__namespace.ɵɵtemplate(10, FileUploadComponent_ul_4_div_1_li_1_span_10_Template, 3, 4, "span", 39)(11, FileUploadComponent_ul_4_div_1_li_1_span_11_Template, 2, 6, "span", 40)(12, FileUploadComponent_ul_4_div_1_li_1_span_12_Template, 2, 0, "span", 41);
+        i0__namespace.ɵɵtemplate(10, FileUploadComponent_ul_4_ng_container_1_li_1_span_10_Template, 3, 4, "span", 39)(11, FileUploadComponent_ul_4_ng_container_1_li_1_span_11_Template, 2, 6, "span", 40)(12, FileUploadComponent_ul_4_ng_container_1_li_1_span_12_Template, 2, 0, "span", 41);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(13, FileUploadComponent_ul_4_div_1_li_1_div_13_Template, 2, 4, "div", 42)(14, FileUploadComponent_ul_4_div_1_li_1_div_14_Template, 2, 1, "div", 43);
+        i0__namespace.ɵɵtemplate(13, FileUploadComponent_ul_4_ng_container_1_li_1_div_13_Template, 2, 4, "div", 42)(14, FileUploadComponent_ul_4_ng_container_1_li_1_div_14_Template, 2, 1, "div", 43);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(15, FileUploadComponent_ul_4_div_1_li_1_div_15_Template, 3, 0, "div", 44);
+        i0__namespace.ɵɵtemplate(15, FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template, 3, 0, "div", 44);
         i0__namespace.ɵɵelementStart(16, "div", 45);
-        i0__namespace.ɵɵtemplate(17, FileUploadComponent_ul_4_div_1_li_1_a_17_Template, 2, 4, "a", 46);
+        i0__namespace.ɵɵtemplate(17, FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template, 2, 4, "a", 46);
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(18, FileUploadComponent_ul_4_div_1_li_1_div_18_Template, 3, 0, "div", 44);
+        i0__namespace.ɵɵtemplate(18, FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template, 3, 1, "div", 44);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
         const ft_r7 = i0__namespace.ɵɵnextContext().$implicit;
@@ -288,7 +293,7 @@
         i0__namespace.ɵɵadvance(5);
         i0__namespace.ɵɵtextInterpolate(ft_r7.storageName || ft_r7.name);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success");
+        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("ngIf", ft_r7.fileLength !== 0);
         i0__namespace.ɵɵadvance();
@@ -304,12 +309,12 @@
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵproperty("ngIf", ctx_r1.cleariconclass !== "" && ft_r7.status !== "onProgress");
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success");
+        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
     } }
-    function FileUploadComponent_ul_4_div_1_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div");
-        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_li_1_Template, 19, 16, "li", 31);
-        i0__namespace.ɵɵelementEnd();
+    function FileUploadComponent_ul_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementContainerStart(0);
+        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_4_ng_container_1_li_1_Template, 19, 16, "li", 31);
+        i0__namespace.ɵɵelementContainerEnd();
     } if (rf & 2) {
         const ft_r7 = ctx.$implicit;
         i0__namespace.ɵɵadvance();
@@ -317,7 +322,7 @@
     } }
     function FileUploadComponent_ul_4_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "ul", 29);
-        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_Template, 2, 1, "div", 30);
+        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_4_ng_container_1_Template, 2, 1, "ng-container", 30);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
@@ -326,7 +331,7 @@
         i0__namespace.ɵɵproperty("ngForOf", ctx_r1.uploadedFiles);
     } }
     function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 32)(1, "div", 33);
+        i0__namespace.ɵɵelementStart(0, "li", 58)(1, "div", 33);
         i0__namespace.ɵɵelement(2, "div", 59);
         i0__namespace.ɵɵelementStart(3, "div", 35)(4, "p", 60)(5, "label", 37);
         i0__namespace.ɵɵtext(6);
@@ -342,8 +347,8 @@
         i0__namespace.ɵɵtextInterpolate(ft_r11.name);
     } }
     function FileUploadComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "ul", 57);
-        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 58);
+        i0__namespace.ɵɵelementStart(0, "ul", 56);
+        i0__namespace.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 57);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
@@ -460,6 +465,9 @@
          * @param $files
          */
         onSelectEventCall($event, $files) {
+            $files.forEach(file => {
+                file.uniqueId = this.idGenerator.nextUid();
+            });
             this.selectedFiles = $files;
             this.uploadedFiles = this.multiple ? [...this.uploadedFiles, ...$files] : $files;
             setTimeout(() => {
@@ -515,34 +523,36 @@
             }
             // Make call if there are valid files else no call is made
             if ($files.length) {
-                this.progressObservable = new rxjs.Subject();
                 // EVENT: ON_BEFORE_SELECT
                 beforeSelectVal = this.invokeEventCallback('beforeselect', {
                     $event: $.extend($event.$files || {}, $files),
                     files: $files
                 });
                 if (this.datasource) {
-                    this.datasource._progressObservable = this.progressObservable;
-                    this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
-                        lodashEs.forEach(this.selectedFiles, (file) => {
-                            if (file.name === progressObj.fileName) {
-                                file.progress = progressObj.progress;
-                                if (file.progress === 100) {
-                                    file.status = 'success';
-                                }
-                                else {
-                                    file.status = progressObj.status;
-                                    if (progressObj.errMsg) {
-                                        file.errMsg = progressObj.errMsg;
-                                        this.invokeEventCallback('error', {
-                                            $event,
-                                            files: file
-                                        });
+                    if (!this.uploadProgressSubscription) {
+                        this.progressObservable = new rxjs.Subject();
+                        this.datasource._progressObservable = this.progressObservable;
+                        this.uploadProgressSubscription = this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
+                            lodashEs.forEach(this.uploadedFiles, (file) => {
+                                if (file.name === progressObj.fileName && file.uniqueId === progressObj.uniqueId) {
+                                    file.progress = progressObj.progress;
+                                    if (file.progress === 100) {
+                                        file.status = 'success';
+                                    }
+                                    else {
+                                        file.status = progressObj.status;
+                                        if (progressObj.errMsg) {
+                                            file.errMsg = progressObj.errMsg;
+                                            this.invokeEventCallback('error', {
+                                                $event,
+                                                files: file
+                                            });
+                                        }
                                     }
                                 }
-                            }
+                            });
                         });
-                    });
+                    }
                 }
                 else {
                     this.selectedFiles = $files;
@@ -567,17 +577,16 @@
                     onOk: () => {
                         if (this.deletedatasource) {
                             this.deletedatasource.setInput('file', file._response.fileName || file.name);
-                            this.deleteFileObservable = new rxjs.Subject();
-                            this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
-                            this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
-                                if (response.status === "success") {
-                                    this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
-                                    this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
-                                    this.deletedatasource._deleteFileObservable.unsubscribe();
-                                }
-                            }, (error) => {
-                                this.deletedatasource._deleteFileObservable.unsubscribe();
-                            });
+                            if (!this.deleteProgressSubscription) {
+                                this.deleteFileObservable = new rxjs.Subject();
+                                this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
+                                this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
+                                    if (response.status === "success") {
+                                        this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
+                                        this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
+                                    }
+                                });
+                            }
                         }
                         this.invokeEventCallback('delete', { $event: file });
                         this.dialogService.closeAppConfirmDialog();
@@ -700,6 +709,7 @@
             this.defaultAllowedExtensions = this.allowedFileUploadExtensions.split(',').map(item => item.trim()).map(item => item.endsWith('/*') ? item : `.${item}`);
             this.chooseFilter = this.defaultAllowedExtensions.includes('*/*') ? '' : this.defaultAllowedExtensions;
             this.fileUploadMessage = 'Drop your files here or click here to browse';
+            this.idGenerator = new i1.IDGenerator('file-');
             this.uploadUrl = 'services';
             // styler(this.nativeElement, this);
         }
@@ -719,11 +729,17 @@
             document.removeEventListener('drop', this.dropCb);
             document.removeEventListener('mouseleave', this.dropCb);
             super.ngOnDestroy();
+            const subscriptions = [this.uploadProgressSubscription, this.deleteProgressSubscription];
+            subscriptions.forEach(subscription => {
+                if (subscription) {
+                    subscription.unsubscribe();
+                }
+            });
         }
         static { this.ɵfac = function FileUploadComponent_Factory(t) { return new (t || FileUploadComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵinjectAttribute('select.event'), i0__namespace.ɵɵdirectiveInject(i1__namespace.AbstractDialogService), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["", "wmFileUpload", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i3.provideAsWidgetRef(FileUploadComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "type", "file", "name", "files", "multiple", "", 3, "disabled", "accept", "click", "change", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], ["class", "upload-extensions", 3, "innerHtml", 4, "ngIf"], ["class", "upload-extensions", 4, "ngIf"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], [1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", 4, "ngIf"], [1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails", "col-md-3"], [1, "upload-title"], [3, "class", 4, "ngIf"], ["class", "filesize", 4, "ngIf"], [3, "class", "title", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "progress col-md-7 upload-progress", 4, "ngIf"], ["class", "col-md-1 upload-progress-percentage", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], [1, "media-right", "media-middle"], ["class", "btn btn-transparent btn-default status-icon", "type", "button", 3, "title", "click", 4, "ngIf"], [1, "filesize"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], [1, "col-md-1", "upload-progress-percentage"], ["type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], ["title", "delete", "type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click"], [1, "wi", "wi-delete"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "uploaddetails"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", "tabindex", "0", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "type", "file", "name", "files", "multiple", "", 3, "disabled", "accept", "click", "change", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], ["class", "upload-extensions", 3, "innerHtml", 4, "ngIf"], ["class", "upload-extensions", 4, "ngIf"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], ["tabindex", "0", 1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", "tabindex", "0", 4, "ngIf"], ["tabindex", "0", 1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails", "col-md-3"], [1, "upload-title"], [3, "class", 4, "ngIf"], ["class", "filesize", 4, "ngIf"], [3, "class", "title", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "progress col-md-7 upload-progress", 4, "ngIf"], ["class", "col-md-1 upload-progress-percentage", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], [1, "media-right", "media-middle"], ["href", "javascript:void(0)", "class", "btn btn-transparent btn-default status-icon", "type", "button", 3, "title", "click", 4, "ngIf"], [1, "filesize"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], [1, "col-md-1", "upload-progress-percentage"], ["href", "javascript:void(0)", "type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["href", "javascript:void(0)", "type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], [1, "wi", "wi-delete"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "list-group-item", "file-upload-status"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "uploaddetails"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵtemplate(1, FileUploadComponent_div_1_Template, 12, 13, "div", 1)(2, FileUploadComponent_div_2_Template, 9, 10, "div", 2)(3, FileUploadComponent_button_3_Template, 3, 5, "button", 3)(4, FileUploadComponent_ul_4_Template, 2, 5, "ul", 4)(5, FileUploadComponent_ul_5_Template, 2, 6, "ul", 5);
                 i0__namespace.ɵɵelementEnd();
@@ -744,7 +760,7 @@
             type: i0.Component,
             args: [{ selector: '[wmFileUpload]', providers: [
                         i3.provideAsWidgetRef(FileUploadComponent)
-                    ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n                    <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n                </form>\n                <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n                <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n                <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" *ngIf=\"uploadedFiles.length > 0\" >\n        <div *ngFor=\"let ft of uploadedFiles\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails col-md-3\">\n                            <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n                            <span *ngIf=\"ft.status === 'success'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"></span>\n                            <br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                            <span *ngIf=\"ft.status === 'error'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"\n                                  title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                            <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n                        </p>\n                        <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n                             class=\"progress col-md-7 upload-progress\">\n                            <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n                                 [ngStyle]=\"{width: (ft.progress +'%')}\"\n                                 class=\"progress-bar progress-bar-striped\"></div>\n                        </div>\n                        <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n                             class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a class=\"btn btn-transparent file-upload-stop\" type=\"button\" (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\">\n                        <a (click)=\"clear(ft)\" *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success'\">\n                        <a (click)=\"onFileDelete($event, ft)\" class=\"btn btn-transparent btn-default status-icon\" title=\"delete\" type=\"button\">\n                            <i class=\"wi wi-delete\"></i>\n                        </a>\n                    </div>\n                </div>\n            </li>\n        </div>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
+                    ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n                    <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n                </form>\n                <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n                <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n                <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n        *ngIf=\"uploadedFiles.length > 0\" tabindex=\"0\">\n        <ng-container *ngFor=\"let ft of uploadedFiles\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\" tabindex=\"0\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails col-md-3\">\n                            <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n                            <span *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"></span>\n                            <br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                            <span *ngIf=\"ft.status === 'error'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"\n                                  title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                            <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n                        </p>\n                        <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n                             class=\"progress col-md-7 upload-progress\">\n                            <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n                                 [ngStyle]=\"{width: (ft.progress +'%')}\"\n                                 class=\"progress-bar progress-bar-striped\"></div>\n                        </div>\n                        <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n                             class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a href=\"javascript:void(0)\" class=\"btn btn-transparent file-upload-stop\" type=\"button\"\n                           (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\">\n                        <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n                           *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\">\n                        <a href=\"javascript:void(0)\" (click)=\"onFileDelete($event, ft)\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{deleteiconhint}}\" type=\"button\">\n                            <i class=\"wi wi-delete\"></i>\n                        </a>\n                    </div>\n                </div>\n            </li>\n        </ng-container>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
         }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['select.event']