@cleavelandprice/ngx-lib 4.6.2 → 4.6.4
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/README.md +5 -5
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs +10 -10
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-active-directory.mjs +7 -7
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs +15 -15
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-object.mjs +7 -7
- package/fesm2022/cleavelandprice-ngx-lib-authentication-token.mjs +7 -7
- package/fesm2022/cleavelandprice-ngx-lib-authentication.mjs +4 -4
- package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs +24 -24
- package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-msgraph.mjs +4 -4
- package/fesm2022/cleavelandprice-ngx-lib-msgraph.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +9 -9
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +13 -13
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-sharepoint.mjs +13 -13
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs +36 -37
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs +14 -14
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-url-utilities.mjs +13 -13
- package/fesm2022/cleavelandprice-ngx-lib-url-utilities.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib.mjs +7 -7
- package/package.json +1 -1
- package/types/cleavelandprice-ngx-lib-table.d.ts +13 -5
|
@@ -147,10 +147,10 @@ class SharePointService extends NgxLibServiceBase {
|
|
|
147
147
|
console.log('Cache cleared');
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
151
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, deps: [{ token: SharePointServiceOptionsToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
151
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, providedIn: 'root' }); }
|
|
152
152
|
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, decorators: [{
|
|
154
154
|
type: Injectable,
|
|
155
155
|
args: [{
|
|
156
156
|
providedIn: 'root'
|
|
@@ -184,10 +184,10 @@ class UserPhotoUrlPipe {
|
|
|
184
184
|
|
|
185
185
|
return photo ? photo.encodedAbsUrl : null;*/
|
|
186
186
|
}
|
|
187
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
188
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.
|
|
187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
188
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, isStandalone: true, name: "userPhotoUrl" }); }
|
|
189
189
|
}
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, decorators: [{
|
|
191
191
|
type: Pipe,
|
|
192
192
|
args: [{
|
|
193
193
|
name: 'userPhotoUrl',
|
|
@@ -219,10 +219,10 @@ class UserPhotoComponent {
|
|
|
219
219
|
this._user = this.user();
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
222
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UserPhotoComponent, isStandalone: true, selector: "user-photo", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, userPhotos: { classPropertyName: "userPhotos", publicName: "userPhotos", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notRound: { classPropertyName: "notRound", publicName: "notRound", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (_user) {\r\n @if ((_user | userPhotoUrl:userPhotos() | async)) {\r\n <img\r\n [src]=\"_user | userPhotoUrl:userPhotos() | async\"\r\n [style.width]=\"size()\"\r\n [style.height]=\"size()\"\r\n [style.border-radius]=\"notRound() ? 'initial' : '100%'\">\r\n }\r\n}\r\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UserPhotoUrlPipe, name: "userPhotoUrl" }] }); }
|
|
224
224
|
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoComponent, decorators: [{
|
|
226
226
|
type: Component,
|
|
227
227
|
args: [{ selector: 'user-photo', imports: [
|
|
228
228
|
AsyncPipe,
|
|
@@ -247,14 +247,14 @@ class SharePointModule {
|
|
|
247
247
|
throw new Error('SharePointModule is already loaded. Import it in the AppModule only');
|
|
248
248
|
}
|
|
249
249
|
}
|
|
250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
251
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, deps: [{ token: SharePointModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
251
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, imports: [CommonModule,
|
|
252
252
|
UserPhotoUrlPipe,
|
|
253
253
|
UserPhotoComponent], exports: [UserPhotoUrlPipe,
|
|
254
254
|
UserPhotoComponent] }); }
|
|
255
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
255
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, imports: [CommonModule] }); }
|
|
256
256
|
}
|
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, decorators: [{
|
|
258
258
|
type: NgModule,
|
|
259
259
|
args: [{
|
|
260
260
|
declarations: [],
|
|
@@ -17,10 +17,10 @@ class RoundNumberPipe {
|
|
|
17
17
|
transform(val) {
|
|
18
18
|
return Math.round(+val);
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
21
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
21
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, decorators: [{
|
|
24
24
|
type: Pipe,
|
|
25
25
|
args: [{ name: 'roundNumber', standalone: true }]
|
|
26
26
|
}] });
|
|
@@ -29,10 +29,10 @@ class DecimalPointsPipe {
|
|
|
29
29
|
transform(val, numberOfDecimalPoints) {
|
|
30
30
|
return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);
|
|
31
31
|
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
33
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
33
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, decorators: [{
|
|
36
36
|
type: Pipe,
|
|
37
37
|
args: [{ name: 'decimalPoints', standalone: true }]
|
|
38
38
|
}] });
|
|
@@ -113,9 +113,16 @@ class TableComponent {
|
|
|
113
113
|
buttonClick(rowData, field) {
|
|
114
114
|
this.buttonClicked.emit({ rowData, field });
|
|
115
115
|
}
|
|
116
|
-
editableFieldChange(rowData,
|
|
117
|
-
|
|
118
|
-
|
|
116
|
+
editableFieldChange(rowData, column, value) {
|
|
117
|
+
if (column.tripleNestedField)
|
|
118
|
+
rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] = value;
|
|
119
|
+
else if (column.doubleNestedField)
|
|
120
|
+
rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField] = value;
|
|
121
|
+
else if (column.nestedField)
|
|
122
|
+
rowData[column.field][column.nestedField] = value;
|
|
123
|
+
else
|
|
124
|
+
rowData[column.field] = value;
|
|
125
|
+
this.buttonClicked.emit({ rowData, field: column.field });
|
|
119
126
|
}
|
|
120
127
|
getDropdownFieldValue(option, field, nestedField) {
|
|
121
128
|
if (nestedField)
|
|
@@ -123,23 +130,15 @@ class TableComponent {
|
|
|
123
130
|
else
|
|
124
131
|
return option[field];
|
|
125
132
|
}
|
|
126
|
-
|
|
127
|
-
if (
|
|
128
|
-
return;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
return rowData[field][nestedField];
|
|
137
|
-
}
|
|
138
|
-
getTripleNestedFieldValue(rowData, field, childField, nestedField) {
|
|
139
|
-
if (!field || !childField || !nestedField) {
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
return rowData[field][childField][nestedField];
|
|
133
|
+
getFieldValue(rowData, column) {
|
|
134
|
+
if (column.tripleNestedField)
|
|
135
|
+
return rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField];
|
|
136
|
+
else if (column.doubleNestedField)
|
|
137
|
+
return rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField];
|
|
138
|
+
else if (column.nestedField)
|
|
139
|
+
return rowData[column.field][column.nestedField];
|
|
140
|
+
else
|
|
141
|
+
return rowData[column.field];
|
|
143
142
|
}
|
|
144
143
|
tableButtonClicked(buttonClickedObject) {
|
|
145
144
|
if (buttonClickedObject)
|
|
@@ -158,9 +157,9 @@ class TableComponent {
|
|
|
158
157
|
#setSortingDataAccessor() {
|
|
159
158
|
return (data, sortHeaderId) => {
|
|
160
159
|
const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];
|
|
161
|
-
return columnField.nestedField ? this.
|
|
162
|
-
columnField.doubleNestedField ? this.
|
|
163
|
-
columnField.tripleNestedField ? this.
|
|
160
|
+
return columnField.nestedField ? this.getFieldValue(data, columnField) :
|
|
161
|
+
columnField.doubleNestedField ? this.getFieldValue(data, columnField) :
|
|
162
|
+
columnField.tripleNestedField ? this.getFieldValue(data, columnField) :
|
|
164
163
|
data[sortHeaderId];
|
|
165
164
|
};
|
|
166
165
|
}
|
|
@@ -188,10 +187,10 @@ class TableComponent {
|
|
|
188
187
|
}
|
|
189
188
|
return search;
|
|
190
189
|
}
|
|
191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, maxTableHeight: { classPropertyName: "maxTableHeight", publicName: "maxTableHeight", isSignal: true, isRequired: false, transformFunction: null }, shrinkTable: { classPropertyName: "shrinkTable", publicName: "shrinkTable", isSignal: true, isRequired: false, transformFunction: null }, paginatorSticky: { classPropertyName: "paginatorSticky", publicName: "paginatorSticky", isSignal: true, isRequired: false, transformFunction: null }, pageinatorDefaultIncrement: { classPropertyName: "pageinatorDefaultIncrement", publicName: "pageinatorDefaultIncrement", isSignal: true, isRequired: false, transformFunction: null }, sortingDataAccessor: { classPropertyName: "sortingDataAccessor", publicName: "sortingDataAccessor", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, expansion: { classPropertyName: "expansion", publicName: "expansion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ data[column.field] | date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ data[column.field] | date:'shortDate' }}\r\n }\r\n }\r\n @else if (column.isNumber) {\r\n @if (column.isNumber.needsRounded) {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] | number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] | number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ data[column.field] | number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] | number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] | number:'.2-2' }}\r\n }\r\n @else {\r\n {{ data[column.field] | number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ data[column.field] }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\r\n @if (column.isButton.isIcon.displayOnFieldValue) {\r\n @if (data[column.field] === true) {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': data[column.field] === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n @else {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n } @else if (column.isButton.isCheckbox) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n } @else {\r\n <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n {{column.isButton.text}}\r\n </button>\r\n }\r\n }\r\n @else if (column.nestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n }\r\n }\r\n @else if (column.doubleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.tripleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n <textarea\r\n style=\"width: 100%;\" [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column.field, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n <input [ngModel]=\"data[column.field] | roundNumber\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ data[column.field] }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else {\r\n {{ data[column.field] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if (expansion() !== null) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\"> </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button matIconButton aria-label=\"expand row\"\r\n (click)=\"toggle(element); $event.stopPropagation()\"\r\n class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n <div class=\"expansion-element-detail-wrapper\"\r\n [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n <div class=\"expansion-element-detail\">\r\n @if (expandedElement && expansion() && expansion()!.isTable) {\r\n @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n <lib-table [title]=\"''\"\r\n [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n (buttonClicked)=\"tableButtonClicked($event)\" />\r\n }\r\n @else {\r\n <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n }\r\n }\r\n @else {\r\n <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n class=\"expansion-element-row\"\r\n [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n (click)=\"toggle(element)\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n </tr>\r\n }\r\n @else {\r\n <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n <tr mat-row *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n No records exist.\r\n </td>\r\n </tr>\r\n }\r\n </table>\r\n\r\n @if (showPaginator()) {\r\n <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "lib-table", inputs: ["title", "tableData", "columns", "showPaginator", "showSearch", "maxTableHeight", "shrinkTable", "paginatorSticky", "pageinatorDefaultIncrement", "sortingDataAccessor", "sortState", "headerBackgroundColor", "headerTextColor", "expansion"], outputs: ["buttonClicked", "exportSortState"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: 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: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, maxTableHeight: { classPropertyName: "maxTableHeight", publicName: "maxTableHeight", isSignal: true, isRequired: false, transformFunction: null }, shrinkTable: { classPropertyName: "shrinkTable", publicName: "shrinkTable", isSignal: true, isRequired: false, transformFunction: null }, paginatorSticky: { classPropertyName: "paginatorSticky", publicName: "paginatorSticky", isSignal: true, isRequired: false, transformFunction: null }, pageinatorDefaultIncrement: { classPropertyName: "pageinatorDefaultIncrement", publicName: "pageinatorDefaultIncrement", isSignal: true, isRequired: false, transformFunction: null }, sortingDataAccessor: { classPropertyName: "sortingDataAccessor", publicName: "sortingDataAccessor", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, expansion: { classPropertyName: "expansion", publicName: "expansion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ getFieldValue(data, column) | date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | date:'shortDate' }}\r\n }\r\n }\r\n @else if (column.isNumber) {\r\n @if (column.isNumber.needsRounded) {\r\n @if (column.isNumber.percentage) {\r\n {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ getFieldValue(data, column) }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\r\n @if (column.isButton.isIcon.displayOnFieldValue) {\r\n @if (getFieldValue(data, column) === true) {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n @else {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n } @else if (column.isButton.isCheckbox) {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n } @else {\r\n <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n {{column.isButton.buttonText.text}}\r\n }\r\n @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n {{ data[column.isButton.buttonText.field] }}\r\n }\r\n @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n {{ getFieldValue(data, column) }}\r\n }\r\n @else if (column.isButton.text) {\r\n {{column.isButton.text}}\r\n }\r\n\r\n @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n <mat-icon>\r\n {{column.isButton.buttonText.includesIcon.iconName}}\r\n </mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n @if (column.tripleNestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.nestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n @if (column.tripleNestedField) {\r\n <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.nestedField) {\r\n <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else {\r\n <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n }\r\n @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n }\r\n @else {\r\n @if (column.tripleNestedField) {\r\n <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ getFieldValue(data, column) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if (expansion() !== null) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\"> </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button matIconButton aria-label=\"expand row\"\r\n (click)=\"toggle(element); $event.stopPropagation()\"\r\n class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n <div class=\"expansion-element-detail-wrapper\"\r\n [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n <div class=\"expansion-element-detail\">\r\n @if (expandedElement && expansion() && expansion()!.isTable) {\r\n @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n <lib-table [title]=\"''\"\r\n [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n (buttonClicked)=\"tableButtonClicked($event)\" />\r\n }\r\n @else {\r\n <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n }\r\n }\r\n @else {\r\n <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n class=\"expansion-element-row\"\r\n [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n (click)=\"toggle(element)\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n </tr>\r\n }\r\n @else {\r\n <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n <tr mat-row *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n No records exist.\r\n </td>\r\n </tr>\r\n }\r\n </table>\r\n\r\n @if (showPaginator()) {\r\n <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "lib-table", inputs: ["title", "tableData", "columns", "showPaginator", "showSearch", "maxTableHeight", "shrinkTable", "paginatorSticky", "pageinatorDefaultIncrement", "sortingDataAccessor", "sortState", "headerBackgroundColor", "headerTextColor", "expansion"], outputs: ["buttonClicked", "exportSortState"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: 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: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
|
|
193
192
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
195
194
|
type: Component,
|
|
196
195
|
args: [{ selector: 'lib-table', imports: [
|
|
197
196
|
DatePipe,
|
|
@@ -224,12 +223,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
224
223
|
NgStyle,
|
|
225
224
|
RoundNumberPipe,
|
|
226
225
|
DecimalPointsPipe
|
|
227
|
-
], standalone: true, template: "@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ data[column.field] | date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ data[column.field] | date:'shortDate' }}\r\n }\r\n }\r\n @else if (column.isNumber) {\r\n @if (column.isNumber.needsRounded) {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] | number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] | number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ data[column.field] | number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] | number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] | number:'.2-2' }}\r\n }\r\n @else {\r\n {{ data[column.field] | number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ data[column.field] }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\r\n @if (column.isButton.isIcon.displayOnFieldValue) {\r\n @if (data[column.field] === true) {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': data[column.field] === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n @else {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n } @else if (column.isButton.isCheckbox) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n } @else {\r\n <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n {{column.isButton.text}}\r\n </button>\r\n }\r\n }\r\n @else if (column.nestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n }\r\n }\r\n @else if (column.doubleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.tripleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n <textarea\r\n style=\"width: 100%;\" [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column.field, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n <input [ngModel]=\"data[column.field] | roundNumber\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ data[column.field] }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else {\r\n {{ data[column.field] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if (expansion() !== null) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\"> </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button matIconButton aria-label=\"expand row\"\r\n (click)=\"toggle(element); $event.stopPropagation()\"\r\n class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n <div class=\"expansion-element-detail-wrapper\"\r\n [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n <div class=\"expansion-element-detail\">\r\n @if (expandedElement && expansion() && expansion()!.isTable) {\r\n @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n <lib-table [title]=\"''\"\r\n [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n (buttonClicked)=\"tableButtonClicked($event)\" />\r\n }\r\n @else {\r\n <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n }\r\n }\r\n @else {\r\n <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n class=\"expansion-element-row\"\r\n [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n (click)=\"toggle(element)\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n </tr>\r\n }\r\n @else {\r\n <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n <tr mat-row *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n No records exist.\r\n </td>\r\n </tr>\r\n }\r\n </table>\r\n\r\n @if (showPaginator()) {\r\n <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"] }]
|
|
226
|
+
], standalone: true, template: "@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ getFieldValue(data, column) | date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | date:'shortDate' }}\r\n }\r\n }\r\n @else if (column.isNumber) {\r\n @if (column.isNumber.needsRounded) {\r\n @if (column.isNumber.percentage) {\r\n {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) | number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ getFieldValue(data, column) }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\r\n @if (column.isButton.isIcon.displayOnFieldValue) {\r\n @if (getFieldValue(data, column) === true) {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n }\r\n @else {\r\n <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n }\r\n } @else if (column.isButton.isCheckbox) {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n @else {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n }\r\n } @else {\r\n <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n {{column.isButton.buttonText.text}}\r\n }\r\n @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n {{ data[column.isButton.buttonText.field] }}\r\n }\r\n @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n {{ getFieldValue(data, column) }}\r\n }\r\n @else if (column.isButton.text) {\r\n {{column.isButton.text}}\r\n }\r\n\r\n @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n <mat-icon>\r\n {{column.isButton.buttonText.includesIcon.iconName}}\r\n </mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n @if (column.tripleNestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else if (column.nestedField) {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n @else {\r\n <textarea\r\n [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n [rows]=\"3\"\r\n [(ngModel)]=\"data[column.field]\"\r\n [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n ></textarea>\r\n }\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n @if (column.tripleNestedField) {\r\n <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else if (column.nestedField) {\r\n <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n @else {\r\n <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n @for (item of column.isEditable.isDropdown.options; track $index) {\r\n <option\r\n [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n >\r\n {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n </option>\r\n }\r\n </select>\r\n }\r\n }\r\n @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n @if (column.tripleNestedField) {\r\n <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else {\r\n <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n }\r\n @else {\r\n @if (column.tripleNestedField) {\r\n <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else if (column.doubleNestedField) {\r\n <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else if (column.nestedField) {\r\n <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ getFieldValue(data, column) }}\r\n\r\n <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n (click)=\"buttonClick(data, column.field)\">\r\n <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n </button>\r\n }\r\n @else {\r\n {{ getFieldValue(data, column) }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n @if (expansion() !== null) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\"> </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button matIconButton aria-label=\"expand row\"\r\n (click)=\"toggle(element); $event.stopPropagation()\"\r\n class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n <div class=\"expansion-element-detail-wrapper\"\r\n [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n <div class=\"expansion-element-detail\">\r\n @if (expandedElement && expansion() && expansion()!.isTable) {\r\n @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n <lib-table [title]=\"''\"\r\n [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n (buttonClicked)=\"tableButtonClicked($event)\" />\r\n }\r\n @else {\r\n <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n }\r\n }\r\n @else {\r\n <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n class=\"expansion-element-row\"\r\n [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n (click)=\"toggle(element)\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n </tr>\r\n }\r\n @else {\r\n <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n <tr mat-row *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n No records exist.\r\n </td>\r\n </tr>\r\n }\r\n </table>\r\n\r\n @if (showPaginator()) {\r\n <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"] }]
|
|
228
227
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], maxTableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTableHeight", required: false }] }], shrinkTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrinkTable", required: false }] }], paginatorSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorSticky", required: false }] }], pageinatorDefaultIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageinatorDefaultIncrement", required: false }] }], sortingDataAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDataAccessor", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], headerBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBackgroundColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], expansion: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansion", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], exportSortState: [{ type: i0.Output, args: ["exportSortState"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
|
|
229
228
|
|
|
230
229
|
class TableModule {
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
232
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
231
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
|
|
233
232
|
FormsModule,
|
|
234
233
|
ReactiveFormsModule,
|
|
235
234
|
MatButtonModule,
|
|
@@ -246,7 +245,7 @@ class TableModule {
|
|
|
246
245
|
DecimalPointsPipe], exports: [TableComponent,
|
|
247
246
|
RoundNumberPipe,
|
|
248
247
|
DecimalPointsPipe] }); }
|
|
249
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
248
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
|
|
250
249
|
FormsModule,
|
|
251
250
|
ReactiveFormsModule,
|
|
252
251
|
MatButtonModule,
|
|
@@ -260,7 +259,7 @@ class TableModule {
|
|
|
260
259
|
MatIconModule,
|
|
261
260
|
TableComponent] }); }
|
|
262
261
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, decorators: [{
|
|
264
263
|
type: NgModule,
|
|
265
264
|
args: [{
|
|
266
265
|
declarations: [],
|