@sumaris-net/ngx-components 2.8.1-beta4 → 2.8.1-beta6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/doc/changelog.md +2 -0
- package/esm2022/src/app/core/services/config/core.config.mjs +11 -2
- package/esm2022/src/app/shared/pipes/colors.pipe.mjs +4 -2
- package/esm2022/src/app/shared/pipes/property.pipes.mjs +4 -4
- package/esm2022/src/app/shared/upload-file/testing/upload-file.testing.mjs +5 -4
- package/esm2022/src/app/shared/upload-file/upload-file.component.mjs +7 -5
- package/fesm2022/sumaris-net.ngx-components.mjs +26 -12
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/core/services/config/core.config.d.ts +2 -0
- package/src/app/shared/pipes/property.pipes.d.ts +3 -3
- package/src/app/shared/upload-file/upload-file.component.d.ts +1 -0
- package/src/assets/manifest.json +1 -1
- package/src/theme/_ngx-components.table.scss +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, ViewChild, ANIMATION_MODULE_TYPE, inject, ChangeDetectorRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { firstValueFrom, shareReplay, tap, of, Subject, merge, timer, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, defer, timeout, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, switchMap as switchMap$1, delay } from 'rxjs';
|
|
4
|
-
import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
|
|
4
|
+
import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
6
6
|
import { CommonModule, DOCUMENT, Location } from '@angular/common';
|
|
7
7
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
@@ -4182,7 +4182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
4182
4182
|
type: Pipe,
|
|
4183
4183
|
args: [{ name: 'propertyGet' }]
|
|
4184
4184
|
}] });
|
|
4185
|
-
class
|
|
4185
|
+
class AbstractValueFormatPipe {
|
|
4186
4186
|
dateFormat;
|
|
4187
4187
|
translate;
|
|
4188
4188
|
_i18nYes;
|
|
@@ -4234,7 +4234,7 @@ class AbstractValuePipe {
|
|
|
4234
4234
|
}
|
|
4235
4235
|
}
|
|
4236
4236
|
}
|
|
4237
|
-
class PropertyFormatPipe extends
|
|
4237
|
+
class PropertyFormatPipe extends AbstractValueFormatPipe {
|
|
4238
4238
|
constructor(dateFormat, translate) {
|
|
4239
4239
|
super(dateFormat, translate);
|
|
4240
4240
|
}
|
|
@@ -4264,7 +4264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
4264
4264
|
type: Injectable,
|
|
4265
4265
|
args: [{ providedIn: 'root' }]
|
|
4266
4266
|
}], ctorParameters: () => [{ type: DateFormatService }, { type: i1$1.TranslateService }] });
|
|
4267
|
-
class ValueFormatPipe extends
|
|
4267
|
+
class ValueFormatPipe extends AbstractValueFormatPipe {
|
|
4268
4268
|
constructor(dateFormat, translate) {
|
|
4269
4269
|
super(dateFormat, translate);
|
|
4270
4270
|
}
|
|
@@ -4290,12 +4290,14 @@ class MatColorPipe {
|
|
|
4290
4290
|
if (!color)
|
|
4291
4291
|
return undefined;
|
|
4292
4292
|
switch (color) {
|
|
4293
|
+
// Redirect 'secondary' and 'tertiary' to primary (not exists in material theme)
|
|
4294
|
+
case 'secondary':
|
|
4293
4295
|
case 'tertiary':
|
|
4294
4296
|
return 'primary';
|
|
4295
4297
|
case 'warning':
|
|
4296
4298
|
return 'warn';
|
|
4297
4299
|
case 'medium':
|
|
4298
|
-
return undefined;
|
|
4300
|
+
return undefined; // Use default
|
|
4299
4301
|
default:
|
|
4300
4302
|
return color;
|
|
4301
4303
|
}
|
|
@@ -13704,7 +13706,16 @@ const CORE_CONFIG_OPTIONS = Object.freeze({
|
|
|
13704
13706
|
key: 'sumaris.theme.fieldBackgroundColor',
|
|
13705
13707
|
label: 'CONFIGURATION.OPTIONS.FORM_FIELD_BACKGROUND_COLOR',
|
|
13706
13708
|
type: 'color',
|
|
13707
|
-
|
|
13709
|
+
},
|
|
13710
|
+
FORM_FIELD_FOCUS_BACKGROUND_COLOR: {
|
|
13711
|
+
key: 'sumaris.theme.fieldFocusBackgroundColor',
|
|
13712
|
+
label: 'CONFIGURATION.OPTIONS.FORM_FIELD_FOCUS_BACKGROUND_COLOR',
|
|
13713
|
+
type: 'color',
|
|
13714
|
+
},
|
|
13715
|
+
FORM_FIELD_DISABLED_BACKGROUND_COLOR: {
|
|
13716
|
+
key: 'sumaris.theme.fieldDisabledBackgroundColor',
|
|
13717
|
+
label: 'CONFIGURATION.OPTIONS.FORM_FIELD_DISABLED_BACKGROUND_COLOR',
|
|
13718
|
+
type: 'color',
|
|
13708
13719
|
},
|
|
13709
13720
|
ANDROID_INSTALL_URL: {
|
|
13710
13721
|
key: 'sumaris.android.install.url',
|
|
@@ -13818,6 +13829,7 @@ class UploadFileComponent {
|
|
|
13818
13829
|
deleteFn;
|
|
13819
13830
|
maxParallelUpload;
|
|
13820
13831
|
files = [];
|
|
13832
|
+
uploading = false;
|
|
13821
13833
|
get processingFiles() {
|
|
13822
13834
|
return this.files.filter((f) => !f.deleting && isNotNil(f.progress) && f.progress < 1);
|
|
13823
13835
|
}
|
|
@@ -13909,6 +13921,7 @@ class UploadFileComponent {
|
|
|
13909
13921
|
* Execute upload
|
|
13910
13922
|
*/
|
|
13911
13923
|
async uploadFiles(files) {
|
|
13924
|
+
this.uploading = true;
|
|
13912
13925
|
if (!files) {
|
|
13913
13926
|
console.info('[upload-file] Uploading all files...');
|
|
13914
13927
|
files = this.files;
|
|
@@ -13975,18 +13988,18 @@ class UploadFileComponent {
|
|
|
13975
13988
|
})))));
|
|
13976
13989
|
// Wait jobs to finish
|
|
13977
13990
|
return forkJoin(jobs)
|
|
13978
|
-
.pipe(tap$1((_) => $changes.complete()))
|
|
13991
|
+
.pipe(tap$1((_) => $changes.complete()), finalize(() => (this.uploading = false)))
|
|
13979
13992
|
.toPromise();
|
|
13980
13993
|
}
|
|
13981
13994
|
waitIdle(opts) {
|
|
13982
13995
|
return waitFor(() => this.processingFilesCount === 0, opts);
|
|
13983
13996
|
}
|
|
13984
13997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UploadFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
13985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: UploadFileComponent, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!uniqueFile || files.length === 0\" class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n <input\n type=\"file\"\n #fileDropRef\n id=\"fileDropRef\"\n [multiple]=\"!uniqueFile\"\n [accept]=\"fileExtension\"\n (change)=\"fileBrowseHandler($any($event.target).files)\"\n />\n <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">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 <ion-list>\n @for (file of files; track file; let i = $index) {\n <ion-item>\n <mat-icon slot=\"start\">description</mat-icon>\n <div class=\"single-file\">\n <ion-label>\n <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n {{ file.name }}\n </h4>\n <p>\n {{ file.size | fileSize }}\n </p>\n </ion-label>\n <ion-progress-bar\n *ngIf=\"uploading && !file.error\"\n [value]=\"file.progress || 0\"\n [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n ></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 slot=\"end\" (click)=\"deleteFile(i)\">\n <mat-icon>clear</mat-icon>\n </button>\n <!-- delete file (remotely - after importation) -->\n <button\n *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\"\n mat-icon-button\n slot=\"end\"\n (click)=\"deleteFile(i)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n </ion-item>\n }\n </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #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{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
|
|
13986
13999
|
}
|
|
13987
14000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UploadFileComponent, decorators: [{
|
|
13988
14001
|
type: Component,
|
|
13989
|
-
args: [{ selector: 'app-upload-file', template: "<div *ngIf=\"!uniqueFile || files.length === 0\" class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n <input\n type=\"file\"\n #fileDropRef\n id=\"fileDropRef\"\n [multiple]=\"!uniqueFile\"\n [accept]=\"fileExtension\"\n (change)=\"fileBrowseHandler($any($event.target).files)\"\n />\n <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">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 <
|
|
14002
|
+
args: [{ selector: 'app-upload-file', template: "<div *ngIf=\"!uniqueFile || files.length === 0\" class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n <input\n type=\"file\"\n #fileDropRef\n id=\"fileDropRef\"\n [multiple]=\"!uniqueFile\"\n [accept]=\"fileExtension\"\n (change)=\"fileBrowseHandler($any($event.target).files)\"\n />\n <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">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 <ion-list>\n @for (file of files; track file; let i = $index) {\n <ion-item>\n <mat-icon slot=\"start\">description</mat-icon>\n <div class=\"single-file\">\n <ion-label>\n <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n {{ file.name }}\n </h4>\n <p>\n {{ file.size | fileSize }}\n </p>\n </ion-label>\n <ion-progress-bar\n *ngIf=\"uploading && !file.error\"\n [value]=\"file.progress || 0\"\n [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n ></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 slot=\"end\" (click)=\"deleteFile(i)\">\n <mat-icon>clear</mat-icon>\n </button>\n <!-- delete file (remotely - after importation) -->\n <button\n *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\"\n mat-icon-button\n slot=\"end\"\n (click)=\"deleteFile(i)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n </ion-item>\n }\n </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #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{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"] }]
|
|
13990
14003
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { fileDropEl: [{
|
|
13991
14004
|
type: ViewChild,
|
|
13992
14005
|
args: ['fileDropRef', { static: false }]
|
|
@@ -39867,14 +39880,15 @@ class UploadFileTestingPage {
|
|
|
39867
39880
|
const loadStep = file.size / 10;
|
|
39868
39881
|
let loaded = 0;
|
|
39869
39882
|
return timer(0, 250).pipe(takeUntil($stop), map(() => {
|
|
39883
|
+
// pause in middle
|
|
39884
|
+
// if (loaded > 0) return { type: HttpEventType.UploadProgress, total: file.size, loaded };
|
|
39870
39885
|
loaded += loadStep;
|
|
39871
39886
|
// Return progression
|
|
39872
39887
|
if (loaded < file.size) {
|
|
39873
|
-
|
|
39874
|
-
return { type: HttpEventType.UploadProgress, loaded: -1 };
|
|
39888
|
+
return { type: HttpEventType.UploadProgress, total: file.size, loaded };
|
|
39875
39889
|
}
|
|
39876
39890
|
// Stop the timer
|
|
39877
|
-
setTimeout(() => $stop.next(),
|
|
39891
|
+
setTimeout(() => $stop.next(), 1000);
|
|
39878
39892
|
// Return final response
|
|
39879
39893
|
return new HttpResponse({ body: { finalName: file.name } });
|
|
39880
39894
|
}));
|