@acorex/components 7.11.0 → 7.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/lib/button-item-list.component.d.ts +7 -7
- package/button/lib/button-item.component.d.ts +9 -1
- package/circular-progress/README.md +3 -0
- package/circular-progress/index.d.ts +2 -0
- package/circular-progress/lib/circular-progress.component.d.ts +33 -0
- package/circular-progress/lib/circular-progress.module.d.ts +7 -0
- package/common/lib/classes/datalist.class.d.ts +2 -1
- package/common/lib/classes/datasource.class.d.ts +10 -7
- package/common/lib/classes/events.class.d.ts +2 -1
- package/data-table/index.d.ts +6 -2
- package/data-table/lib/columns/data-table-column.d.ts +18 -0
- package/data-table/lib/columns/data-text-column.component.d.ts +15 -0
- package/data-table/lib/columns/row-command-column.component.d.ts +38 -0
- package/data-table/lib/columns/row-index-column.component.d.ts +17 -0
- package/data-table/lib/columns/row-select-column.component.d.ts +13 -0
- package/data-table/lib/data-table.component.d.ts +51 -27
- package/data-table/lib/data-table.module.d.ts +16 -11
- package/esm2022/alert/lib/alert.component.mjs +2 -2
- package/esm2022/button/lib/button-item-list.component.mjs +36 -10
- package/esm2022/button/lib/button-item.component.mjs +1 -1
- package/esm2022/button/lib/button.component.mjs +2 -2
- package/esm2022/circular-progress/acorex-components-circular-progress.mjs +5 -0
- package/esm2022/circular-progress/index.mjs +3 -0
- package/esm2022/circular-progress/lib/circular-progress.component.mjs +96 -0
- package/esm2022/circular-progress/lib/circular-progress.module.mjs +17 -0
- package/esm2022/common/index.mjs +1 -1
- package/esm2022/common/lib/classes/datalist.class.mjs +6 -3
- package/esm2022/common/lib/classes/datasource.class.mjs +10 -3
- package/esm2022/common/lib/classes/events.class.mjs +2 -2
- package/esm2022/common/lib/common.module.mjs +2 -2
- package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs +1 -1
- package/esm2022/data-table/index.mjs +7 -3
- package/esm2022/data-table/lib/columns/data-table-column.mjs +35 -0
- package/esm2022/data-table/lib/columns/data-text-column.component.mjs +58 -0
- package/esm2022/data-table/lib/columns/row-command-column.component.mjs +198 -0
- package/esm2022/data-table/lib/columns/row-index-column.component.mjs +65 -0
- package/esm2022/data-table/lib/columns/row-select-column.component.mjs +62 -0
- package/esm2022/data-table/lib/data-table.component.mjs +181 -90
- package/esm2022/data-table/lib/data-table.module.mjs +50 -6
- package/esm2022/dropdown/lib/dropdown-panel.component.mjs +14 -5
- package/esm2022/progress-bar/lib/progress-bar.component.mjs +20 -62
- package/esm2022/skeleton/lib/skeleton.component.mjs +2 -2
- package/esm2022/switch/lib/switch-content.component.mjs +3 -3
- package/esm2022/switch/lib/switch.component.mjs +3 -3
- package/esm2022/uploader/lib/uploader-list.component.mjs +3 -3
- package/fesm2022/acorex-components-alert.mjs +2 -2
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +34 -11
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-circular-progress.mjs +117 -0
- package/fesm2022/acorex-components-circular-progress.mjs.map +1 -0
- package/fesm2022/acorex-components-common.mjs +16 -6
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +1 -1
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +542 -161
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +13 -4
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +18 -60
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +2 -2
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +4 -4
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +2 -2
- package/fesm2022/acorex-components-uploader.mjs.map +1 -1
- package/package.json +29 -23
- package/progress-bar/lib/progress-bar.component.d.ts +9 -18
- package/switch/lib/switch-content.component.d.ts +1 -1
- package/switch/lib/switch.component.d.ts +1 -1
- package/data-table/lib/data-column.directive.d.ts +0 -11
- package/data-table/lib/data-table2.component.d.ts +0 -42
- package/esm2022/data-table/lib/data-column.directive.mjs +0 -26
- package/esm2022/data-table/lib/data-table2.component.mjs +0 -130
@@ -1,200 +1,173 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import {
|
3
|
-
import {
|
2
|
+
import { Injectable, Input, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, EventEmitter, ContentChildren, Output, ChangeDetectorRef, NgModule } from '@angular/core';
|
3
|
+
import { __decorate, __metadata } from 'tslib';
|
4
|
+
import * as i1$1 from '@acorex/core/format';
|
5
|
+
import { AXFormatService, AXFormatModule } from '@acorex/core/format';
|
6
|
+
import { Memorize } from '@acorex/core/memorize';
|
7
|
+
import * as i2$1 from '@acorex/components/common';
|
8
|
+
import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule } from '@acorex/components/common';
|
9
|
+
import * as i2 from '@angular/cdk/scrolling';
|
10
|
+
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
11
|
+
import sum from 'lodash-es/sum';
|
4
12
|
import * as i1 from '@angular/common';
|
5
13
|
import { CommonModule } from '@angular/common';
|
6
|
-
import * as
|
14
|
+
import * as i3 from '@acorex/components/result';
|
7
15
|
import { AXResultModule } from '@acorex/components/result';
|
8
|
-
import * as i3 from '@acorex/core/translation';
|
9
|
-
import { AXTranslationModule } from '@acorex/core/translation';
|
10
16
|
import * as i4 from '@acorex/components/decorators';
|
11
17
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
12
|
-
import { AXLoadingModule } from '@acorex/components/loading';
|
13
|
-
import * as i2$1 from '@angular/cdk/scrolling';
|
14
|
-
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
15
|
-
import _ from 'lodash';
|
16
18
|
import * as i5 from '@acorex/components/skeleton';
|
17
19
|
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
18
20
|
import * as i6 from '@acorex/components/button';
|
19
21
|
import { AXButtonModule } from '@acorex/components/button';
|
22
|
+
import * as i7 from '@acorex/core/translation';
|
23
|
+
import { AXTranslationModule } from '@acorex/core/translation';
|
24
|
+
import { AXUnsubscriber } from '@acorex/core/utils';
|
25
|
+
import * as i3$1 from '@acorex/components/loading';
|
26
|
+
import { AXLoadingModule } from '@acorex/components/loading';
|
27
|
+
import * as i6$1 from '@acorex/components/dropdown';
|
28
|
+
import { AXDropdownModule } from '@acorex/components/dropdown';
|
20
29
|
|
21
|
-
class
|
30
|
+
class AXDataTableColumnComponent {
|
22
31
|
constructor() {
|
23
32
|
this.width = 'auto';
|
33
|
+
this.allowSorting = false;
|
34
|
+
this.sortIndex = undefined;
|
35
|
+
this.sortOrder = undefined;
|
24
36
|
}
|
25
|
-
|
26
|
-
|
37
|
+
get cssClass() {
|
38
|
+
return null;
|
39
|
+
}
|
40
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
41
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent }); }
|
27
42
|
}
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type:
|
29
|
-
type:
|
30
|
-
|
31
|
-
selector: 'ax-data-column',
|
32
|
-
}]
|
33
|
-
}], propDecorators: { headerTemplate: [{
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
|
44
|
+
type: Injectable
|
45
|
+
}], propDecorators: { caption: [{
|
34
46
|
type: Input
|
35
|
-
}],
|
47
|
+
}], width: [{
|
36
48
|
type: Input
|
37
|
-
}],
|
49
|
+
}], fixed: [{
|
38
50
|
type: Input
|
39
|
-
}],
|
51
|
+
}], allowSorting: [{
|
40
52
|
type: Input
|
41
|
-
}],
|
53
|
+
}], sortIndex: [{
|
54
|
+
type: Input
|
55
|
+
}], sortOrder: [{
|
56
|
+
type: Input
|
57
|
+
}], headerTemplate: [{
|
58
|
+
type: Input
|
59
|
+
}], cellTemplate: [{
|
42
60
|
type: Input
|
43
61
|
}] } });
|
44
62
|
|
45
|
-
class
|
63
|
+
class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
|
46
64
|
constructor() {
|
47
65
|
super(...arguments);
|
48
|
-
this.
|
49
|
-
this.showHeader = true;
|
50
|
-
this._pageSize = 20;
|
51
|
-
this.fetchDataMode = 'auto';
|
52
|
-
this._currentPage = 1;
|
53
|
-
this._loadedItems = [];
|
54
|
-
this._totalItems = 0;
|
55
|
-
this._isLazy = false;
|
56
|
-
this._isLoading = false;
|
57
|
-
this._items = [];
|
58
|
-
}
|
59
|
-
get pageSize() {
|
60
|
-
return this._pageSize;
|
66
|
+
this.formatService = inject(AXFormatService);
|
61
67
|
}
|
62
|
-
|
63
|
-
this.
|
64
|
-
}
|
65
|
-
get totalCount() {
|
66
|
-
return this._totalItems;
|
67
|
-
}
|
68
|
-
get isLazy() {
|
69
|
-
return this._isLazy;
|
70
|
-
}
|
71
|
-
get isLoading() {
|
72
|
-
return this._isLoading;
|
73
|
-
}
|
74
|
-
get loadedCount() {
|
75
|
-
return this._loadedItems?.length || 0;
|
76
|
-
}
|
77
|
-
get items() {
|
78
|
-
return this._items;
|
79
|
-
}
|
80
|
-
set items(v) {
|
81
|
-
if (Array.isArray(v)) {
|
82
|
-
this._items = v;
|
83
|
-
}
|
84
|
-
else if (typeof v === 'function') {
|
85
|
-
this._isLazy = true;
|
86
|
-
this._items = v;
|
87
|
-
}
|
88
|
-
else {
|
89
|
-
this._items = [];
|
90
|
-
}
|
91
|
-
}
|
92
|
-
get displayItems() {
|
93
|
-
if (Array.isArray(this.items)) {
|
94
|
-
return (this._items || []);
|
95
|
-
}
|
96
|
-
else if (typeof this._items == 'function') {
|
97
|
-
return this._loadedItems || [];
|
98
|
-
}
|
99
|
-
return [];
|
100
|
-
}
|
101
|
-
ngAfterViewInit() {
|
102
|
-
if (this.fetchDataMode == 'auto')
|
103
|
-
this._fetchData();
|
104
|
-
}
|
105
|
-
_fetchData(opts) {
|
106
|
-
const skip = (this._currentPage - 1) * this.pageSize, take = this.pageSize;
|
107
|
-
if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
|
108
|
-
this._isLoading ||
|
109
|
-
!this._isLazy ||
|
110
|
-
skip > this.totalCount) {
|
111
|
-
return;
|
112
|
-
}
|
113
|
-
if (this._items) {
|
114
|
-
this._isLoading = true;
|
115
|
-
this.cdr.markForCheck();
|
116
|
-
const fetchFn = this._items;
|
117
|
-
fetchFn({ skip, take, searchQuery: opts?.searchQuery })
|
118
|
-
.then((c) => {
|
119
|
-
if (Array.isArray(c)) {
|
120
|
-
this._loadedItems = c;
|
121
|
-
this._totalItems = c.length;
|
122
|
-
}
|
123
|
-
else {
|
124
|
-
this._totalItems = c.total || c.items?.length || 0;
|
125
|
-
this._loadedItems = [...new Set(c.items)];
|
126
|
-
}
|
127
|
-
})
|
128
|
-
.finally(() => {
|
129
|
-
this._isLoading = false;
|
130
|
-
this.onPageChanged.next({
|
131
|
-
component: this,
|
132
|
-
isUserInteraction: false,
|
133
|
-
name: 'page',
|
134
|
-
value: this._currentPage,
|
135
|
-
});
|
136
|
-
this.cdr.markForCheck();
|
137
|
-
});
|
138
|
-
}
|
68
|
+
get template() {
|
69
|
+
return this._template;
|
139
70
|
}
|
140
|
-
|
141
|
-
|
142
|
-
this._loadedItems = [];
|
143
|
-
this._fetchData();
|
71
|
+
get skeleton() {
|
72
|
+
return true;
|
144
73
|
}
|
145
|
-
|
146
|
-
|
147
|
-
this.
|
74
|
+
getDisplayText(rowData, dataField) {
|
75
|
+
const value = rowData[dataField];
|
76
|
+
const options = Array.isArray(this.formatOptions) ? this.formatOptions : [this.formatOptions];
|
77
|
+
return !this.format ? value : this.formatService.format(value, this.format, ...options);
|
148
78
|
}
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type:
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type:
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
80
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", fixed: "fixed", dataField: "dataField", format: "format", formatOptions: "formatOptions" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
81
|
+
<ng-template let-row>
|
82
|
+
{{getDisplayText(row.data,this.dataField)}}
|
83
|
+
</ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
151
84
|
}
|
152
|
-
|
85
|
+
__decorate([
|
86
|
+
Memorize(),
|
87
|
+
__metadata("design:type", Function),
|
88
|
+
__metadata("design:paramtypes", [Object, String]),
|
89
|
+
__metadata("design:returntype", String)
|
90
|
+
], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
|
153
92
|
type: Component,
|
154
|
-
args: [{
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
}], pageSize: [{
|
93
|
+
args: [{
|
94
|
+
selector: 'ax-text-column',
|
95
|
+
template: `
|
96
|
+
<ng-template let-row>
|
97
|
+
{{getDisplayText(row.data,this.dataField)}}
|
98
|
+
</ng-template>`,
|
99
|
+
encapsulation: ViewEncapsulation.None,
|
100
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
101
|
+
providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }],
|
102
|
+
inputs: ['width', 'caption', 'headerTemplate', 'cellTemplate', 'allowSorting', 'fixed'],
|
103
|
+
}]
|
104
|
+
}], propDecorators: { dataField: [{
|
167
105
|
type: Input
|
168
|
-
}],
|
106
|
+
}], _template: [{
|
107
|
+
type: ViewChild,
|
108
|
+
args: [TemplateRef]
|
109
|
+
}], getDisplayText: [], format: [{
|
169
110
|
type: Input
|
170
|
-
}],
|
111
|
+
}], formatOptions: [{
|
171
112
|
type: Input
|
172
113
|
}] } });
|
173
114
|
|
174
|
-
class
|
115
|
+
class AXDataTableComponent extends MXBaseComponent {
|
175
116
|
constructor() {
|
176
117
|
super(...arguments);
|
177
118
|
this.onPageChanged = new EventEmitter();
|
178
119
|
this.showHeader = true;
|
179
|
-
this._pageSize = 20;
|
180
120
|
this.fetchDataMode = 'auto';
|
181
121
|
this.dataSource = convertArrayToDataSource([]);
|
182
122
|
this.isLoading = true;
|
183
123
|
this.hasItems = false;
|
184
124
|
this.totalRows = 0;
|
125
|
+
this.currentPage = 0;
|
126
|
+
this.totalPages = 0;
|
185
127
|
this.startRowIndex = 0;
|
186
|
-
this.endRowIndex = 0;
|
187
128
|
this.lastIndex = 0;
|
129
|
+
this.focusedRowChange = new EventEmitter();
|
130
|
+
this.selectedRowsChange = new EventEmitter();
|
131
|
+
this._selectedRows = [];
|
188
132
|
this.itemHeight = 40;
|
189
133
|
this.width = "100%";
|
190
134
|
this.height = "100%";
|
191
135
|
this.onScrolledIndexChanged = new EventEmitter();
|
192
136
|
}
|
193
|
-
|
194
|
-
return this.
|
137
|
+
startFixedColumn() {
|
138
|
+
return this.columns?.toArray().filter(c => c.fixed == 'start') ?? [];
|
139
|
+
}
|
140
|
+
endFixedColumn() {
|
141
|
+
return this.columns?.toArray().filter(c => c.fixed == 'end') ?? [];
|
142
|
+
}
|
143
|
+
notFixedColumn() {
|
144
|
+
return this.columns?.toArray().filter(c => !c.fixed) ?? [];
|
145
|
+
}
|
146
|
+
notFixedColumnCount() {
|
147
|
+
return this.columns?.toArray().filter(c => !c.fixed).length ?? 0;
|
148
|
+
}
|
149
|
+
fixedColumnCount() {
|
150
|
+
return this.columns?.toArray().filter(c => c.fixed).length ?? 0;
|
195
151
|
}
|
196
|
-
|
197
|
-
this.
|
152
|
+
get focusedRow() {
|
153
|
+
return this._focusedRow;
|
154
|
+
}
|
155
|
+
set focusedRow(v) {
|
156
|
+
this._focusedRow = v;
|
157
|
+
this.focusedRowChange.emit(v);
|
158
|
+
}
|
159
|
+
get selectedRows() {
|
160
|
+
return this._selectedRows;
|
161
|
+
}
|
162
|
+
set selectedRows(v) {
|
163
|
+
this._selectedRows = v;
|
164
|
+
this.selectedRowsChange.emit(v);
|
165
|
+
}
|
166
|
+
selectRows(...rows) {
|
167
|
+
this.selectedRows = [...this.selectedRows, ...rows];
|
168
|
+
}
|
169
|
+
unSelectRows(...rows) {
|
170
|
+
this.selectedRows = this.selectedRows.filter(c => !rows.includes(c));
|
198
171
|
}
|
199
172
|
trackByIdx(i) {
|
200
173
|
return i;
|
@@ -228,17 +201,39 @@ class AXDataTable2Component extends MXBaseComponent {
|
|
228
201
|
});
|
229
202
|
}
|
230
203
|
ngDoCheck() {
|
204
|
+
//this.copyFixedColumns();
|
231
205
|
if (this.headerContainer) {
|
232
206
|
const headerContainer = this.headerContainer.nativeElement;
|
233
207
|
const left = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollLeft;
|
234
|
-
headerContainer.
|
208
|
+
headerContainer.style.transform = `translateX(${-left}px)`;
|
235
209
|
}
|
236
210
|
if (this.columns && this.columns.length) {
|
237
|
-
const
|
238
|
-
this.width = `${Math.max(
|
211
|
+
const sumPx = sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
|
212
|
+
this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
|
239
213
|
}
|
240
214
|
this.height = `calc(100% - ${((this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0))}px)`;
|
241
|
-
this.startRowIndex =
|
215
|
+
this.startRowIndex = this.lastIndex;
|
216
|
+
if (this.startRowIndex < 1)
|
217
|
+
this.startRowIndex = 1;
|
218
|
+
if (this.startRowIndex > this.totalRows)
|
219
|
+
this.startRowIndex = this.totalRows;
|
220
|
+
}
|
221
|
+
// Function to copy fixed columns
|
222
|
+
copyFixedColumns() {
|
223
|
+
const originalRows = Array.from(this.viewport._contentWrapper.nativeElement.querySelectorAll('tr'));
|
224
|
+
const fixedColumnTable = this.getHostElement().querySelector('.ax-body-fixed-columns > table > tbody');
|
225
|
+
fixedColumnTable.querySelectorAll('tr').forEach(n => n.remove());
|
226
|
+
for (const row of originalRows) {
|
227
|
+
const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
|
228
|
+
const fixedRow = document.createElement('tr');
|
229
|
+
for (const cell of fixedCells) {
|
230
|
+
const clonedCell = cell.cloneNode(true);
|
231
|
+
fixedRow.appendChild(clonedCell);
|
232
|
+
}
|
233
|
+
fixedColumnTable.appendChild(fixedRow);
|
234
|
+
}
|
235
|
+
const scrollTop = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollTop;
|
236
|
+
fixedColumnTable.style.transform = `translateY(${-scrollTop}px)`;
|
242
237
|
}
|
243
238
|
render() {
|
244
239
|
this.viewport.checkViewportSize();
|
@@ -246,17 +241,53 @@ class AXDataTable2Component extends MXBaseComponent {
|
|
246
241
|
this.cdr.markForCheck();
|
247
242
|
}
|
248
243
|
refresh() {
|
244
|
+
this.lastIndex = 0;
|
249
245
|
this.dataSource.refresh();
|
250
246
|
}
|
251
|
-
|
252
|
-
|
247
|
+
handleRowClick(e, item) {
|
248
|
+
if (this.focusedRow == item) {
|
249
|
+
this.focusedRow = null;
|
250
|
+
}
|
251
|
+
else {
|
252
|
+
this.focusedRow = item;
|
253
|
+
}
|
254
|
+
}
|
255
|
+
handleColumnClick(e, column) {
|
256
|
+
if (column instanceof AXDataTableTextColumnComponent) {
|
257
|
+
const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
|
258
|
+
if (!sort) {
|
259
|
+
this.dataSource.query.sort.push({ field: column.dataField, dir: 'asc' });
|
260
|
+
}
|
261
|
+
else {
|
262
|
+
if (sort.dir == 'asc') {
|
263
|
+
sort.dir = 'desc';
|
264
|
+
}
|
265
|
+
else {
|
266
|
+
this.dataSource.query.sort = this.dataSource.query.sort.filter(c => c != sort);
|
267
|
+
}
|
268
|
+
}
|
269
|
+
this.refresh();
|
270
|
+
}
|
271
|
+
}
|
272
|
+
getSort(column) {
|
273
|
+
if (column instanceof AXDataTableTextColumnComponent) {
|
274
|
+
const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
|
275
|
+
return sort ? (sort.dir == 'asc' ? 'ax-icon-arrow-long-down' : 'ax-icon-arrow-long-up') : undefined;
|
276
|
+
}
|
277
|
+
return undefined;
|
278
|
+
}
|
279
|
+
onViewChange(e) {
|
280
|
+
console.log(e);
|
281
|
+
}
|
282
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n <table tabindex=\"0\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col style=\"width: 10px;\">\n </colgroup>\n <thead>\n <tr>\n <!------------------- start fixed column ------------------->\n <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n </ng-template>\n <ng-template #captionTpl>\n <div class=\"ax-caption\">\n {{c.caption }}\n <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n </div>\n </ng-template>\n </th>\n <!------------------- not fixed column ------------------->\n <th [attr.colspan]=\"notFixedColumnCount()\">\n\n </th>\n </tr>\n </thead>\n </table>\n </div>\n <div class=\"ax-header-columns\">\n <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n <colgroup>\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col style=\"width: auto;\">\n </colgroup>\n <thead>\n <tr>\n <th *ngFor=\"let c of startFixedColumn()\">\n </th>\n <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n </ng-template>\n <ng-template #captionTpl>\n <div class=\"ax-caption\">\n {{c.caption}}\n <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n </div>\n </ng-template>\n </th>\n <th></th>\n </tr>\n </thead>\n </table>\n </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col>\n </colgroup>\n <tbody>\n </tbody>\n </table>\n </div>\n <div class=\"ax-body-columns\">\n <div cdkVirtualScrollingElement [style.height]=\"'100%'\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col>\n </colgroup>\n <tbody>\n <ng-container\n *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx;let rIndex=index;\"\n (viewChange)=\"onViewChange($event)\">\n <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #rowTpl>\n <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n <!------------------- start fixed column ------------------->\n <ng-container *ngFor=\"let c of startFixedColumn()\">\n <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n <div class=\"ax-content\">\n <ng-container\n *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </div>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n class=\"ax-column-fixed\">\n <div class=\"ax-content\">\n <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-template>\n </ng-container>\n <!------------------- Not fixed column ------------------->\n <ng-container *ngFor=\"let c of notFixedColumn()\">\n <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n <div class=\"ax-content\">\n <ng-container\n *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </div>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n <div class=\"ax-content\">\n <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-template>\n </ng-container>\n <td></td>\n </tr>\n </ng-template>\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n <div class=\"ax-table-info\">\n <div>\n Showing {{startRowIndex}} of {{totalRows}} items\n </div>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\n </div>\n <ng-content select=\"ax-footer\">\n </ng-content>\n</div>\n\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <ax-skeleton [animated]=\"true\"></ax-skeleton>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n<ng-template #emptyTpl>\n <tr>\n <td [attr.colspan]=\"columns.length\">\n <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-template>\n <ng-template #defaultEmptyTemplate>\n <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n </ng-template>\n </td>\n </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-950))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{height:50px;overflow:hidden;position:relative}ax-data-table .ax-header-content .ax-header-fixed-columns{position:absolute;z-index:1;pointer-events:none}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);border-collapse:collapse;overflow:hidden}ax-data-table .ax-header-content .ax-header-columns>table th{text-transform:uppercase;background-color:rgba(var(--ax-color-on-surface));font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{position:absolute;z-index:1;pointer-events:none}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:40px}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-lighten))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-lighten))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{min-width:2rem;padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:0;display:flex;flex-direction:row;align-items:center;width:100%;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{background-color:transparent;border:none;color:rgba(var(--ax-color-ghost-fore));position:relative;padding:.25rem;line-height:1;border-radius:var(--ax-rounded-border-default);font-size:1rem;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.5)!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.25rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}ax-data-table .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
253
284
|
}
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type:
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
|
255
286
|
type: Component,
|
256
|
-
args: [{ selector: 'ax-data-table2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTable2Component }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<div class=\"ax-table-header\" #headerContainer>\n <table tabindex=\"0\" *ngIf=\"showHeader\" [style.width]=\"width\">\n <thead>\n <tr>\n <th *ngFor=\"let c of columns\" [style.width]=\"c.width\">\n <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n </ng-template>\n <ng-template #captionTpl>\n {{c.caption}}\n </ng-template>\n </th>\n <th> </th>\n </tr>\n </thead>\n </table>\n</div>\n<div cdkVirtualScrollingElement [style.height]=\"height\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n <tbody>\n <!-- <ng-container *ngIf=\"hasItems;else emptyTpl\"> -->\n <ng-container *cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx;let rIndex=index;\">\n <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #rowTpl>\n <tr>\n <ng-container *ngFor=\"let c of columns\">\n <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [style.width]=\"c.width\">\n <ng-container *ngIf=\"item;else loadingTpl\">\n {{item[c.valueField]}}\n </ng-container>\n </td>\n </ng-template>\n </ng-container>\n <td> </td>\n </tr>\n </ng-template>\n </ng-container>\n <!-- </ng-container> -->\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n <div class=\"ax-table-info\">\n <div>\n Showing <span style=\"font-weight: 600;\">{{startRowIndex}}</span> of <span\n style=\"font-weight: 600;\">{{totalRows}}</span>\n </div>\n <ax-button look=\"blank\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\n </div>\n <ng-content select=\"ax-footer\">\n </ng-content>\n</div>\n\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-4 ax-rounded\"></ax-skeleton>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n<ng-template #emptyTpl>\n <tr>\n <td [attr.colspan]=\"columns.length\">\n <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-template>\n <ng-template #defaultEmptyTemplate>\n <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n </ng-template>\n </td>\n </tr>\n</ng-template>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:transparent}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table tbody{height:100%}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-data-table2{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table2 table{table-layout:fixed}ax-data-table2 .ax-table-header{border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface));border-collapse:collapse;overflow:hidden}ax-data-table2 .ax-table-header th{text-transform:uppercase;font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-header th:last-child{border-inline-end:0px solid}ax-data-table2 .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.875rem}ax-data-table2 .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}ax-data-table2 .ax-table-body{border-collapse:collapse}ax-data-table2 .ax-table-body tr:nth-child(odd){background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table2 .ax-table-body tr:last-child td{border-block-end:none}ax-data-table2 .ax-table-body td{text-align:start;padding:.875rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-body td:last-child{border-inline-end:0px solid}\n"] }]
|
287
|
+
args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n <table tabindex=\"0\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col style=\"width: 10px;\">\n </colgroup>\n <thead>\n <tr>\n <!------------------- start fixed column ------------------->\n <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n </ng-template>\n <ng-template #captionTpl>\n <div class=\"ax-caption\">\n {{c.caption }}\n <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n </div>\n </ng-template>\n </th>\n <!------------------- not fixed column ------------------->\n <th [attr.colspan]=\"notFixedColumnCount()\">\n\n </th>\n </tr>\n </thead>\n </table>\n </div>\n <div class=\"ax-header-columns\">\n <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n <colgroup>\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col style=\"width: auto;\">\n </colgroup>\n <thead>\n <tr>\n <th *ngFor=\"let c of startFixedColumn()\">\n </th>\n <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n </ng-template>\n <ng-template #captionTpl>\n <div class=\"ax-caption\">\n {{c.caption}}\n <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n </div>\n </ng-template>\n </th>\n <th></th>\n </tr>\n </thead>\n </table>\n </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col>\n </colgroup>\n <tbody>\n </tbody>\n </table>\n </div>\n <div class=\"ax-body-columns\">\n <div cdkVirtualScrollingElement [style.height]=\"'100%'\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n <colgroup>\n <!------------------- start fixed column ------------------->\n <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n <!------------------- not fixed column ------------------->\n <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n <col>\n </colgroup>\n <tbody>\n <ng-container\n *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx;let rIndex=index;\"\n (viewChange)=\"onViewChange($event)\">\n <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #rowTpl>\n <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n <!------------------- start fixed column ------------------->\n <ng-container *ngFor=\"let c of startFixedColumn()\">\n <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n <div class=\"ax-content\">\n <ng-container\n *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </div>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n class=\"ax-column-fixed\">\n <div class=\"ax-content\">\n <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-template>\n </ng-container>\n <!------------------- Not fixed column ------------------->\n <ng-container *ngFor=\"let c of notFixedColumn()\">\n <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n <div class=\"ax-content\">\n <ng-container\n *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n </ng-container>\n </div>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n <div class=\"ax-content\">\n <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-template>\n </ng-container>\n <td></td>\n </tr>\n </ng-template>\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n <div class=\"ax-table-info\">\n <div>\n Showing {{startRowIndex}} of {{totalRows}} items\n </div>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\n </div>\n <ng-content select=\"ax-footer\">\n </ng-content>\n</div>\n\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <ax-skeleton [animated]=\"true\"></ax-skeleton>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n<ng-template #emptyTpl>\n <tr>\n <td [attr.colspan]=\"columns.length\">\n <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-template>\n <ng-template #defaultEmptyTemplate>\n <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n </ng-template>\n </td>\n </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-950))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{height:50px;overflow:hidden;position:relative}ax-data-table .ax-header-content .ax-header-fixed-columns{position:absolute;z-index:1;pointer-events:none}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);border-collapse:collapse;overflow:hidden}ax-data-table .ax-header-content .ax-header-columns>table th{text-transform:uppercase;background-color:rgba(var(--ax-color-on-surface));font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{position:absolute;z-index:1;pointer-events:none}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:40px}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-lighten))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-lighten))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{min-width:2rem;padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:0;display:flex;flex-direction:row;align-items:center;width:100%;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{background-color:transparent;border:none;color:rgba(var(--ax-color-ghost-fore));position:relative;padding:.25rem;line-height:1;border-radius:var(--ax-rounded-border-default);font-size:1rem;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.5)!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.25rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}ax-data-table .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}\n"] }]
|
257
288
|
}], propDecorators: { columns: [{
|
258
289
|
type: ContentChildren,
|
259
|
-
args: [
|
290
|
+
args: [AXDataTableColumnComponent]
|
260
291
|
}], onPageChanged: [{
|
261
292
|
type: Output
|
262
293
|
}], rowTemplate: [{
|
@@ -267,17 +298,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
267
298
|
type: Input
|
268
299
|
}], showHeader: [{
|
269
300
|
type: Input
|
270
|
-
}], pageSize: [{
|
271
|
-
type: Input
|
272
301
|
}], fetchDataMode: [{
|
273
302
|
type: Input
|
274
303
|
}], dataSource: [{
|
275
304
|
type: Input
|
305
|
+
}], focusedRowChange: [{
|
306
|
+
type: Output
|
307
|
+
}], focusedRow: [{
|
308
|
+
type: Input
|
309
|
+
}], selectedRowsChange: [{
|
310
|
+
type: Output
|
311
|
+
}], selectedRows: [{
|
312
|
+
type: Input
|
276
313
|
}], itemHeight: [{
|
277
314
|
type: Input
|
278
315
|
}], viewport: [{
|
279
316
|
type: ViewChild,
|
280
|
-
args: [CdkVirtualScrollViewport]
|
317
|
+
args: [CdkVirtualScrollViewport, { static: true }]
|
281
318
|
}], onScrolledIndexChanged: [{
|
282
319
|
type: Output
|
283
320
|
}], headerContainer: [{
|
@@ -288,11 +325,355 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
288
325
|
args: ['footerContainer']
|
289
326
|
}] } });
|
290
327
|
|
291
|
-
|
292
|
-
|
328
|
+
class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
|
329
|
+
constructor() {
|
330
|
+
super(...arguments);
|
331
|
+
this.grid = inject(AXDataTableComponent);
|
332
|
+
this.unsubscriber = inject(AXUnsubscriber);
|
333
|
+
this.padZero = false;
|
334
|
+
this.formatCount = 1;
|
335
|
+
this.allowSorting = false;
|
336
|
+
}
|
337
|
+
get template() {
|
338
|
+
return this._template;
|
339
|
+
}
|
340
|
+
get cssClass() {
|
341
|
+
return 'ax-index-column';
|
342
|
+
}
|
343
|
+
ngOnInit() {
|
344
|
+
if (this.padZero) {
|
345
|
+
this.grid.dataSource.onChanged
|
346
|
+
.pipe(this.unsubscriber.takeUntilDestroy)
|
347
|
+
.subscribe(c => {
|
348
|
+
this.formatCount = c.totalCount.toString().length;
|
349
|
+
});
|
350
|
+
}
|
351
|
+
}
|
352
|
+
get skeleton() {
|
353
|
+
return false;
|
354
|
+
}
|
355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
|
357
|
+
AXUnsubscriber,
|
358
|
+
{ provide: AXDataTableColumnComponent, useExisting: AXRowIndexColumnComponent }
|
359
|
+
], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
360
|
+
<ng-template let-row>
|
361
|
+
<span> {{(row.rowIndex + 1) | format:"number":"D"+formatCount}}</span>
|
362
|
+
</ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
363
|
+
}
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
|
365
|
+
type: Component,
|
366
|
+
args: [{
|
367
|
+
selector: 'ax-index-column',
|
368
|
+
template: `
|
369
|
+
<ng-template let-row>
|
370
|
+
<span> {{(row.rowIndex + 1) | format:"number":"D"+formatCount}}</span>
|
371
|
+
</ng-template>`,
|
372
|
+
encapsulation: ViewEncapsulation.None,
|
373
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
374
|
+
providers: [
|
375
|
+
AXUnsubscriber,
|
376
|
+
{ provide: AXDataTableColumnComponent, useExisting: AXRowIndexColumnComponent }
|
377
|
+
],
|
378
|
+
inputs: ['width', 'caption', 'fixed'],
|
379
|
+
}]
|
380
|
+
}], propDecorators: { _template: [{
|
381
|
+
type: ViewChild,
|
382
|
+
args: [TemplateRef]
|
383
|
+
}], padZero: [{
|
384
|
+
type: Input
|
385
|
+
}] } });
|
386
|
+
|
387
|
+
class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
|
388
|
+
constructor() {
|
389
|
+
super(...arguments);
|
390
|
+
this.grid = inject(AXDataTableComponent);
|
391
|
+
}
|
392
|
+
get template() {
|
393
|
+
return this._template;
|
394
|
+
}
|
395
|
+
isSelected(item) {
|
396
|
+
return item != null && this.grid.selectedRows.includes(item);
|
397
|
+
}
|
398
|
+
handleChange(item) {
|
399
|
+
if (this.isSelected(item)) {
|
400
|
+
this.grid.unSelectRows(item);
|
401
|
+
}
|
402
|
+
else {
|
403
|
+
this.grid.selectRows(item);
|
404
|
+
}
|
405
|
+
}
|
406
|
+
get skeleton() {
|
407
|
+
return false;
|
408
|
+
}
|
409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
411
|
+
<ng-template let-row>
|
412
|
+
<input
|
413
|
+
class="ax-checkbox"
|
414
|
+
type="checkbox"
|
415
|
+
[disabled]="!row.data"
|
416
|
+
(change)="handleChange(row.data)"
|
417
|
+
[checked]="isSelected(row.data)"
|
418
|
+
/>
|
419
|
+
</ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
420
|
+
}
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
|
422
|
+
type: Component,
|
423
|
+
args: [{
|
424
|
+
selector: 'ax-select-column',
|
425
|
+
template: `
|
426
|
+
<ng-template let-row>
|
427
|
+
<input
|
428
|
+
class="ax-checkbox"
|
429
|
+
type="checkbox"
|
430
|
+
[disabled]="!row.data"
|
431
|
+
(change)="handleChange(row.data)"
|
432
|
+
[checked]="isSelected(row.data)"
|
433
|
+
/>
|
434
|
+
</ng-template>`,
|
435
|
+
encapsulation: ViewEncapsulation.None,
|
436
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
437
|
+
providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }],
|
438
|
+
inputs: ['width', 'caption', 'fixed']
|
439
|
+
}]
|
440
|
+
}], propDecorators: { _template: [{
|
441
|
+
type: ViewChild,
|
442
|
+
args: [TemplateRef]
|
443
|
+
}] } });
|
444
|
+
|
445
|
+
class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
|
446
|
+
constructor() {
|
447
|
+
super(...arguments);
|
448
|
+
this.grid = inject(AXDataTableComponent);
|
449
|
+
this.cdr = inject(ChangeDetectorRef);
|
450
|
+
this.allowSorting = false;
|
451
|
+
this.onItemClick = new EventEmitter();
|
452
|
+
}
|
453
|
+
get skeleton() {
|
454
|
+
return false;
|
455
|
+
}
|
456
|
+
get cssClass() {
|
457
|
+
return 'ax-command-column';
|
458
|
+
}
|
459
|
+
}
|
460
|
+
class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
|
461
|
+
constructor() {
|
462
|
+
super(...arguments);
|
463
|
+
this._items = [];
|
464
|
+
this.items = [];
|
465
|
+
}
|
466
|
+
get template() {
|
467
|
+
return this._template;
|
468
|
+
}
|
469
|
+
async handleOnOpened(rowData) {
|
470
|
+
if (Array.isArray(this.items)) {
|
471
|
+
this._items = this.items;
|
472
|
+
}
|
473
|
+
else
|
474
|
+
(typeof this.items == 'function');
|
475
|
+
{
|
476
|
+
const result = this['items'](rowData);
|
477
|
+
if (Array.isArray(result)) {
|
478
|
+
this._items = result;
|
479
|
+
}
|
480
|
+
else if (result instanceof Promise) {
|
481
|
+
this._items = await result;
|
482
|
+
}
|
483
|
+
}
|
484
|
+
this.cdr.detectChanges();
|
485
|
+
}
|
486
|
+
handleOnClosed() {
|
487
|
+
this._items = [];
|
488
|
+
}
|
489
|
+
handleOnItemClick(e, data) {
|
490
|
+
const args = {
|
491
|
+
component: this.grid,
|
492
|
+
isUserInteraction: true,
|
493
|
+
nativeEvent: e,
|
494
|
+
data,
|
495
|
+
name: e.name
|
496
|
+
};
|
497
|
+
this.onItemClick.emit(args);
|
498
|
+
}
|
499
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
500
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
501
|
+
<ng-template let-row>
|
502
|
+
<div *ngIf="row.data">
|
503
|
+
<button axRipple>
|
504
|
+
<ax-icon icon="ax-icon ax-icon-more-horizontal"></ax-icon>
|
505
|
+
<ax-dropdown-panel [adaptivityEnabled]="true" (onOpened)="handleOnOpened(row.data)" (onClosed)="handleOnClosed()">
|
506
|
+
<ng-container *ngIf="_items.length;else loading">
|
507
|
+
<ax-button-item-list (onItemClick)="handleOnItemClick($event,row.data)" [items]="_items">
|
508
|
+
</ax-button-item-list>
|
509
|
+
</ng-container>
|
510
|
+
<ng-template #loading>
|
511
|
+
<div panel style="padding: 0.875rem;">
|
512
|
+
<ax-loading></ax-loading>
|
513
|
+
</div>
|
514
|
+
</ng-template>
|
515
|
+
</ax-dropdown-panel>
|
516
|
+
</button>
|
517
|
+
</div>
|
518
|
+
<ng-template #loading>
|
519
|
+
<div panel style="padding: 0.875rem;">
|
520
|
+
<ax-loading></ax-loading>
|
521
|
+
</div>
|
522
|
+
</ng-template>
|
523
|
+
</ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRippleColor"] }, { kind: "component", type: i3$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
524
|
+
}
|
525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
|
526
|
+
type: Component,
|
527
|
+
args: [{
|
528
|
+
selector: 'ax-dropdown-command-column',
|
529
|
+
template: `
|
530
|
+
<ng-template let-row>
|
531
|
+
<div *ngIf="row.data">
|
532
|
+
<button axRipple>
|
533
|
+
<ax-icon icon="ax-icon ax-icon-more-horizontal"></ax-icon>
|
534
|
+
<ax-dropdown-panel [adaptivityEnabled]="true" (onOpened)="handleOnOpened(row.data)" (onClosed)="handleOnClosed()">
|
535
|
+
<ng-container *ngIf="_items.length;else loading">
|
536
|
+
<ax-button-item-list (onItemClick)="handleOnItemClick($event,row.data)" [items]="_items">
|
537
|
+
</ax-button-item-list>
|
538
|
+
</ng-container>
|
539
|
+
<ng-template #loading>
|
540
|
+
<div panel style="padding: 0.875rem;">
|
541
|
+
<ax-loading></ax-loading>
|
542
|
+
</div>
|
543
|
+
</ng-template>
|
544
|
+
</ax-dropdown-panel>
|
545
|
+
</button>
|
546
|
+
</div>
|
547
|
+
<ng-template #loading>
|
548
|
+
<div panel style="padding: 0.875rem;">
|
549
|
+
<ax-loading></ax-loading>
|
550
|
+
</div>
|
551
|
+
</ng-template>
|
552
|
+
</ng-template>`,
|
553
|
+
encapsulation: ViewEncapsulation.None,
|
554
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
555
|
+
providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }],
|
556
|
+
inputs: ['width', 'caption', 'fixed'],
|
557
|
+
outputs: ['onItemClick']
|
558
|
+
}]
|
559
|
+
}], propDecorators: { _template: [{
|
560
|
+
type: ViewChild,
|
561
|
+
args: [TemplateRef]
|
562
|
+
}], items: [{
|
563
|
+
type: Input
|
564
|
+
}] } });
|
565
|
+
class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
|
566
|
+
constructor() {
|
567
|
+
super(...arguments);
|
568
|
+
this.items = [];
|
569
|
+
}
|
570
|
+
get template() {
|
571
|
+
return this._template;
|
572
|
+
}
|
573
|
+
getItems(rowData) {
|
574
|
+
if (Array.isArray(this.items)) {
|
575
|
+
return this.items;
|
576
|
+
}
|
577
|
+
else
|
578
|
+
(typeof this.items == 'function');
|
579
|
+
{
|
580
|
+
return this.items(rowData);
|
581
|
+
}
|
582
|
+
return [];
|
583
|
+
}
|
584
|
+
handleOnItemClick(e, item, data) {
|
585
|
+
const args = {
|
586
|
+
component: this.grid,
|
587
|
+
isUserInteraction: true,
|
588
|
+
nativeEvent: e,
|
589
|
+
data,
|
590
|
+
name: item.name,
|
591
|
+
};
|
592
|
+
this.onItemClick.emit(args);
|
593
|
+
}
|
594
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
596
|
+
<ng-template let-row>
|
597
|
+
<div *ngIf="row.data">
|
598
|
+
<button
|
599
|
+
[style.color]="'rgba(var(--ax-color-'+(item.color ?? 'primary')+'-500))'" axRipple *ngFor="let item of getItems(row.data)"
|
600
|
+
(click)="handleOnItemClick($event,item,row.data)">
|
601
|
+
<ax-icon [icon]="item.icon" ></ax-icon>
|
602
|
+
</button>
|
603
|
+
</div>
|
604
|
+
</ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRippleColor"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
605
|
+
}
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
|
607
|
+
type: Component,
|
608
|
+
args: [{
|
609
|
+
selector: 'ax-command-column',
|
610
|
+
template: `
|
611
|
+
<ng-template let-row>
|
612
|
+
<div *ngIf="row.data">
|
613
|
+
<button
|
614
|
+
[style.color]="'rgba(var(--ax-color-'+(item.color ?? 'primary')+'-500))'" axRipple *ngFor="let item of getItems(row.data)"
|
615
|
+
(click)="handleOnItemClick($event,item,row.data)">
|
616
|
+
<ax-icon [icon]="item.icon" ></ax-icon>
|
617
|
+
</button>
|
618
|
+
</div>
|
619
|
+
</ng-template>`,
|
620
|
+
encapsulation: ViewEncapsulation.None,
|
621
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
622
|
+
providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }],
|
623
|
+
inputs: ['width', 'caption', 'fixed'],
|
624
|
+
outputs: ['onItemClick']
|
625
|
+
}]
|
626
|
+
}], propDecorators: { _template: [{
|
627
|
+
type: ViewChild,
|
628
|
+
args: [TemplateRef]
|
629
|
+
}], items: [{
|
630
|
+
type: Input
|
631
|
+
}] } });
|
632
|
+
|
633
|
+
const COMPONENT = [
|
634
|
+
AXDataTableComponent,
|
635
|
+
AXDataTableTextColumnComponent,
|
636
|
+
AXRowIndexColumnComponent,
|
637
|
+
AXRowSelectColumnComponent,
|
638
|
+
AXRowCommandColumnComponent,
|
639
|
+
AXRowDropdownCommandColumnComponent
|
640
|
+
];
|
641
|
+
const MODULES = [
|
642
|
+
CommonModule,
|
643
|
+
AXCommonModule,
|
644
|
+
ScrollingModule,
|
645
|
+
AXTranslationModule,
|
646
|
+
AXResultModule,
|
647
|
+
AXLoadingModule,
|
648
|
+
AXDecoratorModule,
|
649
|
+
AXSkeletonModule,
|
650
|
+
AXButtonModule,
|
651
|
+
AXDropdownModule,
|
652
|
+
AXFormatModule
|
653
|
+
];
|
293
654
|
class AXDataTableModule {
|
294
655
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
295
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
|
656
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
|
657
|
+
AXDataTableTextColumnComponent,
|
658
|
+
AXRowIndexColumnComponent,
|
659
|
+
AXRowSelectColumnComponent,
|
660
|
+
AXRowCommandColumnComponent,
|
661
|
+
AXRowDropdownCommandColumnComponent], imports: [CommonModule,
|
662
|
+
AXCommonModule,
|
663
|
+
ScrollingModule,
|
664
|
+
AXTranslationModule,
|
665
|
+
AXResultModule,
|
666
|
+
AXLoadingModule,
|
667
|
+
AXDecoratorModule,
|
668
|
+
AXSkeletonModule,
|
669
|
+
AXButtonModule,
|
670
|
+
AXDropdownModule,
|
671
|
+
AXFormatModule], exports: [AXDataTableComponent,
|
672
|
+
AXDataTableTextColumnComponent,
|
673
|
+
AXRowIndexColumnComponent,
|
674
|
+
AXRowSelectColumnComponent,
|
675
|
+
AXRowCommandColumnComponent,
|
676
|
+
AXRowDropdownCommandColumnComponent] }); }
|
296
677
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, imports: [MODULES] }); }
|
297
678
|
}
|
298
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, decorators: [{
|
@@ -309,5 +690,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
309
690
|
* Generated bundle index. Do not edit.
|
310
691
|
*/
|
311
692
|
|
312
|
-
export {
|
693
|
+
export { AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
|
313
694
|
//# sourceMappingURL=acorex-components-data-table.mjs.map
|