@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.
Files changed (75) hide show
  1. package/button/lib/button-item-list.component.d.ts +7 -7
  2. package/button/lib/button-item.component.d.ts +9 -1
  3. package/circular-progress/README.md +3 -0
  4. package/circular-progress/index.d.ts +2 -0
  5. package/circular-progress/lib/circular-progress.component.d.ts +33 -0
  6. package/circular-progress/lib/circular-progress.module.d.ts +7 -0
  7. package/common/lib/classes/datalist.class.d.ts +2 -1
  8. package/common/lib/classes/datasource.class.d.ts +10 -7
  9. package/common/lib/classes/events.class.d.ts +2 -1
  10. package/data-table/index.d.ts +6 -2
  11. package/data-table/lib/columns/data-table-column.d.ts +18 -0
  12. package/data-table/lib/columns/data-text-column.component.d.ts +15 -0
  13. package/data-table/lib/columns/row-command-column.component.d.ts +38 -0
  14. package/data-table/lib/columns/row-index-column.component.d.ts +17 -0
  15. package/data-table/lib/columns/row-select-column.component.d.ts +13 -0
  16. package/data-table/lib/data-table.component.d.ts +51 -27
  17. package/data-table/lib/data-table.module.d.ts +16 -11
  18. package/esm2022/alert/lib/alert.component.mjs +2 -2
  19. package/esm2022/button/lib/button-item-list.component.mjs +36 -10
  20. package/esm2022/button/lib/button-item.component.mjs +1 -1
  21. package/esm2022/button/lib/button.component.mjs +2 -2
  22. package/esm2022/circular-progress/acorex-components-circular-progress.mjs +5 -0
  23. package/esm2022/circular-progress/index.mjs +3 -0
  24. package/esm2022/circular-progress/lib/circular-progress.component.mjs +96 -0
  25. package/esm2022/circular-progress/lib/circular-progress.module.mjs +17 -0
  26. package/esm2022/common/index.mjs +1 -1
  27. package/esm2022/common/lib/classes/datalist.class.mjs +6 -3
  28. package/esm2022/common/lib/classes/datasource.class.mjs +10 -3
  29. package/esm2022/common/lib/classes/events.class.mjs +2 -2
  30. package/esm2022/common/lib/common.module.mjs +2 -2
  31. package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs +1 -1
  32. package/esm2022/data-table/index.mjs +7 -3
  33. package/esm2022/data-table/lib/columns/data-table-column.mjs +35 -0
  34. package/esm2022/data-table/lib/columns/data-text-column.component.mjs +58 -0
  35. package/esm2022/data-table/lib/columns/row-command-column.component.mjs +198 -0
  36. package/esm2022/data-table/lib/columns/row-index-column.component.mjs +65 -0
  37. package/esm2022/data-table/lib/columns/row-select-column.component.mjs +62 -0
  38. package/esm2022/data-table/lib/data-table.component.mjs +181 -90
  39. package/esm2022/data-table/lib/data-table.module.mjs +50 -6
  40. package/esm2022/dropdown/lib/dropdown-panel.component.mjs +14 -5
  41. package/esm2022/progress-bar/lib/progress-bar.component.mjs +20 -62
  42. package/esm2022/skeleton/lib/skeleton.component.mjs +2 -2
  43. package/esm2022/switch/lib/switch-content.component.mjs +3 -3
  44. package/esm2022/switch/lib/switch.component.mjs +3 -3
  45. package/esm2022/uploader/lib/uploader-list.component.mjs +3 -3
  46. package/fesm2022/acorex-components-alert.mjs +2 -2
  47. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  48. package/fesm2022/acorex-components-button.mjs +34 -11
  49. package/fesm2022/acorex-components-button.mjs.map +1 -1
  50. package/fesm2022/acorex-components-circular-progress.mjs +117 -0
  51. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -0
  52. package/fesm2022/acorex-components-common.mjs +16 -6
  53. package/fesm2022/acorex-components-common.mjs.map +1 -1
  54. package/fesm2022/acorex-components-data-pager.mjs +1 -1
  55. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  56. package/fesm2022/acorex-components-data-table.mjs +542 -161
  57. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  58. package/fesm2022/acorex-components-dropdown.mjs +13 -4
  59. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  60. package/fesm2022/acorex-components-progress-bar.mjs +18 -60
  61. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  62. package/fesm2022/acorex-components-skeleton.mjs +2 -2
  63. package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
  64. package/fesm2022/acorex-components-switch.mjs +4 -4
  65. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  66. package/fesm2022/acorex-components-uploader.mjs +2 -2
  67. package/fesm2022/acorex-components-uploader.mjs.map +1 -1
  68. package/package.json +29 -23
  69. package/progress-bar/lib/progress-bar.component.d.ts +9 -18
  70. package/switch/lib/switch-content.component.d.ts +1 -1
  71. package/switch/lib/switch.component.d.ts +1 -1
  72. package/data-table/lib/data-column.directive.d.ts +0 -11
  73. package/data-table/lib/data-table2.component.d.ts +0 -42
  74. package/esm2022/data-table/lib/data-column.directive.mjs +0 -26
  75. 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 { Directive, Input, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, Output, ViewChild, NgModule } from '@angular/core';
