@acorex/components 7.10.2 → 7.11.1

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 (67) hide show
  1. package/button/lib/button-item-list.component.d.ts +2 -2
  2. package/circular-progress/README.md +3 -0
  3. package/circular-progress/index.d.ts +2 -0
  4. package/circular-progress/lib/circular-progress.component.d.ts +33 -0
  5. package/circular-progress/lib/circular-progress.module.d.ts +7 -0
  6. package/common/lib/classes/datalist.class.d.ts +5 -0
  7. package/common/lib/classes/datasource.class.d.ts +10 -7
  8. package/common/lib/classes/events.class.d.ts +2 -1
  9. package/data-table/index.d.ts +6 -2
  10. package/data-table/lib/columns/data-column.d.ts +18 -0
  11. package/data-table/lib/columns/data-text-column.component.d.ts +10 -0
  12. package/data-table/lib/columns/row-command-column.component.d.ts +31 -0
  13. package/data-table/lib/columns/row-index-column.component.d.ts +12 -0
  14. package/data-table/lib/columns/row-select-column.component.d.ts +13 -0
  15. package/data-table/lib/data-table.component.d.ts +42 -27
  16. package/data-table/lib/data-table.module.d.ts +14 -9
  17. package/esm2022/alert/lib/alert.component.mjs +2 -2
  18. package/esm2022/button/lib/button-item-list.component.mjs +5 -4
  19. package/esm2022/circular-progress/acorex-components-circular-progress.mjs +5 -0
  20. package/esm2022/circular-progress/index.mjs +3 -0
  21. package/esm2022/circular-progress/lib/circular-progress.component.mjs +96 -0
  22. package/esm2022/circular-progress/lib/circular-progress.module.mjs +17 -0
  23. package/esm2022/common/lib/classes/datalist.class.mjs +6 -1
  24. package/esm2022/common/lib/classes/datasource.class.mjs +10 -3
  25. package/esm2022/common/lib/classes/events.class.mjs +2 -2
  26. package/esm2022/data-table/index.mjs +7 -3
  27. package/esm2022/data-table/lib/columns/data-column.mjs +35 -0
  28. package/esm2022/data-table/lib/columns/data-text-column.component.mjs +34 -0
  29. package/esm2022/data-table/lib/columns/row-command-column.component.mjs +110 -0
  30. package/esm2022/data-table/lib/columns/row-index-column.component.mjs +41 -0
  31. package/esm2022/data-table/lib/columns/row-select-column.component.mjs +62 -0
  32. package/esm2022/data-table/lib/data-table.component.mjs +135 -92
  33. package/esm2022/data-table/lib/data-table.module.mjs +43 -6
  34. package/esm2022/dropdown/lib/dropdown-panel.component.mjs +1 -2
  35. package/esm2022/progress-bar/lib/progress-bar.component.mjs +20 -62
  36. package/esm2022/skeleton/lib/skeleton.component.mjs +2 -2
  37. package/esm2022/switch/lib/switch-content.component.mjs +3 -3
  38. package/esm2022/switch/lib/switch.component.mjs +3 -3
  39. package/esm2022/uploader/lib/uploader-list.component.mjs +3 -3
  40. package/fesm2022/acorex-components-alert.mjs +2 -2
  41. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  42. package/fesm2022/acorex-components-button.mjs +3 -2
  43. package/fesm2022/acorex-components-button.mjs.map +1 -1
  44. package/fesm2022/acorex-components-circular-progress.mjs +117 -0
  45. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -0
  46. package/fesm2022/acorex-components-common.mjs +15 -3
  47. package/fesm2022/acorex-components-common.mjs.map +1 -1
  48. package/fesm2022/acorex-components-data-table.mjs +363 -157
  49. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  50. package/fesm2022/acorex-components-dropdown.mjs +0 -1
  51. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  52. package/fesm2022/acorex-components-progress-bar.mjs +18 -60
  53. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  54. package/fesm2022/acorex-components-skeleton.mjs +2 -2
  55. package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
  56. package/fesm2022/acorex-components-switch.mjs +4 -4
  57. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  58. package/fesm2022/acorex-components-uploader.mjs +2 -2
  59. package/fesm2022/acorex-components-uploader.mjs.map +1 -1
  60. package/package.json +7 -1
  61. package/progress-bar/lib/progress-bar.component.d.ts +9 -18
  62. package/switch/lib/switch-content.component.d.ts +1 -1
  63. package/switch/lib/switch.component.d.ts +1 -1
  64. package/data-table/lib/data-column.directive.d.ts +0 -11
  65. package/data-table/lib/data-table2.component.d.ts +0 -37
  66. package/esm2022/data-table/lib/data-column.directive.mjs +0 -26
  67. package/esm2022/data-table/lib/data-table2.component.mjs +0 -118
