ngx-st-tables 15.1.21 → 15.1.23

package/assets/base-table.scss

@@ -152,10 +152,18 @@ table {
 
           &.active {
             background-color: transparent !important;
+
+            td {
+              border-bottom-color: #0000001f !important;
+            }
           }
 
           &:hover {
             background-color: transparent !important;
+
+            td {
+              border-bottom-color: #0000001f !important;
+            }
           }
         }
       }

package/esm2020/lib/components/local-table/local-table.component.mjs

@@ -227,10 +227,10 @@ export class LocalTableComponent {
     }
 }
 LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalTableComponent, deps: [{ token: i1.LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], 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: ["sticky", "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.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], 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: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i15.ConfigurationsComponent, selector: "st-configurations[configurationsSettings]", inputs: ["configurationsSettings", "configurations", "initSelectedConfig"], outputs: ["createNewConfig", "removeConfig", "changeConfig"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], 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: ["sticky", "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.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], 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: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i15.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: "15.2.10", ngImport: i0, type: LocalTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
+            args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i2.ActivatedRoute }]; }, propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]

package/esm2020/lib/components/select-table/select-table.component.mjs

@@ -68,10 +68,10 @@ export class SelectTableComponent {
     }
 }
 SelectTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+SelectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-st-select-table', 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
+            args: [{ selector: 'ngx-st-select-table', 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]

package/fesm2015/ngx-st-tables.mjs

@@ -332,10 +332,10 @@ class LocalTableComponent {
     }
 }
 LocalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalTableComponent, deps: [{ token: LocalTableService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.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: ["sticky", "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$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], 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.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]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], 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 });
+LocalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: ["", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.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: ["sticky", "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$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], 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.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]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], 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: "15.2.10", ngImport: i0, type: LocalTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
+            args: [{ selector: 'ngx-st-local-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"local-table\">\r\n  <div class=\"row align-items-center\">\r\n    <div\r\n      class=\"col row align-items-center\"\r\n      style=\"padding: 0\"\r\n      *ngIf=\"configurationsSettings || allowPickColumns\"\r\n    >\r\n      <div class=\"col-auto\" style=\"padding: 0\" *ngIf=\"allowPickColumns\">\r\n        <button\r\n          mat-icon-button\r\n          class=\"col-auto\"\r\n          [matMenuTriggerFor]=\"columnsMenu\"\r\n        >\r\n          <span class=\"material-icons-outlined\"> view_week </span>\r\n        </button>\r\n        <mat-menu #columnsMenu=\"matMenu\" xPosition=\"after\">\r\n          <ng-container *ngFor=\"let column of columnsArray\">\r\n            <div mat-menu-item *ngIf=\"!column.notShowInColumnPick\">\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          </ng-container>\r\n        </mat-menu>\r\n      </div>\r\n\r\n      <st-configurations\r\n        *ngIf=\"configurationsSettings\"\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    </div>\r\n\r\n    <div\r\n      class=\"col\"\r\n      style=\"padding: 0; margin-bottom: -15px\"\r\n      *ngIf=\"globalSearchSettings?.show\"\r\n    >\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  </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    <ng-container\r\n      [matColumnDef]=\"column\"\r\n      *ngFor=\"let column of displayedColumns\"\r\n    >\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        <span\r\n          class=\"material-icons search-icon\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          *ngIf=\"columns[column].search\"\r\n        >\r\n          search\r\n        </span>\r\n        <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n          <mat-form-field class=\"col\">\r\n            <mat-label>{{ columns[column].searchLabel || 'Search' }}</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        <div\r\n          class=\"actions-container\"\r\n          style=\"overflow-y: hidden\"\r\n          [ngClass]=\"{ 'justify-content-end': columns[column].flexRight }\"\r\n          *ngIf=\"columns[column].actions && columns[column].actions!.length > 0\"\r\n        >\r\n          <ng-container *ngFor=\"let action of columns[column].actions\">\r\n            <ng-container *ngIf=\"checkIfActionVisible(element, 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                *ngIf=\"!action.url && action.action\"\r\n                matTooltip=\"{{ action.tooltipName || '' }}\"\r\n                [matTooltipDisabled]=\"!!!action.tooltipName\"\r\n                (click)=\"action.action(element)\"\r\n              >\r\n                <span class=\"material-icons\">{{ action.iconName }}</span>\r\n              </button>\r\n\r\n              <a *ngIf=\"action.url\" [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                  <span class=\"material-icons\">{{ action.iconName }}</span>\r\n                </button>\r\n              </a>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!columns[column].actions\">\r\n          <ng-container *ngIf=\"columns[column].translateValue\">\r\n            <p style=\"margin: 0; padding: 0\">\r\n              {{ columns[column].translateValue![element[column]] || '' }}\r\n            </p>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columns[column].translateValue\">\r\n            <ng-container\r\n              *ngIf=\"!columns[column].type || columns[column].type === 'string'\"\r\n            >\r\n              <p style=\"margin: 0; padding: 0\">{{ element[column] }}</p>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"columns[column].type === 'date'\">\r\n              <p style=\"margin: 0; padding: 0\">\r\n                {{ element[column] | stDateTimeFormatPipe }}\r\n              </p>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
         }], ctorParameters: function () { return [{ type: LocalTableService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -421,10 +421,10 @@ class SelectTableComponent {
     }
 }
 SelectTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["sticky", "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$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+SelectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["sticky", "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$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-st-select-table', 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
+            args: [{ selector: 'ngx-st-select-table', 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        <i class=\"material-icons\" (click)=\"clearSearch()\">clear</i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <table mat-table [dataSource]=\"tableSource\">\r\n    <ng-container *ngFor=\"let col of columns\" [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        <ng-container *ngIf=\"col === 'active'\">\r\n          <i *ngIf=\"checkActiveRow(element)\" class=\"material-icons active-row\"\r\n            >done</i\r\n          >\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"col !== 'active'\">\r\n          {{ element[col] }}\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\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", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]