@trudb/tru-common-lib 0.1.954 → 0.1.956

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

@@ -6021,32 +6021,35 @@ class TruDataGridHeaderFilter {
     filterParams;
     gui;
     filterText = '';
-    typesOfSort = [
-        {
-            value: 'asc',
-            label: 'Sort A to Z',
-            selected: false,
-            display: true,
-            icon: 'asc-sort-icon'
-        },
-        {
-            value: 'desc',
-            label: 'Sort Z to A',
-            selected: false,
-            display: true,
-            icon: 'desc-sort-icon'
-        },
-        {
-            value: 'clear',
-            label: 'Clear Sort',
-            selected: false,
-            display: true,
-            icon: 'no-sort-icon'
-        }
-    ];
+    typesOfSort = [];
+    values = [];
     filterInputControl = new FormControl('', []);
     constructor() { }
     agInit(params) {
+        this.filterParams = params;
+        this.typesOfSort = [
+            {
+                value: 'asc',
+                label: 'Sort A to Z',
+                selected: false,
+                display: !this.filterParams.column.isSortAscending(),
+                icon: 'asc-sort-icon'
+            },
+            {
+                value: 'desc',
+                label: 'Sort Z to A',
+                selected: false,
+                display: !this.filterParams.column.isSortDescending(),
+                icon: 'desc-sort-icon'
+            },
+            {
+                value: 'clear',
+                label: 'Clear Sort',
+                selected: false,
+                display: this.filterParams.column.isSortAscending() || this.filterParams.column.isSortDescending(),
+                icon: 'no-sort-icon'
+            }
+        ];
     }
     isFilterActive() {
         return this.filterText != null && this.filterText !== '';
@@ -6066,16 +6069,24 @@ class TruDataGridHeaderFilter {
         return { value: this.filterText };
     }
     setModel(model) {
+        this.filterText = model == null ? null : model.value;
     }
     getGui() {
         return this.gui;
     }
     afterGuiAttached() {
     }
+    onFilterInputChanged() {
+        this.filterParams.filterChangedCallback();
+    }
+    onSortSelection = (event) => {
+        let value = event.options[0].value === 'clear' ? null : event.options[0].value;
+        this.filterParams.colDef.headerComponentParams.setSort(value, false);
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruDataGridHeaderFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TruDataGridHeaderFilter, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
   <div class="tru-data-grid-header-filter-container">
-    <mat-selection-list [multiple]="false">
+    <mat-selection-list #sort [multiple]="false" (selectionChange)="onSortSelection($event)">
       @for (typeOfSort of typesOfSort; track typeOfSort.value) {
         <mat-list-option>
           <mat-icon [svgIcon]="typeOfSort.icon"></mat-icon>
@@ -6093,6 +6104,8 @@ class TruDataGridHeaderFilter {
 		  <input #filterInput
 					   matInput
 					   [formControl]="filterInputControl"
+             [(ngModel)]="filterText"
+             (ngModelChange)="onFilterInputChanged()"
 					   type="text" />
 	  </mat-form-field>
   </div>`, isInline: true, styles: [".tru-data-grid-header-filter-container{min-width:200px!important}.tru-data-grid-header-filter-container mdc-list{padding-bottom:10px!important}::ng-deep .tru-data-grid-header-filter-container mat-list-option{padding-left:10px!important}::ng-deep .tru-data-grid-header-filter-container mat-icon{height:18px!important;width:18px!important;padding-right:5px;padding-top:4px}::ng-deep .tru-data-grid-header-filter-container .mdc-list-item__primary-text span{font-size:12px!important;vertical-align:text-bottom}::ng-deep .tru-data-grid-header-filter-container .mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end{display:none!important}::ng-deep .tru-data-grid-header-filter-container mat-divider{padding-top:5px;padding-bottom:5px;margin-left:10px;margin-right:10px}::ng-deep .tru-data-grid-header-filter-container mat-label{margin-left:10px;font-weight:700}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field{display:block!important;margin:0 10px 10px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__leading{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__notch{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__trailing{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-bottom-align:before{content:unset!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 0 5px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 0 5px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-infix{padding:0 0 5px!important;min-height:unset!important}::ng-deep .tru-data-grid-header-filter-search-icon svg{fill:#343434}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
@@ -6117,7 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         ReactiveFormsModule
                     ], template: `
   <div class="tru-data-grid-header-filter-container">
-    <mat-selection-list [multiple]="false">
+    <mat-selection-list #sort [multiple]="false" (selectionChange)="onSortSelection($event)">
       @for (typeOfSort of typesOfSort; track typeOfSort.value) {
         <mat-list-option>
           <mat-icon [svgIcon]="typeOfSort.icon"></mat-icon>
@@ -6135,6 +6148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
 		  <input #filterInput
 					   matInput
 					   [formControl]="filterInputControl"
+             [(ngModel)]="filterText"
+             (ngModelChange)="onFilterInputChanged()"
 					   type="text" />
 	  </mat-form-field>
   </div>`, styles: [".tru-data-grid-header-filter-container{min-width:200px!important}.tru-data-grid-header-filter-container mdc-list{padding-bottom:10px!important}::ng-deep .tru-data-grid-header-filter-container mat-list-option{padding-left:10px!important}::ng-deep .tru-data-grid-header-filter-container mat-icon{height:18px!important;width:18px!important;padding-right:5px;padding-top:4px}::ng-deep .tru-data-grid-header-filter-container .mdc-list-item__primary-text span{font-size:12px!important;vertical-align:text-bottom}::ng-deep .tru-data-grid-header-filter-container .mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end{display:none!important}::ng-deep .tru-data-grid-header-filter-container mat-divider{padding-top:5px;padding-bottom:5px;margin-left:10px;margin-right:10px}::ng-deep .tru-data-grid-header-filter-container mat-label{margin-left:10px;font-weight:700}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field{display:block!important;margin:0 10px 10px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__leading{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__notch{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-flex.invalid .mdc-notched-outline__trailing{border-color:#bd362f}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-bottom-align:before{content:unset!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 0 5px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 0 5px!important}::ng-deep .tru-data-grid-header-filter-container .mat-mdc-form-field-infix{padding:0 0 5px!important;min-height:unset!important}::ng-deep .tru-data-grid-header-filter-search-icon svg{fill:#343434}\n"] }]