@lenne.tech/ng-base 14.34.0 → 14.36.0

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

@@ -1991,12 +1991,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class ModelTableComponent {
-    constructor(graphQLMetaService, graphQLService, cmsService, toastService, scrollService) {
+    constructor(graphQLMetaService, graphQLService, cmsService, toastService, scrollService, storageService) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
         this.cmsService = cmsService;
         this.toastService = toastService;
         this.scrollService = scrollService;
+        this.storageService = storageService;
         this.createMode = false;
         this.logging = false;
         this.create = true;
@@ -2027,6 +2028,30 @@ class ModelTableComponent {
         this.componentRef = undefined;
         this.selectedPageIndex = 0;
         this.pages = [];
+        this.pageItemsLimitControl = new FormControl(25);
+        this.pageOptions = [
+            {
+                text: '25',
+                value: 25,
+            },
+            {
+                text: '50',
+                value: 50,
+            },
+            {
+                text: '75',
+                value: 75,
+            },
+            {
+                text: '100',
+                value: 100,
+            },
+            {
+                text: '200',
+                value: 200,
+            },
+        ];
+        this.subscription = new Subscription();
     }
     ngAfterViewInit() {
         // Needed time out to prevent ExpressionChangedAfterItHasBeenCheckedError
@@ -2035,6 +2060,8 @@ class ModelTableComponent {
         }, 10);
     }
     ngOnInit() {
+        const pageItemsLimit = this.storageService.load('pageItemsLimit');
+        this.pageItemsLimitControl.setValue(pageItemsLimit ? pageItemsLimit : 25, { onlySelf: true, emitEvent: false });
         this.graphQLMetaService.getMeta().subscribe((meta) => {
             this.meta = meta;
             if (this.modelName) {
@@ -2063,6 +2090,9 @@ class ModelTableComponent {
         }
         this.setChangesInComponentRef();
     }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
     /**
      * We're using the `meta` service to get the fields that are available for the `find` query for the model we're working
      * with. We're then using that information to populate the `availableFields` array
@@ -2107,8 +2137,19 @@ class ModelTableComponent {
             console.log('ModelTableComponent::init->keys', keys);
             console.log('ModelTableComponent::init->availableFields', this.availableFields);
         }
-        this.selectedPageIndex = 0;
-        this.objects = await this.loadObjects(this.availableFields, 0, 25);
+        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
+        this.objects = await this.loadObjects(this.availableFields, 0, this.pageItemsLimitControl.value);
+        this.subscribeToPageItems();
+    }
+    subscribeToPageItems() {
+        this.subscription.add(this.pageItemsLimitControl.valueChanges.subscribe({
+            next: async (value) => {
+                this.selectedPageIndex = 0;
+                this.storageService.save('pageIndex', this.selectedPageIndex);
+                this.objects = await this.loadObjects(this.availableFields, 0, value);
+                this.storageService.save('pageItemsLimit', value);
+            },
+        }));
     }
     integrateCustomFormComponent() {
         if (!this.customFormTemplate || this.componentRef) {
@@ -2166,7 +2207,6 @@ class ModelTableComponent {
             this.graphQLService
                 .graphQl(this.queryName, {
                 arguments: {
-                    sort: [{ field: 'createdAt', order: SortOrderEnum.ASC }],
                     limit: isFindAndCount ? limit : null,
                     skip: isFindAndCount ? skip : null,
                 },
@@ -2187,9 +2227,16 @@ class ModelTableComponent {
                         while (numbers < this.totalCount) {
                             this.pages.push({
                                 skip: numbers,
-                                limit: 25,
+                                limit: this.pageItemsLimitControl.value,
                             });
-                            numbers = numbers + 25;
+                            numbers = numbers + this.pageItemsLimitControl.value;
+                        }
+                        const loadedIndex = this.storageService.load('pageIndex');
+                        if (loadedIndex) {
+                            if (loadedIndex > this.pages.length) {
+                                this.selectedPageIndex = 0;
+                                this.storageService.save('pageIndex');
+                            }
                         }
                     }
                     else {
@@ -2218,13 +2265,16 @@ class ModelTableComponent {
             this.idSelected.emit(this.id);
         }
     }
+    openNewTab(object) {
+        window.open(location.href + '/' + object['id'], '_blank');
+    }
     /**
      * It calls the duplicateObject function in the cmsService, passing in the id of the object to be duplicated and the
      * modelName of the object
      */
     async duplicateObject(id) {
         await this.cmsService.duplicateObject(id, this.camelModelName);
-        this.selectedPageIndex = 0;
+        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
         this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
     }
     /**
@@ -2233,7 +2283,7 @@ class ModelTableComponent {
      */
     async deleteObject(id) {
         await this.cmsService.deleteObject(id, this.camelModelName);
-        this.selectedPageIndex = 0;
+        this.selectedPageIndex = this.storageService.load('pageIndex') ? this.storageService.load('pageIndex') : 0;
         this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
     }
     /**
@@ -2277,7 +2327,9 @@ class ModelTableComponent {
                                 description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' erfolgreich importiert.',
                             });
                             if (i === jsonResult.length - 1) {
-                                this.selectedPageIndex = 0;
+                                this.selectedPageIndex = this.storageService.load('pageIndex')
+                                    ? this.storageService.load('pageIndex')
+                                    : 0;
                                 this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
                             }
                         },
@@ -2332,17 +2384,21 @@ class ModelTableComponent {
         return items;
     }
     async selectPage(i) {
+        if (!this.pages[i]) {
+            return;
+        }
         this.selectedPageIndex = i;
         await this.scrollService.scrollTo('model-table-top');
+        this.storageService.save('pageIndex', this.selectedPageIndex);
         this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
     }
 }
-ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : 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    <nav *ngIf=\"totalCount >= 0\">\n      <ul class=\"pagination justify-content-center\">\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex - 1)\"\n            aria-label=\"Previous\"\n            [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n          >\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n          <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n        </li>\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex + 1)\"\n            aria-label=\"Next\"\n            [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n          >\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\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=\"id || 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    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\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=\"!(id || 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}.page-item{cursor:pointer}\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.2.12", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }, { token: i1$1.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : 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=\"container-fluid\" *ngIf=\"totalCount >= 0 && pages.length > 1\">\n      <nav class=\"d-flex row\">\n        <div class=\"col-12 col-md-2\"></div>\n        <ul class=\"pagination justify-content-center col-12 col-md-8\">\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex - 1)\"\n              aria-label=\"Previous\"\n              [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n            >\n              <span aria-hidden=\"true\">&laquo;</span>\n            </a>\n          </li>\n          <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n            <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n          </li>\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex + 1)\"\n              aria-label=\"Next\"\n              [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n            >\n              <span aria-hidden=\"true\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"col-12 col-md-2\">\n          <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n        </div>\n      </nav>\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\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n        In neuen Tab \u00F6ffnen\n      </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=\"id || 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    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\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=\"!(id || 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;z-index:999}.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}.page-item{cursor:pointer}\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: SelectComponent, selector: "base-select", inputs: ["id", "name", "infoText", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { 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.2.12", ngImport: i0, type: ModelTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : 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    <nav *ngIf=\"totalCount >= 0\">\n      <ul class=\"pagination justify-content-center\">\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex - 1)\"\n            aria-label=\"Previous\"\n            [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n          >\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n          <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n        </li>\n        <li class=\"page-item\">\n          <a\n            class=\"page-link\"\n            (click)=\"selectPage(selectedPageIndex + 1)\"\n            aria-label=\"Next\"\n            [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n          >\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\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=\"id || 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    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\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=\"!(id || 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}.page-item{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.ScrollService }]; }, propDecorators: { modelName: [{
+            args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!id && !createMode\">\n  <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n    <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n      {{\n        modelConfig?.plural\n          ? modelConfig?.plural\n          : modelConfig?.label\n          ? modelConfig?.label\n          : 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=\"container-fluid\" *ngIf=\"totalCount >= 0 && pages.length > 1\">\n      <nav class=\"d-flex row\">\n        <div class=\"col-12 col-md-2\"></div>\n        <ul class=\"pagination justify-content-center col-12 col-md-8\">\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex - 1)\"\n              aria-label=\"Previous\"\n              [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n            >\n              <span aria-hidden=\"true\">&laquo;</span>\n            </a>\n          </li>\n          <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n            <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n          </li>\n          <li class=\"page-item\">\n            <a\n              class=\"page-link\"\n              (click)=\"selectPage(selectedPageIndex + 1)\"\n              aria-label=\"Next\"\n              [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n            >\n              <span aria-hidden=\"true\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"col-12 col-md-2\">\n          <base-select [options]=\"pageOptions\" [control]=\"pageItemsLimitControl\"></base-select>\n        </div>\n      </nav>\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\" (click)=\"openNewTab({ id: contextMenuData.clickedElement?.id })\">\n        In neuen Tab \u00F6ffnen\n      </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=\"id || 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    *ngIf=\"!modelConfig?.customTemplateComponent\"\n    [modelName]=\"camelModelName\"\n    [label]=\"modelConfig?.label\"\n    [config]=\"config\"\n    [logging]=\"logging\"\n    [id]=\"id\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n    [showFavButton]=\"showFavButton\"\n  ></base-model-form>\n  <ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\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=\"!(id || 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;z-index:999}.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}.page-item{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.ScrollService }, { type: i1$1.StorageService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
                 type: Input