@wavemaker/app-ng-runtime 11.13.0-rc.6255 → 11.14.0-rc.6276

package/components/input/file-upload/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('rxjs'), require('@wm/core'), require('lodash-es')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/core', 'rxjs', '@wm/core', 'lodash-es'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.fileupload = {}), global.ng.common, global.wm.components.base, global.ng.core, global.rxjs, global.wm.core, global._));
-})(this, (function (exports, i2, i3, i0, rxjs, i1, lodashEs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('rxjs'), require('@wm/core'), require('@wm/components/base'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', 'rxjs', '@wm/core', '@wm/components/base', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.fileupload = {}), global.ng.common, global.ng.core, global.rxjs, global.wm.core, global.wm.components.base, global._));
+})(this, (function (exports, i2, i0, rxjs, i1, base, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -22,330 +22,52 @@
     }
 
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
-    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
     var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
 
     const registerProps = () => {
-        i3.register('wm-fileupload', new Map([
-            ['caption', i3.PROP_STRING],
-            ['name', i3.PROP_STRING],
-            ['hint', i3.PROP_STRING],
-            ['arialabel', i3.PROP_STRING],
-            ['tabindex', i3.PROP_NUMBER],
-            ['multiple', i3.PROP_BOOLEAN],
-            ['fileuploadmessage', i3.PROP_STRING],
-            ['show', { value: true, ...i3.PROP_BOOLEAN }],
-            ['disabled', i3.PROP_BOOLEAN],
-            ['contenttype', i3.PROP_STRING],
-            ['maxfilesize', i3.PROP_NUMBER],
-            ['iconclass', { value: 'wm-sl-l sl-cloud-upload', ...i3.PROP_STRING }],
-            ['cleariconclass', { value: '', ...i3.PROP_STRING }],
-            ['cleariconhint', { value: 'Clear', ...i3.PROP_STRING }],
-            ['class', i3.PROP_STRING],
-            ['uploadpath', { ...i3.PROP_STRING }],
-            ['datasource', i3.PROP_STRING],
-            ['selectedFiles', i3.PROP_STRING],
-            ['destination', i3.PROP_STRING],
-            ['filelistheight', i3.PROP_NUMBER],
-            ['width', { value: 'auto', ...i3.PROP_STRING }],
-            ['showprogressbar', i3.PROP_BOOLEAN],
-            ['showprogressbarpercentage', i3.PROP_BOOLEAN],
-            ['deleteiconhint', { value: 'Delete', ...i3.PROP_STRING }]
+        base.register('wm-fileupload', new Map([
+            ['caption', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['hint', base.PROP_STRING],
+            ['arialabel', base.PROP_STRING],
+            ['tabindex', base.PROP_NUMBER],
+            ['multiple', base.PROP_BOOLEAN],
+            ['fileuploadmessage', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['disabled', base.PROP_BOOLEAN],
+            ['contenttype', base.PROP_STRING],
+            ['maxfilesize', base.PROP_NUMBER],
+            ['iconclass', { value: 'wm-sl-l sl-cloud-upload', ...base.PROP_STRING }],
+            ['cleariconclass', { value: '', ...base.PROP_STRING }],
+            ['cleariconhint', { value: 'Clear', ...base.PROP_STRING }],
+            ['class', base.PROP_STRING],
+            ['uploadpath', { ...base.PROP_STRING }],
+            ['datasource', base.PROP_STRING],
+            ['selectedFiles', base.PROP_STRING],
+            ['destination', base.PROP_STRING],
+            ['filelistheight', base.PROP_NUMBER],
+            ['width', { value: 'auto', ...base.PROP_STRING }],
+            ['showprogressbar', base.PROP_BOOLEAN],
+            ['showprogressbarpercentage', base.PROP_BOOLEAN],
+            ['deleteiconhint', { value: 'Delete', ...base.PROP_STRING }]
         ]));
-        i3.registerFormWidget(i1.FormWidgetType.UPLOAD, new Map([
-            ['disabled', i3.PROP_BOOLEAN],
-            ['extensions', i3.PROP_STRING],
-            ['filetype', i3.PROP_STRING],
-            ['multiple', i3.PROP_BOOLEAN],
-            ['readonly', i3.PROP_BOOLEAN],
-            ['required', i3.PROP_BOOLEAN]
+        base.registerFormWidget(i1.FormWidgetType.UPLOAD, new Map([
+            ['disabled', base.PROP_BOOLEAN],
+            ['extensions', base.PROP_STRING],
+            ['filetype', base.PROP_STRING],
+            ['multiple', base.PROP_BOOLEAN],
+            ['readonly', base.PROP_BOOLEAN],
+            ['required', base.PROP_BOOLEAN]
         ]));
     };
 
-    const _c0 = ["wmFileUpload", ""];
-    const _c1 = a0 => ({ "highlight-drop-box": a0 });
-    const _c2 = (a0, a1) => ({ height: a0, overflow: a1 });
-    const _c3 = a0 => ({ width: a0 });
-    function FileUploadComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-        const _r3 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "input", 13);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_Conditional_1_Conditional_6_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileElemClick($event)); })("change", function FileUploadComponent_Conditional_1_Conditional_6_Template_input_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); });
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("disabled", ctx_r1.disabled)("accept", ctx_r1.chooseFilter);
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.hint || "File selection field");
-    } }
-    function FileUploadComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "label", 11);
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("innerHtml", ctx_r1.chooseFilter + " only ", i0__namespace.ɵɵsanitizeHtml);
-    } }
-    function FileUploadComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "span", 12);
-        i0__namespace.ɵɵtext(1, " . ");
-        i0__namespace.ɵɵelementEnd();
-    } }
-    function FileUploadComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "label", 11);
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("innerHtml", ctx_r1.maxfilesize + "MB max", i0__namespace.ɵɵsanitizeHtml);
-    } }
-    function FileUploadComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 1)(1, "div", 5);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_Conditional_1_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.triggerFileSelect()); })("dragover", function FileUploadComponent_Conditional_1_Template_div_dragover_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.dragOverHandler($event)); })("drop", function FileUploadComponent_Conditional_1_Template_div_drop_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onFileDrop($event)); });
-        i0__namespace.ɵɵelement(2, "i");
-        i0__namespace.ɵɵelementStart(3, "div", 6);
-        i0__namespace.ɵɵelement(4, "label", 7);
-        i0__namespace.ɵɵelementStart(5, "form", 8);
-        i0__namespace.ɵɵtemplate(6, FileUploadComponent_Conditional_1_Conditional_6_Template, 1, 3, "input", 9);
-        i0__namespace.ɵɵelementStart(7, "a", 10);
-        i0__namespace.ɵɵtext(8);
-        i0__namespace.ɵɵelementEnd()();
-        i0__namespace.ɵɵtemplate(9, FileUploadComponent_Conditional_1_Conditional_9_Template, 1, 1, "label", 11)(10, FileUploadComponent_Conditional_1_Conditional_10_Template, 2, 0, "span", 12)(11, FileUploadComponent_Conditional_1_Conditional_11_Template, 1, 1, "label", 11);
-        i0__namespace.ɵɵelementEnd()()();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(11, _c1, ctx_r1.highlightDropArea));
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵclassMap(ctx_r1.iconclass);
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("innerHtml", ctx_r1.caption, i0__namespace.ɵɵsanitizeHtml);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵpropertyInterpolate("name", ctx_r1.formName);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r1.multiple ? 6 : -1);
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵtextInterpolate(ctx_r1.fileUploadMessage);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r1.chooseFilter ? 9 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r1.chooseFilter && ctx_r1.maxfilesize ? 10 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r1.maxfilesize ? 11 : -1);
-    } }
-    function FileUploadComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-        const _r4 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "input", 21);
-        i0__namespace.ɵɵlistener("change", function FileUploadComponent_Conditional_2_Conditional_3_Template_input_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); })("click", function FileUploadComponent_Conditional_2_Conditional_3_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileElemClick($event)); });
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("accept", ctx_r1.chooseFilter)("disabled", ctx_r1.disabled);
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.arialabel || "File selection field");
-    } }
-    function FileUploadComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-        const _r5 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "input", 22);
-        i0__namespace.ɵɵlistener("change", function FileUploadComponent_Conditional_2_Conditional_4_Template_input_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r5); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileSelect($event, $event.target.files)); })("click", function FileUploadComponent_Conditional_2_Conditional_4_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r5); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileElemClick($event)); });
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("accept", ctx_r1.chooseFilter)("disabled", ctx_r1.disabled);
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.arialabel || "File selection field");
-    } }
-    function FileUploadComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 2)(1, "div", 14)(2, "form", 8);
-        i0__namespace.ɵɵtemplate(3, FileUploadComponent_Conditional_2_Conditional_3_Template, 1, 3, "input", 15)(4, FileUploadComponent_Conditional_2_Conditional_4_Template, 1, 3, "input", 16);
-        i0__namespace.ɵɵelementStart(5, "button", 17);
-        i0__namespace.ɵɵelement(6, "i", 18)(7, "span", 19);
-        i0__namespace.ɵɵelementEnd()()();
-        i0__namespace.ɵɵelement(8, "div", 20);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵpropertyInterpolate("name", ctx_r1.formName);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r1.multiple ? 3 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(!ctx_r1.multiple ? 4 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c1, ctx_r1.highlightDropArea));
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵclassMap(ctx_r1.iconclass);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.caption, i0__namespace.ɵɵsanitizeHtml);
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "span");
-        i0__namespace.ɵɵpipe(1, "stateClass");
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit;
-        i0__namespace.ɵɵclassMapInterpolate1("status-icon ", i0__namespace.ɵɵpipeBind1(1, 3, ft_r6.status), "");
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "span", 30);
-        i0__namespace.ɵɵtext(1);
-        i0__namespace.ɵɵpipe(2, "filesize");
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit;
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate(i0__namespace.ɵɵpipeBind2(2, 1, ft_r6.size, 0));
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "span", 25);
-        i0__namespace.ɵɵpipe(1, "stateClass");
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit;
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵclassMapInterpolate1("status-icon ", i0__namespace.ɵɵpipeBind1(1, 4, ft_r6.status), "");
-        i0__namespace.ɵɵpropertyInterpolate("title", ft_r6.errMsg || ctx_r1.appLocale.MESSAGE_FILE_UPLOAD_FAILED);
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "span", 32);
-        i0__namespace.ɵɵtext(1, "Upload Failed");
-        i0__namespace.ɵɵelementEnd();
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 33);
-        i0__namespace.ɵɵelement(1, "div", 37);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit;
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngClass", ft_r6.status === "error" ? "progress-bar-danger" : "progress-bar-info")("ngStyle", i0__namespace.ɵɵpureFunction1(2, _c3, ft_r6.progress + "%"));
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 34);
-        i0__namespace.ɵɵtext(1);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit;
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵtextInterpolate1("", ft_r6.progress + "%", " ");
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-        const _r7 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 35)(1, "a", 38);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_15_Template_a_click_1_listener() { i0__namespace.ɵɵrestoreView(_r7); const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.abortFileUpload(ft_r6)); });
-        i0__namespace.ɵɵelement(2, "i", 39);
-        i0__namespace.ɵɵelementEnd()();
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-        const _r8 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "a", 40);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_17_Template_a_click_0_listener() { i0__namespace.ɵɵrestoreView(_r8); const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.clear(ft_r6)); });
-        i0__namespace.ɵɵelement(1, "i");
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext(4);
-        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.cleariconhint);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵclassMap(ctx_r1.cleariconclass);
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-        const _r9 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 35)(1, "a", 40);
-        i0__namespace.ɵɵlistener("click", function FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_18_Template_a_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ft_r6 = i0__namespace.ɵɵnextContext(2).$implicit; const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.onFileDelete($event, ft_r6)); });
-        i0__namespace.ɵɵelement(2, "i", 41);
-        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_Conditional_3_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 23)(1, "div", 24);
-        i0__namespace.ɵɵelement(2, "div", 25);
-        i0__namespace.ɵɵpipe(3, "fileIconClass");
-        i0__namespace.ɵɵelementStart(4, "div", 26)(5, "p", 27)(6, "span", 28);
-        i0__namespace.ɵɵtext(7);
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(8, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_8_Template, 2, 5, "span", 29);
-        i0__namespace.ɵɵelement(9, "br");
-        i0__namespace.ɵɵtemplate(10, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_10_Template, 3, 4, "span", 30)(11, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_11_Template, 2, 6, "span", 31)(12, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_12_Template, 2, 0, "span", 32);
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(13, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_13_Template, 2, 4, "div", 33)(14, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_14_Template, 2, 1, "div", 34);
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(15, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_15_Template, 3, 0, "div", 35);
-        i0__namespace.ɵɵelementStart(16, "div", 35);
-        i0__namespace.ɵɵtemplate(17, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_17_Template, 2, 4, "a", 36);
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵtemplate(18, FileUploadComponent_Conditional_3_For_2_Conditional_0_Conditional_18_Template, 3, 1, "div", 35);
-        i0__namespace.ɵɵelementEnd()();
-    } if (rf & 2) {
-        const ft_r6 = i0__namespace.ɵɵnextContext().$implicit;
-        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵclassMapInterpolate1("media-left media-middle file-icon ", i0__namespace.ɵɵpipeBind1(3, 14, ctx_r1.getFileExtension(ft_r6.name)), "");
-        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.getFileExtension(ft_r6.name));
-        i0__namespace.ɵɵadvance(5);
-        i0__namespace.ɵɵtextInterpolate(ft_r6.storageName || ft_r6.name);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r6._response == null ? null : ft_r6._response.success)) ? 8 : -1);
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵconditional(ft_r6.fileLength !== 0 ? 10 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "error" ? 11 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "error" ? 12 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "onProgress" || ctx_r1.showprogressbar ? 13 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional((ft_r6.status === "onProgress" || ctx_r1.showprogressbar && ctx_r1.showprogressbarpercentage) && ft_r6.progress ? 14 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "onProgress" || ft_r6.status === "queued" ? 15 : -1);
-        i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵconditional(ctx_r1.cleariconclass !== "" && ft_r6.status !== "onProgress" ? 17 : -1);
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ft_r6.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r6._response == null ? null : ft_r6._response.success)) ? 18 : -1);
-    } }
-    function FileUploadComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵtemplate(0, FileUploadComponent_Conditional_3_For_2_Conditional_0_Template, 19, 16, "li", 23);
-    } if (rf & 2) {
-        const ft_r6 = ctx.$implicit;
-        i0__namespace.ɵɵconditional(ft_r6.status !== "abort" ? 0 : -1);
-    } }
-    function FileUploadComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "ul", 3);
-        i0__namespace.ɵɵrepeaterCreate(1, FileUploadComponent_Conditional_3_For_2_Template, 1, 1, null, null, i0__namespace.ɵɵrepeaterTrackByIdentity);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction2(1, _c2, ctx_r1.filelistheight, ctx_r1.overflow));
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵrepeater(ctx_r1.uploadedFiles);
-    } }
-    function FileUploadComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 42)(1, "div", 24);
-        i0__namespace.ɵɵelement(2, "div", 43);
-        i0__namespace.ɵɵelementStart(3, "div", 26)(4, "p", 44)(5, "label", 28);
-        i0__namespace.ɵɵtext(6);
-        i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelement(7, "br");
-        i0__namespace.ɵɵelementEnd()();
-        i0__namespace.ɵɵelementStart(8, "div", 35);
-        i0__namespace.ɵɵelement(9, "span", 45);
-        i0__namespace.ɵɵelementEnd()()();
-    } if (rf & 2) {
-        const ft_r10 = ctx.$implicit;
-        i0__namespace.ɵɵadvance(6);
-        i0__namespace.ɵɵtextInterpolate(ft_r10.name);
-    } }
-    function FileUploadComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "ul", 4);
-        i0__namespace.ɵɵrepeaterCreate(1, FileUploadComponent_Conditional_4_For_2_Template, 10, 1, "li", 42, i0__namespace.ɵɵrepeaterTrackByIdentity);
-        i0__namespace.ɵɵelementEnd();
-    } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED);
-        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction2(2, _c2, ctx_r1.filelistheight, ctx_r1.overflow));
-        i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵrepeater(ctx_r1.selectedFolders);
-    } }
     const DEFAULT_CLS = 'app-fileupload';
     const WIDGET_CONFIG = {
         widgetType: 'wm-fileupload',
         hostClass: DEFAULT_CLS
     };
