(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('rxjs'), require('@wm/core'), require('lodash-es')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '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.core, global.ng.common, global.wm.components.base, global.rxjs, global.wm.core, global._));
})(this, (function (exports, i0, i2, i3, rxjs, i1, lodashEs) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
    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 }]
        ]));
        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]
        ]));
    };

    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_div_1_input_6_Template(rf, ctx) { if (rf & 1) {
        const _r3 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "input", 15);
        i0__namespace.ɵɵlistener("click", function FileUploadComponent_div_1_input_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_div_1_input_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_div_1_label_9_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "label", 16);
    } if (rf & 2) {
        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
        i0__namespace.ɵɵproperty("innerHtml", ctx_r1.chooseFilter + " only ", i0__namespace.ɵɵsanitizeHtml);
    } }
    function FileUploadComponent_div_1_span_10_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "span", 17);
        i0__namespace.ɵɵtext(1, " . ");
        i0__namespace.ɵɵelementEnd();
    } }
    function FileUploadComponent_div_1_label_11_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "label", 16);
    } if (rf & 2) {
        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
        i0__namespace.ɵɵproperty("innerHtml", ctx_r1.maxfilesize + "MB max", i0__namespace.ɵɵsanitizeHtml);
    } }
    function FileUploadComponent_div_1_Template(rf, ctx) { if (rf & 1) {
        const _r1 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "div", 6)(1, "div", 7);
        i0__namespace.ɵɵlistener("click", function FileUploadComponent_div_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_div_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_div_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", 8);
        i0__namespace.ɵɵelement(4, "label", 9);
        i0__namespace.ɵɵelementStart(5, "form", 10);
        i0__namespace.ɵɵtemplate(6, FileUploadComponent_div_1_input_6_Template, 1, 3, "input", 11);
        i0__namespace.ɵɵelementStart(7, "a", 12);
        i0__namespace.ɵɵtext(8);
        i0__namespace.ɵɵelementEnd()();
        i0__namespace.ɵɵtemplate(9, FileUploadComponent_div_1_label_9_Template, 1, 1, "label", 13)(10, FileUploadComponent_div_1_span_10_Template, 2, 0, "span", 14)(11, FileUploadComponent_div_1_label_11_Template, 1, 1, "label", 13);
        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.ɵɵproperty("ngIf", ctx_r1.multiple);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵtextInterpolate(ctx_r1.fileUploadMessage);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r1.chooseFilter);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r1.chooseFilter && ctx_r1.maxfilesize);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ctx_r1.maxfilesize);
    } }
    function FileUploadComponent_div_2_input_3_Template(rf, ctx) { if (rf & 1) {
        const _r4 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "input", 26);
        i0__namespace.ɵɵlistener("change", function FileUploadComponent_div_2_input_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_div_2_input_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_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
        const _r5 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "input", 27);
        i0__namespace.ɵɵlistener("change", function FileUploadComponent_div_2_input_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_div_2_input_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_div_2_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "div", 18)(1, "div", 19)(2, "form", 10);
        i0__namespace.ɵɵtemplate(3, FileUploadComponent_div_2_input_3_Template, 1, 3, "input", 20)(4, FileUploadComponent_div_2_input_4_Template, 1, 3, "input", 21);
        i0__namespace.ɵɵelementStart(5, "button", 22);
        i0__namespace.ɵɵelement(6, "i", 23)(7, "span", 24);
        i0__namespace.ɵɵelementEnd()()();
        i0__namespace.ɵɵelement(8, "div", 25);
        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.ɵɵproperty("ngIf", ctx_r1.multiple);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", !ctx_r1.multiple);
        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_button_3_Template(rf, ctx) { if (rf & 1) {
        const _r6 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "button", 28);
        i0__namespace.ɵɵlistener("click", function FileUploadComponent_button_3_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.openFileSelector()); });
        i0__namespace.ɵɵelement(1, "i")(2, "span", 24);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r1 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵproperty("disabled", ctx_r1.disabled);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵclassMap(ctx_r1.iconclass);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("innerHTML", ctx_r1.caption, i0__namespace.ɵɵsanitizeHtml);
    } }
    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_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");
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit;
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵtextInterpolate(i0__namespace.ɵɵpipeBind2(2, 1, ft_r7.size, 0));
    } }
    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) {
        const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit;
        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
        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_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_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();
    } if (rf & 2) {
        const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit;
        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_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();
    } if (rf & 2) {
        const ft_r7 = i0__namespace.ɵɵnextContext(2).$implicit;
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵtextInterpolate1("", ft_r7.progress + "%", " ");
    } }
    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_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_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_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) {
        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_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", 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_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_ng_container_1_li_1_span_8_Template, 2, 5, "span", 38);
        i0__namespace.ɵɵelement(9, "br");
        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_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_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_ng_container_1_li_1_a_17_Template, 2, 4, "a", 46);
        i0__namespace.ɵɵelementEnd();
        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;
        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_r7.name)), "");
        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.getFileExtension(ft_r7.name));
        i0__namespace.ɵɵadvance(5);
        i0__namespace.ɵɵtextInterpolate(ft_r7.storageName || ft_r7.name);
        i0__namespace.ɵɵadvance();
        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();
        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "error");
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "error");
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "onProgress" || ctx_r1.showprogressbar);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", (ft_r7.status === "onProgress" || ctx_r1.showprogressbar && ctx_r1.showprogressbarpercentage) && ft_r7.progress);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "onProgress" || ft_r7.status === "queued");
        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" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
    } }
    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();
        i0__namespace.ɵɵproperty("ngIf", ft_r7.status !== "abort");
    } }
    function FileUploadComponent_ul_4_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "ul", 29);
        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();
        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction2(2, _c2, ctx_r1.filelistheight, ctx_r1.overflow));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.uploadedFiles);
    } }
    function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
        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);
        i0__namespace.ɵɵelementEnd();
        i0__namespace.ɵɵelement(7, "br");
        i0__namespace.ɵɵelementEnd()();
        i0__namespace.ɵɵelementStart(8, "div", 45);
        i0__namespace.ɵɵelement(9, "span", 61);
        i0__namespace.ɵɵelementEnd()()();
    } if (rf & 2) {
        const ft_r11 = ctx.$implicit;
        i0__namespace.ɵɵadvance(6);
        i0__namespace.ɵɵtextInterpolate(ft_r11.name);
    } }
    function FileUploadComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
        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();
        i0__namespace.ɵɵpropertyInterpolate("title", ctx_r1.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED);
        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction2(3, _c2, ctx_r1.filelistheight, ctx_r1.overflow));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngForOf", ctx_r1.selectedFolders);
    } }
    const DEFAULT_CLS = 'app-fileupload';
    const WIDGET_CONFIG = {
        widgetType: 'wm-fileupload',
        hostClass: DEFAULT_CLS
    };
    class FileUploadComponent extends i3.StylableComponent {
        static { this.initializeProps = registerProps(); }
        /*_hasOnSuccessEvt = WM.isDefined(attrs.onSuccess);
         _hasOnErrorEvt = WM.isDefined(attrs.onError);*/
        // Checking if the selected file is valid for the choosen filter type
        isValidFile(filename, contenttype, extensionName, isMobileType) {
            let isValid, contentTypes;
            if (!contenttype) {
                return true;
            }
            contentTypes = lodashEs.toLower(contenttype).split(',');
            if (lodashEs.includes(contentTypes, 'image/*') || (lodashEs.includes(contentTypes, 'image') && isMobileType)) {
                isValid = i1.isImageFile(filename);
                // If one of the content type chosen is image and user uploads image it is valid file
                if (isValid) {
                    return isValid;
                }
            }
            if (lodashEs.includes(contentTypes, 'audio/*') || (lodashEs.includes(contentTypes, 'audio') && isMobileType)) {
                isValid = i1.isAudioFile(filename);
                // If one of the content type chosen is audio/* and user uploads audio it is valid file
                if (isValid) {
                    return isValid;
                }
            }
            if (lodashEs.includes(contentTypes, 'video/*') || (lodashEs.includes(contentTypes, 'video') && isMobileType)) {
                isValid = i1.isVideoFile(filename);
                // If one of the content type chosen is video/* and user uploads video it is valid file
                if (isValid) {
                    return isValid;
                }
            }
            /*content type and the uploaded file extension should be same*/
            if (lodashEs.includes(contentTypes, '.' + lodashEs.toLower(extensionName))) {
                isValid = true;
            }
            return isValid;
        }
        /* this return the array of files which are having the file size not more than maxfilesize and filters based on contenttype */
        getValidFiles($files) {
            const validFiles = [];
            const errorFiles = [];
            const MAXFILEUPLOAD_SIZE = parseFloat(this.maxfilesize) * this.FILESIZE_MB || this.FILESIZE_MB;
            const MAX_FILE_UPLOAD_FORMATTED_SIZE = (this.maxfilesize || '1') + 'MB';
            // if contenttype is files for mobile projects.
            if (this.chooseFilter === this.DEVICE_CONTENTTYPES.FILES) {
                this.chooseFilter = '';
            }
            lodashEs.forEach($files, (file) => {
                /* check for the file content type before uploading */
                if (!this.isValidFile(file.name, this.chooseFilter, this.getFileExtension(file.name), this._isMobileType)) {
                    const msg = `${this.appLocale.LABEL_FILE_EXTENTION_VALIDATION_MESSAGE} ${this.chooseFilter}`;
                    this.handleErrorFiles('INVALID_FILE_EXTENSION', msg, file, errorFiles);
                    return;
                }
                if (file.size > MAXFILEUPLOAD_SIZE) {
                    const msg = `${this.appLocale.LABEL_FILE_EXCEED_VALIDATION_MESSAGE} ${MAX_FILE_UPLOAD_FORMATTED_SIZE}`;
                    this.handleErrorFiles('INVALID_FILE_SIZE', msg, file, errorFiles);
                    return;
                }
                validFiles.push(file);
            });
            return {
                validFiles: validFiles,
                errorFiles: errorFiles
            };
        }
        handleErrorFiles(key, msg, file, errorFiles) {
            // Check whether the error callback exist or not. If it exists then dont show taoster message
            if (!this.hasEventCallback('error')) {
                this.app.notifyApp(msg, 'Error');
            }
            const error = {
                key: key,
                message: msg
            };
            file.error = error;
            errorFiles.push(file);
        }
        /*Overwrite the caption only if they are default*/
        getCaption(caption, isMultiple, isMobileType) {
            if (lodashEs.includes(this.DEFAULT_CAPTIONS, caption)) {
                return isMultiple && !isMobileType ? this.DEFAULT_CAPTIONS.MULTIPLE_SELECT : this.DEFAULT_CAPTIONS.SELECT;
            }
            return caption;
        }
        /* change server path based on user option */
        changeServerUploadPath(path) {
            this.selectedUploadTypePath = path;
        }
        /* this function returns the fileextension */
        getFileExtension(fileName) {
            if (fileName && lodashEs.includes(fileName, '.')) {
                return fileName.substring(fileName.lastIndexOf('.') + 1);
            }
            return 'file';
        }
        /**
         * Calls select Event
         * @param $event
         * @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(() => {
                this.invokeEventCallback('select', {
                    $event: $.extend($event.$files || {}, $files),
                    selectedFiles: $files
                });
            });
        }
        onFileElemClick($event) {
            this.highlightDropArea = true;
            //The file upload widget value should be set to null to reupload the same file.
            this.$element.find('.file-input')[0].value = null;
            $event.stopPropagation();
            // when the filepicker is not there on the window, remove the dropzone highlight
            window.addEventListener('focus', this.disableDropZone.bind(this));
        }
        disableDropZone() {
            this.highlightDropArea = false;
            window.removeEventListener('focus', this.disableDropZone);
        }
        /*this function to clear the specified file. if argument is not provided, it clears the complete list  */
        clear(fileObj) {
            this.selectedFiles = (fileObj) ? this.clearFile(this.selectedFiles, fileObj) : [];
            this.uploadedFiles = (fileObj) ? this.clearFile(this.uploadedFiles, fileObj) : [];
        }
        clearFile(files, fileObj) {
            return files.filter((file) => file?._response?.fileName !== fileObj?._response?.fileName || file?.name !== fileObj?.name || file !== fileObj);
        }
        /*this function to set the class names for clear icon */
        setClearIconClass(classValue) {
            this.cleariconclass = classValue;
        }
        /*this function to set the hint for clear icon */
        setClearIconHint(hint) {
            this.cleariconhint = hint;
        }
        /*this function to append upload status dom elements to widget */
        onFileSelect($event, $files) {
            let beforeSelectVal;
            const files = this.getValidFiles($files);
            $files = files.validFiles;
            // If the user has previously tried uploading folders using drop, and then uploading using click method we clear the folders dom
            if ($event.type === "change") {
                this.selectedFolders = [];
            }
            // Trigger error callback event if any invalid file found.
            if (!lodashEs.isEmpty(files.errorFiles)) {
                this.invokeEventCallback('error', {
                    $event,
                    files: files.errorFiles
                });
            }
            // Make call if there are valid files else no call is made
            if ($files.length) {
                // EVENT: ON_BEFORE_SELECT
                beforeSelectVal = this.invokeEventCallback('beforeselect', {
                    $event: $.extend($event.$files || {}, $files),
                    files: $files
                });
                if (this.datasource) {
                    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;
                }
                if (beforeSelectVal !== false) {
                    // EVENT: ON_SELECT
                    this.onSelectEventCall($event, $files);
                }
            }
        }
        onFileDelete($event, file) {
            if (!file) {
                return;
            }
            const beforeDeleteVal = this.invokeEventCallback('beforedelete', { $event: file });
            if (beforeDeleteVal !== false) {
                this.dialogService.showAppConfirmDialog({
                    title: "Delete file",
                    message: "Are you sure you want to delete this file?",
                    oktext: "Ok",
                    canceltext: "Cancel",
                    onOk: () => {
                        if (this.deletedatasource) {
                            this.deletedatasource.setInput('file', file._response.fileName || file.name);
                            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();
                    },
                    onCancel: () => {
                        this.dialogService.closeAppConfirmDialog();
                    },
                    onOpen: () => {
                        $('.cancel-action').focus();
                    }
                });
            }
        }
        // Prevent default behavior (Prevent file from being opened)
        dragOverHandler($event) {
            $event.preventDefault();
            $event.stopPropagation();
        }
        // Get the file data if it exists and call the onFileSelect function
        onFileDrop($event) {
            $event.preventDefault();
            let listOfFiles = [];
            this.selectedFolders = [];
            const filesData = $event.dataTransfer.items;
            if (filesData.length > 0) {
                // Use DataTransferItemList interface to access the file(s)
                for (var i = 0; i < filesData.length; i++) {
                    // Get all the files and push them into an array
                    if (filesData[i].webkitGetAsEntry().isFile) {
                        listOfFiles.push(filesData[i].getAsFile());
                    }
                    // If a selected item is directory push the folder element into an array and display error message by adding to dom
                    else if (filesData[i].webkitGetAsEntry().isDirectory) {
                        this.selectedFolders.push(filesData[i].getAsFile());
                    }
                }
                this.onFileSelect($event, listOfFiles);
            }
        }
        dragOverCb(e) {
            e.preventDefault();
            $(this.nativeElement).find('#dropzone').addClass('highlight-drop-box');
        }
        dropCb() {
            $(this.nativeElement).find('#dropzone').removeClass('highlight-drop-box');
        }
        // this function triggers file select window, when clicked anywhere on the file upload widget in case of multi select
        triggerFileSelect() {
            this.$element.find('.file-input').trigger('click');
        }
        /**
         * Aborts a file upload request
         * @param $file, the file for which the request is to be aborted
         */
        abortFileUpload($file) {
            this.datasource.execute(i1.DataSource.Operation.CANCEL, $file);
        }
        isMimeType(file) {
            return (this.defaultAllowedExtensions.includes('image/*') && i1.isImageFile(file))
                || (this.defaultAllowedExtensions.includes('audio/*') && i1.isAudioFile(file))
                || (this.defaultAllowedExtensions.includes('video/*') && i1.isVideoFile(file));
        }
        /* Define the property change handler. This function will be triggered when there is a change in the widget property */
        onPropertyChange(key, nv, ov) {
            /*Monitoring changes for styles or properties and accordingly handling respective changes.*/
            switch (key) {
                case 'uploadpath':
                    // TODO Srinivas: why do we need uploadpath
                    this.changeServerUploadPath(nv);
                    break;
                case 'contenttype':
                    if (this.defaultAllowedExtensions.includes('*/*')) {
                        this.chooseFilter = nv.split(' ').join(',');
                    }
                    else {
                        this.chooseFilter = nv.split(' ').filter(item => this.defaultAllowedExtensions.includes(item) || this.isMimeType(item)).join(',');
                        if (lodashEs.isEmpty(this.chooseFilter)) {
                            this.chooseFilter = this.defaultAllowedExtensions;
                        }
                    }
                    break;
                case 'multiple':
                    this.formName = this.name + (this.multiple ? '-multiple-fileupload' : '-single-fileupload');
                    this.caption = this.getCaption(this.caption, this.multiple, this._isMobileType);
                    break;
                case 'fileuploadmessage':
                    this.fileUploadMessage = nv;
            }
            super.onPropertyChange(key, nv, ov);
        }
        constructor(inj, app, onSelectEvt, dialogService, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            this.app = app;
            this.onSelectEvt = onSelectEvt;
            this.dialogService = dialogService;
            this.selectedFiles = [];
            this.uploadedFiles = [];
            this.selectedFolders = [];
            this.fileTransfers = {};
            this.caption = 'Upload';
            this.formName = '';
            this.DEFAULT_CAPTIONS = {
                MULTIPLE_SELECT: 'Drop your files here.',
                SELECT: 'Select'
            };
            this.DEVICE_CONTENTTYPES = {
                IMAGE: 'image',
                VIDEO: 'video',
                AUDIO: 'audio',
                FILES: 'files'
            };
            this.FILESIZE_MB = 1048576;
            // parentPrefabScope = element.closest('.app-prefab').isolateScope(),
            this.CONSTANT_FILE_SERVICE = 'FileService';
            this.uploadData = {
                file: undefined,
                uploadPath: undefined
            };
            this.allowedFileUploadExtensions = i1.getWmProjectProperties().allowedFileUploadExtensions;
            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);
        }
        ngOnInit() {
            super.ngOnInit();
            // adding, dragover and drop on the document as when file is dragged on to the page highlight the dropzones and remove highlight on file drop
            document.addEventListener('dragover', this.dragOverCb.bind(this));
            document.addEventListener('drop', this.dropCb.bind(this));
            // adding mouseleave evnt to remove highlight when file is dropped outside the window
            document.addEventListener('mouseleave', this.dropCb.bind(this));
        }
        ngAfterViewInit() {
            i3.styler(this.nativeElement.querySelector('.app-button, .drop-box'), this);
        }
        ngOnDestroy() {
            document.removeEventListener('dragover', this.dragOverCb);
            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", "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();
            } if (rf & 2) {
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", !ctx._isMobileType && ctx.multiple);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", !ctx._isCordova && (!ctx.multiple || ctx._isMobileType));
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx._isCordova);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.uploadedFiles.length > 0);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.selectedFolders.length > 0);
            } }, dependencies: [i2__namespace.NgClass, i2__namespace.NgForOf, i2__namespace.NgIf, i2__namespace.NgStyle, i3__namespace.FileIconClassPipe, i3__namespace.FileSizePipe, i3__namespace.StateClassPipe], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileUploadComponent, [{
            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}\"\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']
                }] }, { 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: 27 }); })();

    const components = [
        FileUploadComponent
    ];
    class FileUploadModule {
        static { this.ɵfac = function FileUploadModule_Factory(t) { return new (t || FileUploadModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: FileUploadModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
                i3.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FileUploadModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        i2.CommonModule,
                        i3.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(FileUploadModule, { declarations: [FileUploadComponent], imports: [i2.CommonModule,
            i3.WmComponentsModule], exports: [FileUploadComponent] }); })();

    exports.FileUploadComponent = FileUploadComponent;
    exports.FileUploadModule = FileUploadModule;

}));
