mis-crystal-design-system 18.1.0 → 18.1.1
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.
- package/esm2022/table/table.component.mjs +105 -60
- package/esm2022/table/table.module.mjs +7 -5
- package/fesm2022/mis-crystal-design-system-table.mjs +110 -63
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +11 -11
- package/table/table.component.d.ts +15 -1
- package/table/table.module.d.ts +2 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, output, input, effect, Component, ViewChild, ViewChildren, Directive, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { signal, output, computed, input, effect, 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';
|
|
@@ -9,6 +9,8 @@ import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
|
|
|
9
9
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
10
10
|
import { OverlayConfig, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
|
|
11
11
|
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
12
|
+
import * as i3 from 'mis-crystal-design-system/dropdown';
|
|
13
|
+
import { DropdownModule } from 'mis-crystal-design-system/dropdown';
|
|
12
14
|
|
|
13
15
|
const _c0$3 = ["filter"];
|
|
14
16
|
const _c1$3 = ["table"];
|
|
@@ -30,7 +32,7 @@ const _c16 = () => ({ display: "flex" });
|
|
|
30
32
|
const _c17 = () => ({ "margin-right": "4px" });
|
|
31
33
|
function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
32
34
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
33
|
-
i0.ɵɵelementStart(0, "mis-table-filter",
|
|
35
|
+
i0.ɵɵelementStart(0, "mis-table-filter", 14, 1);
|
|
34
36
|
i0.ɵɵlistener("filtersApplied", function TableComponent_mis_table_filter_1_Template_mis_table_filter_filtersApplied_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateAppliedFilters($event)); });
|
|
35
37
|
i0.ɵɵelementEnd();
|
|
36
38
|
} if (rf & 2) {
|
|
@@ -38,7 +40,7 @@ function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
38
40
|
i0.ɵɵproperty("containerStyles", ctx_r1.filterContainerStyles())("filtersData", ctx_r1.filterData());
|
|
39
41
|
} }
|
|
40
42
|
function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
41
|
-
i0.ɵɵelementStart(0, "p",
|
|
43
|
+
i0.ɵɵelementStart(0, "p", 21);
|
|
42
44
|
i0.ɵɵtext(1);
|
|
43
45
|
i0.ɵɵelementEnd();
|
|
44
46
|
} if (rf & 2) {
|
|
@@ -47,16 +49,16 @@ function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
47
49
|
i0.ɵɵtextInterpolate1(" ", (colHeader_r4 == null ? null : colHeader_r4.data) || " ", " ");
|
|
48
50
|
} }
|
|
49
51
|
function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
50
|
-
i0.ɵɵelement(0, "span",
|
|
52
|
+
i0.ɵɵelement(0, "span", 26);
|
|
51
53
|
} }
|
|
52
54
|
function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
53
55
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
54
|
-
i0.ɵɵelementStart(0, "span",
|
|
56
|
+
i0.ɵɵelementStart(0, "span", 22);
|
|
55
57
|
i0.ɵɵlistener("click", function TableComponent_div_5_span_3_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const colHeader_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.filterData.set(colHeader_r4.filters); ctx_r1.toggleFilter(colHeader_r4.data); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
56
|
-
i0.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span",
|
|
58
|
+
i0.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span", 23);
|
|
57
59
|
i0.ɵɵnamespaceSVG();
|
|
58
|
-
i0.ɵɵelementStart(2, "svg",
|
|
59
|
-
i0.ɵɵelement(3, "path",
|
|
60
|
+
i0.ɵɵelementStart(2, "svg", 24);
|
|
61
|
+
i0.ɵɵelement(3, "path", 25);
|
|
60
62
|
i0.ɵɵelementEnd()();
|
|
61
63
|
} if (rf & 2) {
|
|
62
64
|
let tmp_5_0;
|
|
@@ -67,9 +69,9 @@ function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
67
69
|
} }
|
|
68
70
|
function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
69
71
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
70
|
-
i0.ɵɵelementStart(0, "span",
|
|
72
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
71
73
|
i0.ɵɵlistener("click", function TableComponent_div_5_span_4_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.toggleCheckbox(); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
72
|
-
i0.ɵɵelement(1, "mis-checkbox",
|
|
74
|
+
i0.ɵɵelement(1, "mis-checkbox", 28);
|
|
73
75
|
i0.ɵɵelementEnd();
|
|
74
76
|
} if (rf & 2) {
|
|
75
77
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -78,7 +80,7 @@ function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
78
80
|
} }
|
|
79
81
|
function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
80
82
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
81
|
-
i0.ɵɵelementStart(0, "span",
|
|
83
|
+
i0.ɵɵelementStart(0, "span", 29);
|
|
82
84
|
i0.ɵɵlistener("sortChange", function TableComponent_div_5_span_5_Template_span_sortChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSortChange($event)); });
|
|
83
85
|
i0.ɵɵelementEnd();
|
|
84
86
|
} if (rf & 2) {
|
|
@@ -88,16 +90,16 @@ function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
88
90
|
} }
|
|
89
91
|
function TableComponent_div_5_6_ng_template_0_Template(rf, ctx) { }
|
|
90
92
|
function TableComponent_div_5_6_Template(rf, ctx) { if (rf & 1) {
|
|
91
|
-
i0.ɵɵtemplate(0, TableComponent_div_5_6_ng_template_0_Template, 0, 0, "ng-template",
|
|
93
|
+
i0.ɵɵtemplate(0, TableComponent_div_5_6_ng_template_0_Template, 0, 0, "ng-template", 30);
|
|
92
94
|
} if (rf & 2) {
|
|
93
95
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
94
96
|
i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
|
|
95
97
|
} }
|
|
96
98
|
function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
97
99
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
98
|
-
i0.ɵɵelementStart(0, "div",
|
|
100
|
+
i0.ɵɵelementStart(0, "div", 15, 2);
|
|
99
101
|
i0.ɵɵlistener("click", function TableComponent_div_5_Template_div_click_0_listener() { const colHeader_r4 = i0.ɵɵrestoreView(_r3).$implicit; return i0.ɵɵresetView((colHeader_r4 == null ? null : colHeader_r4.action) ? colHeader_r4 == null ? null : colHeader_r4.action(colHeader_r4) : null); });
|
|
100
|
-
i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p",
|
|
102
|
+
i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p", 16)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 17)(4, TableComponent_div_5_span_4_Template, 2, 1, "span", 18)(5, TableComponent_div_5_span_5_Template, 1, 4, "span", 19)(6, TableComponent_div_5_6_Template, 1, 2, null, 20);
|
|
101
103
|
i0.ɵɵelementEnd();
|
|
102
104
|
} if (rf & 2) {
|
|
103
105
|
const colHeader_r4 = ctx.$implicit;
|
|
@@ -115,7 +117,7 @@ function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
115
117
|
} }
|
|
116
118
|
function TableComponent_div_7_div_2_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
117
119
|
i0.ɵɵelementContainerStart(0);
|
|
118
|
-
i0.ɵɵelement(1, "span",
|
|
120
|
+
i0.ɵɵelement(1, "span", 41);
|
|
119
121
|
i0.ɵɵelementContainerEnd();
|
|
120
122
|
} if (rf & 2) {
|
|
121
123
|
const col_r12 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -132,8 +134,8 @@ function TableComponent_div_7_div_2_div_2_ng_template_2_Template(rf, ctx) { if (
|
|
|
132
134
|
i0.ɵɵtextInterpolate(col_r12);
|
|
133
135
|
} }
|
|
134
136
|
function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
135
|
-
i0.ɵɵelementStart(0, "div",
|
|
136
|
-
i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container",
|
|
137
|
+
i0.ɵɵelementStart(0, "div", 39);
|
|
138
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container", 40)(2, TableComponent_div_7_div_2_div_2_ng_template_2_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
137
139
|
i0.ɵɵelementEnd();
|
|
138
140
|
} if (rf & 2) {
|
|
139
141
|
let tmp_10_0;
|
|
@@ -148,7 +150,7 @@ function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
148
150
|
} }
|
|
149
151
|
function TableComponent_div_7_div_2_3_ng_template_0_Template(rf, ctx) { }
|
|
150
152
|
function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
151
|
-
i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template",
|
|
153
|
+
i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 30);
|
|
152
154
|
} if (rf & 2) {
|
|
153
155
|
const ctx_r15 = i0.ɵɵnextContext();
|
|
154
156
|
const col_r12 = ctx_r15.$implicit;
|
|
@@ -158,7 +160,7 @@ function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
158
160
|
} }
|
|
159
161
|
function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
|
|
160
162
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
161
|
-
i0.ɵɵelementStart(0, "mis-actions-cell",
|
|
163
|
+
i0.ɵɵelementStart(0, "mis-actions-cell", 42);
|
|
162
164
|
i0.ɵɵlistener("actionClick", function TableComponent_div_7_div_2_mis_actions_cell_4_Template_mis_actions_cell_actionClick_0_listener($event) { i0.ɵɵrestoreView(_r17); const rowIndex_r15 = i0.ɵɵnextContext(2).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick($event, rowIndex_r15)); });
|
|
163
165
|
i0.ɵɵelementEnd();
|
|
164
166
|
} if (rf & 2) {
|
|
@@ -172,10 +174,10 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
|
|
|
172
174
|
} }
|
|
173
175
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
174
176
|
const _r10 = i0.ɵɵgetCurrentView();
|
|
175
|
-
i0.ɵɵelementStart(0, "div",
|
|
177
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
176
178
|
i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { let tmp_9_0; const ctx_r10 = i0.ɵɵrestoreView(_r10); const col_r12 = ctx_r10.$implicit; const colIndex_r13 = ctx_r10.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[colIndex_r13] == null ? null : tmp_9_0.colConfig[colIndex_r13].action) && ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[colIndex_r13] == null ? null : tmp_9_0.colConfig[colIndex_r13].actionType) !== "checkbox" ? (tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[colIndex_r13] == null ? null : tmp_9_0.colConfig[colIndex_r13].action(col_r12) : null); });
|
|
177
|
-
i0.ɵɵelementStart(1, "div",
|
|
178
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div",
|
|
179
|
+
i0.ɵɵelementStart(1, "div", 36);
|
|
180
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div", 37)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 20)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 5, "mis-actions-cell", 38);
|
|
179
181
|
i0.ɵɵelementEnd()();
|
|
180
182
|
} if (rf & 2) {
|
|
181
183
|
let tmp_8_0;
|
|
@@ -199,7 +201,7 @@ function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
199
201
|
} }
|
|
200
202
|
function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
201
203
|
i0.ɵɵelementContainerStart(0);
|
|
202
|
-
i0.ɵɵelementStart(1, "div",
|
|
204
|
+
i0.ɵɵelementStart(1, "div", 44);
|
|
203
205
|
i0.ɵɵtext(2, " Loading... ");
|
|
204
206
|
i0.ɵɵelementEnd();
|
|
205
207
|
i0.ɵɵelementContainerEnd();
|
|
@@ -209,7 +211,7 @@ function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf &
|
|
|
209
211
|
} }
|
|
210
212
|
function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
211
213
|
i0.ɵɵelementContainerStart(0);
|
|
212
|
-
i0.ɵɵelementStart(1, "div",
|
|
214
|
+
i0.ɵɵelementStart(1, "div", 44);
|
|
213
215
|
i0.ɵɵtext(2, " No Data Available... ");
|
|
214
216
|
i0.ɵɵelementEnd();
|
|
215
217
|
i0.ɵɵelementContainerEnd();
|
|
@@ -219,7 +221,7 @@ function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf &
|
|
|
219
221
|
} }
|
|
220
222
|
function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
221
223
|
i0.ɵɵelementContainerStart(0);
|
|
222
|
-
i0.ɵɵelement(1, "sub-table",
|
|
224
|
+
i0.ɵɵelement(1, "sub-table", 45);
|
|
223
225
|
i0.ɵɵelementContainerEnd();
|
|
224
226
|
} if (rf & 2) {
|
|
225
227
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -227,8 +229,8 @@ function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf &
|
|
|
227
229
|
i0.ɵɵproperty("config", ctx_r1.subTableconfig())("tableData", ctx_r1.subTableData());
|
|
228
230
|
} }
|
|
229
231
|
function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
230
|
-
i0.ɵɵelementStart(0, "div",
|
|
231
|
-
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container",
|
|
232
|
+
i0.ɵɵelementStart(0, "div", 43);
|
|
233
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 20)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 20)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 20);
|
|
232
234
|
i0.ɵɵelementEnd();
|
|
233
235
|
} if (rf & 2) {
|
|
234
236
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -241,11 +243,11 @@ function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
241
243
|
} }
|
|
242
244
|
function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
243
245
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
244
|
-
i0.ɵɵelementStart(0, "div",
|
|
246
|
+
i0.ɵɵelementStart(0, "div", 31)(1, "div", 32);
|
|
245
247
|
i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const i_r9 = i0.ɵɵrestoreView(_r8).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectRow(i_r9)); });
|
|
246
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 5, 15, "div",
|
|
248
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 5, 15, "div", 33);
|
|
247
249
|
i0.ɵɵelementEnd();
|
|
248
|
-
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div",
|
|
250
|
+
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 34);
|
|
249
251
|
i0.ɵɵelementEnd();
|
|
250
252
|
} if (rf & 2) {
|
|
251
253
|
let tmp_7_0;
|
|
@@ -261,10 +263,10 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
261
263
|
i0.ɵɵadvance();
|
|
262
264
|
i0.ɵɵproperty("ngIf", ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.canExpand) && ctx_r1.expandedIndex() === i_r9);
|
|
263
265
|
} }
|
|
264
|
-
function
|
|
266
|
+
function TableComponent_div_9_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
265
267
|
const _r20 = i0.ɵɵgetCurrentView();
|
|
266
|
-
i0.ɵɵelementStart(0, "span",
|
|
267
|
-
i0.ɵɵlistener("click", function
|
|
268
|
+
i0.ɵɵelementStart(0, "span", 56);
|
|
269
|
+
i0.ɵɵlistener("click", function TableComponent_div_9_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r20); const pageNumber_r21 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r21)); });
|
|
268
270
|
i0.ɵɵtext(1);
|
|
269
271
|
i0.ɵɵelementEnd();
|
|
270
272
|
} if (rf & 2) {
|
|
@@ -275,9 +277,9 @@ function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if
|
|
|
275
277
|
i0.ɵɵadvance();
|
|
276
278
|
i0.ɵɵtextInterpolate(pageNumber_r21);
|
|
277
279
|
} }
|
|
278
|
-
function
|
|
279
|
-
i0.ɵɵelementStart(0, "span",
|
|
280
|
-
i0.ɵɵelement(2, "span",
|
|
280
|
+
function TableComponent_div_9_ng_container_7_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
281
|
+
i0.ɵɵelementStart(0, "span", 57)(1, "div", 44);
|
|
282
|
+
i0.ɵɵelement(2, "span", 58)(3, "span", 58)(4, "span", 59);
|
|
281
283
|
i0.ɵɵelementEnd()();
|
|
282
284
|
} if (rf & 2) {
|
|
283
285
|
i0.ɵɵadvance();
|
|
@@ -287,9 +289,9 @@ function TableComponent_div_8_ng_container_7_div_1_span_2_Template(rf, ctx) { if
|
|
|
287
289
|
i0.ɵɵadvance();
|
|
288
290
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c17));
|
|
289
291
|
} }
|
|
290
|
-
function
|
|
292
|
+
function TableComponent_div_9_ng_container_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
291
293
|
i0.ɵɵelementStart(0, "div");
|
|
292
|
-
i0.ɵɵtemplate(1,
|
|
294
|
+
i0.ɵɵtemplate(1, TableComponent_div_9_ng_container_7_div_1_span_1_Template, 2, 4, "span", 54)(2, TableComponent_div_9_ng_container_7_div_1_span_2_Template, 5, 6, "span", 55);
|
|
293
295
|
i0.ɵɵelementEnd();
|
|
294
296
|
} if (rf & 2) {
|
|
295
297
|
const pageNumber_r21 = ctx.$implicit;
|
|
@@ -298,33 +300,33 @@ function TableComponent_div_8_ng_container_7_div_1_Template(rf, ctx) { if (rf &
|
|
|
298
300
|
i0.ɵɵadvance();
|
|
299
301
|
i0.ɵɵproperty("ngIf", pageNumber_r21 == 0);
|
|
300
302
|
} }
|
|
301
|
-
function
|
|
303
|
+
function TableComponent_div_9_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
302
304
|
i0.ɵɵelementContainerStart(0);
|
|
303
|
-
i0.ɵɵtemplate(1,
|
|
305
|
+
i0.ɵɵtemplate(1, TableComponent_div_9_ng_container_7_div_1_Template, 3, 2, "div", 53);
|
|
304
306
|
i0.ɵɵelementContainerEnd();
|
|
305
307
|
} if (rf & 2) {
|
|
306
308
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
307
309
|
i0.ɵɵadvance();
|
|
308
310
|
i0.ɵɵproperty("ngForOf", ctx_r1.pages());
|
|
309
311
|
} }
|
|
310
|
-
function
|
|
312
|
+
function TableComponent_div_9_Template(rf, ctx) { if (rf & 1) {
|
|
311
313
|
const _r19 = i0.ɵɵgetCurrentView();
|
|
312
|
-
i0.ɵɵelementStart(0, "div",
|
|
314
|
+
i0.ɵɵelementStart(0, "div", 46)(1, "p", 47);
|
|
313
315
|
i0.ɵɵtext(2);
|
|
314
316
|
i0.ɵɵelementEnd();
|
|
315
|
-
i0.ɵɵelementStart(3, "div",
|
|
316
|
-
i0.ɵɵlistener("click", function
|
|
317
|
+
i0.ɵɵelementStart(3, "div", 48)(4, "span", 49);
|
|
318
|
+
i0.ɵɵlistener("click", function TableComponent_div_9_Template_span_click_4_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) > 1 && ctx_r1.updateSelectedPage(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) - 1)); });
|
|
317
319
|
i0.ɵɵnamespaceSVG();
|
|
318
|
-
i0.ɵɵelementStart(5, "svg",
|
|
319
|
-
i0.ɵɵelement(6, "path",
|
|
320
|
+
i0.ɵɵelementStart(5, "svg", 50);
|
|
321
|
+
i0.ɵɵelement(6, "path", 51);
|
|
320
322
|
i0.ɵɵelementEnd()();
|
|
321
|
-
i0.ɵɵtemplate(7,
|
|
323
|
+
i0.ɵɵtemplate(7, TableComponent_div_9_ng_container_7_Template, 2, 1, "ng-container", 20);
|
|
322
324
|
i0.ɵɵnamespaceHTML();
|
|
323
|
-
i0.ɵɵelementStart(8, "span",
|
|
324
|
-
i0.ɵɵlistener("click", function
|
|
325
|
+
i0.ɵɵelementStart(8, "span", 49);
|
|
326
|
+
i0.ɵɵlistener("click", function TableComponent_div_9_Template_span_click_8_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) < ((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.noOfPages) && ctx_r1.updateSelectedPage(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) + 1)); });
|
|
325
327
|
i0.ɵɵnamespaceSVG();
|
|
326
|
-
i0.ɵɵelementStart(9, "svg",
|
|
327
|
-
i0.ɵɵelement(10, "path",
|
|
328
|
+
i0.ɵɵelementStart(9, "svg", 50);
|
|
329
|
+
i0.ɵɵelement(10, "path", 52);
|
|
328
330
|
i0.ɵɵelementEnd()()()();
|
|
329
331
|
} if (rf & 2) {
|
|
330
332
|
let tmp_2_0;
|
|
@@ -341,6 +343,16 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
341
343
|
i0.ɵɵadvance();
|
|
342
344
|
i0.ɵɵclassProp("page-nav-inactive", ((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.selectedPage) === ((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.noOfPages));
|
|
343
345
|
} }
|
|
346
|
+
function TableComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
347
|
+
const _r22 = i0.ɵɵgetCurrentView();
|
|
348
|
+
i0.ɵɵelementStart(0, "div", 13)(1, "mis-dropdown", 60);
|
|
349
|
+
i0.ɵɵlistener("onChange", function TableComponent_Conditional_10_Template_mis_dropdown_onChange_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPageSizeChange($event)); });
|
|
350
|
+
i0.ɵɵelementEnd()();
|
|
351
|
+
} if (rf & 2) {
|
|
352
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
353
|
+
i0.ɵɵadvance();
|
|
354
|
+
i0.ɵɵproperty("data", ctx_r1.pageSizeOptions())("selectedItem", ctx_r1.selectedPageSizeOption())("width", "90px")("height", "32px")("searchEnabled", false)("dropdownListHeight", "100px");
|
|
355
|
+
} }
|
|
344
356
|
class TableComponent {
|
|
345
357
|
constructor(renderer) {
|
|
346
358
|
this.renderer = renderer;
|
|
@@ -360,6 +372,35 @@ class TableComponent {
|
|
|
360
372
|
this.pages = signal([]);
|
|
361
373
|
this.tableLength = signal(0);
|
|
362
374
|
this.pageSelected = output();
|
|
375
|
+
this.pageSizeChanged = output();
|
|
376
|
+
this.pageSizeOptions = computed(() => {
|
|
377
|
+
const config = this.tableConfig()?.paginationConfig;
|
|
378
|
+
if (!config?.pageSizes || !Array.isArray(config.pageSizes) || !config.pageSizes?.length)
|
|
379
|
+
return [];
|
|
380
|
+
return config.pageSizes?.map(option => ({
|
|
381
|
+
label: option?.toString() || '',
|
|
382
|
+
value: option?.toString() || '',
|
|
383
|
+
})) || [];
|
|
384
|
+
});
|
|
385
|
+
this.showPageSizeDropdown = computed(() => {
|
|
386
|
+
return !!this.tableConfig()?.paginationConfig?.showPageSizeDropdown;
|
|
387
|
+
});
|
|
388
|
+
this.selectedPageSizeOption = computed(() => {
|
|
389
|
+
const pageSizeOptions = this.pageSizeOptions();
|
|
390
|
+
const rowsPerPage = this.tableConfig()?.paginationConfig?.rowsPerPage;
|
|
391
|
+
if (!Array.isArray(pageSizeOptions) || !rowsPerPage) {
|
|
392
|
+
return { label: "", value: "" };
|
|
393
|
+
}
|
|
394
|
+
const selected = pageSizeOptions.find(option => option.value === rowsPerPage.toString());
|
|
395
|
+
if (selected) {
|
|
396
|
+
return selected;
|
|
397
|
+
}
|
|
398
|
+
else {
|
|
399
|
+
//emit the first page size, if the selected page size is not found
|
|
400
|
+
this.onPageSizeChange(pageSizeOptions[0]);
|
|
401
|
+
return pageSizeOptions[0];
|
|
402
|
+
}
|
|
403
|
+
});
|
|
363
404
|
// Convert inputs to signal-based inputs
|
|
364
405
|
this.tableConfig = input();
|
|
365
406
|
this.subTableconfig = input();
|
|
@@ -672,6 +713,9 @@ class TableComponent {
|
|
|
672
713
|
});
|
|
673
714
|
}
|
|
674
715
|
}
|
|
716
|
+
onPageSizeChange(selectedOption) {
|
|
717
|
+
this.pageSizeChanged.emit(parseInt(selectedOption.value));
|
|
718
|
+
}
|
|
675
719
|
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
676
720
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
|
|
677
721
|
i0.ɵɵviewQuery(_c0$3, 5);
|
|
@@ -682,7 +726,7 @@ class TableComponent {
|
|
|
682
726
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
683
727
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
684
728
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
685
|
-
} }, inputs: { tableConfig: [1, "tableConfig"], subTableconfig: [1, "subTableconfig"], tableDataLoading: [1, "tableDataLoading"], expandedIndex: [1, "expandedIndex"], tableData: [1, "tableData"], subTableData: [1, "subTableData"], subTableDataLoading: [1, "subTableDataLoading"], currentSort: [1, "currentSort"] }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange", headerAction: "headerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls:
|
|
729
|
+
} }, inputs: { tableConfig: [1, "tableConfig"], subTableconfig: [1, "subTableconfig"], tableDataLoading: [1, "tableDataLoading"], expandedIndex: [1, "expandedIndex"], tableData: [1, "tableData"], subTableData: [1, "subTableData"], subTableDataLoading: [1, "subTableDataLoading"], currentSort: [1, "currentSort"] }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", pageSizeChanged: "pageSizeChanged", sortChange: "sortChange", headerAction: "headerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 11, vars: 16, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["plainText", ""], ["id", "main-container", 3, "ngStyle"], [3, "containerStyles", "filtersData", "filtersApplied", 4, "ngIf"], ["id", "table-container", 3, "ngClass"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], ["id", "data-container"], ["class", "row-wrapper", 4, "ngFor", "ngForOf"], ["id", "pagination-content-container"], ["id", "pagination-container", 4, "ngIf"], [1, "page-size-selector"], [3, "filtersApplied", "containerStyles", "filtersData"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], ["class", "filter-icon", 3, "click", 4, "ngIf"], ["class", "checkbox-icon", 3, "click", 4, "ngIf"], ["appSortIcons", "", "class", "sort-icon", 3, "column", "activeSort", "activeSorts", "multiColumnSort", "sortChange", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], [1, "filter-icon", 3, "click"], ["id", "filter-active", 4, "ngIf"], ["fill", "none", "height", "10", "viewBox", "0 0 13 10", "width", "13", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z", "fill", "#181F33", "fill-rule", "evenodd"], ["id", "filter-active"], [1, "checkbox-icon", 3, "click"], [3, "checked"], ["appSortIcons", "", 1, "sort-icon", 3, "sortChange", "column", "activeSort", "activeSorts", "multiColumnSort"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper"], [1, "t-row", 3, "click", "ngClass", "ngStyle"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "click", "ngStyle", "ngClass"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", "ngClass", 4, "ngIf"], [3, "cellData", "config", "ngClass", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [4, "ngIf", "ngIfElse"], [3, "innerHTML"], [3, "actionClick", "cellData", "config", "ngClass"], [1, "sub-row"], [3, "ngStyle"], [3, "config", "tableData"], ["id", "pagination-container"], ["id", "pagination-text"], ["id", "pages-container"], [1, "page", 3, "click"], ["fill", "none", "height", "10", "viewBox", "0 0 7 10", "width", "7", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], [4, "ngFor", "ngForOf"], ["class", "page page-jumping-enabled", 3, "ngClass", "click", 4, "ngIf"], ["class", "page-seperator", 4, "ngIf"], [1, "page", "page-jumping-enabled", 3, "click", "ngClass"], [1, "page-seperator"], [1, "dot", 3, "ngStyle"], [1, "dot"], [1, "page-size-dropdown", 3, "onChange", "data", "selectedItem", "width", "height", "searchEnabled", "dropdownListHeight"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
686
730
|
i0.ɵɵelementStart(0, "div", 4);
|
|
687
731
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 5);
|
|
688
732
|
i0.ɵɵelementStart(2, "div", 6, 0)(4, "div", 7);
|
|
@@ -691,29 +735,32 @@ class TableComponent {
|
|
|
691
735
|
i0.ɵɵelementStart(6, "div", 9);
|
|
692
736
|
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 11, "div", 10);
|
|
693
737
|
i0.ɵɵelementEnd()();
|
|
694
|
-
i0.ɵɵ
|
|
695
|
-
i0.ɵɵ
|
|
738
|
+
i0.ɵɵelementStart(8, "div", 11);
|
|
739
|
+
i0.ɵɵtemplate(9, TableComponent_div_9_Template, 11, 8, "div", 12)(10, TableComponent_Conditional_10_Template, 2, 6, "div", 13);
|
|
740
|
+
i0.ɵɵelementEnd()();
|
|
696
741
|
} if (rf & 2) {
|
|
697
742
|
let tmp_5_0;
|
|
698
743
|
let tmp_7_0;
|
|
699
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(
|
|
744
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(8, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.tableConfig().canScrollHorizontally ? "auto" : "unset"));
|
|
700
745
|
i0.ɵɵadvance();
|
|
701
746
|
i0.ɵɵproperty("ngIf", ctx.showFilter());
|
|
702
747
|
i0.ɵɵadvance();
|
|
703
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(
|
|
748
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(12, _c4$1, ctx.expandedIndex() < 0, !(ctx.expandedIndex() < 0), ctx.tableConfig().canScrollHorizontally));
|
|
704
749
|
i0.ɵɵadvance(2);
|
|
705
750
|
i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
|
|
706
751
|
i0.ɵɵadvance();
|
|
707
752
|
i0.ɵɵproperty("ngForOf", (tmp_5_0 = ctx.tableConfig()) == null ? null : tmp_5_0.colHeaderConfig);
|
|
708
753
|
i0.ɵɵadvance(2);
|
|
709
754
|
i0.ɵɵproperty("ngForOf", ctx.tableData());
|
|
710
|
-
i0.ɵɵadvance();
|
|
755
|
+
i0.ɵɵadvance(2);
|
|
711
756
|
i0.ɵɵproperty("ngIf", ((tmp_7_0 = ctx.tableConfig()) == null ? null : tmp_7_0.paginationConfig) && (ctx.tableLength() >= ctx.tableConfig().paginationConfig.rowsPerPage || ((tmp_7_0 = ctx.tableConfig().paginationConfig) == null ? null : tmp_7_0.selectedPage) !== 1));
|
|
712
|
-
|
|
757
|
+
i0.ɵɵadvance();
|
|
758
|
+
i0.ɵɵconditional(ctx.showPageSizeDropdown() ? 10 : -1);
|
|
759
|
+
} }, styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%] .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%] circle[_ngcontent-%COMP%]{stroke:var(--brand-primary, #0937B2)}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row[_ngcontent-%COMP%]{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container[_ngcontent-%COMP%], #pagination-content-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 56px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{border:1px solid var(--text-secondary, #6A737D)}.page-seperator[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot[_ngcontent-%COMP%]{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active[_ngcontent-%COMP%]{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon[_ngcontent-%COMP%]{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{width:16px;height:16px;transition:opacity .2s ease}.sort-icon[_ngcontent-%COMP%] img[_ngcontent-%COMP%]:hover{opacity:.8}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]{opacity:.4;pointer-events:none}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){opacity:1;pointer-events:auto}.row[_ngcontent-%COMP%]{transition:background-color .2s}.row[_ngcontent-%COMP%]:hover:not(.disabled-row), .row.selected[_ngcontent-%COMP%]:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]{pointer-events:none;opacity:.4}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions[_ngcontent-%COMP%]{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive[_ngcontent-%COMP%]{pointer-events:none;opacity:.5;cursor:default}.page-size-selector[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell[_ngcontent-%COMP%]{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell[_ngcontent-%COMP%]{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}"] }); }
|
|
713
760
|
}
|
|
714
761
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
715
762
|
type: Component,
|
|
716
|
-
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\n *ngIf=\"tableConfig()?.paginationConfig && (tableLength() >= tableConfig().paginationConfig.rowsPerPage || tableConfig().paginationConfig?.selectedPage !== 1)\"\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 <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</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{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 56px 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}.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"] }]
|
|
763
|
+
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 <div \n *ngIf=\"tableConfig()?.paginationConfig && (tableLength() >= tableConfig().paginationConfig.rowsPerPage || tableConfig().paginationConfig?.selectedPage !== 1)\"\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 <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 @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>\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 56px 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"] }]
|
|
717
764
|
}], () => [{ type: i0.Renderer2 }], { filter: [{
|
|
718
765
|
type: ViewChild,
|
|
719
766
|
args: ["filter"]
|
|
@@ -1692,7 +1739,7 @@ class TableModule {
|
|
|
1692
1739
|
}
|
|
1693
1740
|
static { this.ɵfac = function TableModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableModule)(); }; }
|
|
1694
1741
|
static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TableModule }); }
|
|
1695
|
-
static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule] }); }
|
|
1742
|
+
static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule, DropdownModule] }); }
|
|
1696
1743
|
}
|
|
1697
1744
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
|
|
1698
1745
|
type: NgModule,
|
|
@@ -1705,7 +1752,7 @@ class TableModule {
|
|
|
1705
1752
|
SortIconsDirective,
|
|
1706
1753
|
ActionsCellComponent
|
|
1707
1754
|
],
|
|
1708
|
-
imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule],
|
|
1755
|
+
imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule, DropdownModule],
|
|
1709
1756
|
exports: [
|
|
1710
1757
|
TableComponent,
|
|
1711
1758
|
SubTableComponent,
|
|
@@ -1721,13 +1768,13 @@ class TableModule {
|
|
|
1721
1768
|
TableFilterComponent,
|
|
1722
1769
|
CustomTableCellDirective,
|
|
1723
1770
|
SortIconsDirective,
|
|
1724
|
-
ActionsCellComponent], imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule], exports: [TableComponent,
|
|
1771
|
+
ActionsCellComponent], imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule, DropdownModule], exports: [TableComponent,
|
|
1725
1772
|
SubTableComponent,
|
|
1726
1773
|
TableFilterComponent,
|
|
1727
1774
|
CustomTableCellDirective,
|
|
1728
1775
|
SortIconsDirective,
|
|
1729
1776
|
ActionsCellComponent] }); })();
|
|
1730
|
-
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent, SubTableComponent,
|
|
1777
|
+
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent, i3.DropdownComponent, SubTableComponent,
|
|
1731
1778
|
TableFilterComponent,
|
|
1732
1779
|
CustomTableCellDirective,
|
|
1733
1780
|
SortIconsDirective,
|