@lenne.tech/ng-base 14.13.5 → 14.14.0

package/fesm2015/lenne.tech-ng-base-base-components.mjs

@@ -43,10 +43,10 @@ class InputComponent {
     }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein und ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine\n        Zahl und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: InputComponent, selector: "base-input", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", type: "type", required: "required", eyeButton: "eyeButton" }, outputs: { enter: "enter" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein und ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine\n        Zahl und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
+            args: [{ selector: 'base-input', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div class=\"input-group\">\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      class=\"form-control\"\n      [type]=\"type\"\n      [formControl]=\"control\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete ?? null\"\n      [tabIndex]=\"tabIndex ?? null\"\n      [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n      (keyup.enter)=\"enterEvent()\"\n      [attr.aria-describedby]=\"id + 'eye-button'\"\n    />\n    <button\n      class=\"btn btn-outline-primary\"\n      type=\"button\"\n      [id]=\"id + 'eye-button'\"\n      (click)=\"togglePasswordType()\"\n      *ngIf=\"eyeButton\"\n    >\n      <i class=\"bi bi-eye\" *ngIf=\"type === 'password'\"></i>\n      <i class=\"bi bi-eye-slash\" *ngIf=\"type === 'text'\"></i>\n    </button>\n\n    <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n      <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n      <div *ngIf=\"control?.errors?.['minlength']\">\n        Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['minlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['maxlength']\">\n        Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n        {{control.errors?.['maxlength']?.requiredLength}} Zeichen.\n      </div>\n      <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['pattern'] && type === 'tel'\">Bitte eine g\u00FCltige Telefonnummer angeben.</div>\n      <div *ngIf=\"control?.errors?.['invalidEmail']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n      <div *ngIf=\"control?.errors?.['matching']\">Die Passw\u00F6rter m\u00FCssen \u00FCberein stimmen.</div>\n      <div *ngIf=\"control?.errors?.['invalidSecurePassword']\">\n        Das Passwort ist zu unsicher. Es muss mind. 8 Zeichen lang sein, ein Gro\u00DFbustabe, ein Kleinbuchstabe, eine Zahl\n        und ein Sonderzeichen enthalten.\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".required:after{content:\" *\"}.input-group>.btn{min-width:100px}button{height:100%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -1702,22 +1702,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
         }] });
 
 class ModelTableComponent {
-    constructor(graphQLMetaService, graphQLService, cmsService) {
+    constructor(graphQLMetaService, graphQLService, cmsService, toastService) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
         this.cmsService = cmsService;
+        this.toastService = toastService;
         this.createMode = false;
         this.logging = false;
         this.create = true;
         this.update = true;
         this.delete = true;
+        this.import = true;
+        this.export = true;
         this.duplicate = true;
         this.config = {};
         this.fieldConfig = {};
         this.showFavButton = true;
-        this.uniqueField = 'id';
         this.idSelected = new EventEmitter();
         this.createModeChanged = new EventEmitter();
+        this.uniqueField = 'id';
         this.tableFields = {
             id: { label: 'ID' },
             name: { label: 'Name' },
@@ -1731,6 +1734,7 @@ class ModelTableComponent {
         this.availableFields = [];
         this.selectedId = '';
         this.queryName = null;
+        this.possibleFields = {};
     }
     ngOnInit() {
         this.graphQLMetaService.getMeta().subscribe((meta) => {
@@ -1762,38 +1766,40 @@ class ModelTableComponent {
      */
     init() {
         var _a, _b, _c;
-        this.availableFields = [];
-        this.camelModelName = this.kebabToCamelCase(this.modelName);
-        // Set query name
-        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryName)) {
-            this.queryName = 'find' + this.capitalizeFirstLetter(this.camelModelName) + 's';
-        }
-        else {
-            this.queryName = (_b = this.config) === null || _b === void 0 ? void 0 : _b.queryName;
-        }
-        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.tableFields) {
-            this.tableFields = this.config.tableFields;
-        }
-        if (this.logging) {
-            console.log('ModelTableComponent::init->modelName', this.modelName);
-            console.log('ModelTableComponent::init->camelModelName', this.camelModelName);
-            console.log('ModelTableComponent::init->queryName', this.queryName);
-            console.log('ModelTableComponent::init->tableFields', this.tableFields);
-        }
-        const possibleFields = this.meta.getFields(this.queryName).fields;
-        const keys = Object.keys(possibleFields);
-        const tableFieldKeys = Object.keys(this.tableFields);
-        tableFieldKeys === null || tableFieldKeys === void 0 ? void 0 : tableFieldKeys.forEach((field) => {
-            if (keys.includes(field)) {
-                this.availableFields.push(field);
+        return __awaiter(this, void 0, void 0, function* () {
+            this.availableFields = [];
+            this.camelModelName = this.kebabToCamelCase(this.modelName);
+            // Set query name
+            if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryName)) {
+                this.queryName = 'find' + this.capitalizeFirstLetter(this.camelModelName) + 's';
+            }
+            else {
+                this.queryName = (_b = this.config) === null || _b === void 0 ? void 0 : _b.queryName;
+            }
+            if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.tableFields) {
+                this.tableFields = this.config.tableFields;
+            }
+            if (this.logging) {
+                console.log('ModelTableComponent::init->modelName', this.modelName);
+                console.log('ModelTableComponent::init->camelModelName', this.camelModelName);
+                console.log('ModelTableComponent::init->queryName', this.queryName);
+                console.log('ModelTableComponent::init->tableFields', this.tableFields);
+            }
+            this.possibleFields = this.meta.getFields(this.queryName).fields;
+            const keys = Object.keys(this.possibleFields);
+            const tableFieldKeys = Object.keys(this.tableFields);
+            tableFieldKeys === null || tableFieldKeys === void 0 ? void 0 : tableFieldKeys.forEach((field) => {
+                if (keys.includes(field)) {
+                    this.availableFields.push(field);
+                }
+            });
+            if (this.logging) {
+                console.log('ModelTableComponent::init->possibleFields', this.possibleFields);
+                console.log('ModelTableComponent::init->keys', keys);
+                console.log('ModelTableComponent::init->availableFields', this.availableFields);
             }
+            this.objects = yield this.loadObjects(this.availableFields);
         });
-        if (this.logging) {
-            console.log('ModelTableComponent::init->possibleFields', possibleFields);
-            console.log('ModelTableComponent::init->keys', keys);
-            console.log('ModelTableComponent::init->availableFields', this.availableFields);
-        }
-        this.loadObjects(this.availableFields);
     }
     /**
      * When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
@@ -1809,32 +1815,35 @@ class ModelTableComponent {
      * @param fields - string[] - The fields you want to load from the database.
      */
     loadObjects(fields) {
-        const requestFields = [...fields];
-        const idInFields = requestFields.find((e) => e === 'id');
-        if (!idInFields) {
-            requestFields.push('id');
-        }
-        this.objects = [];
-        this.graphQLService
-            .graphQl(this.queryName, {
-            fields: requestFields,
-            type: GraphQLRequestType.QUERY,
-        })
-            .subscribe({
-            next: (value) => {
-                if (this.logging) {
-                    console.log('ModelTableComponent::loadObjects->value', value);
-                }
-                const arrayForSort = [...value];
-                this.objects = arrayForSort.sort((a, b) => {
-                    var _a, _b;
-                    return ((b === null || b === void 0 ? void 0 : b.createdAt) ? (_a = new Date(b === null || b === void 0 ? void 0 : b.createdAt)) === null || _a === void 0 ? void 0 : _a.getTime() : new Date().getTime()) -
-                        ((a === null || a === void 0 ? void 0 : a.createdAt) ? (_b = new Date(a === null || a === void 0 ? void 0 : a.createdAt)) === null || _b === void 0 ? void 0 : _b.getTime() : new Date().getTime());
-                });
-            },
-            error: (err) => {
-                console.log('Error on loading objects', err);
-            },
+        return new Promise((resolve, reject) => {
+            const requestFields = [...fields];
+            const idInFields = requestFields.find((e) => e === 'id');
+            if (!idInFields) {
+                requestFields.push('id');
+            }
+            this.graphQLService
+                .graphQl(this.queryName, {
+                fields: requestFields,
+                type: GraphQLRequestType.QUERY,
+            })
+                .subscribe({
+                next: (value) => {
+                    if (this.logging) {
+                        console.log('ModelTableComponent::loadObjects->value', value);
+                    }
+                    const arrayForSort = [...value];
+                    const objects = arrayForSort.sort((a, b) => {
+                        var _a, _b;
+                        return ((b === null || b === void 0 ? void 0 : b.createdAt) ? (_a = new Date(b === null || b === void 0 ? void 0 : b.createdAt)) === null || _a === void 0 ? void 0 : _a.getTime() : new Date().getTime()) -
+                            ((a === null || a === void 0 ? void 0 : a.createdAt) ? (_b = new Date(a === null || a === void 0 ? void 0 : a.createdAt)) === null || _b === void 0 ? void 0 : _b.getTime() : new Date().getTime());
+                    });
+                    resolve(objects);
+                },
+                error: (err) => {
+                    console.log('Error on loading objects', err);
+                    reject(err);
+                },
+            });
         });
     }
     /**
@@ -1858,7 +1867,7 @@ class ModelTableComponent {
     duplicateObject(id) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.cmsService.duplicateObject(id, this.camelModelName);
-            this.loadObjects(this.availableFields);
+            this.objects = yield this.loadObjects(this.availableFields);
         });
     }
     /**
@@ -1868,7 +1877,7 @@ class ModelTableComponent {
     deleteObject(id) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.cmsService.deleteObject(id, this.camelModelName);
-            this.loadObjects(this.availableFields);
+            this.objects = yield this.loadObjects(this.availableFields);
         });
     }
     /**
@@ -1883,13 +1892,97 @@ class ModelTableComponent {
     kebabToCamelCase(str) {
         return str.replace(/-./g, (match) => match[1].toUpperCase());
     }
+    /**
+     * Import objects from json file
+     */
+    processImport(event) {
+        // Create a new FileReader() object
+        const reader = new FileReader();
+        // Setup the callback event to run when the file is read
+        reader.onload = (readerEvent) => __awaiter(this, void 0, void 0, function* () {
+            let jsonResult = JSON.parse(readerEvent.target.result);
+            if (!Array.isArray(jsonResult)) {
+                jsonResult = [jsonResult];
+            }
+            for (let i = 0; i < jsonResult.length; i++) {
+                try {
+                    this.graphQLService
+                        .graphQl('create' + this.capitalizeFirstLetter(this.modelName), {
+                        arguments: { input: jsonResult[i] },
+                        fields: ['id'],
+                        type: GraphQLRequestType.MUTATION,
+                    })
+                        .subscribe({
+                        next: () => __awaiter(this, void 0, void 0, function* () {
+                            this.toastService.show({
+                                id: this.modelName + '-' + i + '-success',
+                                type: ToastType.SUCCESS,
+                                title: 'Erfolgreich',
+                                description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' erfolgreich importiert.',
+                            });
+                            if (i === jsonResult.length - 1) {
+                                this.objects = yield this.loadObjects(this.availableFields);
+                            }
+                        }),
+                        error: () => {
+                            this.toastService.show({
+                                id: this.modelName + '-' + i + '-error',
+                                type: ToastType.ERROR,
+                                title: 'Error',
+                                description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' konnte nicht importiert werden.',
+                            });
+                        },
+                    });
+                }
+                catch (e) {
+                    this.toastService.show({
+                        id: this.modelName + '-' + i + '-error',
+                        type: ToastType.ERROR,
+                        title: 'Error',
+                        description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' konnte nicht importiert werden.',
+                    });
+                }
+            }
+        });
+        // Read the file
+        reader.readAsText(event.target.files[0]);
+    }
+    /**
+     * Export objects as json
+     */
+    processExport() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const keys = this.getAllKeys();
+            const items = yield this.loadObjects(keys);
+            const data = JSON.stringify(items);
+            const blob = new Blob([data], { type: 'text/json;charset=utf-8;' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.setAttribute('href', url);
+            link.setAttribute('download', this.modelName + 's.json');
+            document.body.appendChild(link);
+            link.click();
+        });
+    }
+    /**
+     * Get all keys for request to export objects as json
+     */
+    getAllKeys() {
+        const items = [];
+        for (const [key, value] of Object.entries(this.possibleFields)) {
+            if (!this.possibleFields[key].fields || Object.keys(this.possibleFields[key].fields).length === 0) {
+                items.push(key);
+            }
+        }
+        return items;
+    }
 }
-ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }], target: i0.ɵɵFactoryTarget.Component });
-ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", duplicate: "duplicate", config: "config", fieldConfig: "fieldConfig", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"camelModelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(selectedId || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
+ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", config: "config", fieldConfig: "fieldConfig", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n      <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n        <i\n          class=\"bi bi-three-dots-vertical\"\n          id=\"settingsDropdown\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          data-bs-auto-close=\"true\"\n          aria-expanded=\"false\"\n        ></i>\n        <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n        </ul>\n      </div>\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"camelModelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(selectedId || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"camelModelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(selectedId || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }]; }, propDecorators: { modelName: [{
+            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(camelModelName) + 's'\n      }}\n    </h2>\n    <div class=\"d-flex align-items-center d-none d-lg-block\">\n      <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n      <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n        <i\n          class=\"bi bi-three-dots-vertical\"\n          id=\"settingsDropdown\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          data-bs-auto-close=\"true\"\n          aria-expanded=\"false\"\n        ></i>\n        <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n          <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n        </ul>\n      </div>\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n\n  <div\n    class=\"table-responsive\"\n    [ltContextMenu]=\"contextMenu\"\n    [selectors]=\"'.object-col'\"\n    #contextMenuData=\"contextMenuData\"\n  >\n    <table class=\"table table-hover bg-white d-none d-lg-table\">\n      <thead>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let field of availableFields\"\n            [baseSort]=\"objects\"\n            data-order=\"desc\"\n            [attr.data-name]=\"field\"\n          >\n            {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n          <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n      <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n        <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n          <b *ngIf=\"i > 0\"\n            >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n          >\n          <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\n            <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n              {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n            </ng-container>\n\n            <ng-container *ngIf=\"tableFields[field]?.enumValues\">\n              {{ tableFields[field]?.enumValues[object[field]]?.text }}\n            </ng-container>\n\n            <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n              {{ object[field] | baseEllipses: 60 }}\n            </ng-container>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"context-menu\" #contextMenu>\n      <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n      <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n        Duplizieren\n      </div>\n      <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n        L\u00F6schen\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"camelModelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n</div>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n  <base-fab-button\n    [fabIcon]=\"'bi-plus'\"\n    (click)=\"createNewObject()\"\n    *ngIf=\"!(selectedId || createMode) && showFavButton\"\n  ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
                 type: Input
@@ -1903,6 +1996,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], import: [{
+                type: Input
+            }], export: [{
+                type: Input
             }], duplicate: [{
                 type: Input
             }], config: [{