@@ -1,191 +1,163 @@
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, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, EventEmitter, ContentChildren, Output, inject, NgModule } from '@angular/core';
3
+ import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent } from '@acorex/components/common';
4
+ import * as i2 from '@angular/cdk/scrolling';
5
+ import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
6
+ import sum from 'lodash-es/sum';
4
7
  import * as i1 from '@angular/common';
5
8
  import { CommonModule } from '@angular/common';
6
- import * as i2 from '@acorex/components/result';
9
+ import * as i3 from '@acorex/components/result';
7
10
  import { AXResultModule } from '@acorex/components/result';
8
- import * as i3 from '@acorex/core/translation';
9
- import { AXTranslationModule } from '@acorex/core/translation';
11
+ import * as i2$1 from '@acorex/components/decorators';
10
12
  import { AXDecoratorModule } from '@acorex/components/decorators';
13
+ import * as i5 from '@acorex/components/skeleton';
14
+ import { AXSkeletonModule } from '@acorex/components/skeleton';
15
+ import * as i3$1 from '@acorex/components/button';
16
+ import { AXButtonModule } from '@acorex/components/button';
17
+ import * as i7 from '@acorex/core/translation';
18
+ import { AXTranslationModule } from '@acorex/core/translation';
19
+ import { of, Observable } from 'rxjs';
20
+ import * as i4 from '@acorex/components/dropdown';
21
+ import { AXDropdownModule } from '@acorex/components/dropdown';
11
22
  import { AXLoadingModule } from '@acorex/components/loading';
12
- import * as i2$1 from '@angular/cdk/scrolling';
13
- import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
14
- import _ from 'lodash';
15
23
 
16
24
  class AXDataColumnComponent {
17
25
  constructor() {
18
26
  this.width = 'auto';
27
+ this.allowSorting = false;
28
+ this.sortIndex = undefined;
29
+ this.sortOrder = undefined;
30
+ }
31
+ get cssClass() {
32
+ return null;
19
33
  }
20
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
21
- 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 }); }
34
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
35
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent }); }
22
36
  }
23
37
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, decorators: [{
24
- type: Directive,
25
- args: [{
26
- selector: 'ax-data-column',
27
- }]
28
- }], propDecorators: { headerTemplate: [{
29
- type: Input
30
- }], cellTemplate: [{
31
- type: Input
32
- }], valueField: [{
38
+ type: Injectable
39
+ }], propDecorators: { dataField: [{
33
40
  type: Input
34
41
  }], caption: [{
35
42
  type: Input
36
43
  }], width: [{
37
44
  type: Input
45
+ }], allowSorting: [{
46
+ type: Input
47
+ }], sortIndex: [{
48
+ type: Input
49
+ }], sortOrder: [{
50
+ type: Input
51
+ }], headerTemplate: [{
52
+ type: Input
53
+ }], cellTemplate: [{
54
+ type: Input
38
55
  }] } });
39
56
 
