@stemy/ngx-utils 19.9.37 → 19.9.39

package/fesm2022/stemy-ngx-utils.mjs

@@ -762,7 +762,7 @@ class StateService {
         return this.router.config;
     }
     get $observable() {
-        return this.$snapshot.pipe(skipWhile(snapshot => snapshot === emptySnapshot), debounceTime(25));
+        return this.$snapshot.pipe(skipWhile(snapshot => snapshot === emptySnapshot), debounceTime(10));
     }
     constructor(injector, zone, universal, router = null, contexts = null) {
         this.injector = injector;
@@ -2761,62 +2761,6 @@ function diffEntities(current, incoming) {
     };
 }
 
-class TimerUtils {
-    static createTimeout(func, time) {
-        // @dynamic
-        const run = (timer) => {
-            timer.clear();
-            // If the time is zero or less, we run the function immediately because setTimeout puts it into the next "frame"
-            if (timer.time <= 0) {
-                timer.func();
-                return;
-            }
-            timer.id = setTimeout(() => {
-                timer.id = null;
-                timer.func();
-            }, timer.time);
-        };
-        // @dynamic
-        const clear = (timer) => {
-            if (!timer.id)
-                return;
-            clearTimeout(timer.id);
-            timer.id = null;
-        };
-        return TimerUtils.createTimer(run, clear, func, time);
-    }
-    static createInterval(func, time) {
-        // @dynamic
-        const run = (timer) => {
-            timer.clear();
-            timer.id = setInterval(timer.func, Math.max(timer.time, 5));
-        };
-        // @dynamic
-        const clear = (timer) => {
-            if (!timer.id)
-                return;
-            clearInterval(timer.id);
-            timer.id = null;
-        };
-        return TimerUtils.createTimer(run, clear, func, time);
-    }
-    static createTimer(run, clear, func, time) {
-        const timer = {};
-        const setParams = (func, time) => {
-            timer.func = !ObjectUtils.isFunction(func) ? (() => { }) : func;
-            timer.time = !ObjectUtils.isNumber(time) ? 100 : time;
-        };
-        timer.run = () => run(timer);
-        timer.clear = () => clear(timer);
-        timer.set = (func, time) => {
-            setParams(func, time);
-            timer.run();
-        };
-        setParams(func, time);
-        return timer;
-    }
-}
-
 class ObservableUtils {
     static toSearch(search) {
         return mergeMap(
@@ -2839,20 +2783,24 @@ class ObservableUtils {
     static subscribe(...subscribers) {
         const subscriptions = [];
         subscribers.forEach(info => {
+            const timeout = info.timeout ?? 15;
             let alreadyCalled = false;
-            const timer = TimerUtils.createTimeout();
             info.subjects.forEach(subject => {
-                const ss = subject.subscribe((value) => {
+                const ss = subject
+                    .pipe(map(v => {
                     alreadyCalled = true;
-                    timer.set(() => {
-                        info.cb(subject, value);
-                    }, info.timeout ?? 0);
+                    return v;
+                }), debounceTime(timeout))
+                    .subscribe((value) => {
+                    info.cb(subject, value);
                 });
                 subscriptions.push(ss);
             });
-            if (alreadyCalled)
-                return;
-            info.cb();
+            setTimeout(() => {
+                if (alreadyCalled)
+                    return;
+                info.cb();
+            }, timeout);
         });
         return ObservableUtils.multiSubscription(...subscriptions);
     }
@@ -3171,6 +3119,62 @@ class SocketClient {
     }
 }
 
+class TimerUtils {
+    static createTimeout(func, time) {
+        // @dynamic
+        const run = (timer) => {
+            timer.clear();
+            // If the time is zero or less, we run the function immediately because setTimeout puts it into the next "frame"
+            if (timer.time <= 0) {
+                timer.func();
+                return;
+            }
+            timer.id = setTimeout(() => {
+                timer.id = null;
+                timer.func();
+            }, timer.time);
+        };
+        // @dynamic
+        const clear = (timer) => {
+            if (!timer.id)
+                return;
+            clearTimeout(timer.id);
+            timer.id = null;
+        };
+        return TimerUtils.createTimer(run, clear, func, time);
+    }
+    static createInterval(func, time) {
+        // @dynamic
+        const run = (timer) => {
+            timer.clear();
+            timer.id = setInterval(timer.func, Math.max(timer.time, 5));
+        };
+        // @dynamic
+        const clear = (timer) => {
+            if (!timer.id)
+                return;
+            clearInterval(timer.id);
+            timer.id = null;
+        };
+        return TimerUtils.createTimer(run, clear, func, time);
+    }
+    static createTimer(run, clear, func, time) {
+        const timer = {};
+        const setParams = (func, time) => {
+            timer.func = !ObjectUtils.isFunction(func) ? (() => { }) : func;
+            timer.time = !ObjectUtils.isNumber(time) ? 100 : time;
+        };
+        timer.run = () => run(timer);
+        timer.clear = () => clear(timer);
+        timer.set = (func, time) => {
+            setParams(func, time);
+            timer.run();
+        };
+        setParams(func, time);
+        return timer;
+    }
+}
+
 class UniqueUtils {
     static uuid() {
         if (typeof window !== "undefined" && typeof window.crypto !== "undefined" && typeof window.crypto.getRandomValues !== "undefined") {
@@ -9630,7 +9634,7 @@ class UploadComponent {
             });
             return process;
         });
-        const baseUrl = this.baseUrl || this.api.url("assets");
+        const baseUrl = this.uploadUrl || this.baseUrl || this.api.url("assets");
         const requests = this.processing.map(async (p) => {
             await p.promise;
             if (this.inline) {
@@ -9673,7 +9677,7 @@ class UploadComponent {
         return this.acceptTypes.includes(type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", inline: "inline", accept: "accept", baseUrl: "baseUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", inline: "inline", accept: "accept", baseUrl: "baseUrl", uploadUrl: "uploadUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: UploadComponent, multi: true }
         ], viewQueries: [{ propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemBgTemplate let-bg=\"bg\">\r\n    @if (bg) {\r\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\r\n            <div>\r\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\r\n            </div>\r\n        </div>\r\n    }\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n    <div class=\"upload-item\">\r\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\r\n        </ng-container>\r\n        @if (!disabled) {\r\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\r\n        }\r\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\r\n    </div>\r\n</ng-template>\r\n\r\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\r\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n        <input type=\"file\"\r\n               #input\r\n               [disabled]=\"disabled\"\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        @if (message) {\r\n            <div class=\"upload-message\"\r\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\r\n                 [innerHTML]=\"message | translate | safe:'html'\">\r\n            </div>\r\n        }\r\n        <div class=\"upload-container\">\r\n\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n                          *ngIf=\"!multiple && value\">\r\n            </ng-container>\r\n            <ng-container *ngIf=\"multiple\">\r\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\r\n                              *ngFor=\"let item of $any(value); let ix = index\">\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\r\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\r\n                </ng-container>\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\r\n        </div>\r\n        @if (!disabled) {\r\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\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: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: IsTypePipe, name: "isType" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -9698,6 +9702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
                 type: Input
             }], baseUrl: [{
                 type: Input
+            }], uploadUrl: [{
+                type: Input
             }], message: [{
                 type: Input
             }], multiple: [{