ngx-material-entity 15.1.4 → 15.1.5

package/fesm2020/ngx-material-entity.mjs

@@ -47,6 +47,7 @@ import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import * as i10 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import * as js2xml from 'js2xmlparser';
 
 /**
  * The enum Values for all the different DecoratorTypes.
@@ -152,6 +153,18 @@ class LodashUtilities {
     static isArray(value) {
         return isArray(value);
     }
+    /* istanbul ignore next */
+    /**
+     * Checks if value is classified as an object that is not an array.
+     *
+     * @param value - The value to check.
+     * @returns Returns true if value is correctly classified, else false.
+     */
+    static isObject(value) {
+        return value !== null
+            && typeof value === 'object'
+            && !LodashUtilities.isArray(value);
+    }
 }
 
 /**
@@ -494,10 +507,23 @@ class FileUtilities {
      * @param fileData - The file data. Needs to contain a blob.
      */
     static downloadSingleFile(fileData) {
+        this.downLoadBlob(fileData.file, fileData.name);
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Downloads a blob.
+     *
+     * @param blob - The blob to download.
+     * @param name - The name of the downloaded file.
+     */
+    static downLoadBlob(blob, name) {
         const a = document.createElement('a');
-        const objectUrl = URL.createObjectURL(fileData.file);
+        const objectUrl = URL.createObjectURL(blob);
         a.href = objectUrl;
-        a.download = fileData.name;
+        if (name) {
+            a.download = name;
+        }
         a.click();
         URL.revokeObjectURL(objectUrl);
     }
@@ -1748,6 +1774,22 @@ class EntityService {
     }
     // TODO: Find a way to use blobs with jest
     /* istanbul ignore next */
+    /**
+     * Imports everything from the provided json file.
+     *
+     * @param file - The json file to import from.
+     * @returns All entities that have been imported.
+     */
+    async import(file) {
+        const formData = new FormData();
+        formData.append('import', file);
+        const result = await firstValueFrom(this.http.post(`${this.baseUrl}/import`, formData));
+        this.entities.push(...result);
+        this.entitiesSubject.next(this.entities);
+        return result;
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
     /**
      * Creates the entity with form data when the entity contains files in contrast to creating it with a normal json body.
      * All file values are stored inside their respective property key and their name.
@@ -3993,14 +4035,19 @@ class BaseDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ?? 'Search', data.createButtonLabel ?? 'Create', data.defaultEdit ?? 'dialog', data.searchString ?? defaultSearchFunction, data.allowCreate ?? (() => true), data.allowRead ?? (() => true), data.allowUpdate ?? (() => true), data.allowDelete ?? (() => true), data.multiSelectActions ?? [], data.multiSelectLabel ?? 'Actions', data.displayLoadingSpinner ?? true, data.EntityClass, data.edit, data.create);
+        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ?? 'Search', data.createButtonLabel ?? 'Create', data.defaultEdit ?? 'dialog', data.searchString ?? defaultSearchFunction, data.allowCreate ?? (() => true), data.allowRead ?? (() => true), data.allowUpdate ?? (() => true), data.allowDelete ?? (() => true), data.multiSelectActions ?? [], data.multiSelectLabel ?? 'Actions', data.displayLoadingSpinner ?? true, data.allowJsonImport ?? false, data.importActionData ?? {
+            displayName: 'Import (JSON)',
+            confirmDialogData: new ConfirmDialogDataBuilder()
+                .withDefault('text', ['Do you really want to import entities from the provided file?'])
+                .getResult()
+        }, data.EntityClass, data.edit, data.create);
     }
 }
 /**
  * The internal TableData. Requires all default values the user can leave out.
  */
 class BaseDataInternal {
-    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, defaultEdit, searchString, allowCreate, allowRead, allowUpdate, allowDelete, multiSelectActions, multiSelectLabel, displayLoadingSpinner, EntityClass, edit, create) {
+    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, defaultEdit, searchString, allowCreate, allowRead, allowUpdate, allowDelete, multiSelectActions, multiSelectLabel, displayLoadingSpinner, allowJsonImport, importActionData, EntityClass, edit, create) {
         this.title = title;
         this.displayColumns = displayColumns;
         this.EntityServiceClass = EntityServiceClass;
@@ -4016,6 +4063,8 @@ class BaseDataInternal {
         this.multiSelectActions = multiSelectActions;
         this.multiSelectLabel = multiSelectLabel;
         this.displayLoadingSpinner = displayLoadingSpinner;
+        this.allowJsonImport = allowJsonImport;
+        this.importActionData = importActionData;
         this.edit = edit;
         this.create = create;
     }
@@ -4104,6 +4153,10 @@ class NgxMatEntityTableComponent {
      */
     ngOnInit() {
         this.data = new TableDataBuilder(this.tableData).getResult();
+        this.importAction = {
+            ...this.data.baseData.importActionData,
+            action: () => this.startImportJson()
+        };
         this.entityService = this.injector.get(this.data.baseData.EntityServiceClass);
         const givenDisplayColumns = this.data.baseData.displayColumns.map((v) => v.displayName);
         if (this.data.baseData.multiSelectActions.length) {
@@ -4132,6 +4185,33 @@ class NgxMatEntityTableComponent {
             this.isLoading = false;
         });
     }
+    startImportJson() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json';
+        input.onchange = async () => {
+            if (input.files) {
+                this.importJson(input.files[0]);
+            }
+        };
+        input.click();
+    }
+    importJson(file) {
+        const dialogData = new ConfirmDialogDataBuilder(this.importAction.confirmDialogData)
+            .withDefault('text', this.data.baseData.importActionData.confirmDialogData?.text)
+            .withDefault('title', this.importAction.displayName)
+            .getResult();
+        const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+            data: dialogData,
+            autoFocus: false,
+            restoreFocus: false
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res == true) {
+                void this.entityService.import(file);
+            }
+        });
+    }
     /**
      * Edits an entity. This either calls the edit-Method provided by the user or uses a default edit-dialog.
      *
@@ -4270,10 +4350,10 @@ class NgxMatEntityTableComponent {
     }
 }
 NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" [disabled]=\"importAction.enabled?.(this.selection.selected) === false\" (click)=\"runMultiAction(importAction)\" mat-menu-item>\n            {{importAction.displayName}}\n        </button>\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" [disabled]=\"importAction.enabled?.(this.selection.selected) === false\" (click)=\"runMultiAction(importAction)\" mat-menu-item>\n            {{importAction.displayName}}\n        </button>\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.Injector }, { type: i3$1.Router }]; }, propDecorators: { tableData: [{
                 type: Input
             }], paginator: [{
@@ -4339,6 +4419,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * Encapsulates functionality of the js2xml package.
+ */
+class Js2XmlUtilities {
+    /**
+     * Returns a XML string representation of the specified object using the specified options.
+     *
+     * @param root - Name of the xml root element.
+     * @param value - The json value to convert. Will be a child of root.
+     * @param options - Additional options for the conversion.
+     * @returns The converted xml string.
+     */
+    static parse(root, value, options) {
+        return js2xml.parse(root, value, options);
+    }
+}
+
+const CSV_SEPARATOR = ';';
+/**
+ * A multi select action that exports the data as a json file.
+ *
+ * @param selectedEntities - The selected entities to export.
+ */
+function exportAsJsonMultiAction(selectedEntities) {
+    const blob = new Blob([JSON.stringify(selectedEntities, null, '\t')], { type: '.json' });
+    FileUtilities.downLoadBlob(blob, 'export.json');
+}
+/**
+ * A multi select action that exports the data as a csv file.
+ * Object values get stringified.
+ *
+ * @param selectedEntities - The selected entities to export.
+ */
+function exportAsCsvMultiAction(selectedEntities) {
+    const blob = new Blob([convertToCsv(selectedEntities, ReflectUtilities.ownKeys(selectedEntities[0]))], { type: '.csv' });
+    FileUtilities.downLoadBlob(blob, 'export.csv');
+}
+/**
+ * A multi select action that exports the data as a xml file.
+ * Object values get stringified.
+ *
+ * @param selectedEntities - The selected entities to export.
+ */
+function exportAsXmlMultiAction(selectedEntities) {
+    const xmlString = Js2XmlUtilities.parse('values', selectedEntities);
+    const blob = new Blob([xmlString], { type: '.xml' });
+    FileUtilities.downLoadBlob(blob, 'export.xml');
+}
+// eslint-disable-next-line jsdoc/require-jsdoc
+function convertToCsv(array, headerList) {
+    const headerRow = headerList.join(CSV_SEPARATOR);
+    let result = headerRow + '\r\n';
+    for (const entity of array) {
+        result += getLineForEntity(headerList, entity) + '\r\n';
+    }
+    return result;
+}
+// eslint-disable-next-line jsdoc/require-jsdoc
+function getLineForEntity(headerList, entity) {
+    let line = '';
+    for (const head of headerList) {
+        line = line += getLineForHeader(entity, head);
+    }
+    line.slice(0, line.length - 1);
+    return line;
+}
+// eslint-disable-next-line jsdoc/require-jsdoc
+function getLineForHeader(entity, head) {
+    const value = entity[head];
+    if (LodashUtilities.isObject(value)) {
+        return `${JSON.stringify(value)}${CSV_SEPARATOR}`;
+    }
+    if (LodashUtilities.isArray(value) && LodashUtilities.isObject(value[0])) {
+        return `${value.map(v => JSON.stringify(v))}${CSV_SEPARATOR}`;
+    }
+    return `${entity[head]}${CSV_SEPARATOR}`;
+}
+
 /**
  * The base options for all propertyDecorators.
  */
@@ -4957,5 +5115,5 @@ function UnsavedChangesGuard(component) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, UnsavedChangesGuard, array, boolean, custom, date, defaultEditDataRoute, file, number, object, referencesMany, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, UnsavedChangesGuard, array, boolean, custom, date, defaultEditDataRoute, exportAsCsvMultiAction, exportAsJsonMultiAction, exportAsXmlMultiAction, file, number, object, referencesMany, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map