ngx-material-entity 15.1.3 → 15.1.4

package/README.md

@@ -57,6 +57,11 @@ NgxMaterialEntity aims to have a fast way to get started with a lot of default o
 - [NgxMatEntityTable Configuration](#ngxmatentitytable-configuration)
   - [Display Columns](#display-columns)
   - [Multiselect Actions](#multiselect-actions)
+  - [Edit in seperate page](#edit-in-seperate-page)
+    - [1. In the base data entry of your table config add `defaultEdit: 'page'`](#1-in-the-base-data-entry-of-your-table-config-add-defaultedit-page)
+    - [2. Add the route on which the entity should be edited:](#2-add-the-route-on-which-the-entity-should-be-edited)
+    - [3. Use a custom route (optional)](#3-use-a-custom-route-optional)
+    - [4. Require confirmation before leaving page with unsaved changes (optional)](#4-require-confirmation-before-leaving-page-with-unsaved-changes-optional)
 
 # Requirements
 This package relies on the [angular material library](https://material.angular.io/guide/getting-started) to render its components.
@@ -1274,3 +1279,98 @@ export interface MultiSelectAction<EntityType extends object> {
     confirmDialogData?: ConfirmDialogData
 }
 ```
+## Edit in seperate page
+When handling entities that have a lot of properties, you might don't want to edit everything inside a dialog but in a separate page.
+
+For that case, this library has a generic edit page. It works flawlessly with the table component, but you need to adjust some things:
+
+### 1. In the base data entry of your table config add `defaultEdit: 'page'`
+### 2. Add the route on which the entity should be edited:
+```typescript
+import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';
+
+//...
+
+const editMyEntityData: PageEditData<MyEntity> = {
+    editData: {
+        title: (entity: MyEntity) => `My Entity #${entity.id}`
+    }
+};
+
+const editDataRoute: EditDataRoute = {
+    ...defaultEditDataRoute,
+    providers: [
+        {
+            provide: NGX_EDIT_DATA_ENTITY_SERVICE,
+            useExisting: MyEntityService
+        },
+        {
+            provide: NGX_EDIT_DATA_ENTITY,
+            useValue: MyEntity
+        },
+        {
+            provide: NGX_EDIT_DATA,
+            useValue: editMyEntityData
+        }
+    ]
+};
+```
+The `defaultEditDataRoute` just provides values for things like path, title or loadComponent out of the box.
+
+The providers array is needed for the route to access the relevant entity service, entity class and the configuration data.
+### 3. Use a custom route (optional)
+By default, the configuration above will open any entities on the path `entities/:id`.
+
+At some point you probably want to open them on different paths, eg. `my-entities/:id` for the example above.
+
+In order to do that you need to add the custom path at two different places:
+<br>
+- In the relevant EntityService:
+`override readonly editBaseRoute: string = 'my-entities';`
+<br>
+- And in the route:
+```typescript
+import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';
+
+//...
+
+const editDataRoute: EditDataRoute = {
+    ...defaultEditDataRoute,
+    path: 'my-entities/:id',
+    providers: [
+        {
+            provide: NGX_EDIT_DATA_ENTITY_SERVICE,
+            useExisting: MyEntityService
+        },
+        {
+            provide: NGX_EDIT_DATA_ENTITY,
+            useValue: MyEntity
+        }
+    ]
+};
+```
+
+### 4. Require confirmation before leaving page with unsaved changes (optional)
+If you want the user to confim abandoning their changes you can simply add the `UnsavedChangesGuard` to your route:
+
+```typescript
+import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData, UnsavedChangesGuard } from 'ngx-material-entity';
+
+//...
+
+const editDataRoute: EditDataRoute = {
+    ...defaultEditDataRoute,
+    path: 'my-entities/:id',
+    providers: [
+        {
+            provide: NGX_EDIT_DATA_ENTITY_SERVICE,
+            useExisting: MyEntityService
+        },
+        {
+            provide: NGX_EDIT_DATA_ENTITY,
+            useValue: MyEntity
+        }
+    ],
+    canDeactivate: [UnsavedChangesGuard]
+};
+```

package/components/confirm-dialog/confirm-dialog.component.d.ts

@@ -16,7 +16,7 @@ export declare class NgxMatEntityConfirmDialogComponent implements OnInit {
     constructor(dialogRef: MatDialogRef<NgxMatEntityConfirmDialogComponent>, inputData: ConfirmDialogData);
     ngOnInit(): void;
     /**
-     * Closes the dialog with value 1 to signal that the action should be run.
+     * Closes the dialog with true to signal that the action should be run.
      */
     confirmAction(): void;
     /**

package/components/edit-page/edit-page.component.d.ts

@@ -0,0 +1,112 @@
+import { Location } from '@angular/common';
+import { EnvironmentProviders, InjectionToken, OnInit, Provider, Type } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, DefaultExport, Route } from '@angular/router';
+import { Observable } from 'rxjs';
+import { BaseEntityType, EntityClassNewable } from '../../classes/entity.model';
+import { EntityService } from '../../services/entity.service';
+import { EntityTab, EntityUtilities } from '../../utilities/entity.utilities';
+import { ConfirmDialogData } from '../confirm-dialog/confirm-dialog-data';
+import { EditEntityData } from '../table/edit-dialog/edit-entity-data';
+import { EditData } from '../table/table-data';
+import { PageEditDataInternal } from './page-edit-data.builder';
+import * as i0 from "@angular/core";
+/**
+ * The definition for a route to use with the "NgxMatEntityEditPageComponent".
+ */
+export interface EditDataRoute extends Route {
+    loadComponent: () => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>;
+    providers: (Provider | EnvironmentProviders)[];
+    title: string;
+    path: string;
+}
+export declare const defaultEditDataRoute: Omit<EditDataRoute, 'providers'>;
+/**
+ * The data that needs to be provided for a route to be able to edit a entity.
+ */
+export declare type PageEditData<EntityType extends BaseEntityType<EntityType>> = Omit<EditEntityData<EntityType>, 'entity' | 'EntityServiceClass'> & {
+    /**
+     * Whether or not to display a loading spinner while the entity for the page is loaded.
+     *
+     * @default true
+     */
+    displayLoadingSpinner?: boolean;
+    /**
+     * The data of the default edit page.
+     */
+    editData?: EditData<EntityType> & {
+        /**
+         * The data for the dialog when the user tries to leave the site with unsaved changes.
+         */
+        confirmUnsavedChangesDialogData?: ConfirmDialogData;
+        /**
+         * Whether or not leaving with unsaved changes should require a confirm dialog.
+         *
+         * @default true
+         */
+        unsavedChangesRequireConfirmDialog?: boolean;
+    };
+};
+export declare const NGX_EDIT_DATA_ENTITY_SERVICE: InjectionToken<EntityService<any>>;
+export declare const NGX_EDIT_DATA_ENTITY: InjectionToken<EntityClassNewable<any>>;
+export declare const NGX_EDIT_DATA: InjectionToken<PageEditData<any>>;
+/**
+ * A generic page that allows you to edit a specific entity.
+ * For this to work you need to provide some data for the route.
+ */
+export declare class NgxMatEntityEditPageComponent<EntityType extends BaseEntityType<EntityType>> implements OnInit {
+    private readonly dialog;
+    private readonly location;
+    private readonly route;
+    readonly entityService: EntityService<EntityType>;
+    private readonly EntityClass;
+    private readonly inputData;
+    EntityUtilities: typeof EntityUtilities;
+    entityTabs: EntityTab<EntityType>[];
+    entity: EntityType;
+    entityPriorChanges: EntityType;
+    data: PageEditDataInternal<EntityType>;
+    isEntityValid: boolean;
+    isEntityDirty: boolean;
+    isReadOnly: boolean;
+    private inConfirmNavigation;
+    get hasUnsavedChanges(): boolean;
+    constructor(dialog: MatDialog, location: Location, route: ActivatedRoute, entityService: EntityService<EntityType>, EntityClass: EntityClassNewable<EntityType>, inputData: PageEditData<EntityType>);
+    ngOnInit(): Promise<void>;
+    /**
+     * Whether the page can be left without confirmation (of unsaved changes).
+     *
+     * @returns Whether or not the page can be left without confirmation.
+     */
+    canDeactivate(): boolean;
+    /**
+     * Checks if the entity has become invalid or dirty.
+     */
+    checkEntity(): Promise<void>;
+    /**
+     * Tries to save the changes and close the dialog afterwards.
+     * Also handles the confirmation if required.
+     */
+    edit(): void;
+    private confirmEdit;
+    /**
+     * Tries to delete the entity and close the dialog afterwards.
+     * Also handles the confirmation if required.
+     */
+    delete(): void;
+    private confirmDelete;
+    /**
+     * Tries to navigate back.
+     */
+    navigateBack(): void;
+    /**
+     * Opens the confirm dialog for navigating with unsaved changes.
+     * This is exposed because the UnsavedChangesGuard needs to access this.
+     *
+     * @returns The first observable result of the confirm dialog.
+     */
+    openConfirmNavigationDialog(): Observable<boolean>;
+    private confirmNavigateBack;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatEntityEditPageComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatEntityEditPageComponent<any>, "ngx-mat-entity-edit-page", never, {}, {}, never, never, true, never>;
+}

package/components/edit-page/page-edit-data.builder.d.ts

@@ -0,0 +1,17 @@
+import { BaseBuilder } from '../../classes/base.builder';
+import { BaseEntityType } from '../../classes/entity.model';
+import { ConfirmDialogDataInternal } from '../confirm-dialog/confirm-dialog-data.builder';
+import { EditDataInternal } from '../table/edit-dialog/edit-data.builder';
+import { EditEntityDataInternal } from '../table/edit-dialog/edit-entity.builder';
+import { PageEditData } from './edit-page.component';
+export declare type PageEditDataInternal<EntityType extends BaseEntityType<EntityType>> = Omit<EditEntityDataInternal<EntityType>, 'entity' | 'EntityServiceClass'> & {
+    displayLoadingSpinner: boolean;
+    editData: EditDataInternal<EntityType> & {
+        confirmUnsavedChangesDialogData: ConfirmDialogDataInternal;
+        unsavedChangesRequireConfirmDialog: boolean;
+    };
+};
+export declare class PageEditDataBuilder<EntityType extends BaseEntityType<EntityType>> extends BaseBuilder<PageEditDataInternal<EntityType>, PageEditData<EntityType>> {
+    constructor(data: PageEditData<EntityType>);
+    protected generateBaseData(data: PageEditData<EntityType>): PageEditDataInternal<EntityType>;
+}

package/components/input/array/array-date-input/array-date-input.component.d.ts

@@ -1,7 +1,7 @@
 import { OnInit } from '@angular/core';
-import { DateUtilities } from '../../../../classes/date.utilities';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
+import { DateUtilities } from '../../../../utilities/date.utilities';
 import { ArrayTableComponent } from '../array-table.class';
 import * as i0 from "@angular/core";
 export declare class ArrayDateInputComponent<EntityType extends BaseEntityType<EntityType>> extends ArrayTableComponent<Date, EntityType, DecoratorTypes.ARRAY_DATE> implements OnInit {

package/components/input/array/array-date-range-input/array-date-range-input.component.d.ts

@@ -1,8 +1,8 @@
 import { OnInit } from '@angular/core';
-import { DateUtilities } from '../../../../classes/date.utilities';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { DateRange } from '../../../../decorators/date/date-decorator.data';
+import { DateUtilities } from '../../../../utilities/date.utilities';
 import { ArrayTableComponent } from '../array-table.class';
 import * as i0 from "@angular/core";
 export declare class ArrayDateRangeInputComponent<EntityType extends BaseEntityType<EntityType>> extends ArrayTableComponent<DateRange, EntityType, DecoratorTypes.ARRAY_DATE_RANGE> implements OnInit {

package/components/input/array/array-date-time-input/array-date-time-input.component.d.ts

@@ -1,9 +1,9 @@
 import { Time } from '@angular/common';
 import { OnInit } from '@angular/core';
-import { DateUtilities } from '../../../../classes/date.utilities';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { DropdownValue } from '../../../../decorators/base/dropdown-value.interface';
+import { DateUtilities } from '../../../../utilities/date.utilities';
 import { ArrayTableComponent } from '../array-table.class';
 import * as i0 from "@angular/core";
 export declare class ArrayDateTimeInputComponent<EntityType extends BaseEntityType<EntityType>> extends ArrayTableComponent<Date, EntityType, DecoratorTypes.ARRAY_DATE_TIME> implements OnInit {

package/components/input/array/array-table.class.d.ts

@@ -3,8 +3,8 @@ import { OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { BaseEntityType } from '../../../classes/entity.model';
-import { SelectionUtilities } from '../../../classes/selection.utilities';
 import { DecoratorTypes } from '../../../decorators/base/decorator-types.enum';
+import { SelectionUtilities } from '../../../utilities/selection.utilities';
 import { NgxMatEntityBaseInputComponent } from '../base-input.component';
 import * as i0 from "@angular/core";
 declare type ArrayTableType = DecoratorTypes.ARRAY | DecoratorTypes.ARRAY_DATE | DecoratorTypes.ARRAY_DATE_RANGE | DecoratorTypes.ARRAY_DATE_TIME;

package/components/input/date/date-input/date-input.component.d.ts

@@ -1,7 +1,7 @@
 import { OnInit } from '@angular/core';
-import { DateUtilities } from '../../../../classes/date.utilities';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
+import { DateUtilities } from '../../../../utilities/date.utilities';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class DateInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.DATE, Date> implements OnInit {

package/components/input/date/date-time-input/date-time-input.component.d.ts

@@ -1,10 +1,10 @@
 import { Time } from '@angular/common';
 import { OnInit } from '@angular/core';
 import { DateFilterFn } from '@angular/material/datepicker';
-import { DateUtilities } from '../../../../classes/date.utilities';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { DropdownValue } from '../../../../decorators/base/dropdown-value.interface';
+import { DateUtilities } from '../../../../utilities/date.utilities';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class DateTimeInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.DATE_TIME, Date> implements OnInit {

package/components/input/file/file-default-input/file-default-input.component.d.ts

@@ -1,8 +1,8 @@
 import { OnInit } from '@angular/core';
 import { BaseEntityType } from '../../../../classes/entity.model';
-import { FileUtilities } from '../../../../classes/file.utilities';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { FileData } from '../../../../decorators/file/file-decorator.data';
+import { FileUtilities } from '../../../../utilities/file.utilities';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class FileDefaultInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.FILE_DEFAULT, FileData | FileData[]> implements OnInit {

package/components/input/file/file-image-input/file-image-input.component.d.ts

@@ -1,8 +1,8 @@
 import { OnInit } from '@angular/core';
 import { BaseEntityType } from '../../../../classes/entity.model';
-import { FileUtilities } from '../../../../classes/file.utilities';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { FileData } from '../../../../decorators/file/file-decorator.data';
+import { FileUtilities } from '../../../../utilities/file.utilities';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class FileImageInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.FILE_IMAGE, FileData | FileData[]> implements OnInit {

package/components/input/file/file-input/file-input.component.d.ts

@@ -1,10 +1,10 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { NgModel } from '@angular/forms';
-import { DefaultFileDecoratorConfigInternal, ImageFileDecoratorConfigInternal } from '../../../../decorators/file/file-decorator-internal.data';
-import { FileUtilities } from '../../../../classes/file.utilities';
-import { FileData } from '../../../../decorators/file/file-decorator.data';
 import { MatDialog } from '@angular/material/dialog';
 import { BaseEntityType } from '../../../../classes/entity.model';
+import { DefaultFileDecoratorConfigInternal, ImageFileDecoratorConfigInternal } from '../../../../decorators/file/file-decorator-internal.data';
+import { FileData } from '../../../../decorators/file/file-decorator.data';
+import { FileUtilities } from '../../../../utilities/file.utilities';
 import * as i0 from "@angular/core";
 export declare class FileInputComponent<EntityType extends BaseEntityType<EntityType>> implements OnInit {
     private readonly dialog;

package/components/input/input.component.d.ts

@@ -3,14 +3,14 @@ import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
-import { DateUtilities } from '../../classes/date.utilities';
 import { BaseEntityType } from '../../classes/entity.model';
-import { EntityTab, EntityUtilities } from '../../classes/entity.utilities';
-import { SelectionUtilities } from '../../classes/selection.utilities';
 import { EntityArrayDecoratorConfigInternal } from '../../decorators/array/array-decorator-internal.data';
 import { DecoratorTypes } from '../../decorators/base/decorator-types.enum';
 import { PropertyDecoratorConfigInternal } from '../../decorators/base/property-decorator-internal.data';
 import { DefaultObjectDecoratorConfigInternal } from '../../decorators/object/object-decorator-internal.data';
+import { DateUtilities } from '../../utilities/date.utilities';
+import { EntityTab, EntityUtilities } from '../../utilities/entity.utilities';
+import { SelectionUtilities } from '../../utilities/selection.utilities';
 import { AddArrayItemDialogData } from './add-array-item-dialog-data';
 import { AddArrayItemDialogDataInternal } from './add-array-item-dialog-data.builder';
 import * as i0 from "@angular/core";

package/components/input/relations/references-many-input/references-many-input.component.d.ts

@@ -2,9 +2,9 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { EnvironmentInjector, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { BaseEntityType } from '../../../../classes/entity.model';
-import { SelectionUtilities } from '../../../../classes/selection.utilities';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { DropdownValue } from '../../../../decorators/base/dropdown-value.interface';
+import { SelectionUtilities } from '../../../../utilities/selection.utilities';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class ReferencesManyInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.REFERENCES_MANY, string[]> implements OnInit {

package/components/input/string/string-password-input/string-password-input.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit } from '@angular/core';
-import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { BaseEntityType } from '../../../../classes/entity.model';
+import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { NgxMatEntityBaseInputComponent } from '../../base-input.component';
 import * as i0 from "@angular/core";
 export declare class StringPasswordInputComponent<EntityType extends BaseEntityType<EntityType>> extends NgxMatEntityBaseInputComponent<EntityType, DecoratorTypes.STRING_PASSWORD, string> implements OnInit {

package/components/table/create-dialog/create-entity-dialog-data.builder.d.ts

@@ -1,9 +1,9 @@
-import { EntityService } from '../../../classes/entity.service';
-import { CreateEntityDialogData } from './create-entity-dialog-data';
 import { HttpClient } from '@angular/common/http';
-import { CreateDialogDataInternal } from './create-dialog-data.builder';
 import { BaseBuilder } from '../../../classes/base.builder';
 import { BaseEntityType } from '../../../classes/entity.model';
+import { EntityService } from '../../../services/entity.service';
+import { CreateDialogDataInternal } from './create-dialog-data.builder';
+import { CreateEntityDialogData } from './create-entity-dialog-data';
 /**
  * The internal CreateEntityDialogData. Requires all default values the user can leave out.
  */

package/components/table/create-dialog/create-entity-dialog-data.d.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { BaseEntityType } from '../../../classes/entity.model';
-import { EntityService } from '../../../classes/entity.service';
+import { EntityService } from '../../../services/entity.service';
 import { CreateDialogData } from '../table-data';
 /**
  * The Definition of the Create Entity Dialog Data.

package/components/table/create-dialog/create-entity-dialog.component.d.ts

@@ -1,10 +1,10 @@
 import { Injector, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { EntityService } from '../../../classes/entity.service';
-import { EntityTab, EntityUtilities } from '../../../classes/entity.utilities';
-import { CreateEntityDialogDataInternal } from './create-entity-dialog-data.builder';
-import { CreateEntityDialogData } from './create-entity-dialog-data';
 import { BaseEntityType } from '../../../classes/entity.model';
+import { EntityService } from '../../../services/entity.service';
+import { EntityTab, EntityUtilities } from '../../../utilities/entity.utilities';
+import { CreateEntityDialogData } from './create-entity-dialog-data';
+import { CreateEntityDialogDataInternal } from './create-entity-dialog-data.builder';
 import * as i0 from "@angular/core";
 /**
  * The default dialog used to create new entities based on the configuration passed in the MAT_DIALOG_DATA "inputData".

package/components/table/edit-dialog/{edit-dialog-data.builder.d.ts → edit-data.builder.d.ts}

@@ -1,11 +1,11 @@
-import { BaseEntityType } from '../../../classes/entity.model';
 import { BaseBuilder } from '../../../classes/base.builder';
+import { BaseEntityType } from '../../../classes/entity.model';
 import { ConfirmDialogData } from '../../confirm-dialog/confirm-dialog-data';
-import { EditDialogData } from '../table-data';
+import { EditData } from '../table-data';
 /**
- * The internal EditDialogData. Requires all default values the user can leave out.
+ * The internal EditData. Requires all default values the user can leave out.
  */
-export declare class EditDialogDataInternal<EntityType extends BaseEntityType<EntityType>> implements EditDialogData<EntityType> {
+export declare class EditDataInternal<EntityType extends BaseEntityType<EntityType>> implements EditData<EntityType> {
     title: (entity: EntityType) => string;
     confirmButtonLabel: string;
     deleteButtonLabel: string;
@@ -19,7 +19,7 @@ export declare class EditDialogDataInternal<EntityType extends BaseEntityType<En
 /**
  * The Builder for the EditDialogData. Sets default values.
  */
-export declare class EditDialogDataBuilder<EntityType extends BaseEntityType<EntityType>> extends BaseBuilder<EditDialogDataInternal<EntityType>, EditDialogData<EntityType>> {
-    constructor(data?: EditDialogData<EntityType>);
-    protected generateBaseData(data?: EditDialogData<EntityType>): EditDialogDataInternal<EntityType>;
+export declare class EditDialogDataBuilder<EntityType extends BaseEntityType<EntityType>> extends BaseBuilder<EditDataInternal<EntityType>, EditData<EntityType>> {
+    constructor(data?: EditData<EntityType>);
+    protected generateBaseData(data?: EditData<EntityType>): EditDataInternal<EntityType>;
 }

package/components/table/edit-dialog/{edit-entity-dialog-data.d.ts → edit-entity-data.d.ts}

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import { BaseEntityType } from '../../../classes/entity.model';
-import { EntityService } from '../../../classes/entity.service';
-import { EditDialogData } from '../table-data';
+import { EntityService } from '../../../services/entity.service';
+import { EditData } from '../table-data';
 /**
- * The Definition of the Edit Entity Dialog Data.
+ * The Definition of the Edit Entity Dialog or page Data.
  */
-export interface EditEntityDialogData<EntityType extends BaseEntityType<EntityType>> {
+export interface EditEntityData<EntityType extends BaseEntityType<EntityType>> {
     /**
      * The entity to edit.
      */
@@ -17,7 +17,7 @@ export interface EditEntityDialogData<EntityType extends BaseEntityType<EntityTy
     /**
      * The info of the generic edit-dialog.
      */
-    editDialogData?: EditDialogData<EntityType>;
+    editData?: EditData<EntityType>;
     /**
      * Whether or not the user can delete this specific entity.
      */

package/components/table/edit-dialog/edit-entity-dialog.component.d.ts

@@ -1,10 +1,10 @@
 import { Injector, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { EntityService } from '../../../classes/entity.service';
-import { EntityTab, EntityUtilities } from '../../../classes/entity.utilities';
-import { EditEntityDialogData } from './edit-entity-dialog-data';
-import { EditEntityDialogDataInternal } from './edit-entity-dialog.builder';
 import { BaseEntityType } from '../../../classes/entity.model';
+import { EntityService } from '../../../services/entity.service';
+import { EntityTab, EntityUtilities } from '../../../utilities/entity.utilities';
+import { EditEntityData } from './edit-entity-data';
+import { EditEntityDataInternal } from './edit-entity.builder';
 import * as i0 from "@angular/core";
 /**
  * The default dialog used to edit an existing entity based on the configuration passed in the MAT_DIALOG_DATA "inputData".
@@ -21,11 +21,11 @@ export declare class NgxMatEntityEditDialogComponent<EntityType extends BaseEnti
     entityTabs: EntityTab<EntityType>[];
     entityService: EntityService<EntityType>;
     entityPriorChanges: EntityType;
-    data: EditEntityDialogDataInternal<EntityType>;
+    data: EditEntityDataInternal<EntityType>;
     isEntityValid: boolean;
     isEntityDirty: boolean;
     isReadOnly: boolean;
-    constructor(inputData: EditEntityDialogData<EntityType>, dialogRef: MatDialogRef<NgxMatEntityEditDialogComponent<EntityType>>, injector: Injector, dialog: MatDialog);
+    constructor(inputData: EditEntityData<EntityType>, dialogRef: MatDialogRef<NgxMatEntityEditDialogComponent<EntityType>>, injector: Injector, dialog: MatDialog);
     ngOnInit(): void;
     /**
      * Checks if the entity has become invalid or dirty.

package/components/table/edit-dialog/edit-entity.builder.d.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { BaseBuilder } from '../../../classes/base.builder';
+import { BaseEntityType } from '../../../classes/entity.model';
+import { EntityService } from '../../../services/entity.service';
+import { EditDataInternal } from './edit-data.builder';
+import { EditEntityData } from './edit-entity-data';
+/**
+ * The internal EditEntityData. Requires all default values the user can leave out.
+ */
+export declare class EditEntityDataInternal<EntityType extends BaseEntityType<EntityType>> implements EditEntityData<EntityType> {
+    entity: EntityType;
+    EntityServiceClass: new (httpClient: HttpClient) => EntityService<EntityType>;
+    editData: EditDataInternal<EntityType>;
+    allowUpdate: (entity: EntityType) => boolean;
+    allowDelete: (entity: EntityType) => boolean;
+    constructor(entity: EntityType, EntityServiceClass: new (httpClient: HttpClient) => EntityService<EntityType>, editData: EditDataInternal<EntityType>, allowUpdate: (entity: EntityType) => boolean, allowDelete: (entity: EntityType) => boolean);
+}
+/**
+ * The Builder for the EditEntityData. Sets default values.
+ */
+export declare class EditEntityDataBuilder<EntityType extends BaseEntityType<EntityType>> extends BaseBuilder<EditEntityDataInternal<EntityType>, EditEntityData<EntityType>> {
+    constructor(data: EditEntityData<EntityType>);
+    protected generateBaseData(data: EditEntityData<EntityType>): EditEntityDataInternal<EntityType>;
+}

package/components/table/table-data.builder.d.ts

@@ -1,18 +1,18 @@
-import { EntityService } from '../../classes/entity.service';
-import { CreateDialogDataInternal } from './create-dialog/create-dialog-data.builder';
-import { EditDialogDataInternal } from './edit-dialog/edit-dialog-data.builder';
-import { BaseData, DisplayColumn, MultiSelectAction, TableData } from './table-data';
 import { HttpClient } from '@angular/common/http';
 import { BaseBuilder } from '../../classes/base.builder';
 import { BaseEntityType, EntityClassNewable } from '../../classes/entity.model';
+import { EntityService } from '../../services/entity.service';
+import { CreateDialogDataInternal } from './create-dialog/create-dialog-data.builder';
+import { EditDataInternal } from './edit-dialog/edit-data.builder';
+import { BaseData, DisplayColumn, MultiSelectAction, TableData } from './table-data';
 /**
  * The internal TableData. Requires all default values the user can leave out.
  */
 export declare class TableDataInternal<EntityType extends BaseEntityType<EntityType>> implements TableData<EntityType> {
     baseData: BaseDataInternal<EntityType>;
     createDialogData: CreateDialogDataInternal;
-    editDialogData: EditDialogDataInternal<EntityType>;
-    constructor(baseData: BaseDataInternal<EntityType>, createDialogData: CreateDialogDataInternal, editDialogData: EditDialogDataInternal<EntityType>);
+    editData: EditDataInternal<EntityType>;
+    constructor(baseData: BaseDataInternal<EntityType>, createDialogData: CreateDialogDataInternal, editDialogData: EditDataInternal<EntityType>);
 }
 /**
  * The Builder for the table BaseData. Sets default values.
@@ -30,6 +30,7 @@ export declare class BaseDataInternal<EntityType extends BaseEntityType<EntityTy
     EntityServiceClass: new (httpClient: HttpClient) => EntityService<EntityType>;
     searchLabel: string;
     createButtonLabel: string;
+    defaultEdit: 'dialog' | 'page';
     searchString: (entity: EntityType) => string;
     allowCreate: () => boolean;
     allowRead: (entity: EntityType) => boolean;
@@ -37,10 +38,11 @@ export declare class BaseDataInternal<EntityType extends BaseEntityType<EntityTy
     allowDelete: (entity: EntityType) => boolean;
     multiSelectActions: MultiSelectAction<EntityType>[];
     multiSelectLabel: string;
+    displayLoadingSpinner: boolean;
     EntityClass?: EntityClassNewable<EntityType>;
     edit?: (entity: EntityType) => unknown;
     create?: (entity: EntityType) => unknown;
-    constructor(title: string, displayColumns: DisplayColumn<EntityType>[], EntityServiceClass: new (httpClient: HttpClient) => EntityService<EntityType>, searchLabel: string, createButtonLabel: string, searchString: (entity: EntityType) => string, allowCreate: () => boolean, allowRead: (entity: EntityType) => boolean, allowUpdate: (entity: EntityType) => boolean, allowDelete: (entity: EntityType) => boolean, multiSelectActions: MultiSelectAction<EntityType>[], multiSelectLabel: string, EntityClass?: EntityClassNewable<EntityType>, edit?: (entity: EntityType) => unknown, create?: (entity: EntityType) => unknown);
+    constructor(title: string, displayColumns: DisplayColumn<EntityType>[], EntityServiceClass: new (httpClient: HttpClient) => EntityService<EntityType>, searchLabel: string, createButtonLabel: string, defaultEdit: 'dialog' | 'page', searchString: (entity: EntityType) => string, allowCreate: () => boolean, allowRead: (entity: EntityType) => boolean, allowUpdate: (entity: EntityType) => boolean, allowDelete: (entity: EntityType) => boolean, multiSelectActions: MultiSelectAction<EntityType>[], multiSelectLabel: string, displayLoadingSpinner: boolean, EntityClass?: EntityClassNewable<EntityType>, edit?: (entity: EntityType) => unknown, create?: (entity: EntityType) => unknown);
 }
 /**
  * The Builder for the complete TableData. Sets default values and validates user input.