@acorex/components 7.24.5 → 17.0.0

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.
Files changed (65) hide show
  1. package/common/lib/classes/datasource.class.d.ts +2 -0
  2. package/data-table/index.d.ts +3 -2
  3. package/data-table/lib/base-data-table.class.d.ts +25 -0
  4. package/data-table/lib/columns/row-command-column.component.d.ts +2 -2
  5. package/data-table/lib/data-table/data-table.component.d.ts +52 -0
  6. package/data-table/lib/data-table.module.d.ts +21 -18
  7. package/data-table/lib/{data-table.component.d.ts → infinite-scroll-data-table/infinite-scroll-data-table.component.d.ts} +8 -22
  8. package/esm2022/button/lib/button.component.mjs +2 -2
  9. package/esm2022/common/lib/classes/datasource.class.mjs +8 -2
  10. package/esm2022/common/lib/components/selection-base.component.class.mjs +2 -2
  11. package/esm2022/data-pager/lib/data-pager.component.mjs +7 -11
  12. package/esm2022/data-table/index.mjs +4 -3
  13. package/esm2022/data-table/lib/base-data-table.class.mjs +36 -0
  14. package/esm2022/data-table/lib/columns/row-command-column.component.mjs +57 -69
  15. package/esm2022/data-table/lib/columns/row-index-column.component.mjs +7 -21
  16. package/esm2022/data-table/lib/columns/row-select-column.component.mjs +6 -18
  17. package/esm2022/data-table/lib/data-table/data-table.component.mjs +233 -0
  18. package/esm2022/data-table/lib/data-table.module.mjs +24 -7
  19. package/esm2022/data-table/lib/infinite-scroll-data-table/infinite-scroll-data-table.component.mjs +272 -0
  20. package/esm2022/otp/lib/otp.component.mjs +2 -2
  21. package/esm2022/phone-box/lib/phone-box.component.mjs +21 -38
  22. package/esm2022/select-box/lib/select-box.component.mjs +2 -2
  23. package/esm2022/text-area/lib/text-area.component.mjs +6 -22
  24. package/fesm2022/acorex-components-button.mjs +2 -2
  25. package/fesm2022/acorex-components-button.mjs.map +1 -1
  26. package/fesm2022/acorex-components-common.mjs +8 -2
  27. package/fesm2022/acorex-components-common.mjs.map +1 -1
  28. package/fesm2022/acorex-components-data-pager.mjs +5 -9
  29. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  30. package/fesm2022/acorex-components-data-table.mjs +684 -470
  31. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  32. package/fesm2022/acorex-components-otp.mjs +2 -2
  33. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  34. package/fesm2022/acorex-components-phone-box.mjs +22 -38
  35. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  36. package/fesm2022/acorex-components-select-box.mjs +2 -2
  37. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  38. package/fesm2022/acorex-components-text-area.mjs +5 -21
  39. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  40. package/package.json +25 -31
  41. package/phone-box/lib/phone-box.component.d.ts +4 -13
  42. package/text-area/lib/text-area.component.d.ts +0 -1
  43. package/data-table-2/README.md +0 -3
  44. package/data-table-2/index.d.ts +0 -8
  45. package/data-table-2/lib/columns/data-table-column-resizable.directive.d.ts +0 -22
  46. package/data-table-2/lib/columns/data-table-column.d.ts +0 -22
  47. package/data-table-2/lib/columns/data-text-column.component.d.ts +0 -18
  48. package/data-table-2/lib/columns/row-command-column.component.d.ts +0 -40
  49. package/data-table-2/lib/columns/row-index-column.component.d.ts +0 -18
  50. package/data-table-2/lib/columns/row-select-column.component.d.ts +0 -14
  51. package/data-table-2/lib/data-table-2.component.d.ts +0 -61
  52. package/data-table-2/lib/data-table-2.module.d.ts +0 -24
  53. package/esm2022/data-table/lib/data-table.component.mjs +0 -290
  54. package/esm2022/data-table-2/acorex-components-data-table-2.mjs +0 -5
  55. package/esm2022/data-table-2/index.mjs +0 -9
  56. package/esm2022/data-table-2/lib/columns/data-table-column-resizable.directive.mjs +0 -59
  57. package/esm2022/data-table-2/lib/columns/data-table-column.mjs +0 -42
  58. package/esm2022/data-table-2/lib/columns/data-text-column.component.mjs +0 -81
  59. package/esm2022/data-table-2/lib/columns/row-command-column.component.mjs +0 -231
  60. package/esm2022/data-table-2/lib/columns/row-index-column.component.mjs +0 -71
  61. package/esm2022/data-table-2/lib/columns/row-select-column.component.mjs +0 -61
  62. package/esm2022/data-table-2/lib/data-table-2.component.mjs +0 -211
  63. package/esm2022/data-table-2/lib/data-table-2.module.mjs +0 -94
  64. package/fesm2022/acorex-components-data-table-2.mjs +0 -822
  65. package/fesm2022/acorex-components-data-table-2.mjs.map +0 -1
