@acorex/components 19.1.0-next.1 → 19.1.0-next.2
Sign up to get free protection for your applications and to get access to all the features.
- package/common/lib/classes/datasource.class.d.ts +6 -0
- package/data-table/index.d.ts +1 -0
- package/data-table/lib/base-data-table.class.d.ts +12 -1
- package/data-table/lib/columns/data-text-column.component.d.ts +20 -5
- package/data-table/lib/columns/row-expand-column.component.d.ts +50 -0
- package/data-table/lib/data-table/data-table.component.d.ts +9 -2
- package/data-table/lib/data-table.module.d.ts +15 -14
- package/fesm2022/acorex-components-common.mjs +4 -0
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +304 -21
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/package.json +1 -1
@@ -41,6 +41,10 @@ export interface AXDataSourceChangedEvent<T = unknown> {
|
|
41
41
|
totalPages: number;
|
42
42
|
page: number;
|
43
43
|
}
|
44
|
+
export interface AXDataSourceItemExpandedEvent<T = unknown> {
|
45
|
+
expandedItem: T;
|
46
|
+
children: Array<T>;
|
47
|
+
}
|
44
48
|
export declare class AXDataSource<T = unknown> {
|
45
49
|
config: AXDataSourceConfig<T>;
|
46
50
|
useCache: boolean;
|
@@ -57,11 +61,13 @@ export declare class AXDataSource<T = unknown> {
|
|
57
61
|
private _query;
|
58
62
|
get query(): AXDataSourceQuery;
|
59
63
|
onChanged: Subject<AXDataSourceChangedEvent<T>>;
|
64
|
+
onItemExpanded: Subject<AXDataSourceItemExpandedEvent<T>>;
|
60
65
|
onLoadingChanged: Subject<boolean>;
|
61
66
|
private _isLoading;
|
62
67
|
get isLoading(): boolean;
|
63
68
|
constructor(config: AXDataSourceConfig<T>);
|
64
69
|
private load;
|
70
|
+
getItemsByFilter(filter: AXDataSourceFilterOption): Promise<AXDataSourceCallbackResult<T>>;
|
65
71
|
private setLoadingState;
|
66
72
|
setPage(page: number): void;
|
67
73
|
setPageSize(pageSize: number): void;
|
package/data-table/index.d.ts
CHANGED
@@ -3,6 +3,7 @@ export * from './lib/columns/data-table-column';
|
|
3
3
|
export * from './lib/columns/data-table-column-resizable.directive';
|
4
4
|
export * from './lib/columns/data-text-column.component';
|
5
5
|
export * from './lib/columns/row-command-column.component';
|
6
|
+
export * from './lib/columns/row-expand-column.component';
|
6
7
|
export * from './lib/columns/row-index-column.component';
|
7
8
|
export * from './lib/columns/row-select-column.component';
|
8
9
|
export * from './lib/data-table.module';
|
@@ -10,15 +10,26 @@ export interface AXDataTableRowClick extends AXEvent {
|
|
10
10
|
export interface AXColumnsOrderChangedEvent extends AXEvent {
|
11
11
|
data?: any;
|
12
12
|
}
|
13
|
+
export interface onColumnSizeChangedEvent extends AXEvent {
|
14
|
+
type: 'start' | 'end';
|
15
|
+
data?: any;
|
16
|
+
}
|
13
17
|
export interface AXDataTableRowDbClick extends AXDataTableRowClick {
|
14
18
|
}
|
15
19
|
export declare abstract class AXBaseDataTable extends MXBaseComponent {
|
16
20
|
dataSource: AXDataSource<unknown>;
|
21
|
+
/**
|
22
|
+
* For handle nested rows.
|
23
|
+
*
|
24
|
+
* @defaultValue `parentId`
|
25
|
+
*/
|
26
|
+
parentField: string;
|
17
27
|
selectedRowsChange: EventEmitter<unknown[]>;
|
18
|
-
|
28
|
+
getDataSourceKey(): string;
|
19
29
|
private _selectedRows;
|
20
30
|
get selectedRows(): unknown[];
|
21
31
|
set selectedRows(v: unknown[]);
|
32
|
+
expandRow(row: any): Promise<void>;
|
22
33
|
selectRows(...rows: unknown[]): void;
|
23
34
|
unSelectRows(...rows: unknown[]): void;
|
24
35
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;
|
@@ -8,10 +8,21 @@ import * as i0 from "@angular/core";
|
|
8
8
|
* @category Components
|
9
9
|
*/
|
10
10
|
export declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
|
11
|
+
private grid;
|
12
|
+
protected loadingRow: import("@angular/core").WritableSignal<any>;
|
13
|
+
protected initialWidth: string;
|
11
14
|
/**
|
12
15
|
* Defines the data field to display in the column.
|
13
16
|
*/
|
14
17
|
dataField: string;
|
18
|
+
/**
|
19
|
+
* Controls the display of an expandable arrow icon beside the cell text.
|
20
|
+
* If set to `true`, an arrow icon is shown next to the text, indicating expandability.
|
21
|
+
*
|
22
|
+
* @defaultValue false
|
23
|
+
*
|
24
|
+
*/
|
25
|
+
expandHandler: boolean;
|
15
26
|
/**
|
16
27
|
* Toggles text wrapping in the cell.
|
17
28
|
*
|
@@ -61,6 +72,10 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
|
|
61
72
|
* Indicates whether loading functionality is enabled.
|
62
73
|
*/
|
63
74
|
get loadingEnabled(): boolean;
|
75
|
+
/**
|
76
|
+
* @ignore
|
77
|
+
*/
|
78
|
+
protected handleExpandRow(row: any): Promise<void>;
|
64
79
|
/**
|
65
80
|
* Generates a unique name based on the `dataField` value.
|
66
81
|
*/
|
@@ -71,13 +86,13 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
|
|
71
86
|
private formatService;
|
72
87
|
protected getDisplayText(rowData: unknown, dataField: string): string;
|
73
88
|
/**
|
74
|
-
|
75
|
-
|
89
|
+
* Defines the format string for displaying values in the component.
|
90
|
+
*/
|
76
91
|
format: string;
|
77
92
|
/**
|
78
|
-
|
79
|
-
|
93
|
+
* Provides additional options for formatting values.
|
94
|
+
*/
|
80
95
|
formatOptions: AXFormatOptions;
|
81
96
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableTextColumnComponent, never>;
|
82
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
|
97
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
|
83
98
|
}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
2
|
+
import { AXDataTableColumnComponent } from './data-table-column';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
/**
|
5
|
+
* Column component that provides checkboxes for row selection in a data table.
|
6
|
+
*
|
7
|
+
* @category Components
|
8
|
+
*/
|
9
|
+
export declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
|
10
|
+
private grid;
|
11
|
+
protected loadingRow: import("@angular/core").WritableSignal<any>;
|
12
|
+
/**
|
13
|
+
* @ignore
|
14
|
+
*/
|
15
|
+
private _cellTemplate;
|
16
|
+
/**
|
17
|
+
* Gets the template used to render cells in the column.
|
18
|
+
*/
|
19
|
+
get renderCellTemplate(): TemplateRef<unknown>;
|
20
|
+
/**
|
21
|
+
* @ignore
|
22
|
+
*/
|
23
|
+
private _contentHeaderTemplate;
|
24
|
+
/**
|
25
|
+
* Gets the template used to render the column header.
|
26
|
+
*/
|
27
|
+
get renderHeaderTemplate(): TemplateRef<unknown>;
|
28
|
+
/**
|
29
|
+
* @ignore
|
30
|
+
*/
|
31
|
+
private _contentFooterTemplate;
|
32
|
+
/**
|
33
|
+
* Gets the template used to render the column footer.
|
34
|
+
*/
|
35
|
+
get renderFooterTemplate(): TemplateRef<unknown>;
|
36
|
+
/**
|
37
|
+
* Gets the unique identifier for the column.
|
38
|
+
*/
|
39
|
+
get name(): string;
|
40
|
+
/**
|
41
|
+
* @ignore
|
42
|
+
*/
|
43
|
+
protected handleExpandRow(row: any): Promise<void>;
|
44
|
+
/**
|
45
|
+
* Indicates whether loading is enabled for the column.
|
46
|
+
*/
|
47
|
+
get loadingEnabled(): boolean;
|
48
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AXRowExpandColumnComponent, never>;
|
49
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AXRowExpandColumnComponent, "ax-expand-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, false, never>;
|
50
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { AXDataPagerChangedEvent } from '@acorex/components/data-pager';
|
2
2
|
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
3
3
|
import { AfterViewInit, EventEmitter, OnInit, QueryList, Signal, TemplateRef, WritableSignal } from '@angular/core';
|
4
|
-
import { AXBaseDataTable, AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick } from '../base-data-table.class';
|
4
|
+
import { AXBaseDataTable, AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick, onColumnSizeChangedEvent } from '../base-data-table.class';
|
5
5
|
import { AXDataTableColumnComponent } from '../columns/data-table-column';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
@@ -194,6 +194,12 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
|
|
194
194
|
* @event onColumnsOrderChanged
|
195
195
|
*/
|
196
196
|
onColumnsOrderChanged: EventEmitter<AXColumnsOrderChangedEvent>;
|
197
|
+
/**
|
198
|
+
* Emits when the order of columns changes.
|
199
|
+
*
|
200
|
+
* @event onColumnSizeChanged
|
201
|
+
*/
|
202
|
+
onColumnSizeChanged: EventEmitter<onColumnSizeChangedEvent>;
|
197
203
|
/**
|
198
204
|
* @ignore
|
199
205
|
*/
|
@@ -210,6 +216,7 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
|
|
210
216
|
* @ignore
|
211
217
|
*/
|
212
218
|
ngAfterViewInit(): void;
|
219
|
+
protected toggleExpanded(rows: any[], expandedItem: any, children: any[]): any[];
|
213
220
|
/**
|
214
221
|
* @ignore
|
215
222
|
*/
|
@@ -273,5 +280,5 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
|
|
273
280
|
*/
|
274
281
|
private calculateStickyColumnsPositions;
|
275
282
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
|
276
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
|
283
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
|
277
284
|
}
|
@@ -4,23 +4,24 @@ import * as i2 from "./data-table/data-table.component";
|
|
4
4
|
import * as i3 from "./columns/data-text-column.component";
|
5
5
|
import * as i4 from "./columns/row-index-column.component";
|
6
6
|
import * as i5 from "./columns/row-select-column.component";
|
7
|
-
import * as i6 from "./columns/row-
|
8
|
-
import * as i7 from "./columns/
|
9
|
-
import * as i8 from "
|
10
|
-
import * as i9 from "@
|
11
|
-
import * as i10 from "@
|
12
|
-
import * as i11 from "@
|
13
|
-
import * as i12 from "@acorex/
|
14
|
-
import * as i13 from "@acorex/components/
|
15
|
-
import * as i14 from "@acorex/components/
|
7
|
+
import * as i6 from "./columns/row-expand-column.component";
|
8
|
+
import * as i7 from "./columns/row-command-column.component";
|
9
|
+
import * as i8 from "./columns/data-table-column-resizable.directive";
|
10
|
+
import * as i9 from "@angular/common";
|
11
|
+
import * as i10 from "@acorex/components/common";
|
12
|
+
import * as i11 from "@angular/cdk/scrolling";
|
13
|
+
import * as i12 from "@acorex/core/translation";
|
14
|
+
import * as i13 from "@acorex/components/result";
|
15
|
+
import * as i14 from "@acorex/components/loading";
|
16
16
|
import * as i15 from "@acorex/components/skeleton";
|
17
17
|
import * as i16 from "@acorex/components/button";
|
18
|
-
import * as i17 from "@acorex/components/
|
19
|
-
import * as i18 from "@acorex/
|
20
|
-
import * as i19 from "@acorex/
|
21
|
-
import * as i20 from "@
|
18
|
+
import * as i17 from "@acorex/components/decorators";
|
19
|
+
import * as i18 from "@acorex/components/dropdown";
|
20
|
+
import * as i19 from "@acorex/core/format";
|
21
|
+
import * as i20 from "@acorex/components/data-pager";
|
22
|
+
import * as i21 from "@angular/cdk/drag-drop";
|
22
23
|
export declare class AXDataTableModule {
|
23
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableModule, never>;
|
24
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.
|
25
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowExpandColumnComponent, typeof i7.AXRowCommandColumnComponent, typeof i7.AXRowDropdownCommandColumnComponent, typeof i8.AXDataTableColumnResizableDirective], [typeof i9.CommonModule, typeof i10.AXCommonModule, typeof i11.ScrollingModule, typeof i12.AXTranslationModule, typeof i13.AXResultModule, typeof i14.AXLoadingModule, typeof i15.AXSkeletonModule, typeof i16.AXButtonModule, typeof i17.AXDecoratorModule, typeof i18.AXDropdownModule, typeof i19.AXFormatModule, typeof i10.AXRippleDirective, typeof i20.AXDataPagerModule, typeof i21.CdkDropList, typeof i21.CdkDrag, typeof i21.CdkDragPlaceholder, typeof i21.CdkDragHandle], [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowExpandColumnComponent, typeof i7.AXRowCommandColumnComponent, typeof i7.AXRowDropdownCommandColumnComponent, typeof i8.AXDataTableColumnResizableDirective]>;
|
25
26
|
static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
|
26
27
|
}
|
@@ -551,6 +551,7 @@ class AXDataSource {
|
|
551
551
|
this._page = 0;
|
552
552
|
this._query = { skip: 0, take: 0, sort: [] };
|
553
553
|
this.onChanged = new Subject();
|
554
|
+
this.onItemExpanded = new Subject();
|
554
555
|
this.onLoadingChanged = new Subject();
|
555
556
|
this._isLoading = false;
|
556
557
|
this.config = config;
|
@@ -589,6 +590,9 @@ class AXDataSource {
|
|
589
590
|
this.setLoadingState(false);
|
590
591
|
});
|
591
592
|
}
|
593
|
+
async getItemsByFilter(filter) {
|
594
|
+
return await this.config.load({ ...this.query, filter });
|
595
|
+
}
|
592
596
|
setLoadingState(value) {
|
593
597
|
this._isLoading = value;
|
594
598
|
this.onLoadingChanged.next(this._isLoading);
|