@elderbyte/ngx-starter 18.2.0-beta4 → 18.2.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -5,7 +5,7 @@ import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Outpu
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, startWith, skip, delay, share, combineLatestWith, skipWhile, timeout } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -36,6 +36,7 @@ import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '
 import * as i1$7 from '@angular/material/chips';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipsModule, MatChip, MatChipAvatar, MatChipSet, MatChipTrailingIcon, MatChipListbox, MatChipOption } from '@angular/material/chips';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatList, MatListSubheaderCssMatStyler, MatListItem, MatListModule } from '@angular/material/list';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$5 from '@angular/material/snack-bar';
@@ -50,7 +51,6 @@ import * as i1$6 from '@angular/material/dialog';
 import { MatDialogClose, MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import { MatMenuTrigger, MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatColumnDef, MatRowDef, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
 import * as i1$8 from '@angular/cdk/table';
@@ -9715,6 +9715,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 }]
         }] });
 
+/***************************************************************************
+ *                                                                         *
+ * FileSystem API                                                          *
+ *                                                                         *
+ **************************************************************************/
+/**
+ * Holds experimental features of the browser `File System API`. No typescript lint checks
+ * are performed here!
+ */
+class FileSystemApi {
+    /***************************************************************************
+     *                                                                         *
+     * DataTransferItem                                                        *
+     *                                                                         *
+     **************************************************************************/
+    static isGetAsFileSystemHandleSupported(transferItem) {
+        // @ts-ignore
+        return transferItem.getAsFileSystemHandle !== undefined;
+    }
+    /**
+     * Returns an FileSystemHandle Observable of the given DataTransferItem. The FileSystemHandle can only be accessed in the `dragstart`
+     * or `drop` event. Otherwise, it will return null!
+     */
+    static getAsFileSystemHandle(transferItem) {
+        // @ts-ignore
+        return from(transferItem.getAsFileSystemHandle());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * File Picker                                                             *
+     *                                                                         *
+     **************************************************************************/
+    static isFileSystemSupported() {
+        return 'showOpenFilePicker' in window;
+    }
+    static openFilePicker(pickerOpts) {
+        try {
+            // @ts-ignore
+            return from(window.showOpenFilePicker(pickerOpts));
+        }
+        catch (e) {
+            return throwError(() => new Error(e));
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Directory Picker                                                        *
+     *                                                                         *
+     **************************************************************************/
+    static isDirectoryPickerSupported() {
+        return 'showDirectoryPicker' in window;
+    }
+    static openDirectoryPicker(pickerOpts) {
+        try {
+            // @ts-ignore
+            return from(window.showDirectoryPicker(pickerOpts));
+        }
+        catch (e) {
+            return throwError(() => new Error(e));
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * FileSystemDirectoryHandle                                               *
+     *                                                                         *
+     **************************************************************************/
+    static getHandlesFromDirectory(dirHandle) {
+        return from(FileSystemApi.getHandlesFromDirectoryAsync(dirHandle));
+    }
+    static buildRelativeParent(fileOrDirHandle, rootDirectory) {
+        if (rootDirectory == null) {
+            return of(undefined);
+        }
+        const relativeParents$ = from(rootDirectory.resolve(fileOrDirHandle));
+        return relativeParents$.pipe(map(parents => {
+            // path/to/folder/file.jpg
+            const path = parents;
+            // root/path/to/folder/file.jpg
+            path.unshift(rootDirectory.name);
+            // root/path/to/folder
+            path.pop();
+            return path.join('/');
+        }));
+    }
+    static async getHandlesFromDirectoryAsync(dirHandle) {
+        const handles = [];
+        // @ts-ignore
+        for await (const handle of dirHandle.values()) {
+            handles.push(handle);
+        }
+        return handles;
+    }
+}
+
 /**
  * Represents a file and the relative path where the user has selected it.
  * This is useful if the user has selected a folder and files
@@ -9729,26 +9823,24 @@ class FileEntry {
      * which is also supported by this method.
      */
     static ofFile(file) {
-        let relativeParent = null;
-        if (file.webkitRelativePath) {
-            if (file.webkitRelativePath.endsWith(file.name)) {
-                const nameStart = file.webkitRelativePath.length - file.name.length;
-                relativeParent = file.webkitRelativePath.substring(0, nameStart);
-            }
-            else {
-                relativeParent = file.webkitRelativePath;
-            }
-        }
-        return FileEntry.relativeFile(file, relativeParent);
+        return FileEntry.relativeFile(file, this.buildRelativeParent(file));
+    }
+    /**
+     * Creates an Observable of a File Entry by resolving its FileSystemFileHandle.
+     * @param fileHandle
+     * @param rootDirectory is needed to build a relative parent
+     */
+    static ofFileHandle(fileHandle, rootDirectory) {
+        return from(fileHandle.getFile()).pipe(combineLatestWith(FileSystemApi.buildRelativeParent(fileHandle, rootDirectory)), map(([file, relativeParent]) => FileEntry.relativeFile(file, relativeParent, fileHandle)));
     }
     /**
      * Creates a file Entry with a relative parent path
      */
-    static relativeFile(file, relativeParent) {
+    static relativeFile(file, relativeParent, fileHandle) {
         if (relativeParent && relativeParent.endsWith('/')) {
             relativeParent = relativeParent.substring(0, relativeParent.length - 1);
         }
-        return new FileEntry(file, relativeParent);
+        return new FileEntry(file, relativeParent, fileHandle);
     }
     static toFileMap(entries) {
         const map = new Map();
@@ -9768,9 +9860,10 @@ class FileEntry {
      * Contains the relative path from the selected folder
      * to this file. Only relevant if the user has selected a folder.
      */
-    relativeParent) {
+    relativeParent, fileHandle) {
         this.file = file;
         this.relativeParent = relativeParent;
+        this.fileHandle = fileHandle;
         this.relativePath = FileEntry.buildRelativePath(relativeParent, file);
     }
     /***************************************************************************
@@ -9789,42 +9882,46 @@ class FileEntry {
             return file.name;
         }
     }
+    static buildRelativeParent(file) {
+        let relativeParent = null;
+        if (file.webkitRelativePath) {
+            if (file.webkitRelativePath.endsWith(file.name)) {
+                const nameStart = file.webkitRelativePath.length - file.name.length;
+                relativeParent = file.webkitRelativePath.substring(0, nameStart);
+            }
+            else {
+                relativeParent = file.webkitRelativePath;
+            }
+        }
+        return relativeParent;
+    }
 }
 
-class ElderFileSelectDirective {
+class ElderFileSelectInput {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(el, renderer) {
-        this.el = el;
+    constructor(renderer, el) {
         this.renderer = renderer;
+        this.el = el;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.elderFileSelectChange = new EventEmitter();
-        this.elderSingleFileSelectChange = new EventEmitter();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
-        this.createFileSelect();
-    }
-    ngOnDestroy() {
-        this.removeFileSelect();
+        this._filesSelected = new Subject;
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    get filesSelected() {
+        return this._filesSelected;
+    }
     set elderFileSelect(value) {
         this._accept = value;
         if (this._fileInput) {
@@ -9837,11 +9934,6 @@ class ElderFileSelectDirective {
             this.renderer.setProperty(this._fileInput, 'multiple', value);
         }
     }
-    /**
-     * Allow the user to select a directory. All files that are recursively contained are selected.
-     * However, the user will no longer be able to select individual files if this is enabled.
-     * @param value
-     */
     set elderFileSelectDirectory(value) {
         this._directory = coerceBooleanProperty(value);
         if (this._fileInput) {
@@ -9854,17 +9946,6 @@ class ElderFileSelectDirective {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    onClick(event) {
-        this.openFileSelectDialog();
-    }
-    openFileSelectDialog() {
-        this._fileInput.click();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
     /**
      * <input type="file"
      *     hidden #fileInput
@@ -9888,7 +9969,9 @@ class ElderFileSelectDirective {
             this.renderer.setAttribute(this._fileInput, 'webkitdirectory', 'true');
             this.renderer.setAttribute(this._fileInput, 'directory', 'true');
         }
-        this._unlisten = this.renderer.listen(this._fileInput, 'change', event => this.fileInputChanged(event));
+        this._unlisten = this.renderer.listen(this._fileInput, 'change', event => {
+            this.fileInputChanged(this._fileInput.files);
+        });
     }
     removeFileSelect() {
         if (this._unlisten) {
@@ -9900,26 +9983,24 @@ class ElderFileSelectDirective {
             this._fileInput = null;
         }
     }
-    fileInputChanged(event) {
-        const fileList = this._fileInput.files;
+    openFileSelectDialog() {
+        this._fileInput.click();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    fileInputChanged(fileList) {
         const files = this.toFileEntries(fileList);
         this.logger.debug('fileInputChanged, files:', files);
-        this.emitFileList(files);
         this.clearFileList();
+        this._filesSelected.next(files);
     }
     clearFileList() {
         // not nice but works
         this._fileInput.value = null;
     }
-    emitFileList(files) {
-        if (files.length > 0) {
-            this.elderFileSelectChange.next(files);
-            this.elderSingleFileSelectChange.emit(files[0].file);
-        }
-        else {
-            this.logger.warn('User did not select any File or the Folder was empty.');
-        }
-    }
     toFileEntries(fileList) {
         const files = [];
         for (const key in fileList) {
@@ -9929,7 +10010,175 @@ class ElderFileSelectDirective {
         }
         return files;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderFileSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+}
+
+class FileListingSystemHandle {
+    /***************************************************************************
+     *                                                                         *
+     * Public methods                                                          *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Creates a File Entry Array Observable by resolving its FileSystemHandle.
+     * @returns An `Observable<FileEntry[]>` with the FileSystemFileHandle included
+     */
+    static listFiles(handle, rootDirectory) {
+        switch (handle.kind) {
+            case 'file':
+                return FileEntry.ofFileHandle(handle, rootDirectory).pipe(toArray());
+            case 'directory':
+                return FileListingSystemHandle.listFilesRecursive(handle, rootDirectory);
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    static listFilesRecursive(dirHandle, rootDirectory) {
+        return FileSystemApi.getHandlesFromDirectory(dirHandle).pipe(map(handles => FileListingSystemHandle.listFilesOfEach(handles, rootDirectory ? rootDirectory : dirHandle)), switchMap(fileEntriesArray$ => zip(fileEntriesArray$)), map(fileEntriesArray => fileEntriesArray.flat()));
+    }
+    static listFilesOfEach(handles, rootDirectory) {
+        return handles.map(fileOrDirHandle => FileListingSystemHandle.listFiles(fileOrDirHandle, rootDirectory));
+    }
+}
+
+class ElderFileSelectDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(renderer, el, destroyRef) {
+        this.renderer = renderer;
+        this.el = el;
+        this.destroyRef = destroyRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.elderFileSelectChange = new EventEmitter();
+        this.elderSingleFileSelectChange = new EventEmitter();
+        this._useDirectoryPicker = false;
+        this._legacyInput = new ElderFileSelectInput(this.renderer, this.el);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+        if (!FileSystemApi.isFileSystemSupported() || !FileSystemApi.isDirectoryPickerSupported()) {
+            this.logger.warn('showOpenFilePicker or showDirectoryPicker is not supported for this browser, falling back to legacy file picker');
+            this._legacyInput.createFileSelect();
+            this._legacyInput.filesSelected.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                next: multiFileChange => this.pushFileChanges(multiFileChange)
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._legacyInput.removeFileSelect();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set elderFileSelect(value) {
+        this._filePickerOptions = {
+            excludeAcceptAllOptions: true,
+            id: this._filePickerOptions?.id,
+            multiple: this._filePickerOptions?.multiple,
+            startIn: this._filePickerOptions?.startIn,
+            types: [this.buildTypeOption(value)]
+        };
+        this._legacyInput.elderFileSelect = value;
+    }
+    buildTypeOption(value) {
+        if (this.isFileExtension(value)) {
+            return {
+                accept: {
+                    '*/*': value.trim()
+                        .replace(/\s+/g, '')
+                        .split(',')
+                }
+            };
+        }
+        else if (this.isMimeType(value)) {
+            return {
+                accept: { [value]: [] }
+            };
+        }
+        return null;
+    }
+    isFileExtension(input) {
+        const regex = new RegExp(/^(\.\w+)(, ?\.\w+)*$/);
+        return regex.test(input);
+    }
+    isMimeType(input) {
+        const regex = new RegExp(/^.+\/.+$/);
+        return regex.test(input);
+    }
+    set elderFileSelectMultiple(value) {
+        this._filePickerOptions = {
+            excludeAcceptAllOptions: this._filePickerOptions?.excludeAcceptAllOptions,
+            id: this._filePickerOptions?.id,
+            multiple: coerceBooleanProperty(value),
+            startIn: this._filePickerOptions?.startIn,
+            types: this._filePickerOptions?.types
+        };
+        this._legacyInput.elderFileSelectMultiple = value;
+    }
+    /**
+     * Allow the user to select a directory. All files that are recursively contained are selected.
+     * However, the user will no longer be able to select individual files if this is enabled.
+     * @param value
+     */
+    set elderFileSelectDirectory(value) {
+        this._useDirectoryPicker = coerceBooleanProperty(value);
+        this._legacyInput.elderFileSelectDirectory = value;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    onClick(event) {
+        if (!this._useDirectoryPicker && FileSystemApi.isFileSystemSupported()) {
+            this.openFilePicker(this._filePickerOptions).subscribe({
+                next: multiFileChange => this.pushFileChanges(multiFileChange)
+            });
+        }
+        else if (this._useDirectoryPicker && FileSystemApi.isDirectoryPickerSupported()) {
+            this.openDirectoryPicker(this._directoryPickerOptions).subscribe({
+                next: multiFileChange => this.pushFileChanges(multiFileChange)
+            });
+        }
+        else {
+            this._legacyInput.openFileSelectDialog();
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    pushFileChanges(multiFileChange) {
+        this.elderFileSelectChange.next(multiFileChange);
+        const file = multiFileChange[0]?.file;
+        if (file) {
+            this.elderSingleFileSelectChange.next(file);
+        }
+    }
+    openFilePicker(pickerOpts) {
+        return FileSystemApi.openFilePicker(pickerOpts).pipe(switchMap(files => combineLatest(files.map(file => FileEntry.ofFileHandle(file)))));
+    }
+    openDirectoryPicker(pickerOpts) {
+        return FileSystemApi.openDirectoryPicker(pickerOpts).pipe(switchMap(dir => FileListingSystemHandle.listFiles(dir)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderFileSelectDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: ElderFileSelectDirective, isStandalone: true, selector: "[elderFileSelect]", inputs: { elderFileSelect: "elderFileSelect", elderFileSelectMultiple: "elderFileSelectMultiple", elderFileSelectDirectory: "elderFileSelectDirectory" }, outputs: { elderFileSelectChange: "elderFileSelectChange", elderSingleFileSelectChange: "elderSingleFileSelectChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderFileSelectDirective, decorators: [{
@@ -9938,7 +10187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                     selector: '[elderFileSelect]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { elderFileSelectChange: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { elderFileSelectChange: [{
                 type: Output
             }], elderSingleFileSelectChange: [{
                 type: Output
@@ -10058,70 +10307,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 type: Input
             }] } });
 
-class FileListingRx {
+class FileListingWebkit {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
     constructor() {
-        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
-    static { this.INSTANCE = new FileListingRx(); }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Public methods                                                          *
      *                                                                         *
      **************************************************************************/
-    toFileList(transferItemList) {
-        const obs = [];
-        for (let i = 0; i < transferItemList.length; i++) {
-            const transferItem = transferItemList[i];
-            const entry = transferItem.webkitGetAsEntry();
-            if (entry) {
-                obs.push(this.listFilesRecursive(entry));
-            }
-            else {
-                const itemAsFile = transferItem.getAsFile();
-                if (itemAsFile) {
-                    obs.push(of([FileEntry.ofFile(itemAsFile)]));
-                }
-                else {
-                    if (transferItem.kind == 'file') {
-                        obs.push(of([
-                            FileEntry.ofFile(new File([], '', {
-                                type: transferItem.type
-                            }))
-                        ]));
-                    }
-                    else {
-                        this.log.warn('Could not handle DataTransferItem!', transferItem);
-                    }
-                }
-            }
-        }
-        return zip(obs).pipe(map(files => files.flat()));
-    }
-    listFilesRecursive(entry) {
-        return this.listFilesRecursiveAsync(entry, null);
+    static listFilesRecursive(entry) {
+        return FileListingWebkit.listFilesRecursiveAsync(entry, null);
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    listFilesRecursiveAsync(entry, parent) {
+    static listFilesRecursiveAsync(entry, parent) {
         if (entry.isDirectory) {
             const directoryEntry = entry;
-            return this.readEntries(directoryEntry).pipe(mergeMap$1(entries => zip(entries.map(entry => this.listFilesRecursiveAsync(entry, directoryEntry)))), map(files => files.flat()));
+            return FileListingWebkit.readEntries(directoryEntry).pipe(mergeMap$1(entries => zip(entries.map(entry => this.listFilesRecursiveAsync(entry, directoryEntry)))), map(files => files.flat()));
         }
         else if (entry.isFile) {
             const fileEntry = entry;
-            return this.observableFile(fileEntry, parent).pipe(map(file => [file]));
+            return FileListingWebkit.observableFile(fileEntry, parent).pipe(map(file => [file]));
         }
         else {
             return EMPTY;
         }
     }
-    observableFile(fileEntry, parent) {
+    static observableFile(fileEntry, parent) {
         return new Observable(observer => {
             fileEntry.file(file => {
-                observer.next(FileEntry.relativeFile(file, this.trimStaringSlash(parent?.fullPath)));
+                observer.next(FileEntry.relativeFile(file, FileListingWebkit.trimStaringSlash(parent?.fullPath)));
                 observer.complete();
             }, err => {
                 observer.error(err);
@@ -10129,7 +10352,7 @@ class FileListingRx {
             });
         });
     }
-    trimStaringSlash(path) {
+    static trimStaringSlash(path) {
         if (path) {
             if (path.startsWith('/')) {
                 path = path.substring(1);
@@ -10137,12 +10360,12 @@ class FileListingRx {
         }
         return path;
     }
-    readEntries(directoryEntry) {
+    static readEntries(directoryEntry) {
         return new Observable(observer => {
-            this.consumeReaderToCompletion(observer, directoryEntry.createReader());
+            FileListingWebkit.consumeReaderToCompletion(observer, directoryEntry.createReader());
         });
     }
-    consumeReaderToCompletion(observer, directoryReader) {
+    static consumeReaderToCompletion(observer, directoryReader) {
         directoryReader.readEntries(entries => {
             if (entries && entries.length > 0) {
                 observer.next(entries);
@@ -10158,6 +10381,63 @@ class FileListingRx {
     }
 }
 
+class FileListingRx {
+    constructor() {
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+    }
+    static { this.INSTANCE = new FileListingRx(); }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    toFileList(transferItemList) {
+        const obs = [];
+        for (let i = 0; i < transferItemList.length; i++) {
+            const transferItem = transferItemList[i];
+            obs.push(this.resolveTransferItem(transferItem));
+        }
+        return zip(obs).pipe(map(files => files.flat()));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    resolveTransferItem(transferItem) {
+        if (FileSystemApi.isGetAsFileSystemHandleSupported(transferItem)) {
+            return FileSystemApi.getAsFileSystemHandle(transferItem).pipe(switchMap(handle => handle ? FileListingSystemHandle.listFiles(handle) : this.legacyFileListing(transferItem)));
+        }
+        return this.legacyFileListing(transferItem);
+    }
+    legacyFileListing(transferItem) {
+        const entry = transferItem.webkitGetAsEntry();
+        if (entry) {
+            return FileListingWebkit.listFilesRecursive(entry);
+        }
+        return this.fallbackFileListing(transferItem);
+    }
+    fallbackFileListing(transferItem) {
+        const itemAsFile = transferItem.getAsFile();
+        if (itemAsFile) {
+            return of([FileEntry.ofFile(itemAsFile)]);
+        }
+        else {
+            if (transferItem.kind == 'file') {
+                return of([
+                    FileEntry.ofFile(new File([], '', {
+                        type: transferItem.type
+                    }))
+                ]);
+            }
+            else {
+                this.log.warn('Could not handle DataTransferItem!', transferItem);
+                return of([]);
+            }
+        }
+    }
+}
+
 class ElderFileDropZoneDirective {
     /***************************************************************************
      *                                                                         *