@@ -1,822 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Input, Directive, HostListener, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, signal, EventEmitter, ContentChildren, Output, ChangeDetectorRef, NgModule } from '@angular/core';
3
- import { isBrowser } from '@acorex/core/platform';
4
- import { Subject, debounceTime, buffer, filter } from 'rxjs';
5
- import { __decorate, __metadata } from 'tslib';
6
- import * as i2$1 from '@acorex/core/format';
7
- import { AXFormatService, AXFormatModule } from '@acorex/core/format';
8
- import { Memorize } from '@acorex/core/memorize';
9
- import * as i5 from '@acorex/components/common';
10
- import { MXBaseComponent, convertArrayToDataSource, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
11
- import * as i1 from '@angular/common';
12
- import { CommonModule } from '@angular/common';
13
- import * as i2 from '@acorex/components/decorators';
14
- import { AXDecoratorModule } from '@acorex/components/decorators';
15
- import * as i3 from '@acorex/components/skeleton';
16
- import { AXSkeletonModule } from '@acorex/components/skeleton';
17
- import * as i4 from '@acorex/components/data-pager';
18
- import { AXDataPagerModule } from '@acorex/components/data-pager';
19
- import * as i1$1 from '@acorex/components/loading';
20
- import { AXLoadingModule } from '@acorex/components/loading';
21
- import * as i3$1 from '@acorex/components/button';
22
- import { AXButtonModule } from '@acorex/components/button';
23
- import * as i4$1 from '@acorex/components/dropdown';
24
- import { AXDropdownModule } from '@acorex/components/dropdown';
25
- import { AXUnsubscriber } from '@acorex/core/utils';
26
- import { AXResultModule } from '@acorex/components/result';
27
- import { AXTranslationModule } from '@acorex/core/translation';
28
- import { ScrollingModule } from '@angular/cdk/scrolling';
29
-
30
- class AXDataTableColumnComponent {
31
- constructor() {
32
- this.width = 'auto';
33
- this.allowSorting = false;
34
- this.allowResizing = false;
35
- this.sortIndex = undefined;
36
- this.sortOrder = undefined;
37
- }
38
- get cssClass() {
39
- return null;
40
- }
41
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
42
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent }); }
43
- }
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
45
- type: Injectable
46
- }], propDecorators: { caption: [{
47
- type: Input
48
- }], width: [{
49
- type: Input
50
- }], fixed: [{
51
- type: Input
52
- }], stickyEnd: [{
53
- type: Input
54
- }], stickyStart: [{
55
- type: Input
56
- }], allowSorting: [{
57
- type: Input
58
- }], allowResizing: [{
59
- type: Input
60
- }], sortIndex: [{
61
- type: Input
62
- }], sortOrder: [{
63
- type: Input
64
- }], headerTemplate: [{
65
- type: Input
66
- }], cellTemplate: [{
67
- type: Input
68
- }] } });
69
-
70
- class AXDataTableColumnResizableDirective {
71
- constructor(el, renderer, ngZone, cdr) {
72
- this.el = el;
73
- this.renderer = renderer;
74
- this.ngZone = ngZone;
75
- this.cdr = cdr;
76
- this.resize$ = new Subject();
77
- this.onMouseMoveRawBound = this.onMouseMoveRaw.bind(this);
78
- this.onMouseUpBound = this.onMouseUp.bind(this);
79
- this.resize$.pipe(debounceTime(10)).subscribe((event) => this.onMouseMove(event));
80
- }
81
- onMouseDown(event) {
82
- if (isBrowser()) {
83
- event.stopPropagation();
84
- this.ngZone.runOutsideAngular(() => {
85
- this.startX = event.pageX;
86
- this.startWidth = this.el?.nativeElement?.parentElement.offsetWidth;
87
- document.addEventListener('mousemove', this.onMouseMoveRawBound);
88
- document.addEventListener('mouseup', this.onMouseUpBound);
89
- });
90
- this.cdr.detach(); // Detach the change detector
91
- }
92
- }
93
- onMouseMoveRaw(event) {
94
- this.resize$.next(event);
95
- }
96
- onMouseMove(event) {
97
- if (isBrowser()) {
98
- const newWidth = this.startWidth + (event.pageX - this.startX);
99
- this.renderer.setStyle(this.el?.nativeElement?.parentElement, 'width', `${newWidth}px`);
100
- this.column.width = `${newWidth}px`;
101
- }
102
- }
103
- onMouseUp() {
104
- document.removeEventListener('mousemove', this.onMouseMoveRawBound);
105
- document.removeEventListener('mouseup', this.onMouseUpBound);
106
- this.cdr.reattach(); // Reattach the change detector
107
- }
108
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
109
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableColumnResizableDirective, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
110
- }
111
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
112
- type: Directive,
113
- args: [{
114
- selector: '[ax-table-column-resizble]',
115
- }]
116
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { column: [{
117
- type: Input,
118
- args: ['ax-table-column-resizble']
119
- }], onMouseDown: [{
120
- type: HostListener,
121
- args: ['mousedown', ['$event']]
122
- }] } });
123
-
124
- class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
125
- constructor() {
126
- super(...arguments);
127
- this.wrapText = false;
128
- this.formatService = inject(AXFormatService);
129
- }
130
- get template() {
131
- return this._template;
132
- }
133
- get loadingEnabled() {
134
- return true;
135
- }
136
- get name() {
137
- return `cl-${this.dataField}`;
138
- }
139
- getDisplayText(rowData, dataField) {
140
- const value = rowData[dataField];
141
- return !this.format
142
- ? value
143
- : this.formatService.format(value, this.format, this.formatOptions);
144
- }
145
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
146
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [
147
- {
148
- provide: AXDataTableColumnComponent,
149
- useExisting: AXDataTableTextColumnComponent,
150
- },
151
- ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
152
- {{ getDisplayText(row.data, this.dataField) }}
153
- </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
154
- }
155
- __decorate([
156
- Memorize(),
157
- __metadata("design:type", Function),
158
- __metadata("design:paramtypes", [Object, String]),
159
- __metadata("design:returntype", String)
160
- ], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
162
- type: Component,
163
- args: [{
164
- selector: 'ax-text-column',
165
- template: ` <ng-template let-row>
166
- {{ getDisplayText(row.data, this.dataField) }}
167
- </ng-template>`,
168
- encapsulation: ViewEncapsulation.None,
169
- changeDetection: ChangeDetectionStrategy.OnPush,
170
- providers: [
171
- {
172
- provide: AXDataTableColumnComponent,
173
- useExisting: AXDataTableTextColumnComponent,
174
- },
175
- ],
176
- inputs: [
177
- 'width',
178
- 'caption',
179
- 'headerTemplate',
180
- 'cellTemplate',
181
- 'allowSorting',
182
- 'allowResizing',
183
- 'fixed',
184
- ],
185
- }]
186
- }], propDecorators: { dataField: [{
187
- type: Input
188
- }], wrapText: [{
189
- type: Input
190
- }], _template: [{
191
- type: ViewChild,
192
- args: [TemplateRef]
193
- }], getDisplayText: [], format: [{
194
- type: Input
195
- }], formatOptions: [{
196
- type: Input
197
- }] } });
198
-
199
- class AXDataTable2Component extends MXBaseComponent {
200
- constructor() {
201
- super(...arguments);
202
- this.displayedRows = signal([]);
203
- this.showHeader = true;
204
- this.stickyHeader = true;
205
- this.itemHeight = 40;
206
- this.fetchDataMode = 'auto';
207
- this.dataSource = convertArrayToDataSource([]);
208
- this.loading = {
209
- enabled: true,
210
- animation: true,
211
- };
212
- this._selectedRows = [];
213
- this.isLoading = true;
214
- this.hasItems = false;
215
- this.totalRows = 0;
216
- this.currentPage = 0;
217
- this.totalPages = 0;
218
- this.startRowIndex = 0;
219
- this.lastIndex = 0;
220
- this.focusedRowChange = new EventEmitter();
221
- this.onRowClick = new EventEmitter();
222
- this.onRowDbClick = new EventEmitter();
223
- this.clickSubject = new Subject();
224
- this.selectedRowsChange = new EventEmitter();
225
- }
226
- ngAfterViewInit() {
227
- this.calculateStickyPositions();
228
- this.cdr.markForCheck();
229
- }
230
- ngOnInit() {
231
- super.ngOnInit();
232
- this.totalRows = this.dataSource.items.length;
233
- this.dataSource.onLoadingChanged.subscribe((data) => {
234
- this.isLoading = data;
235
- });
236
- this.displayedRows.set(new Array(this.dataSource.pageSize));
237
- this.dataSource.onChanged.subscribe((data) => {
238
- this.displayedRows.set(data.items);
239
- this.totalRows = data.totalCount;
240
- this.hasItems = data.totalCount > 0;
241
- });
242
- //
243
- this.clickSubject
244
- .pipe(buffer(this.clickSubject.pipe(debounceTime(250))), filter((clickArray) => clickArray.length === 2))
245
- .subscribe((clickArray) => {
246
- this.handleRowDoubleClick(clickArray[0].event, clickArray[0].item);
247
- });
248
- }
249
- get focusedRow() {
250
- return this._focusedRow;
251
- }
252
- set focusedRow(v) {
253
- this._focusedRow = v;
254
- this.focusedRowChange.emit(v);
255
- }
256
- get selectedRows() {
257
- return this._selectedRows;
258
- }
259
- set selectedRows(v) {
260
- this._selectedRows = v;
261
- this.selectedRowsChange.emit(v);
262
- }
263
- selectRows(...rows) {
264
- this.selectedRows = [...this.selectedRows, ...rows];
265
- }
266
- unSelectRows(...rows) {
267
- this.selectedRows = this.selectedRows.filter((c) => !rows.includes(c));
268
- }
269
- handleRowClick(event, item) {
270
- this.handleRowSingleClick(event, item);
271
- this.clickSubject.next({ event, item });
272
- }
273
- handleRowSingleClick(event, item) {
274
- if (this.focusedRow == item) {
275
- this.focusedRow = null;
276
- }
277
- else {
278
- this.focusedRow = item;
279
- }
280
- //
281
- this.onRowClick.emit({
282
- component: this,
283
- data: item,
284
- isUserInteraction: true,
285
- });
286
- }
287
- onPageChanged(event) {
288
- // this.displayedRows.set(new Array(this.dataSource.pageSize));
289
- this.dataSource.setPage(event.page - 1);
290
- }
291
- handleRowDoubleClick(e, item) {
292
- this.focusedRow = item;
293
- //
294
- this.onRowDbClick.emit({
295
- component: this,
296
- data: item,
297
- isUserInteraction: true,
298
- });
299
- }
300
- handleColumnClick(e, column) {
301
- if (column instanceof AXDataTableTextColumnComponent) {
302
- const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
303
- if (!sort) {
304
- this.dataSource.query.sort.push({
305
- field: column.dataField,
306
- dir: 'asc',
307
- });
308
- }
309
- else {
310
- if (sort.dir == 'asc') {
311
- sort.dir = 'desc';
312
- }
313
- else {
314
- this.dataSource.query.sort = this.dataSource.query.sort.filter((c) => c != sort);
315
- }
316
- }
317
- this.refresh();
318
- }
319
- }
320
- getSort(column) {
321
- if (column instanceof AXDataTableTextColumnComponent) {
322
- const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
323
- return sort ? (sort.dir == 'asc' ? 'ax-icon-arrow-long-down' : 'ax-icon-arrow-long-up') : undefined;
324
- }
325
- return undefined;
326
- }
327
- refresh() {
328
- this.lastIndex = 0;
329
- this.dataSource.refresh();
330
- }
331
- calculateStickyPositions() {
332
- let totalWidth = 0;
333
- let accumulatedWidthFromStart = 0;
334
- this.columns.forEach((column) => {
335
- const width = parseInt(column.width);
336
- if (!isNaN(width)) {
337
- totalWidth += width;
338
- }
339
- });
340
- this.columns.forEach((column) => {
341
- const width = parseInt(column.width);
342
- if (column.fixed === 'start' && !isNaN(width)) {
343
- column.stickyStart = accumulatedWidthFromStart + 'px';
344
- }
345
- if (!isNaN(width)) {
346
- accumulatedWidthFromStart += width;
347
- }
348
- });
349
- let accumulatedWidthFromEnd = 0;
350
- for (let i = this.columns.length - 1; i >= 0; i--) {
351
- const column = this.columns.get(i);
352
- const width = parseInt(column.width);
353
- if (column.fixed === 'end' && !isNaN(width)) {
354
- column.stickyEnd = accumulatedWidthFromEnd + 'px';
355
- }
356
- if (!isNaN(width)) {
357
- accumulatedWidthFromEnd += width;
358
- }
359
- }
360
- }
361
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
362
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTable2Component, selector: "ax-data-table-2", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", stickyHeader: "stickyHeader", itemHeight: "itemHeight", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows" }, outputs: { focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", selectedRowsChange: "selectedRowsChange" }, host: { attributes: { "ngSkipHydration": "true" } }, queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': stickyHeader }\">\n <tr>\n @for (column of columns; track $index) {\n <th\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\"\n [class.sticky-start]=\"column.fixed === 'start'\"\n [style.width]=\"column.width\"\n [style.--sticky-start]=\"column.stickyStart\"\n [style.--sticky-end]=\"column.stickyEnd\"\n >\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\"\n style.height=\"{{ itemHeight }}px\"\n (click)=\"handleRowClick($event, row)\"\n >\n @for (c of columns; track c.name) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\"\n [class.sticky-start]=\"c.fixed === 'start'\"\n [style.--sticky-start]=\"c.stickyStart\"\n [style.--sticky-end]=\"c.stickyEnd\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row) {\n <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager (onChanged)=\"onPageChanged($event)\" [total]=\"dataSource.totalCount\" [size]=\"dataSource.pageSize\"></ax-data-pager>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: ["ax-data-table-2{display:block;height:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper{overflow:auto;width:100%;max-height:85%;border-radius:var(--ax-rounded-border-default)}ax-data-table-2 .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table-2 .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table-2 .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table-2 .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table-2 .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table-2 .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table-2 .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell)).sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell)).sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell)).sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell)).sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table-2 .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table-2 .ax-data-table-wrapper table tbody tr{height:2.5rem}ax-data-table-2 .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table-2 .ax-data-table-wrapper table tbody 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-2 .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table-2 .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table-2 .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table-2 .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table-2 .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table-2 .ax-table-footer{border-top-width:1px;min-height:15%;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table-2 .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i4.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
363
- }
364
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Component, decorators: [{
365
- type: Component,
366
- args: [{ selector: 'ax-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': stickyHeader }\">\n <tr>\n @for (column of columns; track $index) {\n <th\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\"\n [class.sticky-start]=\"column.fixed === 'start'\"\n [style.width]=\"column.width\"\n [style.--sticky-start]=\"column.stickyStart\"\n [style.--sticky-end]=\"column.stickyEnd\"\n >\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\"\n style.height=\"{{ itemHeight }}px\"\n (click)=\"handleRowClick($event, row)\"\n >\n @for (c of columns; track c.name) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\"\n [class.sticky-start]=\"c.fixed === 'start'\"\n [style.--sticky-start]=\"c.stickyStart\"\n [style.--sticky-end]=\"c.stickyEnd\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row) {\n <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager (onChanged)=\"onPageChanged($event)\" [total]=\"dataSource.totalCount\" [size]=\"dataSource.pageSize\"></ax-data-pager>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: ["ax-data-table-2{display:block;height:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper{overflow:auto;width:100%;max-height:85%;border-radius:var(--ax-rounded-border-default)}ax-data-table-2 .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table-2 .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table-2 .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table-2 .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table-2 .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table-2 .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table-2 .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table-2 .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell)).sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell)).sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell)).sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell:has(+:not(ax-data-table-2 .ax-data-table-wrapper table tbody .ax-data-table-sticky-body-cell)).sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table-2 .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table-2 .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table-2 .ax-data-table-wrapper table tbody tr{height:2.5rem}ax-data-table-2 .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table-2 .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table-2 .ax-data-table-wrapper table tbody 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-2 .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table-2 .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table-2 .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table-2 .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table-2 .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table-2 .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table-2 .ax-table-footer{border-top-width:1px;min-height:15%;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table-2 .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
367
- }], propDecorators: { columns: [{
368
- type: ContentChildren,
369
- args: [AXDataTableColumnComponent]
370
- }], rowTemplate: [{
371
- type: Input
372
- }], emptyTemplate: [{
373
- type: Input
374
- }], showHeader: [{
375
- type: Input
376
- }], stickyHeader: [{
377
- type: Input
378
- }], itemHeight: [{
379
- type: Input
380
- }], fetchDataMode: [{
381
- type: Input
382
- }], dataSource: [{
383
- type: Input
384
- }], loading: [{
385
- type: Input
386
- }], focusedRow: [{
387
- type: Input
388
- }], selectedRows: [{
389
- type: Input
390
- }], focusedRowChange: [{
391
- type: Output
392
- }], onRowClick: [{
393
- type: Output
394
- }], onRowDbClick: [{
395
- type: Output
396
- }], selectedRowsChange: [{
397
- type: Output
398
- }] } });
399
-
400
- class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
401
- constructor() {
402
- super(...arguments);
403
- this.grid = inject(AXDataTable2Component);
404
- this.cdr = inject(ChangeDetectorRef);
405
- this.allowSorting = false;
406
- this.onItemClick = new EventEmitter();
407
- }
408
- get loadingEnabled() {
409
- return false;
410
- }
411
- get cssClass() {
412
- return 'ax-command-column';
413
- }
414
- }
415
- class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
416
- constructor() {
417
- super(...arguments);
418
- this._items = [];
419
- this.items = [];
420
- }
421
- get template() {
422
- return this._template;
423
- }
424
- get name() {
425
- return 'cl-dd-cmd';
426
- }
427
- async handleOnOpened(rowData) {
428
- if (Array.isArray(this.items)) {
429
- this._items = this.items;
430
- }
431
- else
432
- typeof this.items == 'function';
433
- {
434
- const result = this['items'](rowData);
435
- if (Array.isArray(result)) {
436
- this._items = result;
437
- }
438
- else if (result instanceof Promise) {
439
- this._items = await result;
440
- }
441
- }
442
- this.cdr.detectChanges();
443
- }
444
- handleOnClosed() {
445
- this._items = [];
446
- }
447
- handleOnItemClick(e, data) {
448
- const args = {
449
- component: this.grid,
450
- isUserInteraction: true,
451
- nativeEvent: e,
452
- data,
453
- name: e.name,
454
- };
455
- this.onItemClick.emit(args);
456
- }
457
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
458
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
459
- {
460
- provide: AXDataTableColumnComponent,
461
- useExisting: AXRowDropdownCommandColumnComponent,
462
- },
463
- ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
464
- @if (row.data) {
465
- <div>
466
- <button [axRipple]>
467
- <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
468
- <ax-dropdown-panel [adaptivityEnabled]="true" (onOpened)="handleOnOpened(row.data)" (onClosed)="handleOnClosed()">
469
- @if (_items.length) {
470
- <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items"> </ax-button-item-list>
471
- } @else {
472
- <div panel style="padding: 0.875rem;">
473
- <ax-loading></ax-loading>
474
- </div>
475
- }
476
- </ax-dropdown-panel>
477
- </button>
478
- </div>
479
- }
480
- <ng-template #loading>
481
- <div panel style="padding: 0.875rem;">
482
- <ax-loading></ax-loading>
483
- </div>
484
- </ng-template>
485
- </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
486
- }
487
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
488
- type: Component,
489
- args: [{
490
- selector: 'ax-dropdown-command-column',
491
- template: ` <ng-template let-row>
492
- @if (row.data) {
493
- <div>
494
- <button [axRipple]>
495
- <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
496
- <ax-dropdown-panel [adaptivityEnabled]="true" (onOpened)="handleOnOpened(row.data)" (onClosed)="handleOnClosed()">
497
- @if (_items.length) {
498
- <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items"> </ax-button-item-list>
499
- } @else {
500
- <div panel style="padding: 0.875rem;">
501
- <ax-loading></ax-loading>
502
- </div>
503
- }
504
- </ax-dropdown-panel>
505
- </button>
506
- </div>
507
- }
508
- <ng-template #loading>
509
- <div panel style="padding: 0.875rem;">
510
- <ax-loading></ax-loading>
511
- </div>
512
- </ng-template>
513
- </ng-template>`,
514
- encapsulation: ViewEncapsulation.None,
515
- changeDetection: ChangeDetectionStrategy.OnPush,
516
- providers: [
517
- {
518
- provide: AXDataTableColumnComponent,
519
- useExisting: AXRowDropdownCommandColumnComponent,
520
- },
521
- ],
522
- inputs: ['width', 'caption', 'fixed'],
523
- outputs: ['onItemClick'],
524
- }]
525
- }], propDecorators: { _template: [{
526
- type: ViewChild,
527
- args: [TemplateRef]
528
- }], items: [{
529
- type: Input
530
- }] } });
531
- class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
532
- constructor() {
533
- super(...arguments);
534
- this.items = [];
535
- }
536
- get template() {
537
- return this._template;
538
- }
539
- get name() {
540
- return 'cl-in-cmd';
541
- }
542
- getItems(rowData) {
543
- if (Array.isArray(this.items)) {
544
- return this.items;
545
- }
546
- else
547
- typeof this.items == 'function';
548
- {
549
- return this.items(rowData);
550
- }
551
- return [];
552
- }
553
- handleOnItemClick(e, item, data) {
554
- const args = {
555
- component: this.grid,
556
- isUserInteraction: true,
557
- nativeEvent: e,
558
- data,
559
- name: item.name,
560
- };
561
- this.onItemClick.emit(args);
562
- }
563
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
564
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
565
- {
566
- provide: AXDataTableColumnComponent,
567
- useExisting: AXRowCommandColumnComponent,
568
- },
569
- ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
570
- @if (row.data) {
571
- @for (item of getItems(row.data); track $index) {
572
- <button
573
- [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
574
- [disabled]="item.disabled"
575
- [class.ax-state-disabled]="item.disabled"
576
- [axRipple]="!item.disabled"
577
- (click)="handleOnItemClick($event, item, row.data)"
578
- >
579
- <ax-icon [icon]="item.icon"></ax-icon>
580
- </button>
581
- }
582
- }
583
- </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
584
- }
585
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
586
- type: Component,
587
- args: [{
588
- selector: 'ax-command-column',
589
- template: ` <ng-template let-row>
590
- @if (row.data) {
591
- @for (item of getItems(row.data); track $index) {
592
- <button
593
- [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
594
- [disabled]="item.disabled"
595
- [class.ax-state-disabled]="item.disabled"
596
- [axRipple]="!item.disabled"
597
- (click)="handleOnItemClick($event, item, row.data)"
598
- >
599
- <ax-icon [icon]="item.icon"></ax-icon>
600
- </button>
601
- }
602
- }
603
- </ng-template>`,
604
- encapsulation: ViewEncapsulation.None,
605
- changeDetection: ChangeDetectionStrategy.OnPush,
606
- providers: [
607
- {
608
- provide: AXDataTableColumnComponent,
609
- useExisting: AXRowCommandColumnComponent,
610
- },
611
- ],
612
- inputs: ['width', 'caption', 'fixed'],
613
- outputs: ['onItemClick'],
614
- }]
615
- }], propDecorators: { _template: [{
616
- type: ViewChild,
617
- args: [TemplateRef]
618
- }], items: [{
619
- type: Input
620
- }] } });
621
-
622
- class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
623
- constructor() {
624
- super(...arguments);
625
- this.grid = inject(AXDataTable2Component);
626
- this.unsubscriber = inject(AXUnsubscriber);
627
- this.padZero = false;
628
- this.formatCount = 1;
629
- this.allowSorting = false;
630
- }
631
- get template() {
632
- return this._template;
633
- }
634
- get name() {
635
- return 'cl-inx';
636
- }
637
- ngOnInit() {
638
- if (this.padZero) {
639
- this.grid.dataSource.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
640
- this.formatCount = c.totalCount.toString().length;
641
- });
642
- }
643
- }
644
- get loadingEnabled() {
645
- return false;
646
- }
647
- get cssClass() {
648
- return 'ax-index-column';
649
- }
650
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
651
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
652
- AXUnsubscriber,
653
- {
654
- provide: AXDataTableColumnComponent,
655
- useExisting: AXRowIndexColumnComponent,
656
- },
657
- ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
658
- {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
659
- </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
660
- }
661
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
662
- type: Component,
663
- args: [{
664
- selector: 'ax-index-column',
665
- template: ` <ng-template let-row>
666
- {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
667
- </ng-template>`,
668
- encapsulation: ViewEncapsulation.None,
669
- changeDetection: ChangeDetectionStrategy.OnPush,
670
- providers: [
671
- AXUnsubscriber,
672
- {
673
- provide: AXDataTableColumnComponent,
674
- useExisting: AXRowIndexColumnComponent,
675
- },
676
- ],
677
- inputs: ['width', 'caption', 'fixed'],
678
- }]
679
- }], propDecorators: { _template: [{
680
- type: ViewChild,
681
- args: [TemplateRef]
682
- }], padZero: [{
683
- type: Input
684
- }] } });
685
-
686
- class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
687
- constructor() {
688
- super(...arguments);
689
- this.grid = inject(AXDataTable2Component);
690
- }
691
- get template() {
692
- return this._template;
693
- }
694
- get name() {
695
- return 'cl-select';
696
- }
697
- isSelected(item) {
698
- return item != null && this.grid.selectedRows.includes(item);
699
- }
700
- handleChange(item) {
701
- if (this.isSelected(item)) {
702
- this.grid.unSelectRows(item);
703
- }
704
- else {
705
- this.grid.selectRows(item);
706
- }
707
- }
708
- get loadingEnabled() {
709
- return false;
710
- }
711
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
712
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
713
- {
714
- provide: AXDataTableColumnComponent,
715
- useExisting: AXRowSelectColumnComponent,
716
- },
717
- ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
718
- <input class="ax-checkbox" type="checkbox" [disabled]="!row.data" (change)="handleChange(row.data)" [checked]="isSelected(row.data)" />
719
- </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
720
- }
721
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
722
- type: Component,
723
- args: [{
724
- selector: 'ax-select-column',
725
- template: ` <ng-template let-row>
726
- <input class="ax-checkbox" type="checkbox" [disabled]="!row.data" (change)="handleChange(row.data)" [checked]="isSelected(row.data)" />
727
- </ng-template>`,
728
- encapsulation: ViewEncapsulation.None,
729
- changeDetection: ChangeDetectionStrategy.OnPush,
730
- providers: [
731
- {
732
- provide: AXDataTableColumnComponent,
733
- useExisting: AXRowSelectColumnComponent,
734
- },
735
- ],
736
- inputs: ['width', 'caption', 'fixed'],
737
- }]
738
- }], propDecorators: { _template: [{
739
- type: ViewChild,
740
- args: [TemplateRef]
741
- }] } });
742
-
743
- const COMPONENT = [
744
- AXDataTable2Component,
745
- AXDataTableTextColumnComponent,
746
- AXRowIndexColumnComponent,
747
- AXRowSelectColumnComponent,
748
- AXRowCommandColumnComponent,
749
- AXRowDropdownCommandColumnComponent,
750
- AXDataTableColumnResizableDirective,
751
- ];
752
- const MODULES = [
753
- CommonModule,
754
- AXCommonModule,
755
- ScrollingModule,
756
- AXTranslationModule,
757
- AXResultModule,
758
- AXLoadingModule,
759
- AXDecoratorModule,
760
- AXSkeletonModule,
761
- AXButtonModule,
762
- AXDropdownModule,
763
- AXFormatModule,
764
- AXDataPagerModule,
765
- AXRippleDirective,
766
- ];
767
- class AXDataTable2Module {
768
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
769
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Module, declarations: [AXDataTable2Component,
770
- AXDataTableTextColumnComponent,
771
- AXRowIndexColumnComponent,
772
- AXRowSelectColumnComponent,
773
- AXRowCommandColumnComponent,
774
- AXRowDropdownCommandColumnComponent,
775
- AXDataTableColumnResizableDirective], imports: [CommonModule,
776
- AXCommonModule,
777
- ScrollingModule,
778
- AXTranslationModule,
779
- AXResultModule,
780
- AXLoadingModule,
781
- AXDecoratorModule,
782
- AXSkeletonModule,
783
- AXButtonModule,
784
- AXDropdownModule,
785
- AXFormatModule,
786
- AXDataPagerModule,
787
- AXRippleDirective], exports: [AXDataTable2Component,
788
- AXDataTableTextColumnComponent,
789
- AXRowIndexColumnComponent,
790
- AXRowSelectColumnComponent,
791
- AXRowCommandColumnComponent,
792
- AXRowDropdownCommandColumnComponent,
793
- AXDataTableColumnResizableDirective] }); }
794
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Module, imports: [CommonModule,
795
- AXCommonModule,
796
- ScrollingModule,
797
- AXTranslationModule,
798
- AXResultModule,
799
- AXLoadingModule,
800
- AXDecoratorModule,
801
- AXSkeletonModule,
802
- AXButtonModule,
803
- AXDropdownModule,
804
- AXFormatModule,
805
- AXDataPagerModule] }); }
806
- }
807
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTable2Module, decorators: [{
808
- type: NgModule,
809
- args: [{
810
- declarations: [...COMPONENT],
811
- imports: [...MODULES],
812
- exports: [...COMPONENT],
813
- providers: [],
814
- }]
815
- }] });
816
-
817
- /**
818
- * Generated bundle index. Do not edit.
819
- */
820
-
821
- export { AXBaseRowCommandColumnComponent, AXDataTable2Component, AXDataTable2Module, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
822
- //# sourceMappingURL=acorex-components-data-table-2.mjs.map