@trudb/tru-common-lib 0.1.973 → 0.1.974

package/fesm2022/trudb-tru-common-lib.mjs

@@ -5946,10 +5946,10 @@ class TruDataGridHeader {
             this.params.column.getColDef().headerComponentParams = this.params;
             this.params.showColumnMenu(event.target, () => {
                 this.columnMenuIsOpen = false;
-                this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
                 this.filterIsActive = this.params.column.isFilterActive();
                 this.ascSort = this.params.column.isSortAscending();
                 this.descSort = this.params.column.isSortDescending();
+                this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
             });
             this.columnMenuIsOpen = true;
         }
@@ -6154,78 +6154,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class TruDataGridRefHeader {
+    headerRef;
     params;
-    ascSort = 'inactive';
-    descSort = 'inactive';
-    noSort = 'inactive';
+    ascSort = false;
+    descSort = false;
+    isHovering = false;
+    columnMenuIsOpen = false;
+    showFilterMenu = false;
+    filterIsActive = false;
     agInit(params) {
         this.params = params;
-        this.params.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
-        this.onSortChanged();
+        this.params.api.addEventListener('cellFocused', this.onCellFocused.bind(this));
+    }
+    getHeaderParams() {
+        return this.params;
     }
     refresh(params) {
         return false;
     }
-    onSortChanged() {
-        this.ascSort = this.descSort = this.noSort = 'inactive';
-        if (this.params.column.isSortAscending()) {
-            this.ascSort = 'active';
+    onSelectAllIconClicked() {
+        this.params.api.selectAll();
+    }
+    onCellFocused(event) {
+        var column = event.column;
+        if (column?.getColDef().pinned) {
+            this.headerRef.nativeElement.classList.add('ag-column-focus');
         }
-        else if (this.params.column.isSortDescending()) {
-            this.descSort = 'active';
+        else {
+            if (this.params.column.getColId() === column.getColId()) {
+                this.headerRef.nativeElement.classList.add('ag-column-focus');
+            }
+            else {
+                this.headerRef.nativeElement.classList.remove('ag-column-focus');
+            }
+        }
+    }
+    onFilterMenuButtonClicked(event) {
+        if (!this.columnMenuIsOpen) {
+            this.params.column.getColDef().headerComponentParams = this.params;
+            this.params.showColumnMenu(event.target, () => {
+                this.columnMenuIsOpen = false;
+                this.filterIsActive = this.params.column.isFilterActive();
+                this.ascSort = this.params.column.isSortAscending();
+                this.descSort = this.params.column.isSortDescending();
+                this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
+            });
+            this.columnMenuIsOpen = true;
         }
         else {
-            this.noSort = 'active';
+            this.params.api.hidePopupMenu();
+            this.columnMenuIsOpen = false;
         }
     }
-    onSortRequested(order, event) {
-        this.params.setSort(order, event.shiftKey);
+    onHeaderMouseEnter(event) {
+        this.isHovering = true;
+        this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
+        this.filterIsActive = this.params.column.isFilterActive();
     }
-    onSelectAllIconClicked() {
-        this.params.api.selectAll();
+    onHeaderMouseLeave(event) {
+        this.isHovering = false;
+        this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
+        this.filterIsActive = this.params.column.isFilterActive();
     }
     ngOnDestroy() {
-        this.params.column.removeEventListener('sortChanged', this.onSortChanged.bind(this));
+        this.params.api.removeEventListener('cellFocused', this.onCellFocused.bind(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruDataGridRefHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TruDataGridRefHeader, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TruDataGridRefHeader, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: `
   <div #header class="ag-cell-label-container" role="presentation">
-    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" (mouseenter)="onHeaderMouseEnter($event)" (mouseleave)="onHeaderMouseLeave($event)">
         <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
-        <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-ascending-icon" (click)="onSortRequested('desc', $event)">
-          <mat-icon [svgIcon]="'sort-icon'"></mat-icon>
-        </span>
-        <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-descending-icon" (click)="onSortRequested(null, $event)">
-          <mat-icon [svgIcon]="'sort-icon'"></mat-icon>
-        </span>
-        <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-none-icon" (click)="onSortRequested('asc', $event)"></span>
+        <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
+          <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
+            <mat-icon class="ag-header-more" [svgIcon]="'more-icon'" *ngIf="!filterIsActive && !ascSort && !descSort"></mat-icon>
+            <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="ascSort"></mat-icon>
+            <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="descSort"></mat-icon>
+            <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive"></mat-icon>
+          </span>
+        </div>
     </div>
     <mat-icon [svgIcon]="'select-all-icon'"
       (click)="onSelectAllIconClicked()"
       class="tru-data-grid-select-all-icon"
       title="Select All (Ctrl+A)"></mat-icon>
-  </div>`, isInline: true, styles: [".ag-sort-icon{height:100%;width:100%}.tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:4px}.ag-sort-icon mat-icon{height:20px;width:16px;padding-top:4px}::ng-deep .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}\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"] }] });
+  </div>`, isInline: true, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px;width:20px;height:20px;display:table}.ag-header-cell-text{position:relative;pointer-events:none;vertical-align:middle;vertical-align:-webkit-baseline-middle}.ag-sort-icon{height:100%;width:100%;margin-left:0!important}.ag-sort-icon mat-icon{height:16px;width:16px;padding-top:4px}.ag-column-focus .ag-header-cell-text{color:#3f51b5;font-weight:700}.ag-column-focus{background-color:#ddd;border-bottom:1px solid #3f51b5}::ng-deep .ag-header-control-filter-container mat-icon{height:20px!important;width:20px!important;padding-top:2px!important}::ng-deep .ag-filter-icon .ag-header-asc.filtering{position:relative;right:-7px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{position:relative;right:-7px}::ng-deep .ag-filter-icon mat-icon{height:18px!important;width:18px!important;color:#ddd}::ng-deep .ag-filter-icon mat-icon svg{fill:#949494!important}.tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:4px}::ng-deep .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruDataGridRefHeader, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, NgClass, MatIconModule], template: `
+            args: [{ standalone: true, imports: [NgIf, NgClass, CommonModule, MatIconModule], template: `
   <div #header class="ag-cell-label-container" role="presentation">
-    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" (mouseenter)="onHeaderMouseEnter($event)" (mouseleave)="onHeaderMouseLeave($event)">
         <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
-        <span *ngIf="ascSort === 'active'" ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-ascending-icon" (click)="onSortRequested('desc', $event)">
-          <mat-icon [svgIcon]="'sort-icon'"></mat-icon>
-        </span>
-        <span *ngIf="descSort === 'active'" ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-descending-icon" (click)="onSortRequested(null, $event)">
-          <mat-icon [svgIcon]="'sort-icon'"></mat-icon>
-        </span>
-        <span *ngIf="noSort === 'active'" ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-icon ag-sort-none-icon" (click)="onSortRequested('asc', $event)"></span>
+        <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
+          <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
+            <mat-icon class="ag-header-more" [svgIcon]="'more-icon'" *ngIf="!filterIsActive && !ascSort && !descSort"></mat-icon>
+            <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="ascSort"></mat-icon>
+            <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="descSort"></mat-icon>
+            <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive"></mat-icon>
+          </span>
+        </div>
     </div>
     <mat-icon [svgIcon]="'select-all-icon'"
       (click)="onSelectAllIconClicked()"
       class="tru-data-grid-select-all-icon"
       title="Select All (Ctrl+A)"></mat-icon>
-  </div>`, styles: [".ag-sort-icon{height:100%;width:100%}.tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:4px}.ag-sort-icon mat-icon{height:20px;width:16px;padding-top:4px}::ng-deep .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}\n"] }]
-        }] });
+  </div>`, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px;width:20px;height:20px;display:table}.ag-header-cell-text{position:relative;pointer-events:none;vertical-align:middle;vertical-align:-webkit-baseline-middle}.ag-sort-icon{height:100%;width:100%;margin-left:0!important}.ag-sort-icon mat-icon{height:16px;width:16px;padding-top:4px}.ag-column-focus .ag-header-cell-text{color:#3f51b5;font-weight:700}.ag-column-focus{background-color:#ddd;border-bottom:1px solid #3f51b5}::ng-deep .ag-header-control-filter-container mat-icon{height:20px!important;width:20px!important;padding-top:2px!important}::ng-deep .ag-filter-icon .ag-header-asc.filtering{position:relative;right:-7px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{position:relative;right:-7px}::ng-deep .ag-filter-icon mat-icon{height:18px!important;width:18px!important;color:#ddd}::ng-deep .ag-filter-icon mat-icon svg{fill:#949494!important}.tru-data-grid-select-all-icon{width:16px;font-size:28px;color:#ddd;float:right;position:absolute;top:-1px;right:4px}::ng-deep .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}\n"] }]
+        }], propDecorators: { headerRef: [{
+                type: ViewChild,
+                args: ['header', { static: false }]
+            }] } });
 
 class TruDataGridUtil {
     getColumnIndexByColId = (api, colId) => {