@elderbyte/ngx-starter 18.1.0-beta → 18.2.0-beta

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -1,11 +1,11 @@
 import * as i2$1 from '@angular/common';
 import { formatDate, CommonModule, formatCurrency, getCurrencySymbol, NgIf, AsyncPipe, NgFor, NgClass, NgTemplateOutlet, NgStyle, formatNumber, DecimalPipe, DatePipe, registerLocaleData, CurrencyPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Injectable, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, ViewEncapsulation, InjectionToken, ContentChildren, Self, input } from '@angular/core';
+import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Injectable, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, ContentChildren, Self } from '@angular/core';
 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, from, toArray, 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, 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,7 +36,6 @@ 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';
@@ -51,6 +50,7 @@ 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,92 +9715,6 @@ 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;
-    }
-    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 => {
-            const path = parents;
-            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
@@ -9815,24 +9729,26 @@ class FileEntry {
      * which is also supported by this method.
      */
     static ofFile(file) {
-        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)));
+        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);
     }
     /**
      * Creates a file Entry with a relative parent path
      */
-    static relativeFile(file, relativeParent, fileHandle) {
+    static relativeFile(file, relativeParent) {
         if (relativeParent && relativeParent.endsWith('/')) {
             relativeParent = relativeParent.substring(0, relativeParent.length - 1);
         }
-        return new FileEntry(file, relativeParent, fileHandle);
+        return new FileEntry(file, relativeParent);
     }
     static toFileMap(entries) {
         const map = new Map();
@@ -9852,10 +9768,9 @@ class FileEntry {
      * Contains the relative path from the selected folder
      * to this file. Only relevant if the user has selected a folder.
      */
-    relativeParent, fileHandle) {
+    relativeParent) {
         this.file = file;
         this.relativeParent = relativeParent;
-        this.fileHandle = fileHandle;
         this.relativePath = FileEntry.buildRelativePath(relativeParent, file);
     }
     /***************************************************************************
@@ -9874,46 +9789,42 @@ 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 ElderFileSelectInput {
+class ElderFileSelectDirective {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(renderer, el) {
-        this.renderer = renderer;
+    constructor(el, renderer) {
         this.el = el;
+        this.renderer = renderer;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._filesSelected = new Subject;
+        this.elderFileSelectChange = new EventEmitter();
+        this.elderSingleFileSelectChange = new EventEmitter();
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    get filesSelected() {
-        return this._filesSelected;
+    ngOnInit() {
+        this.createFileSelect();
     }
+    ngOnDestroy() {
+        this.removeFileSelect();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
     set elderFileSelect(value) {
         this._accept = value;
         if (this._fileInput) {
@@ -9926,6 +9837,11 @@ class ElderFileSelectInput {
             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) {
@@ -9938,6 +9854,17 @@ class ElderFileSelectInput {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
+    onClick(event) {
+        this.openFileSelectDialog();
+    }
+    openFileSelectDialog() {
+        this._fileInput.click();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
     /**
      * <input type="file"
      *     hidden #fileInput
@@ -9961,9 +9888,7 @@ class ElderFileSelectInput {
             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(this._fileInput.files);
-        });
+        this._unlisten = this.renderer.listen(this._fileInput, 'change', event => this.fileInputChanged(event));
     }
     removeFileSelect() {
         if (this._unlisten) {
@@ -9975,24 +9900,26 @@ class ElderFileSelectInput {
             this._fileInput = null;
         }
     }
-    openFileSelectDialog() {
-        this._fileInput.click();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    fileInputChanged(fileList) {
+    fileInputChanged(event) {
+        const fileList = this._fileInput.files;
         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) {
@@ -10002,174 +9929,7 @@ class ElderFileSelectInput {
         }
         return files;
     }
-}
-
-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.elderFileSelectChange.next(multiFileChange);
-                    const file = multiFileChange[0]?.file;
-                    if (file) {
-                        this.elderSingleFileSelectChange.next(file);
-                    }
-                }
-            });
-        }
-    }
-    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: fileList => this.elderFileSelectChange.next(fileList)
-            });
-        }
-        else if (this._useDirectoryPicker && FileSystemApi.isDirectoryPickerSupported()) {
-            this.openDirectoryPicker(this._directoryPickerOptions).subscribe({
-                next: fileList => this.elderFileSelectChange.next(fileList)
-            });
-        }
-        else {
-            this._legacyInput.openFileSelectDialog();
-        }
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    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.ɵ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 }); }
     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: [{
@@ -10178,7 +9938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                     selector: '[elderFileSelect]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { elderFileSelectChange: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { elderFileSelectChange: [{
                 type: Output
             }], elderSingleFileSelectChange: [{
                 type: Output
@@ -10298,44 +10058,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 type: Input
             }] } });
 
-class FileListingWebkit {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
+class FileListingRx {
     constructor() {
+        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
+    static { this.INSTANCE = new FileListingRx(); }
     /***************************************************************************
      *                                                                         *
-     * Public methods                                                          *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    static listFilesRecursive(entry) {
-        return FileListingWebkit.listFilesRecursiveAsync(entry, null);
+    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);
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    static listFilesRecursiveAsync(entry, parent) {
+    listFilesRecursiveAsync(entry, parent) {
         if (entry.isDirectory) {
             const directoryEntry = entry;
-            return FileListingWebkit.readEntries(directoryEntry).pipe(mergeMap$1(entries => zip(entries.map(entry => this.listFilesRecursiveAsync(entry, directoryEntry)))), map(files => files.flat()));
+            return this.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 FileListingWebkit.observableFile(fileEntry, parent).pipe(map(file => [file]));
+            return this.observableFile(fileEntry, parent).pipe(map(file => [file]));
         }
         else {
             return EMPTY;
         }
     }
-    static observableFile(fileEntry, parent) {
+    observableFile(fileEntry, parent) {
         return new Observable(observer => {
             fileEntry.file(file => {
-                observer.next(FileEntry.relativeFile(file, FileListingWebkit.trimStaringSlash(parent?.fullPath)));
+                observer.next(FileEntry.relativeFile(file, this.trimStaringSlash(parent?.fullPath)));
                 observer.complete();
             }, err => {
                 observer.error(err);
@@ -10343,7 +10129,7 @@ class FileListingWebkit {
             });
         });
     }
-    static trimStaringSlash(path) {
+    trimStaringSlash(path) {
         if (path) {
             if (path.startsWith('/')) {
                 path = path.substring(1);
@@ -10351,12 +10137,12 @@ class FileListingWebkit {
         }
         return path;
     }
-    static readEntries(directoryEntry) {
+    readEntries(directoryEntry) {
         return new Observable(observer => {
-            FileListingWebkit.consumeReaderToCompletion(observer, directoryEntry.createReader());
+            this.consumeReaderToCompletion(observer, directoryEntry.createReader());
         });
     }
-    static consumeReaderToCompletion(observer, directoryReader) {
+    consumeReaderToCompletion(observer, directoryReader) {
         directoryReader.readEntries(entries => {
             if (entries && entries.length > 0) {
                 observer.next(entries);
@@ -10372,60 +10158,6 @@ class FileListingWebkit {
     }
 }
 
-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 => FileListingSystemHandle.listFiles(handle)));
-        }
-        const entry = transferItem.webkitGetAsEntry();
-        if (entry) {
-            return FileListingWebkit.listFilesRecursive(entry);
-        }
-        return this.legacyFileListing(transferItem);
-    }
-    legacyFileListing(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 {
     /***************************************************************************
      *                                                                         *
@@ -10979,7 +10711,18 @@ class ElderBlobViewerComponent {
         this._url$ = new BehaviorSubject(null);
         this._mimeType$ = new BehaviorSubject(null);
         this.destroy$ = new Subject();
-        this._displayUnknownAsText = false;
+        /***************************************************************************
+         *                                                                         *
+         * Properties                                                              *
+         *                                                                         *
+         **************************************************************************/
+        /**
+         * Attempt to display unknown blobs as text. (i.e. mime-type is octet-stream)
+         * @param unknownAsText
+         */
+        this.displayUnknownAsText = input(false, {
+            transform: (input) => coerceBooleanProperty(input)
+        });
     }
     /***************************************************************************
      *                                                                         *
@@ -10993,21 +10736,6 @@ class ElderBlobViewerComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * Attempt to display unknown blobs as text. (i.e. mime-type is octet-stream)
-     * @param unknownAsText
-     */
-    set displayUnknownAsText(unknownAsText) {
-        // TODO FIX RACE CONDITION:
-        //    Since this property is not reactive, it must be set first.
-        //    Otherwise, it will still be false, even if set to true!
-        this._displayUnknownAsText = coerceBooleanProperty(unknownAsText);
-    }
     /**
      * Set a in memory blob to display.
      * @param blob
@@ -11086,7 +10814,7 @@ class ElderBlobViewerComponent {
         });
     }
     canDisplayAsText(mimeType) {
-        const can = mimeType.isText || (this._displayUnknownAsText && mimeType.isOctetStream);
+        const can = mimeType.isText || (this.displayUnknownAsText() && mimeType.isOctetStream);
         // TODO _displayUnknownAsText might be null due race condition see todo above.
         // this.logger.debug('canDisplayAsText(' + mimeType.value + ') --> '
         //  + can + ' ---> this._displayUnknownAsText:' + this._displayUnknownAsText, mimeType);
@@ -11098,14 +10826,12 @@ class ElderBlobViewerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderBlobViewerComponent, deps: [{ token: HttpClientPristine }, { token: i1.DomSanitizer }, { token: ElderToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: ElderBlobViewerComponent, isStandalone: true, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: "displayUnknownAsText", blob: "blob", blobUrl: "blobUrl", url: "url", mimeType: "mimeType" }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-border-radius:12px;border-radius:0;-webkit-box-shadow:0px 2px 14px #000;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.4", type: ElderBlobViewerComponent, isStandalone: true, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: { classPropertyName: "displayUnknownAsText", publicName: "displayUnknownAsText", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: false, isRequired: false, transformFunction: null }, blobUrl: { classPropertyName: "blobUrl", publicName: "blobUrl", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, mimeType: { classPropertyName: "mimeType", publicName: "mimeType", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-border-radius:12px;border-radius:0;-webkit-box-shadow:0px 2px 14px #000;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderBlobViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AsyncPipe], template: "<div class=\"layout-col full place-center-center document-viewer\">\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\"\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-border-radius:12px;border-radius:0;-webkit-box-shadow:0px 2px 14px #000;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"] }]
-        }], ctorParameters: () => [{ type: HttpClientPristine }, { type: i1.DomSanitizer }, { type: ElderToastService }], propDecorators: { displayUnknownAsText: [{
-                type: Input
-            }], blob: [{
+        }], ctorParameters: () => [{ type: HttpClientPristine }, { type: i1.DomSanitizer }, { type: ElderToastService }], propDecorators: { blob: [{
                 type: Input
             }], blobUrl: [{
                 type: Input
@@ -15947,6 +15673,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 type: Input
             }] } });
 
+class InputUtils {
+    static isNoInputArgs(input) {
+        return input === '';
+    }
+}
+
 class ElderMultipleOfUtil {
     /***************************************************************************
      *                                                                         *
@@ -15996,11 +15728,16 @@ class ElderMultipleOfUtil {
     }
 }
 class ElderMultipleOfValidator {
-    set elderMultipleOf(value) {
-        this._factor = value;
-    }
-    get factor() {
-        return this._factor;
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.factor = input(null, {
+            alias: 'elderMultipleOf',
+            transform: (input) => InputUtils.isNoInputArgs(input) ? null : input
+        });
     }
     /***************************************************************************
      *                                                                         *
@@ -16008,15 +15745,15 @@ class ElderMultipleOfValidator {
      *                                                                         *
      **************************************************************************/
     validate(control) {
-        if (this.factor) {
-            return ElderMultipleOfUtil.multipleOfValidator(this.factor)(control);
+        if (this.factor()) {
+            return ElderMultipleOfUtil.multipleOfValidator(this.factor())(control);
         }
         else {
             return null;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: ElderMultipleOfValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: ElderMultipleOfValidator, isStandalone: true, selector: "[elderMultipleOf][formControlName],[elderMultipleOf][formControl],[elderMultipleOf][ngModel]", inputs: { elderMultipleOf: "elderMultipleOf" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.4", type: ElderMultipleOfValidator, isStandalone: true, selector: "[elderMultipleOf][formControlName],[elderMultipleOf][formControl],[elderMultipleOf][ngModel]", inputs: { factor: { classPropertyName: "factor", publicName: "elderMultipleOf", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ElderMultipleOfValidator),
@@ -16037,9 +15774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                     ],
                     standalone: true
                 }]
-        }], propDecorators: { elderMultipleOf: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * This directive redirects the next focus element
@@ -16903,7 +16638,7 @@ class ElderTableActivationDirective {
         this._data = [];
         this.activeItem$ = new BehaviorSubject(null);
         this.rows$ = new BehaviorSubject([]);
-        this.activationOptions = {};
+        this._activationOptions = {};
     }
     /***************************************************************************
      *                                                                         *
@@ -16964,6 +16699,12 @@ class ElderTableActivationDirective {
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    set activationOptions(options) {
+        this.activationOptions = InputUtils.isNoInputArgs(options) ? options : {};
+    }
+    get activationOptions() {
+        return this._activationOptions;
+    }
     get activeItemEventChange() {
         return this.itemActivationEventSubject;
     }
@@ -17161,12 +16902,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                     exportAs: 'elderTableActivation',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: ElderTableComponent }], propDecorators: { activationOptions: [{
-                type: Input,
-                args: ['elderTableActivation']
-            }], onKeydown: [{
+        }], ctorParameters: () => [{ type: ElderTableComponent }], propDecorators: { onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], activationOptions: [{
+                type: Input,
+                args: ['elderTableActivation']
             }], activeItemEventChange: [{
                 type: Output
             }], activeItemChange: [{