mat-table-ext 0.0.7 → 0.0.10
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.
|
@@ -14,11 +14,11 @@ import * as i8 from '@angular/cdk/drag-drop';
|
|
|
14
14
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
15
15
|
import * as i1$1 from '@angular/material/dialog';
|
|
16
16
|
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i14 from '@angular/material/menu';
|
|
18
18
|
import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i15 from '@angular/material/paginator';
|
|
20
20
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i18 from '@angular/material/sort';
|
|
22
22
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
23
23
|
import { BehaviorSubject } from 'rxjs';
|
|
24
24
|
import * as i1 from '@angular/common/http';
|
|
@@ -36,11 +36,9 @@ import * as i11 from '@angular/material/select';
|
|
|
36
36
|
import { MatSelectModule } from '@angular/material/select';
|
|
37
37
|
import * as XLSX from 'xlsx';
|
|
38
38
|
import * as i4$1 from '@angular/platform-browser';
|
|
39
|
-
import * as
|
|
40
|
-
import { MatCardModule } from '@angular/material/card';
|
|
41
|
-
import * as i17 from '@angular/material/progress-bar';
|
|
39
|
+
import * as i16 from '@angular/material/progress-bar';
|
|
42
40
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
43
|
-
import * as
|
|
41
|
+
import * as i19 from '@angular/material/toolbar';
|
|
44
42
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
45
43
|
import * as i4 from '@angular/material/tooltip';
|
|
46
44
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -58,6 +56,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
|
58
56
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
59
57
|
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
60
58
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
59
|
+
import { MatCardModule } from '@angular/material/card';
|
|
61
60
|
import { MatChipsModule } from '@angular/material/chips';
|
|
62
61
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
63
62
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -1263,7 +1262,7 @@ class MatTableExtComponent {
|
|
|
1263
1262
|
}
|
|
1264
1263
|
}
|
|
1265
1264
|
MatTableExtComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtComponent, deps: [{ token: i1$1.MatDialog }, { token: MatTableExtService }, { token: i3$1.FormBuilder }, { token: i4$1.DomSanitizer }, { token: i5$1.MatIconRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1266
|
-
MatTableExtComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatTableExtComponent, selector: "mat-table-ext", inputs: { dataSource: "dataSource", columns: "columns", columnResizable: "columnResizable", stripedRows: "stripedRows", rowHover: "rowHover", inlineRowEditing: "inlineRowEditing", inCellEditing: "inCellEditing", popupRowEditing: "popupRowEditing", enableDelete: "enableDelete", rowSelection: "rowSelection", multiRowSelection: "multiRowSelection", stickyFooter: "stickyFooter", stickyHeader: "stickyHeader", showFooterRow: "showFooterRow", columnFilter: "columnFilter", loadingIndicator: "loadingIndicator", sorting: "sorting", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", tableHeight: "tableHeight", toolbarHeight: "toolbarHeight", tableWidth: "tableWidth", scrollbarH: "scrollbarH", toolbarTemplate: "toolbarTemplate", columnHidable: "columnHidable", columnPinnable: "columnPinnable", globalSearch: "globalSearch", expandRows: "expandRows", dndColumns: "dndColumns", showPaginator: "showPaginator", showFirstLastButtons: "showFirstLastButtons", exportButtonEnable: "exportButtonEnable", pageSizeOptions: "pageSizeOptions", toolbarTemplateRef: "toolbarTemplateRef", headerTemplateRef: "headerTemplateRef", cellTemplateRef: "cellTemplateRef", expansionTemplateRef: "expansionTemplateRef", popupEditingTemplateRef: "popupEditingTemplateRef", inlineEditingTemplateRef: "inlineEditingTemplateRef", cellEditingTemplateRef: "cellEditingTemplateRef", cellTemplateRefMap: "cellTemplateRefMap" }, outputs: { inlineChange: "inlineChange", cellChange: "cellChange", popupChange: "popupChange", rowDeleted: "rowDeleted", scroll: "scroll", selectionChanged: "selectionChanged", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "columnMenuTrigger", first: true, predicate: ["columnMenuTrigger"], descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-card class=\"main-table-ext-container mat-elevation-z8\" [style.width]=\"tableWidth\">\r\n <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n <mat-label>Search</mat-label>\r\n <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\" #input>\r\n </mat-form-field>\r\n <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n <span class=\"example-spacer\"></span>\r\n <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n Hide Rows\r\n </button>\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n Show All Rows\r\n </button>\r\n </ng-container>\r\n <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n </button>\r\n <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n <mat-icon>import_export</mat-icon> <span>Export</span>\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n [style.top.px]=\"menuY\"></div>\r\n </mat-toolbar>\r\n <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n <ng-container *ngIf=\"exportMenuCtrl\">\r\n <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n </ng-container>\r\n </mat-menu>\r\n <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n </div>\r\n <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Visible Columns</h4>\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <div class=\"showHide-menu-columns-list\">\r\n <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Pin Columns</h4>\r\n <form class=\"example-form\">\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </form>\r\n <div class=\"showHide-menu-columns-list\">\r\n <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n <!-- Row selection column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n </ng-container>\r\n <!--dynamic columns are being generated here-->\r\n <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n <span *ngIf=\"!headerTemplateRef\" matTooltip=\"{{column.headerTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n <ng-container *ngIf=\"headerTemplateRef\" [ngTemplateOutlet]=\"headerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n <ng-container *ngIf=\"column.headerTemplate\" [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n matTooltip=\"{{column.cellTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n <span\r\n *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRef\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n </ng-container>\r\n </div>\r\n <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Edit </th>\r\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n </mat-icon>\r\n <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n fontIcon=\"done\"></mat-icon>\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n fontIcon=\"close\"></mat-icon>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef> edit </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Popup\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let i = index\">\r\n <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Delete\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n fontIcon=\"delete\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n <div class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows && i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n </tr>\r\n <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n </tr>\r\n <ng-container *ngIf=\"expandRows\">\r\n <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n </tr>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n </ng-container>\r\n </table>\r\n </section>\r\n <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\">\r\n </mat-paginator>\r\n</mat-card>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}mat-card.main-table-ext-container{padding:0}.main-table-ext-container{margin:10px}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i16.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i17.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i19.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i19.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i20.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[columnsResizable]", inputs: ["columnsResizable", "index"] }, { kind: "component", type: ColumnPinningComponent, selector: "app-column-pinning", inputs: ["columns"], outputs: ["columnsChanged"] }, { kind: "component", type: FilterColumnsComponentComponent, selector: "app-filter-columns-component", inputs: ["obj"], outputs: ["filterOutput"] }], animations: [
|
|
1265
|
+
MatTableExtComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatTableExtComponent, selector: "mat-table-ext", inputs: { dataSource: "dataSource", columns: "columns", columnResizable: "columnResizable", stripedRows: "stripedRows", rowHover: "rowHover", inlineRowEditing: "inlineRowEditing", inCellEditing: "inCellEditing", popupRowEditing: "popupRowEditing", enableDelete: "enableDelete", rowSelection: "rowSelection", multiRowSelection: "multiRowSelection", stickyFooter: "stickyFooter", stickyHeader: "stickyHeader", showFooterRow: "showFooterRow", columnFilter: "columnFilter", loadingIndicator: "loadingIndicator", sorting: "sorting", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", tableHeight: "tableHeight", toolbarHeight: "toolbarHeight", tableWidth: "tableWidth", scrollbarH: "scrollbarH", toolbarTemplate: "toolbarTemplate", columnHidable: "columnHidable", columnPinnable: "columnPinnable", globalSearch: "globalSearch", expandRows: "expandRows", dndColumns: "dndColumns", showPaginator: "showPaginator", showFirstLastButtons: "showFirstLastButtons", exportButtonEnable: "exportButtonEnable", pageSizeOptions: "pageSizeOptions", toolbarTemplateRef: "toolbarTemplateRef", headerTemplateRef: "headerTemplateRef", cellTemplateRef: "cellTemplateRef", expansionTemplateRef: "expansionTemplateRef", popupEditingTemplateRef: "popupEditingTemplateRef", inlineEditingTemplateRef: "inlineEditingTemplateRef", cellEditingTemplateRef: "cellEditingTemplateRef", cellTemplateRefMap: "cellTemplateRefMap" }, outputs: { inlineChange: "inlineChange", cellChange: "cellChange", popupChange: "popupChange", rowDeleted: "rowDeleted", scroll: "scroll", selectionChanged: "selectionChanged", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "columnMenuTrigger", first: true, predicate: ["columnMenuTrigger"], descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.width]=\"tableWidth\">\r\n <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n <mat-label>Search</mat-label>\r\n <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\" #input>\r\n </mat-form-field>\r\n <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n <span class=\"example-spacer\"></span>\r\n <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n Hide Rows\r\n </button>\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n Show All Rows\r\n </button>\r\n </ng-container>\r\n <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n </button>\r\n <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n <mat-icon>import_export</mat-icon> <span>Export</span>\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n [style.top.px]=\"menuY\"></div>\r\n </mat-toolbar>\r\n <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n <ng-container *ngIf=\"exportMenuCtrl\">\r\n <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n </ng-container>\r\n </mat-menu>\r\n <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n </div>\r\n <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Visible Columns</h4>\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <div class=\"showHide-menu-columns-list\">\r\n <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Pin Columns</h4>\r\n <form class=\"example-form\">\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </form>\r\n <div class=\"showHide-menu-columns-list\">\r\n <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n <!-- Row selection column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n </ng-container>\r\n <!--dynamic columns are being generated here-->\r\n <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n <span *ngIf=\"!headerTemplateRef\" matTooltip=\"{{column.headerTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n <ng-container *ngIf=\"headerTemplateRef\" [ngTemplateOutlet]=\"headerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n <ng-container *ngIf=\"column.headerTemplate\" [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n matTooltip=\"{{column.cellTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n <span\r\n *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRef\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n </ng-container>\r\n </div>\r\n <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Edit </th>\r\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n </mat-icon>\r\n <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n fontIcon=\"done\"></mat-icon>\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n fontIcon=\"close\"></mat-icon>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef> edit </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Popup\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let i = index\">\r\n <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Delete\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n fontIcon=\"delete\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n <div class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows && i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n </tr>\r\n <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n </tr>\r\n <ng-container *ngIf=\"expandRows\">\r\n <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n </tr>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n </ng-container>\r\n </table>\r\n </section>\r\n <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\">\r\n </mat-paginator>\r\n</div>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i16.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i18.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i19.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[columnsResizable]", inputs: ["columnsResizable", "index"] }, { kind: "component", type: ColumnPinningComponent, selector: "app-column-pinning", inputs: ["columns"], outputs: ["columnsChanged"] }, { kind: "component", type: FilterColumnsComponentComponent, selector: "app-filter-columns-component", inputs: ["obj"], outputs: ["filterOutput"] }], animations: [
|
|
1267
1266
|
trigger('detailExpand', [
|
|
1268
1267
|
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
1269
1268
|
state('expanded', style({ height: '*' })),
|
|
@@ -1278,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1278
1277
|
state('expanded', style({ height: '*' })),
|
|
1279
1278
|
transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1280
1279
|
]),
|
|
1281
|
-
], template: "<mat-card class=\"main-table-ext-container mat-elevation-z8\" [style.width]=\"tableWidth\">\r\n <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n <mat-label>Search</mat-label>\r\n <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\" #input>\r\n </mat-form-field>\r\n <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n <span class=\"example-spacer\"></span>\r\n <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n Hide Rows\r\n </button>\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n Show All Rows\r\n </button>\r\n </ng-container>\r\n <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n </button>\r\n <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n <mat-icon>import_export</mat-icon> <span>Export</span>\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n [style.top.px]=\"menuY\"></div>\r\n </mat-toolbar>\r\n <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n <ng-container *ngIf=\"exportMenuCtrl\">\r\n <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n </ng-container>\r\n </mat-menu>\r\n <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n </div>\r\n <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Visible Columns</h4>\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <div class=\"showHide-menu-columns-list\">\r\n <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Pin Columns</h4>\r\n <form class=\"example-form\">\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </form>\r\n <div class=\"showHide-menu-columns-list\">\r\n <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n <!-- Row selection column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n </ng-container>\r\n <!--dynamic columns are being generated here-->\r\n <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n <span *ngIf=\"!headerTemplateRef\" matTooltip=\"{{column.headerTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n <ng-container *ngIf=\"headerTemplateRef\" [ngTemplateOutlet]=\"headerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n <ng-container *ngIf=\"column.headerTemplate\" [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n matTooltip=\"{{column.cellTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n <span\r\n *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRef\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n </ng-container>\r\n </div>\r\n <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Edit </th>\r\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n </mat-icon>\r\n <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n fontIcon=\"done\"></mat-icon>\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n fontIcon=\"close\"></mat-icon>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef> edit </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Popup\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let i = index\">\r\n <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Delete\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n fontIcon=\"delete\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n <div class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows && i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n </tr>\r\n <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n </tr>\r\n <ng-container *ngIf=\"expandRows\">\r\n <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n </tr>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n </ng-container>\r\n </table>\r\n </section>\r\n <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\">\r\n </mat-paginator>\r\n</mat-card>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}mat-card.main-table-ext-container{padding:0}.main-table-ext-container{margin:10px}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"] }]
|
|
1280
|
+
], template: "<div [style.width]=\"tableWidth\">\r\n <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n <mat-label>Search</mat-label>\r\n <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\" #input>\r\n </mat-form-field>\r\n <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n <span class=\"example-spacer\"></span>\r\n <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n Hide Rows\r\n </button>\r\n <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n Show All Rows\r\n </button>\r\n </ng-container>\r\n <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n <mat-icon>visibility</mat-icon>\r\n </button>\r\n <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n </button>\r\n <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n <mat-icon>import_export</mat-icon> <span>Export</span>\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n [style.top.px]=\"menuY\"></div>\r\n </mat-toolbar>\r\n <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n <ng-container *ngIf=\"exportMenuCtrl\">\r\n <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n </ng-container>\r\n </mat-menu>\r\n <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n </div>\r\n <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Visible Columns</h4>\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <div class=\"showHide-menu-columns-list\">\r\n <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n <h4 class=\"column-headers\">Pin Columns</h4>\r\n <form class=\"example-form\">\r\n <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n <mat-label>Filter Columns</mat-label>\r\n <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </form>\r\n <div class=\"showHide-menu-columns-list\">\r\n <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n <!-- Row selection column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n </ng-container>\r\n <!--dynamic columns are being generated here-->\r\n <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n <span *ngIf=\"!headerTemplateRef\" matTooltip=\"{{column.headerTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n <ng-container *ngIf=\"headerTemplateRef\" [ngTemplateOutlet]=\"headerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n <ng-container *ngIf=\"column.headerTemplate\" [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{data:column}\"></ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n matTooltip=\"{{column.cellTooltip?.value}}\"\r\n [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n <span\r\n *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n [ngTemplateOutlet]=\"cellTemplateRef\"\r\n [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n class=\"inline-editing-field\">\r\n <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n {{option}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n </ng-container>\r\n </div>\r\n <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Edit </th>\r\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n </mat-icon>\r\n <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n fontIcon=\"done\"></mat-icon>\r\n <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n fontIcon=\"close\"></mat-icon>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef> edit </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Popup\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let i = index\">\r\n <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n class=\"action-column-cells\"> Delete\r\n </th>\r\n <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n fontIcon=\"delete\">\r\n </mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n <div class=\"example-element-detail\"\r\n [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows && i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n </tr>\r\n <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n </tr>\r\n <ng-container *ngIf=\"expandRows\">\r\n <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n </tr>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFooterRow\">\r\n <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n </ng-container>\r\n </table>\r\n </section>\r\n <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\">\r\n </mat-paginator>\r\n</div>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"] }]
|
|
1282
1281
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: MatTableExtService }, { type: i3$1.FormBuilder }, { type: i4$1.DomSanitizer }, { type: i5$1.MatIconRegistry }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menuTrigger: [{
|
|
1283
1282
|
type: ViewChild,
|
|
1284
1283
|
args: [MatMenuTrigger]
|