mmhglobal-dynamicform 1.1.29 → 1.1.30

package/README.md

@@ -3,6 +3,11 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog 
+`1.30`<br/>
+[zupload] - support Select/Remove/Change Event. <br/>
+[zupload] - added SelectFileOnly attribute handling, to allow select file without upload. <br/>
+[zupload] - added selected file append to group scope (type+value as name). <br/>
+
 `1.1.29`<br/>
 [zgrid] - Incelledit support ztime format. <br/>
 [zgrid] - cleaned the code and the way data been loaded. <br/>

package/bundles/mmhglobal-dynamicform.umd.js

@@ -10620,7 +10620,6 @@
         form: [{ type: i0.Input }]
     };
 
-    /********** Angular **********/
     var MyFileInfo = /** @class */ (function () {
         function MyFileInfo() {
         }
@@ -10662,6 +10661,7 @@
             this.imagePreviews = [];
             this.uid = [];
             this.showFileList = true;
+            this.fileList = [];
             this.restrictions = {
                 allowedExtensions: [
                     "jpg",
@@ -10838,49 +10838,113 @@
         };
         ZuploadComponent.prototype.onRemove = function (e) {
             var _this = this;
-            var myFile = e.files[0];
-            // console.log('remove done: ', e);
-            e.data = {
-                id: myFile.myUid,
-            };
-            e.headers = e.headers.append("Authorization", "Bearer " + this.authService.e1AccessToken);
-            if (this.data.EnableImagePreview) {
-                e.files.forEach(function (file) {
-                    _this.imagePreviews = _this.imagePreviews.filter(function (f) { return f.uid !== file.uid; });
+            // remove file from component memory
+            var index = this.fileList.findIndex(function (item) { return item.uid === e.files[0].uid; });
+            if (index >= 0) {
+                this.fileList.splice(index, 1);
+                this.group['zupload_' + this.data.Value] = this.fileList;
+            }
+            if (this.data['FileRemovedEvent']) {
+                this.group.subject.next({
+                    type: "zupload-fileRemovedEvent",
+                    target: this.data['FileRemovedEvent'],
+                    data: e
+                });
+            }
+            else {
+                var myFile = e.files[0];
+                // console.log('remove done: ', e);
+                e.data = {
+                    id: myFile.myUid,
+                };
+                e.headers = e.headers.append("Authorization", "Bearer " + this.authService.e1AccessToken);
+                if (this.data.EnableImagePreview) {
+                    e.files.forEach(function (file) {
+                        _this.imagePreviews = _this.imagePreviews.filter(function (f) { return f.uid !== file.uid; });
+                    });
+                }
+            }
+        };
+        ZuploadComponent.prototype.onChange = function (file) {
+            if (this.data['FileChangedEvent']) {
+                this.group.subject.next({
+                    type: "zupload-fileChangedEvent",
+                    target: this.data['FileChangedEvent'],
+                    data: file
                 });
             }
         };
         ZuploadComponent.prototype.selectEventHandler = function (e) {
             var _this = this;
             var me = this;
-            // Only workable for Auto Upload = false
-            if (!this.data.AutoUpload) {
-                // Compression for image file
-                var imageCompressionEnabled = this.data.Compression ? true : false;
-                //Check if Image Compression is enabled.
-                if (imageCompressionEnabled === true) {
-                    e.files.forEach(function (file) {
-                        // Compress only if it is an image file
-                        if (file.rawFile && file.rawFile.type.includes("image")) {
-                            if (!file.validationErrors) {
-                                var imgConfig = _this.compressionConfigHandler(_this.data.Compression);
-                                if (file.size > imgConfig.FileSizeMinSizeByte) {
-                                    me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
-                                        .pipe(operators.take(1))
-                                        .subscribe(function (compressFile) {
-                                        _this.ngZone.run(function () {
-                                            file.rawFile = compressFile;
-                                            file.size = compressFile.size;
-                                            var reader = new FileReader();
-                                            reader.readAsDataURL(file.rawFile);
+            if (this.data['FileSelectedEvent']) {
+                // append all file to component memory
+                e.files.forEach(function (file) { return __awaiter(_this, void 0, void 0, function () {
+                    var reader;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!file.rawFile) return [3 /*break*/, 2];
+                                reader = new FileReader();
+                                reader.onload = function (ev) {
+                                    // clone the data and also add the readed file to the object
+                                    var fileData = Object.assign({}, file);
+                                    fileData['file'] = ev.target["result"];
+                                    // push to component fileList
+                                    me.fileList.push(fileData);
+                                    me.group['zupload_' + me.data.Value] = me.fileList;
+                                    if (me.data['FileSelectedEvent']) {
+                                        // call the project event
+                                        me.group.subject.next({
+                                            type: "zupload-fileSelectedEvent",
+                                            target: me.data['FileSelectedEvent'],
+                                            data: me.fileList
                                         });
-                                        console.log("Compressed file size: " + (file.rawFile.size / 1024).toFixed(2) + "KB");
-                                    });
-                                } // file size check
-                            } // validationErrors check
-                        } // file type check
-                    }); // loop each file
-                } // imagecompression check
+                                    }
+                                };
+                                return [4 /*yield*/, reader.readAsDataURL(file.rawFile)];
+                            case 1:
+                                _a.sent();
+                                _a.label = 2;
+                            case 2: return [2 /*return*/];
+                        }
+                    });
+                }); });
+            }
+            else {
+                // Only workable for Auto Upload = false
+                if (!this.data.AutoUpload) {
+                    // Compression for image file
+                    var imageCompressionEnabled = this.data.Compression ? true : false;
+                    //Check if Image Compression is enabled.
+                    if (imageCompressionEnabled === true) {
+                        e.files.forEach(function (file) {
+                            // Compress only if it is an image file
+                            if (file.rawFile && file.rawFile.type.includes("image")) {
+                                if (!file.validationErrors) {
+                                    var imgConfig = _this.compressionConfigHandler(_this.data.Compression);
+                                    if (file.size > imgConfig.FileSizeMinSizeByte) {
+                                        me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
+                                            .pipe(operators.take(1))
+                                            .subscribe(function (compressFile) {
+                                            _this.ngZone.run(function () {
+                                                file.rawFile = compressFile;
+                                                file.size = compressFile.size;
+                                                // clone the data and also add the readed file to the object
+                                                var fileData = Object.assign({}, file);
+                                                // push to component fileList
+                                                me.fileList.push(fileData);
+                                                var reader = new FileReader();
+                                                reader.readAsDataURL(file.rawFile);
+                                            });
+                                            console.log("Compressed file size: " + (file.rawFile.size / 1024).toFixed(2) + "KB");
+                                        });
+                                    } // file size check
+                                } // validationErrors check
+                            } // file type check
+                        }); // loop each file
+                    } // imagecompression check
+                }
             }
         };
         return ZuploadComponent;
@@ -10888,7 +10952,7 @@
     ZuploadComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zupload",
-                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\"\r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n  ",
+                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload *ngIf=\"!data.SelectFileOnly\"\r\n                    [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\"\r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n\r\n      <kendo-fileselect *ngIf=\"data.SelectFileOnly\"\r\n                        (select)=\"selectEventHandler($event)\"\r\n                        (remove)=\"onRemove($event)\"\r\n                        (valueChange)=\"onChange($event)\"\r\n                        [restrictions]=\"restrictions\" >\r\n      </kendo-fileselect>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];