@trudb/tru-common-lib 0.1.970 → 0.1.972

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 (3) hide show
  1. package/fesm2022/trudb-tru-common-lib.mjs +35 -11
  2. package/fesm2022/trudb-tru-common-lib.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/trudb-tru-common-lib.mjs CHANGED
@@ -3353,6 +3353,28 @@ const DESC_SORT_ICON = `
3353
3353
  const ASC_SORT_ICON = `
3354
3354
  <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>
3355
3355
  `;
3356
+ const DESC_SORT_MENU_ICON = `
3357
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
3358
+ <!-- "Z" shape in gray -->
3359
+ <text x="2" y="8" font-family="Segoe UI, Arial" font-size="7" fill="#444" font-weight="bold">Z</text>
3360
+ <!-- "A" shape in blue -->
3361
+ <text x="2" y="15" font-family="Segoe UI, Arial" font-size="7" fill="#1976D2" font-weight="bold">A</text>
3362
+ <!-- Downward arrow in gray -->
3363
+ <path d="M12.5 3V14" stroke="#444" stroke-width="1.5" stroke-linecap="round"/>
3364
+ <path d="M10.5 12L12.5 14L14.5 12" stroke="#444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3365
+ </svg>
3366
+ `;
3367
+ const ASC_SORT_MENU_ICON = `
3368
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
3369
+ <!-- A -->
3370
+ <text x="2" y="8" font-family="Segoe UI, Arial" font-size="7" fill="#1976D2" font-weight="bold">A</text>
3371
+ <!-- Z -->
3372
+ <text x="2" y="16" font-family="Segoe UI, Arial" font-size="7" fill="#444" font-weight="bold">Z</text>
3373
+ <!-- Down Arrow -->
3374
+ <line x1="12.5" y1="3" x2="12.5" y2="14" stroke="#444" stroke-width="1.5" stroke-linecap="round"/>
3375
+ <polyline points="10,12 12.5,15 15,12" fill="none" stroke="#444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3376
+ </svg>
3377
+ `;
3356
3378
  const NO_SORT_ICON = `
3357
3379
  <svg height="20px" viewBox="0 -960 960 960" width="20px" fill="#949494">
3358
3380
  <path d="M480-96q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Zm0-72q55 0 104-18t89-50L236-673q-32 40-50 89t-18 104q0 130 91 221t221 91Zm244-119q32-40 50-89t18-104q0-130-91-221t-221-91q-55 0-104 18t-89 50l437 437Z"/>