40
- class AXDataTableComponent extends MXBaseComponent {
41
- constructor() {
42
- super(...arguments);
43
- this.onPageChanged = new EventEmitter();
44
- this.showHeader = true;
45
- this._pageSize = 20;
46
- this.fetchDataMode = 'auto';
47
- this._currentPage = 1;
48
- this._loadedItems = [];
49
- this._totalItems = 0;
50
- this._isLazy = false;
51
- this._isLoading = false;
52
- this._items = [];
53
- }
54
- get pageSize() {
55
- return this._pageSize;
56
- }
57
- set pageSize(v) {
58
- this._pageSize = v;
57
+ class AXDataTextColumnComponent extends AXDataColumnComponent {
58
+ get template() {
59
+ return this._template;
59
60
  }
60
- get totalCount() {
61
- return this._totalItems;
61
+ get skeleton() {
62
+ return true;
62
63
  }
63
- get isLazy() {
64
- return this._isLazy;
65
- }
66
- get isLoading() {
67
- return this._isLoading;
68
- }
69
- get loadedCount() {
70
- return this._loadedItems?.length || 0;
71
- }
72
- get items() {
73
- return this._items;
74
- }
75
- set items(v) {
76
- if (Array.isArray(v)) {
77
- this._items = v;
78
- }
79
- else if (typeof v === 'function') {
80
- this._isLazy = true;
81
- this._items = v;
82
- }
83
- else {
84
- this._items = [];
85
- }
64
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
65
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", dataField: "dataField", allowSorting: "allowSorting" }, providers: [{ provide: AXDataColumnComponent, useExisting: AXDataTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
66
+ <ng-template let-row>
67
+ {{row.data[dataField]}}
68
+ </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
69
+ }
70
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTextColumnComponent, decorators: [{
71
+ type: Component,
72
+ args: [{
73
+ selector: 'ax-text-column',
74
+ template: `
75
+ <ng-template let-row>
76
+ {{row.data[dataField]}}
77
+ </ng-template>`,
78
+ encapsulation: ViewEncapsulation.None,
79
+ changeDetection: ChangeDetectionStrategy.OnPush,
80
+ providers: [{ provide: AXDataColumnComponent, useExisting: AXDataTextColumnComponent }],
81
+ inputs: ['width', 'caption', 'headerTemplate', 'cellTemplate', 'dataField', 'allowSorting']
82
+ }]
83
+ }], propDecorators: { _template: [{
84
+ type: ViewChild,
85
+ args: [TemplateRef]
86
+ }] } });
87
+
88
+ class AXRowIndexColumnComponent extends AXDataColumnComponent {
89
+ constructor() {
90
+ super(...arguments);
91
+ this.allowSorting = false;
86
92
  }
87
- get displayItems() {
88
- if (Array.isArray(this.items)) {
89
- return (this._items || []);
90
- }
91
- else if (typeof this._items == 'function') {
92
- return this._loadedItems || [];
93
- }
94
- return [];
95
- }
96
- ngAfterViewInit() {
97
- if (this.fetchDataMode == 'auto')
98
- this._fetchData();
99
- }
100
- _fetchData(opts) {
101
- const skip = (this._currentPage - 1) * this.pageSize, take = this.pageSize;
102
- if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
103
- this._isLoading ||
104
- !this._isLazy ||
105
- skip > this.totalCount) {
106
- return;
107
- }
108
- if (this._items) {
109
- this._isLoading = true;
110
- this.cdr.markForCheck();
111
- const fetchFn = this._items;
112
- fetchFn({ skip, take, searchQuery: opts?.searchQuery })
113
- .then((c) => {
114
- if (Array.isArray(c)) {
115
- this._loadedItems = c;
116
- this._totalItems = c.length;
117
- }
118
- else {
119
- this._totalItems = c.total || c.items?.length || 0;
120
- this._loadedItems = [...new Set(c.items)];
121
- }
122
- })
123
- .finally(() => {
124
- this._isLoading = false;
125
- this.onPageChanged.next({
126
- component: this,
127
- isUserInteraction: false,
128
- name: 'page',
129
- value: this._currentPage,
130
- });
131
- this.cdr.markForCheck();
132
- });
133
- }
93
+ get template() {
94
+ return this._template;
134
95
  }
135
- refresh() {
136
- this._totalItems = 0;
137
- this._loadedItems = [];
138
- this._fetchData();
96
+ get cssClass() {
97
+ return 'ax-index-column';
139
98
  }
140
- goToPage(page) {
141
- this._currentPage = page;
142
- this._fetchData();
99
+ get skeleton() {
100
+ return false;
143
101
  }
144
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
145
- 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-body{border-collapse:collapse}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 }); }
102
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
103
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption" }, providers: [{ provide: AXDataColumnComponent, useExisting: AXRowIndexColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
104
+ <ng-template let-row>
105
+ <span> {{row.rowIndex + 1}}</span>
106
+ </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
146
107
  }
147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
108
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
148
109
  type: Component,
149
- 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-body{border-collapse:collapse}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"] }]
150
- }], propDecorators: { _columns: [{
151
- type: ContentChildren,
152
- args: [AXDataColumnComponent]
153
- }], onPageChanged: [{
154
- type: Output
155
- }], rowTemplate: [{
156
- type: Input
157
- }], emptyTemplate: [{
158
- type: Input
159
- }], showHeader: [{
160
- type: Input
161
- }], pageSize: [{
162
- type: Input
163
- }], fetchDataMode: [{
164
- type: Input
165
- }], items: [{
166
- type: Input
110
+ args: [{
111
+ selector: 'ax-index-column',
112
+ template: `
113
+ <ng-template let-row>
114
+ <span> {{row.rowIndex + 1}}</span>
115
+ </ng-template>`,
116
+ encapsulation: ViewEncapsulation.None,
117
+ changeDetection: ChangeDetectionStrategy.OnPush,
118
+ providers: [{ provide: AXDataColumnComponent, useExisting: AXRowIndexColumnComponent }],
119
+ inputs: ['width', 'caption']
120
+ }]
121
+ }], propDecorators: { _template: [{
122
+ type: ViewChild,
123
+ args: [TemplateRef]
167
124
  }] } });
