ngx-st-tables 17.0.32 → 17.0.33

package/fesm2022/ngx-st-tables.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Inject, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i7$2 from '@angular/material/paginator';
+import * as i7$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i12 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i6$1 from '@angular/material/table';
+import * as i6 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -12,23 +12,23 @@ import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i8 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@angular/material/input';
+import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i7 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { UntypedFormControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i13 from '@angular/material/menu';
+import * as i9$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i14 from '@angular/material/checkbox';
+import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i8$1 from '@angular/material/select';
+import * as i9 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7$1 from '@angular/material/core';
+import * as i7 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i16 from 'ngx-st-date-format';
 import { StDateFormatModule } from 'ngx-st-date-format';
@@ -36,16 +36,17 @@ import { StSubscribeDestroyComponent, StBaseService, StBaseFunctionsModule } fro
 import { takeUntil, distinctUntilChanged, debounceTime, take, filter } from 'rxjs/operators';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i11 from '@angular/material/datepicker';
+import { BehaviorSubject } from 'rxjs';
+import * as i12$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4$1 from '@angular/cdk/drag-drop';
+import * as i5$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import * as i10$1 from '@angular/material/badge';
+import * as i11 from '@angular/material/badge';
 import { MatBadge } from '@angular/material/badge';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$1 from 'ngx-st-snack-bar';
 import { StSnackBarModule } from 'ngx-st-snack-bar';
-import * as i10$2 from '@angular/material/progress-spinner';
+import * as i11$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { InputTextModule } from 'primeng/inputtext';
@@ -129,7 +130,7 @@ class ConfigurationsComponent {
         this.changeConfig.emit(this.selectedConfig?.configId || null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: { configurationsSettings: "configurationsSettings", configurations: "configurations", initSelectedConfig: "initSelectedConfig" }, outputs: { createNewConfig: "createNewConfig", removeConfig: "removeConfig", changeConfig: "changeConfig" }, ngImport: i0, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\r\n  @if (!creatingConfiguration && !removingConfiguration) {\r\n    <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\r\n      <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\r\n      <mat-select\r\n        [(ngModel)]=\"selectedConfig\"\r\n        (ngModelChange)=\"selectedConfigChanged()\"\r\n      >\r\n        <mat-option [value]=\"null\"></mat-option>\r\n        @for (config of configurations; track config) {\r\n          <mat-option [value]=\"config\">{{ config.configName }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"showCreateConfiguration()\"\r\n    >\r\n      <mat-icon> add </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      [disabled]=\"!selectedConfig\"\r\n      (click)=\"deleteConfiguration()\"\r\n    >\r\n      <mat-icon> delete </mat-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (creatingConfiguration) {\r\n    <mat-form-field class=\"col-auto\">\r\n      <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\r\n      <input matInput [(ngModel)]=\"createConfigurationName\" />\r\n    </mat-form-field>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"saveCreateConfiguration()\"\r\n      [disabled]=\"!createConfigurationName\"\r\n    >\r\n      <mat-icon> done </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      (click)=\"hideCreateConfiguration()\"\r\n    >\r\n      <mat-icon> close </mat-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (removingConfiguration) {\r\n    <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\r\n      {{ configurationsSettings.deleteWarningTitle }}\r\n    </p>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"acceptDeleteConfiguration()\"\r\n    >\r\n      <mat-icon> done </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      (click)=\"declineDeleteConfiguration()\"\r\n    >\r\n      <mat-icon> close </mat-icon>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], dependencies: [{ kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: { configurationsSettings: "configurationsSettings", configurations: "configurations", initSelectedConfig: "initSelectedConfig" }, outputs: { createNewConfig: "createNewConfig", removeConfig: "removeConfig", changeConfig: "changeConfig" }, ngImport: i0, template: "<div class=\"col-auto row align-items-center\" style=\"padding: 0\">\r\n  @if (!creatingConfiguration && !removingConfiguration) {\r\n    <mat-form-field class=\"col-auto\" style=\"padding-right: 0\">\r\n      <mat-label>{{ configurationsSettings.selectLabel }}</mat-label>\r\n      <mat-select\r\n        [(ngModel)]=\"selectedConfig\"\r\n        (ngModelChange)=\"selectedConfigChanged()\"\r\n      >\r\n        <mat-option [value]=\"null\"></mat-option>\r\n        @for (config of configurations; track config) {\r\n          <mat-option [value]=\"config\">{{ config.configName }}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"showCreateConfiguration()\"\r\n    >\r\n      <mat-icon> add </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      [disabled]=\"!selectedConfig\"\r\n      (click)=\"deleteConfiguration()\"\r\n    >\r\n      <mat-icon> delete </mat-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (creatingConfiguration) {\r\n    <mat-form-field class=\"col-auto\">\r\n      <mat-label>{{ configurationsSettings.createLabel }}</mat-label>\r\n      <input matInput [(ngModel)]=\"createConfigurationName\" />\r\n    </mat-form-field>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"saveCreateConfiguration()\"\r\n      [disabled]=\"!createConfigurationName\"\r\n    >\r\n      <mat-icon> done </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      (click)=\"hideCreateConfiguration()\"\r\n    >\r\n      <mat-icon> close </mat-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (removingConfiguration) {\r\n    <p class=\"col-auto\" style=\"margin: 0; font-weight: bold; font-size: 16px\">\r\n      {{ configurationsSettings.deleteWarningTitle }}\r\n    </p>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto green-icon\"\r\n      (click)=\"acceptDeleteConfiguration()\"\r\n    >\r\n      <mat-icon> done </mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      class=\"col-auto red-icon\"\r\n      (click)=\"declineDeleteConfiguration()\"\r\n    >\r\n      <mat-icon> close </mat-icon>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".green-icon span{color:#2e7d32}.red-icon span{color:#c62828}\n"], dependencies: [{ kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfigurationsComponent, decorators: [{
             type: Component,
@@ -355,7 +356,7 @@ class LocalTableComponent {
         this.setDisplayedColumns();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    @if (configurationsSettings || allowPickColumns) {\r\n      <div class=\"col row align-items-center\" style=\"padding: 0\">\r\n        @if (allowPickColumns) {\r\n          <div class=\"col-auto\" style=\"padding: 0\">\r\n            <button\r\n              mat-icon-button\r\n              class=\"col-auto\"\r\n              [matMenuTriggerFor]=\"columnsMenu\"\r\n            >\r\n              <mat-icon> view_week </mat-icon>\r\n            </button>\r\n            <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n              @for (column of columnsArray; track column) {\r\n                @if (!column.notShowInColumnPick) {\r\n                  <div mat-menu-item>\r\n                    <mat-checkbox\r\n                      [(ngModel)]=\"column.visible\"\r\n                      (ngModelChange)=\"columnVisibleChanged(column)\"\r\n                      style=\"margin-top: 5px\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      {{ column.translateColumnName }}\r\n                    </mat-checkbox>\r\n                  </div>\r\n                }\r\n              }\r\n            </mat-menu>\r\n          </div>\r\n        }\r\n        @if (configurationsSettings) {\r\n          <st-configurations\r\n            [configurationsSettings]=\"configurationsSettings\"\r\n            [configurations]=\"configurations\"\r\n            [initSelectedConfig]=\"initConfig\"\r\n            (createNewConfig)=\"newConfigCreated($event)\"\r\n            (removeConfig)=\"configRemoved($event)\"\r\n            (changeConfig)=\"configChanged($event)\"\r\n          ></st-configurations>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (globalSearchSettings?.show) {\r\n      <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\r\n        <mat-form-field>\r\n          <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\r\n          <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            aria-label=\"Clear\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n          </button>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of displayedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{\r\n            columns[column].width ? 'width:' + columns[column].width : ''\r\n          }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!columns[column].sort\"\r\n        >\r\n          {{ columns[column].translateColumnName }}\r\n          @if (columns[column].search) {\r\n            <mat-icon\r\n              class=\"search-icon\"\r\n              [matMenuTriggerFor]=\"menu\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            >\r\n              search\r\n            </mat-icon>\r\n          }\r\n          <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n            <mat-form-field class=\"col\">\r\n              <mat-label>{{\r\n                columns[column].searchLabel || 'Search'\r\n              }}</mat-label>\r\n              <input\r\n                matInput\r\n                (keyup)=\"applySearch()\"\r\n                [(ngModel)]=\"searchModel\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n              <button\r\n                matSuffix\r\n                mat-icon-button\r\n                aria-label=\"Clear\"\r\n                (click)=\"searchModel = ''\"\r\n              >\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </mat-form-field>\r\n          </mat-menu>\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{\r\n            columns[column].width ? 'width:' + columns[column].width : ''\r\n          }}\"\r\n        >\r\n          @if (columns[column].actions && columns[column].actions!.length > 0) {\r\n            <div\r\n              class=\"actions-container\"\r\n              style=\"overflow-y: hidden\"\r\n              [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n            >\r\n              @for (action of columns[column].actions; track action) {\r\n                @if (checkIfActionVisible(element, action)) {\r\n                  @if (!action.url && action.action) {\r\n                    <button\r\n                      style=\"padding: 7px 7px; width: 40px; height: 40px\"\r\n                      class=\"col-auto\"\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                      [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                      (click)=\"action.action(element)\"\r\n                    >\r\n                      <mat-icon>{{ action.iconName }}</mat-icon>\r\n                    </button>\r\n                  }\r\n                  @if (action.url) {\r\n                    <a [routerLink]=\"action.url\">\r\n                      <button\r\n                        class=\"col-auto\"\r\n                        mat-icon-button\r\n                        type=\"button\"\r\n                        matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                        [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                      >\r\n                        <mat-icon>{{ action.iconName }}</mat-icon>\r\n                      </button>\r\n                    </a>\r\n                  }\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n          @if (!columns[column].actions) {\r\n            @if (columns[column].translateValue) {\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ columns[column].translateValue![element[column]] || '' }}\r\n              </p>\r\n            }\r\n            @if (!columns[column].translateValue) {\r\n              @if (!columns[column].type || columns[column].type === 'string') {\r\n                <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n              }\r\n              @if (columns[column].type === 'date') {\r\n                <p style=\"margin: 0; padding: 0\">\r\n                  {{ element[column] | stDateTimeFormatPipe }}\r\n                </p>\r\n              }\r\n            }\r\n          }\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      (click)=\"\r\n        tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\r\n      \"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    (page)=\"pageChanged($event)\"\r\n    [showFirstLastButtons]=\"true\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: ["", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LocalTableComponent, selector: "ngx-st-local-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", allowPickColumns: "allowPickColumns", configurationsSettings: "configurationsSettings", localStorageName: "localStorageName", bindSearchToUrl: "bindSearchToUrl", columns: "columns", data: "data" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    @if (configurationsSettings || allowPickColumns) {\r\n      <div class=\"col row align-items-center\" style=\"padding: 0\">\r\n        @if (allowPickColumns) {\r\n          <div class=\"col-auto\" style=\"padding: 0\">\r\n            <button\r\n              mat-icon-button\r\n              class=\"col-auto\"\r\n              [matMenuTriggerFor]=\"columnsMenu\"\r\n            >\r\n              <mat-icon> view_week </mat-icon>\r\n            </button>\r\n            <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n              @for (column of columnsArray; track column) {\r\n                @if (!column.notShowInColumnPick) {\r\n                  <div mat-menu-item>\r\n                    <mat-checkbox\r\n                      [(ngModel)]=\"column.visible\"\r\n                      (ngModelChange)=\"columnVisibleChanged(column)\"\r\n                      style=\"margin-top: 5px\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      {{ column.translateColumnName }}\r\n                    </mat-checkbox>\r\n                  </div>\r\n                }\r\n              }\r\n            </mat-menu>\r\n          </div>\r\n        }\r\n        @if (configurationsSettings) {\r\n          <st-configurations\r\n            [configurationsSettings]=\"configurationsSettings\"\r\n            [configurations]=\"configurations\"\r\n            [initSelectedConfig]=\"initConfig\"\r\n            (createNewConfig)=\"newConfigCreated($event)\"\r\n            (removeConfig)=\"configRemoved($event)\"\r\n            (changeConfig)=\"configChanged($event)\"\r\n          ></st-configurations>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (globalSearchSettings?.show) {\r\n      <div class=\"col\" style=\"padding: 0; margin-bottom: -15px\">\r\n        <mat-form-field>\r\n          <mat-label>{{ globalSearchSettings?.label || 'Search' }}</mat-label>\r\n          <input matInput (keyup)=\"applySearch()\" [(ngModel)]=\"searchModel\" />\r\n          <button\r\n            matSuffix\r\n            mat-icon-button\r\n            aria-label=\"Clear\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n          </button>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of displayedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{\r\n            columns[column].width ? 'width:' + columns[column].width : ''\r\n          }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!columns[column].sort\"\r\n        >\r\n          {{ columns[column].translateColumnName }}\r\n          @if (columns[column].search) {\r\n            <mat-icon\r\n              class=\"search-icon\"\r\n              [matMenuTriggerFor]=\"menu\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            >\r\n              search\r\n            </mat-icon>\r\n          }\r\n          <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n            <mat-form-field class=\"col\">\r\n              <mat-label>{{\r\n                columns[column].searchLabel || 'Search'\r\n              }}</mat-label>\r\n              <input\r\n                matInput\r\n                (keyup)=\"applySearch()\"\r\n                [(ngModel)]=\"searchModel\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n              <button\r\n                matSuffix\r\n                mat-icon-button\r\n                aria-label=\"Clear\"\r\n                (click)=\"searchModel = ''\"\r\n              >\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </mat-form-field>\r\n          </mat-menu>\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{\r\n            columns[column].width ? 'width:' + columns[column].width : ''\r\n          }}\"\r\n        >\r\n          @if (columns[column].actions && columns[column].actions!.length > 0) {\r\n            <div\r\n              class=\"actions-container\"\r\n              style=\"overflow-y: hidden\"\r\n              [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n            >\r\n              @for (action of columns[column].actions; track action) {\r\n                @if (checkIfActionVisible(element, action)) {\r\n                  @if (!action.url && action.action) {\r\n                    <button\r\n                      style=\"padding: 7px 7px; width: 40px; height: 40px\"\r\n                      class=\"col-auto\"\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                      [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                      (click)=\"action.action(element)\"\r\n                    >\r\n                      <mat-icon>{{ action.iconName }}</mat-icon>\r\n                    </button>\r\n                  }\r\n                  @if (action.url) {\r\n                    <a [routerLink]=\"action.url\">\r\n                      <button\r\n                        class=\"col-auto\"\r\n                        mat-icon-button\r\n                        type=\"button\"\r\n                        matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                        [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                      >\r\n                        <mat-icon>{{ action.iconName }}</mat-icon>\r\n                      </button>\r\n                    </a>\r\n                  }\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n          @if (!columns[column].actions) {\r\n            @if (columns[column].translateValue) {\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ columns[column].translateValue![element[column]] || '' }}\r\n              </p>\r\n            }\r\n            @if (!columns[column].translateValue) {\r\n              @if (!columns[column].type || columns[column].type === 'string') {\r\n                <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n              }\r\n              @if (columns[column].type === 'date') {\r\n                <p style=\"margin: 0; padding: 0\">\r\n                  {{ element[column] | stDateTimeFormatPipe }}\r\n                </p>\r\n              }\r\n            }\r\n          }\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      (click)=\"\r\n        tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\r\n      \"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    (page)=\"pageChanged($event)\"\r\n    [showFirstLastButtons]=\"true\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: ["", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocalTableComponent, decorators: [{
             type: Component,
@@ -444,7 +445,7 @@ class SelectTableComponent {
         return !!this.rowSelected.find(activeRow => activeRow === row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n  <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n    {{ title }} {{ required ? '*' : '' }}\r\n  </p>\r\n\r\n  <div class=\"search-form row align-items-center\">\r\n    <div class=\"col-sm-12 col-md row align-items-center\">\r\n      <mat-form-field class=\"col\">\r\n        <input\r\n          matInput\r\n          placeholder=\"{{ searchLabel }}\"\r\n          [formControl]=\"search\"\r\n        />\r\n      </mat-form-field>\r\n      <div class=\"clear col-auto\">\r\n        <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    @for (col of columns; track col) {\r\n      <ng-container [matColumnDef]=\"col\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n          @if (col === 'active') {\r\n            @if (checkActiveRow(element)) {\r\n              <mat-icon class=\"active-row\">done</mat-icon>\r\n            }\r\n          }\r\n          @if (col !== 'active') {\r\n            {{ element[col] }}\r\n          }\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: columns\"\r\n      (click)=\"rowClick(row)\"\r\n      [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n  <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n    {{ title }} {{ required ? '*' : '' }}\r\n  </p>\r\n\r\n  <div class=\"search-form row align-items-center\">\r\n    <div class=\"col-sm-12 col-md row align-items-center\">\r\n      <mat-form-field class=\"col\">\r\n        <input\r\n          matInput\r\n          placeholder=\"{{ searchLabel }}\"\r\n          [formControl]=\"search\"\r\n        />\r\n      </mat-form-field>\r\n      <div class=\"clear col-auto\">\r\n        <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    @for (col of columns; track col) {\r\n      <ng-container [matColumnDef]=\"col\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n          @if (col === 'active') {\r\n            @if (checkActiveRow(element)) {\r\n              <mat-icon class=\"active-row\">done</mat-icon>\r\n            }\r\n          }\r\n          @if (col !== 'active') {\r\n            {{ element[col] }}\r\n          }\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: columns\"\r\n      (click)=\"rowClick(row)\"\r\n      [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, decorators: [{
             type: Component,
@@ -476,12 +477,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_TRANSLATIONS = {
+    globalSearch: 'Search',
+    cancel: 'Cancel',
+    close: 'Close',
+    save: 'Save',
+    reorderColumnsTitle: 'Reorder Columns',
+    reorderColumns: 'Reorder Columns',
+    expandAllFilters: 'Expand all filters',
+    collapseAllFilters: 'Collapse all filters',
+    clearFilters: 'Clear Filters',
+    filterTitle: 'Filters',
+    filter: 'Filter',
+    searchFilter: 'Search',
+    filterChooseDate: 'Choose a date',
+    booleanPickValue: 'Pick Value',
+    booleanNone: 'None',
+    booleanYes: 'Yes',
+    booleanNo: 'No',
+    customPickValue: 'Pick Value',
+    customNone: 'None',
+    rowSelected: 'row selected',
+    rowSelectColumnLabel: 'Row Select',
+    rowActionsColumnLabel: 'Row Actions',
+};
+
+class StTablesTranslationsService {
+    constructor() {
+        this.translations = new BehaviorSubject(DEFAULT_TRANSLATIONS);
+        this.translations$ = this.translations.asObservable();
+    }
+    setTranslations(translations) {
+        this.translations.next({
+            ...DEFAULT_TRANSLATIONS,
+            ...translations,
+        });
+    }
+    getTranslations() {
+        return this.translations.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesTranslationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesTranslationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesTranslationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class MaterialTableFilterDialogComponent {
-    constructor(dialogData, dialogRef, fb, changeDetectorRef) {
+    constructor(dialogData, dialogRef, fb, changeDetectorRef, stTableTranslations) {
         this.dialogData = dialogData;
         this.dialogRef = dialogRef;
         this.fb = fb;
         this.changeDetectorRef = changeDetectorRef;
+        this.stTableTranslations = stTableTranslations;
         this.filterColumns = [];
         this.formGroup = this.fb.group({});
         this.allVisible = true;
@@ -531,21 +582,22 @@ class MaterialTableFilterDialogComponent {
             filters: this.formGroup.getRawValue(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i7.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n  Filters\r\n  <div class=\"filters-show-hide\">\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"showAllFilters()\"\r\n      *ngIf=\"!allVisible\"\r\n      [matTooltip]=\"'Expand all filters'\"\r\n    >\r\n      <mat-icon>unfold_more</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"hideAllFilters()\"\r\n      *ngIf=\"allVisible\"\r\n      [matTooltip]=\"'Collapse all filters'\"\r\n    >\r\n      <mat-icon>unfold_less</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"clearAllFilters()\"\r\n      [matTooltip]=\"'Clear Filters'\"\r\n    >\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n  </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"formGroup\">\r\n    @for (column of filterColumns; track column.field) {\r\n      @switch (column.filterType || column.type || 'string') {\r\n        @case ('string') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Contains'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Search</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <button\r\n                    matSuffix\r\n                    mat-icon-button\r\n                    aria-label=\"Clear\"\r\n                    (click)=\"formGroup.controls[column.field].setValue('')\"\r\n                  >\r\n                    <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('number') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Search</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('date') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Date is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Choose a date</mat-label>\r\n                  <input\r\n                    matInput\r\n                    [matDatepicker]=\"picker\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <mat-datepicker-toggle\r\n                    matIconSuffix\r\n                    [for]=\"picker\"\r\n                  ></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker></mat-datepicker>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('boolean') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Data is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Pick Value</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">None</mat-option>\r\n                    <mat-option [value]=\"true\">Yes</mat-option>\r\n                    <mat-option [value]=\"false\">No</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('custom') {\r\n          @if (column.customFilterOptions) {}\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Pick Value</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">None</mat-option>\r\n                    @for (option of column.customFilterOptions; track option) {\r\n                      <mat-option [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>Cancel</button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">Save</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n  <div class=\"filter-title row justify-content-between\">\r\n    {{ column.header }}\r\n\r\n    @if (column.expanded) {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_up</mat-icon\r\n      >\r\n    } @else {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_down</mat-icon\r\n      >\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n  {{ (stTableTranslations.translations$ | async)!.filterTitle }}\r\n  <div class=\"filters-show-hide\">\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"showAllFilters()\"\r\n      *ngIf=\"!allVisible\"\r\n      [matTooltip]=\"\r\n        (stTableTranslations.translations$ | async)!.expandAllFilters\r\n      \"\r\n    >\r\n      <mat-icon>unfold_more</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"hideAllFilters()\"\r\n      *ngIf=\"allVisible\"\r\n      [matTooltip]=\"\r\n        (stTableTranslations.translations$ | async)!.collapseAllFilters\r\n      \"\r\n    >\r\n      <mat-icon>unfold_less</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"clearAllFilters()\"\r\n      [matTooltip]=\"(stTableTranslations.translations$ | async)!.clearFilters\"\r\n    >\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n  </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"formGroup\">\r\n    @for (column of filterColumns; track column.field) {\r\n      @switch (column.filterType || column.type || 'string') {\r\n        @case ('string') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Contains'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.searchFilter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <button\r\n                    matSuffix\r\n                    mat-icon-button\r\n                    aria-label=\"Clear\"\r\n                    (click)=\"formGroup.controls[column.field].setValue('')\"\r\n                  >\r\n                    <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('number') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('date') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Date is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!\r\n                      .filterChooseDate\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    [matDatepicker]=\"picker\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <mat-datepicker-toggle\r\n                    matIconSuffix\r\n                    [for]=\"picker\"\r\n                  ></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker></mat-datepicker>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('boolean') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Data is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!\r\n                      .booleanPickValue\r\n                  }}</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanNone\r\n                    }}</mat-option>\r\n                    <mat-option [value]=\"true\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanYes\r\n                    }}</mat-option>\r\n                    <mat-option [value]=\"false\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanNo\r\n                    }}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('custom') {\r\n          @if (column.customFilterOptions) {}\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.customPickValue\r\n                  }}</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">{{\r\n                      (stTableTranslations.translations$ | async)!.customNone\r\n                    }}</mat-option>\r\n                    @for (option of column.customFilterOptions; track option) {\r\n                      <mat-option [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>\r\n      {{ (stTableTranslations.translations$ | async)!.cancel }}\r\n    </button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n      {{ (stTableTranslations.translations$ | async)!.save }}\r\n    </button>\r\n  </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n  <div class=\"filter-title row justify-content-between\">\r\n    {{ column.header }}\r\n\r\n    @if (column.expanded) {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_up</mat-icon\r\n      >\r\n    } @else {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_down</mat-icon\r\n      >\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i12$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n  Filters\r\n  <div class=\"filters-show-hide\">\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"showAllFilters()\"\r\n      *ngIf=\"!allVisible\"\r\n      [matTooltip]=\"'Expand all filters'\"\r\n    >\r\n      <mat-icon>unfold_more</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"hideAllFilters()\"\r\n      *ngIf=\"allVisible\"\r\n      [matTooltip]=\"'Collapse all filters'\"\r\n    >\r\n      <mat-icon>unfold_less</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"clearAllFilters()\"\r\n      [matTooltip]=\"'Clear Filters'\"\r\n    >\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n  </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"formGroup\">\r\n    @for (column of filterColumns; track column.field) {\r\n      @switch (column.filterType || column.type || 'string') {\r\n        @case ('string') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Contains'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Search</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <button\r\n                    matSuffix\r\n                    mat-icon-button\r\n                    aria-label=\"Clear\"\r\n                    (click)=\"formGroup.controls[column.field].setValue('')\"\r\n                  >\r\n                    <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('number') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Search</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('date') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Date is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Choose a date</mat-label>\r\n                  <input\r\n                    matInput\r\n                    [matDatepicker]=\"picker\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <mat-datepicker-toggle\r\n                    matIconSuffix\r\n                    [for]=\"picker\"\r\n                  ></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker></mat-datepicker>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('boolean') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Data is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Pick Value</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">None</mat-option>\r\n                    <mat-option [value]=\"true\">Yes</mat-option>\r\n                    <mat-option [value]=\"false\">No</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('custom') {\r\n          @if (column.customFilterOptions) {}\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>Filter</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>Pick Value</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">None</mat-option>\r\n                    @for (option of column.customFilterOptions; track option) {\r\n                      <mat-option [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>Cancel</button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">Save</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n  <div class=\"filter-title row justify-content-between\">\r\n    {{ column.header }}\r\n\r\n    @if (column.expanded) {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_up</mat-icon\r\n      >\r\n    } @else {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_down</mat-icon\r\n      >\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n  {{ (stTableTranslations.translations$ | async)!.filterTitle }}\r\n  <div class=\"filters-show-hide\">\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"showAllFilters()\"\r\n      *ngIf=\"!allVisible\"\r\n      [matTooltip]=\"\r\n        (stTableTranslations.translations$ | async)!.expandAllFilters\r\n      \"\r\n    >\r\n      <mat-icon>unfold_more</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"hideAllFilters()\"\r\n      *ngIf=\"allVisible\"\r\n      [matTooltip]=\"\r\n        (stTableTranslations.translations$ | async)!.collapseAllFilters\r\n      \"\r\n    >\r\n      <mat-icon>unfold_less</mat-icon>\r\n    </button>\r\n    <button\r\n      mat-icon-button\r\n      (click)=\"clearAllFilters()\"\r\n      [matTooltip]=\"(stTableTranslations.translations$ | async)!.clearFilters\"\r\n    >\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n  </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"formGroup\">\r\n    @for (column of filterColumns; track column.field) {\r\n      @switch (column.filterType || column.type || 'string') {\r\n        @case ('string') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Contains'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.searchFilter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <button\r\n                    matSuffix\r\n                    mat-icon-button\r\n                    aria-label=\"Clear\"\r\n                    (click)=\"formGroup.controls[column.field].setValue('')\"\r\n                  >\r\n                    <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n                  </button>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('number') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('date') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Date is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!\r\n                      .filterChooseDate\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    [matDatepicker]=\"picker\"\r\n                    [disabled]=\"column.visible\"\r\n                    [formControlName]=\"column.field\"\r\n                  />\r\n                  <mat-datepicker-toggle\r\n                    matIconSuffix\r\n                    [for]=\"picker\"\r\n                  ></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker></mat-datepicker>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('boolean') {\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Data is'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!\r\n                      .booleanPickValue\r\n                  }}</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanNone\r\n                    }}</mat-option>\r\n                    <mat-option [value]=\"true\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanYes\r\n                    }}</mat-option>\r\n                    <mat-option [value]=\"false\">{{\r\n                      (stTableTranslations.translations$ | async)!.booleanNo\r\n                    }}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @case ('custom') {\r\n          @if (column.customFilterOptions) {}\r\n          <div class=\"filter\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n            ></ng-container>\r\n            <div\r\n              class=\"filter-content row\"\r\n              [ngClass]=\"{ hide: !column.expanded }\"\r\n            >\r\n              <div class=\"col-auto\">\r\n                <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.filter\r\n                  }}</mat-label>\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [disabled]=\"true\"\r\n                    [value]=\"'Equal'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <div class=\"col\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-label>{{\r\n                    (stTableTranslations.translations$ | async)!.customPickValue\r\n                  }}</mat-label>\r\n                  <mat-select>\r\n                    <mat-option value=\"\">{{\r\n                      (stTableTranslations.translations$ | async)!.customNone\r\n                    }}</mat-option>\r\n                    @for (option of column.customFilterOptions; track option) {\r\n                      <mat-option [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                      </mat-option>\r\n                    }\r\n                  </mat-select>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>\r\n      {{ (stTableTranslations.translations$ | async)!.cancel }}\r\n    </button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n      {{ (stTableTranslations.translations$ | async)!.save }}\r\n    </button>\r\n  </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n  <div class=\"filter-title row justify-content-between\">\r\n    {{ column.header }}\r\n\r\n    @if (column.expanded) {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_up</mat-icon\r\n      >\r\n    } @else {\r\n      <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n        >keyboard_arrow_down</mat-icon\r\n      >\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i7.NonNullableFormBuilder }, { type: i0.ChangeDetectorRef }] });
+                }] }, { type: i1.MatDialogRef }, { type: i2.NonNullableFormBuilder }, { type: i0.ChangeDetectorRef }, { type: StTablesTranslationsService }] });
 
 class MaterialTableOrderColumnDialogComponent {
-    constructor(dialogData, dialogRef) {
+    constructor(dialogData, dialogRef, stTablesTranslations) {
         this.dialogData = dialogData;
         this.dialogRef = dialogRef;
+        this.stTablesTranslations = stTablesTranslations;
         this.columns = [];
     }
     ngOnInit() {
@@ -559,16 +611,16 @@ class MaterialTableOrderColumnDialogComponent {
             columnsOrder: this.columns.map(column => column.field),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableOrderColumnDialogComponent, selector: "st-material-table-order-column-dialog", ngImport: i0, template: "<h3 mat-dialog-title>Reorder Columns</h3>\r\n<mat-dialog-content>\r\n  <div\r\n    cdkDropList\r\n    class=\"reorder-column-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    @for (column of columns; track column.field) {\r\n      <div class=\"reorder-column-element\" cdkDrag>\r\n        <div class=\"row\">\r\n          <mat-icon>drag_indicator</mat-icon>\r\n          <p>{{ column.selectColumnLabel || column.header }}</p>\r\n        </div>\r\n        @if (!column.visible) {\r\n          <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>Cancel</button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveOrder()\">Save</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableOrderColumnDialogComponent, selector: "st-material-table-order-column-dialog", ngImport: i0, template: "<h3 mat-dialog-title>\r\n  {{ (stTablesTranslations.translations$ | async)!.reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n  <div\r\n    cdkDropList\r\n    class=\"reorder-column-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    @for (column of columns; track column.field) {\r\n      <div class=\"reorder-column-element\" cdkDrag>\r\n        <div class=\"row\">\r\n          <mat-icon>drag_indicator</mat-icon>\r\n          <p>{{ column.selectColumnLabel || column.header }}</p>\r\n        </div>\r\n        @if (!column.visible) {\r\n          <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>\r\n      {{ (stTablesTranslations.translations$ | async)!.close }}\r\n    </button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n      {{ (stTablesTranslations.translations$ | async)!.save }}\r\n    </button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-material-table-order-column-dialog', template: "<h3 mat-dialog-title>Reorder Columns</h3>\r\n<mat-dialog-content>\r\n  <div\r\n    cdkDropList\r\n    class=\"reorder-column-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    @for (column of columns; track column.field) {\r\n      <div class=\"reorder-column-element\" cdkDrag>\r\n        <div class=\"row\">\r\n          <mat-icon>drag_indicator</mat-icon>\r\n          <p>{{ column.selectColumnLabel || column.header }}</p>\r\n        </div>\r\n        @if (!column.visible) {\r\n          <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>Cancel</button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveOrder()\">Save</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'st-material-table-order-column-dialog', template: "<h3 mat-dialog-title>\r\n  {{ (stTablesTranslations.translations$ | async)!.reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n  <div\r\n    cdkDropList\r\n    class=\"reorder-column-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    @for (column of columns; track column.field) {\r\n      <div class=\"reorder-column-element\" cdkDrag>\r\n        <div class=\"row\">\r\n          <mat-icon>drag_indicator</mat-icon>\r\n          <p>{{ column.selectColumnLabel || column.header }}</p>\r\n        </div>\r\n        @if (!column.visible) {\r\n          <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n    <button mat-flat-button mat-dialog-close>\r\n      {{ (stTablesTranslations.translations$ | async)!.close }}\r\n    </button>\r\n    <button mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n      {{ (stTablesTranslations.translations$ | async)!.save }}\r\n    </button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }] });
+                }] }, { type: i1.MatDialogRef }, { type: StTablesTranslationsService }] });
 
 class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
     set columns(data) {
@@ -578,8 +630,9 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
     get columns() {
         return this._columns;
     }
-    constructor(dialog) {
+    constructor(stTableTranslations, dialog) {
         super();
+        this.stTableTranslations = stTableTranslations;
         this.dialog = dialog;
         this.tableTitle = '';
         this.allowPickColumns = true;
@@ -679,13 +732,13 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
         this.activeFiltersCount =
             filtersKeys.filter(key => this.filters[key]).length || 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", initGlobalSearch: "initGlobalSearch", initFilters: "initFilters", columns: "columns" }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n  allowPickColumns ||\r\n  tableTitle ||\r\n  allowReorderColumns ||\r\n  showGlobalSearch ||\r\n  showFilterButton\r\n) {\r\n  <div\r\n    class=\"st-material-table-caption row align-items-center\"\r\n    [ngClass]=\"{\r\n      'justify-content-between':\r\n        (allowPickColumns || tableTitle || allowReorderColumns) &&\r\n        (showGlobalSearch || showFilterButton),\r\n      'justify-content-end':\r\n        !allowPickColumns && !tableTitle && !allowReorderColumns\r\n    }\"\r\n  >\r\n    @if (allowPickColumns || tableTitle || allowReorderColumns) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (tableTitle) {\r\n          <p class=\"table-title\">{{ tableTitle }}</p>\r\n        }\r\n\r\n        @if (allowPickColumns) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select [formControl]=\"selectedColumns\" multiple>\r\n              <mat-select-trigger>\r\n                {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n                columns selected\r\n              </mat-select-trigger>\r\n              @for (column of columns; track column.field) {\r\n                <mat-option [value]=\"column.field\">{{\r\n                  column.selectColumnLabel || column.header\r\n                }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        }\r\n\r\n        @if (allowPickColumns || tableTitle) {\r\n          <button mat-icon-button (click)=\"resetTable()\">\r\n            <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        @if (allowReorderColumns) {\r\n          <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n            <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (showGlobalSearch || showFilterButton) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (showFilterButton) {\r\n          <!--        @if (activeFiltersCount) {-->\r\n          <!--          <button-->\r\n          <!--            mat-icon-button-->\r\n          <!--            (click)=\"clearAllFilters()\"-->\r\n          <!--            [matTooltip]=\"'Clear Filters'\"-->\r\n          <!--          >-->\r\n          <!--            <mat-icon>filter_alt_off</mat-icon>-->\r\n          <!--          </button>-->\r\n          <!--        }-->\r\n\r\n          <button mat-icon-button (click)=\"openFilterDialog()\">\r\n            <mat-icon\r\n              [matBadge]=\"activeFiltersCount\"\r\n              [matBadgeHidden]=\"!activeFiltersCount\"\r\n              [matBadgeSize]=\"'small'\"\r\n              matBadgePosition=\"before\"\r\n              >filter_alt</mat-icon\r\n            >\r\n          </button>\r\n        }\r\n\r\n        @if (showGlobalSearch) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              matInput\r\n              [formControl]=\"globalSearch\"\r\n              [placeholder]=\"'Search'\"\r\n            />\r\n            <button\r\n              matSuffix\r\n              mat-icon-button\r\n              aria-label=\"Clear\"\r\n              (click)=\"globalSearch.setValue('')\"\r\n            >\r\n              <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n            </button>\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: StTablesTranslationsService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", initGlobalSearch: "initGlobalSearch", initFilters: "initFilters", columns: "columns" }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n  allowPickColumns ||\r\n  tableTitle ||\r\n  allowReorderColumns ||\r\n  showGlobalSearch ||\r\n  showFilterButton\r\n) {\r\n  <div\r\n    class=\"st-material-table-caption row align-items-center\"\r\n    [ngClass]=\"{\r\n      'justify-content-between':\r\n        (allowPickColumns || tableTitle || allowReorderColumns) &&\r\n        (showGlobalSearch || showFilterButton),\r\n      'justify-content-end':\r\n        !allowPickColumns && !tableTitle && !allowReorderColumns\r\n    }\"\r\n  >\r\n    @if (allowPickColumns || tableTitle || allowReorderColumns) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (tableTitle) {\r\n          <p class=\"table-title\">{{ tableTitle }}</p>\r\n        }\r\n\r\n        @if (allowPickColumns) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select [formControl]=\"selectedColumns\" multiple>\r\n              <mat-select-trigger>\r\n                {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n                columns selected\r\n              </mat-select-trigger>\r\n              @for (column of columns; track column.field) {\r\n                <mat-option [value]=\"column.field\">{{\r\n                  column.selectColumnLabel || column.header\r\n                }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        }\r\n\r\n        @if (allowPickColumns || tableTitle) {\r\n          <button mat-icon-button (click)=\"resetTable()\">\r\n            <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        @if (allowReorderColumns) {\r\n          <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n            <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (showGlobalSearch || showFilterButton) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (showFilterButton) {\r\n          <!--        @if (activeFiltersCount) {-->\r\n          <!--          <button-->\r\n          <!--            mat-icon-button-->\r\n          <!--            (click)=\"clearAllFilters()\"-->\r\n          <!--            [matTooltip]=\"'Clear Filters'\"-->\r\n          <!--          >-->\r\n          <!--            <mat-icon>filter_alt_off</mat-icon>-->\r\n          <!--          </button>-->\r\n          <!--        }-->\r\n\r\n          <button mat-icon-button (click)=\"openFilterDialog()\">\r\n            <mat-icon\r\n              [matBadge]=\"activeFiltersCount\"\r\n              [matBadgeHidden]=\"!activeFiltersCount\"\r\n              [matBadgeSize]=\"'small'\"\r\n              matBadgePosition=\"before\"\r\n              >filter_alt</mat-icon\r\n            >\r\n          </button>\r\n        }\r\n\r\n        @if (showGlobalSearch) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              matInput\r\n              [formControl]=\"globalSearch\"\r\n              [placeholder]=\"\r\n                (stTableTranslations.translations$ | async)!.globalSearch\r\n              \"\r\n            />\r\n            <button\r\n              matSuffix\r\n              mat-icon-button\r\n              aria-label=\"Clear\"\r\n              (click)=\"globalSearch.setValue('')\"\r\n            >\r\n              <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n            </button>\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\r\n  allowPickColumns ||\r\n  tableTitle ||\r\n  allowReorderColumns ||\r\n  showGlobalSearch ||\r\n  showFilterButton\r\n) {\r\n  <div\r\n    class=\"st-material-table-caption row align-items-center\"\r\n    [ngClass]=\"{\r\n      'justify-content-between':\r\n        (allowPickColumns || tableTitle || allowReorderColumns) &&\r\n        (showGlobalSearch || showFilterButton),\r\n      'justify-content-end':\r\n        !allowPickColumns && !tableTitle && !allowReorderColumns\r\n    }\"\r\n  >\r\n    @if (allowPickColumns || tableTitle || allowReorderColumns) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (tableTitle) {\r\n          <p class=\"table-title\">{{ tableTitle }}</p>\r\n        }\r\n\r\n        @if (allowPickColumns) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select [formControl]=\"selectedColumns\" multiple>\r\n              <mat-select-trigger>\r\n                {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n                columns selected\r\n              </mat-select-trigger>\r\n              @for (column of columns; track column.field) {\r\n                <mat-option [value]=\"column.field\">{{\r\n                  column.selectColumnLabel || column.header\r\n                }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        }\r\n\r\n        @if (allowPickColumns || tableTitle) {\r\n          <button mat-icon-button (click)=\"resetTable()\">\r\n            <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        @if (allowReorderColumns) {\r\n          <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n            <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (showGlobalSearch || showFilterButton) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (showFilterButton) {\r\n          <!--        @if (activeFiltersCount) {-->\r\n          <!--          <button-->\r\n          <!--            mat-icon-button-->\r\n          <!--            (click)=\"clearAllFilters()\"-->\r\n          <!--            [matTooltip]=\"'Clear Filters'\"-->\r\n          <!--          >-->\r\n          <!--            <mat-icon>filter_alt_off</mat-icon>-->\r\n          <!--          </button>-->\r\n          <!--        }-->\r\n\r\n          <button mat-icon-button (click)=\"openFilterDialog()\">\r\n            <mat-icon\r\n              [matBadge]=\"activeFiltersCount\"\r\n              [matBadgeHidden]=\"!activeFiltersCount\"\r\n              [matBadgeSize]=\"'small'\"\r\n              matBadgePosition=\"before\"\r\n              >filter_alt</mat-icon\r\n            >\r\n          </button>\r\n        }\r\n\r\n        @if (showGlobalSearch) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              matInput\r\n              [formControl]=\"globalSearch\"\r\n              [placeholder]=\"'Search'\"\r\n            />\r\n            <button\r\n              matSuffix\r\n              mat-icon-button\r\n              aria-label=\"Clear\"\r\n              (click)=\"globalSearch.setValue('')\"\r\n            >\r\n              <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n            </button>\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { showGlobalSearch: [{
+            args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\r\n  allowPickColumns ||\r\n  tableTitle ||\r\n  allowReorderColumns ||\r\n  showGlobalSearch ||\r\n  showFilterButton\r\n) {\r\n  <div\r\n    class=\"st-material-table-caption row align-items-center\"\r\n    [ngClass]=\"{\r\n      'justify-content-between':\r\n        (allowPickColumns || tableTitle || allowReorderColumns) &&\r\n        (showGlobalSearch || showFilterButton),\r\n      'justify-content-end':\r\n        !allowPickColumns && !tableTitle && !allowReorderColumns\r\n    }\"\r\n  >\r\n    @if (allowPickColumns || tableTitle || allowReorderColumns) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (tableTitle) {\r\n          <p class=\"table-title\">{{ tableTitle }}</p>\r\n        }\r\n\r\n        @if (allowPickColumns) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select [formControl]=\"selectedColumns\" multiple>\r\n              <mat-select-trigger>\r\n                {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n                columns selected\r\n              </mat-select-trigger>\r\n              @for (column of columns; track column.field) {\r\n                <mat-option [value]=\"column.field\">{{\r\n                  column.selectColumnLabel || column.header\r\n                }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        }\r\n\r\n        @if (allowPickColumns || tableTitle) {\r\n          <button mat-icon-button (click)=\"resetTable()\">\r\n            <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n          </button>\r\n        }\r\n\r\n        @if (allowReorderColumns) {\r\n          <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n            <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (showGlobalSearch || showFilterButton) {\r\n      <div class=\"col-auto d-flex align-items-center\">\r\n        @if (showFilterButton) {\r\n          <!--        @if (activeFiltersCount) {-->\r\n          <!--          <button-->\r\n          <!--            mat-icon-button-->\r\n          <!--            (click)=\"clearAllFilters()\"-->\r\n          <!--            [matTooltip]=\"'Clear Filters'\"-->\r\n          <!--          >-->\r\n          <!--            <mat-icon>filter_alt_off</mat-icon>-->\r\n          <!--          </button>-->\r\n          <!--        }-->\r\n\r\n          <button mat-icon-button (click)=\"openFilterDialog()\">\r\n            <mat-icon\r\n              [matBadge]=\"activeFiltersCount\"\r\n              [matBadgeHidden]=\"!activeFiltersCount\"\r\n              [matBadgeSize]=\"'small'\"\r\n              matBadgePosition=\"before\"\r\n              >filter_alt</mat-icon\r\n            >\r\n          </button>\r\n        }\r\n\r\n        @if (showGlobalSearch) {\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              matInput\r\n              [formControl]=\"globalSearch\"\r\n              [placeholder]=\"\r\n                (stTableTranslations.translations$ | async)!.globalSearch\r\n              \"\r\n            />\r\n            <button\r\n              matSuffix\r\n              mat-icon-button\r\n              aria-label=\"Clear\"\r\n              (click)=\"globalSearch.setValue('')\"\r\n            >\r\n              <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n            </button>\r\n          </mat-form-field>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
+        }], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i1.MatDialog }], propDecorators: { showGlobalSearch: [{
                 type: Input
             }], tableTitle: [{
                 type: Input
@@ -750,7 +803,7 @@ class MaterialTableRowCellComponent {
         this.changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: "column", rowData: "rowData", rowDataCopy: "rowDataCopy", rowEditing: "rowEditing", rowIsSelected: "rowIsSelected" }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", selectRowChange: "selectRowChange" }, ngImport: i0, template: "@switch (column.type || 'string') {\r\n  @case ('custom-template') {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"column.customTemplate!\"\r\n      [ngTemplateOutletContext]=\"{ data: rowData }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column.actions) {\r\n      @if (\r\n        (!column.actionsInMenu && !mobileView) ||\r\n        (mobileView && column.actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column.flexRight ? 'right' : 'none' }\">\r\n          @for (action of column.actions; track action) {\r\n            @if ((action.show && action.show(rowData)) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"$event.stopPropagation(); action.action(rowData)\"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (column.actionsInMenu || (mobileView && column.actions!.length > 1)) {\r\n        <button\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column.actions; track action) {\r\n            @if ((action.show && action.show(rowData)) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action(rowData)\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    {{ rowData[column.field] | stDateTimeFormatPipe }}\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected\"\r\n    >\r\n    </mat-checkbox>\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if (rowEditing && column.allowEditColumn) {\r\n    <mat-form-field appearance=\"outline\">\r\n      @if (column.type === 'string') {\r\n        <input matInput [(ngModel)]=\"rowDataCopy[column.field]\" />\r\n      }\r\n      @if (column.type === 'number') {\r\n        <input matInput type=\"number\" [(ngModel)]=\"rowDataCopy[column.field]\" />\r\n      }\r\n      @if (column.type === 'boolean') {\r\n        <mat-checkbox [(ngModel)]=\"rowDataCopy[column.field]\"></mat-checkbox>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: "column", rowData: "rowData", rowDataCopy: "rowDataCopy", rowEditing: "rowEditing", rowIsSelected: "rowIsSelected" }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", selectRowChange: "selectRowChange" }, ngImport: i0, template: "@switch (column.type || 'string') {\r\n  @case ('custom-template') {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"column.customTemplate!\"\r\n      [ngTemplateOutletContext]=\"{ data: rowData }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column.actions) {\r\n      @if (\r\n        (!column.actionsInMenu && !mobileView) ||\r\n        (mobileView && column.actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column.flexRight ? 'right' : 'none' }\">\r\n          @for (action of column.actions; track action) {\r\n            @if ((action.show && action.show(rowData)) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"$event.stopPropagation(); action.action(rowData)\"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (column.actionsInMenu || (mobileView && column.actions!.length > 1)) {\r\n        <button\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column.actions; track action) {\r\n            @if ((action.show && action.show(rowData)) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action(rowData)\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    {{ rowData[column.field] | stDateTimeFormatPipe }}\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected\"\r\n    >\r\n    </mat-checkbox>\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if (rowEditing && column.allowEditColumn) {\r\n    <mat-form-field appearance=\"outline\">\r\n      @if (column.type === 'string') {\r\n        <input matInput [(ngModel)]=\"rowDataCopy[column.field]\" />\r\n      }\r\n      @if (column.type === 'number') {\r\n        <input matInput type=\"number\" [(ngModel)]=\"rowDataCopy[column.field]\" />\r\n      }\r\n      @if (column.type === 'boolean') {\r\n        <mat-checkbox [(ngModel)]=\"rowDataCopy[column.field]\"></mat-checkbox>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
             type: Component,
@@ -801,10 +854,11 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
     get data() {
         return this._data;
     }
-    constructor(changeDetectorRef, snackbar) {
+    constructor(changeDetectorRef, snackbar, stTableTranslations) {
         super();
         this.changeDetectorRef = changeDetectorRef;
         this.snackbar = snackbar;
+        this.stTableTranslations = stTableTranslations;
         this.showGlobalSearch = false;
         this.tableTitle = '';
         this.pageSize = 10;
@@ -840,7 +894,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
                 sort: false,
                 filter: false,
                 width: '60px',
-                selectColumnLabel: 'Row Select',
+                selectColumnLabel: this.stTableTranslations.getTranslations().rowSelectColumnLabel,
             });
         }
         if (this.rowEditing) {
@@ -851,7 +905,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
                 sort: false,
                 filter: false,
                 width: '110px',
-                selectColumnLabel: 'Row Actions',
+                selectColumnLabel: this.stTableTranslations.getTranslations().rowActionsColumnLabel,
             });
         }
         this.loadLocalStorageData();
@@ -1123,13 +1177,13 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
             sortOrder: 'asc',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", pageSize: "pageSize", dataLength: "dataLength", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", localStorageName: "localStorageName", lazyLoading: "lazyLoading", isLoading: "isLoading", initColumns: "initColumns", rowClickAction: "rowClickAction", data: "data", rowEditing: "rowEditing", rowSelecting: "rowSelecting", selectionFieldLabel: "selectionFieldLabel" }, outputs: { loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n  @if (isLoading) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle\"\r\n      [allowPickColumns]=\"allowPickColumns\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [allowReorderColumns]=\"allowReorderColumns\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting') {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      (click)=\"rowClickAction ? rowClickAction(row) : null\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength\"\r\n  ></mat-paginator>\r\n  @if (rowSelecting) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }} row selected\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:5rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", pageSize: "pageSize", dataLength: "dataLength", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", localStorageName: "localStorageName", lazyLoading: "lazyLoading", isLoading: "isLoading", initColumns: "initColumns", rowClickAction: "rowClickAction", data: "data", rowEditing: "rowEditing", rowSelecting: "rowSelecting", selectionFieldLabel: "selectionFieldLabel" }, outputs: { loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n  @if (isLoading) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle\"\r\n      [allowPickColumns]=\"allowPickColumns\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [allowReorderColumns]=\"allowReorderColumns\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting') {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      (click)=\"rowClickAction ? rowClickAction(row) : null\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength\"\r\n  ></mat-paginator>\r\n  @if (rowSelecting) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ (stTableTranslations.translations$ | async)!.rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:5rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"st-material-table\">\r\n  @if (isLoading) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle\"\r\n      [allowPickColumns]=\"allowPickColumns\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [allowReorderColumns]=\"allowReorderColumns\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting') {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      (click)=\"rowClickAction ? rowClickAction(row) : null\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength\"\r\n  ></mat-paginator>\r\n  @if (rowSelecting) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }} row selected\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:5rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }], propDecorators: { paginator: [{
+            args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"st-material-table\">\r\n  @if (isLoading) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle\"\r\n      [allowPickColumns]=\"allowPickColumns\"\r\n      [showGlobalSearch]=\"showGlobalSearch\"\r\n      [allowReorderColumns]=\"allowReorderColumns\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting') {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      (click)=\"rowClickAction ? rowClickAction(row) : null\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength\"\r\n  ></mat-paginator>\r\n  @if (rowSelecting) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ (stTableTranslations.translations$ | async)!.rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:5rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.dark-theme .st-material-table table{background-color:transparent!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table tbody tr:hover{background-color:var(--primeng-table-hover-background)!important}.dark-theme mat-paginator{background-color:transparent!important}.dark-theme .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .reorder-column-list .reorder-column-element p,.dark-theme .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .filter .filter-title{color:#eee!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
             }], sort: [{
@@ -1178,7 +1232,18 @@ class StTablesModule {
         this.matIconRegistry = matIconRegistry;
         this.matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, deps: [{ token: i2.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static forRoot(config) {
+        return {
+            ngModule: StTablesModule,
+            providers: [
+                {
+                    provide: 'ST_TABLES_CONFIG',
+                    useValue: config || {},
+                },
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, deps: [{ token: i5.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, declarations: [LocalTableComponent,
             SelectTableComponent,
             ConfigurationsComponent,
@@ -1294,7 +1359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     exports: [LocalTableComponent, SelectTableComponent, MaterialTableComponent],
                     providers: [LocalTableService, MatDatepickerModule],
                 }]
-        }], ctorParameters: () => [{ type: i2.MatIconRegistry }] });
+        }], ctorParameters: () => [{ type: i5.MatIconRegistry }] });
 
 /*
  * Public API Surface of ngx-st-tables