@lenne.tech/ng-base 14.19.0 → 14.20.0
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/base-components/base-components.module.d.ts +23 -22
- package/base-components/components/upload-image/upload-image.component.d.ts +5 -0
- package/base-components/directives/stop-propagation.directive.d.ts +10 -0
- package/base-components/public-api.d.ts +1 -0
- package/esm2020/base-components/base-components.module.mjs +5 -1
- package/esm2020/base-components/components/upload-image/upload-image.component.mjs +34 -13
- package/esm2020/base-components/directives/stop-propagation.directive.mjs +23 -0
- package/esm2020/base-components/public-api.mjs +2 -1
- package/esm2020/public-api.mjs +3 -1
- package/esm2020/src/decorators/auto-unsubscribe.decorator.mjs +23 -0
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +57 -13
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base.mjs +24 -1
- package/fesm2015/lenne.tech-ng-base.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +57 -13
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base.mjs +24 -1
- package/fesm2020/lenne.tech-ng-base.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/src/decorators/auto-unsubscribe.decorator.d.ts +5 -0
|
@@ -665,6 +665,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
665
665
|
type: Output
|
|
666
666
|
}] } });
|
|
667
667
|
|
|
668
|
+
/**
|
|
669
|
+
* Stops propagation of click events
|
|
670
|
+
* Inspired by https://stackoverflow.com/a/41001184
|
|
671
|
+
*/
|
|
672
|
+
class StopPropagationDirective {
|
|
673
|
+
onClick(event) {
|
|
674
|
+
event.stopPropagation();
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
StopPropagationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
678
|
+
StopPropagationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: StopPropagationDirective, selector: "[baseStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
|
|
680
|
+
type: Directive,
|
|
681
|
+
args: [{
|
|
682
|
+
selector: '[baseStopPropagation]',
|
|
683
|
+
}]
|
|
684
|
+
}], propDecorators: { onClick: [{
|
|
685
|
+
type: HostListener,
|
|
686
|
+
args: ['click', ['$event']]
|
|
687
|
+
}] } });
|
|
688
|
+
|
|
668
689
|
class UploadImageComponent {
|
|
669
690
|
constructor(httpClient, authService, fileService, toastService) {
|
|
670
691
|
this.httpClient = httpClient;
|
|
@@ -743,7 +764,7 @@ class UploadImageComponent {
|
|
|
743
764
|
}, 3500);
|
|
744
765
|
return;
|
|
745
766
|
}
|
|
746
|
-
if (this.validExtensions.includes(file.type)) {
|
|
767
|
+
if (this.validExtensions.includes(file === null || file === void 0 ? void 0 : file.type)) {
|
|
747
768
|
const fileReader = new FileReader();
|
|
748
769
|
fileReader.onload = (result) => {
|
|
749
770
|
this.loading = true;
|
|
@@ -777,18 +798,17 @@ class UploadImageComponent {
|
|
|
777
798
|
upload() {
|
|
778
799
|
return __awaiter(this, void 0, void 0, function* () {
|
|
779
800
|
let result;
|
|
801
|
+
const fileData = { field: this.id, file: this.selectedFile, base64: yield this.getBase64(this.selectedFile) };
|
|
802
|
+
this.fileChanged.emit(fileData);
|
|
780
803
|
if (this.uploadDirectly) {
|
|
781
804
|
result = yield this.fileService.upload(this.url, this.uploadPath, this.selectedFile, this.compressOptions);
|
|
805
|
+
if (result === null || result === void 0 ? void 0 : result.id) {
|
|
806
|
+
this.control.setValue(result.id);
|
|
807
|
+
this.imageUploaded.emit(result.id);
|
|
808
|
+
}
|
|
782
809
|
}
|
|
783
810
|
else {
|
|
784
|
-
this.control.
|
|
785
|
-
this.fileChanged.emit({ field: this.id, file: this.selectedFile });
|
|
786
|
-
this.loading = false;
|
|
787
|
-
return;
|
|
788
|
-
}
|
|
789
|
-
if (result === null || result === void 0 ? void 0 : result.id) {
|
|
790
|
-
this.control.setValue(result.id);
|
|
791
|
-
this.imageUploaded.emit(result.id);
|
|
811
|
+
this.control.setValue(fileData.base64);
|
|
792
812
|
}
|
|
793
813
|
this.control.markAsTouched();
|
|
794
814
|
this.loading = false;
|
|
@@ -806,7 +826,7 @@ class UploadImageComponent {
|
|
|
806
826
|
this.fileUrl = null;
|
|
807
827
|
this.control.setValue('');
|
|
808
828
|
this.control.markAsTouched();
|
|
809
|
-
this.fileChanged.emit({ field: this.id, file: null });
|
|
829
|
+
this.fileChanged.emit({ field: this.id, file: null, base64: null });
|
|
810
830
|
return;
|
|
811
831
|
}
|
|
812
832
|
this.loading = true;
|
|
@@ -824,12 +844,33 @@ class UploadImageComponent {
|
|
|
824
844
|
}
|
|
825
845
|
});
|
|
826
846
|
}
|
|
847
|
+
/**
|
|
848
|
+
* Convert a file into a BASE64 encoded string
|
|
849
|
+
*/
|
|
850
|
+
getBase64(file) {
|
|
851
|
+
return new Promise((resolve, reject) => {
|
|
852
|
+
if (!file) {
|
|
853
|
+
return resolve(null);
|
|
854
|
+
}
|
|
855
|
+
const reader = new FileReader();
|
|
856
|
+
reader.readAsDataURL(file);
|
|
857
|
+
reader.onload = () => {
|
|
858
|
+
if (!reader.result) {
|
|
859
|
+
return reject(new Error('Conversion failed'));
|
|
860
|
+
}
|
|
861
|
+
resolve(reader.result.toString());
|
|
862
|
+
};
|
|
863
|
+
reader.onerror = (error) => {
|
|
864
|
+
reject(error);
|
|
865
|
+
};
|
|
866
|
+
});
|
|
867
|
+
}
|
|
827
868
|
}
|
|
828
869
|
UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
829
|
-
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\"
|
|
870
|
+
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n (click)=\"!loading && fileInput.click()\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n L\u00F6schen\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\"\n >{{ preButtonText }}\n <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n >\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
|
|
830
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UploadImageComponent, decorators: [{
|
|
831
872
|
type: Component,
|
|
832
|
-
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\"
|
|
873
|
+
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive, pointer: !loading }\"\n (click)=\"!loading && fileInput.click()\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n L\u00F6schen\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\"\n >{{ preButtonText }}\n <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n >\n <span class=\"support\" [innerText]=\"supportText\"></span>\n </ng-container>\n\n <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
|
|
833
874
|
}], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { id: [{
|
|
834
875
|
type: Input
|
|
835
876
|
}], name: [{
|
|
@@ -2272,6 +2313,7 @@ const elements = [
|
|
|
2272
2313
|
SortDirective,
|
|
2273
2314
|
BackButtonDirective,
|
|
2274
2315
|
ContextMenuDirective,
|
|
2316
|
+
StopPropagationDirective,
|
|
2275
2317
|
// Components
|
|
2276
2318
|
InputComponent,
|
|
2277
2319
|
SelectComponent,
|
|
@@ -2301,6 +2343,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
2301
2343
|
SortDirective,
|
|
2302
2344
|
BackButtonDirective,
|
|
2303
2345
|
ContextMenuDirective,
|
|
2346
|
+
StopPropagationDirective,
|
|
2304
2347
|
// Components
|
|
2305
2348
|
InputComponent,
|
|
2306
2349
|
SelectComponent,
|
|
@@ -2326,6 +2369,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
2326
2369
|
SortDirective,
|
|
2327
2370
|
BackButtonDirective,
|
|
2328
2371
|
ContextMenuDirective,
|
|
2372
|
+
StopPropagationDirective,
|
|
2329
2373
|
// Components
|
|
2330
2374
|
InputComponent,
|
|
2331
2375
|
SelectComponent,
|
|
@@ -2365,5 +2409,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
2365
2409
|
* Generated bundle index. Do not edit.
|
|
2366
2410
|
*/
|
|
2367
2411
|
|
|
2368
|
-
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
2412
|
+
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
2369
2413
|
//# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map
|