168
125
 
169
- class AXDataTable2Component extends MXBaseComponent {
126
+ class AXDataTableComponent extends MXBaseComponent {
170
127
  constructor() {
171
128
  super(...arguments);
172
129
  this.onPageChanged = new EventEmitter();
173
130
  this.showHeader = true;
174
- this._pageSize = 20;
175
131
  this.fetchDataMode = 'auto';
176
132
  this.dataSource = convertArrayToDataSource([]);
177
133
  this.isLoading = true;
178
134
  this.hasItems = false;
135
+ this.totalRows = 0;
136
+ this.currentPage = 0;
137
+ this.totalPages = 0;
138
+ this.startRowIndex = 0;
179
139
  this.lastIndex = 0;
140
+ this.focusedRowChange = new EventEmitter();
141
+ this.selectedRowsChange = new EventEmitter();
142
+ this._selectedRows = [];
180
143
  this.itemHeight = 40;
181
144
  this.width = "100%";
145
+ this.height = "100%";
182
146
  this.onScrolledIndexChanged = new EventEmitter();
183
147
  }
184
- get pageSize() {
185
- return this._pageSize;
148
+ get focusedRow() {
149
+ return this._focusedRow;
150
+ }
151
+ set focusedRow(v) {
152
+ this._focusedRow = v;
153
+ this.focusedRowChange.emit(v);
186
154
  }
187
- set pageSize(v) {
188
- this._pageSize = v;
155
+ get selectedRows() {
156
+ return this._selectedRows;
157
+ }
158
+ set selectedRows(v) {
159
+ this._selectedRows = v;
160
+ this.selectedRowsChange.emit(v);
189
161
  }
190
162
  trackByIdx(i) {
191
163
  return i;
@@ -203,6 +175,7 @@ class AXDataTable2Component extends MXBaseComponent {
203
175
  this.listDataSource.source
204
176
  .onChanged
205
177
  .subscribe((data) => {
178
+ this.totalRows = data.totalCount;
206
179
  this.hasItems = data.totalCount > 0;
207
180
  setTimeout(() => {
208
181
  this.render();
@@ -224,10 +197,15 @@ class AXDataTable2Component extends MXBaseComponent {
224
197
  headerContainer.scrollLeft = left;
225
198
  }
226
199
  if (this.columns && this.columns.length) {
227
- const sum = _.sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
228
- this.width = `${Math.max(sum, this.getHostElement().clientWidth - 5)}px`;
229
- //console.log(this.width);
200
+ const sumPx = sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
201
+ this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
230
202
  }
203
+ this.height = `calc(100% - ${((this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0))}px)`;
204
+ this.startRowIndex = this.lastIndex;
205
+ if (this.startRowIndex < 1)
206
+ this.startRowIndex = 1;
207
+ if (this.startRowIndex > this.totalRows)
208
+ this.startRowIndex = this.totalRows;
231
209
  }
232
210
  render() {
233
211
  this.viewport.checkViewportSize();
@@ -235,14 +213,42 @@ class AXDataTable2Component extends MXBaseComponent {
235
213
  this.cdr.markForCheck();
236
214
  }
237
215
  refresh() {
216
+ this.lastIndex = 0;
238
217
  this.dataSource.refresh();
239
218
  }
240
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTable2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
241
- 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 }], 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: calc(100% - 52px);\">\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<ng-content select=\"ax-footer\">\n</ng-content>\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 ...\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>\n\n<!-- \n<div class=\"ax-wrapper\">\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 <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\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\">\n {{item[c.valueField]}}\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n\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-body{border-collapse:collapse}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: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
219
+ handleRowClick(e, item) {
220
+ if (this.focusedRow == item) {
221
+ this.focusedRow = null;
222
+ }
223
+ else {
224
+ this.focusedRow = item;
225
+ }
226
+ }
227
+ handleColumnClick(e, column) {
228
+ const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
229
+ if (!sort) {
230
+ this.dataSource.query.sort.push({ field: column.dataField, dir: 'asc' });
231
+ }
232
+ else {
233
+ if (sort.dir == 'asc') {
234
+ sort.dir = 'desc';
235
+ }
236
+ else {
237
+ this.dataSource.query.sort = this.dataSource.query.sort.filter(c => c != sort);
238
+ }
239
+ }
240
+ this.refresh();
241
+ }
242
+ getSort(column) {
243
+ const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
244
+ return sort ? (sort.dir == 'asc' ? 'ax-icon-arrow-long-down' : 'ax-icon-arrow-long-up') : undefined;
245
+ }
246
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
247
+ 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: 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\" [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>&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 *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 [class.ax-state-focused]=\"focusedRow && item===focusedRow\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\"\n [attr.data.rowIndex]=\"rIndex\">\n <ng-container *ngFor=\"let c of columns\">\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\" [style.width]=\"c.width\" [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>&nbsp;</td>\n </tr>\n </ng-template>\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 {{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-table-body tr:hover td:not(.ax-index-column),.ax-dark ax-data-table .ax-table-body tr.ax-state-focused td:not(.ax-index-column){background-color:#ffffff4d;color:rgba(var(--ax-color-text-default))}.ax-dark ax-data-table .ax-table-body tr.ax-state-selected:not(:hover,.ax-state-focused) td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900),.5);color:rgba(var(--ax-color-primary-fore))}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-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-table .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-table .ax-table-header th.ax-interactive{cursor:pointer}ax-data-table .ax-table-header th.ax-interactive:hover{background-color:#0000001a}ax-data-table .ax-table-header th .ax-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-table-header th:last-child{border-inline-end:0px solid}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}ax-data-table .ax-table-body{border-collapse:collapse}ax-data-table .ax-table-body tr:nth-child(odd) td{background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table .ax-table-body tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-table-body tr:hover td:not(.ax-index-column),ax-data-table .ax-table-body tr.ax-state-focused td:not(.ax-index-column){background-color:#0000001a}ax-data-table .ax-table-body tr.ax-state-selected:not(:hover,.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-table-body td{padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-table-body td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-table-body td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-table-body td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-table-body td.ax-command-column>.ax-content{justify-content:center}ax-data-table .ax-table-body td.ax-command-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;font-size:1.4rem;cursor:pointer}ax-data-table .ax-table-body td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-table-body td:last-child{border-inline-end:0px solid}ax-data-table .ax-table-body td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}\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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i3$1.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 }); }
242
248
  }
243
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTable2Component, decorators: [{
249
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
244
250
  type: Component,
245
- 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: calc(100% - 52px);\">\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<ng-content select=\"ax-footer\">\n</ng-content>\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 ...\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>\n\n<!-- \n<div class=\"ax-wrapper\">\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 <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\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\">\n {{item[c.valueField]}}\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n\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-body{border-collapse:collapse}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"] }]
251
+ 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-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\" [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>&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 *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 [class.ax-state-focused]=\"focusedRow && item===focusedRow\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\"\n [attr.data.rowIndex]=\"rIndex\">\n <ng-container *ngFor=\"let c of columns\">\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\" [style.width]=\"c.width\" [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>&nbsp;</td>\n </tr>\n </ng-template>\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 {{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-table-body tr:hover td:not(.ax-index-column),.ax-dark ax-data-table .ax-table-body tr.ax-state-focused td:not(.ax-index-column){background-color:#ffffff4d;color:rgba(var(--ax-color-text-default))}.ax-dark ax-data-table .ax-table-body tr.ax-state-selected:not(:hover,.ax-state-focused) td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900),.5);color:rgba(var(--ax-color-primary-fore))}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-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-table .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-table .ax-table-header th.ax-interactive{cursor:pointer}ax-data-table .ax-table-header th.ax-interactive:hover{background-color:#0000001a}ax-data-table .ax-table-header th .ax-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-table-header th:last-child{border-inline-end:0px solid}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}ax-data-table .ax-table-body{border-collapse:collapse}ax-data-table .ax-table-body tr:nth-child(odd) td{background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table .ax-table-body tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-table-body tr:hover td:not(.ax-index-column),ax-data-table .ax-table-body tr.ax-state-focused td:not(.ax-index-column){background-color:#0000001a}ax-data-table .ax-table-body tr.ax-state-selected:not(:hover,.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-table-body td{padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-table-body td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-table-body td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-table-body td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-table-body td.ax-command-column>.ax-content{justify-content:center}ax-data-table .ax-table-body td.ax-command-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;font-size:1.4rem;cursor:pointer}ax-data-table .ax-table-body td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-table-body td:last-child{border-inline-end:0px solid}ax-data-table .ax-table-body td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}\n"] }]
246
252
  }], propDecorators: { columns: [{
247
253
  type: ContentChildren,
248
254
  args: [AXDataColumnComponent]
@@ -256,12 +262,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
256
262
  type: Input
257
263
  }], showHeader: [{
258
264
  type: Input
259
- }], pageSize: [{
260
- type: Input
261
265
  }], fetchDataMode: [{
262
266
  type: Input
263
267
  }], dataSource: [{
264
268
  type: Input
269
+ }], focusedRowChange: [{
270
+ type: Output
271
+ }], focusedRow: [{
272
+ type: Input
273
+ }], selectedRowsChange: [{
274
+ type: Output
275
+ }], selectedRows: [{
276
+ type: Input
265
277
  }], itemHeight: [{
266
278
  type: Input
267
279
  }], viewport: [{
@@ -272,13 +284,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
272
284
  }], headerContainer: [{
273
285
  type: ViewChild,
274
286
  args: ['headerContainer']
287
+ }], footerContainer: [{
288
+ type: ViewChild,
289
+ args: ['footerContainer']
290
+ }] } });
291
+
292
+ class AXRowSelectColumnComponent extends AXDataColumnComponent {
293
+ constructor() {
294
+ super(...arguments);
295
+ this.grid = inject(AXDataTableComponent);
296
+ }
297
+ get template() {
298
+ return this._template;
299
+ }
300
+ isSelected(item) {
301
+ return item != null && this.grid.selectedRows.includes(item);
302
+ }
303
+ handleChange(item) {
304
+ if (this.isSelected(item)) {
305
+ this.grid.selectedRows = this.grid.selectedRows.filter(c => c != item);
306
+ }
307
+ else {
308
+ this.grid.selectedRows.push(item);
309
+ }
310
+ }
311
+ get skeleton() {
312
+ return false;
313
+ }
314
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
315
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption" }, providers: [{ provide: AXDataColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
316
+ <ng-template let-row>
317
+ <input
318
+ class="ax-checkbox"
319
+ type="checkbox"
320
+ [disabled]="!row.data"
321
+ (change)="handleChange(row.data)"
322
+ [checked]="isSelected(row.data)"
323
+ />
324
+ </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
325
+ }
326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
327
+ type: Component,
328
+ args: [{
329
+ selector: 'ax-select-column',
330
+ template: `
331
+ <ng-template let-row>
332
+ <input
333
+ class="ax-checkbox"
334
+ type="checkbox"
335
+ [disabled]="!row.data"
336
+ (change)="handleChange(row.data)"
337
+ [checked]="isSelected(row.data)"
338
+ />
339
+ </ng-template>`,
340
+ encapsulation: ViewEncapsulation.None,
341
+ changeDetection: ChangeDetectionStrategy.OnPush,
342
+ providers: [{ provide: AXDataColumnComponent, useExisting: AXRowSelectColumnComponent }],
343
+ inputs: ['width', 'caption']
344
+ }]
345
+ }], propDecorators: { _template: [{
346
+ type: ViewChild,
347
+ args: [TemplateRef]
348
+ }] } });
349
+
350
+ class AXRowCommandColumnComponent extends AXDataColumnComponent {
351
+ constructor() {
352
+ super(...arguments);
353
+ this.grid = inject(AXDataTableComponent);
354
+ this.allowSorting = false;
355
+ this._items = [];
356
+ this.items = [];
357
+ this.onItemClick = new EventEmitter();
358
+ }
359
+ get template() {
360
+ return this._template;
361
+ }
362
+ get skeleton() {
363
+ return false;
364
+ }
365
+ get cssClass() {
366
+ return 'ax-command-column';
367
+ }
368
+ handleOnItemClick(e, data) {
369
+ this.onItemClick.emit(Object.assign(e, { component: this.grid, data }));
370
+ }
371
+ items$(rowData) {
372
+ if (Array.isArray(this.items)) {
373
+ return of(this.items);
374
+ }
375
+ else
376
+ (typeof this.items == 'function');
377
+ {
378
+ const result = this.items(rowData);
379
+ if (Array.isArray(result)) {
380
+ return of(result);
381
+ }
382
+ else if (result instanceof Promise) {
383
+ let subscriber;
384
+ const observable = new Observable(observer => {
385
+ subscriber = observer;
386
+ });
387
+ result.then(items => {
388
+ subscriber?.next(items);
389
+ });
390
+ return observable;
391
+ }
392
+ }
393
+ return of([]);
394
+ }
395
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
396
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
397
+ <ng-template let-row>
398
+ <span #btn *ngIf="row.data">
399
+ <ax-icon icon="ax-icon ax-icon-more-horizontal"></ax-icon>
400
+ <ax-dropdown-panel >
401
+ <ax-button-item-list (onItemClick)="handleOnItemClick($event,row.data)">
402
+ <ng-container *ngFor="let item of items$(row.data) | async">
403
+ <ax-button-item [text]="item.text" [name]="item.name" [disabled]="item.disabled" [color]="item.color" >
404
+ <ax-prefix>
405
+ <ax-icon [icon]="item.icon"></ax-icon>
406
+ </ax-prefix>
407
+ </ax-button-item>
408
+ <ax-divider *ngIf="item.divided"></ax-divider>
409
+ </ng-container>
410
+ </ax-button-item-list>
411
+ </ax-dropdown-panel>
412
+ </span>
413
+ </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: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title" }, { kind: "component", type: i3$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
414
+ }
415
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
416
+ type: Component,
417
+ args: [{
418
+ selector: 'ax-command-column',
419
+ template: `
420
+ <ng-template let-row>
421
+ <span #btn *ngIf="row.data">
422
+ <ax-icon icon="ax-icon ax-icon-more-horizontal"></ax-icon>
423
+ <ax-dropdown-panel >
424
+ <ax-button-item-list (onItemClick)="handleOnItemClick($event,row.data)">
425
+ <ng-container *ngFor="let item of items$(row.data) | async">
426
+ <ax-button-item [text]="item.text" [name]="item.name" [disabled]="item.disabled" [color]="item.color" >
427
+ <ax-prefix>
428
+ <ax-icon [icon]="item.icon"></ax-icon>
429
+ </ax-prefix>
430
+ </ax-button-item>
431
+ <ax-divider *ngIf="item.divided"></ax-divider>
432
+ </ng-container>
433
+ </ax-button-item-list>
434
+ </ax-dropdown-panel>
435
+ </span>
436
+ </ng-template>`,
437
+ encapsulation: ViewEncapsulation.None,
438
+ changeDetection: ChangeDetectionStrategy.OnPush,
439
+ providers: [{ provide: AXDataColumnComponent, useExisting: AXRowCommandColumnComponent }],
440
+ inputs: ['width', 'caption']
441
+ }]
442
+ }], propDecorators: { _template: [{
443
+ type: ViewChild,
444
+ args: [TemplateRef]
445
+ }], items: [{
446
+ type: Input
447
+ }], onItemClick: [{
448
+ type: Output
275
449
  }] } });
