ngx-st-tables 18.0.59 → 19.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-st-tables.mjs +52 -52
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/package.json +8 -10
- package/esm2022/lib/components/material-table/material-table-caption/material-table-caption.component.mjs +0 -168
- package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.mjs +0 -133
- package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter.component.mjs +0 -299
- package/esm2022/lib/components/material-table/material-table-caption/material-table-order-column-dialog/material-table-order-column-dialog.component.mjs +0 -37
- package/esm2022/lib/components/material-table/material-table-row-cell/material-table-row-cell.component.mjs +0 -166
- package/esm2022/lib/components/material-table/material-table-selected-rows/material-table-selected-rows.component.mjs +0 -32
- package/esm2022/lib/components/material-table/material-table.component.mjs +0 -976
- package/esm2022/lib/components/select-table/select-table.component.mjs +0 -102
- package/esm2022/lib/constants/default-translations.mjs +0 -31
- package/esm2022/lib/constants/map-table-data-to-api.mjs +0 -48
- package/esm2022/lib/models/models.mjs +0 -2
- package/esm2022/lib/models/st-material-table-column.model.mjs +0 -2
- package/esm2022/lib/models/st-tables-translations.model.mjs +0 -2
- package/esm2022/lib/models/view/view-st-material-table-column.model.mjs +0 -2
- package/esm2022/lib/ngx-st-tables.module.mjs +0 -176
- package/esm2022/lib/pipes/date-without-timezone-format.pipe.mjs +0 -46
- package/esm2022/lib/services/st-tables-translations.service.mjs +0 -35
- package/esm2022/ngx-st-tables.mjs +0 -5
- package/esm2022/public-api.mjs +0 -14
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal,
|
|
2
|
+
import { signal, Optional, Inject, Injectable, EventEmitter, Output, Input, ViewChild, Component, input, output, computed, effect, ChangeDetectionStrategy, inject, Pipe, ViewChildren, ViewEncapsulation, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/material/paginator';
|
|
4
4
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
5
5
|
import * as i3$1 from '@angular/material/table';
|
|
@@ -24,28 +24,26 @@ import * as i6$1 from '@angular/material/tooltip';
|
|
|
24
24
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
25
25
|
import * as i8 from '@angular/material/select';
|
|
26
26
|
import { MatSelect, MatSelectModule } from '@angular/material/select';
|
|
27
|
-
import * as i6 from '@angular/material/
|
|
28
|
-
import { MatNativeDateModule } from '@angular/material/core';
|
|
29
|
-
import * as i7$1 from '@angular/material/datepicker';
|
|
27
|
+
import * as i6 from '@angular/material/datepicker';
|
|
30
28
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
31
29
|
import * as i4$2 from '@angular/cdk/drag-drop';
|
|
32
30
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
33
|
-
import * as
|
|
31
|
+
import * as i9 from '@angular/material/badge';
|
|
34
32
|
import { MatBadge } from '@angular/material/badge';
|
|
35
33
|
import * as i5$2 from '@angular/material/menu';
|
|
36
34
|
import { MatMenuModule } from '@angular/material/menu';
|
|
37
35
|
import * as i6$2 from '@angular/material/chips';
|
|
38
36
|
import { MatChip, MatChipRemove } from '@angular/material/chips';
|
|
39
|
-
import * as i10
|
|
37
|
+
import * as i10 from '@angular/material/sort';
|
|
40
38
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
41
39
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
42
40
|
import * as i8$1 from '@angular/router';
|
|
43
41
|
import { RouterModule } from '@angular/router';
|
|
44
|
-
import * as
|
|
42
|
+
import * as i11 from '@angular/material/checkbox';
|
|
45
43
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
46
|
-
import * as
|
|
44
|
+
import * as i12 from 'ngx-st-qty-input';
|
|
47
45
|
import { StQtyInputModule } from 'ngx-st-qty-input';
|
|
48
|
-
import * as
|
|
46
|
+
import * as i14 from 'ngx-st-date-format';
|
|
49
47
|
import { StDateFormatModule } from 'ngx-st-date-format';
|
|
50
48
|
import * as i1$1 from 'ngx-st-snack-bar';
|
|
51
49
|
import { StSnackBarModule } from 'ngx-st-snack-bar';
|
|
@@ -54,6 +52,7 @@ import * as i12$1 from '@angular/material/progress-spinner';
|
|
|
54
52
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
55
53
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
56
54
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
55
|
+
import { MatNativeDateModule } from '@angular/material/core';
|
|
57
56
|
import { MatRadioButton } from '@angular/material/radio';
|
|
58
57
|
|
|
59
58
|
const DEFAULT_TRANSLATIONS = {
|
|
@@ -104,10 +103,10 @@ class StTablesTranslationsService {
|
|
|
104
103
|
getTranslations() {
|
|
105
104
|
return this.translations;
|
|
106
105
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
108
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesTranslationsService, deps: [{ token: 'ST_TABLES_CONFIG', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
107
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesTranslationsService, providedIn: 'root' }); }
|
|
109
108
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesTranslationsService, decorators: [{
|
|
111
110
|
type: Injectable,
|
|
112
111
|
args: [{
|
|
113
112
|
providedIn: 'root',
|
|
@@ -176,12 +175,12 @@ class SelectTableComponent {
|
|
|
176
175
|
checkActiveRow(row) {
|
|
177
176
|
return !!this.rowSelected.find(activeRow => activeRow === row);
|
|
178
177
|
}
|
|
179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i4$1.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: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
178
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
179
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SelectTableComponent, isStandalone: false, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i4$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
181
180
|
}
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SelectTableComponent, decorators: [{
|
|
183
182
|
type: Component,
|
|
184
|
-
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 <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
183
|
+
args: [{ selector: 'ngx-st-select-table', standalone: false, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
185
184
|
}], ctorParameters: () => [], propDecorators: { paginator: [{
|
|
186
185
|
type: ViewChild,
|
|
187
186
|
args: [MatPaginator]
|
|
@@ -305,8 +304,8 @@ class MaterialTableFilterComponent {
|
|
|
305
304
|
const day = date.getDate().toString().padStart(2, '0');
|
|
306
305
|
return `${year}-${month}-${day}`;
|
|
307
306
|
}
|
|
308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
309
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
307
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableFilterComponent, deps: [{ token: StTablesTranslationsService }, { token: i7.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
308
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableFilterComponent, isStandalone: false, selector: "ngx-st-material-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValueChanged: "filterValueChanged" }, ngImport: i0, template: `
|
|
310
309
|
<form class="row" [formGroup]="formGroup">
|
|
311
310
|
<div class="col-auto">
|
|
312
311
|
<mat-form-field appearance="outline" class="match-mode-field">
|
|
@@ -399,9 +398,9 @@ class MaterialTableFilterComponent {
|
|
|
399
398
|
</div>
|
|
400
399
|
}
|
|
401
400
|
</form>
|
|
402
|
-
`, isInline: true, styles: [":host{width:100%}form.row{gap:8px;width:100%;>.col-auto,>.col{padding:0}}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type:
|
|
401
|
+
`, isInline: true, styles: [":host{width:100%}form.row{gap:8px;width:100%;>.col-auto,>.col{padding:0}}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
403
402
|
}
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableFilterComponent, decorators: [{
|
|
405
404
|
type: Component,
|
|
406
405
|
args: [{ selector: 'ngx-st-material-table-filter', template: `
|
|
407
406
|
<form class="row" [formGroup]="formGroup">
|
|
@@ -496,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
496
495
|
</div>
|
|
497
496
|
}
|
|
498
497
|
</form>
|
|
499
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%}form.row{gap:8px;width:100%;>.col-auto,>.col{padding:0}}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"] }]
|
|
498
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{width:100%}form.row{gap:8px;width:100%;>.col-auto,>.col{padding:0}}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"] }]
|
|
500
499
|
}], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i7.NonNullableFormBuilder }, { type: i0.ChangeDetectorRef }] });
|
|
501
500
|
|
|
502
501
|
class MaterialTableFilterDialogComponent {
|
|
@@ -614,12 +613,12 @@ class MaterialTableFilterDialogComponent {
|
|
|
614
613
|
return 'contains';
|
|
615
614
|
}
|
|
616
615
|
}
|
|
617
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableFilterDialogComponent, isStandalone: false, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ translations().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"translations().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"translations().collapseAllFilters\"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"translations().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"translations().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between dialog-actions-wrapper\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ translations().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ translations().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}.dialog-actions-wrapper{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MaterialTableFilterComponent, selector: "ngx-st-material-table-filter", inputs: ["column", "filterValue"], outputs: ["filterValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
619
618
|
}
|
|
620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableFilterDialogComponent, decorators: [{
|
|
621
620
|
type: Component,
|
|
622
|
-
args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ translations().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"translations().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"translations().collapseAllFilters\"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"translations().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"translations().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between dialog-actions-wrapper\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ translations().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ translations().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}.dialog-actions-wrapper{width:100%}\n"] }]
|
|
621
|
+
args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ translations().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"translations().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"translations().collapseAllFilters\"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"translations().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"translations().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between dialog-actions-wrapper\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ translations().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ translations().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}.dialog-actions-wrapper{width:100%}\n"] }]
|
|
623
622
|
}] });
|
|
624
623
|
|
|
625
624
|
class MaterialTableOrderColumnDialogComponent {
|
|
@@ -642,12 +641,12 @@ class MaterialTableOrderColumnDialogComponent {
|
|
|
642
641
|
columnsOrder: this.columns().map(column => column.field),
|
|
643
642
|
});
|
|
644
643
|
}
|
|
645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableOrderColumnDialogComponent, isStandalone: false, selector: "st-material-table-order-column-dialog", ngImport: i0, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns(); track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
647
646
|
}
|
|
648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, decorators: [{
|
|
649
648
|
type: Component,
|
|
650
|
-
args: [{ selector: 'st-material-table-order-column-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns(); track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
649
|
+
args: [{ selector: 'st-material-table-order-column-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns(); track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
651
650
|
}] });
|
|
652
651
|
|
|
653
652
|
class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
@@ -791,12 +790,12 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
791
790
|
this.selectedColumns.setValue(this._columns.filter(col => col.visible).map(col => col.field) || []);
|
|
792
791
|
this.columnsOrder = this._columns.map(col => col.field) || [];
|
|
793
792
|
}
|
|
794
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, initGlobalSearch: { classPropertyName: "initGlobalSearch", publicName: "initGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, initFilters: { classPropertyName: "initFilters", publicName: "initFilters", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, creatingRow: { classPropertyName: "creatingRow", publicName: "creatingRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings", addNewRow: "addNewRow" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle()) {\r\n <p class=\"table-title\">{{ tableTitle() }}</p>\r\n }\r\n\r\n @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns(); track column.field) {\r\n <mat-option\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button type=\"button\" mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount()\"\r\n [matBadgeHidden]=\"!activeFiltersCount()\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"button\"\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableCaptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableCaptionComponent, isStandalone: false, selector: "st-material-table-caption", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, initGlobalSearch: { classPropertyName: "initGlobalSearch", publicName: "initGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, initFilters: { classPropertyName: "initFilters", publicName: "initFilters", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, creatingRow: { classPropertyName: "creatingRow", publicName: "creatingRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings", addNewRow: "addNewRow" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle()) {\r\n <p class=\"table-title\">{{ tableTitle() }}</p>\r\n }\r\n\r\n @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns(); track column.field) {\r\n <mat-option\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button type=\"button\" mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount()\"\r\n [matBadgeHidden]=\"!activeFiltersCount()\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"button\"\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
796
795
|
}
|
|
797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
|
|
798
797
|
type: Component,
|
|
799
|
-
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle()) {\r\n <p class=\"table-title\">{{ tableTitle() }}</p>\r\n }\r\n\r\n @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns(); track column.field) {\r\n <mat-option\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button type=\"button\" mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount()\"\r\n [matBadgeHidden]=\"!activeFiltersCount()\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"button\"\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
|
|
798
|
+
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle()) {\r\n <p class=\"table-title\">{{ tableTitle() }}</p>\r\n }\r\n\r\n @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value!.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns(); track column.field) {\r\n <mat-option\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button type=\"button\" mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount()\"\r\n [matBadgeHidden]=\"!activeFiltersCount()\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"button\"\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
|
|
800
799
|
}] });
|
|
801
800
|
|
|
802
801
|
class MaterialTableSelectedRowsComponent {
|
|
@@ -815,12 +814,12 @@ class MaterialTableSelectedRowsComponent {
|
|
|
815
814
|
}
|
|
816
815
|
this.removeSelectedRow.emit(row);
|
|
817
816
|
}
|
|
818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
817
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableSelectedRowsComponent, deps: [{ token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableSelectedRowsComponent, isStandalone: false, selector: "st-material-table-selected-rows", inputs: { allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: true, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: true, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: true, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: true, transformFunction: null }, selectRowValueDisplay: { classPropertyName: "selectRowValueDisplay", publicName: "selectRowValueDisplay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeSelectedRow: "removeSelectedRow" }, ngImport: i0, template: "@if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n @if (!selectRowOnlyOne()) {\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selectedRows().length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selectedRows(); track row.id) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"selectedRows().length <= 0\"\r\n (click)=\"onRemoveSelectedRow($event, row)\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n />\r\n <mat-icon class=\"delete-icon\">delete</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n @if (selectedRows().length > 0) {\r\n <mat-chip>\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedRows()[0] }\"\r\n />\r\n <button\r\n matChipRemove\r\n type=\"button\"\r\n aria-label=\"Remove selected item\"\r\n (click)=\"onRemoveSelectedRow($event, selectedRows()[0])\"\r\n >\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #selectedFieldLabel let-row>\r\n @if (selectRowValueDisplay()) {\r\n {{ selectRowValueDisplay()!(row) }}\r\n } @else {\r\n {{ row[selectionFieldLabel()] }}\r\n }\r\n</ng-template>\r\n", styles: [".st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}.st-material-table-selected-rows .delete-icon{margin-right:0;margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
820
819
|
}
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableSelectedRowsComponent, decorators: [{
|
|
822
821
|
type: Component,
|
|
823
|
-
args: [{ selector: 'st-material-table-selected-rows', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n @if (!selectRowOnlyOne()) {\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selectedRows().length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selectedRows(); track row.id) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"selectedRows().length <= 0\"\r\n (click)=\"onRemoveSelectedRow($event, row)\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n />\r\n <mat-icon class=\"delete-icon\">delete</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n @if (selectedRows().length > 0) {\r\n <mat-chip>\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedRows()[0] }\"\r\n />\r\n <button\r\n matChipRemove\r\n type=\"button\"\r\n aria-label=\"Remove selected item\"\r\n (click)=\"onRemoveSelectedRow($event, selectedRows()[0])\"\r\n >\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #selectedFieldLabel let-row>\r\n @if (selectRowValueDisplay()) {\r\n {{ selectRowValueDisplay()!(row) }}\r\n } @else {\r\n {{ row[selectionFieldLabel()] }}\r\n }\r\n</ng-template>\r\n", styles: [".st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}.st-material-table-selected-rows .delete-icon{margin-right:0;margin-left:10px}\n"] }]
|
|
822
|
+
args: [{ selector: 'st-material-table-selected-rows', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n @if (!selectRowOnlyOne()) {\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selectedRows().length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selectedRows(); track row.id) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"selectedRows().length <= 0\"\r\n (click)=\"onRemoveSelectedRow($event, row)\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n />\r\n <mat-icon class=\"delete-icon\">delete</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n } @else {\r\n @if (selectedRows().length > 0) {\r\n <mat-chip>\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedFieldLabel\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedRows()[0] }\"\r\n />\r\n <button\r\n matChipRemove\r\n type=\"button\"\r\n aria-label=\"Remove selected item\"\r\n (click)=\"onRemoveSelectedRow($event, selectedRows()[0])\"\r\n >\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #selectedFieldLabel let-row>\r\n @if (selectRowValueDisplay()) {\r\n {{ selectRowValueDisplay()!(row) }}\r\n } @else {\r\n {{ row[selectionFieldLabel()] }}\r\n }\r\n</ng-template>\r\n", styles: [".st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}.st-material-table-selected-rows .delete-icon{margin-right:0;margin-left:10px}\n"] }]
|
|
824
823
|
}], ctorParameters: () => [{ type: StTablesTranslationsService }] });
|
|
825
824
|
|
|
826
825
|
class DateWithoutTimezoneFormatPipe {
|
|
@@ -857,13 +856,14 @@ class DateWithoutTimezoneFormatPipe {
|
|
|
857
856
|
return '';
|
|
858
857
|
}
|
|
859
858
|
}
|
|
860
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
861
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
859
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateWithoutTimezoneFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
860
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: DateWithoutTimezoneFormatPipe, isStandalone: false, name: "stDateWithoutTimezoneFormatPipe" }); }
|
|
862
861
|
}
|
|
863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateWithoutTimezoneFormatPipe, decorators: [{
|
|
864
863
|
type: Pipe,
|
|
865
864
|
args: [{
|
|
866
865
|
name: 'stDateWithoutTimezoneFormatPipe',
|
|
866
|
+
standalone: false
|
|
867
867
|
}]
|
|
868
868
|
}], ctorParameters: () => [] });
|
|
869
869
|
|
|
@@ -999,12 +999,12 @@ class MaterialTableRowCellComponent {
|
|
|
999
999
|
triggerChangeDetection() {
|
|
1000
1000
|
this.changeDetectorRef.detectChanges();
|
|
1001
1001
|
}
|
|
1002
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, isFirstEditableColumn: { classPropertyName: "isFirstEditableColumn", publicName: "isFirstEditableColumn", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", isSignal: true, isRequired: false, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, mobileView: { classPropertyName: "mobileView", publicName: "mobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"(action.disabled && action.disabled(rowData())) ? null : action.url\"\r\n [class.disabled-link]=\"action.disabled && action.disabled(rowData())\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('date-without-timezone') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateWithoutTimezoneFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"$event.stopPropagation(); saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n\r\n @if (allowEditInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation(); editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowDeleteInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (allowEditRow() && (rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"number\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n<!-- <mat-option value=\"\"></mat-option>-->\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'number-qty-input') {\r\n <ngx-st-qty-input\r\n appearance=\"outline\"\r\n [qtyModel]=\"getFieldValue(column.field)\"\r\n [error]=\"!!fieldError()\"\r\n (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n ></ngx-st-qty-input>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}a.disabled-link{pointer-events:none;cursor:default}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element,.field-error ::ng-deep .mat-mdc-select{color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.QtyInputComponent, selector: "ngx-st-qty-input", inputs: ["qtyModel", "allowNegative", "disabled", "showError", "error", "appearance", "inputWidth"], outputs: ["qtyModelChange", "newValueEmitter"] }, { kind: "component", type: i7$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "stDateFormatPipe" }, { kind: "pipe", type: DateWithoutTimezoneFormatPipe, name: "stDateWithoutTimezoneFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1002
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableRowCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableRowCellComponent, isStandalone: false, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, isFirstEditableColumn: { classPropertyName: "isFirstEditableColumn", publicName: "isFirstEditableColumn", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", isSignal: true, isRequired: false, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, mobileView: { classPropertyName: "mobileView", publicName: "mobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"(action.disabled && action.disabled(rowData())) ? null : action.url\"\r\n [class.disabled-link]=\"action.disabled && action.disabled(rowData())\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('date-without-timezone') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateWithoutTimezoneFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"$event.stopPropagation(); saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n\r\n @if (allowEditInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation(); editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowDeleteInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (allowEditRow() && (rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"number\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n<!-- <mat-option value=\"\"></mat-option>-->\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'number-qty-input') {\r\n <ngx-st-qty-input\r\n appearance=\"outline\"\r\n [qtyModel]=\"getFieldValue(column.field)\"\r\n [error]=\"!!fieldError()\"\r\n (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n ></ngx-st-qty-input>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}a.disabled-link{pointer-events:none;cursor:default}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element,.field-error ::ng-deep .mat-mdc-select{color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i12.QtyInputComponent, selector: "ngx-st-qty-input", inputs: ["qtyModel", "allowNegative", "disabled", "showError", "error", "appearance", "inputWidth"], outputs: ["qtyModelChange", "newValueEmitter"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "stDateFormatPipe" }, { kind: "pipe", type: DateWithoutTimezoneFormatPipe, name: "stDateWithoutTimezoneFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1004
1004
|
}
|
|
1005
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
|
|
1006
1006
|
type: Component,
|
|
1007
|
-
args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"(action.disabled && action.disabled(rowData())) ? null : action.url\"\r\n [class.disabled-link]=\"action.disabled && action.disabled(rowData())\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('date-without-timezone') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateWithoutTimezoneFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"$event.stopPropagation(); saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n\r\n @if (allowEditInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation(); editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowDeleteInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (allowEditRow() && (rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"number\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n<!-- <mat-option value=\"\"></mat-option>-->\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'number-qty-input') {\r\n <ngx-st-qty-input\r\n appearance=\"outline\"\r\n [qtyModel]=\"getFieldValue(column.field)\"\r\n [error]=\"!!fieldError()\"\r\n (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n ></ngx-st-qty-input>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}a.disabled-link{pointer-events:none;cursor:default}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element,.field-error ::ng-deep .mat-mdc-select{color:#f44336}\n"] }]
|
|
1007
|
+
args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"(action.disabled && action.disabled(rowData())) ? null : action.url\"\r\n [class.disabled-link]=\"action.disabled && action.disabled(rowData())\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n [disabled]=\"action.disabled ? action.disabled(rowData()) : false\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action.iconName) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('date-without-timezone') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateWithoutTimezoneFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"$event.stopPropagation(); saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n\r\n @if (allowEditInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation(); editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowDeleteInEditRow()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"$event.stopPropagation(); deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (allowEditRow() && (rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"text\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n type=\"number\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n<!-- <mat-option value=\"\"></mat-option>-->\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'number-qty-input') {\r\n <ngx-st-qty-input\r\n appearance=\"outline\"\r\n [qtyModel]=\"getFieldValue(column.field)\"\r\n [error]=\"!!fieldError()\"\r\n (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n ></ngx-st-qty-input>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n [class.field-error]=\"fieldError()\"\r\n >\r\n <mat-select\r\n [ngModel]=\"getFieldValue(column.field)\"\r\n (ngModelChange)=\"\r\n setFieldValue(column.field, $event);\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"\r\n column.disableEdit ? column.disableEdit(rowData()) : false\r\n \"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}a.disabled-link{pointer-events:none;cursor:default}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element,.field-error ::ng-deep .mat-mdc-select{color:#f44336}\n"] }]
|
|
1008
1008
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matInput: [{
|
|
1009
1009
|
type: ViewChild,
|
|
1010
1010
|
args: [MatInput]
|
|
@@ -1935,8 +1935,8 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1935
1935
|
}
|
|
1936
1936
|
}
|
|
1937
1937
|
}
|
|
1938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1939
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, selectRowValueDisplay: { classPropertyName: "selectRowValueDisplay", publicName: "selectRowValueDisplay", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, initFilterMethod: { classPropertyName: "initFilterMethod", publicName: "initFilterMethod", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, setNewDataWithoutRefresh: { classPropertyName: "setNewDataWithoutRefresh", publicName: "setNewDataWithoutRefresh", isSignal: true, isRequired: false, transformFunction: null }, compactView: { classPropertyName: "compactView", publicName: "compactView", isSignal: true, isRequired: false, transformFunction: null }, actionRowWidth: { classPropertyName: "actionRowWidth", publicName: "actionRowWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rowCells", predicate: MaterialTableRowCellComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{\r\n 'no-hover': !rowClickAction(),\r\n 'is-expended-table': allowExtendRow(),\r\n 'compact-view': compactView()\r\n }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column.field) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selectedRows().length > 0 && isAllSelected()\"\r\n [indeterminate]=\"selectedRows().length > 0 && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index; let j = dataIndex\"\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(allowExtendRow() ? j : i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"isRowSelected(element)\"\r\n [rowIsExpanded]=\"expandedRowIndex() === (allowExtendRow() ? j : i)\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n [allowEditRow]=\"allowEditRow()\"\r\n [allowEditInEditRow]=\"allowEditInEditRow()\"\r\n [allowDeleteInEditRow]=\"allowDeleteInEditRow()\"\r\n [fieldError]=\"validationErrors[element.id]?.[column.field]\"\r\n [mobileView]=\"mobileView()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"\r\n deleteRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (saveEditRowEmitter)=\"\r\n saveEditRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(\r\n element,\r\n column,\r\n $event.value,\r\n allowExtendRow() ? j : i\r\n )\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = dataIndex\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"expandedRowIndex() === i ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element, rowIndex: expandedRowIndex() }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString; let i = dataIndex\"\r\n [class.expanded-expanded-row]=\"expandedRowIndex() === i\"\r\n (click)=\"clickRowAction(row, i)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n <st-material-table-selected-rows\r\n [allowSelectRow]=\"allowSelectRow()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [selectedRows]=\"selectedRows()\"\r\n [selectionFieldLabel]=\"selectionFieldLabel()\"\r\n [selectRowValueDisplay]=\"selectRowValueDisplay()\"\r\n (removeSelectedRow)=\"onRemoveSelectedRow($event)\"\r\n ></st-material-table-selected-rows>\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .edit-all-rows-button{width:98px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i12$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "allowCreateRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowIsSelected", "rowIsExpanded", "rowEditing", "allowEditRow", "allowDeleteInEditRow", "allowEditInEditRow", "fieldError", "mobileView"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }, { kind: "component", type: MaterialTableSelectedRowsComponent, selector: "st-material-table-selected-rows", inputs: ["allowSelectRow", "selectRowOnlyOne", "selectedRows", "selectionFieldLabel", "selectRowValueDisplay"], outputs: ["removeSelectedRow"] }], animations: [
|
|
1938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }, { token: i3$2.StDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MaterialTableComponent, isStandalone: false, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, selectRowValueDisplay: { classPropertyName: "selectRowValueDisplay", publicName: "selectRowValueDisplay", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, initFilterMethod: { classPropertyName: "initFilterMethod", publicName: "initFilterMethod", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, setNewDataWithoutRefresh: { classPropertyName: "setNewDataWithoutRefresh", publicName: "setNewDataWithoutRefresh", isSignal: true, isRequired: false, transformFunction: null }, compactView: { classPropertyName: "compactView", publicName: "compactView", isSignal: true, isRequired: false, transformFunction: null }, actionRowWidth: { classPropertyName: "actionRowWidth", publicName: "actionRowWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rowCells", predicate: MaterialTableRowCellComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{\r\n 'no-hover': !rowClickAction(),\r\n 'is-expended-table': allowExtendRow(),\r\n 'compact-view': compactView()\r\n }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column.field) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selectedRows().length > 0 && isAllSelected()\"\r\n [indeterminate]=\"selectedRows().length > 0 && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index; let j = dataIndex\"\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(allowExtendRow() ? j : i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"isRowSelected(element)\"\r\n [rowIsExpanded]=\"expandedRowIndex() === (allowExtendRow() ? j : i)\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n [allowEditRow]=\"allowEditRow()\"\r\n [allowEditInEditRow]=\"allowEditInEditRow()\"\r\n [allowDeleteInEditRow]=\"allowDeleteInEditRow()\"\r\n [fieldError]=\"validationErrors[element.id]?.[column.field]\"\r\n [mobileView]=\"mobileView()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"\r\n deleteRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (saveEditRowEmitter)=\"\r\n saveEditRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(\r\n element,\r\n column,\r\n $event.value,\r\n allowExtendRow() ? j : i\r\n )\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = dataIndex\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"expandedRowIndex() === i ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element, rowIndex: expandedRowIndex() }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString; let i = dataIndex\"\r\n [class.expanded-expanded-row]=\"expandedRowIndex() === i\"\r\n (click)=\"clickRowAction(row, i)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n <st-material-table-selected-rows\r\n [allowSelectRow]=\"allowSelectRow()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [selectedRows]=\"selectedRows()\"\r\n [selectionFieldLabel]=\"selectionFieldLabel()\"\r\n [selectRowValueDisplay]=\"selectRowValueDisplay()\"\r\n (removeSelectedRow)=\"onRemoveSelectedRow($event)\"\r\n ></st-material-table-selected-rows>\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .edit-all-rows-button{width:98px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i12$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "allowCreateRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowIsSelected", "rowIsExpanded", "rowEditing", "allowEditRow", "allowDeleteInEditRow", "allowEditInEditRow", "fieldError", "mobileView"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }, { kind: "component", type: MaterialTableSelectedRowsComponent, selector: "st-material-table-selected-rows", inputs: ["allowSelectRow", "selectRowOnlyOne", "selectedRows", "selectionFieldLabel", "selectRowValueDisplay"], outputs: ["removeSelectedRow"] }], animations: [
|
|
1940
1940
|
trigger('detailExpand', [
|
|
1941
1941
|
state('collapsed,void', style({ height: '0px', minHeight: '0', border: 'none' })),
|
|
1942
1942
|
state('expanded', style({ height: '*' })),
|
|
@@ -1944,7 +1944,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1944
1944
|
]),
|
|
1945
1945
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1946
1946
|
}
|
|
1947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MaterialTableComponent, decorators: [{
|
|
1948
1948
|
type: Component,
|
|
1949
1949
|
args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
|
|
1950
1950
|
trigger('detailExpand', [
|
|
@@ -1952,7 +1952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1952
1952
|
state('expanded', style({ height: '*' })),
|
|
1953
1953
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1954
1954
|
]),
|
|
1955
|
-
], template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{\r\n 'no-hover': !rowClickAction(),\r\n 'is-expended-table': allowExtendRow(),\r\n 'compact-view': compactView()\r\n }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column.field) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selectedRows().length > 0 && isAllSelected()\"\r\n [indeterminate]=\"selectedRows().length > 0 && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index; let j = dataIndex\"\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(allowExtendRow() ? j : i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"isRowSelected(element)\"\r\n [rowIsExpanded]=\"expandedRowIndex() === (allowExtendRow() ? j : i)\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n [allowEditRow]=\"allowEditRow()\"\r\n [allowEditInEditRow]=\"allowEditInEditRow()\"\r\n [allowDeleteInEditRow]=\"allowDeleteInEditRow()\"\r\n [fieldError]=\"validationErrors[element.id]?.[column.field]\"\r\n [mobileView]=\"mobileView()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"\r\n deleteRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (saveEditRowEmitter)=\"\r\n saveEditRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(\r\n element,\r\n column,\r\n $event.value,\r\n allowExtendRow() ? j : i\r\n )\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = dataIndex\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"expandedRowIndex() === i ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element, rowIndex: expandedRowIndex() }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString; let i = dataIndex\"\r\n [class.expanded-expanded-row]=\"expandedRowIndex() === i\"\r\n (click)=\"clickRowAction(row, i)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n <st-material-table-selected-rows\r\n [allowSelectRow]=\"allowSelectRow()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [selectedRows]=\"selectedRows()\"\r\n [selectionFieldLabel]=\"selectionFieldLabel()\"\r\n [selectRowValueDisplay]=\"selectRowValueDisplay()\"\r\n (removeSelectedRow)=\"onRemoveSelectedRow($event)\"\r\n ></st-material-table-selected-rows>\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .edit-all-rows-button{width:98px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
1955
|
+
], standalone: false, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{\r\n 'no-hover': !rowClickAction(),\r\n 'is-expended-table': allowExtendRow(),\r\n 'compact-view': compactView()\r\n }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column.field) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selectedRows().length > 0 && isAllSelected()\"\r\n [indeterminate]=\"selectedRows().length > 0 && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index; let j = dataIndex\"\r\n [style.width]=\"column.actionsInMenu || (column.actions && mobileView() && column.actions!.length > 1) ? '60px' : column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(allowExtendRow() ? j : i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"isRowSelected(element)\"\r\n [rowIsExpanded]=\"expandedRowIndex() === (allowExtendRow() ? j : i)\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n [allowEditRow]=\"allowEditRow()\"\r\n [allowEditInEditRow]=\"allowEditInEditRow()\"\r\n [allowDeleteInEditRow]=\"allowDeleteInEditRow()\"\r\n [fieldError]=\"validationErrors[element.id]?.[column.field]\"\r\n [mobileView]=\"mobileView()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"\r\n deleteRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (saveEditRowEmitter)=\"\r\n saveEditRow(element, column, allowExtendRow() ? j : i)\r\n \"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(\r\n element,\r\n column,\r\n $event.value,\r\n allowExtendRow() ? j : i\r\n )\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = dataIndex\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"expandedRowIndex() === i ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element, rowIndex: expandedRowIndex() }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString; let i = dataIndex\"\r\n [class.expanded-expanded-row]=\"expandedRowIndex() === i\"\r\n (click)=\"clickRowAction(row, i)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n <st-material-table-selected-rows\r\n [allowSelectRow]=\"allowSelectRow()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [selectedRows]=\"selectedRows()\"\r\n [selectionFieldLabel]=\"selectionFieldLabel()\"\r\n [selectRowValueDisplay]=\"selectRowValueDisplay()\"\r\n (removeSelectedRow)=\"onRemoveSelectedRow($event)\"\r\n ></st-material-table-selected-rows>\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .edit-all-rows-button{width:98px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table td.mat-mdc-cell.mat-column-actions-row-selecting,.st-material-table table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}.st-material-table table thead tr th .mat-sort-header-content{text-align:left}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody>tr{cursor:default}.st-material-table table.no-hover tbody>tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody>tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}.st-material-table table.compact-view tbody tr{height:40px!important}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table.is-expended-table>tbody>tr:nth-child(odd)>td{border-bottom:0!important}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0 2px;line-height:1.1rem}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table td.mat-mdc-cell.mat-column-actions-row-selecting,table.st-material-table th.mat-mdc-header-cell.mat-column-actions-row-selecting{padding-left:0}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242;padding:0 2px}table.st-material-table thead tr th .mat-sort-header-content{text-align:left}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr.expanded-element-row td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody>tr{cursor:default}table.st-material-table.no-hover tbody>tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody>tr.active>td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody>tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody>tr:hover>td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}table.st-material-table.compact-view tbody tr{height:40px!important}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody>tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody>tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody>tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody>tr.active>td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
1956
1956
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }, { type: i3$2.StDialogService }], propDecorators: { paginator: [{
|
|
1957
1957
|
type: ViewChild,
|
|
1958
1958
|
args: [MatPaginator]
|
|
@@ -2028,8 +2028,8 @@ class StTablesModule {
|
|
|
2028
2028
|
],
|
|
2029
2029
|
};
|
|
2030
2030
|
}
|
|
2031
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2032
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2031
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesModule, deps: [{ token: i3.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2032
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: StTablesModule, declarations: [MaterialTableCaptionComponent,
|
|
2033
2033
|
MaterialTableComponent,
|
|
2034
2034
|
MaterialTableOrderColumnDialogComponent,
|
|
2035
2035
|
MaterialTableFilterDialogComponent,
|
|
@@ -2068,7 +2068,7 @@ class StTablesModule {
|
|
|
2068
2068
|
MatRadioButton,
|
|
2069
2069
|
MatChip,
|
|
2070
2070
|
MatChipRemove], exports: [MaterialTableComponent, SelectTableComponent] }); }
|
|
2071
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2071
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesModule, providers: [MatDatepickerModule], imports: [CommonModule,
|
|
2072
2072
|
MatButtonModule,
|
|
2073
2073
|
MatIconModule,
|
|
2074
2074
|
MatTableModule,
|
|
@@ -2096,7 +2096,7 @@ class StTablesModule {
|
|
|
2096
2096
|
MatRadioButton,
|
|
2097
2097
|
MatChip] }); }
|
|
2098
2098
|
}
|
|
2099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StTablesModule, decorators: [{
|
|
2100
2100
|
type: NgModule,
|
|
2101
2101
|
args: [{
|
|
2102
2102
|
declarations: [
|