@cleavelandprice/ngx-lib 4.7.2 → 4.7.3
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.
|
@@ -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 }); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cleavelandprice-ngx-lib-table.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/roundNumber.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/decimalPoints.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.html","../../../../projects/cleavelandprice/ngx-lib/table/src/table.module.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/cleavelandprice-ngx-lib-table.ts"],"sourcesContent":["import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'roundNumber', standalone: true })\r\nexport class RoundNumberPipe implements PipeTransform{\r\n transform(val: any) {\r\n return Math.round(+val);\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'decimalPoints', standalone: true })\r\nexport class DecimalPointsPipe implements PipeTransform{\r\n transform(val: any, numberOfDecimalPoints: number) {\r\n return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);\r\n }\r\n}\r\n","import { AfterViewInit, ChangeDetectorRef, Component, inject, input, output, viewChild } from '@angular/core';\r\n\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatSort, MatSortHeader, Sort } from '@angular/material/sort';\r\nimport { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';\r\n\r\nimport { DatePipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatButton, MatIconButton } from '@angular/material/button';\r\nimport { MatCheckbox } from '@angular/material/checkbox';\r\nimport { MatFormField, MatLabel, MatPrefix } from '@angular/material/form-field';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatInput } from '@angular/material/input';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { TableColumn } from '../../model/table-column';\r\nimport { RoundNumberPipe } from '../../pipes/roundNumber';\r\nimport { DecimalPointsPipe } from '../../pipes/decimalPoints';\r\nimport { TableExpansion } from '../../model/table-expansion';\r\n\r\n@Component({\r\n selector: 'lib-table',\r\n imports: [\r\n DatePipe,\r\n DecimalPipe,\r\n FormsModule,\r\n MatButton,\r\n MatCell,\r\n MatCellDef,\r\n MatCheckbox,\r\n MatColumnDef,\r\n MatFormField,\r\n MatHeaderCell,\r\n MatHeaderCellDef,\r\n MatHeaderRow,\r\n MatHeaderRowDef,\r\n MatIcon,\r\n MatIconButton,\r\n MatInput,\r\n MatLabel,\r\n MatNoDataRow,\r\n MatPaginator,\r\n MatPrefix,\r\n MatRow,\r\n MatRowDef,\r\n MatSort,\r\n MatSortHeader,\r\n MatTable,\r\n MatTooltip,\r\n NgClass,\r\n NgStyle,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n standalone: true,\r\n templateUrl: './table.component.html',\r\n styleUrl: './table.component.scss'\r\n})\r\nexport class TableComponent implements AfterViewInit {\r\n //#region Inputs\r\n title = input('');\r\n tableData = input.required<any[]>();\r\n columns = input<TableColumn[]>([]);\r\n\r\n showPaginator = input(true);\r\n showSearch = input(true);\r\n\r\n maxTableHeight = input('50em');\r\n shrinkTable = input(false);\r\n\r\n paginatorSticky = input(false);\r\n pageinatorDefaultIncrement = input(50);\r\n\r\n sortingDataAccessor = input<(data: any, sortHeaderId: string) => string>();\r\n // this was added because we needed to be able to retain & set the table's sort if it was refreshed\r\n sortState = input<Sort | null>();\r\n\r\n headerBackgroundColor = input('#ffffff');\r\n headerTextColor = input('#000000');\r\n\r\n expansion = input<TableExpansion | null>(null);\r\n //#endregion\r\n\r\n buttonClicked = output<{ rowData: any, field: string }>();\r\n exportSortState = output<Sort>();\r\n doubleClicked = output<{ rowData: any, field: string }>();\r\n\r\n isMobile = false;\r\n dataSource!: MatTableDataSource<any>;\r\n pageSizeOptions!: number[]; // = [10, 20, 100, 500];\r\n columnNames!: string[];\r\n\r\n paginator = viewChild(MatPaginator);\r\n sort = viewChild(MatSort);\r\n\r\n columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];\r\n expandedElement: any | null;\r\n\r\n changeDetector = inject(ChangeDetectorRef);\r\n\r\n ngOnInit(): void {\r\n this.dataSource = new MatTableDataSource(this.tableData());\r\n\r\n this.dataSource.sortingDataAccessor = this.sortingDataAccessor() ? this.sortingDataAccessor()! : this.#setSortingDataAccessor();\r\n\r\n this.columnNames = this.columns().map(c => c.field);\r\n this.columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];\r\n\r\n this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());\r\n\r\n this.#setFilterPredicate();\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.paginator() && !this.dataSource.paginator) {\r\n this.dataSource.paginator = this.paginator()!;\r\n }\r\n if (this.sort() && !this.dataSource.sort) {\r\n if (this.sortState()) {\r\n this.sort()!.active = this.sortState()!.active;\r\n this.sort()!.direction = this.sortState()!.direction;\r\n\r\n // need this to recongize the changes and show the \"arrow\" next to the header\r\n this.sort()!._stateChanges.next();\r\n }\r\n\r\n this.dataSource.sort = this.sort()!;\r\n }\r\n }\r\n\r\n ngAfterContentChecked() {\r\n if (this.changeDetector)\r\n this.changeDetector.detectChanges();\r\n }\r\n\r\n /** Checks whether an element is expanded. */\r\n isExpanded(element: any) {\r\n return this.expandedElement === element;\r\n }\r\n\r\n /** Toggles the expanded state of an element. */\r\n toggle(element: any) {\r\n if (this.isExpanded(element))\r\n this.expandedElement = null;\r\n else {\r\n this.expandedElement = null;\r\n\r\n // if the expansion is down already & we clicked a new element the table component wouldn't generate the data for the new item\r\n setTimeout(() => {\r\n this.expandedElement = element;\r\n }, 1);\r\n }\r\n }\r\n\r\n searchFilterChange(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n\r\n buttonClick(rowData: any, field: string) {\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n editableFieldChange(rowData: any, column: TableColumn, value: any) {\r\n if (column.tripleNestedField)\r\n rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] = value;\r\n else if (column.doubleNestedField)\r\n rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField] = value;\r\n else if (column.nestedField)\r\n rowData[column.field][column.nestedField] = value;\r\n else\r\n rowData[column.field] = value;\r\n\r\n this.buttonClicked.emit({ rowData, field: column.field });\r\n }\r\n\r\n getDropdownFieldValue(option: any, field: string, nestedField?: string) {\r\n if (nestedField)\r\n return option[field][nestedField];\r\n else\r\n return option[field];\r\n }\r\n\r\n getFieldValue(rowData: any, column: TableColumn) {\r\n if (column.tripleNestedField)\r\n return rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField];\r\n else if (column.doubleNestedField)\r\n return rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField];\r\n else if (column.nestedField)\r\n return rowData[column.field][column.nestedField];\r\n else\r\n return rowData[column.field];\r\n }\r\n\r\n tableButtonClicked(buttonClickedObject: { rowData: any, field: string }) {\r\n if (buttonClickedObject)\r\n this.buttonClicked.emit({ rowData: buttonClickedObject.rowData, field: buttonClickedObject.field });\r\n }\r\n\r\n sortChanged(sortState: Sort) {\r\n this.exportSortState.emit(sortState);\r\n }\r\n\r\n #setTablePageSizeOptions(defaultPageIncrement: number = 50) {\r\n this.pageSizeOptions = [];\r\n\r\n for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + (defaultPageIncrement * 2)) {\r\n this.pageSizeOptions.push(i);\r\n }\r\n\r\n this.pageSizeOptions.push(this.dataSource.data.length);\r\n }\r\n\r\n #setSortingDataAccessor() {\r\n return (data: any, sortHeaderId: string) => {\r\n const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];\r\n\r\n return columnField.nestedField ? this.getFieldValue(data, columnField) :\r\n columnField.doubleNestedField ? this.getFieldValue(data, columnField) :\r\n columnField.tripleNestedField ? this.getFieldValue(data, columnField) :\r\n data[sortHeaderId];\r\n }\r\n }\r\n\r\n #setFilterPredicate() {\r\n this.dataSource.filterPredicate = (data, filter: string) => {\r\n const accumulator = (currentTerm, key) => {\r\n return this.nestedFilterCheck(currentTerm, data, key);\r\n };\r\n const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();\r\n // Transform the filter by converting it to lowercase and removing whitespace.\r\n const transformedFilter = filter.trim().toLowerCase();\r\n return dataStr.indexOf(transformedFilter) !== -1;\r\n };\r\n }\r\n\r\n nestedFilterCheck(search, data, key) {\r\n if (typeof data[key] === 'object') {\r\n for (const k in data[key]) {\r\n if (data[key][k] !== null) {\r\n search = this.nestedFilterCheck(search, data[key], k);\r\n }\r\n }\r\n } else {\r\n search += data[key];\r\n }\r\n return search;\r\n }\r\n}\r\n","@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","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatPaginatorModule } from '@angular/material/paginator';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { TableComponent } from './components/table/table.component';\r\nimport { RoundNumberPipe } from './pipes/roundNumber';\r\nimport { DecimalPointsPipe } from './pipes/decimalPoints';\r\n\r\n@NgModule({\r\n declarations: [\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatCheckboxModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatTableModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatTooltipModule,\r\n MatIconModule,\r\n\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n exports: [\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ]\r\n})\r\nexport class TableModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './table.api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;MAGa,eAAe,CAAA;AAC1B,IAAA,SAAS,CAAC,GAAQ,EAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;;8GAFd,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;4GAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,EAAE;;;MCClC,iBAAiB,CAAA;IAC5B,SAAS,CAAC,GAAQ,EAAE,qBAA6B,EAAA;AAC/C,QAAA,OAAO,UAAU,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC;;8GAFvD,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;4GAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,IAAI,EAAE;;;MCuDpC,cAAc,CAAA;AAtC3B,IAAA,WAAA,GAAA;;AAwCE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC;AACjB,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAS;AACnC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAgB,EAAE,mDAAC;AAElC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,IAAI,yDAAC;AAC3B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,sDAAC;AAExB,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,MAAM,0DAAC;AAC9B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,uDAAC;AAE1B,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,KAAK,2DAAC;AAC9B,QAAA,IAAA,CAAA,0BAA0B,GAAG,KAAK,CAAC,EAAE,sEAAC;QAEtC,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAA+C;;QAE1E,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAe;AAEhC,QAAA,IAAA,CAAA,qBAAqB,GAAG,KAAK,CAAC,SAAS,iEAAC;AACxC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,SAAS,2DAAC;AAElC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAwB,IAAI,qDAAC;;QAG9C,IAAA,CAAA,aAAa,GAAG,MAAM,EAAmC;QACzD,IAAA,CAAA,eAAe,GAAG,MAAM,EAAQ;QAChC,IAAA,CAAA,aAAa,GAAG,MAAM,EAAmC;QAEzD,IAAA,CAAA,QAAQ,GAAG,KAAK;AAKhB,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,YAAY,qDAAC;AACnC,QAAA,IAAA,CAAA,IAAI,GAAG,SAAS,CAAC,OAAO,gDAAC;QAEzB,IAAA,CAAA,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;AAGnE,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAsJ3C;IApJC,QAAQ,GAAA;QACN,IAAI,CAAC,UAAU,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QAE1D,IAAI,CAAC,UAAU,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAG,GAAG,IAAI,CAAC,uBAAuB,EAAE;AAE/H,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QACnD,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;QAExE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAEhE,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE;YAClD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,EAAG;;AAE/C,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxC,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,IAAI,EAAG,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC,MAAM;AAC9C,gBAAA,IAAI,CAAC,IAAI,EAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC,SAAS;;gBAGpD,IAAI,CAAC,IAAI,EAAG,CAAC,aAAa,CAAC,IAAI,EAAE;;YAGnC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAG;;;IAIvC,qBAAqB,GAAA;QACnB,IAAI,IAAI,CAAC,cAAc;AACrB,YAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;;;AAIvC,IAAA,UAAU,CAAC,OAAY,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,eAAe,KAAK,OAAO;;;AAIzC,IAAA,MAAM,CAAC,OAAY,EAAA;AACjB,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;AAC1B,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;aACxB;AACH,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;YAG3B,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,eAAe,GAAG,OAAO;aAC/B,EAAE,CAAC,CAAC;;;AAIT,IAAA,kBAAkB,CAAC,KAAY,EAAA;AAC7B,QAAA,MAAM,WAAW,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;AAC5D,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;;IAG3D,WAAW,CAAC,OAAY,EAAE,KAAa,EAAA;QACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;;AAG7C,IAAA,mBAAmB,CAAC,OAAY,EAAE,MAAmB,EAAE,KAAU,EAAA;QAC/D,IAAI,MAAM,CAAC,iBAAiB;YAC1B,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,KAAK;aACvH,IAAI,MAAM,CAAC,iBAAiB;AAC/B,YAAA,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,KAAK;aAClF,IAAI,MAAM,CAAC,WAAW;AACzB,YAAA,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,KAAK;;AAEjD,YAAA,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK;AAE/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;;AAG3D,IAAA,qBAAqB,CAAC,MAAW,EAAE,KAAa,EAAE,WAAoB,EAAA;AACpE,QAAA,IAAI,WAAW;AACb,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC;;AAEjC,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC;;IAGxB,aAAa,CAAC,OAAY,EAAE,MAAmB,EAAA;QAC7C,IAAI,MAAM,CAAC,iBAAiB;YAC1B,OAAO,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,WAAW,CAAC;aACtH,IAAI,MAAM,CAAC,iBAAiB;AAC/B,YAAA,OAAO,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,WAAW,CAAC;aACjF,IAAI,MAAM,CAAC,WAAW;YACzB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;;AAEhD,YAAA,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;;AAGhC,IAAA,kBAAkB,CAAC,mBAAoD,EAAA;AACrE,QAAA,IAAI,mBAAmB;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE,CAAC;;AAGvG,IAAA,WAAW,CAAC,SAAe,EAAA;AACzB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGtC,wBAAwB,CAAC,uBAA+B,EAAE,EAAA;AACxD,QAAA,IAAI,CAAC,eAAe,GAAG,EAAE;QAEzB,KAAK,IAAI,CAAC,GAAG,oBAAoB,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,oBAAoB,GAAG,CAAC,CAAC,EAAE;AACtG,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;;AAG9B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGxD,uBAAuB,GAAA;AACrB,QAAA,OAAO,CAAC,IAAS,EAAE,YAAoB,KAAI;YACzC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC;AAE3E,YAAA,OAAO,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC;AACpE,gBAAA,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC;AACrE,oBAAA,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC;wBACrE,IAAI,CAAC,YAAY,CAAC;AACtB,SAAC;;IAGH,mBAAmB,GAAA;QACjB,IAAI,CAAC,UAAU,CAAC,eAAe,GAAG,CAAC,IAAI,EAAE,MAAc,KAAK;AAC1D,YAAA,MAAM,WAAW,GAAG,CAAC,WAAW,EAAE,GAAG,KAAI;gBACvC,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,GAAG,CAAC;AACvD,aAAC;AACD,YAAA,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;;YAEvE,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;YACrD,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAClD,SAAC;;AAGH,IAAA,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA;QACjC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACjC,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE;gBACzB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;AACzB,oBAAA,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;;;;aAGpD;AACL,YAAA,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC;;AAErB,QAAA,OAAO,MAAM;;8GA5LJ,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,0BAAA,EAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,UAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAkCH,YAAY,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACjB,OAAO,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5F1B,6q0BA8XA,EAAA,MAAA,EAAA,CAAA,o7DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrUa,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,SAAA,EAAA,eAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAjCnB,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,SAAS,yUACT,OAAO,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,aAAa,EAAA,QAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,YAAY,EAAA,QAAA,EAAA,oCAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,uBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,QAAQ,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,YAAY,EAAA,QAAA,EAAA,2BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,SAAS,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,MAAM,uFACN,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,eAAA,EAAA,OAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,QAAQ,EAAA,QAAA,EAAA,6BAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEV,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EA3BP,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACR,WAAW,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EA2BX,eAAe,+CACf,iBAAiB,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAMZ,cAAc,EAAA,UAAA,EAAA,CAAA;kBAtC1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ;wBACL,QAAQ;wBACR,WAAW;wBACX,WAAW;wBACX,SAAS;wBACT,OAAO;wBACP,UAAU;wBACV,WAAW;wBACX,YAAY;wBACZ,YAAY;wBACZ,aAAa;wBACb,gBAAgB;wBAChB,YAAY;wBACZ,eAAe;wBACf,OAAO;wBACP,aAAa;wBACb,QAAQ;wBACR,QAAQ;wBACR,YAAY;wBACZ,YAAY;wBACZ,SAAS;wBACT,MAAM;wBACN,SAAS;wBACT,OAAO;wBACP,aAAa;wBACb,QAAQ;wBACR,UAAU;wBACV,OAAO;wBACP,OAAO;wBACP,eAAe;wBACf;AACH,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,QAAA,EAAA,6q0BAAA,EAAA,MAAA,EAAA,CAAA,o7DAAA,CAAA,EAAA;AAsCI,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAAA,YAAY,mFACjB,OAAO,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ME9Cb,WAAW,CAAA;8GAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,YAxBpB,YAAY;YACZ,WAAW;YACX,mBAAmB;YAEnB,eAAe;YACf,iBAAiB;YACjB,kBAAkB;YAClB,cAAc;YACd,cAAc;YACd,aAAa;YACb,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YAEb,cAAc;YACd,eAAe;AACf,YAAA,iBAAiB,aAGjB,cAAc;YACd,eAAe;YACf,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,YAxBpB,YAAY;YACZ,WAAW;YACX,mBAAmB;YAEnB,eAAe;YACf,iBAAiB;YACjB,kBAAkB;YAClB,cAAc;YACd,cAAc;YACd,aAAa;YACb,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YAEb,cAAc,CAAA,EAAA,CAAA,CAAA;;2FAUL,WAAW,EAAA,UAAA,EAAA,CAAA;kBA5BvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,EACb;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBAEnB,eAAe;wBACf,iBAAiB;wBACjB,kBAAkB;wBAClB,cAAc;wBACd,cAAc;wBACd,aAAa;wBACb,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBAEb,cAAc;wBACd,eAAe;wBACf;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,cAAc;wBACd,eAAe;wBACf;AACD;AACF,iBAAA;;;AC7CD;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"cleavelandprice-ngx-lib-table.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/roundNumber.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/decimalPoints.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.html","../../../../projects/cleavelandprice/ngx-lib/table/src/table.module.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/cleavelandprice-ngx-lib-table.ts"],"sourcesContent":["import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'roundNumber', standalone: true })\r\nexport class RoundNumberPipe implements PipeTransform{\r\n transform(val: any) {\r\n return Math.round(+val);\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'decimalPoints', standalone: true })\r\nexport class DecimalPointsPipe implements PipeTransform{\r\n transform(val: any, numberOfDecimalPoints: number) {\r\n return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);\r\n }\r\n}\r\n","import { AfterViewInit, ChangeDetectorRef, Component, inject, input, output, viewChild } from '@angular/core';\r\n\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatSort, MatSortHeader, Sort } from '@angular/material/sort';\r\nimport { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';\r\n\r\nimport { DatePipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatButton, MatIconButton } from '@angular/material/button';\r\nimport { MatCheckbox } from '@angular/material/checkbox';\r\nimport { MatFormField, MatLabel, MatPrefix } from '@angular/material/form-field';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatInput } from '@angular/material/input';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { TableColumn } from '../../model/table-column';\r\nimport { RoundNumberPipe } from '../../pipes/roundNumber';\r\nimport { DecimalPointsPipe } from '../../pipes/decimalPoints';\r\nimport { TableExpansion } from '../../model/table-expansion';\r\n\r\n@Component({\r\n selector: 'lib-table',\r\n imports: [\r\n DatePipe,\r\n DecimalPipe,\r\n FormsModule,\r\n MatButton,\r\n MatCell,\r\n MatCellDef,\r\n MatCheckbox,\r\n MatColumnDef,\r\n MatFormField,\r\n MatHeaderCell,\r\n MatHeaderCellDef,\r\n MatHeaderRow,\r\n MatHeaderRowDef,\r\n MatIcon,\r\n MatIconButton,\r\n MatInput,\r\n MatLabel,\r\n MatNoDataRow,\r\n MatPaginator,\r\n MatPrefix,\r\n MatRow,\r\n MatRowDef,\r\n MatSort,\r\n MatSortHeader,\r\n MatTable,\r\n MatTooltip,\r\n NgClass,\r\n NgStyle,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n standalone: true,\r\n templateUrl: './table.component.html',\r\n styleUrl: './table.component.scss'\r\n})\r\nexport class TableComponent implements AfterViewInit {\r\n //#region Inputs\r\n title = input('');\r\n tableData = input.required<any[]>();\r\n columns = input<TableColumn[]>([]);\r\n\r\n showPaginator = input(true);\r\n showSearch = input(true);\r\n\r\n maxTableHeight = input('50em');\r\n shrinkTable = input(false);\r\n\r\n paginatorSticky = input(false);\r\n pageinatorDefaultIncrement = input(50);\r\n\r\n sortingDataAccessor = input<(data: any, sortHeaderId: string) => string>();\r\n // this was added because we needed to be able to retain & set the table's sort if it was refreshed\r\n sortState = input<Sort | null>();\r\n\r\n headerBackgroundColor = input('#ffffff');\r\n headerTextColor = input('#000000');\r\n\r\n expansion = input<TableExpansion | null>(null);\r\n\r\n searchInputValue = input<string | undefined>(undefined);\r\n //#endregion\r\n\r\n buttonClicked = output<{ rowData: any, field: string }>();\r\n exportSortState = output<Sort>();\r\n doubleClicked = output<{ rowData: any, field: string }>();\r\n searchOutputValue = output<string>();\r\n\r\n isMobile = false;\r\n dataSource!: MatTableDataSource<any>;\r\n pageSizeOptions!: number[]; // = [10, 20, 100, 500];\r\n columnNames!: string[];\r\n\r\n paginator = viewChild(MatPaginator);\r\n sort = viewChild(MatSort);\r\n\r\n columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];\r\n expandedElement: any | null;\r\n\r\n changeDetector = inject(ChangeDetectorRef);\r\n\r\n ngOnInit(): void {\r\n this.dataSource = new MatTableDataSource(this.tableData());\r\n\r\n this.dataSource.sortingDataAccessor = this.sortingDataAccessor() ? this.sortingDataAccessor()! : this.#setSortingDataAccessor();\r\n\r\n this.columnNames = this.columns().map(c => c.field);\r\n this.columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];\r\n\r\n this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());\r\n\r\n this.#setFilterPredicate();\r\n\r\n if (this.searchInputValue()) {\r\n this.searchFilterChange({ target: { value: this.searchInputValue() } } as unknown as Event);\r\n }\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.paginator() && !this.dataSource.paginator) {\r\n this.dataSource.paginator = this.paginator()!;\r\n }\r\n if (this.sort() && !this.dataSource.sort) {\r\n if (this.sortState()) {\r\n this.sort()!.active = this.sortState()!.active;\r\n this.sort()!.direction = this.sortState()!.direction;\r\n\r\n // need this to recongize the changes and show the \"arrow\" next to the header\r\n this.sort()!._stateChanges.next();\r\n }\r\n\r\n this.dataSource.sort = this.sort()!;\r\n }\r\n }\r\n\r\n ngAfterContentChecked() {\r\n if (this.changeDetector)\r\n this.changeDetector.detectChanges();\r\n }\r\n\r\n /** Checks whether an element is expanded. */\r\n isExpanded(element: any) {\r\n return this.expandedElement === element;\r\n }\r\n\r\n /** Toggles the expanded state of an element. */\r\n toggle(element: any) {\r\n if (this.isExpanded(element))\r\n this.expandedElement = null;\r\n else {\r\n this.expandedElement = null;\r\n\r\n // if the expansion is down already & we clicked a new element the table component wouldn't generate the data for the new item\r\n setTimeout(() => {\r\n this.expandedElement = element;\r\n }, 1);\r\n }\r\n }\r\n\r\n searchFilterChange(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n this.searchOutputValue.emit(filterValue);\r\n }\r\n\r\n buttonClick(rowData: any, field: string) {\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n editableFieldChange(rowData: any, column: TableColumn, value: any) {\r\n if (column.tripleNestedField)\r\n rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] = value;\r\n else if (column.doubleNestedField)\r\n rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField] = value;\r\n else if (column.nestedField)\r\n rowData[column.field][column.nestedField] = value;\r\n else\r\n rowData[column.field] = value;\r\n\r\n this.buttonClicked.emit({ rowData, field: column.field });\r\n }\r\n\r\n getDropdownFieldValue(option: any, field: string, nestedField?: string) {\r\n if (nestedField)\r\n return option[field][nestedField];\r\n else\r\n return option[field];\r\n }\r\n\r\n getFieldValue(rowData: any, column: TableColumn) {\r\n if (column.tripleNestedField)\r\n return rowData[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField];\r\n else if (column.doubleNestedField)\r\n return rowData[column.doubleNestedField.field][column.doubleNestedField.nestedField];\r\n else if (column.nestedField)\r\n return rowData[column.field][column.nestedField];\r\n else\r\n return rowData[column.field];\r\n }\r\n\r\n tableButtonClicked(buttonClickedObject: { rowData: any, field: string }) {\r\n if (buttonClickedObject)\r\n this.buttonClicked.emit({ rowData: buttonClickedObject.rowData, field: buttonClickedObject.field });\r\n }\r\n\r\n sortChanged(sortState: Sort) {\r\n this.exportSortState.emit(sortState);\r\n }\r\n\r\n #setTablePageSizeOptions(defaultPageIncrement: number = 50) {\r\n this.pageSizeOptions = [];\r\n\r\n for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + (defaultPageIncrement * 2)) {\r\n this.pageSizeOptions.push(i);\r\n }\r\n\r\n this.pageSizeOptions.push(this.dataSource.data.length);\r\n }\r\n\r\n #setSortingDataAccessor() {\r\n return (data: any, sortHeaderId: string) => {\r\n const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];\r\n\r\n return columnField.nestedField ? this.getFieldValue(data, columnField) :\r\n columnField.doubleNestedField ? this.getFieldValue(data, columnField) :\r\n columnField.tripleNestedField ? this.getFieldValue(data, columnField) :\r\n data[sortHeaderId];\r\n }\r\n }\r\n\r\n #setFilterPredicate() {\r\n this.dataSource.filterPredicate = (data, filter: string) => {\r\n const accumulator = (currentTerm, key) => {\r\n return this.nestedFilterCheck(currentTerm, data, key);\r\n };\r\n const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();\r\n // Transform the filter by converting it to lowercase and removing whitespace.\r\n const transformedFilter = filter.trim().toLowerCase();\r\n return dataStr.indexOf(transformedFilter) !== -1;\r\n };\r\n }\r\n\r\n nestedFilterCheck(search, data, key) {\r\n if (typeof data[key] === 'object') {\r\n for (const k in data[key]) {\r\n if (data[key][k] !== null) {\r\n search = this.nestedFilterCheck(search, data[key], k);\r\n }\r\n }\r\n } else {\r\n search += data[key];\r\n }\r\n return search;\r\n }\r\n}\r\n","@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","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatPaginatorModule } from '@angular/material/paginator';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { TableComponent } from './components/table/table.component';\r\nimport { RoundNumberPipe } from './pipes/roundNumber';\r\nimport { DecimalPointsPipe } from './pipes/decimalPoints';\r\n\r\n@NgModule({\r\n declarations: [\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatCheckboxModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatTableModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatTooltipModule,\r\n MatIconModule,\r\n\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n exports: [\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ]\r\n})\r\nexport class TableModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './table.api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"comment": "NGX-LIB primary entry point package.json",
|
|
3
3
|
"name": "@cleavelandprice/ngx-lib",
|
|
4
|
-
"version": "4.7.
|
|
4
|
+
"version": "4.7.3",
|
|
5
5
|
"description": "Angular library providing foundational functionality to Cleaveland-Price applications",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/common": "^21.0.0",
|
|
@@ -133,6 +133,7 @@ declare class TableComponent implements AfterViewInit {
|
|
|
133
133
|
headerBackgroundColor: _angular_core.InputSignal<string>;
|
|
134
134
|
headerTextColor: _angular_core.InputSignal<string>;
|
|
135
135
|
expansion: _angular_core.InputSignal<TableExpansion | null>;
|
|
136
|
+
searchInputValue: _angular_core.InputSignal<string | undefined>;
|
|
136
137
|
buttonClicked: _angular_core.OutputEmitterRef<{
|
|
137
138
|
rowData: any;
|
|
138
139
|
field: string;
|
|
@@ -142,6 +143,7 @@ declare class TableComponent implements AfterViewInit {
|
|
|
142
143
|
rowData: any;
|
|
143
144
|
field: string;
|
|
144
145
|
}>;
|
|
146
|
+
searchOutputValue: _angular_core.OutputEmitterRef<string>;
|
|
145
147
|
isMobile: boolean;
|
|
146
148
|
dataSource: MatTableDataSource<any>;
|
|
147
149
|
pageSizeOptions: number[];
|
|
@@ -170,7 +172,7 @@ declare class TableComponent implements AfterViewInit {
|
|
|
170
172
|
sortChanged(sortState: Sort): void;
|
|
171
173
|
nestedFilterCheck(search: any, data: any, key: any): any;
|
|
172
174
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
|
|
173
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "lib-table", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "tableData": { "alias": "tableData"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "maxTableHeight": { "alias": "maxTableHeight"; "required": false; "isSignal": true; }; "shrinkTable": { "alias": "shrinkTable"; "required": false; "isSignal": true; }; "paginatorSticky": { "alias": "paginatorSticky"; "required": false; "isSignal": true; }; "pageinatorDefaultIncrement": { "alias": "pageinatorDefaultIncrement"; "required": false; "isSignal": true; }; "sortingDataAccessor": { "alias": "sortingDataAccessor"; "required": false; "isSignal": true; }; "sortState": { "alias": "sortState"; "required": false; "isSignal": true; }; "headerBackgroundColor": { "alias": "headerBackgroundColor"; "required": false; "isSignal": true; }; "headerTextColor": { "alias": "headerTextColor"; "required": false; "isSignal": true; }; "expansion": { "alias": "expansion"; "required": false; "isSignal": true; }; }, { "buttonClicked": "buttonClicked"; "exportSortState": "exportSortState"; "doubleClicked": "doubleClicked"; }, never, never, true, never>;
|
|
175
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "lib-table", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "tableData": { "alias": "tableData"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "maxTableHeight": { "alias": "maxTableHeight"; "required": false; "isSignal": true; }; "shrinkTable": { "alias": "shrinkTable"; "required": false; "isSignal": true; }; "paginatorSticky": { "alias": "paginatorSticky"; "required": false; "isSignal": true; }; "pageinatorDefaultIncrement": { "alias": "pageinatorDefaultIncrement"; "required": false; "isSignal": true; }; "sortingDataAccessor": { "alias": "sortingDataAccessor"; "required": false; "isSignal": true; }; "sortState": { "alias": "sortState"; "required": false; "isSignal": true; }; "headerBackgroundColor": { "alias": "headerBackgroundColor"; "required": false; "isSignal": true; }; "headerTextColor": { "alias": "headerTextColor"; "required": false; "isSignal": true; }; "expansion": { "alias": "expansion"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; }, { "buttonClicked": "buttonClicked"; "exportSortState": "exportSortState"; "doubleClicked": "doubleClicked"; "searchOutputValue": "searchOutputValue"; }, never, never, true, never>;
|
|
174
176
|
}
|
|
175
177
|
|
|
176
178
|
declare class RoundNumberPipe implements PipeTransform {
|