276
450
 
277
- const COMPONENT = [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent];
278
- const MODULES = [CommonModule, ScrollingModule, AXTranslationModule, AXResultModule, AXLoadingModule, AXDecoratorModule];
451
+ const COMPONENT = [
452
+ AXDataTableComponent,
453
+ AXDataTextColumnComponent,
454
+ AXRowIndexColumnComponent,
455
+ AXRowSelectColumnComponent,
456
+ AXRowCommandColumnComponent
457
+ ];
458
+ const MODULES = [
459
+ CommonModule,
460
+ ScrollingModule,
461
+ AXTranslationModule,
462
+ AXResultModule,
463
+ AXLoadingModule,
464
+ AXDecoratorModule,
465
+ AXSkeletonModule,
466
+ AXButtonModule,
467
+ AXDropdownModule
468
+ ];
279
469
  class AXDataTableModule {
280
470
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
281
- 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], exports: [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent] }); }
471
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
472
+ AXDataTextColumnComponent,
473
+ AXRowIndexColumnComponent,
474
+ AXRowSelectColumnComponent,
475
+ AXRowCommandColumnComponent], imports: [CommonModule,
476
+ ScrollingModule,
477
+ AXTranslationModule,
478
+ AXResultModule,
479
+ AXLoadingModule,
480
+ AXDecoratorModule,
481
+ AXSkeletonModule,
482
+ AXButtonModule,
483
+ AXDropdownModule], exports: [AXDataTableComponent,
484
+ AXDataTextColumnComponent,
485
+ AXRowIndexColumnComponent,
486
+ AXRowSelectColumnComponent,
487
+ AXRowCommandColumnComponent] }); }
282
488
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, imports: [MODULES] }); }
283
489
  }
284
490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, decorators: [{
@@ -295,5 +501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
295
501
  * Generated bundle index. Do not edit.
296
502
  */
297
503
 
298
- export { AXDataColumnComponent, AXDataTable2Component, AXDataTableComponent, AXDataTableModule };
504
+ export { AXDataColumnComponent, AXDataTableComponent, AXDataTableModule, AXDataTextColumnComponent, AXRowCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
299
505
  //# sourceMappingURL=acorex-components-data-table.mjs.map