@cleavelandprice/ngx-lib 4.7.2 → 4.7.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/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs +468 -0
- package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs.map +1 -0
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs +9 -3
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs.map +1 -1
- package/package.json +5 -1
- package/types/cleavelandprice-ngx-lib-authentication-sso.d.ts +90 -0
- package/types/cleavelandprice-ngx-lib-table.d.ts +3 -1
|
@@ -55,10 +55,12 @@ class TableComponent {
|
|
|
55
55
|
this.headerBackgroundColor = input('#ffffff', ...(ngDevMode ? [{ debugName: "headerBackgroundColor" }] : []));
|
|
56
56
|
this.headerTextColor = input('#000000', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
|
|
57
57
|
this.expansion = input(null, ...(ngDevMode ? [{ debugName: "expansion" }] : []));
|
|
58
|
+
this.searchInputValue = input(undefined, ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
|
|
58
59
|
//#endregion
|
|
59
60
|
this.buttonClicked = output();
|
|
60
61
|
this.exportSortState = output();
|
|
61
62
|
this.doubleClicked = output();
|
|
63
|
+
this.searchOutputValue = output();
|
|
62
64
|
this.isMobile = false;
|
|
63
65
|
this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
64
66
|
this.sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
|
|
@@ -72,6 +74,9 @@ class TableComponent {
|
|
|
72
74
|
this.columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];
|
|
73
75
|
this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());
|
|
74
76
|
this.#setFilterPredicate();
|
|
77
|
+
if (this.searchInputValue()) {
|
|
78
|
+
this.searchFilterChange({ target: { value: this.searchInputValue() } });
|
|
79
|
+
}
|
|
75
80
|
}
|
|
76
81
|
ngAfterViewInit() {
|
|
77
82
|
if (this.paginator() && !this.dataSource.paginator) {
|
|
@@ -110,6 +115,7 @@ class TableComponent {
|
|
|
110
115
|
searchFilterChange(event) {
|
|
111
116
|
const filterValue = event.target.value;
|
|
112
117
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
|
118
|
+
this.searchOutputValue.emit(filterValue);
|
|
113
119
|
}
|
|
114
120
|
buttonClick(rowData, field) {
|
|
115
121
|
this.buttonClicked.emit({ rowData, field });
|
|
@@ -189,7 +195,7 @@ class TableComponent {
|
|
|
189
195
|
return search;
|
|
190
196
|
}
|
|
191
197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
192
|
-
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", doubleClicked: "doubleClicked" }, 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 }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\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.type === 'checkbox') {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\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", "doubleClicked"] }, { 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" }] }); }
|
|
198
|
+
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 }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState", doubleClicked: "doubleClicked", searchOutputValue: "searchOutputValue" }, 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 [ngModel]=\"searchInputValue()\" (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 }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\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.type === 'checkbox') {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\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", "searchInputValue"], outputs: ["buttonClicked", "exportSortState", "doubleClicked", "searchOutputValue"] }, { 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
199
|
}
|
|
194
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
195
201
|
type: Component,
|
|
@@ -224,8 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
224
230
|
NgStyle,
|
|
225
231
|
RoundNumberPipe,
|
|
226
232
|
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 }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\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.type === 'checkbox') {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\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
|
-
}], 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"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
|
|
233
|
+
], 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 [ngModel]=\"searchInputValue()\" (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 }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\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.type === 'checkbox') {\r\n @if (column.tripleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.doubleNestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else if (column.nestedField) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n }\r\n @else {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\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"] }]
|
|
234
|
+
}], 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 }] }], searchInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputValue", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], exportSortState: [{ type: i0.Output, args: ["exportSortState"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], searchOutputValue: [{ type: i0.Output, args: ["searchOutputValue"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
|
|
229
235
|
|
|
230
236
|
class TableModule {
|
|
231
237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|