@servicemind.tis/tis-smart-table-viewer 2.3.6 → 2.3.8
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.
|
@@ -89,14 +89,12 @@ class ApiDataSource {
|
|
|
89
89
|
this.loadingSubject.next(true);
|
|
90
90
|
this.apiSubs = this.apiService.getList(url, (pageIndex + 1), pageSize, search, { filter }, { sortFilter }).pipe(catchError(() => of([])), finalize(() => this.loadingSubject.next(false))).subscribe(r => {
|
|
91
91
|
console.log(`DataSource: Url: ${url}, Reply:`, r);
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
this.apiSubject.next(r?.data);
|
|
99
|
-
this.extraDataSubject.next(r?.extraData);
|
|
92
|
+
// ✅ FIX: Ensure we always emit an array (even if empty) to prevent undefined issues
|
|
93
|
+
const data = r?.data || [];
|
|
94
|
+
const total = (Array.isArray(data) && data.length > 0) ? (r?.total || data.length) : 0;
|
|
95
|
+
this.totalDataLength.next(total);
|
|
96
|
+
this.apiSubject.next(data);
|
|
97
|
+
this.extraDataSubject.next(r?.extraData || null);
|
|
100
98
|
});
|
|
101
99
|
}
|
|
102
100
|
loadWithCancellation(url, pageIndex, pageSize, search, filter, sortFilter, cancelSubject) {
|
|
@@ -111,14 +109,12 @@ class ApiDataSource {
|
|
|
111
109
|
}
|
|
112
110
|
this.apiSubs = apiCall$.subscribe(r => {
|
|
113
111
|
console.log(`DataSource: Url: ${url}, Reply:`, r);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
this.apiSubject.next(r?.data);
|
|
121
|
-
this.extraDataSubject.next(r?.extraData);
|
|
112
|
+
// ✅ FIX: Ensure we always emit an array (even if empty) to prevent undefined issues
|
|
113
|
+
const data = r?.data || [];
|
|
114
|
+
const total = (Array.isArray(data) && data.length > 0) ? (r?.total || data.length) : 0;
|
|
115
|
+
this.totalDataLength.next(total);
|
|
116
|
+
this.apiSubject.next(data);
|
|
117
|
+
this.extraDataSubject.next(r?.extraData || null);
|
|
122
118
|
});
|
|
123
119
|
}
|
|
124
120
|
}
|
|
@@ -1868,6 +1864,7 @@ class TisSmartTableViewerComponent {
|
|
|
1868
1864
|
router;
|
|
1869
1865
|
location;
|
|
1870
1866
|
breakpointObserver;
|
|
1867
|
+
cdr;
|
|
1871
1868
|
homeUrl = '';
|
|
1872
1869
|
columnCustomizationUrlConfig;
|
|
1873
1870
|
t = {};
|
|
@@ -2009,13 +2006,14 @@ class TisSmartTableViewerComponent {
|
|
|
2009
2006
|
isMobile = false;
|
|
2010
2007
|
constructor(
|
|
2011
2008
|
// private userCustomizationService: UserCustomizationService,
|
|
2012
|
-
dialog, apiService, route, router, location, breakpointObserver) {
|
|
2009
|
+
dialog, apiService, route, router, location, breakpointObserver, cdr) {
|
|
2013
2010
|
this.dialog = dialog;
|
|
2014
2011
|
this.apiService = apiService;
|
|
2015
2012
|
this.route = route;
|
|
2016
2013
|
this.router = router;
|
|
2017
2014
|
this.location = location;
|
|
2018
2015
|
this.breakpointObserver = breakpointObserver;
|
|
2016
|
+
this.cdr = cdr;
|
|
2019
2017
|
// Store subscription reference for proper cleanup
|
|
2020
2018
|
this._selectionSubscription = this.selection.changed.subscribe(change => {
|
|
2021
2019
|
change.added.forEach(item => {
|
|
@@ -2115,11 +2113,17 @@ class TisSmartTableViewerComponent {
|
|
|
2115
2113
|
this._paginator.pageIndex = this.pageIndex;
|
|
2116
2114
|
this._paginator.pageSize = this.pageSize;
|
|
2117
2115
|
}
|
|
2116
|
+
// ✅ FIX: Always clear caches when new data arrives (even if empty)
|
|
2118
2117
|
// Clear background cache when new data arrives
|
|
2119
2118
|
this.clearRowBackgroundCache();
|
|
2120
2119
|
// Pre-compute all row backgrounds for optimal performance
|
|
2121
2120
|
this.computeAllRowBackgrounds();
|
|
2121
|
+
// ✅ FIX: Ensure selection state is updated even when data changes from empty to populated
|
|
2122
2122
|
this.checkAllRowsSelected();
|
|
2123
|
+
// ✅ FIX: Force Angular change detection to ensure table re-renders
|
|
2124
|
+
// This is critical for data → empty → data transitions
|
|
2125
|
+
this.cdr.detectChanges();
|
|
2126
|
+
// ✅ FIX: Force change detection by emitting events
|
|
2123
2127
|
this.onDataLoaded.emit(true);
|
|
2124
2128
|
this.onSetExtraData.emit(this.dataSource.extraDataSubject.value);
|
|
2125
2129
|
// if (this.selectedRowIds && this.selectedRowIds.length) {
|
|
@@ -2142,8 +2146,12 @@ class TisSmartTableViewerComponent {
|
|
|
2142
2146
|
if (this.filterFormGroupSubscription) {
|
|
2143
2147
|
this.filterFormGroupSubscription.unsubscribe();
|
|
2144
2148
|
}
|
|
2149
|
+
// ✅ FIX: Use custom comparator for distinctUntilChanged to properly detect form value changes
|
|
2145
2150
|
this.filterFormGroupSubscription = this.filterFormGroup.valueChanges
|
|
2146
|
-
.pipe(takeUntil(this._onDestroy), distinctUntilChanged(
|
|
2151
|
+
.pipe(takeUntil(this._onDestroy), distinctUntilChanged((prev, curr) => {
|
|
2152
|
+
// Custom comparator: deep compare form values
|
|
2153
|
+
return JSON.stringify(prev) === JSON.stringify(curr);
|
|
2154
|
+
})).subscribe(val => {
|
|
2147
2155
|
this.filterHasNonEmptyValue = ValidationHelper.hasNonEmptyValue(val);
|
|
2148
2156
|
});
|
|
2149
2157
|
}
|
|
@@ -2289,11 +2297,21 @@ class TisSmartTableViewerComponent {
|
|
|
2289
2297
|
}
|
|
2290
2298
|
// Compute all row backgrounds when data changes (runs once per data load)
|
|
2291
2299
|
computeAllRowBackgrounds() {
|
|
2292
|
-
|
|
2300
|
+
// ✅ FIX: Always clear the cache first to ensure fresh computation
|
|
2301
|
+
this.computedRowBackgrounds.clear();
|
|
2302
|
+
// ✅ FIX: Safely check if we have data and a background function
|
|
2303
|
+
if (!this.dataSource?.apiSubject?.value ||
|
|
2304
|
+
!Array.isArray(this.dataSource.apiSubject.value) ||
|
|
2305
|
+
!this.rowsConfig.backgroundApplyFunction) {
|
|
2306
|
+
return;
|
|
2307
|
+
}
|
|
2308
|
+
// ✅ FIX: Only compute backgrounds if we have actual data
|
|
2309
|
+
if (this.dataSource.apiSubject.value.length === 0) {
|
|
2293
2310
|
return;
|
|
2294
2311
|
}
|
|
2295
|
-
this.computedRowBackgrounds.clear();
|
|
2296
2312
|
this.dataSource.apiSubject.value.forEach((row) => {
|
|
2313
|
+
if (!row)
|
|
2314
|
+
return; // Skip null/undefined rows
|
|
2297
2315
|
const rowId = row?.id || row?.[this.selectedRowKey] || JSON.stringify(row);
|
|
2298
2316
|
try {
|
|
2299
2317
|
const background = this.rowsConfig.backgroundApplyFunction(row);
|
|
@@ -2382,6 +2400,8 @@ class TisSmartTableViewerComponent {
|
|
|
2382
2400
|
this.isAllExpanded = false;
|
|
2383
2401
|
// Clear expansion state when loading new data to avoid stale expansion state
|
|
2384
2402
|
CollectionHelper.clearSet(this.expandedRowIds);
|
|
2403
|
+
// ✅ FIX: Clear row background cache before loading new data to prevent stale computed backgrounds
|
|
2404
|
+
this.clearRowBackgroundCache();
|
|
2385
2405
|
const filterFormData = this.filterFormGroup?.value;
|
|
2386
2406
|
this.filterHasNonEmptyValue = ValidationHelper.hasFormData(filterFormData);
|
|
2387
2407
|
// Build query string using helper
|
|
@@ -2639,13 +2659,13 @@ class TisSmartTableViewerComponent {
|
|
|
2639
2659
|
this.expandedRowIds.clear();
|
|
2640
2660
|
}
|
|
2641
2661
|
}
|
|
2642
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerComponent, deps: [{ token: i1$1.MatDialog }, { token: ApiService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.Location }, { token: i5.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
2662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerComponent, deps: [{ token: i1$1.MatDialog }, { token: ApiService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.Location }, { token: i5.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2643
2663
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TisSmartTableViewerComponent, isStandalone: false, selector: "tis-smart-table-viewer", inputs: { columnCustomizationUrlConfig: "columnCustomizationUrlConfig", t: "t", componentName: "componentName", mainTitle: "mainTitle", searchPlaceholder: "searchPlaceholder", breadcrumbs: "breadcrumbs", hideHeader: "hideHeader", hideTableHeader: "hideTableHeader", hidePaginator: "hidePaginator", keepFilterInUrl: "keepFilterInUrl", disableBorderedView: "disableBorderedView", displayColumnsSelectionButton: "displayColumnsSelectionButton", loadDataApiBaseUrl: "loadDataApiBaseUrl", startStickyColumnCount: "startStickyColumnCount", endStickyColumnCount: "endStickyColumnCount", loaderPosition: "loaderPosition", dataNotFoundConfig: "dataNotFoundConfig", showFilterButtonSection: "showFilterButtonSection", columnsCodeMapping: "columnsCodeMapping", defaultDisplayedColumns: "defaultDisplayedColumns", defaultSortObj: "defaultSortObj", loadingSpinnerDiameter: "loadingSpinnerDiameter", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", useGlobalPageSize: "useGlobalPageSize", pageIndex: "pageIndex", filterFormGroup: "filterFormGroup", rowsConfig: "rowsConfig", enableRowsSelection: "enableRowsSelection", enableAllRowsSelection: "enableAllRowsSelection", onlySingleSelection: "onlySingleSelection", selectedRowIds: "selectedRowIds", selectedRowKey: "selectedRowKey", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop", isExpansion: "isExpansion", isExpandedRow: "isExpandedRow", expandedTemplate: "expandedTemplate" }, outputs: { displayedColumnsChange: "displayedColumnsChange", sortObjChange: "sortObjChange", pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange", onDataLoaded: "onDataLoaded", onSetExtraData: "onSetExtraData", onSetTotal: "onSetTotal", selectedRowsChange: "selectedRowsChange", allRowsSelectedChange: "allRowsSelectedChange", listDataSequenceChange: "listDataSequenceChange" }, providers: [CdkColumnDef], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section [class.tis-page]=\"!hideHeader\">\n <div class=\"tis-page-header\" *ngIf=\"!hideHeader\">\n <nav aria-label=\"tis-breadcrumb\">\n <ol class=\"tis-breadcrumb\">\n <li class=\"tis-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n <li class=\"tis-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n </li>\n }\n <li class=\"tis-breadcrumb-item active\">\n {{mainTitle}}\n </li>\n </ol>\n </nav>\n <ng-content select=\"[slot='top-buttons-section']\"></ng-content>\n </div>\n <h1 class=\"tis-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n <div class=\"tis-page-body\">\n <div class=\"tis-page-body-content\">\n\n @if(initialLoading){\n <div class=\"tis-d-flex tis-justify-content-center pb-2 pt-7\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"60\"></mat-progress-spinner>\n </div>\n } @else {\n\n @if ((dataSource?.totalDataLength$ | async) || (dataSource?.loading$ | async) || search ||\n filterHasNonEmptyValue || showFilterButtonSection || displayAfterFilterRemoved) {\n <div class=\"tis-table-container\">\n @if(!hideTableHeader){\n <div class=\"tis-table-container-header\">\n <ul class=\"tis-inline-group\">\n <li class=\"tis-inline-group-item\">\n <tis-columns-btn [columnCustomizationUrlConfig]=\"columnCustomizationUrlConfig\" [t]=\"t\"\n [componentName]=\"componentName\" [(selectedTemplate)]=\"selectedTemplate\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n (selectedTemplateChange)=\"onSetSelectedTemplate($event)\"\n (displayedColumnsChange)=\"onChangeDisplayColumns($event)\"\n (fromStartColumnNumberChange)=\"onChangeFromStartColumnNumber($event)\"\n (fromEndColumnNumberChange)=\"onChangeFromEndColumnNumber($event)\"></tis-columns-btn>\n </li>\n <ng-content select=\"[slot='filter-button-section']\"></ng-content>\n </ul>\n <div class=\"flex items-center\">\n <ul class=\"tis-inline-group\">\n <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n </ul>\n @if(!isMobile && searchPlaceholder && searchPlaceholder != ''){\n <mat-form-field\n class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 tis-table-search-field\"\n appearance=\"outline\">\n <span class=\"material-icons\" matPrefix>search</span>\n <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n (click)=\"searchCtrl.setValue('')\"\n *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n </mat-form-field>\n }\n </div>\n </div>\n }\n\n @if (filterFormGroup) {\n\n <ng-content select=\"[slot='filter-form-section']\"></ng-content>\n\n @if(finalSelectedFilterValuesToDisplay.length && filterApplied) {\n <div class=\"flex gap-3 mb-3 filter-applied-section md-hide-scrollbar\">\n @for(v of finalSelectedFilterValuesToDisplay; track trackByFilterValue($index, v)) {\n @if (v) {\n <span class=\"tis-filter-badge\" style=\"white-space: nowrap;\">\n @if(v.labelKey && v.labelKey != '' && (v.valueKey || v.value)) {\n <span class=\"font-semibold\"> {{v.labelKey }} </span>\n }\n @if(v.valueKey) {\n {{v.valueKey }}\n } @else {\n {{v.value }}\n }\n <span class=\"material-icons tis-curser-pointer\"\n (click)=\"removeParticularFilter(v)\">cancel</span>\n </span>\n }\n }\n </div>\n }\n }\n\n @if(isMobile && searchPlaceholder && searchPlaceholder != ''){\n <mat-form-field\n class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 tis-table-search-field\"\n appearance=\"outline\">\n <span class=\"material-icons\" matPrefix>search</span>\n <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n (click)=\"searchCtrl.setValue('')\"\n *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n </mat-form-field>\n }\n\n \n @if(loaderPosition == 'top'){\n @if(dataSource?.loading$ | async){\n <div class=\"tis-d-flex tis-justify-content-center py-2\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n </div>\n }\n }\n <div class=\"tis-table-container-body\">\n <div class=\"tis-table-wrapper\" [appScrolling]=\"true\">\n\n <!--Table Here-->\n <table mat-table matSort [dataSource]=\"dataSource\" class=\"tis-table\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\n\n @if (enableRowsSelection) {\n <ng-container matColumnDef=\"Select\">\n <th mat-header-cell *matHeaderCellDef>\n @if (enableAllRowsSelection) {\n <mat-checkbox color=\"primary\" (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"isAllRowsSelected\"\n [indeterminate]=\"selection.hasValue() && !isAllRowsSelected\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, row) : null\" [checked]=\"isChecked(row)\"></mat-checkbox>\n </td>\n </ng-container>\n }\n\n @for(column of autoRenderColumns; track trackByAutoColumn($index, column); let i = $index; let l = $last){\n <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n @if(column.type == 'expand') {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n <div style=\"display: flex; align-items: center; gap: 5px;\">\n <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n </div>\n </th>\n }\n @else if(column.sort) {\n <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n \n\n @if(column.type == 'date'){\n <td mat-cell *matCellDef=\"let element\" class=\"1al-{{column.align}} 1ty-{{column.type}}\" >\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDate) : ''}}\n </p>\n </td>\n } @else if(column.type == 'date-time'){\n <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDateTime) : ''}}\n </p>\n </td>\n } @else if(column.type == 'date-time-with-seconds'){\n <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDateTimeWithSeconds) : ''}}\n </p>\n </td>\n } @else {\n <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n @if (column.type == 'quantity') {\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : '1.4-4') : '-' }}\n } @else if (column.type == 'money') {\n {{ column.valueKey && (getNestedValue(element, column.valueKey))?.toFixed(2) }}\n } @else {\n {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n }\n </p>\n </td>\n }\n </ng-container>\n\n }\n\n\n @for(column of templateRenderColumns; track trackByTemplateColumn($index, column); let i = $index; let l = $last){\n <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n @if(column.type == 'expand') {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n </div>\n </th>\n }\n @else if(column.sort) {\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" class=\"4al-{{column.align}} 4ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n <ng-container *ngIf=\"column.template as template\">\n <ng-container *ngTemplateOutlet=\"template; context: { colDef: column, colData: element }\"></ng-container>\n </ng-container>\n </td>\n </ng-container>\n }\n\n <!--Drag Column Def Start-->\n <ng-container [matColumnDef]=\"'drag'\" >\n <th mat-header-cell *matHeaderCellDef>\n --\n </th>\n <td mat-cell *matCellDef=\"let element\" class=\"5al-drag 5ty-drag\">\n <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n </td>\n </ng-container>\n <!--Drag Column Def End-->\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\n <ng-container *ngIf=\"expandedTemplate as template\">\n <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"tis-data-not-found\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n </svg>\n <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n </div>\n </td>\n </tr>\n\n <!-- Apply Drag and Drop to tbody -->\n @if(enableDragNDrop) {\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n }\n\n @if(!enableDragNDrop) {\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n } \n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></tr>\n </table>\n <!--Table End-->\n\n </div>\n @if(loaderPosition == 'bottom'){\n @if(dataSource?.loading$ | async){\n <div class=\"tis-d-flex tis-justify-content-center py-2\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n </div>\n }\n }\n @if (!hidePaginator) {\n <div class=\"tis-table-paginator\">\n <mat-paginator [length]=\"dataSource?.totalDataLength?.value\" [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons></mat-paginator>\n </div>\n }\n </div>\n </div>\n } @else {\n\n @if(dataNotFoundConfig) {\n <div class=\"tis-data-not-found\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n </svg>\n <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n <p class=\"tis-p\">{{dataNotFoundConfig.desc}}</p>\n @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n <button mat-flat-button color=\"primary\" class=\"tis-text-upper\"\n (click)=\"handleButtonClick(dataNotFoundConfig)\">\n <mat-icon>add</mat-icon>\n {{dataNotFoundConfig.btnText}}\n </button>\n }\n @if((dataNotFoundConfig.secondBtnUrl || dataNotFoundConfig?.secondBtnClick) && dataNotFoundConfig.secondBtnText) {\n <button mat-stroked-button color=\"primary\" class=\"tis-text-upper\"\n (click)=\"handleSecondButtonClick(dataNotFoundConfig)\">\n <mat-icon>add</mat-icon>\n {{dataNotFoundConfig.secondBtnText}}\n </button>\n }\n </div>\n }\n\n }\n\n }\n\n </div>\n </div>\n</section>", styles: ["::ng-deep .sub-main-content{border:0px solid #f00;margin-top:56px;height:calc(100% - 56px);padding:15px;overflow:auto}.header-title{margin-top:8px;padding:7px 10px;color:#969a9c}.header-title h3{font-size:20px!important;font-weight:700}.header-menu{border:0px solid red;background:#fff;margin-top:1px;margin-bottom:0}.w-100{width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e087}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e087}.search-mat-form-field{width:100%}.filter-applied-section{overflow:auto}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@media (max-width: 575.98px){.search-mat-form-field{width:100%!important}}@media (min-width: 576px) and (max-width: 767.98px){.search-mat-form-field{width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i13$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i15.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i15.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: ScrollingDirective, selector: "[appScrolling]", inputs: ["appScrolling"] }, { kind: "component", type: TisColumnsBtnComponent, selector: "tis-columns-btn", inputs: ["columnCustomizationUrlConfig", "t", "componentName", "defaultColumns", "columns", "skipTranslation", "customColumns", "selectedTemplate"], outputs: ["selectedTemplateChange", "displayedColumnsChange", "fromStartColumnNumberChange", "fromEndColumnNumberChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: TisDatePipe, name: "tisDate" }, { kind: "pipe", type: TisDateTimePipe, name: "tisDateTime" }, { kind: "pipe", type: TisDateTimeWithSecondsPipe, name: "tisDateTimeWithSeconds" }] });
|
|
2644
2664
|
}
|
|
2645
2665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerComponent, decorators: [{
|
|
2646
2666
|
type: Component,
|
|
2647
2667
|
args: [{ selector: 'tis-smart-table-viewer', standalone: false, providers: [CdkColumnDef], template: "<section [class.tis-page]=\"!hideHeader\">\n <div class=\"tis-page-header\" *ngIf=\"!hideHeader\">\n <nav aria-label=\"tis-breadcrumb\">\n <ol class=\"tis-breadcrumb\">\n <li class=\"tis-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n <li class=\"tis-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n </li>\n }\n <li class=\"tis-breadcrumb-item active\">\n {{mainTitle}}\n </li>\n </ol>\n </nav>\n <ng-content select=\"[slot='top-buttons-section']\"></ng-content>\n </div>\n <h1 class=\"tis-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n <div class=\"tis-page-body\">\n <div class=\"tis-page-body-content\">\n\n @if(initialLoading){\n <div class=\"tis-d-flex tis-justify-content-center pb-2 pt-7\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"60\"></mat-progress-spinner>\n </div>\n } @else {\n\n @if ((dataSource?.totalDataLength$ | async) || (dataSource?.loading$ | async) || search ||\n filterHasNonEmptyValue || showFilterButtonSection || displayAfterFilterRemoved) {\n <div class=\"tis-table-container\">\n @if(!hideTableHeader){\n <div class=\"tis-table-container-header\">\n <ul class=\"tis-inline-group\">\n <li class=\"tis-inline-group-item\">\n <tis-columns-btn [columnCustomizationUrlConfig]=\"columnCustomizationUrlConfig\" [t]=\"t\"\n [componentName]=\"componentName\" [(selectedTemplate)]=\"selectedTemplate\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n (selectedTemplateChange)=\"onSetSelectedTemplate($event)\"\n (displayedColumnsChange)=\"onChangeDisplayColumns($event)\"\n (fromStartColumnNumberChange)=\"onChangeFromStartColumnNumber($event)\"\n (fromEndColumnNumberChange)=\"onChangeFromEndColumnNumber($event)\"></tis-columns-btn>\n </li>\n <ng-content select=\"[slot='filter-button-section']\"></ng-content>\n </ul>\n <div class=\"flex items-center\">\n <ul class=\"tis-inline-group\">\n <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n </ul>\n @if(!isMobile && searchPlaceholder && searchPlaceholder != ''){\n <mat-form-field\n class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 tis-table-search-field\"\n appearance=\"outline\">\n <span class=\"material-icons\" matPrefix>search</span>\n <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n (click)=\"searchCtrl.setValue('')\"\n *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n </mat-form-field>\n }\n </div>\n </div>\n }\n\n @if (filterFormGroup) {\n\n <ng-content select=\"[slot='filter-form-section']\"></ng-content>\n\n @if(finalSelectedFilterValuesToDisplay.length && filterApplied) {\n <div class=\"flex gap-3 mb-3 filter-applied-section md-hide-scrollbar\">\n @for(v of finalSelectedFilterValuesToDisplay; track trackByFilterValue($index, v)) {\n @if (v) {\n <span class=\"tis-filter-badge\" style=\"white-space: nowrap;\">\n @if(v.labelKey && v.labelKey != '' && (v.valueKey || v.value)) {\n <span class=\"font-semibold\"> {{v.labelKey }} </span>\n }\n @if(v.valueKey) {\n {{v.valueKey }}\n } @else {\n {{v.value }}\n }\n <span class=\"material-icons tis-curser-pointer\"\n (click)=\"removeParticularFilter(v)\">cancel</span>\n </span>\n }\n }\n </div>\n }\n }\n\n @if(isMobile && searchPlaceholder && searchPlaceholder != ''){\n <mat-form-field\n class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 tis-table-search-field\"\n appearance=\"outline\">\n <span class=\"material-icons\" matPrefix>search</span>\n <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n (click)=\"searchCtrl.setValue('')\"\n *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n </mat-form-field>\n }\n\n \n @if(loaderPosition == 'top'){\n @if(dataSource?.loading$ | async){\n <div class=\"tis-d-flex tis-justify-content-center py-2\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n </div>\n }\n }\n <div class=\"tis-table-container-body\">\n <div class=\"tis-table-wrapper\" [appScrolling]=\"true\">\n\n <!--Table Here-->\n <table mat-table matSort [dataSource]=\"dataSource\" class=\"tis-table\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\n\n @if (enableRowsSelection) {\n <ng-container matColumnDef=\"Select\">\n <th mat-header-cell *matHeaderCellDef>\n @if (enableAllRowsSelection) {\n <mat-checkbox color=\"primary\" (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"isAllRowsSelected\"\n [indeterminate]=\"selection.hasValue() && !isAllRowsSelected\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, row) : null\" [checked]=\"isChecked(row)\"></mat-checkbox>\n </td>\n </ng-container>\n }\n\n @for(column of autoRenderColumns; track trackByAutoColumn($index, column); let i = $index; let l = $last){\n <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n @if(column.type == 'expand') {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n <div style=\"display: flex; align-items: center; gap: 5px;\">\n <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n </div>\n </th>\n }\n @else if(column.sort) {\n <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n \n\n @if(column.type == 'date'){\n <td mat-cell *matCellDef=\"let element\" class=\"1al-{{column.align}} 1ty-{{column.type}}\" >\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDate) : ''}}\n </p>\n </td>\n } @else if(column.type == 'date-time'){\n <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDateTime) : ''}}\n </p>\n </td>\n } @else if(column.type == 'date-time-with-seconds'){\n <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | tisDateTimeWithSeconds) : ''}}\n </p>\n </td>\n } @else {\n <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n @if (column.type == 'quantity') {\n {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : '1.4-4') : '-' }}\n } @else if (column.type == 'money') {\n {{ column.valueKey && (getNestedValue(element, column.valueKey))?.toFixed(2) }}\n } @else {\n {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n }\n </p>\n </td>\n }\n </ng-container>\n\n }\n\n\n @for(column of templateRenderColumns; track trackByTemplateColumn($index, column); let i = $index; let l = $last){\n <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n @if(column.type == 'expand') {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n </div>\n </th>\n }\n @else if(column.sort) {\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n {{ column?.columnName ? column?.columnName : t[column.name] }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" class=\"4al-{{column.align}} 4ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n <ng-container *ngIf=\"column.template as template\">\n <ng-container *ngTemplateOutlet=\"template; context: { colDef: column, colData: element }\"></ng-container>\n </ng-container>\n </td>\n </ng-container>\n }\n\n <!--Drag Column Def Start-->\n <ng-container [matColumnDef]=\"'drag'\" >\n <th mat-header-cell *matHeaderCellDef>\n --\n </th>\n <td mat-cell *matCellDef=\"let element\" class=\"5al-drag 5ty-drag\">\n <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n </td>\n </ng-container>\n <!--Drag Column Def End-->\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\n <ng-container *ngIf=\"expandedTemplate as template\">\n <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"tis-data-not-found\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n </svg>\n <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n </div>\n </td>\n </tr>\n\n <!-- Apply Drag and Drop to tbody -->\n @if(enableDragNDrop) {\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n }\n\n @if(!enableDragNDrop) {\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n } \n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></tr>\n </table>\n <!--Table End-->\n\n </div>\n @if(loaderPosition == 'bottom'){\n @if(dataSource?.loading$ | async){\n <div class=\"tis-d-flex tis-justify-content-center py-2\">\n <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n </div>\n }\n }\n @if (!hidePaginator) {\n <div class=\"tis-table-paginator\">\n <mat-paginator [length]=\"dataSource?.totalDataLength?.value\" [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons></mat-paginator>\n </div>\n }\n </div>\n </div>\n } @else {\n\n @if(dataNotFoundConfig) {\n <div class=\"tis-data-not-found\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n </svg>\n <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n <p class=\"tis-p\">{{dataNotFoundConfig.desc}}</p>\n @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n <button mat-flat-button color=\"primary\" class=\"tis-text-upper\"\n (click)=\"handleButtonClick(dataNotFoundConfig)\">\n <mat-icon>add</mat-icon>\n {{dataNotFoundConfig.btnText}}\n </button>\n }\n @if((dataNotFoundConfig.secondBtnUrl || dataNotFoundConfig?.secondBtnClick) && dataNotFoundConfig.secondBtnText) {\n <button mat-stroked-button color=\"primary\" class=\"tis-text-upper\"\n (click)=\"handleSecondButtonClick(dataNotFoundConfig)\">\n <mat-icon>add</mat-icon>\n {{dataNotFoundConfig.secondBtnText}}\n </button>\n }\n </div>\n }\n\n }\n\n }\n\n </div>\n </div>\n</section>", styles: ["::ng-deep .sub-main-content{border:0px solid #f00;margin-top:56px;height:calc(100% - 56px);padding:15px;overflow:auto}.header-title{margin-top:8px;padding:7px 10px;color:#969a9c}.header-title h3{font-size:20px!important;font-weight:700}.header-menu{border:0px solid red;background:#fff;margin-top:1px;margin-bottom:0}.w-100{width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e087}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e087}.search-mat-form-field{width:100%}.filter-applied-section{overflow:auto}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@media (max-width: 575.98px){.search-mat-form-field{width:100%!important}}@media (min-width: 576px) and (max-width: 767.98px){.search-mat-form-field{width:100%!important}}\n"] }]
|
|
2648
|
-
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ApiService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.Location }, { type: i5.BreakpointObserver }], propDecorators: { columnCustomizationUrlConfig: [{
|
|
2668
|
+
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ApiService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.Location }, { type: i5.BreakpointObserver }, { type: i0.ChangeDetectorRef }], propDecorators: { columnCustomizationUrlConfig: [{
|
|
2649
2669
|
type: Input,
|
|
2650
2670
|
args: [{ required: true }]
|
|
2651
2671
|
}], t: [{
|