ngx-material-entity 18.0.1 → 18.2.0

package/README.md

@@ -65,8 +65,6 @@ NgxMaterialEntity aims to have a fast way to get started with a lot of default o
 
 # Requirements
 This package relies on the [angular material library](https://material.angular.io/guide/getting-started) to render its components.
-<br>
-It also uses [bootstrap](https://getbootstrap.com/) for responsive design.
 
 # Basic Usage
 ## Create your entity
@@ -136,7 +134,7 @@ It is pretty easy to use the input component inside a for-loop that iterates ove
 <br>
 We thought this approach a bit further and build a complete CRUD table component with support for:
 - omitting values for creating or updating entities
-- layouting & responsive design (based on bootstrap)
+- layouting & responsive design
 - multi select actions
 - validation
 
@@ -250,7 +248,7 @@ export abstract class PropertyDecoratorConfig {
     omitForUpdate?: boolean;
     /**
      * Defines the width of the input property when used inside the default create or edit dialog.
-     * Has 3 bootstrap values for different breakpoints for simple responsive design.
+     * Has 3 values for different breakpoints for simple responsive design based on bootstrap (1-12).
      * The first value sets the columns for the screen size lg, the second for md and the third for sm.
      *
      * @default [6, 6, 12]
@@ -264,7 +262,6 @@ export abstract class PropertyDecoratorConfig {
     position?: Position
 }
 ```
-For more information regarding the "defaultWidths" see the bootstrap guide about the [Grid system](https://getbootstrap.com/docs/5.0/layout/grid/).
 
 ## @string default
 The "default" display of a string value. Inside a single line mat-input.
@@ -614,11 +611,11 @@ export interface StringChipsArrayDecoratorConfig extends ArrayDecoratorConfig {
     displayStyle: 'chips',
 
     /**
-     * The class for the <i> tag used to remove an entry from the array.
+     * The icon used to remove an entry from the array.
      *
-     * @default 'fas fa-circle-minus'
+     * @default faCircleMinus
      */
-    deleteIcon?: string,
+    deleteIcon?: IconDefinition,
     /**
      * The minimum required length of the string.
      */
@@ -644,11 +641,11 @@ export interface AutocompleteStringChipsArrayDecoratorConfig extends ArrayDecora
     displayStyle: 'chips',
 
     /**
-     * The class for the <i> tag used to remove an entry from the array.
+     * The icon used to remove an entry from the array.
      *
-     * @default 'fas fa-circle-minus'
+     * @default faCircleMinus
      */
-    deleteIcon?: string,
+    deleteIcon?: IconDefinition,
     /**
      * The autocomplete values.
      */
@@ -885,9 +882,9 @@ abstract class FileDecoratorConfig extends PropertyDecoratorConfig {
     type!: 'image' | 'other';
 
     /**
-     * The class for the <i> tag used to remove a file from the input.
+     * The icon used to remove a file from the input.
      *
-     * @default 'fas fa-circle-minus'
+     * @default faCircleMinus
      */
     deleteIcon?: string;
 

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

@@ -2,6 +2,7 @@ import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { ElementRef, EnvironmentInjector, InjectionToken, OnInit, Renderer2 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { PageCreateDataInternal } from './page-create-data.builder';
 import { BaseEntityType, EntityClassNewable } from '../../classes/entity.model';
 import { NgxGlobalDefaultValues } from '../../global-configuration-values';
@@ -64,6 +65,8 @@ export declare class NgxMatEntityCreatePageComponent<EntityType extends BaseEnti
     private readonly el;
     private readonly renderer;
     protected readonly globalConfig: NgxGlobalDefaultValues;
+    faChevronLeft: IconDefinition;
+    faWarning: IconDefinition;
     /**
      * Contains HelperMethods around handling Entities and their property-metadata.
      */

package/components/custom-table/custom-table-configuration.model.d.ts

@@ -0,0 +1,65 @@
+import { NgxGlobalDefaultValues } from '../../global-configuration-values';
+import { DisplayColumn, DynamicStyleClasses } from '../table/table-data';
+/**
+ * Configuration for the custom table.
+ */
+export interface CustomTableConfiguration<T = unknown> {
+    /**
+     * Configuration for css classes that should be applied to table rows based on a condition.
+     * This could be used to eg. Set the background color to green when an item has the status completed etc.
+     * INFO: You need to use ng-deep or apply the styling in the styles.scss.
+     * @default () => []
+     */
+    dynamicRowStyleClasses?: DynamicStyleClasses<T>;
+    /**
+     * The columns to display inside the custom table.
+     */
+    displayColumns: DisplayColumn<T>[];
+    /**
+     * Whether or not a loading spinner should be shown.
+     * Only works when you provide the "loading" input to the custom table.
+     * @default true
+     */
+    displayLoadingSpinner?: boolean;
+    /**
+     * Whether or not the select column should be enabled.
+     * @default true
+     */
+    withSelection: boolean;
+    /**
+     * A function that resolves a row value to a string that can be searched for.
+     * By default this uses a built in search filter.
+     */
+    searchStringForRow?: (value: T) => string;
+    /**
+     * Whether or not the user is allowed to click on entries in the custom table.
+     * @default () => true
+     */
+    allowClick?: (value: T) => boolean;
+    /**
+     * An error message to show when the table contains no entries.
+     * Also applies styling to the table.
+     */
+    emptyErrorMessage?: string;
+    /**
+     * Resolves the given id for an entity.
+     * This is used for the referencesMany input,
+     * where you want to show values of the entity in the table rows and not the id.
+     */
+    resolveToReferencedEntity?: (id: unknown) => unknown;
+}
+/**
+ * Internal configuration for the custom table.
+ * Provides default values.
+ */
+export declare class InternalCustomTableConfiguration<T = unknown> implements CustomTableConfiguration<T> {
+    dynamicRowStyleClasses: DynamicStyleClasses<T>;
+    displayColumns: DisplayColumn<T>[];
+    displayLoadingSpinner: boolean;
+    withSelection: boolean;
+    searchStringForRow: (value: T) => string;
+    allowClick: (value: T) => boolean;
+    emptyErrorMessage: string;
+    resolveToReferencedEntity?: (id: unknown) => unknown;
+    constructor(globalConfig: NgxGlobalDefaultValues, configuration: CustomTableConfiguration<T>);
+}

package/components/custom-table/custom-table.component.d.ts

@@ -0,0 +1,111 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { EnvironmentInjector, EventEmitter, OnInit } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatTableDataSource } from '@angular/material/table';
+import { CustomTableConfiguration, InternalCustomTableConfiguration } from './custom-table-configuration.model';
+import { BaseEntityType } from '../../classes/entity.model';
+import { NgxGlobalDefaultValues } from '../../global-configuration-values';
+import { SelectionUtilities } from '../../utilities/selection.utilities';
+import { DisplayColumn, TableColumnValue } from '../table/table-data';
+import * as i0 from "@angular/core";
+/**
+ * The event for clicking on a table cell.
+ */
+export type CellClickedEvent<T> = {
+    /**
+     * The column that was clicked.
+     */
+    displayColumn: DisplayColumn<T>;
+    /**
+     * The value of the row that was clicked.
+     */
+    value: T;
+};
+/**
+ * A custom table that has things like sorting and pagination already built in.
+ */
+export declare class CustomTableComponent<T, EntityType extends BaseEntityType<EntityType>> implements OnInit {
+    private readonly injector;
+    private readonly globalConfig;
+    SelectionUtilities: typeof SelectionUtilities;
+    /**
+     * Updates the table entries.
+     */
+    set data(value: T[]);
+    /**
+     * Applies the given string as a filter to the table.
+     */
+    set searchString(value: string);
+    set required(value: boolean);
+    /**
+     * Whether or not the table should show an error message when the table is empty.
+     */
+    shouldShowMissingError: boolean;
+    /**
+     * Whether or not the table data is currently loading.
+     */
+    isLoading: boolean;
+    /**
+     * The configuration of the table.
+     */
+    configuration: CustomTableConfiguration<T>;
+    internalConfiguration: InternalCustomTableConfiguration<T>;
+    /**
+     * Emits when a cell is clicked that is neither disabled nor disallowed to be clicked.
+     */
+    readonly cellClicked: EventEmitter<CellClickedEvent<T>>;
+    /**
+     * Emits when the selected values change.
+     */
+    readonly selectionChanged: EventEmitter<T[]>;
+    /**
+     * The paginator from the html.
+     */
+    private readonly paginator;
+    /**
+     * The sort from the html.
+     */
+    private readonly sort;
+    /**
+     * The data source for the table.
+     */
+    dataSource: MatTableDataSource<T>;
+    /**
+     * The selection of the table.
+     */
+    selection: SelectionModel<T>;
+    /**
+     * The columns of the table.
+     */
+    displayedColumns: string[];
+    constructor(injector: EnvironmentInjector, globalConfig: NgxGlobalDefaultValues);
+    ngOnInit(): void;
+    private setupDataSource;
+    /**
+     * Emits a cellClicked event when the clicked column is enabled and clicking is allowed by the configuration.
+     * @param value - The value of the row that was clicked.
+     * @param dCol - The display column of the row that was clicked.
+     */
+    clickCell(value: T, dCol: DisplayColumn<T>): void;
+    /**
+     * Toggles a single table row.
+     * @param value - The value of the row that was clicked.
+     * @param event - The change event from the checkbox.
+     */
+    toggle(value: T, event?: MatCheckboxChange): void;
+    /**
+     * Toggles all table rows.
+     * @param event - The change event from the checkbox.
+     */
+    masterToggle(event?: MatCheckboxChange): void;
+    /**
+     * Gets the value to display in the column.
+     * Runs in environment context to enable injection.
+     * @param value - The column value to get the display string from.
+     * @param displayColumn - The display column to get the value from.
+     * @returns The value of the display column.
+     */
+    getDisplayColumnValue(value: T, displayColumn: DisplayColumn<T>): TableColumnValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomTableComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomTableComponent<any, any>, "custom-table", never, { "data": { "alias": "data"; "required": true; }; "searchString": { "alias": "searchString"; "required": false; }; "required": { "alias": "required"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "configuration": { "alias": "configuration"; "required": true; }; }, { "cellClicked": "cellClicked"; "selectionChanged": "selectionChanged"; }, never, never, true, never>;
+}

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

@@ -3,12 +3,13 @@ import { HttpClient } from '@angular/common/http';
 import { ElementRef, EnvironmentInjector, InjectionToken, OnInit, Renderer2 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { PageEditDataInternal } from './page-edit-data.builder';
 import { BaseEntityType, EntityClassNewable } from '../../classes/entity.model';
 import { NgxGlobalDefaultValues } from '../../global-configuration-values';
 import { EntityService } from '../../services/entity.service';
 import { UnsavedChangesPage } from '../../services/unsaved-changes.guard';
-import { EntityUtilities } from '../../utilities/entity.utilities';
+import { Difference, EntityUtilities } from '../../utilities/entity.utilities';
 import { ValidationError } from '../../utilities/validation.utilities';
 import { ConfirmDialogData } from '../confirm-dialog/confirm-dialog-data';
 import { EditActionInternal } from '../table/edit-dialog/edit-data.builder';
@@ -67,6 +68,8 @@ export declare class NgxMatEntityEditPageComponent<EntityType extends BaseEntity
     private readonly el;
     private readonly renderer;
     protected readonly globalConfig: NgxGlobalDefaultValues;
+    faChevronLeft: IconDefinition;
+    faWarning: IconDefinition;
     /**
      * Contains HelperMethods around handling Entities and their property-metadata.
      */
@@ -91,6 +94,10 @@ export declare class NgxMatEntityEditPageComponent<EntityType extends BaseEntity
      * Whether or not the entity is valid.
      */
     isEntityValid: boolean;
+    /**
+     * All changes that have been done to the entity.
+     */
+    changes: Difference<EntityType>[];
     /**
      * Whether or not the entity is dirty.
      */

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { EnvironmentInjector, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 export declare class ArrayDateInputComponent<EntityType extends BaseEntityType<EntityType>> extends ArrayTableComponent<Date, EntityType, DecoratorTypes.ARRAY_DATE> implements OnInit {
     private readonly globalConfig;
     DateUtilities: typeof DateUtilities;
-    constructor(matDialog: MatDialog, injector: EnvironmentInjector, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
+    constructor(dialog: MatDialog, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArrayDateInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArrayDateInputComponent<any>, "array-date-input", never, {}, {}, never, never, true, never>;

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { EnvironmentInjector, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
@@ -13,12 +13,12 @@ export declare class ArrayDateRangeInputComponent<EntityType extends BaseEntityT
     DateUtilities: typeof DateUtilities;
     dateRangeStart?: Date;
     dateRangeEnd?: Date;
-    constructor(matDialog: MatDialog, injector: EnvironmentInjector, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
+    constructor(dialog: MatDialog, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
     ngOnInit(): void;
     /**
      * Adds a DateRange to the array.
      */
-    addDateRange(): void;
+    add(): Promise<void>;
     protected resetInput(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArrayDateRangeInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArrayDateRangeInputComponent<any>, "array-date-range-input", never, {}, {}, never, never, true, never>;

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { EnvironmentInjector, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
@@ -14,13 +14,13 @@ export declare class ArrayDateTimeInputComponent<EntityType extends BaseEntityTy
     dateTime?: Date;
     time?: Time;
     timeDropdownValues: DropdownValue<Time>[];
-    constructor(matDialog: MatDialog, injector: EnvironmentInjector, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
+    constructor(matDialog: MatDialog, http: HttpClient, globalConfig: NgxGlobalDefaultValues);
     ngOnInit(): void;
     protected resetInput(): void;
     /**
      * Adds a date time to the array.
      */
-    addDateTime(): void;
+    addDateTime(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArrayDateTimeInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArrayDateTimeInputComponent<any>, "array-date-time-input", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,41 +1,47 @@
-import { SelectionModel } from '@angular/cdk/collections';
 import { HttpClient } from '@angular/common/http';
-import { EnvironmentInjector, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatTableDataSource } from '@angular/material/table';
 import { BaseEntityType } from '../../../classes/entity.model';
 import { DecoratorTypes } from '../../../decorators/base/decorator-types.enum';
-import { SelectionUtilities } from '../../../utilities/selection.utilities';
-import { DisplayColumn } from '../../table/table-data';
+import { CustomTableConfiguration } from '../../custom-table/custom-table-configuration.model';
 import { NgxMatEntityBaseInputComponent } from '../base-input.component';
 import * as i0 from "@angular/core";
+/**
+ * The Decorator Types that use the array table class.
+ */
 type ArrayTableType = DecoratorTypes.ARRAY | DecoratorTypes.ARRAY_DATE | DecoratorTypes.ARRAY_DATE_RANGE | DecoratorTypes.ARRAY_DATE_TIME;
 /**
  * The base component needed for all arrays that are displayed as a table.
  */
 export declare abstract class ArrayTableComponent<ValueType, EntityType extends BaseEntityType<EntityType>, ArrayType extends ArrayTableType> extends NgxMatEntityBaseInputComponent<EntityType, ArrayType, ValueType[]> implements OnInit {
-    private readonly matDialog;
-    private readonly injector;
+    private readonly dialog;
     private readonly http;
+    /**
+     * The input that should be added to the array.
+     */
     input?: ValueType;
-    dataSource: MatTableDataSource<ValueType>;
-    selection: SelectionModel<ValueType>;
-    displayedColumns: string[];
-    SelectionUtilities: typeof SelectionUtilities;
-    constructor(matDialog: MatDialog, injector: EnvironmentInjector, http: HttpClient);
+    /**
+     * The currently selected values.
+     */
+    selected: ValueType[];
+    /**
+     * The configuration of the table.
+     */
+    tableConfig: CustomTableConfiguration;
+    get propertyValue(): ValueType[];
+    set propertyValue(value: ValueType[]);
+    constructor(dialog: MatDialog, http: HttpClient);
     ngOnInit(): void;
     /**
-     * Gets the value to display in the column.
-     * Runs in environment context to enable injection.
-     * @param entity - The entity to get the value from.
-     * @param displayColumn - The display column to get the value from.
-     * @returns The value of the display column.
+     * Sets the table config.
+     * This is not included in the ngOnInit for child classes to be able to set their metadata.
+     * (which is used in the table config).
      */
-    getDisplayColumnValue(entity: ValueType, displayColumn: DisplayColumn<ValueType>): unknown;
+    protected setTableConfig(): void;
     /**
      * Tries to add an item to the array.
      */
-    add(): void;
+    add(): Promise<void>;
     /**
      * Is split up from the add method to override this functionality more easily.
      */

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

@@ -5,7 +5,7 @@ import { FileData } from '../../../../decorators/file/file-decorator.data';
 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 {
-    refreshFileData(fileData?: FileData | FileData[]): Promise<void>;
+    refreshFileData(fileData?: FileData | FileData[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileDefaultInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FileDefaultInputComponent<any>, "file-default-input", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { OnInit } from '@angular/core';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DecoratorTypes } from '../../../../decorators/base/decorator-types.enum';
 import { FileData } from '../../../../decorators/file/file-decorator.data';
@@ -7,6 +8,8 @@ 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 {
     private readonly http;
+    faAngleLeft: IconDefinition;
+    faAngleRight: IconDefinition;
     get multiPreviewImages(): string[] | undefined;
     set multiPreviewImages(value: string[] | undefined);
     get singlePreviewImage(): string | undefined;

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

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { EventEmitter, OnInit } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { BaseEntityType } from '../../../../classes/entity.model';
 import { DefaultFileDecoratorConfigInternal, ImageFileDecoratorConfigInternal } from '../../../../decorators/file/file-decorator-internal.data';
 import { FileData } from '../../../../decorators/file/file-decorator.data';
@@ -10,6 +11,11 @@ import * as i0 from "@angular/core";
 export declare class FileInputComponent<EntityType extends BaseEntityType<EntityType>> implements OnInit {
     private readonly dialog;
     private readonly http;
+    faFileArrowUp: IconDefinition;
+    faUpload: IconDefinition;
+    faPlusCircle: IconDefinition;
+    faFileZipper: IconDefinition;
+    faDownload: IconDefinition;
     get filenames(): string[] | undefined;
     set filenames(value: string[] | undefined);
     FileUtilities: typeof FileUtilities;
@@ -25,8 +31,8 @@ export declare class FileInputComponent<EntityType extends BaseEntityType<Entity
     ngOnInit(): void;
     private initMultiFile;
     private initSingleFile;
-    setFileFromInput(event: Event): Promise<void>;
-    setFile(files: File[]): Promise<void>;
+    setFileFromInput(event: Event): void;
+    setFile(files: File[]): void;
     private resetFileInputs;
     private setMultiFile;
     private setSingleFile;