@stemy/ngx-utils 19.1.0 → 19.1.3

package/fesm2022/stemy-ngx-utils.mjs

@@ -4,7 +4,7 @@ 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 { skipWhile, debounceTime, distinctUntilChanged, map, filter, first, mergeMap, timeout } from 'rxjs/operators';
+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';
 import * as i1 from 'ngx-device-detector';
@@ -1507,11 +1507,12 @@ class DateUtils {
 }
 
 class FileUtils {
+    static { this.base64 = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/g; }
     static getExtension(file) {
-        return file ? file.name.substr(file.name.lastIndexOf(".")).toLowerCase() : null;
+        return file ? file.name.substring(file.name.lastIndexOf(".")).toLowerCase() : null;
     }
     static getName(file) {
-        return file ? file.name.substr(0, file.name.lastIndexOf(".")) : null;
+        return file ? file.name.substring(0, file.name.lastIndexOf(".")) : null;
     }
     static toFile(blob, fileName) {
         const data = blob;
@@ -1556,31 +1557,37 @@ class FileUtils {
         // @dynamic
         reader => reader.readAsDataURL(file));
     }
-    static readDataFromUrl(http, url) {
-        return new Promise(
-        // @dynamic
-        (resolve, reject) => {
-            if (!url) {
-                reject({
-                    message: "The url is not specified"
-                });
-                return;
-            }
-            if ((/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/g).test(url)) {
-                resolve(url);
-                return;
-            }
-            first()(http.get(url, {
-                responseType: "blob"
-            })).subscribe((blob) => {
-                FileUtils.readFileAsDataURL(blob).then(resolve, reject);
-            }, reason => {
-                if (reason.status > 0)
-                    reject(reason);
-                else
-                    resolve(url);
-            });
-        });
+    static base64ToBlob(base64, mimeType = "application/octet-stream") {
+        // Decode the Base64 string into a binary string
+        const byteCharacters = atob(base64);
+        // Convert the binary string into an array of bytes
+        const byteNumbers = Array.from(byteCharacters, char => char.charCodeAt(0));
+        const byteArray = new Uint8Array(byteNumbers);
+        // Create a Blob with the byte array and the specified MIME type
+        return new Blob([byteArray], { type: mimeType });
+    }
+    static async readBlobFromUrl(http, url) {
+        if (!url) {
+            throw new Error(`The URL is not specified for readBlobFromUrl`);
+        }
+        if (url.match(FileUtils.base64)) {
+            return FileUtils.base64ToBlob(url);
+        }
+        return firstValueFrom(http.get(url, {
+            responseType: "blob"
+        }));
+    }
+    static async readDataFromUrl(http, url) {
+        if (!url) {
+            throw new Error(`The URL is not specified for readBlobFromUrl`);
+        }
+        if (url.match(FileUtils.base64)) {
+            return url;
+        }
+        const blob = await firstValueFrom(http.get(url, {
+            responseType: "blob"
+        }));
+        return FileUtils.readFileAsDataURL(blob);
     }
     static readFile(callback) {
         return new Promise(
@@ -5379,9 +5386,12 @@ class DropListComponent {
         this.idField = "id";
         this.labelField = "label";
         this.value = [];
+        this.context = [];
+        this.prepareItem = () => { };
+        this.checkFn = () => false;
         this.valueMap = {};
-        this.remove = id => {
-            this.changeValue(this.value.filter(t => t !== id));
+        this.remove = index => {
+            this.changeValue(this.value.filter((_, i) => i !== index));
         };
     }
     onDragEnter(ev, elem, data) {
@@ -5421,6 +5431,8 @@ class DropListComponent {
             this.valueMap = this.context?.reduce((res, item) => {
                 // In case this is a dynamic form option which stores real value under props
                 item = Object.assign({}, item, item.props || {});
+                // Prepare item
+                this.prepareItem(item);
                 const id = item[this.idField] || item.id;
                 res[id] = item;
                 return res;
@@ -5448,11 +5460,11 @@ 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", 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" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropListComponent),
                 multi: true,
-            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <ng-container *ngFor=\"let id of value\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <div class=\"drop-list-item-delete\" (click)=\"remove(id)\">x</div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}\n"], dependencies: [{ 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: "pipe", type: GetValuePipe, name: "getValue" }], encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <div class=\"drop-list-item-delete\" (click)=\"remove(ix)\">x</div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}\n"], dependencies: [{ 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: "pipe", type: GetValuePipe, name: "getValue" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropListComponent, decorators: [{
             type: Component,
@@ -5460,7 +5472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DropListComponent),
                             multi: true,
-                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <ng-container *ngFor=\"let id of value\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <div class=\"drop-list-item-delete\" (click)=\"remove(id)\">x</div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}\n"] }]
+                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <div class=\"drop-list-item-delete\" (click)=\"remove(ix)\">x</div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], unique: [{
@@ -5473,6 +5485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }], context: [{
                 type: Input
+            }], prepareItem: [{
+                type: Input
             }], checkFn: [{
                 type: Input
             }], itemTemplate: [{