3
- import { MXBaseComponent, AXPagedComponent, convertArrayToDataSource, AXListDataSource } from '@acorex/components/common';
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 i2 from '@acorex/components/result';
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 AXDataColumnComponent {
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
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
26
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXDataColumnComponent, selector: "ax-data-column", inputs: { headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", valueField: "valueField", caption: "caption", width: "width" }, ngImport: i0 }); }
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: AXDataColumnComponent, decorators: [{
29
- type: Directive,
30
- args: [{
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
- }], cellTemplate: [{
47
+ }], width: [{
36
48
  type: Input
37
- }], valueField: [{
49
+ }], fixed: [{
38
50
  type: Input
39
- }], caption: [{
51
+ }], allowSorting: [{
40
52
  type: Input
41
- }], width: [{
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 AXDataTableComponent extends MXBaseComponent {
63
+ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
46
64
  constructor() {
47
65
  super(...arguments);
48
- this.onPageChanged = new EventEmitter();
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
- set pageSize(v) {
63
- this._pageSize = v;
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
- refresh() {
141
- this._totalItems = 0;
142
- this._loadedItems = [];
143
- this._fetchData();
71
+ get skeleton() {
72
+ return true;
144
73
  }
145
- goToPage(page) {
146
- this._currentPage = page;
147
- this._fetchData();
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: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
150
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", items: "items" }, outputs: { onPageChanged: "onPageChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "_columns", predicate: AXDataColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<div class=\"ax-wrapper\">\n <!-- [axIsLoading]=\"isLoading\" -->\n <table class=\"ax-table ax-table-bordered\" tabindex=\"0\">\n <thead *ngIf=\"showHeader\">\n <tr>\n <th *ngFor=\"let c of _columns\">\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 </tr>\n </thead>\n <tbody>\n <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\n <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\n <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,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:d,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\n {{d[c.valueField]}}\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </ng-template>\n </ng-container>\n </ng-container>\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>\n </tbody>\n </table>\n</div>\n<ng-content select=\"ax-footer\">\n</ng-content>", 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"], 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: "component", type: i2.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
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
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
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: [{ 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<div class=\"ax-wrapper\">\n <!-- [axIsLoading]=\"isLoading\" -->\n <table class=\"ax-table ax-table-bordered\" tabindex=\"0\">\n <thead *ngIf=\"showHeader\">\n <tr>\n <th *ngFor=\"let c of _columns\">\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 </tr>\n </thead>\n <tbody>\n <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\n <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\n <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,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:d,rowIndex:rIndex} }\">\n </ng-container>\n </ng-template>\n <ng-template #cellTpl>\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\n {{d[c.valueField]}}\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </ng-template>\n </ng-container>\n </ng-container>\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>\n </tbody>\n </table>\n</div>\n<ng-content select=\"ax-footer\">\n</ng-content>", 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"] }]
155
- }], propDecorators: { _columns: [{
156
- type: ContentChildren,
157
- args: [AXDataColumnComponent]
158
- }], onPageChanged: [{
159
- type: Output
160
- }], rowTemplate: [{
161
- type: Input
162
- }], emptyTemplate: [{
163
- type: Input
164
- }], showHeader: [{
165
- type: Input
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
- }], fetchDataMode: [{
106
+ }], _template: [{
107
+ type: ViewChild,
108
+ args: [TemplateRef]
109
+ }], getDisplayText: [], format: [{
169
110
  type: Input
170
- }], items: [{
111
+ }], formatOptions: [{
171
112
  type: Input
172
113
  }] } });
173
114
 
174
- class AXDataTable2Component extends MXBaseComponent {
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
- get pageSize() {
194
- return this._pageSize;
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
- set pageSize(v) {
197
- this._pageSize = v;
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.scrollLeft = left;
208
+ headerContainer.style.transform = `translateX(${-left}px)`;
235
209
  }
236
210
  if (this.columns && this.columns.length) {
237
- const sum = _.sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
238
- this.width = `${Math.max(sum, this.getHostElement().clientWidth - 5)}px`;
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 = (this.listDataSource?.range.start ?? 0) + this.pageSize;
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
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTable2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
252
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTable2Component, selector: "ax-data-table2", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", dataSource: "dataSource", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTable2Component }], queries: [{ propertyName: "columns", predicate: AXDataColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: 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<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>&nbsp;</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>&nbsp;</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"], 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$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$1.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i2.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: i3.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
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: AXDataTable2Component, decorators: [{
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>&nbsp;</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>&nbsp;</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: [AXDataColumnComponent]
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
- const COMPONENT = [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent];
292
- const MODULES = [CommonModule, ScrollingModule, AXTranslationModule, AXResultModule, AXLoadingModule, AXDecoratorModule, AXSkeletonModule, AXButtonModule];
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, AXDataTable2Component, AXDataColumnComponent], imports: [CommonModule, ScrollingModule, AXTranslationModule, AXResultModule, AXLoadingModule, AXDecoratorModule, AXSkeletonModule, AXButtonModule], exports: [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent] }); }
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 { AXDataColumnComponent, AXDataTable2Component, AXDataTableComponent, AXDataTableModule };
693
+ export { AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
313
694
  //# sourceMappingURL=acorex-components-data-table.mjs.map