@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

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

@@ -0,0 +1,483 @@
+(function (global, factory) {
+    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);
+        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 i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps = () => {
+        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: 'wi wi-file-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 }]
+        ]));
+        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 DEFAULT_CLS = 'app-fileupload';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-fileupload',
+        hostClass: DEFAULT_CLS
+    };
+    class FileUploadComponent extends base.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();
+            // MEMORY LEAK FIX: Use stored bound function reference
+            // when the filepicker is not there on the window, remove the dropzone highlight
+            window.addEventListener('focus', this.boundDisableDropZone);
+        }
+        disableDropZone() {
+            this.highlightDropArea = false;
+            // MEMORY LEAK FIX: Remove using stored bound function reference
+            window.removeEventListener('focus', this.boundDisableDropZone);
+        }
+        /*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();
+            // MEMORY LEAK FIX: Store bound function references for proper removal
+            this.boundDragOverCb = this.dragOverCb.bind(this);
+            this.boundDropCb = this.dropCb.bind(this);
+            this.boundDisableDropZone = this.disableDropZone.bind(this);
+            // 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.boundDragOverCb);
+            document.addEventListener('drop', this.boundDropCb);
+            // adding mouseleave evnt to remove highlight when file is dropped outside the window
+            document.addEventListener('mouseleave', this.boundDropCb);
+        }
+        ngAfterViewInit() {
+            base.styler(this.nativeElement.querySelector('.app-button, .drop-box'), this);
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Remove using stored bound function references
+            if (this.boundDragOverCb) {
+                document.removeEventListener('dragover', this.boundDragOverCb);
+                this.boundDragOverCb = null;
+            }
+            if (this.boundDropCb) {
+                document.removeEventListener('drop', this.boundDropCb);
+                document.removeEventListener('mouseleave', this.boundDropCb);
+                this.boundDropCb = null;
+            }
+            if (this.boundDisableDropZone) {
+                window.removeEventListener('focus', this.boundDisableDropZone);
+                this.boundDisableDropZone = null;
+            }
+            super.ngOnDestroy();
+            const subscriptions = [this.uploadProgressSubscription, this.deleteProgressSubscription];
+            subscriptions.forEach(subscription => {
+                if (subscription) {
+                    subscription.unsubscribe();
+                }
+            });
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", 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: "20.3.19", 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 || 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=\"{{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" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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 || 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=\"{{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;
+
+}));