@trudb/tru-common-lib 0.1.33 → 0.1.36

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.
@@ -5,12 +5,31 @@ import * as i0 from "@angular/core";
5
5
  import * as i1 from "@angular/material/icon";
6
6
  export class TruDataGridRefHeader {
7
7
  params;
8
+ ascSort = 'inactive';
9
+ descSort = 'inactive';
10
+ noSort = 'inactive';
8
11
  agInit(params) {
9
12
  this.params = params;
13
+ this.onSortChanged();
10
14
  }
11
15
  refresh(params) {
12
16
  return false;
13
17
  }
18
+ onSortChanged() {
19
+ this.ascSort = this.descSort = this.noSort = 'inactive';
20
+ if (this.params.column.isSortAscending()) {
21
+ this.ascSort = 'active';
22
+ }
23
+ else if (this.params.column.isSortDescending()) {
24
+ this.descSort = 'active';
25
+ }
26
+ else {
27
+ this.noSort = 'active';
28
+ }
29
+ }
30
+ onSortRequested(order, event) {
31
+ this.params.setSort(order, event.shiftKey);
32
+ }
14
33
  onSelectAllIconClicked() {
15
34
  this.params.api.selectAll();
16
35
  }
@@ -19,12 +38,16 @@ export class TruDataGridRefHeader {
19
38
  <div class="ag-cell-label-container" role="presentation">
20
39
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
21
40
  <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
41
+ <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
42
+ <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" (click)="onSortRequested('asc', $event)"></span>
43
+ <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" (click)="onSortRequested('desc', $event)"></span>
44
+ <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" (click)="onSortRequested(null, $event)"></span>
22
45
  </div>
23
46
  <mat-icon [svgIcon]="'select-all-icon'"
24
47
  (click)="onSelectAllIconClicked()"
25
48
  class="tru-data-grid-select-all-icon"
26
49
  title="Select All (Ctrl+A)"></mat-icon>
27
- </div>`, isInline: true, styles: [".tru-data-grid-select-all-icon{font-size:28px;color:#ddd;transform:rotate(-45deg);float:right;position:absolute;top:0;right:5px;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
50
+ </div>`, isInline: true, styles: [".tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:2px;z-index:100}.tru-data-grid-select-all-icon path{fill:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
28
51
  }
29
52
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TruDataGridRefHeader, decorators: [{
30
53
  type: Component,
@@ -32,11 +55,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
32
55
  <div class="ag-cell-label-container" role="presentation">
33
56
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
34
57
  <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
58
+ <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
59
+ <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" (click)="onSortRequested('asc', $event)"></span>
60
+ <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" (click)="onSortRequested('desc', $event)"></span>
61
+ <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" (click)="onSortRequested(null, $event)"></span>
35
62
  </div>
36
63
  <mat-icon [svgIcon]="'select-all-icon'"
37
64
  (click)="onSelectAllIconClicked()"
38
65
  class="tru-data-grid-select-all-icon"
39
66
  title="Select All (Ctrl+A)"></mat-icon>
40
- </div>`, styles: [".tru-data-grid-select-all-icon{font-size:28px;color:#ddd;transform:rotate(-45deg);float:right;position:absolute;top:0;right:5px;z-index:100}\n"] }]
67
+ </div>`, styles: [".tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:2px;z-index:100}.tru-data-grid-select-all-icon path{fill:#d3d3d3}\n"] }]
41
68
  }] });