-    class FileUploadComponent extends i3.StylableComponent {
+    class FileUploadComponent extends base.StylableComponent {
         static { this.initializeProps = registerProps(); }
         /*_hasOnSuccessEvt = WM.isDefined(attrs.onSuccess);
          _hasOnErrorEvt = WM.isDefined(attrs.onError);*/
@@ -705,7 +427,7 @@
             document.addEventListener('mouseleave', this.dropCb.bind(this));
         }
         ngAfterViewInit() {
-            i3.styler(this.nativeElement.querySelector('.app-button, .drop-box'), this);
+            base.styler(this.nativeElement.querySelector('.app-button, .drop-box'), this);
         }
         ngOnDestroy() {
             document.removeEventListener('dragover', this.dragOverCb);
@@ -719,39 +441,25 @@
                 }
             });
         }
-        static { this.ɵfac = function FileUploadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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", ""]], standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
-                    i3.provideAsWidgetRef(FileUploadComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c0, decls: 5, vars: 4, consts: [["init-widget", "", 1, "app-fileupload"], [1, "app-multi-file-upload"], [1, "app-single-file-upload"], ["tabindex", "0", 1, "list-group", "file-upload", 3, "ngStyle"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "disabled", "accept"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "app-button-wrapper"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "accept", "disabled"], ["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"], ["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"], [1, "filesize"], [3, "class", "title"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "col-md-1", "upload-progress-percentage"], [1, "media-right", "media-middle"], ["href", "javascript:void(0)", "type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "title"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], ["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-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_Conditional_1_Template, 12, 13, "div", 1)(2, FileUploadComponent_Conditional_2_Template, 9, 10, "div", 2)(3, FileUploadComponent_Conditional_3_Template, 3, 4, "ul", 3)(4, FileUploadComponent_Conditional_4_Template, 3, 5, "ul", 4);
-                i0__namespace.ɵɵelementEnd();
-            } if (rf & 2) {
-                i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵconditional(!ctx._isMobileType && ctx.multiple ? 1 : -1);
-                i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵconditional(!ctx.multiple || ctx._isMobileType ? 2 : -1);
-                i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵconditional(ctx.uploadedFiles.length > 0 ? 3 : -1);
-                i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵconditional(ctx.selectedFolders.length > 0 ? 4 : -1);
-            } }, dependencies: [i2.CommonModule, i2__namespace.NgClass, i2__namespace.NgStyle, i3.WmComponentsModule, i3__namespace.FileIconClassPipe, i3__namespace.FileSizePipe, i3__namespace.StateClassPipe], encapsulation: 2 }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'select.event', attribute: true }, { token: i1__namespace.AbstractDialogService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FileUploadComponent, isStandalone: true, selector: "[wmFileUpload]", providers: [
+                base.provideAsWidgetRef(FileUploadComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"app-fileupload\" init-widget>\n  <!-- drag and drop files UI in web -->\n  @if (!_isMobileType && multiple) {\n    <div class=\"app-multi-file-upload\">\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            @if (multiple) {\n              <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n            }\n            <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n          </form>\n          @if (chooseFilter) {\n            <label [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n          }\n          @if (chooseFilter && maxfilesize) {\n            <span class=\"upload-extensions\"> . </span>\n          }\n          @if (maxfilesize) {\n            <label [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n  @if ((!multiple || _isMobileType)) {\n    <div class=\"app-single-file-upload\">\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          @if (multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              multiple name=\"files\" type=\"file\">\n          }\n          @if (!multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              name=\"files\" type=\"file\">\n          }\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  }\n  <!-- list of selectedfiles UI -->\n  @if (uploadedFiles.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n      tabindex=\"0\">\n      @for (ft of uploadedFiles; track ft) {\n        @if (ft.status !== 'abort') {\n          <li class=\"list-group-item file-upload-status\" 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                  @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                    <span\n                    class=\"status-icon {{ft.status | stateClass }}\"></span>\n                  }\n                  <br/>\n                  @if (ft.fileLength  !== 0) {\n                    <span class=\"filesize\">{{ft.size | filesize:0}}</span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span\n                      class=\"status-icon {{ft.status | stateClass }}\"\n                    title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span class=\"error-message\">Upload Failed</span>\n                  }\n                </p>\n                @if (ft.status === 'onProgress' || showprogressbar) {\n                  <div\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                }\n                @if ((ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress ) {\n                  <div\n                    class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                  </div>\n                }\n              </div>\n              @if (ft.status === 'onProgress' || ft.status === 'queued') {\n                <div class=\"media-right media-middle\">\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              }\n              <div class=\"media-right media-middle\">\n                @if (cleariconclass !== '' && ft.status !== 'onProgress') {\n                  <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n                    class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                    <i class=\"{{cleariconclass}}\"></i>\n                  </a>\n                }\n              </div>\n              @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                <div class=\"media-right media-middle\">\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              }\n            </div>\n          </li>\n        }\n      }\n    </ul>\n  }\n  <!-- list of selectedfolders UI to show the error in title -->\n  @if (selectedFolders.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" >\n      @for (ft of selectedFolders; track ft) {\n        <li 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      }\n    </ul>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: base.FileIconClassPipe, name: "fileIconClass" }, { kind: "pipe", type: base.StateClassPipe, name: "stateClass" }, { kind: "pipe", type: base.FileSizePipe, name: "filesize" }] }); }
     }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileUploadComponent, [{
-            type: i0.Component,
-            args: [{ standalone: true, imports: [i2.CommonModule, i3.WmComponentsModule], selector: '[wmFileUpload]', providers: [
-                        i3.provideAsWidgetRef(FileUploadComponent)
-                    ], template: "<div class=\"app-fileupload\" init-widget>\n  <!-- drag and drop files UI in web -->\n  @if (!_isMobileType && multiple) {\n    <div class=\"app-multi-file-upload\">\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            @if (multiple) {\n              <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n            }\n            <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n          </form>\n          @if (chooseFilter) {\n            <label [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n          }\n          @if (chooseFilter && maxfilesize) {\n            <span class=\"upload-extensions\"> . </span>\n          }\n          @if (maxfilesize) {\n            <label [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n  @if ((!multiple || _isMobileType)) {\n    <div class=\"app-single-file-upload\">\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          @if (multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              multiple name=\"files\" type=\"file\">\n          }\n          @if (!multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              name=\"files\" type=\"file\">\n          }\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  }\n  <!-- list of selectedfiles UI -->\n  @if (uploadedFiles.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n      tabindex=\"0\">\n      @for (ft of uploadedFiles; track ft) {\n        @if (ft.status !== 'abort') {\n          <li class=\"list-group-item file-upload-status\" 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                  @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                    <span\n                    class=\"status-icon {{ft.status | stateClass }}\"></span>\n                  }\n                  <br/>\n                  @if (ft.fileLength  !== 0) {\n                    <span class=\"filesize\">{{ft.size | filesize:0}}</span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span\n                      class=\"status-icon {{ft.status | stateClass }}\"\n                    title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span class=\"error-message\">Upload Failed</span>\n                  }\n                </p>\n                @if (ft.status === 'onProgress' || showprogressbar) {\n                  <div\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                }\n                @if ((ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress ) {\n                  <div\n                    class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                  </div>\n                }\n              </div>\n              @if (ft.status === 'onProgress' || ft.status === 'queued') {\n                <div class=\"media-right media-middle\">\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              }\n              <div class=\"media-right media-middle\">\n                @if (cleariconclass !== '' && ft.status !== 'onProgress') {\n                  <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n                    class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                    <i class=\"{{cleariconclass}}\"></i>\n                  </a>\n                }\n              </div>\n              @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                <div class=\"media-right media-middle\">\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              }\n            </div>\n          </li>\n        }\n      }\n    </ul>\n  }\n  <!-- list of selectedfolders UI to show the error in title -->\n  @if (selectedFolders.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" >\n      @for (ft of selectedFolders; track ft) {\n        <li 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      }\n    </ul>\n  }\n</div>\n" }]
-        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['select.event']
-                }] }, { type: i1__namespace.AbstractDialogService }, { type: undefined, decorators: [{
-                    type: i0.Inject,
-                    args: ['EXPLICIT_CONTEXT']
-                }, {
-                    type: i0.Optional
-                }] }], null); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(FileUploadComponent, { className: "FileUploadComponent", filePath: "file-upload.component.ts", lineNumber: 31 }); })();
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: FileUploadComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.CommonModule, base.FileIconClassPipe, base.StateClassPipe, base.FileSizePipe], selector: '[wmFileUpload]', providers: [
+                            base.provideAsWidgetRef(FileUploadComponent)
+                        ], template: "<div class=\"app-fileupload\" init-widget>\n  <!-- drag and drop files UI in web -->\n  @if (!_isMobileType && multiple) {\n    <div class=\"app-multi-file-upload\">\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            @if (multiple) {\n              <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n            }\n            <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n          </form>\n          @if (chooseFilter) {\n            <label [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n          }\n          @if (chooseFilter && maxfilesize) {\n            <span class=\"upload-extensions\"> . </span>\n          }\n          @if (maxfilesize) {\n            <label [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n  @if ((!multiple || _isMobileType)) {\n    <div class=\"app-single-file-upload\">\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          @if (multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              multiple name=\"files\" type=\"file\">\n          }\n          @if (!multiple) {\n            <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\"\n              [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n              name=\"files\" type=\"file\">\n          }\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  }\n  <!-- list of selectedfiles UI -->\n  @if (uploadedFiles.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n      tabindex=\"0\">\n      @for (ft of uploadedFiles; track ft) {\n        @if (ft.status !== 'abort') {\n          <li class=\"list-group-item file-upload-status\" 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                  @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                    <span\n                    class=\"status-icon {{ft.status | stateClass }}\"></span>\n                  }\n                  <br/>\n                  @if (ft.fileLength  !== 0) {\n                    <span class=\"filesize\">{{ft.size | filesize:0}}</span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span\n                      class=\"status-icon {{ft.status | stateClass }}\"\n                    title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                  }\n                  @if (ft.status === 'error') {\n                    <span class=\"error-message\">Upload Failed</span>\n                  }\n                </p>\n                @if (ft.status === 'onProgress' || showprogressbar) {\n                  <div\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                }\n                @if ((ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress ) {\n                  <div\n                    class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                  </div>\n                }\n              </div>\n              @if (ft.status === 'onProgress' || ft.status === 'queued') {\n                <div class=\"media-right media-middle\">\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              }\n              <div class=\"media-right media-middle\">\n                @if (cleariconclass !== '' && ft.status !== 'onProgress') {\n                  <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n                    class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                    <i class=\"{{cleariconclass}}\"></i>\n                  </a>\n                }\n              </div>\n              @if (ft.status === 'success' && (!datasource || (datasource && ft._response?.success))) {\n                <div class=\"media-right media-middle\">\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              }\n            </div>\n          </li>\n        }\n      }\n    </ul>\n  }\n  <!-- list of selectedfolders UI to show the error in title -->\n  @if (selectedFolders.length > 0) {\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" >\n      @for (ft of selectedFolders; track ft) {\n        <li 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      }\n    </ul>\n  }\n</div>\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['select.event']
+                    }] }, { type: i1__namespace.AbstractDialogService }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
 
     exports.FileUploadComponent = FileUploadComponent;