@3kles/kles-material-table-v2 21.8.1 → 21.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3kles/kles-material-table-v2",
-  "version": "21.8.1",
+  "version": "21.10.0",
   "keywords": [
     "3KLES"
   ],

package/types/3kles-kles-material-table-v2.d.ts

@@ -3,7 +3,7 @@ import { Signal, EventEmitter, Type, WritableSignal, Injector, OnInit, AfterView
 import * as i1 from '@angular/common';
 import { FormGroup, FormControlStatus, FormArray, ValidatorFn, AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
-import * as i4 from '@3kles/kles-material-dynamicforms';
+import * as i5 from '@3kles/kles-material-dynamicforms';
 import { IKlesFieldConfig, GroupUiState, ArrayUiState, AbstractUiState } from '@3kles/kles-material-dynamicforms';
 import { SortHeaderArrowPosition, SortDirection, Sort, MatSort } from '@angular/material/sort';
 import * as rxjs from 'rxjs';
@@ -323,6 +323,8 @@ interface SelectionState {
 }
 type SelectionConfigDef<T> = {
     selectionMode?: boolean;
+    /** Toggles selection when the non-interactive area of a data row is clicked. */
+    selectOnRowClick?: boolean;
     key?: string;
     params?: () => Observable<T>;
     select?: SelectionCallback<[
@@ -445,13 +447,22 @@ interface DragDropRowContext<TValue = unknown> {
 }
 interface DragDrop<TValue = unknown> {
     dragDropRows?: DragDropConfig<TValue>;
-    /** Reserved for the future column drag-and-drop implementation. */
-    dragDropColumns?: DragDropConfig<TValue>;
+    dragDropColumns?: ColumnDragDropConfig;
+}
+interface ColumnDragDropConfig {
+    enable?: boolean;
+    options?: {
+        /** Prevents specific columns from being moved. */
+        dragDisabled?: (column: KlesColumnConfig) => boolean;
+    };
 }
 type ExtraRowMode = 'expand' | 'always';
+type ExtraRowWidth = 'table' | 'viewport';
 interface ExtraRowConfig {
     cells: KlesExtraCellFieldConfig[];
     mode?: ExtraRowMode;
+    /** Controls whether the content uses the full table width or only the visible scroll viewport. Defaults to `table`. */
+    width?: ExtraRowWidth;
     when?: (index: number, rowData: FormGroup) => boolean;
 }
 interface ExtraRow {
@@ -1289,6 +1300,7 @@ interface ISelectionService {
     selectionModel?: IKlesSelectionModel<FormGroup>;
     readonly loadingRows: Signal<ReadonlySet<FormGroup>>;
     isLoading(row: FormGroup): boolean;
+    onRowClick(event: MouseEvent, row: FormGroup): void;
     count(): Signal<number>;
     disable(): void;
     enable(): void;
@@ -1334,7 +1346,8 @@ declare class RenderService {
 
 declare class RowService {
     private readonly eventsService;
-    constructor(eventsService: EventsService);
+    private readonly selectionService;
+    constructor(eventsService: EventsService, selectionService: ISelectionService);
     onClick(event: MouseEvent, row: FormGroup, rowIndex: number): void;
     onDoubleClick(event: MouseEvent, row: FormGroup, rowIndex: number): void;
     onContextMenu(event: MouseEvent, row: FormGroup, rowIndex: number): void;
@@ -1408,6 +1421,19 @@ declare class TreeService<T, R> {
     static ɵprov: i0.ɵɵInjectableDeclaration<TreeService<any, any>>;
 }
 
+declare class ColumnDragDropService {
+    private readonly config;
+    private readonly columnsService;
+    readonly enable: boolean;
+    constructor(config: ColumnDragDropConfig | undefined, columnsService: ColumnsService);
+    readonly sortPredicate: (index: number, drag: CdkDrag<KlesColumnConfig>) => boolean;
+    visibleColumns(): KlesColumnConfig[];
+    isDragDisabled(column: KlesColumnConfig): boolean;
+    listDropped(event: CdkDragDrop<KlesColumnConfig[]>): void;
+    private isSameGroup;
+    private groupOf;
+}
+
 type TableSection = 'header' | 'body' | 'footer';
 declare class TableComponent implements ITable, OnInit, AfterViewInit, OnDestroy {
     private readonly host;
@@ -1416,6 +1442,7 @@ declare class TableComponent implements ITable, OnInit, AfterViewInit, OnDestroy
     private readonly datasourceService;
     readonly tableService: ITableService;
     readonly dragDropRowService: DragDropService;
+    readonly columnDragDropService: ColumnDragDropService;
     readonly rowAppearance: RowAppearanceConfig;
     readonly selectionService: ISelectionService;
     readonly columnsService: ColumnsService;
@@ -1438,9 +1465,13 @@ declare class TableComponent implements ITable, OnInit, AfterViewInit, OnDestroy
     table: MatTable<FormGroup>;
     matSort: MatSort;
     formElemRef: ElementRef<HTMLElement>;
+    private readonly dropLists;
+    private readonly drags;
     headerHeightPx: i0.WritableSignal<number>;
     scrollHeightPx: i0.WritableSignal<number>;
     footerHeightPx: i0.WritableSignal<number>;
+    viewportWidthPx: i0.WritableSignal<number>;
+    viewportScrollRangePx: i0.WritableSignal<number>;
     dataSource: IKlesDataSource;
     columns: Signal<KlesColumnConfig[]>;
     displayedColumns: Signal<string[]> | undefined;
@@ -1455,8 +1486,9 @@ declare class TableComponent implements ITable, OnInit, AfterViewInit, OnDestroy
     private rafId?;
     private _cleanup?;
     emptyStateComponent: typeof KlesTableEmptyStateComponent;
-    constructor(host: ElementRef<HTMLElement>, connectorService: KlesTableConnectorService, loader: ILoader<unknown>, datasourceService: IDatasourceService, tableService: ITableService, dragDropRowService: DragDropService, rowAppearance: RowAppearanceConfig, selectionService: ISelectionService, columnsService: ColumnsService, loadingService: LoadingService, paginatorService: PaginatorService, scrollbarService: ScrollbarService, footerService: FooterService, extraRowService: ExtraRowService, renderService: RenderService, sortService: ISortService, filterService: FilterService, expandedRowStore: ExpandedRowStore, rowFactory: RowFormFactory, eventsService: EventsService, rowService: RowService, cellService: CellService, emptyStateService: EmptyStateService, treeService: TreeService<unknown, unknown>, rowContextStore: RowContextStore);
+    constructor(host: ElementRef<HTMLElement>, connectorService: KlesTableConnectorService, loader: ILoader<unknown>, datasourceService: IDatasourceService, tableService: ITableService, dragDropRowService: DragDropService, columnDragDropService: ColumnDragDropService, rowAppearance: RowAppearanceConfig, selectionService: ISelectionService, columnsService: ColumnsService, loadingService: LoadingService, paginatorService: PaginatorService, scrollbarService: ScrollbarService, footerService: FooterService, extraRowService: ExtraRowService, renderService: RenderService, sortService: ISortService, filterService: FilterService, expandedRowStore: ExpandedRowStore, rowFactory: RowFormFactory, eventsService: EventsService, rowService: RowService, cellService: CellService, emptyStateService: EmptyStateService, treeService: TreeService<unknown, unknown>, rowContextStore: RowContextStore);
     getRowContext(row: FormGroup): KlesRowContext;
+    isRowSelected(row: FormGroup): boolean;
     get isLoadingClass(): boolean;
     get isEmptyClass(): boolean;
     get events(): EventsApi;
@@ -1481,15 +1513,23 @@ declare class TableComponent implements ITable, OnInit, AfterViewInit, OnDestroy
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    private bindColumnDragsToHeader;
+    private scheduleColumnDragBinding;
     getColumnSeparator(column: KlesColumnConfig, section: TableSection): string | null;
     getStickyStartSeparator(column: KlesColumnConfig, section: TableSection): string | null;
     getStickyEndSeparator(column: KlesColumnConfig, section: TableSection): string | null;
     private getSeparatorStyle;
     private calculHeaderHeight;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null, null, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "kles-table", never, {}, {}, never, never, true, never>;
 }
 
+declare class KlesTableFooterStartDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesTableFooterStartDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesTableFooterStartDirective, "[klesTableFooterStart]", never, {}, {}, never, never, true, never>;
+}
+
 interface KlesTableApi<TValue = unknown> {
     refresh(): void;
     get scrollbar(): ScrollbarApi;
@@ -1514,6 +1554,7 @@ interface KlesTableApi<TValue = unknown> {
 declare class KlesTableComponent<TParams = unknown, TValue = unknown> implements OnInit, KlesTableApi<TValue> {
     private connectorService;
     tableConfig: i0.InputSignal<KlesTableConfig<TParams, TValue>>;
+    readonly footerStart: i0.Signal<KlesTableFooterStartDirective>;
     private readonly destroyRef;
     tableEvent: EventEmitter<TableEvent<TValue>>;
     rowClick: EventEmitter<RowMousePayload<TValue>>;
@@ -1562,13 +1603,13 @@ declare class KlesTableComponent<TParams = unknown, TValue = unknown> implements
     }>;
     private dispatchEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesTableComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesTableComponent<any, any>, "kles-dynamic-table", never, { "tableConfig": { "alias": "tableConfig"; "required": true; "isSignal": true; }; }, { "tableEvent": "tableEvent"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "rowContextMenu": "rowContextMenu"; "rowMouseEnter": "rowMouseEnter"; "rowMouseLeave": "rowMouseLeave"; "rowDrop": "rowDrop"; "rowDropSuccess": "rowDropSuccess"; "rowDropError": "rowDropError"; "cellClick": "cellClick"; "cellDoubleClick": "cellDoubleClick"; "cellContextMenu": "cellContextMenu"; "cellValueChange": "cellValueChange"; "selectionChange": "selectionChange"; "selectionError": "selectionError"; "pageChange": "pageChange"; "sortChange": "sortChange"; "filterChange": "filterChange"; "loadError": "loadError"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeLoadChildren": "nodeLoadChildren"; "nodeChildrenLoaded": "nodeChildrenLoaded"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesTableComponent<any, any>, "kles-dynamic-table", never, { "tableConfig": { "alias": "tableConfig"; "required": true; "isSignal": true; }; }, { "tableEvent": "tableEvent"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "rowContextMenu": "rowContextMenu"; "rowMouseEnter": "rowMouseEnter"; "rowMouseLeave": "rowMouseLeave"; "rowDrop": "rowDrop"; "rowDropSuccess": "rowDropSuccess"; "rowDropError": "rowDropError"; "cellClick": "cellClick"; "cellDoubleClick": "cellDoubleClick"; "cellContextMenu": "cellContextMenu"; "cellValueChange": "cellValueChange"; "selectionChange": "selectionChange"; "selectionError": "selectionError"; "pageChange": "pageChange"; "sortChange": "sortChange"; "filterChange": "filterChange"; "loadError": "loadError"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeLoadChildren": "nodeLoadChildren"; "nodeChildrenLoaded": "nodeChildrenLoaded"; }, ["footerStart"], never, true, never>;
 }
 
 declare class KlesMaterialTableModule {
     static declarations: any[][];
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesMaterialTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KlesMaterialTableModule, never, [typeof i1.CommonModule, typeof TableComponent, typeof KlesTableComponent, typeof i4.KlesMaterialDynamicformsModule], [typeof KlesTableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KlesMaterialTableModule, never, [typeof i1.CommonModule, typeof TableComponent, typeof KlesTableFooterStartDirective, typeof KlesTableComponent, typeof i5.KlesMaterialDynamicformsModule], [typeof KlesTableFooterStartDirective, typeof KlesTableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KlesMaterialTableModule>;
 }
 
@@ -1580,6 +1621,7 @@ declare const EXTRA_ROWS: InjectionToken<WritableSignal<ExtraRowConfig[]>>;
 declare const MULTI_UNFOLD: InjectionToken<boolean>;
 declare const ROW_APPEARANCE_CONFIG: InjectionToken<RowAppearanceConfig<unknown>>;
 declare const ROW_DRAG_DROP: InjectionToken<DragDropService>;
+declare const COLUMN_DRAG_DROP: InjectionToken<ColumnDragDropService>;
 declare const DRAG_DROP_CONFIG: InjectionToken<DragDropConfig<unknown>>;
 declare const KLES_DRAG_DROP_ROW_CONTEXT: InjectionToken<DragDropRowContext<unknown>>;
 declare const PAGINATOR_CONFIG: InjectionToken<PaginatorConfig>;
@@ -1595,5 +1637,5 @@ declare const SCROLLBAR_ORCHESTRATOR_SERVICE: InjectionToken<IScrollbarOrchestra
 declare const TABLE_SERVICE: InjectionToken<ITableService>;
 declare const EMPTY_STATE_CONFIG: InjectionToken<boolean | EmptyStateConfig>;
 
-export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
-export type { AggregationType, BulkActionClickPayload, CellMousePayload, CellPayload, CellValueChangePayload, ColumnApi, ColumnClass, ColumnDropPayload, ColumnOrderChangePayload, ColumnPayload, ColumnResizePayload, ColumnSeparatorConfig, ColumnSeparatorStyle, ColumnVisibilityChangePayload, DefaultTableConfig, DragDrop, DragDropConfig, DragDropRowChange, DragDropRowContext, EmptyStateApi, EmptyStateChangePayload, EmptyStateConfig, EventsApi, ExpansionPayload, ExtraRow, ExtraRowConfig, ExtraRowMode, FilterChangePayload, FooterApi, FooterFormApi, FormApi, FormValue, GlobalSearchPayload, HeaderFormApi, IKlesCellFieldConfig, IKlesFooterFieldConfig, IKlesHeaderFieldConfig, ITable, InfiniteScrollConfig, KlesColumnConfig, KlesExtraCellFieldConfig, KlesRowContext, KlesStyleMap, KlesStyleValue, KlesTableApi, KlesTableConfig, LinesLazyLoader, LinesLoader, LoadErrorPayload, LoadSuccessPayload, LoaderConfig, LoaderLazyResult, LoaderResult, LoadingApi, LoadingChangePayload, NgStyleInput, PageChangePayload, PaginationApi, PaginatorConfig, RenderApi, RowActionClickPayload, RowAppearanceConfig, RowClassInput, RowClassValue, RowDropErrorPayload, RowDropPayload, RowId, RowMousePayload, RowPayload, RowStyleInput, RowValidatePayload, RowsFormApi, ScrollbarApi, Selection, SelectionAllResponse, SelectionApi, SelectionChangePayload, SelectionConfig, SelectionErrorPayload, SelectionResponse, SelectionState, SortApi, SortPayload, StateChangePayload, SummaryChangePayload, TableElevationLevel, TableEvent, TableEventMap, TableEventPayload, TableEventType, TableFormValue, TreeApi, TreeNodeId, TreePayload, ValidationErrorPayload, VisibilityChangePayload };
+export { AlignCell, COLUMNS, COLUMN_DRAG_DROP, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableFooterStartDirective, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
+export type { AggregationType, BulkActionClickPayload, CellMousePayload, CellPayload, CellValueChangePayload, ColumnApi, ColumnClass, ColumnDragDropConfig, ColumnDropPayload, ColumnOrderChangePayload, ColumnPayload, ColumnResizePayload, ColumnSeparatorConfig, ColumnSeparatorStyle, ColumnVisibilityChangePayload, DefaultTableConfig, DragDrop, DragDropConfig, DragDropRowChange, DragDropRowContext, EmptyStateApi, EmptyStateChangePayload, EmptyStateConfig, EventsApi, ExpansionPayload, ExtraRow, ExtraRowConfig, ExtraRowMode, ExtraRowWidth, FilterChangePayload, FooterApi, FooterFormApi, FormApi, FormValue, GlobalSearchPayload, HeaderFormApi, IKlesCellFieldConfig, IKlesFooterFieldConfig, IKlesHeaderFieldConfig, ITable, InfiniteScrollConfig, KlesColumnConfig, KlesExtraCellFieldConfig, KlesRowContext, KlesStyleMap, KlesStyleValue, KlesTableApi, KlesTableConfig, LinesLazyLoader, LinesLoader, LoadErrorPayload, LoadSuccessPayload, LoaderConfig, LoaderLazyResult, LoaderResult, LoadingApi, LoadingChangePayload, NgStyleInput, PageChangePayload, PaginationApi, PaginatorConfig, RenderApi, RowActionClickPayload, RowAppearanceConfig, RowClassInput, RowClassValue, RowDropErrorPayload, RowDropPayload, RowId, RowMousePayload, RowPayload, RowStyleInput, RowValidatePayload, RowsFormApi, ScrollbarApi, Selection, SelectionAllResponse, SelectionApi, SelectionChangePayload, SelectionConfig, SelectionErrorPayload, SelectionResponse, SelectionState, SortApi, SortPayload, StateChangePayload, SummaryChangePayload, TableElevationLevel, TableEvent, TableEventMap, TableEventPayload, TableEventType, TableFormValue, TreeApi, TreeNodeId, TreePayload, ValidationErrorPayload, VisibilityChangePayload };