42
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJ1LWRhdGEtZ3JpZC1yZWYtaGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHJ1LWNvbW1vbi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtZ3JpZC9oZWFkZXJzL3RydS1kYXRhLWdyaWQtcmVmLWhlYWRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFrQ3ZELE1BQU0sT0FBTyxvQkFBb0I7SUFDeEIsTUFBTSxDQUFpQjtJQUU5QixNQUFNLENBQUMsTUFBcUI7UUFDMUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7SUFDdkIsQ0FBQztJQUVELE9BQU8sQ0FBQyxNQUFxQjtRQUMzQixPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7SUFFRCxzQkFBc0I7UUFDcEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDOUIsQ0FBQzt1R0FiVSxvQkFBb0I7MkZBQXBCLG9CQUFvQix3RUEzQnJCOzs7Ozs7Ozs7U0FTSCx1TkFWa0IsYUFBYTs7MkZBNEIzQixvQkFBb0I7a0JBOUJoQyxTQUFTO2lDQUNJLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsYUFBYSxDQUFDLFlBQzdCOzs7Ozs7Ozs7U0FTSCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nQ2xhc3MsIE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xyXG5pbXBvcnQgeyBJSGVhZGVyQW5ndWxhckNvbXAgfSBmcm9tICdhZy1ncmlkLWFuZ3VsYXInO1xyXG5pbXBvcnQgeyBJSGVhZGVyUGFyYW1zIH0gZnJvbSAnYWctZ3JpZC1jb21tdW5pdHknO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbTmdJZiwgTmdDbGFzcywgTWF0SWNvbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICA8ZGl2IGNsYXNzPVwiYWctY2VsbC1sYWJlbC1jb250YWluZXJcIiByb2xlPVwicHJlc2VudGF0aW9uXCI+XHJcbiAgICA8ZGl2IHJlZj1cImVMYWJlbFwiIGNsYXNzPVwiYWctaGVhZGVyLWNlbGwtbGFiZWxcIiByb2xlPVwicHJlc2VudGF0aW9uXCI+XHJcbiAgICAgICAgPHNwYW4gcmVmPVwiZVRleHRcIiBjbGFzcz1cImFnLWhlYWRlci1jZWxsLXRleHRcIj57e3BhcmFtcy5kaXNwbGF5TmFtZX19PC9zcGFuPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8bWF0LWljb24gW3N2Z0ljb25dPVwiJ3NlbGVjdC1hbGwtaWNvbidcIlxyXG4gICAgICAoY2xpY2spPVwib25TZWxlY3RBbGxJY29uQ2xpY2tlZCgpXCJcclxuICAgICAgY2xhc3M9XCJ0cnUtZGF0YS1ncmlkLXNlbGVjdC1hbGwtaWNvblwiXHJcbiAgICAgIHRpdGxlPVwiU2VsZWN0IEFsbCAoQ3RybCtBKVwiPjwvbWF0LWljb24+XHJcbiAgPC9kaXY+YCxcclxuICBzdHlsZXM6IFtcclxuICBgXHJcbiAgLnRydS1kYXRhLWdyaWQtc2VsZWN0LWFsbC1pY29uIHtcclxuICAgIGZvbnQtc2l6ZTogMjhweDtcclxuICAgIGNvbG9yOiAjZGRkZGRkO1xyXG4gICAgLW1zLXRyYW5zZm9ybTogcm90YXRlKC00NWRlZyk7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKC00NWRlZyk7XHJcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgtNDVkZWcpO1xyXG4gICAgZmxvYXQ6IHJpZ2h0O1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgcmlnaHQ6IDVweDtcclxuICAgIHotaW5kZXg6IDEwMDtcclxuICB9XHJcbiAgYFxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFRydURhdGFHcmlkUmVmSGVhZGVyIGltcGxlbWVudHMgSUhlYWRlckFuZ3VsYXJDb21wIHtcclxuICBwdWJsaWMgcGFyYW1zITogSUhlYWRlclBhcmFtcztcclxuXHJcbiAgYWdJbml0KHBhcmFtczogSUhlYWRlclBhcmFtcyk6IHZvaWQge1xyXG4gICAgdGhpcy5wYXJhbXMgPSBwYXJhbXM7XHJcbiAgfVxyXG5cclxuICByZWZyZXNoKHBhcmFtczogSUhlYWRlclBhcmFtcykge1xyXG4gICAgcmV0dXJuIGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgb25TZWxlY3RBbGxJY29uQ2xpY2tlZCgpIHtcclxuICAgIHRoaXMucGFyYW1zLmFwaS5zZWxlY3RBbGwoKTtcclxuICB9XHJcbn1cclxuIl19
69
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJ1LWRhdGEtZ3JpZC1yZWYtaGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHJ1LWNvbW1vbi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtZ3JpZC9oZWFkZXJzL3RydS1kYXRhLWdyaWQtcmVmLWhlYWRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUF3Q3ZELE1BQU0sT0FBTyxvQkFBb0I7SUFDeEIsTUFBTSxDQUFpQjtJQUN2QixPQUFPLEdBQUcsVUFBVSxDQUFDO0lBQ3JCLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDdEIsTUFBTSxHQUFHLFVBQVUsQ0FBQztJQUUzQixNQUFNLENBQUMsTUFBcUI7UUFDMUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7UUFDckIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxPQUFPLENBQUMsTUFBcUI7UUFDM0IsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLFVBQVUsQ0FBQztRQUN4RCxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLGVBQWUsRUFBRSxFQUFFO1lBQ3hDLElBQUksQ0FBQyxPQUFPLEdBQUcsUUFBUSxDQUFDO1NBQ3pCO2FBQU0sSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsRUFBRSxFQUFFO1lBQ2hELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1NBQzFCO2FBQU07WUFDTCxJQUFJLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFFRCxlQUFlLENBQUMsS0FBNEIsRUFBRSxLQUFVO1FBQ3RELElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVELHNCQUFzQjtRQUNwQixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUM5QixDQUFDO3VHQWhDVSxvQkFBb0I7MkZBQXBCLG9CQUFvQix3RUFqQ3JCOzs7Ozs7Ozs7Ozs7O1NBYUgsOFBBZEcsSUFBSSw0RkFBVyxhQUFhOzsyRkFrQzNCLG9CQUFvQjtrQkFwQ2hDLFNBQVM7aUNBQ0ksSUFBSSxXQUNQLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxhQUFhLENBQUMsWUFDN0I7Ozs7Ozs7Ozs7Ozs7U0FhSCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nQ2xhc3MsIE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xyXG5pbXBvcnQgeyBJSGVhZGVyQW5ndWxhckNvbXAgfSBmcm9tICdhZy1ncmlkLWFuZ3VsYXInO1xyXG5pbXBvcnQgeyBJSGVhZGVyUGFyYW1zIH0gZnJvbSAnYWctZ3JpZC1jb21tdW5pdHknO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbTmdJZiwgTmdDbGFzcywgTWF0SWNvbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICA8ZGl2IGNsYXNzPVwiYWctY2VsbC1sYWJlbC1jb250YWluZXJcIiByb2xlPVwicHJlc2VudGF0aW9uXCI+XHJcbiAgICA8ZGl2IHJlZj1cImVMYWJlbFwiIGNsYXNzPVwiYWctaGVhZGVyLWNlbGwtbGFiZWxcIiByb2xlPVwicHJlc2VudGF0aW9uXCI+XHJcbiAgICAgICAgPHNwYW4gcmVmPVwiZVRleHRcIiBjbGFzcz1cImFnLWhlYWRlci1jZWxsLXRleHRcIj57e3BhcmFtcy5kaXNwbGF5TmFtZX19PC9zcGFuPlxyXG4gICAgICAgIDxzcGFuIHJlZj1cImVTb3J0T3JkZXJcIiBjbGFzcz1cImFnLWhlYWRlci1pY29uIGFnLWhlYWRlci1sYWJlbC1pY29uIGFnLXNvcnQtb3JkZXJcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L3NwYW4+XHJcbiAgICAgICAgPHNwYW4gKm5nSWY9XCJhc2NTb3J0ID09PSAnYWN0aXZlJ1wiIHJlZj1cImVTb3J0QXNjXCIgY2xhc3M9XCJhZy1oZWFkZXItaWNvbiBhZy1oZWFkZXItbGFiZWwtaWNvbiBhZy1zb3J0LWFzY2VuZGluZy1pY29uXCIgKGNsaWNrKT1cIm9uU29ydFJlcXVlc3RlZCgnYXNjJywgJGV2ZW50KVwiPjwvc3Bhbj5cclxuICAgICAgICA8c3BhbiAqbmdJZj1cImRlc2NTb3J0ID09PSAnYWN0aXZlJ1wiIHJlZj1cImVTb3J0RGVzY1wiIGNsYXNzPVwiYWctaGVhZGVyLWljb24gYWctaGVhZGVyLWxhYmVsLWljb24gYWctc29ydC1kZXNjZW5kaW5nLWljb25cIiAoY2xpY2spPVwib25Tb3J0UmVxdWVzdGVkKCdkZXNjJywgJGV2ZW50KVwiPjwvc3Bhbj5cclxuICAgICAgICA8c3BhbiAqbmdJZj1cIm5vU29ydCA9PT0gJ2FjdGl2ZSdcIiByZWY9XCJlU29ydE5vbmVcIiBjbGFzcz1cImFnLWhlYWRlci1pY29uIGFnLWhlYWRlci1sYWJlbC1pY29uIGFnLXNvcnQtbm9uZS1pY29uXCIgKGNsaWNrKT1cIm9uU29ydFJlcXVlc3RlZChudWxsLCAkZXZlbnQpXCI+PC9zcGFuPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8bWF0LWljb24gW3N2Z0ljb25dPVwiJ3NlbGVjdC1hbGwtaWNvbidcIlxyXG4gICAgICAoY2xpY2spPVwib25TZWxlY3RBbGxJY29uQ2xpY2tlZCgpXCJcclxuICAgICAgY2xhc3M9XCJ0cnUtZGF0YS1ncmlkLXNlbGVjdC1hbGwtaWNvblwiXHJcbiAgICAgIHRpdGxlPVwiU2VsZWN0IEFsbCAoQ3RybCtBKVwiPjwvbWF0LWljb24+XHJcbiAgPC9kaXY+YCxcclxuICBzdHlsZXM6IFtcclxuICBgXHJcbiAgLnRydS1kYXRhLWdyaWQtc2VsZWN0LWFsbC1pY29uIHtcclxuICAgIHdpZHRoOiAxNnB4O1xyXG4gICAgZm9udC1zaXplOiAyOHB4O1xyXG4gICAgY29sb3I6ICNkZGQ7XHJcbiAgICBmbG9hdDogcmlnaHQ7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICB0b3A6IC0xcHg7XHJcbiAgICByaWdodDogNXB4O1xyXG4gICAgcmlnaHQ6IDJweDtcclxuICAgIHotaW5kZXg6IDEwMDtcclxuICB9XHJcbiAgLnRydS1kYXRhLWdyaWQtc2VsZWN0LWFsbC1pY29uIHBhdGgge1xyXG4gICAgZmlsbDogbGlnaHRncmF5O1xyXG4gIH1cclxuICBgXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVHJ1RGF0YUdyaWRSZWZIZWFkZXIgaW1wbGVtZW50cyBJSGVhZGVyQW5ndWxhckNvbXAge1xyXG4gIHB1YmxpYyBwYXJhbXMhOiBJSGVhZGVyUGFyYW1zO1xyXG4gIHB1YmxpYyBhc2NTb3J0ID0gJ2luYWN0aXZlJztcclxuICBwdWJsaWMgZGVzY1NvcnQgPSAnaW5hY3RpdmUnO1xyXG4gIHB1YmxpYyBub1NvcnQgPSAnaW5hY3RpdmUnO1xyXG5cclxuICBhZ0luaXQocGFyYW1zOiBJSGVhZGVyUGFyYW1zKTogdm9pZCB7XHJcbiAgICB0aGlzLnBhcmFtcyA9IHBhcmFtcztcclxuICAgIHRoaXMub25Tb3J0Q2hhbmdlZCgpO1xyXG4gIH1cclxuXHJcbiAgcmVmcmVzaChwYXJhbXM6IElIZWFkZXJQYXJhbXMpIHtcclxuICAgIHJldHVybiBmYWxzZTtcclxuICB9XHJcblxyXG4gIG9uU29ydENoYW5nZWQoKSB7XHJcbiAgICB0aGlzLmFzY1NvcnQgPSB0aGlzLmRlc2NTb3J0ID0gdGhpcy5ub1NvcnQgPSAnaW5hY3RpdmUnO1xyXG4gICAgaWYgKHRoaXMucGFyYW1zLmNvbHVtbi5pc1NvcnRBc2NlbmRpbmcoKSkge1xyXG4gICAgICB0aGlzLmFzY1NvcnQgPSAnYWN0aXZlJztcclxuICAgIH0gZWxzZSBpZiAodGhpcy5wYXJhbXMuY29sdW1uLmlzU29ydERlc2NlbmRpbmcoKSkge1xyXG4gICAgICB0aGlzLmRlc2NTb3J0ID0gJ2FjdGl2ZSc7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLm5vU29ydCA9ICdhY3RpdmUnO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25Tb3J0UmVxdWVzdGVkKG9yZGVyOiAnYXNjJyB8ICdkZXNjJyB8IG51bGwsIGV2ZW50OiBhbnkpIHtcclxuICAgIHRoaXMucGFyYW1zLnNldFNvcnQob3JkZXIsIGV2ZW50LnNoaWZ0S2V5KTtcclxuICB9XHJcblxyXG4gIG9uU2VsZWN0QWxsSWNvbkNsaWNrZWQoKSB7XHJcbiAgICB0aGlzLnBhcmFtcy5hcGkuc2VsZWN0QWxsKCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
@@ -2714,12 +2714,31 @@ var TruDataGridTypes;
2714
2714
 
