mis-crystal-design-system 18.1.4-test-1 → 18.1.4-test-2
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.
|
@@ -280,10 +280,9 @@ function TableComponent_Conditional_9_ng_container_8_div_1_span_1_Template(rf, c
|
|
|
280
280
|
i0.ɵɵtext(1);
|
|
281
281
|
i0.ɵɵelementEnd();
|
|
282
282
|
} if (rf & 2) {
|
|
283
|
-
let tmp_6_0;
|
|
284
283
|
const pageNumber_r22 = i0.ɵɵnextContext().$implicit;
|
|
285
284
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
286
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r22 ==
|
|
285
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r22 == ctx_r1.selectedPage()));
|
|
287
286
|
i0.ɵɵadvance();
|
|
288
287
|
i0.ɵɵtextInterpolate(pageNumber_r22);
|
|
289
288
|
} }
|
|
@@ -326,7 +325,7 @@ function TableComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
|
326
325
|
i0.ɵɵelementEnd();
|
|
327
326
|
i0.ɵɵtemplate(3, TableComponent_Conditional_9_Conditional_3_Template, 2, 6, "div", 46);
|
|
328
327
|
i0.ɵɵelementStart(4, "div", 47)(5, "span", 48);
|
|
329
|
-
i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_5_listener() {
|
|
328
|
+
i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedPage() > 1 && ctx_r1.updateSelectedPage(ctx_r1.selectedPage() - 1)); });
|
|
330
329
|
i0.ɵɵnamespaceSVG();
|
|
331
330
|
i0.ɵɵelementStart(6, "svg", 49);
|
|
332
331
|
i0.ɵɵelement(7, "path", 50);
|
|
@@ -334,27 +333,25 @@ function TableComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
|
334
333
|
i0.ɵɵtemplate(8, TableComponent_Conditional_9_ng_container_8_Template, 2, 1, "ng-container", 19);
|
|
335
334
|
i0.ɵɵnamespaceHTML();
|
|
336
335
|
i0.ɵɵelementStart(9, "span", 48);
|
|
337
|
-
i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_9_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(
|
|
336
|
+
i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_9_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedPage() < ((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.noOfPages) && ctx_r1.updateSelectedPage(ctx_r1.selectedPage() + 1)); });
|
|
338
337
|
i0.ɵɵnamespaceSVG();
|
|
339
338
|
i0.ɵɵelementStart(10, "svg", 49);
|
|
340
339
|
i0.ɵɵelement(11, "path", 51);
|
|
341
340
|
i0.ɵɵelementEnd()()()();
|
|
342
341
|
} if (rf & 2) {
|
|
343
|
-
let tmp_2_0;
|
|
344
|
-
let tmp_4_0;
|
|
345
342
|
let tmp_5_0;
|
|
346
343
|
let tmp_6_0;
|
|
347
344
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
348
345
|
i0.ɵɵadvance(2);
|
|
349
|
-
i0.ɵɵtextInterpolate3(" Showing ", (
|
|
346
|
+
i0.ɵɵtextInterpolate3(" Showing ", (ctx_r1.selectedPage() - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + 1, "-", (ctx_r1.selectedPage() - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + ctx_r1.tableLength(), " of ", ctx_r1.tableConfig().paginationConfig.totalNoOfRows, " items ");
|
|
350
347
|
i0.ɵɵadvance();
|
|
351
348
|
i0.ɵɵconditional(ctx_r1.showPageSizeDropdown() ? 3 : -1);
|
|
352
349
|
i0.ɵɵadvance(2);
|
|
353
|
-
i0.ɵɵclassProp("page-nav-inactive",
|
|
350
|
+
i0.ɵɵclassProp("page-nav-inactive", ctx_r1.selectedPage() === 1);
|
|
354
351
|
i0.ɵɵadvance(3);
|
|
355
352
|
i0.ɵɵproperty("ngIf", !((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.disablePageJumping));
|
|
356
353
|
i0.ɵɵadvance();
|
|
357
|
-
i0.ɵɵclassProp("page-nav-inactive",
|
|
354
|
+
i0.ɵɵclassProp("page-nav-inactive", ctx_r1.selectedPage() === ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.noOfPages));
|
|
358
355
|
} }
|
|
359
356
|
class TableComponent {
|
|
360
357
|
constructor(renderer) {
|
|
@@ -374,6 +371,7 @@ class TableComponent {
|
|
|
374
371
|
// Pagination related variables
|
|
375
372
|
this.pages = signal([]);
|
|
376
373
|
this.tableLength = signal(0);
|
|
374
|
+
this.selectedPage = signal(1); // Internal state for selected page
|
|
377
375
|
this.pageSelected = output();
|
|
378
376
|
this.pageSizeChanged = output();
|
|
379
377
|
this.pageSizeOptions = computed(() => {
|
|
@@ -416,6 +414,12 @@ class TableComponent {
|
|
|
416
414
|
if (this.rowCollapseConfigIndex() !== -1) {
|
|
417
415
|
this.buildExpandedMap();
|
|
418
416
|
}
|
|
417
|
+
// Sync selectedPage from config only if it's different (supports programmatic page changes from parent)
|
|
418
|
+
// This handles the case where parent updates config to change page programmatically
|
|
419
|
+
if (config?.paginationConfig?.selectedPage !== undefined &&
|
|
420
|
+
config.paginationConfig.selectedPage !== this.selectedPage()) {
|
|
421
|
+
this.selectedPage.set(config.paginationConfig.selectedPage);
|
|
422
|
+
}
|
|
419
423
|
if (config?.paginationConfig?.showPageSizeDropdown) {
|
|
420
424
|
const options = this.pageSizeOptions();
|
|
421
425
|
const rowsPerPage = this.tableConfig()?.paginationConfig?.rowsPerPage;
|
|
@@ -451,6 +455,18 @@ class TableComponent {
|
|
|
451
455
|
}
|
|
452
456
|
}
|
|
453
457
|
}, { allowSignalWrites: true });
|
|
458
|
+
// Reactive height calculation: maintains exact old behavior for backward compatibility
|
|
459
|
+
// Old code: height - 56 + "px" (flawed for percentages, but we maintain it)
|
|
460
|
+
// Note: Effect must be in constructor, not lifecycle hooks (NG0203 error otherwise)
|
|
461
|
+
// effect(() => {
|
|
462
|
+
// const config = this.tableConfig();
|
|
463
|
+
// if (!config?.paginationConfig || !this.table?.nativeElement) return;
|
|
464
|
+
// const height = config.height;
|
|
465
|
+
// // Old behavior: height - 56 + "px" (maintains the flaw for backward compatibility)
|
|
466
|
+
// const result = (height as any) - 56;
|
|
467
|
+
// const finalHeight = result + "px";
|
|
468
|
+
// this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
|
|
469
|
+
// });
|
|
454
470
|
}
|
|
455
471
|
// Function to handle row click
|
|
456
472
|
selectRow(index) {
|
|
@@ -500,18 +516,15 @@ class TableComponent {
|
|
|
500
516
|
this.expandedMap.set(newExpandedMap);
|
|
501
517
|
}
|
|
502
518
|
ngAfterViewInit() {
|
|
503
|
-
//
|
|
504
|
-
//
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
if (!config?.paginationConfig || !this.table?.nativeElement)
|
|
508
|
-
return;
|
|
519
|
+
// ViewChild is now available - manually trigger height calculation once
|
|
520
|
+
// The effect in constructor will handle subsequent config changes
|
|
521
|
+
const config = this.tableConfig();
|
|
522
|
+
if (config?.paginationConfig && this.table?.nativeElement) {
|
|
509
523
|
const height = config.height;
|
|
510
|
-
// Old behavior: height - 56 + "px" (maintains the flaw for backward compatibility)
|
|
511
524
|
const result = height - 56;
|
|
512
525
|
const finalHeight = result + "px";
|
|
513
526
|
this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
|
|
514
|
-
}
|
|
527
|
+
}
|
|
515
528
|
}
|
|
516
529
|
ngOnChanges() {
|
|
517
530
|
this.tableLength.set(this.tableData()?.length ?? 0);
|
|
@@ -519,6 +532,8 @@ class TableComponent {
|
|
|
519
532
|
const activeRowIndex = this.tableConfig().activeRowIndex;
|
|
520
533
|
this.activeRowIndex.set(Array.isArray(activeRowIndex) ? activeRowIndex : [activeRowIndex]);
|
|
521
534
|
}
|
|
535
|
+
// Note: selectedPage sync is handled in constructor effect (ngOnChanges doesn't fire for signal inputs)
|
|
536
|
+
// Only syncs if config value differs from internal state (supports programmatic page changes)
|
|
522
537
|
}
|
|
523
538
|
// Filter related functions
|
|
524
539
|
initializeFilters() {
|
|
@@ -581,6 +596,9 @@ class TableComponent {
|
|
|
581
596
|
// Pagination related functions
|
|
582
597
|
initializePagination() {
|
|
583
598
|
if (this.tableConfig().paginationConfig) {
|
|
599
|
+
// Initialize selectedPage from config if provided, otherwise default to 1
|
|
600
|
+
const configSelectedPage = this.tableConfig().paginationConfig.selectedPage;
|
|
601
|
+
this.selectedPage.set(configSelectedPage ?? 1);
|
|
584
602
|
let len = this.tableConfig().paginationConfig.noOfPages;
|
|
585
603
|
if (len <= 7) {
|
|
586
604
|
const newPages = [];
|
|
@@ -598,9 +616,11 @@ class TableComponent {
|
|
|
598
616
|
// Guard clause to prevent out-of-range updates
|
|
599
617
|
if (pageNumber < 1 || pageNumber > this.tableConfig().paginationConfig.noOfPages)
|
|
600
618
|
return;
|
|
619
|
+
// Update internal selectedPage state immediately
|
|
620
|
+
this.selectedPage.set(pageNumber);
|
|
601
621
|
// Reset header checkbox when navigating to a different page
|
|
602
622
|
this.selectAllCheckbox.set(false);
|
|
603
|
-
//
|
|
623
|
+
// Update page numbers display for pagination with many pages
|
|
604
624
|
let len = this.tableConfig().paginationConfig.noOfPages;
|
|
605
625
|
if (len > 7) {
|
|
606
626
|
if (pageNumber - 2 <= 1) {
|
|
@@ -613,6 +633,7 @@ class TableComponent {
|
|
|
613
633
|
this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
|
|
614
634
|
}
|
|
615
635
|
}
|
|
636
|
+
// Emit to parent so they can update their config
|
|
616
637
|
this.pageSelected.emit(pageNumber);
|
|
617
638
|
}
|
|
618
639
|
// Main container related functions
|
|
@@ -784,7 +805,7 @@ class TableComponent {
|
|
|
784
805
|
}
|
|
785
806
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
786
807
|
type: Component,
|
|
787
|
-
args: [{ selector: "mis-table", template: "<div\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth(),\n 'overflow-x': tableConfig().canScrollHorizontally ? 'auto' : 'unset'\n }\"\n id=\"main-container\"\n>\n <mis-table-filter\n #filter\n (filtersApplied)=\"updateAppliedFilters($event)\"\n *ngIf=\"showFilter()\"\n [containerStyles]=\"filterContainerStyles()\"\n [filtersData]=\"filterData()\"\n ></mis-table-filter>\n <div\n #table\n id=\"table-container\"\n [ngClass]=\"{ 'no-scrollbar': expandedIndex() < 0, scrollbar: !(expandedIndex() < 0), 'scroll-horizontally': tableConfig().canScrollHorizontally }\"\n >\n <div\n [ngStyle]=\"getColHeadersRowStyles()\"\n id=\"col-headers-container\"\n >\n <div\n #colHeaderRef\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of tableConfig()?.colHeaderConfig\"\n class=\"col-header\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom' && colHeader?.type !== 'checkbox'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData.set(colHeader.filters); toggleFilter(colHeader.data); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n class=\"filter-icon\"\n >\n <span *ngIf=\"appliedFilters()[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n <span\n (click)=\"toggleCheckbox(); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type === 'checkbox'\"\n class=\"checkbox-icon\"\n >\n <mis-checkbox [checked]=\"selectAllCheckbox()\"></mis-checkbox>\n </span>\n <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n [column]=\"colHeader\"\n [activeSort]=\"currentSort()\"\n [activeSorts]=\"multiColumnSort()\"\n [multiColumnSort]=\"tableConfig().multiColumnSort\"\n (sortChange)=\"onSortChange($event)\"\n class=\"sort-icon\">\n </span>\n <ng-template *ngIf=\"colHeader?.type === 'custom'\" customTableCell [customComponent]=\"colHeader?.componentRef\" [data]=\"colHeader.data\"></ng-template>\n </div>\n </div>\n \n <div id=\"data-container\">\n <div class=\"row-wrapper\" *ngFor=\"let row of tableData(); let i = index; let rowIndex = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': tableConfig().cellHover, 'active-row': activeRowIndex().includes(i) }\"\n [ngStyle]=\"{ 'min-height': tableConfig()?.rowConfig?.height ? tableConfig().rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n [class.disabled-row]=\"isRowDisabled(row)\"\n >\n <div\n (click)=\"tableConfig()?.colConfig[colIndex]?.action && tableConfig()?.colConfig[colIndex]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[colIndex]?.action(col) : null\"\n *ngFor=\"let col of row; let colIndex = index\"\n [ngStyle]=\"{\n width: tableConfig()?.colConfig[colIndex]?.style?.width || tableConfig()?.colHeaderConfig[colIndex]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n [ngClass]=\"{ 't-col-container-hover': tableConfig().cellHover }\"\n >\n <div\n class=\"t-col\"\n [style]=\"tableConfig().colConfig[colIndex]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: tableConfig().colConfig[colIndex]?.action ? 'pointer' : 'default',\n 'justify-content': tableConfig().colConfig[colIndex]?.style?.justifyContent\n ? tableConfig().colConfig[colIndex]?.style?.justifyContent\n : tableConfig().colConfig[colIndex]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <div\n *ngIf=\"tableConfig().colConfig[colIndex]?.type !== 'custom' && tableConfig().colConfig[colIndex]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: tableConfig()?.colConfig[colIndex]?.style?.color || '',\n '--collapsed-lines': previewLines() || 3\n }\"\n [ngClass]=\"{\n 'collapsed-cell': collapseColIndex() == colIndex && expandedMap()[rowIndex]\n }\"\n class=\"t-col-text\"\n >\n <!-- Render as HTML -->\n <ng-container *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'html'; else plainText\">\n <span [innerHTML]=\"col\"></span>\n </ng-container>\n \n <!-- Render as plain text -->\n <ng-template #plainText>\n <span>{{ col }}</span>\n </ng-template>\n </div>\n \n <ng-template\n *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'custom'\"\n [customComponent]=\"tableConfig().colConfig[colIndex].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <mis-actions-cell\n *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'actions'\"\n [cellData]=\"col\"\n [config]=\"tableConfig().colConfig[colIndex]\"\n (actionClick)=\"onActionClick($event, rowIndex)\"\n [ngClass]=\"{\n 'disable-actions': (tableConfig().colConfig[colIndex]?.actionType === 'checkbox' || tableConfig().colConfig[colIndex]?.actionType === 'row-collapse') && isRowDisabled(row)\n }\"\n ></mis-actions-cell>\n\n </div>\n </div>\n </div>\n <div *ngIf=\"tableConfig()?.canExpand && expandedIndex() === i\" class=\"sub-row\">\n <ng-container *ngIf=\"subTableDataLoading()\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n Loading...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length === 0\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n No Data Available...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length > 0\">\n <sub-table [config]=\"subTableconfig()\" [tableData]=\"subTableData()\"></sub-table>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div id=\"pagination-content-container\">\n @if(shouldShowPagination()){\n <div \n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (tableConfig().paginationConfig?.selectedPage - 1) * tableConfig().paginationConfig.rowsPerPage + 1 }}-{{\n (tableConfig().paginationConfig?.selectedPage - 1) * tableConfig().paginationConfig.rowsPerPage + tableLength()\n }}\n of {{ tableConfig().paginationConfig.totalNoOfRows }} items\n </p>\n @if(showPageSizeDropdown()) {\n <div class=\"page-size-selector\">\n <mis-dropdown\n [data]=\"pageSizeOptions()\"\n [selectedItem]=\"selectedPageSizeOption()\"\n [width]=\"'90px'\"\n [height]=\"'32px'\"\n [searchEnabled]=\"false\"\n [dropdownListHeight]=\"'100px'\"\n (onChange)=\"onPageSizeChange($event)\"\n class=\"page-size-dropdown\"\n ></mis-dropdown>\n </div>\n }\n <div id=\"pages-container\">\n <span (click)=\"tableConfig().paginationConfig?.selectedPage > 1 && updateSelectedPage(tableConfig().paginationConfig?.selectedPage - 1)\" class=\"page\" [class.page-nav-inactive]=\"tableConfig().paginationConfig?.selectedPage === 1\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n <!-- Page numbers (only show if disablePageJumping is false) -->\n <ng-container *ngIf=\"!tableConfig().paginationConfig?.disablePageJumping\">\n <div *ngFor=\"let pageNumber of pages()\">\n <span\n (click)=\"updateSelectedPage(pageNumber)\"\n *ngIf=\"pageNumber != 0\"\n [ngClass]=\"{ 'page-active': pageNumber == tableConfig().paginationConfig?.selectedPage }\"\n class=\"page page-jumping-enabled\"\n >{{ pageNumber }}</span>\n <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n <div [ngStyle]=\"{ display: 'flex' }\">\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\"></span>\n </div> \n </span>\n </div>\n </ng-container>\n \n <span [class.page-nav-inactive]=\"tableConfig().paginationConfig?.selectedPage === tableConfig().paginationConfig?.noOfPages\"\n (click)=\"tableConfig().paginationConfig?.selectedPage < tableConfig().paginationConfig?.noOfPages && updateSelectedPage(tableConfig().paginationConfig?.selectedPage + 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:sticky;background-color:var(--bg-primary, #FFFFFF);width:100%;z-index:1;min-height:44px;border-bottom:1px solid var(--border-primary, #E0E0E0);top:0;left:0;right:0}.col-header{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon{display:flex;justify-content:center;align-items:center}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:var(--brand-primary, #0937B2)}.t-row{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container,#pagination-content-container{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 16px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D);margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid var(--text-secondary, #6A737D)}.page-seperator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon img{width:16px;height:16px;transition:opacity .2s ease}.sort-icon img:hover{opacity:.8}.disabled-row .t-col-container{opacity:.4;pointer-events:none}.disabled-row .t-col-container:has(mis-actions-cell){opacity:1;pointer-events:auto}.row{transition:background-color .2s}.row:hover:not(.disabled-row),.row.selected:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row .t-col-container{pointer-events:none;opacity:.4}.disabled-row .t-col-container:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive{pointer-events:none;opacity:.5;cursor:default}.page-size-selector{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
|
|
808
|
+
args: [{ selector: "mis-table", template: "<div\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth(),\n 'overflow-x': tableConfig().canScrollHorizontally ? 'auto' : 'unset'\n }\"\n id=\"main-container\"\n>\n <mis-table-filter\n #filter\n (filtersApplied)=\"updateAppliedFilters($event)\"\n *ngIf=\"showFilter()\"\n [containerStyles]=\"filterContainerStyles()\"\n [filtersData]=\"filterData()\"\n ></mis-table-filter>\n <div\n #table\n id=\"table-container\"\n [ngClass]=\"{ 'no-scrollbar': expandedIndex() < 0, scrollbar: !(expandedIndex() < 0), 'scroll-horizontally': tableConfig().canScrollHorizontally }\"\n >\n <div\n [ngStyle]=\"getColHeadersRowStyles()\"\n id=\"col-headers-container\"\n >\n <div\n #colHeaderRef\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of tableConfig()?.colHeaderConfig\"\n class=\"col-header\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom' && colHeader?.type !== 'checkbox'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData.set(colHeader.filters); toggleFilter(colHeader.data); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n class=\"filter-icon\"\n >\n <span *ngIf=\"appliedFilters()[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n <span\n (click)=\"toggleCheckbox(); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type === 'checkbox'\"\n class=\"checkbox-icon\"\n >\n <mis-checkbox [checked]=\"selectAllCheckbox()\"></mis-checkbox>\n </span>\n <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n [column]=\"colHeader\"\n [activeSort]=\"currentSort()\"\n [activeSorts]=\"multiColumnSort()\"\n [multiColumnSort]=\"tableConfig().multiColumnSort\"\n (sortChange)=\"onSortChange($event)\"\n class=\"sort-icon\">\n </span>\n <ng-template *ngIf=\"colHeader?.type === 'custom'\" customTableCell [customComponent]=\"colHeader?.componentRef\" [data]=\"colHeader.data\"></ng-template>\n </div>\n </div>\n \n <div id=\"data-container\">\n <div class=\"row-wrapper\" *ngFor=\"let row of tableData(); let i = index; let rowIndex = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': tableConfig().cellHover, 'active-row': activeRowIndex().includes(i) }\"\n [ngStyle]=\"{ 'min-height': tableConfig()?.rowConfig?.height ? tableConfig().rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n [class.disabled-row]=\"isRowDisabled(row)\"\n >\n <div\n (click)=\"tableConfig()?.colConfig[colIndex]?.action && tableConfig()?.colConfig[colIndex]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[colIndex]?.action(col) : null\"\n *ngFor=\"let col of row; let colIndex = index\"\n [ngStyle]=\"{\n width: tableConfig()?.colConfig[colIndex]?.style?.width || tableConfig()?.colHeaderConfig[colIndex]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n [ngClass]=\"{ 't-col-container-hover': tableConfig().cellHover }\"\n >\n <div\n class=\"t-col\"\n [style]=\"tableConfig().colConfig[colIndex]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: tableConfig().colConfig[colIndex]?.action ? 'pointer' : 'default',\n 'justify-content': tableConfig().colConfig[colIndex]?.style?.justifyContent\n ? tableConfig().colConfig[colIndex]?.style?.justifyContent\n : tableConfig().colConfig[colIndex]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <div\n *ngIf=\"tableConfig().colConfig[colIndex]?.type !== 'custom' && tableConfig().colConfig[colIndex]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: tableConfig()?.colConfig[colIndex]?.style?.color || '',\n '--collapsed-lines': previewLines() || 3\n }\"\n [ngClass]=\"{\n 'collapsed-cell': collapseColIndex() == colIndex && expandedMap()[rowIndex]\n }\"\n class=\"t-col-text\"\n >\n <!-- Render as HTML -->\n <ng-container *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'html'; else plainText\">\n <span [innerHTML]=\"col\"></span>\n </ng-container>\n \n <!-- Render as plain text -->\n <ng-template #plainText>\n <span>{{ col }}</span>\n </ng-template>\n </div>\n \n <ng-template\n *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'custom'\"\n [customComponent]=\"tableConfig().colConfig[colIndex].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <mis-actions-cell\n *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'actions'\"\n [cellData]=\"col\"\n [config]=\"tableConfig().colConfig[colIndex]\"\n (actionClick)=\"onActionClick($event, rowIndex)\"\n [ngClass]=\"{\n 'disable-actions': (tableConfig().colConfig[colIndex]?.actionType === 'checkbox' || tableConfig().colConfig[colIndex]?.actionType === 'row-collapse') && isRowDisabled(row)\n }\"\n ></mis-actions-cell>\n\n </div>\n </div>\n </div>\n <div *ngIf=\"tableConfig()?.canExpand && expandedIndex() === i\" class=\"sub-row\">\n <ng-container *ngIf=\"subTableDataLoading()\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n Loading...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length === 0\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n No Data Available...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length > 0\">\n <sub-table [config]=\"subTableconfig()\" [tableData]=\"subTableData()\"></sub-table>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div id=\"pagination-content-container\">\n @if(shouldShowPagination()){\n <div \n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (selectedPage() - 1) * tableConfig().paginationConfig.rowsPerPage + 1 }}-{{\n (selectedPage() - 1) * tableConfig().paginationConfig.rowsPerPage + tableLength()\n }}\n of {{ tableConfig().paginationConfig.totalNoOfRows }} items\n </p>\n @if(showPageSizeDropdown()) {\n <div class=\"page-size-selector\">\n <mis-dropdown\n [data]=\"pageSizeOptions()\"\n [selectedItem]=\"selectedPageSizeOption()\"\n [width]=\"'90px'\"\n [height]=\"'32px'\"\n [searchEnabled]=\"false\"\n [dropdownListHeight]=\"'100px'\"\n (onChange)=\"onPageSizeChange($event)\"\n class=\"page-size-dropdown\"\n ></mis-dropdown>\n </div>\n }\n <div id=\"pages-container\">\n <span (click)=\"selectedPage() > 1 && updateSelectedPage(selectedPage() - 1)\" class=\"page\" [class.page-nav-inactive]=\"selectedPage() === 1\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n <!-- Page numbers (only show if disablePageJumping is false) -->\n <ng-container *ngIf=\"!tableConfig().paginationConfig?.disablePageJumping\">\n <div *ngFor=\"let pageNumber of pages()\">\n <span\n (click)=\"updateSelectedPage(pageNumber)\"\n *ngIf=\"pageNumber != 0\"\n [ngClass]=\"{ 'page-active': pageNumber == selectedPage() }\"\n class=\"page page-jumping-enabled\"\n >{{ pageNumber }}</span>\n <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n <div [ngStyle]=\"{ display: 'flex' }\">\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\"></span>\n </div> \n </span>\n </div>\n </ng-container>\n \n <span [class.page-nav-inactive]=\"selectedPage() === tableConfig().paginationConfig?.noOfPages\"\n (click)=\"selectedPage() < tableConfig().paginationConfig?.noOfPages && updateSelectedPage(selectedPage() + 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:sticky;background-color:var(--bg-primary, #FFFFFF);width:100%;z-index:1;min-height:44px;border-bottom:1px solid var(--border-primary, #E0E0E0);top:0;left:0;right:0}.col-header{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon{display:flex;justify-content:center;align-items:center}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:var(--brand-primary, #0937B2)}.t-row{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container,#pagination-content-container{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 16px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D);margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid var(--text-secondary, #6A737D)}.page-seperator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon img{width:16px;height:16px;transition:opacity .2s ease}.sort-icon img:hover{opacity:.8}.disabled-row .t-col-container{opacity:.4;pointer-events:none}.disabled-row .t-col-container:has(mis-actions-cell){opacity:1;pointer-events:auto}.row{transition:background-color .2s}.row:hover:not(.disabled-row),.row.selected:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row .t-col-container{pointer-events:none;opacity:.4}.disabled-row .t-col-container:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive{pointer-events:none;opacity:.5;cursor:default}.page-size-selector{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
|
|
788
809
|
}], () => [{ type: i0.Renderer2 }], { filter: [{
|
|
789
810
|
type: ViewChild,
|
|
790
811
|
args: ["filter"]
|
|
@@ -1243,12 +1264,13 @@ class SortIconsDirective {
|
|
|
1243
1264
|
this.multiSortChange = output();
|
|
1244
1265
|
// Internal state as signals
|
|
1245
1266
|
this.currentDirection = signal('');
|
|
1246
|
-
// Watch for changes in activeSort and
|
|
1267
|
+
// Watch for changes in activeSort, activeSorts, and currentDirection signals
|
|
1247
1268
|
// Signal inputs don't trigger ngOnChanges, so we need to use effect()
|
|
1248
1269
|
effect(() => {
|
|
1249
1270
|
// Access the signals to create a dependency (we don't need to store the values)
|
|
1250
1271
|
this.activeSort();
|
|
1251
1272
|
this.activeSorts();
|
|
1273
|
+
this.currentDirection(); // Also watch internal direction changes
|
|
1252
1274
|
// Update icon styles when signals change (only after icons are created)
|
|
1253
1275
|
if (this.upIcon && this.downIcon) {
|
|
1254
1276
|
this.updateIconStyles();
|
|
@@ -1349,10 +1371,17 @@ class SortIconsDirective {
|
|
|
1349
1371
|
}
|
|
1350
1372
|
}
|
|
1351
1373
|
updateSingleColumnIconStyles() {
|
|
1352
|
-
|
|
1374
|
+
// Check both parent's activeSort AND internal currentDirection
|
|
1375
|
+
// Parent's activeSort may not be updated immediately, so we also check internal state
|
|
1376
|
+
const parentActiveSort = this.activeSort();
|
|
1377
|
+
const isActiveColumnFromParent = parentActiveSort?.column === this.column()?.data;
|
|
1378
|
+
const internalDirection = this.currentDirection();
|
|
1379
|
+
const isActiveColumn = isActiveColumnFromParent || (internalDirection !== '');
|
|
1353
1380
|
setTimeout(() => {
|
|
1354
|
-
|
|
1355
|
-
|
|
1381
|
+
// Use parent's direction if available, otherwise use internal direction
|
|
1382
|
+
const activeDirection = parentActiveSort?.direction || internalDirection;
|
|
1383
|
+
this.renderer?.setStyle(this.upIcon, 'opacity', isActiveColumn && activeDirection === 'ASC' ? '1' : '0.5');
|
|
1384
|
+
this.renderer?.setStyle(this.downIcon, 'opacity', isActiveColumn && activeDirection === 'DESC' ? '1' : '0.5');
|
|
1356
1385
|
}, 0);
|
|
1357
1386
|
}
|
|
1358
1387
|
updateMultiColumnIconStyles() {
|