@lenne.tech/ng-base 14.0.5 → 14.1.0

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, Directive, Inject, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, Validators, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { trigger, transition, query, style, animate } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import * as i1$1 from '@lenne.tech/ng-base/shared';
-import { ToastType, GraphQLRequestType, BasicUser } from '@lenne.tech/ng-base/shared';
+import { ToastType, Sort, GraphQLRequestType, BasicUser } from '@lenne.tech/ng-base/shared';
 import * as i2$1 from '@angular/router';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
@@ -443,6 +443,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             args: [{ selector: 'base-breadcrumb', template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\">\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.BreadcrumbService }]; } });
 
+class SortDirective {
+    constructor(renderer, targetElem, document) {
+        this.renderer = renderer;
+        this.targetElem = targetElem;
+    }
+    /**
+     * Sorts columns on click
+     */
+    sortColumn() {
+        const items = document.getElementsByTagName('th');
+        for (let i = 0; i < items.length; i++) {
+            items[i].classList.remove('asc');
+            items[i].classList.remove('desc');
+        }
+        const sort = new Sort();
+        const elem = this.targetElem.nativeElement;
+        const order = elem.getAttribute('data-order');
+        const type = elem.getAttribute('data-type');
+        const property = elem.getAttribute('data-name');
+        if (order === 'desc') {
+            this.baseSort.sort(sort.startSort(property, order, type));
+            elem.setAttribute('data-order', 'asc');
+            elem.classList.remove('desc');
+            elem.classList.add('asc');
+        }
+        else {
+            this.baseSort.sort(sort.startSort(property, order, type));
+            elem.setAttribute('data-order', 'desc');
+            elem.classList.remove('asc');
+            elem.classList.add('desc');
+        }
+    }
+}
+SortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SortDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+SortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: SortDirective, selector: "[baseSort]", inputs: { baseSort: "baseSort" }, host: { listeners: { "click": "sortColumn()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baseSort]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { baseSort: [{
+                type: Input
+            }], sortColumn: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Directive vor context menu
+ * See https://stackblitz.com/edit/angular-custom-context-menu
+ */
+class ContextMenuDirective {
+    constructor(el) {
+        this.el = el;
+        this.xGap = 0;
+        this.yGap = 0;
+        this.overflowSpace = 10;
+        this.selectors = '*';
+        this.clickedElement = null;
+        this.previousDisplayStatus = null;
+    }
+    ngOnInit() {
+        if (this.ltContextMenu) {
+            this.previousDisplayStatus = this.ltContextMenu.style.display;
+        }
+        // Add a click listener to the window,
+        // so that we can close the context menu on left click
+        window.addEventListener('click', () => {
+            this.showContextMenu(null, false);
+        });
+        // Close context menu when escape is pressed
+        window.addEventListener('keydown', (e) => {
+            if (e.code === 'Escape') {
+                this.showContextMenu(null, false);
+            }
+        });
+        // Add an event listener to listen to the 'contextmenu' event
+        this.el.nativeElement.addEventListener('contextmenu', (e) => {
+            // Prevent the default context menu to popup
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+            // Shows our own context menu
+            this.showContextMenu(e, true);
+        });
+    }
+    // Shows or hides our custom context menu, which is specified as a input
+    showContextMenu(event, show) {
+        const cm = this.ltContextMenu;
+        if (cm) {
+            // Try to open context menu
+            if (show && event && event instanceof MouseEvent) {
+                // Get valid clicked structureElement
+                const clickedElement = event?.target?.closest(this.selectors);
+                if (clickedElement) {
+                    this.clickedElement = clickedElement;
+                    setTimeout(() => {
+                        // Set display status
+                        cm.style.display = 'block';
+                        // Calculate top position
+                        let top = event.y + this.yGap;
+                        if (top + cm.offsetHeight + 10 > document.documentElement.clientHeight) {
+                            top = document.documentElement.clientHeight - cm.offsetHeight - this.overflowSpace;
+                        }
+                        // Calculate left position
+                        let left = event.x + this.xGap;
+                        if (left + cm.offsetWidth + 10 > document.documentElement.clientWidth) {
+                            left = document.documentElement.clientWidth - cm.offsetWidth - this.overflowSpace;
+                        }
+                        // Set position
+                        cm.style.top = top + 'px';
+                        cm.style.left = left + 'px';
+                        // Show
+                        cm.style.opacity = '1.0';
+                        cm.style['pointer-events'] = 'auto';
+                    }, 1);
+                    return;
+                }
+            }
+            // Close context menu
+            this.clickedElement = null;
+            if (this.previousDisplayStatus) {
+                cm.style.display = this.previousDisplayStatus;
+            }
+            cm.style.opacity = '0.01';
+            cm.style['pointer-events'] = 'none';
+        }
+    }
+}
+ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: { contextMenuData: "contextMenuData", ltContextMenu: "ltContextMenu", xGap: "xGap", yGap: "yGap", overflowSpace: "overflowSpace", selectors: "selectors" }, outputs: { clickedElement: "clickedElement" }, exportAs: ["contextMenuData"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ltContextMenu]',
+                    exportAs: 'contextMenuData',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { contextMenuData: [{
+                type: Input
+            }], ltContextMenu: [{
+                type: Input
+            }], xGap: [{
+                type: Input
+            }], yGap: [{
+                type: Input
+            }], overflowSpace: [{
+                type: Input
+            }], selectors: [{
+                type: Input
+            }], clickedElement: [{
+                type: Output
+            }] } });
+
 class UploadImageComponent {
     constructor(httpClient, authService) {
         this.httpClient = httpClient;
@@ -844,13 +1000,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             }] } });
 
 class ModelFormComponent {
-    constructor(graphQLMetaService, graphQLService, formsService, authService, router, route) {
+    constructor(graphQLMetaService, graphQLService, formsService, authService, router, route, cmsService) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
         this.formsService = formsService;
         this.authService = authService;
         this.router = router;
         this.route = route;
+        this.cmsService = cmsService;
         this.delete = true;
         this.duplicate = false;
         this.logging = false;
@@ -927,12 +1084,20 @@ class ModelFormComponent {
                 // Process patchFields for reference input
                 for (const [key, value] of Object.entries(this.config)) {
                     // If it not an array
-                    if (this.config[key]?.patchField && !this.fields[key]?.isList) {
-                        this.form.get(key).setValue(response[this.config[key]?.patchField]?.id);
+                    if (this.config[key]?.type === 'Reference' && !this.fields[key]?.isList) {
+                        if (this.form.get(key)) {
+                            this.form
+                                .get(key)
+                                .patchValue(response[this.config[key]?.patchField ? this.config[key]?.patchField : key]?.id);
+                        }
                     }
                     // If value is an array
-                    if (this.config[key]?.patchField && this.fields[key]?.isList) {
-                        this.form.get(key).setValue(response[this.config[key]?.patchField]?.map((e) => e?.id));
+                    if (this.config[key]?.type === 'Reference' && this.fields[key]?.isList) {
+                        if (this.form.get(key)) {
+                            this.form
+                                .get(key)
+                                .patchValue(response[this.config[key]?.patchField ? this.config[key]?.patchField : key]?.map((e) => e?.id));
+                        }
                     }
                 }
                 if (this.logging) {
@@ -955,12 +1120,15 @@ class ModelFormComponent {
     createRequestObject(fields) {
         const requestFields = [];
         for (const [key, value] of Object.entries(fields)) {
+            if (this.config[key]?.exclude !== undefined && this.config[key]?.exclude) {
+                continue;
+            }
             if (Object.keys(fields[key]?.fields)?.length === 0) {
-                if (!this.config[key]?.patchField) {
+                if (this.config[key]?.type !== 'Reference') {
                     requestFields.push(key);
                 }
                 else {
-                    requestFields.push({ [this.config[key]?.patchField]: ['id'] });
+                    requestFields.push({ [this.config[key]?.patchField ? this.config[key]?.patchField : key]: ['id'] });
                 }
             }
             else {
@@ -1001,49 +1169,22 @@ class ModelFormComponent {
      * It calls the graphQLService to delete the object with the id of the object that is currently being edited
      */
     deleteObject() {
-        if (confirm('Möchtest du das Objekt wirklich löschen?')) {
-            this.graphQLService
-                .graphQl('delete' + this.capitalizeFirstLetter(this.modelName), {
-                arguments: { id: this.id },
-                fields: ['id'],
-                type: GraphQLRequestType.MUTATION,
-            })
-                .subscribe({
-                next: (value) => {
-                    this.finished.emit(null);
-                },
-                error: (err) => {
-                    console.error('Error on delete object', err);
-                },
-            });
-        }
+        this.cmsService.deleteObject(this.id, this.modelName).then(() => {
+            this.finished.emit(null);
+        });
     }
     /**
      * It sends a GraphQL mutation to the server to duplicate the object
      */
     async duplicateObject() {
-        if (confirm('Möchtest du das Objekt wirklich duplizieren?')) {
-            await this.submit(true);
-            this.graphQLService
-                .graphQl('duplicate' + this.capitalizeFirstLetter(this.modelName), {
-                arguments: { id: this.id },
-                fields: ['id'],
-                type: GraphQLRequestType.MUTATION,
-            })
-                .subscribe({
-                next: (value) => {
-                    if (value?.id) {
-                        this.router.navigate(['../' + value.id], { relativeTo: this.route });
-                    }
-                    else {
-                        this.finished.emit(null);
-                    }
-                },
-                error: (err) => {
-                    console.error('Error on duplicate object', err);
-                },
-            });
-        }
+        this.cmsService.duplicateObject(this.id, this.modelName).then((value) => {
+            if (value?.id) {
+                this.router.navigate(['../' + value.id], { relativeTo: this.route });
+            }
+            else {
+                this.finished.emit(null);
+            }
+        });
     }
     /**
      * It takes a string, capitalizes the first letter, and returns the modified string
@@ -1052,7 +1193,7 @@ class ModelFormComponent {
      * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
      */
     capitalizeFirstLetter(value) {
-        return value.charAt(0).toUpperCase() + value.slice(1);
+        return this.cmsService.capitalizeFirstLetter(value);
     }
     /**
      * It takes an AbstractControl and returns a FormControl
@@ -1171,12 +1312,12 @@ class ModelFormComponent {
         });
     }
 }
-ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }, { token: i1$1.AuthService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }, { token: i1$1.AuthService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: i1$1.CmsService }], target: i0.ɵɵFactoryTarget.Component });
 ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", duplicate: "duplicate", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <h2 class=\"mb-0\">\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div class=\"d-flex flex-row align-items-center justify-content-end\">\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n      </button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"imageChanged($event)\"\n    ></base-model-form-sub>\n\n    <div class=\"d-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <h2 class=\"mb-0\">\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div class=\"d-flex flex-row align-items-center justify-content-end\">\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n      </button>\n      <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n        <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n        {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n      </button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"imageChanged($event)\"\n    ></base-model-form-sub>\n\n    <div class=\"d-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n      <div *ngIf=\"id && delete\">\n        <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n      </div>\n      <div>\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n        </button>\n        <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n          <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n          {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { modelName: [{
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: i1$1.CmsService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1195,9 +1336,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             }] } });
 
 class ModelTableComponent {
-    constructor(graphQLMetaService, graphQLService) {
+    constructor(graphQLMetaService, graphQLService, cmsService) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
+        this.cmsService = cmsService;
         this.createMode = false;
         this.logging = false;
         this.create = true;
@@ -1206,6 +1348,7 @@ class ModelTableComponent {
         this.duplicate = true;
         this.config = {};
         this.fieldConfig = {};
+        this.uniqueField = 'id';
         this.idSelected = new EventEmitter();
         this.createModeChanged = new EventEmitter();
         this.tableFields = {
@@ -1325,22 +1468,35 @@ class ModelTableComponent {
             this.idSelected.emit(this.selectedId);
         }
     }
+    /**
+     * 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.modelName);
+        this.loadObjects(this.availableFields);
+    }
+    /**
+     * It calls the deleteObject function in the cmsService, passing in the id of the object to delete and the name of the
+     * model
+     */
+    async deleteObject(id) {
+        await this.cmsService.deleteObject(id, this.modelName);
+        this.loadObjects(this.availableFields);
+    }
     /**
      * It takes a string, capitalizes the first letter, and returns the modified string
-     *
-     * @param value - The string to capitalize.
-     * @returns The first letter of the string is being capitalized and the rest of the string is being returned.
      */
     capitalizeFirstLetter(value) {
-        return value.charAt(0).toUpperCase() + value.slice(1);
+        return this.cmsService.capitalizeFirstLetter(value);
     }
 }
-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 }], 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" }, 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-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\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]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "duplicate", "logging", "config"], outputs: ["finished"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+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" }, 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-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\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\">\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]?.dateFormat\">\n              {{ object[field] }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\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=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n  ></base-model-form>\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)}\n"], dependencies: [{ 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", "duplicate", "logging", "config"], outputs: ["finished"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 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-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\n      <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n    </div>\n  </div>\n  <table class=\"table table-hover table-responsive bg-white\">\n    <thead>\n      <tr>\n        <th scope=\"col\" *ngFor=\"let field of availableFields\">\n          {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let object of objects\">\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]?.dateFormat\">\n            {{ object[field] }}\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n  <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n  ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, 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-4\">\n    <h2 class=\"mb-0\" *ngIf=\"modelName\">\n      {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n    </h2>\n    <div class=\"d-flex align-items-center\">\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\">\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]?.dateFormat\">\n              {{ object[field] }}\n            </ng-container>\n          </td>\n        </tr>\n      </tbody>\n    </table>\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=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n  <base-model-form\n    [modelName]=\"modelName\"\n    [label]=\"config?.label\"\n    [config]=\"fieldConfig\"\n    [logging]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\n  ></base-model-form>\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)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
                 type: Input
@@ -1366,10 +1522,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Output
             }] } });
 
+class BackButtonDirective {
+    constructor(navigation) {
+        this.navigation = navigation;
+    }
+    onClick() {
+        this.navigation.back();
+    }
+}
+BackButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BackButtonDirective, deps: [{ token: i1$1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+BackButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: BackButtonDirective, selector: "[baseBackButton]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BackButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baseBackButton]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.NavigationService }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 // Modules
 const imports = [FormsModule, ReactiveFormsModule, CommonModule];
 // Imported and exported elements
 const elements = [
+    // Directives
+    SortDirective,
+    BackButtonDirective,
+    ContextMenuDirective,
     // Components
     InputComponent,
     SelectComponent,
@@ -1390,6 +1570,10 @@ class BaseComponentsModule {
 }
 BaseComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BaseComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.0", ngImport: i0, type: BaseComponentsModule, declarations: [
+        // Directives
+        SortDirective,
+        BackButtonDirective,
+        ContextMenuDirective,
         // Components
         InputComponent,
         SelectComponent,
@@ -1405,6 +1589,10 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         ModelFormSubComponent,
         UploadImageComponent,
         RefenceInputComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
+        // Directives
+        SortDirective,
+        BackButtonDirective,
+        ContextMenuDirective,
         // Components
         InputComponent,
         SelectComponent,
@@ -1438,5 +1626,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
+export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, ContextMenuDirective, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map