@mediusinc/mng-commons 0.6.1 → 0.7.0

package/lib/api/models/builders/query-param.builder.d.ts

@@ -3,6 +3,7 @@ export declare class MediusQueryParamBuilder {
     private queryParam;
     private constructor();
     static create(itemsPerPage?: number, itemsOffset?: number): MediusQueryParamBuilder;
+    static createFromExisting(queryParam: MediusQueryParam, itemsPerPage?: number, itemsOffset?: number): MediusQueryParamBuilder;
     withItemsPerPage(itemsPerPage: number): MediusQueryParamBuilder;
     withItemsOffset(itemsOffset: number): MediusQueryParamBuilder;
     withQueryMode(queryMode: MediusQueryMode): MediusQueryParamBuilder;

package/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.d.ts

@@ -3,23 +3,20 @@ import { FieldType } from '@ngx-formly/core';
 import { Observable, Subject } from 'rxjs';
 import { ActionDescriptor, FieldManyEditorDescriptor } from '../../../../../descriptors';
 import { MngActionExecutorService } from '../../../../../services';
-import { MngTableCellClickEvent } from '../../../../tableview/models';
 import * as i0 from "@angular/core";
 export declare class MngFormlyFieldTableDialogFormComponent<T, ET> extends FieldType implements OnInit, OnDestroy {
     private actionExecutor;
     descriptor: FieldManyEditorDescriptor<T, ET>;
     itemsSubject: Subject<Array<T>>;
     items$: Observable<Array<T>>;
+    actions: Array<ActionDescriptor<T>>;
     toolbarRightActions: Array<ActionDescriptor<T>>;
-    rowClickActions: Array<ActionDescriptor<T>>;
-    rowInlineActions: Array<ActionDescriptor<T>>;
     private subscriptions;
     private isDisabledSubject;
     private isEnabled$;
     constructor(actionExecutor: MngActionExecutorService);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    onTableCellClick(event: MngTableCellClickEvent<T>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngFormlyFieldTableDialogFormComponent<any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngFormlyFieldTableDialogFormComponent<any, any>, "mng-formly-table-dialog-form-field", never, {}, {}, never, never>;
 }

package/lib/components/tableview/table/table.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, EventEmitter, Injector, OnDestroy, OnInit, QueryList, TemplateRef, Type } from '@angular/core';
+import { AfterContentInit, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { LazyLoadEvent, SortMeta } from 'primeng/api';
@@ -7,17 +7,18 @@ import { Table } from 'primeng/table';
 import { Observable } from 'rxjs';
 import { MediusQueryResult } from '../../../api/models';
 import { ITableDataProvider } from '../../../data-providers';
-import { ColumnDescriptor, TableDescriptor } from '../../../descriptors';
+import { ActionDescriptor, ColumnDescriptor, TableDescriptor } from '../../../descriptors';
 import { MngComponentDirective, MngTemplateDirective } from '../../../directives';
 import { IViewContainer } from '../../../models';
-import { MngViewContainerComponentService } from '../../../services';
+import { MngActionExecutorService, MngViewContainerComponentService } from '../../../services';
 import { MngTableCellClickEvent, MngTableLoadEvent } from '../models';
 import * as i0 from "@angular/core";
-export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit, OnDestroy {
+export declare class MngTableComponent<T, S> implements OnInit, OnChanges, AfterContentInit, OnDestroy {
     private injector;
     private router;
-    private activatedRoute;
+    private route;
     private translate;
+    private actionExecutor;
     private viewContainerService;
     readonly filterDisplayRow: TableDescriptor.FilterDisplayEnum;
     readonly filterDisplayMenu: TableDescriptor.FilterDisplayEnum;
@@ -29,10 +30,12 @@ export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit
     useQueryParams: boolean;
     selectionMode: string;
     selectionEnabled: boolean;
-    isColumnClickable: boolean;
+    actions: Array<ActionDescriptor<T>>;
+    isColumnClickable?: boolean;
     viewContainerInit?: IViewContainer<T, S>;
     captionComponent?: Type<any>;
     columnActionComponent?: Type<any>;
+    columnActionMinWidth: number | null;
     loadEventEmitter: EventEmitter<MngTableLoadEvent>;
     cellClickEventEmitter: EventEmitter<MngTableCellClickEvent<T>>;
     selectionChangeEventEmitter: EventEmitter<T[]>;
@@ -48,6 +51,7 @@ export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit
     queryResult$?: Observable<MediusQueryResult<T>>;
     loading$?: Observable<boolean>;
     dataProviderInfiniteScrollItems: Array<T>;
+    private itemsSubject;
     rowsPerPageOptions: Array<number>;
     rows: number;
     offset: number;
@@ -57,6 +61,8 @@ export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit
     };
     infiniteScroll: boolean;
     scrollHeight: 'flex' | null;
+    className: string;
+    tableFullHeightOffset: number | null;
     rowHeight: number | null;
     selection: Array<T>;
     private dataProviderService;
@@ -70,17 +76,21 @@ export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit
     private isFilterChanged;
     private isSortChanged;
     private filterDescriptors;
+    showInlineActionsColumn: boolean;
+    rowClickActions: ActionDescriptor<T>[];
+    rowInlineActions: ActionDescriptor<T>[];
     private viewContainer?;
     private subscriptions;
-    constructor(injector: Injector, router: Router, activatedRoute: ActivatedRoute, translate: TranslateService, viewContainerService: MngViewContainerComponentService<T, S> | null);
+    constructor(injector: Injector, router: Router, route: ActivatedRoute, translate: TranslateService, actionExecutor: MngActionExecutorService, viewContainerService: MngViewContainerComponentService<T, S> | null);
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     reload(emitEvent?: boolean, resetParams?: boolean): void;
     onTableLazyLoad(event: LazyLoadEvent): void;
     onTableSort(event: any): void;
     onTableFilter(event: any): void;
-    onCellClick(col: ColumnDescriptor<any, T>, item: T, idx: number): void;
+    onCellClick(event: Event, col: ColumnDescriptor<any, T>, item: T, idx: number): void;
     onSelectionChange(event: Array<T>): void;
     onCaptionCmpInst<C>(instance: C): void;
     onColumnActionCmpInst<C>(instance: C): void;
@@ -88,6 +98,6 @@ export declare class MngTableComponent<T, S> implements OnInit, AfterContentInit
     private loadTableFromRouteUpdate;
     private updatePrimeSortAndFilter;
     private getDefaultSortMeta;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MngTableComponent<any, any>, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MngTableComponent<any, any>, "mng-table", never, { "descriptor": "descriptor"; "items": "items"; "queryResult": "queryResult"; "loading": "loading"; "dataProvider": "dataProvider"; "useQueryParams": "useQueryParams"; "selectionMode": "selectionMode"; "selectionEnabled": "selectionEnabled"; "isColumnClickable": "isColumnClickable"; "viewContainerInit": "viewContainer"; "captionComponent": "captionComponent"; "columnActionComponent": "columnActionComponent"; }, { "loadEventEmitter": "tableLoad"; "cellClickEventEmitter": "cellClick"; "selectionChangeEventEmitter": "selectionChange"; "captionCmpInstEventEmitter": "captionComponentInstance"; "columnActionCmpInstEventEmitter": "columnActionComponentInstance"; }, ["templates"], never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngTableComponent<any, any>, [null, null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngTableComponent<any, any>, "mng-table", never, { "descriptor": "descriptor"; "items": "items"; "queryResult": "queryResult"; "loading": "loading"; "dataProvider": "dataProvider"; "useQueryParams": "useQueryParams"; "selectionMode": "selectionMode"; "selectionEnabled": "selectionEnabled"; "actions": "actions"; "isColumnClickable": "isColumnClickable"; "viewContainerInit": "viewContainer"; "captionComponent": "captionComponent"; "columnActionComponent": "columnActionComponent"; "columnActionMinWidth": "columnActionMinWidth"; }, { "loadEventEmitter": "tableLoad"; "cellClickEventEmitter": "cellClick"; "selectionChangeEventEmitter": "selectionChange"; "captionCmpInstEventEmitter": "captionComponentInstance"; "columnActionCmpInstEventEmitter": "columnActionComponentInstance"; }, ["templates"], never>;
 }

package/lib/components/tableview/tableview.component.d.ts

@@ -7,7 +7,6 @@ import { IDataProvider, ITableviewDataProvider } from '../../data-providers';
 import { ActionDescriptor, TableviewDescriptor } from '../../descriptors';
 import { IViewContainer } from '../../models';
 import { MngActionExecutorService, MngViewContainerComponentService } from '../../services';
-import { MngTableCellClickEvent } from './models';
 import { MngTableComponent } from './table/table.component';
 import * as i0 from "@angular/core";
 export declare class MngTableviewComponent<T, S> implements OnInit, OnDestroy, IViewContainer<T, S> {
@@ -21,7 +20,7 @@ export declare class MngTableviewComponent<T, S> implements OnInit, OnDestroy, I
     descriptor: TableviewDescriptor<T>;
     dataProvider?: ITableviewDataProvider<T, S>;
     actions: Array<ActionDescriptor<T>>;
-    tableComponent: MngTableComponent<T, S> | null;
+    tableComponent?: MngTableComponent<T, S>;
     rowClickActions: ActionDescriptor<T>[];
     rowInlineActions: ActionDescriptor<T>[];
     toolbarLeftActions: ActionDescriptor<T>[];
@@ -33,7 +32,6 @@ export declare class MngTableviewComponent<T, S> implements OnInit, OnDestroy, I
     getMessageService(): MessageService;
     getDataProvider(): IDataProvider<T, S> | undefined;
     reloadTable(): void;
-    onTableCellClick(event: MngTableCellClickEvent<T>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngTableviewComponent<any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngTableviewComponent<any, any>, "mng-tableview", never, { "descriptor": "descriptor"; "dataProvider": "dataProvider"; "actions": "actions"; }, {}, never, never>;
 }

package/lib/descriptors/column.descriptor.d.ts

@@ -12,6 +12,10 @@ export declare class ColumnDescriptor<T, TT> {
     private _isSortEnabled;
     private _filterDescriptor?;
     private _displayFormat?;
+    private _headerClassName;
+    private _className;
+    private _width;
+    private _minWidth;
     private _enumType?;
     private _enumTitlePath?;
     private _enumNameAsValue;
@@ -30,6 +34,10 @@ export declare class ColumnDescriptor<T, TT> {
     get displayFormat(): string | undefined;
     get table(): TableDescriptor<TT>;
     get property(): string;
+    get headerClassName(): string;
+    get className(): string;
+    get width(): number | null;
+    get minWidth(): number | null;
     get enumType(): EnumType | undefined;
     get enumTitlePath(): string | null | undefined;
     get enumNameAsValue(): boolean;
@@ -45,6 +53,8 @@ export declare class ColumnDescriptor<T, TT> {
     asBoolean(yes?: string, no?: string, asIcon?: boolean): this;
     asEnum(enumType: EnumType, nameAsValue?: boolean, titlePath?: string | null): this;
     asCustomComponent(customComponentType: Type<IColumnValueComponent<TT>>): this;
+    withClassName(className?: string, headerClassName?: string): this;
+    withWidth(width?: number, minWidth?: number): this;
     withObjectProperty<MT>(modelType: ClassType<MT>, titleProperty?: string): this;
     withTitle(title: string): this;
     withJsonPath(path: string): this;

package/lib/descriptors/table.descriptor.d.ts

@@ -16,8 +16,12 @@ export declare class TableDescriptor<T> {
     private _hasDefaultSort;
     private _defaultSortProperty;
     private _defaultSortAsc;
-    private _rowHeight;
-    private _tableFullHeightOffset;
+    private _className;
+    private _size;
+    private _tableFullHeightOffset?;
+    private _rowHeight?;
+    private _hasHover;
+    private _hasGridlines;
     constructor(modelType: ClassType<T>, idProperty?: string, titleProperty?: string);
     get filterDisplay(): TableDescriptor.FilterDisplayEnum;
     get paginationMode(): TableDescriptor.PaginationModeEnum;
@@ -30,9 +34,13 @@ export declare class TableDescriptor<T> {
     get hasDefaultSort(): boolean;
     get defaultSortProperty(): string[];
     get defaultSortAsc(): boolean[];
-    get rowHeight(): number;
-    get tableFullHeightOffset(): number;
     get model(): ModelDescriptor<T>;
+    get className(): string;
+    get size(): TableDescriptor.SizeEnum;
+    get tableFullHeightOffset(): number | undefined;
+    get rowHeight(): number | undefined;
+    get hasHover(): boolean;
+    get hasGridlines(): boolean;
     addColumnDescriptor<CT>(column: ColumnDescriptor<CT, T>): TableDescriptor<T>;
     addColumn(property: string): ColumnDescriptor<string, T>;
     addColumnNumber(property: string, displayFormat?: string): ColumnDescriptor<number, T>;
@@ -47,8 +55,12 @@ export declare class TableDescriptor<T> {
     withHideHeader(hideHeader?: boolean): this;
     withDataKeyProperty(property: string): TableDescriptor<T>;
     withDefaultSort(property: string, asc?: boolean): TableDescriptor<T>;
-    withRowHeight(rowHeight: number): TableDescriptor<T>;
+    withClassName(className: string): this;
+    withSize(size?: TableDescriptor.SizeEnum): this;
     withTableFullHeightOffset(tableFullHeightOffset: number): TableDescriptor<T>;
+    withRowHeight(rowHeight: number): TableDescriptor<T>;
+    withHover(hover: boolean): this;
+    withGridlines(gridlines: boolean): this;
     copy(): TableDescriptor<T>;
 }
 export declare namespace TableDescriptor {
@@ -60,4 +72,9 @@ export declare namespace TableDescriptor {
         Row = 0,
         Menu = 1
     }
+    enum SizeEnum {
+        Small = 0,
+        Normal = 1,
+        Large = 2
+    }
 }

package/lib/utils/styles.util.d.ts

@@ -0,0 +1,14 @@
+import { ActionDescriptor, TableDescriptor } from '../descriptors';
+export declare class StylesUtil {
+    static readonly BUTTON_ROUNDED_WIDTH_XS = 26;
+    static readonly BUTTON_ROUNDED_WIDTH_SM = 28;
+    static readonly BUTTON_ROUNDED_WIDTH = 32;
+    static readonly BUTTON_ROUNDED_WIDTH_LG = 45;
+    static readonly ACTION_BUTTON_MARGIN_X = 2;
+    static readonly TABLE_CELL_PADDING_X = 8;
+    static readonly TABLE_CELL_PADDING_X_SM = 4;
+    static readonly TABLE_CELL_PADDING_X_LG = 12;
+    static calculateTableColumnActionWidth(table: TableDescriptor<unknown>, actions: Array<ActionDescriptor<unknown>>): number;
+    static getTableCellPaddingX(table: TableDescriptor<unknown>): number;
+    static getActionButtonRoundedWidth(action: ActionDescriptor<unknown>): number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0",

package/scss/mng-overrides/_theme_datatable.scss

@@ -6,4 +6,25 @@
             color: $primaryTextColor;
         }
     }
+
+    .p-datatable-tbody > tr > td {
+        &.column-action {
+            padding-top: 0.1rem;
+            padding-bottom: 0.1rem;
+        }
+    }
+
+    &.p-datatable-lg .p-datatable-tbody > tr > td {
+        &.column-action {
+            padding-top: 0.15rem;
+            padding-bottom: 0.15rem;
+        }
+    }
+
+    &.p-datatable-sm .p-datatable-tbody > tr > td {
+        &.column-action {
+            padding-top: 0.05rem;
+            padding-bottom: 0.05rem;
+        }
+    }
 }

package/scss/mng-overrides/_theme_tableview.scss

@@ -38,49 +38,6 @@
     .p-datatable-tbody > tr > td .p-column-title {
         display: none;
     }
-
-    @media screen and (max-width: 960px) {
-        .p-datatable {
-            .p-datatable-thead > tr > th,
-            .p-datatable-tfoot > tr > td {
-                display: none !important;
-            }
-
-            .p-datatable-tbody > tr {
-                border-bottom: 1px solid var(--surface-d);
-
-                > td {
-                    text-align: left;
-                    display: block;
-                    border: 0 none !important;
-                    width: 100% !important;
-                    float: left;
-                    clear: left;
-                    border: 0 none;
-
-                    .p-column-title {
-                        padding: 0.4rem;
-                        min-width: 30%;
-                        display: inline-block;
-                        margin: -0.4rem 1rem -0.4rem -0.4rem;
-                        font-weight: bold;
-                    }
-
-                    .p-progressbar {
-                        margin-top: 0.5rem;
-                    }
-
-                    &:last-child {
-                        text-align: center;
-                    }
-
-                    &:nth-child(6) {
-                        display: flex;
-                    }
-                }
-            }
-        }
-    }
 }
 
 .p-datatable:not(.p-datatable-gridlines) {