@trudb/tru-common-lib 0.1.950 → 0.1.953

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

@@ -5901,6 +5901,7 @@ class TruDataGridHeader {
     noSort = 'inactive';
     isHovering = false;
     columnMenuIsOpen = false;
+    showFilterMenu = false;
     agInit(params) {
         this.params = params;
         this.params.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
@@ -5955,6 +5956,7 @@ class TruDataGridHeader {
     onFilterMenuButtonClicked(event) {
         if (!this.columnMenuIsOpen) {
             this.params.showColumnMenu(event.target, () => {
+                this.columnMenuIsOpen = false;
             });
             this.columnMenuIsOpen = true;
         }
@@ -5963,6 +5965,14 @@ class TruDataGridHeader {
             this.columnMenuIsOpen = false;
         }
     }
+    onHeaderMouseEnter(event) {
+        this.isHovering = true;
+        this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen;
+    }
+    onHeaderMouseLeave(event) {
+        this.isHovering = false;
+        this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen;
+    }
     ngOnDestroy() {
         this.params.column.removeEventListener('sortChanged', this.onSortChanged.bind(this));
         this.params.api.removeEventListener('cellFocused', this.onCellFocused.bind(this));
@@ -5970,30 +5980,30 @@ class TruDataGridHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruDataGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TruDataGridHeader, 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" (mouseenter)="isHovering = true" (mouseleave)="isHovering = false">
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" (mouseenter)="onHeaderMouseEnter($event)" (mouseleave)="onHeaderMouseLeave($event)">
         <div class="ag-header-control-container">
           <div>
             <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
           </div>
-          <div class="ag-header-control-filter-container">
+          <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
             <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
               <mat-icon [svgIcon]="'more-icon'"></mat-icon>
             </span>
           </div>
         </div>
     </div>
-  </div>`, isInline: true, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px}.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}.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: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 .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}::ng-deep .ag-header-control-filter-container mat-icon{height:20px!important;width:20px!important;padding-top:2px!important}::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}\n"], dependencies: [{ 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"] }] });
+  </div>`, isInline: true, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px}.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}.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: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 .tru-data-grid-select-all-icon path{fill:#d3d3d3;position:relative;z-index:100;pointer-events:all}::ng-deep .ag-header-control-filter-container mat-icon{height:20px!important;width:20px!important;padding-top:2px!important}::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}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TruDataGridHeader, decorators: [{
             type: Component,
             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" (mouseenter)="isHovering = true" (mouseleave)="isHovering = false">
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" (mouseenter)="onHeaderMouseEnter($event)" (mouseleave)="onHeaderMouseLeave($event)">
         <div class="ag-header-control-container">
           <div>
             <span ref="eText" class="ag-header-cell-text">{{params.displayName}}</span>
           </div>
-          <div class="ag-header-control-filter-container">
+          <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
             <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
               <mat-icon [svgIcon]="'more-icon'"></mat-icon>
             </span>