mis-crystal-design-system 18.1.4-test-1 → 18.1.4-test-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, output, computed, input, effect, Component, ViewChild, ViewChildren, Directive, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { signal, output, computed, input, effect, untracked, Component, ViewChild, ViewChildren, Directive, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/cdk/scrolling';
|
|
@@ -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,13 @@ 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
|
+
// Use untracked() to prevent effect from re-running when we update selectedPage internally
|
|
419
|
+
// This handles the case where parent updates config to change page programmatically
|
|
420
|
+
if (config?.paginationConfig?.selectedPage !== undefined &&
|
|
421
|
+
config.paginationConfig.selectedPage !== untracked(() => this.selectedPage())) {
|
|
422
|
+
this.selectedPage.set(config.paginationConfig.selectedPage);
|
|
423
|
+
}
|
|
419
424
|
if (config?.paginationConfig?.showPageSizeDropdown) {
|
|
420
425
|
const options = this.pageSizeOptions();
|
|
421
426
|
const rowsPerPage = this.tableConfig()?.paginationConfig?.rowsPerPage;
|
|
@@ -451,6 +456,18 @@ class TableComponent {
|
|
|
451
456
|
}
|
|
452
457
|
}
|
|
453
458
|
}, { allowSignalWrites: true });
|
|
459
|
+
// Reactive height calculation: maintains exact old behavior for backward compatibility
|
|
460
|
+
// Old code: height - 56 + "px" (flawed for percentages, but we maintain it)
|
|
461
|
+
// Note: Effect must be in constructor, not lifecycle hooks (NG0203 error otherwise)
|
|
462
|
+
// effect(() => {
|
|
463
|
+
// const config = this.tableConfig();
|
|
464
|
+
// if (!config?.paginationConfig || !this.table?.nativeElement) return;
|
|
465
|
+
// const height = config.height;
|
|
466
|
+
// // Old behavior: height - 56 + "px" (maintains the flaw for backward compatibility)
|
|
467
|
+
// const result = (height as any) - 56;
|
|
468
|
+
// const finalHeight = result + "px";
|
|
469
|
+
// this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
|
|
470
|
+
// });
|
|
454
471
|
}
|
|
455
472
|
// Function to handle row click
|
|
456
473
|
selectRow(index) {
|
|
@@ -500,18 +517,15 @@ class TableComponent {
|
|
|
500
517
|
this.expandedMap.set(newExpandedMap);
|
|
501
518
|
}
|
|
502
519
|
ngAfterViewInit() {
|
|
503
|
-
//
|
|
504
|
-
//
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
if (!config?.paginationConfig || !this.table?.nativeElement)
|
|
508
|
-
return;
|
|
520
|
+
// ViewChild is now available - manually trigger height calculation once
|
|
521
|
+
// The effect in constructor will handle subsequent config changes
|
|
522
|
+
const config = this.tableConfig();
|
|
523
|
+
if (config?.paginationConfig && this.table?.nativeElement) {
|
|
509
524
|
const height = config.height;
|
|
510
|
-
// Old behavior: height - 56 + "px" (maintains the flaw for backward compatibility)
|
|
511
525
|
const result = height - 56;
|
|
512
526
|
const finalHeight = result + "px";
|
|
513
527
|
this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
|
|
514
|
-
}
|
|
528
|
+
}
|
|
515
529
|
}
|
|
516
530
|
ngOnChanges() {
|
|
517
531
|
this.tableLength.set(this.tableData()?.length ?? 0);
|
|
@@ -519,6 +533,8 @@ class TableComponent {
|
|
|
519
533
|
const activeRowIndex = this.tableConfig().activeRowIndex;
|
|
520
534
|
this.activeRowIndex.set(Array.isArray(activeRowIndex) ? activeRowIndex : [activeRowIndex]);
|
|
521
535
|
}
|
|
536
|
+
// Note: selectedPage sync is handled in constructor effect (ngOnChanges doesn't fire for signal inputs)
|
|
537
|
+
// Only syncs if config value differs from internal state (supports programmatic page changes)
|
|
522
538
|
}
|
|
523
539
|
// Filter related functions
|
|
524
540
|
initializeFilters() {
|
|
@@ -581,6 +597,9 @@ class TableComponent {
|
|
|
581
597
|
// Pagination related functions
|
|
582
598
|
initializePagination() {
|
|
583
599
|
if (this.tableConfig().paginationConfig) {
|
|
600
|
+
// Initialize selectedPage from config if provided, otherwise default to 1
|
|
601
|
+
const configSelectedPage = this.tableConfig().paginationConfig.selectedPage;
|
|
602
|
+
this.selectedPage.set(configSelectedPage ?? 1);
|
|
584
603
|
let len = this.tableConfig().paginationConfig.noOfPages;
|
|
585
604
|
if (len <= 7) {
|
|
586
605
|
const newPages = [];
|
|
@@ -598,9 +617,11 @@ class TableComponent {
|
|
|
598
617
|
// Guard clause to prevent out-of-range updates
|
|
599
618
|
if (pageNumber < 1 || pageNumber > this.tableConfig().paginationConfig.noOfPages)
|
|
600
619
|
return;
|
|
620
|
+
// Update internal selectedPage state immediately
|
|
621
|
+
this.selectedPage.set(pageNumber);
|
|
601
622
|
// Reset header checkbox when navigating to a different page
|
|
602
623
|
this.selectAllCheckbox.set(false);
|
|
603
|
-
//
|
|
624
|
+
// Update page numbers display for pagination with many pages
|
|
604
625
|
let len = this.tableConfig().paginationConfig.noOfPages;
|
|
605
626
|
if (len > 7) {
|
|
606
627
|
if (pageNumber - 2 <= 1) {
|
|
@@ -613,6 +634,7 @@ class TableComponent {
|
|
|
613
634
|
this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
|
|
614
635
|
}
|
|
615
636
|
}
|
|
637
|
+
// Emit to parent so they can update their config
|
|
616
638
|
this.pageSelected.emit(pageNumber);
|
|
617
639
|
}
|
|
618
640
|
// Main container related functions
|
|
@@ -784,7 +806,7 @@ class TableComponent {
|
|
|
784
806
|
}
|
|
785
807
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
786
808
|
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"] }]
|
|
809
|
+
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
810
|
}], () => [{ type: i0.Renderer2 }], { filter: [{
|
|
789
811
|
type: ViewChild,
|
|
790
812
|
args: ["filter"]
|
|
@@ -1243,12 +1265,13 @@ class SortIconsDirective {
|
|
|
1243
1265
|
this.multiSortChange = output();
|
|
1244
1266
|
// Internal state as signals
|
|
1245
1267
|
this.currentDirection = signal('');
|
|
1246
|
-
// Watch for changes in activeSort and
|
|
1268
|
+
// Watch for changes in activeSort, activeSorts, and currentDirection signals
|
|
1247
1269
|
// Signal inputs don't trigger ngOnChanges, so we need to use effect()
|
|
1248
1270
|
effect(() => {
|
|
1249
1271
|
// Access the signals to create a dependency (we don't need to store the values)
|
|
1250
1272
|
this.activeSort();
|
|
1251
1273
|
this.activeSorts();
|
|
1274
|
+
this.currentDirection(); // Also watch internal direction changes
|
|
1252
1275
|
// Update icon styles when signals change (only after icons are created)
|
|
1253
1276
|
if (this.upIcon && this.downIcon) {
|
|
1254
1277
|
this.updateIconStyles();
|
|
@@ -1349,10 +1372,17 @@ class SortIconsDirective {
|
|
|
1349
1372
|
}
|
|
1350
1373
|
}
|
|
1351
1374
|
updateSingleColumnIconStyles() {
|
|
1352
|
-
|
|
1375
|
+
// Check both parent's activeSort AND internal currentDirection
|
|
1376
|
+
// Parent's activeSort may not be updated immediately, so we also check internal state
|
|
1377
|
+
const parentActiveSort = this.activeSort();
|
|
1378
|
+
const isActiveColumnFromParent = parentActiveSort?.column === this.column()?.data;
|
|
1379
|
+
const internalDirection = this.currentDirection();
|
|
1380
|
+
const isActiveColumn = isActiveColumnFromParent || (internalDirection !== '');
|
|
1353
1381
|
setTimeout(() => {
|
|
1354
|
-
|
|
1355
|
-
|
|
1382
|
+
// Use parent's direction if available, otherwise use internal direction
|
|
1383
|
+
const activeDirection = parentActiveSort?.direction || internalDirection;
|
|
1384
|
+
this.renderer?.setStyle(this.upIcon, 'opacity', isActiveColumn && activeDirection === 'ASC' ? '1' : '0.5');
|
|
1385
|
+
this.renderer?.setStyle(this.downIcon, 'opacity', isActiveColumn && activeDirection === 'DESC' ? '1' : '0.5');
|
|
1356
1386
|
}, 0);
|
|
1357
1387
|
}
|
|
1358
1388
|
updateMultiColumnIconStyles() {
|