@messaia/cdk 18.0.0 → 18.1.0-rc02

package/lib/base/base.module.d.ts

@@ -1,5 +1,5 @@
 import { BaseComponent } from './components/base.component';
-import { VdDynamicTableConfigDialogComponent } from './components/dynamic-table-config-dialog.comnponent';
+import { VdDynamicTableConfigDialogComponent } from './components/dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent';
 import { GenericFormBaseComponent } from './components/generic-form-base.component';
 import { GenericFormComponent } from './components/generic-form.component';
 import { GenericListComponent } from './components/generic-list.component';
@@ -22,14 +22,13 @@ import { PrintService } from './services/print.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/button";
 import * as i2 from "@angular/cdk/drag-drop";
-import * as i3 from "./components/dynamic-table-config-dialog.comnponent";
+import * as i3 from "./components/dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent";
 import * as i4 from "@angular/common";
 import * as i5 from "@angular/forms";
 import * as i6 from "@angular/material/dialog";
 import * as i7 from "../table/table.module";
-import * as i8 from "@angular/material/input";
-import * as i9 from "@angular/material/checkbox";
-import * as i10 from "@angular/material/form-field";
+import * as i8 from "@angular/material/checkbox";
+import * as i9 from "@angular/material/form-field";
 export { AuthHelper, AuthUser, BaseComponent, BaseInterceptor, CachingInterceptor, Common, FileService, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GlobalRoles, IBaseComponent, IGenericFormBaseComponent, IGenericListComponent, IGenericReactiveFormBaseComponent, LoadingScreenInterceptor, LoadingScreenService, MessageType, PrintService, VdDynamicTableConfigDialogComponent };
 export declare class MaterialModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialModule, never>;
