@sumaris-net/ngx-components 1.11.9 → 1.11.10

package/bundles/sumaris-net.ngx-components.umd.js

@@ -18119,9 +18119,12 @@
                         .pipe(operators.map(function (event) {
                         // Progress event
                         if ((event === null || event === void 0 ? void 0 : event.type) === i2$1.HttpEventType.UploadProgress || event.type === i2$1.HttpEventType.User) {
-                            var total = event.total || 1;
-                            var loaded = event.loaded || 0;
-                            file.progress = Math.min(1, loaded / total);
+                            if (isNotNil(event.loaded) && event.loaded >= 0) {
+                                file.progress = Math.min(1, event.loaded / (event.total || 1));
+                            }
+                            else {
+                                file.progress = -1; // Indeterminate progression
+                            }
                         }
                         // Response event
                         else if (event instanceof i2$1.HttpResponse || event instanceof FileResponse) {
@@ -18159,7 +18162,7 @@
     UploadFileComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-upload-file',
-                    template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large\" color=\"accent\">file_upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"file.deleting ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n",
+                    template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large\" color=\"accent\">file_upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n",
                     styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:1px dashed #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{-webkit-animation:shake 1s;animation:shake 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:1px dashed #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:grey!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}"]
                 },] }
     ];
@@ -29978,31 +29981,15 @@
         }
         UploadFileTestingPage.prototype.showPopover = function (event, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var modal, data, filenames;
+                var data, filenames;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.popoverController.create({
-                                component: UploadFilePopover,
-                                componentProps: Object.assign({ title: 'modalTitle', uploadFn: function (file) { return _this.uploadFile(file); }, deleteFn: function (file) { return _this.deleteFile(file); } }, opts),
-                                backdropDismiss: false,
-                                keyboardClose: false,
-                                event: event,
-                                translucent: true,
-                                cssClass: 'popover-large',
-                            })];
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, FilesUtils.showUploadPopover(this.popoverController, event, Object.assign({ uploadFn: function (file) { return _this.uploadFile(file); }, deleteFn: function (file) { return _this.deleteFile(file); } }, opts))];
                         case 1:
-                            modal = _b.sent();
-                            return [4 /*yield*/, modal.present()];
-                        case 2:
-                            _b.sent();
-                            return [4 /*yield*/, modal.onDidDismiss()];
-                        case 3:
-                            data = (_b.sent()).data;
-                            if (data) {
-                                filenames = data.map(function (file) { var _a; return (_a = file.response) === null || _a === void 0 ? void 0 : _a.body.finalName; });
-                                console.info('Popover result: ', filenames);
-                            }
+                            data = (_c.sent()).data;
+                            filenames = (data || []).map(function (file) { var _a, _b; return (_b = (_a = file.response) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.finalName; });
+                            console.info('Popover result: ', filenames);
                             return [2 /*return*/];
                     }
                 });
@@ -30021,7 +30008,8 @@
                 loaded += loadStep;
                 // Return progression
                 if (loaded < file.size) {
-                    return { type: i2$1.HttpEventType.UploadProgress, total: file.size, loaded: loaded };
+                    //return {type: HttpEventType.UploadProgress, total: file.size, loaded };
+                    return { type: i2$1.HttpEventType.UploadProgress, loaded: -1 };
                 }
                 // Stop the timer
                 setTimeout(function () { return $stop.next(); }, 100);
@@ -30031,13 +30019,13 @@
         };
         UploadFileTestingPage.prototype.deleteFile = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             console.info('[testing] Simulate remote deletion... (waiting 2s)');
                             return [4 /*yield*/, sleep(2000)];
                         case 1:
-                            _b.sent();
+                            _c.sent();
                             return [2 /*return*/, true];
                     }
                 });