@stemy/ngx-utils 19.1.3 → 19.2.0

package/fesm2022/stemy-ngx-utils.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, PLATFORM_ID, Injectable, Inject, Optional, Injector, Ev
 import 'reflect-metadata';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer } from '@angular/router';
-import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, TimeoutError, combineLatest } from 'rxjs';
+import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, TimeoutError, combineLatest, lastValueFrom } from 'rxjs';
 import { skipWhile, debounceTime, distinctUntilChanged, map, filter, mergeMap, timeout } from 'rxjs/operators';
 import * as i1$3 from '@angular/common';
 import { isPlatformBrowser, isPlatformServer, DOCUMENT, APP_BASE_HREF, CommonModule } from '@angular/common';
@@ -505,7 +505,7 @@ class AjaxRequestHandler {
         if (typeof XMLHttpRequest !== "undefined" && !AjaxRequestHandler.isOverridden) {
             AjaxRequestHandler.isOverridden = true;
             const originalOpen = XMLHttpRequest.prototype.open;
-            XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
+            XMLHttpRequest.prototype.open = function (method, url) {
                 originalOpen.apply(this, arguments);
                 window.dispatchEvent(new CustomEvent("ajaxRequest", {
                     detail: {
@@ -1589,6 +1589,54 @@ class FileUtils {
         }));
         return FileUtils.readFileAsDataURL(blob);
     }
+    static getVideoCover(file, seekTo = null, quality = .75) {
+        return new Promise((resolve, reject) => {
+            // load the file to a video player
+            const videoPlayer = document.createElement("video");
+            videoPlayer.setAttribute("src", URL.createObjectURL(file));
+            videoPlayer.load();
+            videoPlayer.addEventListener("error", (ex) => {
+                reject("error when loading video file");
+            });
+            // load metadata of the video to get video duration and dimensions
+            videoPlayer.addEventListener("loadedmetadata", () => {
+                if (isNaN(seekTo)) {
+                    seekTo = videoPlayer.duration / 2;
+                }
+                // seek to user defined timestamp (in seconds) if possible
+                if (videoPlayer.duration < seekTo) {
+                    reject("video is too short.");
+                    return;
+                }
+                // delay seeking or else "seeked" event won"t fire on Safari
+                setTimeout(() => {
+                    videoPlayer.currentTime = seekTo;
+                }, 200);
+                // extract video thumbnail once seeking is complete
+                videoPlayer.addEventListener("seeked", () => {
+                    // define a canvas to have the same dimension as the video
+                    const canvas = document.createElement("canvas");
+                    canvas.width = videoPlayer.videoWidth;
+                    canvas.height = videoPlayer.videoHeight;
+                    // draw the video frame to canvas
+                    const ctx = canvas.getContext("2d");
+                    ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
+                    // return the canvas image as a blob
+                    resolve(ctx.canvas.toDataURL("image/jpeg", quality));
+                });
+            });
+        });
+    }
+    static async getFilePreview(file) {
+        const type = file.type.toLowerCase();
+        if (type.startsWith("image/")) {
+            return URL.createObjectURL(file);
+        }
+        if (type.startsWith("video/")) {
+            return FileUtils.getVideoCover(file);
+        }
+        return null;
+    }
     static readFile(callback) {
         return new Promise(
         // @dynamic
@@ -3809,7 +3857,6 @@ class DragDropHandler {
             this.dropEffect = ev.dataTransfer.dropEffect;
         };
         this.onDragEnter = ev => {
-            ev.preventDefault();
             if (this.first) {
                 this.second = true;
             }
@@ -3837,7 +3884,6 @@ class DragDropHandler {
             }
         };
         this.onDrop = ev => {
-            ev.preventDefault();
             this.first = false;
             this.second = false;
             this.fireEvent("drop", ev);
@@ -5389,12 +5435,14 @@ class DropListComponent {
         this.context = [];
         this.prepareItem = () => { };
         this.checkFn = () => false;
+        this.dropFn = () => false;
         this.valueMap = {};
         this.remove = index => {
             this.changeValue(this.value.filter((_, i) => i !== index));
         };
     }
     onDragEnter(ev, elem, data) {
+        ev.preventDefault();
         if (!elem || !ObjectUtils.isFunction(this.checkFn) || !this.checkFn({ ev, elem, data })) {
             ev.dataTransfer.effectAllowed = "none";
             ev.dataTransfer.dropEffect = "none";
@@ -5415,11 +5463,15 @@ class DropListComponent {
         if (!elem) {
             return;
         }
-        const source = JSON.parse(ev.dataTransfer.getData("itemData"));
+        const data = JSON.parse(ev.dataTransfer.getData("itemData") || "{}");
         elem.classList.remove("drop-allowed");
         checkTransitions(elem, () => {
             checkTransitions(elem, () => {
-                const id = source[this.idField] || source.id;
+                if (elem && ObjectUtils.isFunction(this.dropFn) && this.dropFn({ ev, elem, data })) {
+                    // If drop is handled from outside function
+                    return;
+                }
+                const id = data[this.idField] || data.id;
                 this.changeValue(this.value.concat([id]));
             });
             elem.classList.remove("dropped");
@@ -5460,7 +5512,7 @@ class DropListComponent {
         this.onTouched?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DropListComponent, isStandalone: false, selector: "drop-list", inputs: { disabled: "disabled", unique: "unique", idField: "idField", labelField: "labelField", value: "value", context: "context", prepareItem: "prepareItem", checkFn: "checkFn" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DropListComponent, isStandalone: false, selector: "drop-list", inputs: { disabled: "disabled", unique: "unique", idField: "idField", labelField: "labelField", value: "value", context: "context", prepareItem: "prepareItem", checkFn: "checkFn", dropFn: "dropFn" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropListComponent),
                 multi: true,
@@ -5489,6 +5541,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }], checkFn: [{
                 type: Input
+            }], dropFn: [{
+                type: Input
             }], itemTemplate: [{
                 type: ContentChild,
                 args: ["itemTemplate"]
@@ -5670,6 +5724,7 @@ class DynamicTableComponent {
         ev.dataTransfer.setData(item.id, "id");
     }
     onDragEnter(ev, elem, item) {
+        ev.preventDefault();
         if (!elem || !item || !ObjectUtils.isFunction(this.dragEnterFn) || !this.dragEnterFn({ ev, elem, item })) {
             ev.dataTransfer.effectAllowed = "none";
             ev.dataTransfer.dropEffect = "none";
@@ -5895,6 +5950,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ["defaultItemTemplate"]
             }] } });
 
+class UploadComponent {
+    get http() {
+        return this.api.client;
+    }
+    constructor(cdr, api, toaster) {
+        this.cdr = cdr;
+        this.api = api;
+        this.toaster = toaster;
+        this.value = null;
+        this.disabled = false;
+        this.fileImageCache = [];
+        this.buttonText = "button.select-files";
+        this.onUploaded = new EventEmitter();
+        this.onChange = () => {
+        };
+        this.onTouched = () => {
+        };
+    }
+    onDragEnter(ev) {
+        const types = Array.from(ev.dataTransfer.items || [])
+            .filter(t => t.kind == "file")
+            .map(t => t.type.toLowerCase());
+        types.push(...Array.from(ev.dataTransfer.files || []).map(f => f.type.toLowerCase()));
+        if (!types.some(type => ArrayUtils.has(this.acceptTypes, type))) {
+            ev.preventDefault();
+            return;
+        }
+        ev.dataTransfer.effectAllowed = "copy";
+        ev.dataTransfer.dropEffect = "copy";
+        this.dropAllowed = true;
+    }
+    onDrop() {
+        this.dropAllowed = false;
+    }
+    ngOnChanges() {
+        this.accept = this.accept || "";
+        this.acceptAttr = ObjectUtils.isString(this.accept) ? this.accept : this.accept.join(",");
+        this.acceptTypes = ObjectUtils.isString(this.accept) && this.accept.length > 0
+            ? this.accept.toLowerCase().split(",")
+            : (ObjectUtils.isArray(this.accept) ? this.accept : []);
+        this.isImage = /(png|jpg|jpeg|webp|gif)/gi.test(this.acceptAttr);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+        this.onChange(this.value);
+        this.onTouched(this.value);
+    }
+    setDisabledState(val) {
+        this.disabled = val === true;
+        this.cdr.markForCheck();
+    }
+    onInputClick(ev) {
+        const top = document.elementFromPoint(ev.clientX, ev.clientY);
+        if (ev.target !== top && !this.processing)
+            return;
+        ev.preventDefault();
+    }
+    onInputChange(ev) {
+        const input = ev.currentTarget;
+        if (this.processing) {
+            input.value = "";
+            return;
+        }
+        const length = input.files.length;
+        if (length == 0) {
+            this.writeValue(this.multiple ? [] : null);
+            return;
+        }
+        const files = [];
+        for (let i = 0; i < length; i++) {
+            const file = input.files.item(i);
+            if (this.acceptTypes.length == 0) {
+                files.push(file);
+                continue;
+            }
+            const type = file.type.toLowerCase();
+            const ext = FileUtils.getExtension(file);
+            if (!ArrayUtils.has(this.acceptTypes, type, ext))
+                continue;
+            files.push(file);
+        }
+        if (files.length == 0) {
+            this.toaster.error("message.invalid-files.error");
+            return;
+        }
+        this.processFiles(this.multiple ? files : files.slice(0, 1)).then(results => {
+            const ids = results.map(t => t._id || t.id);
+            this.writeValue(this.multiple ? ids : (ids[0] || null));
+            this.onUploaded.emit(results);
+        });
+        input.value = "";
+    }
+    delete(index) {
+        if (this.multiple) {
+            const current = Array.from(this.value || []);
+            current.splice(index, 1);
+            this.writeValue(current);
+        }
+        this.writeValue(null);
+    }
+    getUrl(image) {
+        if (ObjectUtils.isBlob(image)) {
+            let cache = this.fileImageCache.find(t => t.file == image);
+            if (!cache) {
+                cache = { file: image, url: URL.createObjectURL(image) };
+                this.fileImageCache.push(cache);
+            }
+            return cache.url;
+        }
+        const url = !image ? null : image.imageUrl || image;
+        if (!ObjectUtils.isString(url))
+            return null;
+        if (url.startsWith("data:"))
+            return url;
+        const baseUrl = this.baseUrl;
+        const images = this.isImage ? `image/` : ``;
+        if (!baseUrl) {
+            return `${images}${url}`;
+        }
+        return `${baseUrl}/${images}${url}`;
+    }
+    async processFiles(files) {
+        if (this.processing)
+            return null;
+        const headers = this.http.makeHeaders();
+        const makeUpload = ObjectUtils.isFunction(this.makeUpload) ? this.makeUpload : f => {
+            const form = new FormData();
+            form.append("file", f);
+            return form;
+        };
+        const preProcess = ObjectUtils.isFunction(this.preProcess) ? this.preProcess : () => {
+            return false;
+        };
+        this.processing = files.filter(f => !preProcess(f)).map(file => {
+            const process = {
+                file,
+                progress: 0
+            };
+            process.promise = FileUtils.getFilePreview(file).then(preview => {
+                process.preview = `url('${preview}')`;
+                this.cdr.detectChanges();
+            });
+            return process;
+        });
+        const baseUrl = this.baseUrl || this.api.url("assets");
+        const requests = this.processing.map(async (p) => {
+            await p.promise;
+            const request = this.http.post(baseUrl, makeUpload(p.file), {
+                headers, observe: "events", reportProgress: true
+            });
+            request.subscribe(value => {
+                if (value.type === HttpEventType.UploadProgress) {
+                    p.progress = Math.round(value.loaded / value.total * 100);
+                    this.cdr.detectChanges();
+                }
+            });
+            return lastValueFrom(request)
+                .then((res) => {
+                const body = res.body;
+                if (!ObjectUtils.isObject(body)) {
+                    return { id: body };
+                }
+                return body;
+            }, (e) => {
+                this.toaster.error(e.error?.message || e.message || `Can"t upload file: ${p.file.name}`);
+                return null;
+            });
+        });
+        const results = await Promise.all(requests);
+        this.processing = null;
+        this.cdr.detectChanges();
+        return results.filter(r => r !== null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UploadComponent),
+                multi: true,
+            }], queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["buttonTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultBtn let-loading=\"loading\">\r\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n        {{ buttonText | translate }}\r\n    </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n        <input type=\"file\"\r\n               #input\r\n               [multiple]=\"multiple\"\r\n               [accept]=\"acceptAttr\"\r\n               (dragenter)=\"onDragEnter($event)\"\r\n               (dragleave)=\"onDrop()\"\r\n               (drop)=\"onDrop()\"\r\n               (click)=\"onInputClick($event)\"\r\n               (blur)=\"onTouched($event)\"\r\n               (change)=\"onInputChange($event)\"/>\r\n        <div class=\"process-container\">\r\n            <div class=\"upload-process\"\r\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n                 *ngFor=\"let proc of processing\">\r\n                <div class=\"upload-progress\">\r\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-container\" (click)=\"input.click()\">\r\n            <ng-container [ngTemplateOutlet]=\"buttonTemplate || defaultBtn\"\r\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <ng-template #defaultTemplate>\r\n        <ul class=\"files\" *ngIf=\"!multiple\">\r\n            <li class=\"file\" *ngIf=\"value\">\r\n                <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n                    <i class=\"fas fa-download\"></i>\r\n                </a>\r\n                <a class=\"btn btn-danger btn-delete\" (click)=\"delete()\">\r\n                    <mat-icon>delete</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"files\" *ngIf=\"multiple\">\r\n            <li class=\"file\" *ngFor=\"let file of value; let i = index\">\r\n                <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + i\">\r\n                    <i class=\"fas fa-download\"></i>\r\n                </a>\r\n                <a class=\"btn btn-danger btn-delete\" (click)=\"delete(i)\">x</a>\r\n            </li>\r\n        </ul>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"isImage; else defaultTemplate\">\r\n        <ul class=\"images\" *ngIf=\"!multiple\">\r\n            <li class=\"image\" *ngIf=\"value\">\r\n                <img alt=\"file image\" [src]=\"getUrl(value) | safe: 'url'\"/>\r\n                <a mat-mini-fab (click)=\"delete()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"images\" *ngIf=\"multiple\">\r\n            <li class=\"image\" *ngFor=\"let image of value; let i = index\">\r\n                <img alt=\"file image\" [src]=\"getUrl(image) | safe: 'url'\"/>\r\n                <a mat-mini-fab (click)=\"delete(i)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white))}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:0 10px 10px}.upload .upload-input.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .process-container{min-height:120px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-process{margin-top:10px;width:120px;height:120px;background:#00000080 center center no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .images,.upload .files{list-style-type:none;margin:10px 0;padding:0;display:flex;gap:5px}.upload .images li,.upload .files li{position:relative}.upload .images li a,.upload .files li a{position:absolute;right:8px;top:8px}.upload .images img,.upload .files img{max-width:100%;max-height:200px;margin:2px;border-radius:5px}.upload .btn-select{display:inline-block;position:relative;cursor:pointer}.upload .btn-select button{display:inline-block;position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "upload", encapsulation: ViewEncapsulation.None, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UploadComponent),
+                            multi: true,
+                        }], template: "<ng-template #defaultBtn let-loading=\"loading\">\r\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n        {{ buttonText | translate }}\r\n    </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n        <input type=\"file\"\r\n               #input\r\n               [multiple]=\"multiple\"\r\n               [accept]=\"acceptAttr\"\r\n               (dragenter)=\"onDragEnter($event)\"\r\n               (dragleave)=\"onDrop()\"\r\n               (drop)=\"onDrop()\"\r\n               (click)=\"onInputClick($event)\"\r\n               (blur)=\"onTouched($event)\"\r\n               (change)=\"onInputChange($event)\"/>\r\n        <div class=\"process-container\">\r\n            <div class=\"upload-process\"\r\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n                 *ngFor=\"let proc of processing\">\r\n                <div class=\"upload-progress\">\r\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-container\" (click)=\"input.click()\">\r\n            <ng-container [ngTemplateOutlet]=\"buttonTemplate || defaultBtn\"\r\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <ng-template #defaultTemplate>\r\n        <ul class=\"files\" *ngIf=\"!multiple\">\r\n            <li class=\"file\" *ngIf=\"value\">\r\n                <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n                    <i class=\"fas fa-download\"></i>\r\n                </a>\r\n                <a class=\"btn btn-danger btn-delete\" (click)=\"delete()\">\r\n                    <mat-icon>delete</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"files\" *ngIf=\"multiple\">\r\n            <li class=\"file\" *ngFor=\"let file of value; let i = index\">\r\n                <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + i\">\r\n                    <i class=\"fas fa-download\"></i>\r\n                </a>\r\n                <a class=\"btn btn-danger btn-delete\" (click)=\"delete(i)\">x</a>\r\n            </li>\r\n        </ul>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"isImage; else defaultTemplate\">\r\n        <ul class=\"images\" *ngIf=\"!multiple\">\r\n            <li class=\"image\" *ngIf=\"value\">\r\n                <img alt=\"file image\" [src]=\"getUrl(value) | safe: 'url'\"/>\r\n                <a mat-mini-fab (click)=\"delete()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"images\" *ngIf=\"multiple\">\r\n            <li class=\"image\" *ngFor=\"let image of value; let i = index\">\r\n                <img alt=\"file image\" [src]=\"getUrl(image) | safe: 'url'\"/>\r\n                <a mat-mini-fab (click)=\"delete(i)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white))}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:0 10px 10px}.upload .upload-input.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .process-container{min-height:120px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-process{margin-top:10px;width:120px;height:120px;background:#00000080 center center no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .images,.upload .files{list-style-type:none;margin:10px 0;padding:0;display:flex;gap:5px}.upload .images li,.upload .files li{position:relative}.upload .images li a,.upload .files li a{position:absolute;right:8px;top:8px}.upload .images img,.upload .files img{max-width:100%;max-height:200px;margin:2px;border-radius:5px}.upload .btn-select{display:inline-block;position:relative;cursor:pointer}.upload .btn-select button{display:inline-block;position:relative;z-index:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOASTER_SERVICE]
+                }] }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], makeUpload: [{
+                type: Input
+            }], preProcess: [{
+                type: Input
+            }], onUploaded: [{
+                type: Output
+            }], buttonTemplate: [{
+                type: ContentChild,
+                args: ["buttonTemplate"]
+            }] } });
+
 // --- Pipes ---
 const pipes = [
     ChunkPipe,
@@ -5948,7 +6227,8 @@ const components = [
     DropListComponent,
     DynamicTableComponent,
     PaginationMenuComponent,
-    UnorderedListComponent
+    UnorderedListComponent,
+    UploadComponent
 ];
 const providers = [
     ...pipes,
@@ -6285,8 +6565,8 @@ class NgxUtilsModule {
     constructor() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent], imports: [CommonModule,
-            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
+            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -6316,5 +6596,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, impatientPromise, provideWithOptions };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, impatientPromise, provideWithOptions };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map