@@ -38,6 +37,6 @@ export declare class MaterialModule {
 }
 export declare class VdBaseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VdBaseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VdBaseModule, [typeof i3.VdDynamicTableConfigDialogComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.MatDialogModule, typeof i7.VdTableModule, typeof MaterialModule, typeof i8.MatInputModule, typeof i9.MatCheckboxModule, typeof i10.MatFormFieldModule], [typeof i3.VdDynamicTableConfigDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VdBaseModule, [typeof i3.VdDynamicTableConfigDialogComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.MatDialogModule, typeof i7.VdTableModule, typeof MaterialModule, typeof i8.MatCheckboxModule, typeof i9.MatFormFieldModule], [typeof i3.VdDynamicTableConfigDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VdBaseModule>;
 }

package/lib/base/components/{dynamic-table-config-dialog.comnponent.d.ts → dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent.d.ts}

@@ -1,10 +1,12 @@
 import { ChangeDetectorRef } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
-import { TableColumnConfig } from '../../table/models/table-column-config';
-import { IGenericListComponent } from '../interfaces/igeneric-list-component';
-import { BaseComponent } from './base.component';
+import { RxFormBuilder } from '../../../form-validators/services/rx-form-builder';
+import { TableColumnConfig } from '../../../table/models/table-column-config';
+import { TableConfig } from '../../../table/models/table-config';
+import { IGenericListComponent } from '../../interfaces/igeneric-list-component';
+import { BaseComponent } from '../base.component';
 import * as i0 from "@angular/core";
 export declare class VdDynamicTableConfigDialogComponent extends BaseComponent {
     protected route: ActivatedRoute;
@@ -17,10 +19,14 @@ export declare class VdDynamicTableConfigDialogComponent extends BaseComponent {
      * This is of type TableColumnConfig, which holds the configuration details for each column.
      */
     columns?: TableColumnConfig[];
+    /**
+     * A reference to the TableConfig class for use in the template.
+     */
+    tableConfigClassType: typeof TableConfig;
     /**
      * A reference to the TableColumnConfig class for use in the template.
      */
-    classType: typeof TableColumnConfig;
+    tableColumnConfigClassType: typeof TableColumnConfig;
     /**
      * Form group to manage the table configuration form controls.
      */
@@ -34,7 +40,7 @@ export declare class VdDynamicTableConfigDialogComponent extends BaseComponent {
      * @param genericList - The generic list component that contains the table data and configurations.
      * @param formBuilder - Service to build reactive forms.
      */
-    constructor(route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef, dialogRef: MatDialogRef<VdDynamicTableConfigDialogComponent>, genericList: IGenericListComponent<any>, formBuilder: FormBuilder);
+    constructor(route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef, dialogRef: MatDialogRef<VdDynamicTableConfigDialogComponent>, genericList: IGenericListComponent<any>, formBuilder: RxFormBuilder);
     /**
      * Saves the current column configuration and closes the dialog.
      */

package/lib/base/components/generic-list.component.d.ts

@@ -8,7 +8,7 @@ import { IEntity } from '../../common/models/entity';
 import { GenericService } from '../../http/services/generic.service';
 import { VdDynamicTableComponent } from '../../table/components/dynamic-table/dynamic-table.component';
 import { TableColumn } from '../../table/models/table-column';
-import { TableColumnConfig } from '../../table/models/table-column-config';
+import { TableConfig } from '../../table/models/table-config';
 import { TableDataSource } from '../../table/table.data-source';
 import { IGenericListComponent } from '../interfaces/igeneric-list-component';
 import { BaseComponent } from './base.component';
@@ -73,6 +73,10 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * A reference to MdSort attribute
      */
     dynamicTable?: VdDynamicTableComponent;
+    /**
+     * listConfig: {configs: any, query: any}
+     */
+    tableConfig: TableConfig;
     /**
      * The type of the dialog for creation
      */
@@ -110,6 +114,10 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * to the viewport during scrolling.
      */
     sticky: boolean;
+    /**
+     * Defines the overall width of the table.
+     */
+    tableWidth?: number;
     /**
      * rowNgClass: Function
      */
@@ -150,13 +158,6 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * The key for configs
      */
     protected configsKey: string;
-    /**
-     * listConfig: {configs: any, query: any}
-     */
-    protected listConfig: {
-        configs: TableColumnConfig[];
-        query: any;
-    };
     /**
      * Constructor
      * @param service
@@ -258,13 +259,13 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
     openConfigDialog(): void;
     /**
      * Saves the table config
-     * @param configs
+     * @param tableConfig
      */
-    saveConfigs(configs: TableColumnConfig[]): void;
+    saveConfigs(tableConfig: TableConfig): void;
     /**
-     * Gets and applies the table configs
+     * Gets and applies the table column configs
      */
-    loadConfigs(): void;
+    loadColumnConfigs(): void;
     /**
      * Includes some navigations
      * @param inc

package/lib/base/interfaces/igeneric-list-component.d.ts

@@ -2,7 +2,7 @@ import { MatPaginator } from "@angular/material/paginator";
 import { MatSort } from "@angular/material/sort";
 import { IEntity } from "../../common/models/entity";
 import { VdDynamicTableComponent } from "../../table/components/dynamic-table/dynamic-table.component";
-import { TableColumnConfig } from "../../table/models/table-column-config";
+import { TableConfig } from "../../table/models/table-config";
 import { TableDataSource } from "../../table/table.data-source";
 import { IBaseComponent } from "./ibase-component";
 export interface IGenericListComponent<TEntity extends IEntity | any> extends IBaseComponent {
@@ -10,6 +10,10 @@ export interface IGenericListComponent<TEntity extends IEntity | any> extends IB
      * A reference to VdDynamicTableComponent
      */
     dynamicTable?: VdDynamicTableComponent;
+    /**
+     * listConfig: {configs: any, query: any}
+     */
+    tableConfig: TableConfig;
     /**
      * Get params
      */
@@ -98,13 +102,13 @@ export interface IGenericListComponent<TEntity extends IEntity | any> extends IB
     openConfigDialog(): void;
     /**
      * Saves the table config
-     * @param configs
+     * @param config
      */
-    saveConfigs(configs?: TableColumnConfig[]): void;
+    saveConfigs(config?: TableConfig): void;
     /**
      * Gets and applies the table configs
      */
-    loadConfigs(): void;
+    loadColumnConfigs(): void;
     /**
      * Updates the table columns
      */

package/lib/common/functions/utils.d.ts

@@ -31,7 +31,7 @@ export declare class Utils {
      * @param property
      * @returns
      */
-    static getPropertyValue<TType>(object: any, property: string): TType | null;
+    static getPropertyValue<TType>(object: any, property: string, delimiter?: string): TType | null;
     /**
      * Sorts an array of object by the specified property
      * @param array

package/lib/common/styles/utilities/_general.scss

@@ -66,6 +66,14 @@
         display: flex !important;
     }
 
+    .grabbing {
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
     [hidden],
     .hidden {
         display: none !important;
@@ -78,6 +86,10 @@
         &.table-fixed {
             table-layout: fixed;
         }
+
+        &.table-sticky {
+            width: auto;
+        }
     }
 
     .na:empty:after {
@@ -535,6 +547,32 @@ mat-card {
     }
 }
 
+.dialog-resizable {
+    resize: both;
+    overflow: auto;
+}
+
+.mat-mdc-dialog-surface {
+    overflow: hidden !important;
+}
+
+.mat-mdc-dialog-container {
+    vd-dynamic-table {
+        max-height: calc(100% - 81px - 60px - 4px);
+
+        .mat-table-container {
+            height: 100%;
+        }
+
+        .table-footer {
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: var(--mat-tree-container-background-color);
+        }
+    }
+}
+
 /* #endregion */
 
 /* #region  MatSidenav */
@@ -642,6 +680,7 @@ mat-paginator {
             overflow: hidden;
             padding-left: 8px;
             padding-right: 8px;
+            line-height: 1.0rem;
 
             &:first-of-type {
                 padding-left: 16px;
@@ -655,6 +694,12 @@ mat-paginator {
 
             .mat-sort-header-content {
                 text-align: left;
+                overflow: hidden;
+
+                span {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
             }
         }
 
@@ -662,6 +707,7 @@ mat-paginator {
         .cdk-column-filter-select {
             width: 46px;
             max-width: 46px;
+            min-width: 46px !important;
             padding-left: 4px !important;
             padding-right: 6px;
             overflow: initial;
@@ -669,8 +715,9 @@ mat-paginator {
 
         .cdk-column-filter-action,
         .cdk-column-action {
-            width: 46px;
-            max-width: 46px;
+            width: 48px;
+            max-width: 48px;
+            min-width: 48px !important;
             margin-right: 8px;
             padding-right: 0;
 

package/lib/common/theming/_m2-all-theme.scss

@@ -1,6 +1,4 @@
 @use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/color-palette' as mdc-color-palette;
 @use "sass:math";
 @use 'sass:color';
 @use 'sass:map';

package/lib/form-validators/models/config/prop-config.d.ts

@@ -1,6 +1,8 @@
 export interface PropConfig {
     name?: string;
     defaultValue?: any;
+    valuePath?: string;
+    value?: (x: any) => any;
     ignore?: (x: any) => boolean;
     isPrimaryKey?: boolean;
 }

package/lib/form-validators/models/property-info.d.ts

@@ -22,6 +22,14 @@ export interface PropertyInfo {
      * Default value of the property
      */
     defaultValue?: any;
+    /**
+     * Path to the value within a nested object or structure
+     */
+    valuePath?: any;
+    /**
+     * Function to retrieve or transform the value from the entity object
+     */
+    value?: (x: any) => any;
     /**
      * Ignore function for the property
      */

package/lib/layout/_m2-layout-theme.scss

@@ -304,7 +304,7 @@
 		&.mat-form-field-disabled,
 		&.mat-form-field-readonly {
 			.mdc-text-field--outlined {
-				background-color: if($is-dark, #232526, mdc-color-palette.$grey-50);
+				background-color: if($is-dark, #232526, #fafafa);
 
 				.mdc-text-field__input {
 					color: if($is-dark, #b1b1b1de, #7a7a7ade);

package/lib/table/components/dynamic-table/dynamic-table.component.d.ts

@@ -1,5 +1,5 @@
-import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnInit, QueryList, TemplateRef } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, QueryList, TemplateRef } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, SortDirection } from '@angular/material/sort';
@@ -13,7 +13,6 @@ import { TableColumn } from '../../models/table-column';
 import { TableDataSource } from '../../table.data-source';
 import * as i0 from "@angular/core";
 export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked {
-    private formBuilder;
     private dynamicBuilder;
     private changeDetector;
     /**
@@ -90,6 +89,10 @@ export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked
      * to the viewport during scrolling.
      */
     sticky: boolean;
+    /**
+     * Defines the overall width of the table.
+     */
+    tableWidth?: number;
     /**
      * Determines whether the filter operator is used in table filtering.
      * If true, filtering logic will apply operators such as equals, contains, etc.
@@ -233,6 +236,11 @@ export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked
      * Default options include [5, 10, 15, 20, 30, 50, 100, 200].
      */
     pageSizeOptions: Array<number>;
+    scrollContainer?: ElementRef;
+    private startDragging;
+    private isDragging;
+    private startX;
+    private scrollLeft;
     /**
      * Constructor for the component, injecting services needed for form building,
      * dynamic content handling, and change detection.
@@ -241,7 +249,7 @@ export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked
      * @param dynamicBuilder Service for dynamically constructing table components.
      * @param changeDetector Service for detecting and triggering UI changes.
      */
-    constructor(formBuilder: FormBuilder, dynamicBuilder: DynamicBuilder, changeDetector: ChangeDetectorRef);
+    constructor(dynamicBuilder: DynamicBuilder, changeDetector: ChangeDetectorRef);
     /**
      * A callback method that is invoked immediately after the
      * default change detector has checked the directive's
@@ -342,6 +350,7 @@ export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked
      * @param optionalParams
      */
     log(message: any, ...optionalParams: any[]): void;
+    private stopDragging;
     /**
      * A callback method that is invoked immediately after the
      * default change detector has completed one change-check cycle
@@ -349,5 +358,5 @@ export declare class VdDynamicTableComponent implements OnInit, AfterViewChecked
      */
     ngAfterViewChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VdDynamicTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VdDynamicTableComponent, "vd-dynamic-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "data": { "alias": "data"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "debugValue": { "alias": "debugValue"; "required": false; }; "classType": { "alias": "classType"; "required": false; }; "context": { "alias": "context"; "required": false; }; "dataSourceFilter": { "alias": "dataSourceFilter"; "required": false; }; "static": { "alias": "static"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "useFilterOperator": { "alias": "useFilterOperator"; "required": false; }; "paginable": { "alias": "paginable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "sortActive": { "alias": "sortActive"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "stickyFilter": { "alias": "stickyFilter"; "required": false; }; "rowNgClass": { "alias": "rowNgClass"; "required": false; }; "detailsTemplate": { "alias": "detailsTemplate"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "selectAllFilter": { "alias": "selectAllFilter"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "rowMenuItems": { "alias": "rowMenuItems"; "required": false; }; "rowAction": { "alias": "rowAction"; "required": false; }; "excludedColumns": { "alias": "excludedColumns"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; }, { "rowClick": "rowClick"; }, ["templateRef"], ["[table-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VdDynamicTableComponent, "vd-dynamic-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "data": { "alias": "data"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "debugValue": { "alias": "debugValue"; "required": false; }; "classType": { "alias": "classType"; "required": false; }; "context": { "alias": "context"; "required": false; }; "dataSourceFilter": { "alias": "dataSourceFilter"; "required": false; }; "static": { "alias": "static"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "tableWidth": { "alias": "tableWidth"; "required": false; }; "useFilterOperator": { "alias": "useFilterOperator"; "required": false; }; "paginable": { "alias": "paginable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "sortActive": { "alias": "sortActive"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "stickyFilter": { "alias": "stickyFilter"; "required": false; }; "rowNgClass": { "alias": "rowNgClass"; "required": false; }; "detailsTemplate": { "alias": "detailsTemplate"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "selectAllFilter": { "alias": "selectAllFilter"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "rowMenuItems": { "alias": "rowMenuItems"; "required": false; }; "rowAction": { "alias": "rowAction"; "required": false; }; "excludedColumns": { "alias": "excludedColumns"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; }, { "rowClick": "rowClick"; }, ["templateRef"], ["[table-footer]"], false, never>;
 }

package/lib/table/models/table-config.d.ts

@@ -0,0 +1,29 @@
+import { TableColumnConfig } from "./table-column-config";
+import { TableQueryConfig } from "./table-query-config";
+/**
+ * The TableConfig class provides configuration options for table columns.
+ */
+export declare class TableConfig {
+    /**
+     * An optional array of table column configurations.
+     * Each configuration specifies how a column should behave in the table (e.g., sortable, filterable, etc.).
+     */
+    columns?: TableColumnConfig[];
+    /**
+     * Configuration for table queries, including field filters, sorting, and pagination.
+     */
+    query?: TableQueryConfig;
+    /**
+     * Specifies if the table should have sticky headers or columns.
+     */
+    sticky?: boolean;
+    /**
+     * Defines the overall width of the table.
+     */
+    tableWidth?: number;
+    /**
+     * Constructor
+     * @param init
+     */
+    constructor(init?: Partial<TableConfig>);
+}

package/lib/table/models/table-query-config.d.ts

@@ -0,0 +1,26 @@
+import { SortDirection } from "@angular/material/sort";
+/**
+ * Represents the configuration for table queries, such as filters, sorting, and pagination.
+ */
+export declare class TableQueryConfig {
+    /**
+     * Filters applied to table columns.
+     */
+    fieldFilters: any;
+    /**
+     * The active field for sorting.
+     */
+    sortBy?: string;
+    /**
+     * The direction of sorting ('asc' or 'desc').
+     */
+    sortDirection: SortDirection;
+    /**
+     * The number of items per page.
+     */
+    pageSize?: number;
+    /**
+     * The current page index.
+     */
+    pageIndex?: number;
+}

package/lib/table/table.module.d.ts

@@ -46,7 +46,9 @@ export { FacetValue } from './models/facet-value';
 export { Pagination } from './models/pagination';
 export { TableColumn } from './models/table-column';
 export { TableColumnConfig } from './models/table-column-config';
+export { TableConfig } from './models/table-config';
 export { TableDefinition } from './models/table-definition';
+export { TableQueryConfig } from './models/table-query-config';
 export { TableDataSource } from './table.data-source';
 export { TableStaticDataSource } from './table.static-data-source';
 export { DataSourceFilterDirective, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterSelectComponent, VdDynamicTableComponent, VdFilterOptionDirective, VdTableFieldDirective };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@messaia/cdk",
-  "version": "18.0.0",
+  "version": "18.1.0-rc02",
   "peerDependencies": {
-    "@angular/common": "^18.0.6",
-    "@angular/core": "^18.0.6"
+    "@angular/common": "^18.2.7",
+    "@angular/core": "^18.2.7"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"