@porscheinformatik/material-addons 17.0.0 → 17.0.2

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -54,6 +54,8 @@ import * as i1$5 from '@angular/cdk/a11y';
 import * as i3$2 from '@angular/cdk/bidi';
 import * as i2$4 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
+import * as i4$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 
 class MaterialActionButtonComponent {
     constructor() {
@@ -2193,7 +2195,9 @@ class DataTableComponent {
         return this.selectionModel.isSelected(rowId);
     }
     setFilterValue(value) {
-        this.dataSource.filter = value?.trim().toLowerCase();
+        if (this.dataSource) {
+            this.dataSource.filter = value?.trim().toLowerCase();
+        }
     }
     onRowEvent(event, row, action = this.defaultAction) {
         if (row?.parentId) {
@@ -2352,7 +2356,7 @@ class DataTableComponent {
     }
     unsetPageSizeIfNecessary() {
         if (!this.useAsync && !this.isPaginationEnabled) {
-            const dataCount = this.dataSource.data ? this.dataSource.data.length : 0;
+            const dataCount = this.dataSource?.data ? this.dataSource.data.length : 0;
             this.paginatorPageSize = dataCount;
             this.paginatorLength = dataCount;
         }
@@ -3071,6 +3075,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 }]
         }] });
 
+class DragAndDropDirectiveDirective {
+    constructor() {
+        this.onFileDropped = new EventEmitter();
+        this.background = '$background-color';
+        this.opacity = '1';
+    }
+    //Dragover listener
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$selection-background';
+        this.opacity = '0.8';
+    }
+    //Dragleave listener
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$background-color';
+        this.opacity = '1';
+    }
+    //Drop listener
+    ondrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$background-color';
+        this.opacity = '1';
+        let files = event.dataTransfer.files;
+        if (files.length > 0) {
+            this.onFileDropped.emit(files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DragAndDropDirectiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DragAndDropDirectiveDirective, isStandalone: true, selector: "[madDragAndDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "style.background-color": "this.background", "style.opacity": "this.opacity" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DragAndDropDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madDragAndDrop]',
+                    standalone: true
+                }]
+        }], propDecorators: { onFileDropped: [{
+                type: Output
+            }], background: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], opacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.showFileList = false;
+        this.fileEmitter = new EventEmitter();
+        this.errorEmitter = new EventEmitter();
+        this.fileList = [];
+        this.uploadError = false;
+    }
+    uploadFile(fileList) {
+        if (!this.multiple && (fileList.length > 1 || this.fileList.length === 1)) {
+            this.errorEmitter.emit("ONLY_SINGLE_FILE");
+            this.uploadError = false;
+            return;
+        }
+        if (this.accept && this.accept.length > 0) {
+            for (let i = 0; i < fileList.length; i++) {
+                this.getFileEnding(fileList.item(i).name);
+            }
+        }
+        if (!this.uploadError) {
+            for (let i = 0; i < fileList.length; i++) {
+                this.fileList.push(fileList.item(i));
+            }
+            this.fileEmitter.emit(fileList);
+        }
+        this.uploadError = false;
+    }
+    getFileEnding(name) {
+        const ending = name.substring(name.lastIndexOf('.') + 1);
+        if (this.accept.filter(a => a.toLowerCase() === ending.toLowerCase()).length === 0) {
+            this.errorEmitter.emit("FILETYPE_NOT_SUPPORTED");
+            this.uploadError = true;
+        }
+    }
+    openFile(file) {
+        window.open(window.URL.createObjectURL(file));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card (click)=\"fileInput.click()\"\n          (onFileDropped)=\"uploadFile($event)\"\n          class=\"uploadFileContainer\"\n          madDragAndDrop\n          id=\"uploadFileContainer\">\n  <input #fileInput\n         (change)=\"uploadFile($event.target.files)\"\n         (click)=\"fileInput.value = null\"\n         [accept]=\"accept\"\n         [id]=\"id\"\n         [multiple]=\"multiple\"\n         hidden type=\"file\">\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{text ? text : 'Upload'}}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{file.name}}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-file-upload', standalone: true, imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, TranslateModule, DragAndDropDirectiveDirective, MatChipsModule], template: "<mat-card (click)=\"fileInput.click()\"\n          (onFileDropped)=\"uploadFile($event)\"\n          class=\"uploadFileContainer\"\n          madDragAndDrop\n          id=\"uploadFileContainer\">\n  <input #fileInput\n         (change)=\"uploadFile($event.target.files)\"\n         (click)=\"fileInput.value = null\"\n         [accept]=\"accept\"\n         [id]=\"id\"\n         [multiple]=\"multiple\"\n         hidden type=\"file\">\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{text ? text : 'Upload'}}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{file.name}}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], showFileList: [{
+                type: Input
+            }], fileEmitter: [{
+                type: Output
+            }], errorEmitter: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of material-addons
  */
@@ -3079,5 +3201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
+export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
 //# sourceMappingURL=porscheinformatik-material-addons.mjs.map