@elderbyte/ngx-starter 15.7.0 → 15.7.1

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -9604,11 +9604,23 @@ class ElderFileSelectDirective {
         }
     }
     set elderFileSelectMultiple(value) {
-        this._multiple = value;
+        this._multiple = coerceBooleanProperty(value);
         if (this._fileInput) {
             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) {
+            this.renderer.setAttribute(this._fileInput, 'webkitdirectory', 'true');
+            this.renderer.setAttribute(this._fileInput, 'directory', 'true');
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -9644,6 +9656,10 @@ class ElderFileSelectDirective {
         if (this._multiple) {
             this.renderer.setProperty(this._fileInput, 'multiple', this._multiple);
         }
+        if (this._directory) {
+            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));
     }
     removeFileSelect() {
@@ -9658,33 +9674,36 @@ class ElderFileSelectDirective {
     }
     fileInputChanged(event) {
         const fileList = this._fileInput.files;
-        this.emitFileList(fileList);
+        const files = this.toArray(fileList);
+        this.logger.debug('fileInputChanged, files:', files);
+        this.emitFileList(files);
         this.clearFileList();
     }
     clearFileList() {
         // not nice but works
         this._fileInput.value = null;
     }
-    emitFileList(fileList) {
-        if (fileList.length > 0) {
-            this.elderFileSelectChange.next(this.toSet(fileList));
-            if (!this.elderFileSelectMultiple) {
-                this.elderSingleFileSelectChange.emit(fileList.item(0));
-            }
+    emitFileList(files) {
+        if (files.length > 0) {
+            this.elderFileSelectChange.next(files);
+            this.elderSingleFileSelectChange.emit(files[0]);
+        }
+        else {
+            this.logger.warn('User did not select any File or the Folder was empty.');
         }
     }
-    toSet(fileList) {
-        const files = new Set();
+    toArray(fileList) {
+        const files = [];
         for (const key in fileList) {
             if (!isNaN(parseInt(key, 0))) {
-                files.add(fileList[key]);
+                files.push(fileList[key]);
             }
         }
         return files;
     }
 }
 ElderFileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderFileSelectDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ElderFileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: { elderFileSelect: "elderFileSelect", elderFileSelectMultiple: "elderFileSelectMultiple" }, outputs: { elderFileSelectChange: "elderFileSelectChange", elderSingleFileSelectChange: "elderSingleFileSelectChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+ElderFileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileSelectDirective, 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: "15.2.0", ngImport: i0, type: ElderFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9698,6 +9717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Input
             }], elderFileSelectMultiple: [{
                 type: Input
+            }], elderFileSelectDirectory: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -9737,7 +9758,7 @@ class ElderFileSelectComponent {
     }
 }
 ElderFileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderFileSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple", "elderFileSelectDirectory"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderFileSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n" }]
@@ -9765,17 +9786,10 @@ class ElderFileUploadComponent {
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.files = new Set();
+        this.files = [];
         this.multiple = false;
         this.accept = undefined;
     }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
-    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -9801,10 +9815,10 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.length === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.length}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : undefined)\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-file-upload', template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n" }]
+            args: [{ selector: 'elder-file-upload', template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.length === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.length}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : undefined)\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { files: [{
                 type: Input
             }], multiple: [{