@trudb/tru-common-lib 0.1.969 → 0.1.971

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

@@ -3348,6 +3348,12 @@ const SELECT_ALL_ICON = `
   <svg height="20px" fill="#000000" width="20px" x="0px" y="0px" viewBox="0 -10 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M99,99H2.598L99,2.598V99z"/></g></svg>
 `;
 const DESC_SORT_ICON = `
+  <svg height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M480-96 216-360l51-51 177 177v-630h72v630l177-177 51 51L480-96Z"/></svg>
+`;
+const ASC_SORT_ICON = `
+  <svg height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M444-144v-534l-57 57-51-51 144-144 144 144-51 51-57-57v534h-72Z"/></svg>
+`;
+const DESC_SORT_MENU_ICON = `
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
   <!-- "Z" shape in gray -->
   <text x="2" y="8" font-family="Segoe UI, Arial" font-size="7" fill="#444" font-weight="bold">Z</text>
@@ -3358,7 +3364,7 @@ const DESC_SORT_ICON = `
   <path d="M10.5 12L12.5 14L14.5 12" stroke="#444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-const ASC_SORT_ICON = `
+const ASC_SORT_MENU_ICON = `
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
   <!-- A -->
   <text x="2" y="8" font-family="Segoe UI, Arial" font-size="7" fill="#1976D2" font-weight="bold">A</text>
@@ -3417,6 +3423,8 @@ class TruIconModule {
         iconRegistry.addSvgIconLiteral("select-all-icon", sanitizer.bypassSecurityTrustHtml(SELECT_ALL_ICON));
         iconRegistry.addSvgIconLiteral("asc-sort-icon", sanitizer.bypassSecurityTrustHtml(ASC_SORT_ICON));
         iconRegistry.addSvgIconLiteral("desc-sort-icon", sanitizer.bypassSecurityTrustHtml(DESC_SORT_ICON));
+        iconRegistry.addSvgIconLiteral("asc-sort-menu-icon", sanitizer.bypassSecurityTrustHtml(ASC_SORT_MENU_ICON));
+        iconRegistry.addSvgIconLiteral("desc-sort-menu-icon", sanitizer.bypassSecurityTrustHtml(DESC_SORT_MENU_ICON));
         iconRegistry.addSvgIconLiteral("no-sort-icon", sanitizer.bypassSecurityTrustHtml(NO_SORT_ICON));
         iconRegistry.addSvgIconLiteral("filter-icon", sanitizer.bypassSecurityTrustHtml(FILTER_ICON));
         iconRegistry.addSvgIconLiteral("change-password-icon", sanitizer.bypassSecurityTrustHtml(CHANGE_PASSWORD_ICON));
@@ -5900,18 +5908,15 @@ var TruDataGridTypes;
 class TruDataGridHeader {
     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.params.api.addEventListener('cellFocused', this.onCellFocused.bind(this));
-        this.onSortChanged();
     }
     getHeaderParams() {
         return this.params;
@@ -5919,31 +5924,6 @@ class TruDataGridHeader {
     refresh(params) {
         return false;
     }
-    onSortChanged() {
-        this.ascSort = this.descSort = this.noSort = 'inactive';
-        if (this.params.column.isSortAscending()) {
-            this.ascSort = 'active';
-        }
-        else if (this.params.column.isSortDescending()) {
-            this.descSort = 'active';
-        }
-        else {
-            this.noSort = 'active';
-        }
-    }
-    onSortRequested(event) {
-        var order = null;
-        if (this.params.column.isSortAscending()) {
-            order = 'desc';
-        }
-        else if (this.params.column.isSortDescending()) {
-            order = null;
-        }
-        else {
-            order = 'asc';
-        }
-        this.params.setSort(order, event.shiftKey);
-    }
     onSelectAllIconClicked() {
         this.params.api.selectAll();
     }
@@ -5968,6 +5948,8 @@ class TruDataGridHeader {
                 this.columnMenuIsOpen = false;
                 this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive();
                 this.filterIsActive = this.params.column.isFilterActive();
+                this.ascSort = this.params.column.isSortAscending();
+                this.descSort = this.params.column.isSortDescending();
             });
             this.columnMenuIsOpen = true;
         }
@@ -5987,7 +5969,6 @@ class TruDataGridHeader {
         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: TruDataGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -6000,13 +5981,15 @@ class TruDataGridHeader {
         </div>
         <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;"></mat-icon>
-            <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive;"></mat-icon>
+            <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>
     </div>
-  </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}.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"] }] });
+  </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}.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{display:table;position:relative}::ng-deep .ag-filter-icon .ag-header-asc.filtering{right:-5px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{right:-5px}::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: "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: TruDataGridHeader, decorators: [{
             type: Component,
@@ -6019,13 +6002,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
         </div>
         <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;"></mat-icon>
-            <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive;"></mat-icon>
+            <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>
     </div>
-  </div>`, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px;width:20px;height:20px}.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"] }]
+  </div>`, styles: [".ag-header-control-container{display:flex}.ag-header-control-filter-container{position:absolute;top:1px;right:3px;width:20px;height:20px}.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{display:table;position:relative}::ng-deep .ag-filter-icon .ag-header-asc.filtering{right:-5px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{right:-5px}::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"] }]
         }], propDecorators: { headerRef: [{
                 type: ViewChild,
                 args: ['header', { static: false }]
@@ -6047,14 +6032,14 @@ class TruDataGridHeaderFilter {
                 label: 'Sort A to Z',
                 selected: false,
                 display: () => { return !this.filterParams.column.isSortAscending(); },
-                icon: 'asc-sort-icon'
+                icon: 'asc-sort-menu-icon'
             },
             {
                 value: 'desc',
                 label: 'Sort Z to A',
                 selected: false,
                 display: () => { return !this.filterParams.column.isSortDescending(); },
-                icon: 'desc-sort-icon'
+                icon: 'desc-sort-menu_icon'
             },
             {
                 value: null,