@@ -3401,6 +3423,8 @@ class TruIconModule {
3401
3423
  iconRegistry.addSvgIconLiteral("select-all-icon", sanitizer.bypassSecurityTrustHtml(SELECT_ALL_ICON));
3402
3424
  iconRegistry.addSvgIconLiteral("asc-sort-icon", sanitizer.bypassSecurityTrustHtml(ASC_SORT_ICON));
3403
3425
  iconRegistry.addSvgIconLiteral("desc-sort-icon", sanitizer.bypassSecurityTrustHtml(DESC_SORT_ICON));
3426
+ iconRegistry.addSvgIconLiteral("asc-sort-menu-icon", sanitizer.bypassSecurityTrustHtml(ASC_SORT_MENU_ICON));
3427
+ iconRegistry.addSvgIconLiteral("desc-sort-menu-icon", sanitizer.bypassSecurityTrustHtml(DESC_SORT_MENU_ICON));
3404
3428
  iconRegistry.addSvgIconLiteral("no-sort-icon", sanitizer.bypassSecurityTrustHtml(NO_SORT_ICON));
3405
3429
  iconRegistry.addSvgIconLiteral("filter-icon", sanitizer.bypassSecurityTrustHtml(FILTER_ICON));
3406
3430
  iconRegistry.addSvgIconLiteral("change-password-icon", sanitizer.bypassSecurityTrustHtml(CHANGE_PASSWORD_ICON));
@@ -5922,7 +5946,7 @@ class TruDataGridHeader {
5922
5946
  this.params.column.getColDef().headerComponentParams = this.params;
5923
5947
  this.params.showColumnMenu(event.target, () => {
5924
5948
  this.columnMenuIsOpen = false;
5925
- this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive();
5949
+ this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
5926
5950
  this.filterIsActive = this.params.column.isFilterActive();
5927
5951
  this.ascSort = this.params.column.isSortAscending();
5928
5952
  this.descSort = this.params.column.isSortDescending();
@@ -5936,12 +5960,12 @@ class TruDataGridHeader {
5936
5960
  }
5937
5961
  onHeaderMouseEnter(event) {
5938
5962
  this.isHovering = true;
5939
- this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive();
5963
+ this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
5940
5964
  this.filterIsActive = this.params.column.isFilterActive();
5941
5965
  }
5942
5966
  onHeaderMouseLeave(event) {
5943
5967
  this.isHovering = false;
5944
- this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive();
5968
+ this.showFilterMenu = this.isHovering && this.params.api.getDisplayedRowCount() > 0 || this.columnMenuIsOpen || this.params.column.isFilterActive() || this.ascSort || this.descSort;
5945
5969
  this.filterIsActive = this.params.column.isFilterActive();
5946
5970
  }
5947
5971
  ngOnDestroy() {
@@ -5958,14 +5982,14 @@ class TruDataGridHeader {
5958
5982
  <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
5959
5983
  <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
5960
5984
  <mat-icon class="ag-header-more" [svgIcon]="'more-icon'" *ngIf="!filterIsActive && !ascSort && !descSort"></mat-icon>
5961
- <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" *ngIf="ascSort"></mat-icon>
5962
- <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" *ngIf="descSort"></mat-icon>
5985
+ <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="ascSort"></mat-icon>
5986
+ <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="descSort"></mat-icon>
5963
5987
  <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive"></mat-icon>
5964
5988
  </span>
5965
5989
  </div>
5966
5990
  </div>
5967
5991
  </div>
5968
- </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"] }] });
5992
+ </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}.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 .ag-header-asc.filtering{position:relative;right:-5px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{position:relative;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"] }] });
5969
5993
  }
5970
5994
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruDataGridHeader, decorators: [{
5971
5995
  type: Component,
@@ -5979,14 +6003,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
5979
6003
  <div class="ag-header-control-filter-container" *ngIf="showFilterMenu">
5980
6004
  <span ref="eFilterButton" class="ag-filter-icon" (click)="onFilterMenuButtonClicked($event)">
5981
6005
  <mat-icon class="ag-header-more" [svgIcon]="'more-icon'" *ngIf="!filterIsActive && !ascSort && !descSort"></mat-icon>
5982
- <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" *ngIf="ascSort"></mat-icon>
5983
- <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" *ngIf="descSort"></mat-icon>
6006
+ <mat-icon class="ag-header-asc" [svgIcon]="'asc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="ascSort"></mat-icon>
6007
+ <mat-icon class="ag-header-desc" [svgIcon]="'desc-sort-icon'" [ngClass]="{'filtering': filterIsActive}" *ngIf="descSort"></mat-icon>
5984
6008
  <mat-icon class="ag-header-filter" [svgIcon]="'filter-icon'" *ngIf="filterIsActive"></mat-icon>
5985
6009
  </span>
5986
6010
  </div>
5987
6011
  </div>
5988
6012
  </div>
5989
- </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"] }]
6013
+ </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}.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 .ag-header-asc.filtering{position:relative;right:-5px}::ng-deep .ag-filter-icon .ag-header-desc.filtering{position:relative;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"] }]
5990
6014
  }], propDecorators: { headerRef: [{
5991
6015
  type: ViewChild,
5992
6016
  args: ['header', { static: false }]
@@ -6008,14 +6032,14 @@ class TruDataGridHeaderFilter {
6008
6032
  label: 'Sort A to Z',
6009
6033
  selected: false,
6010
6034
  display: () => { return !this.filterParams.column.isSortAscending(); },
6011
- icon: 'asc-sort-icon'
6035
+ icon: 'asc-sort-menu-icon'
6012
6036
  },
6013
6037
  {
6014
6038
  value: 'desc',
6015
6039
  label: 'Sort Z to A',
6016
6040
  selected: false,
6017
6041
  display: () => { return !this.filterParams.column.isSortDescending(); },
6018
- icon: 'desc-sort-icon'
6042
+ icon: 'desc-sort-menu-icon'
6019
6043
  },
6020
6044
  {
6021
6045
  value: null,