2715
2715
  class TruDataGridRefHeader {
2716
2716
  params;
2717
+ ascSort = 'inactive';
2718
+ descSort = 'inactive';
2719
+ noSort = 'inactive';
2717
2720
  agInit(params) {
2718
2721
  this.params = params;
2722
+ this.onSortChanged();
2719
2723
  }
2720
2724
  refresh(params) {
2721
2725
  return false;
2722
2726
  }
2727
+ onSortChanged() {
2728
+ this.ascSort = this.descSort = this.noSort = 'inactive';
2729
+ if (this.params.column.isSortAscending()) {
2730
+ this.ascSort = 'active';
2731
+ }
2732
+ else if (this.params.column.isSortDescending()) {
2733
+ this.descSort = 'active';
2734
+ }
2735
+ else {
2736
+ this.noSort = 'active';
2737
+ }
2738
+ }
2739
+ onSortRequested(order, event) {
2740
+ this.params.setSort(order, event.shiftKey);
2741
+ }
2723
2742
  onSelectAllIconClicked() {
2724
2743
  this.params.api.selectAll();
2725
2744
  }
@@ -2728,12 +2747,16 @@ class TruDataGridRefHeader {
2728
2747
  <div class="ag-cell-label-container" role="presentation">
2729
2748
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
2730
2749
  <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
2750
+ <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
2751
+ <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" (click)="onSortRequested('asc', $event)"></span>
2752
+ <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" (click)="onSortRequested('desc', $event)"></span>
2753
+ <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" (click)="onSortRequested(null, $event)"></span>
2731
2754
  </div>
2732
2755
  <mat-icon [svgIcon]="'select-all-icon'"
2733
2756
  (click)="onSelectAllIconClicked()"
2734
2757
  class="tru-data-grid-select-all-icon"
2735
2758
  title="Select All (Ctrl+A)"></mat-icon>
2736
- </div>`, isInline: true, styles: [".tru-data-grid-select-all-icon{font-size:28px;color:#ddd;transform:rotate(-45deg);float:right;position:absolute;top:0;right:5px;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
2759
+ </div>`, isInline: true, styles: [".tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:2px;z-index:100}.tru-data-grid-select-all-icon path{fill:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
2737
2760
  }
2738
2761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TruDataGridRefHeader, decorators: [{
2739
2762
  type: Component,
@@ -2741,12 +2764,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
2741
2764
  <div class="ag-cell-label-container" role="presentation">
2742
2765
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
2743
2766
  <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
2767
+ <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
2768
+ <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" (click)="onSortRequested('asc', $event)"></span>
2769
+ <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" (click)="onSortRequested('desc', $event)"></span>
2770
+ <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" (click)="onSortRequested(null, $event)"></span>
2744
2771
  </div>
2745
2772
  <mat-icon [svgIcon]="'select-all-icon'"
2746
2773
  (click)="onSelectAllIconClicked()"
2747
2774
  class="tru-data-grid-select-all-icon"
2748
2775
  title="Select All (Ctrl+A)"></mat-icon>
2749
- </div>`, styles: [".tru-data-grid-select-all-icon{font-size:28px;color:#ddd;transform:rotate(-45deg);float:right;position:absolute;top:0;right:5px;z-index:100}\n"] }]
2776
+ </div>`, styles: [".tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:2px;z-index:100}.tru-data-grid-select-all-icon path{fill:#d3d3d3}\n"] }]
2750
2777
  }] });
2751
2778
 
2752
2779
  class TruDataGridUtil {