mis-crystal-design-system 18.1.1 → 18.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,7 +32,7 @@ const _c16 = () => ({ display: "flex" });
|
|
|
32
32
|
const _c17 = () => ({ "margin-right": "4px" });
|
|
33
33
|
function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
34
34
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
35
|
-
i0.ɵɵelementStart(0, "mis-table-filter",
|
|
35
|
+
i0.ɵɵelementStart(0, "mis-table-filter", 13, 1);
|
|
36
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)); });
|
|
37
37
|
i0.ɵɵelementEnd();
|
|
38
38
|
} if (rf & 2) {
|
|
@@ -40,7 +40,7 @@ function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
40
40
|
i0.ɵɵproperty("containerStyles", ctx_r1.filterContainerStyles())("filtersData", ctx_r1.filterData());
|
|
41
41
|
} }
|
|
42
42
|
function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
43
|
-
i0.ɵɵelementStart(0, "p",
|
|
43
|
+
i0.ɵɵelementStart(0, "p", 20);
|
|
44
44
|
i0.ɵɵtext(1);
|
|
45
45
|
i0.ɵɵelementEnd();
|
|
46
46
|
} if (rf & 2) {
|
|
@@ -49,16 +49,16 @@ function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
49
49
|
i0.ɵɵtextInterpolate1(" ", (colHeader_r4 == null ? null : colHeader_r4.data) || " ", " ");
|
|
50
50
|
} }
|
|
51
51
|
function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
52
|
-
i0.ɵɵelement(0, "span",
|
|
52
|
+
i0.ɵɵelement(0, "span", 25);
|
|
53
53
|
} }
|
|
54
54
|
function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
55
55
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
56
|
-
i0.ɵɵelementStart(0, "span",
|
|
56
|
+
i0.ɵɵelementStart(0, "span", 21);
|
|
57
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()); });
|
|
58
|
-
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", 22);
|
|
59
59
|
i0.ɵɵnamespaceSVG();
|
|
60
|
-
i0.ɵɵelementStart(2, "svg",
|
|
61
|
-
i0.ɵɵelement(3, "path",
|
|
60
|
+
i0.ɵɵelementStart(2, "svg", 23);
|
|
61
|
+
i0.ɵɵelement(3, "path", 24);
|
|
62
62
|
i0.ɵɵelementEnd()();
|
|
63
63
|
} if (rf & 2) {
|
|
64
64
|
let tmp_5_0;
|
|
@@ -69,9 +69,9 @@ function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
69
69
|
} }
|
|
70
70
|
function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
71
71
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
72
|
-
i0.ɵɵelementStart(0, "span",
|
|
72
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
73
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()); });
|
|
74
|
-
i0.ɵɵelement(1, "mis-checkbox",
|
|
74
|
+
i0.ɵɵelement(1, "mis-checkbox", 27);
|
|
75
75
|
i0.ɵɵelementEnd();
|
|
76
76
|
} if (rf & 2) {
|
|
77
77
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -80,7 +80,7 @@ function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
80
80
|
} }
|
|
81
81
|
function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
82
82
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
83
|
-
i0.ɵɵelementStart(0, "span",
|
|
83
|
+
i0.ɵɵelementStart(0, "span", 28);
|
|
84
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)); });
|
|
85
85
|
i0.ɵɵelementEnd();
|
|
86
86
|
} if (rf & 2) {
|
|
@@ -90,16 +90,16 @@ function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
90
90
|
} }
|
|
91
91
|
function TableComponent_div_5_6_ng_template_0_Template(rf, ctx) { }
|
|
92
92
|
function TableComponent_div_5_6_Template(rf, ctx) { if (rf & 1) {
|
|
93
|
-
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", 29);
|
|
94
94
|
} if (rf & 2) {
|
|
95
95
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
96
96
|
i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
|
|
97
97
|
} }
|
|
98
98
|
function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
99
99
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
100
|
-
i0.ɵɵelementStart(0, "div",
|
|
100
|
+
i0.ɵɵelementStart(0, "div", 14, 2);
|
|
101
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); });
|
|
102
|
-
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", 15)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 16)(4, TableComponent_div_5_span_4_Template, 2, 1, "span", 17)(5, TableComponent_div_5_span_5_Template, 1, 4, "span", 18)(6, TableComponent_div_5_6_Template, 1, 2, null, 19);
|
|
103
103
|
i0.ɵɵelementEnd();
|
|
104
104
|
} if (rf & 2) {
|
|
105
105
|
const colHeader_r4 = ctx.$implicit;
|
|
@@ -117,7 +117,7 @@ function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
117
117
|
} }
|
|
118
118
|
function TableComponent_div_7_div_2_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
119
119
|
i0.ɵɵelementContainerStart(0);
|
|
120
|
-
i0.ɵɵelement(1, "span",
|
|
120
|
+
i0.ɵɵelement(1, "span", 40);
|
|
121
121
|
i0.ɵɵelementContainerEnd();
|
|
122
122
|
} if (rf & 2) {
|
|
123
123
|
const col_r12 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -134,8 +134,8 @@ function TableComponent_div_7_div_2_div_2_ng_template_2_Template(rf, ctx) { if (
|
|
|
134
134
|
i0.ɵɵtextInterpolate(col_r12);
|
|
135
135
|
} }
|
|
136
136
|
function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
137
|
-
i0.ɵɵelementStart(0, "div",
|
|
138
|
-
i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container",
|
|
137
|
+
i0.ɵɵelementStart(0, "div", 38);
|
|
138
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container", 39)(2, TableComponent_div_7_div_2_div_2_ng_template_2_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
139
139
|
i0.ɵɵelementEnd();
|
|
140
140
|
} if (rf & 2) {
|
|
141
141
|
let tmp_10_0;
|
|
@@ -150,7 +150,7 @@ function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
150
150
|
} }
|
|
151
151
|
function TableComponent_div_7_div_2_3_ng_template_0_Template(rf, ctx) { }
|
|
152
152
|
function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
153
|
-
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", 29);
|
|
154
154
|
} if (rf & 2) {
|
|
155
155
|
const ctx_r15 = i0.ɵɵnextContext();
|
|
156
156
|
const col_r12 = ctx_r15.$implicit;
|
|
@@ -160,7 +160,7 @@ function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
160
160
|
} }
|
|
161
161
|
function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
|
|
162
162
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
163
|
-
i0.ɵɵelementStart(0, "mis-actions-cell",
|
|
163
|
+
i0.ɵɵelementStart(0, "mis-actions-cell", 41);
|
|
164
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)); });
|
|
165
165
|
i0.ɵɵelementEnd();
|
|
166
166
|
} if (rf & 2) {
|
|
@@ -174,10 +174,10 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
|
|
|
174
174
|
} }
|
|
175
175
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
176
176
|
const _r10 = i0.ɵɵgetCurrentView();
|
|
177
|
-
i0.ɵɵelementStart(0, "div",
|
|
177
|
+
i0.ɵɵelementStart(0, "div", 34);
|
|
178
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); });
|
|
179
|
-
i0.ɵɵelementStart(1, "div",
|
|
180
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div",
|
|
179
|
+
i0.ɵɵelementStart(1, "div", 35);
|
|
180
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div", 36)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 19)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 5, "mis-actions-cell", 37);
|
|
181
181
|
i0.ɵɵelementEnd()();
|
|
182
182
|
} if (rf & 2) {
|
|
183
183
|
let tmp_8_0;
|
|
@@ -201,7 +201,7 @@ function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
201
201
|
} }
|
|
202
202
|
function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
203
203
|
i0.ɵɵelementContainerStart(0);
|
|
204
|
-
i0.ɵɵelementStart(1, "div",
|
|
204
|
+
i0.ɵɵelementStart(1, "div", 43);
|
|
205
205
|
i0.ɵɵtext(2, " Loading... ");
|
|
206
206
|
i0.ɵɵelementEnd();
|
|
207
207
|
i0.ɵɵelementContainerEnd();
|
|
@@ -211,7 +211,7 @@ function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf &
|
|
|
211
211
|
} }
|
|
212
212
|
function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
213
213
|
i0.ɵɵelementContainerStart(0);
|
|
214
|
-
i0.ɵɵelementStart(1, "div",
|
|
214
|
+
i0.ɵɵelementStart(1, "div", 43);
|
|
215
215
|
i0.ɵɵtext(2, " No Data Available... ");
|
|
216
216
|
i0.ɵɵelementEnd();
|
|
217
217
|
i0.ɵɵelementContainerEnd();
|
|
@@ -221,7 +221,7 @@ function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf &
|
|
|
221
221
|
} }
|
|
222
222
|
function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
223
223
|
i0.ɵɵelementContainerStart(0);
|
|
224
|
-
i0.ɵɵelement(1, "sub-table",
|
|
224
|
+
i0.ɵɵelement(1, "sub-table", 44);
|
|
225
225
|
i0.ɵɵelementContainerEnd();
|
|
226
226
|
} if (rf & 2) {
|
|
227
227
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -229,8 +229,8 @@ function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf &
|
|
|
229
229
|
i0.ɵɵproperty("config", ctx_r1.subTableconfig())("tableData", ctx_r1.subTableData());
|
|
230
230
|
} }
|
|
231
231
|
function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
232
|
-
i0.ɵɵelementStart(0, "div",
|
|
233
|
-
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container",
|
|
232
|
+
i0.ɵɵelementStart(0, "div", 42);
|
|
233
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 19)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 19)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 19);
|
|
234
234
|
i0.ɵɵelementEnd();
|
|
235
235
|
} if (rf & 2) {
|
|
236
236
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -243,11 +243,11 @@ function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
243
243
|
} }
|
|
244
244
|
function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
245
245
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
246
|
-
i0.ɵɵelementStart(0, "div",
|
|
246
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "div", 31);
|
|
247
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)); });
|
|
248
|
-
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", 32);
|
|
249
249
|
i0.ɵɵelementEnd();
|
|
250
|
-
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", 33);
|
|
251
251
|
i0.ɵɵelementEnd();
|
|
252
252
|
} if (rf & 2) {
|
|
253
253
|
let tmp_7_0;
|
|
@@ -263,22 +263,32 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
263
263
|
i0.ɵɵadvance();
|
|
264
264
|
i0.ɵɵproperty("ngIf", ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.canExpand) && ctx_r1.expandedIndex() === i_r9);
|
|
265
265
|
} }
|
|
266
|
-
function
|
|
266
|
+
function TableComponent_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
267
267
|
const _r20 = i0.ɵɵgetCurrentView();
|
|
268
|
+
i0.ɵɵelementStart(0, "div", 46)(1, "mis-dropdown", 52);
|
|
269
|
+
i0.ɵɵlistener("onChange", function TableComponent_Conditional_9_Conditional_3_Template_mis_dropdown_onChange_1_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPageSizeChange($event)); });
|
|
270
|
+
i0.ɵɵelementEnd()();
|
|
271
|
+
} if (rf & 2) {
|
|
272
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
273
|
+
i0.ɵɵadvance();
|
|
274
|
+
i0.ɵɵproperty("data", ctx_r1.pageSizeOptions())("selectedItem", ctx_r1.selectedPageSizeOption())("width", "90px")("height", "32px")("searchEnabled", false)("dropdownListHeight", "100px");
|
|
275
|
+
} }
|
|
276
|
+
function TableComponent_Conditional_9_ng_container_8_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
277
|
+
const _r21 = i0.ɵɵgetCurrentView();
|
|
268
278
|
i0.ɵɵelementStart(0, "span", 56);
|
|
269
|
-
i0.ɵɵlistener("click", function
|
|
279
|
+
i0.ɵɵlistener("click", function TableComponent_Conditional_9_ng_container_8_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r21); const pageNumber_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r22)); });
|
|
270
280
|
i0.ɵɵtext(1);
|
|
271
281
|
i0.ɵɵelementEnd();
|
|
272
282
|
} if (rf & 2) {
|
|
273
283
|
let tmp_6_0;
|
|
274
|
-
const
|
|
284
|
+
const pageNumber_r22 = i0.ɵɵnextContext().$implicit;
|
|
275
285
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
276
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15,
|
|
286
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r22 == ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.selectedPage)));
|
|
277
287
|
i0.ɵɵadvance();
|
|
278
|
-
i0.ɵɵtextInterpolate(
|
|
288
|
+
i0.ɵɵtextInterpolate(pageNumber_r22);
|
|
279
289
|
} }
|
|
280
|
-
function
|
|
281
|
-
i0.ɵɵelementStart(0, "span", 57)(1, "div",
|
|
290
|
+
function TableComponent_Conditional_9_ng_container_8_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
291
|
+
i0.ɵɵelementStart(0, "span", 57)(1, "div", 43);
|
|
282
292
|
i0.ɵɵelement(2, "span", 58)(3, "span", 58)(4, "span", 59);
|
|
283
293
|
i0.ɵɵelementEnd()();
|
|
284
294
|
} if (rf & 2) {
|
|
@@ -289,69 +299,62 @@ function TableComponent_div_9_ng_container_7_div_1_span_2_Template(rf, ctx) { if
|
|
|
289
299
|
i0.ɵɵadvance();
|
|
290
300
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c17));
|
|
291
301
|
} }
|
|
292
|
-
function
|
|
302
|
+
function TableComponent_Conditional_9_ng_container_8_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
293
303
|
i0.ɵɵelementStart(0, "div");
|
|
294
|
-
i0.ɵɵtemplate(1,
|
|
304
|
+
i0.ɵɵtemplate(1, TableComponent_Conditional_9_ng_container_8_div_1_span_1_Template, 2, 4, "span", 54)(2, TableComponent_Conditional_9_ng_container_8_div_1_span_2_Template, 5, 6, "span", 55);
|
|
295
305
|
i0.ɵɵelementEnd();
|
|
296
306
|
} if (rf & 2) {
|
|
297
|
-
const
|
|
307
|
+
const pageNumber_r22 = ctx.$implicit;
|
|
298
308
|
i0.ɵɵadvance();
|
|
299
|
-
i0.ɵɵproperty("ngIf",
|
|
309
|
+
i0.ɵɵproperty("ngIf", pageNumber_r22 != 0);
|
|
300
310
|
i0.ɵɵadvance();
|
|
301
|
-
i0.ɵɵproperty("ngIf",
|
|
311
|
+
i0.ɵɵproperty("ngIf", pageNumber_r22 == 0);
|
|
302
312
|
} }
|
|
303
|
-
function
|
|
313
|
+
function TableComponent_Conditional_9_ng_container_8_Template(rf, ctx) { if (rf & 1) {
|
|
304
314
|
i0.ɵɵelementContainerStart(0);
|
|
305
|
-
i0.ɵɵtemplate(1,
|
|
315
|
+
i0.ɵɵtemplate(1, TableComponent_Conditional_9_ng_container_8_div_1_Template, 3, 2, "div", 53);
|
|
306
316
|
i0.ɵɵelementContainerEnd();
|
|
307
317
|
} if (rf & 2) {
|
|
308
318
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
309
319
|
i0.ɵɵadvance();
|
|
310
320
|
i0.ɵɵproperty("ngForOf", ctx_r1.pages());
|
|
311
321
|
} }
|
|
312
|
-
function
|
|
322
|
+
function TableComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
313
323
|
const _r19 = i0.ɵɵgetCurrentView();
|
|
314
|
-
i0.ɵɵelementStart(0, "div",
|
|
324
|
+
i0.ɵɵelementStart(0, "div", 12)(1, "p", 45);
|
|
315
325
|
i0.ɵɵtext(2);
|
|
316
326
|
i0.ɵɵelementEnd();
|
|
317
|
-
i0.ɵɵ
|
|
318
|
-
i0.ɵɵ
|
|
327
|
+
i0.ɵɵtemplate(3, TableComponent_Conditional_9_Conditional_3_Template, 2, 6, "div", 46);
|
|
328
|
+
i0.ɵɵelementStart(4, "div", 47)(5, "span", 48);
|
|
329
|
+
i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_5_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)); });
|
|
319
330
|
i0.ɵɵnamespaceSVG();
|
|
320
|
-
i0.ɵɵelementStart(
|
|
321
|
-
i0.ɵɵelement(
|
|
331
|
+
i0.ɵɵelementStart(6, "svg", 49);
|
|
332
|
+
i0.ɵɵelement(7, "path", 50);
|
|
322
333
|
i0.ɵɵelementEnd()();
|
|
323
|
-
i0.ɵɵtemplate(
|
|
334
|
+
i0.ɵɵtemplate(8, TableComponent_Conditional_9_ng_container_8_Template, 2, 1, "ng-container", 19);
|
|
324
335
|
i0.ɵɵnamespaceHTML();
|
|
325
|
-
i0.ɵɵelementStart(
|
|
326
|
-
i0.ɵɵlistener("click", function
|
|
336
|
+
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(((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)); });
|
|
327
338
|
i0.ɵɵnamespaceSVG();
|
|
328
|
-
i0.ɵɵelementStart(
|
|
329
|
-
i0.ɵɵelement(
|
|
339
|
+
i0.ɵɵelementStart(10, "svg", 49);
|
|
340
|
+
i0.ɵɵelement(11, "path", 51);
|
|
330
341
|
i0.ɵɵelementEnd()()()();
|
|
331
342
|
} if (rf & 2) {
|
|
332
343
|
let tmp_2_0;
|
|
333
|
-
let tmp_3_0;
|
|
334
344
|
let tmp_4_0;
|
|
335
345
|
let tmp_5_0;
|
|
346
|
+
let tmp_6_0;
|
|
336
347
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
337
348
|
i0.ɵɵadvance(2);
|
|
338
349
|
i0.ɵɵtextInterpolate3(" Showing ", (((tmp_2_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_2_0.selectedPage) - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + 1, "-", (((tmp_2_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_2_0.selectedPage) - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + ctx_r1.tableLength(), " of ", ctx_r1.tableConfig().paginationConfig.totalNoOfRows, " items ");
|
|
350
|
+
i0.ɵɵadvance();
|
|
351
|
+
i0.ɵɵconditional(ctx_r1.showPageSizeDropdown() ? 3 : -1);
|
|
339
352
|
i0.ɵɵadvance(2);
|
|
340
|
-
i0.ɵɵclassProp("page-nav-inactive", ((
|
|
353
|
+
i0.ɵɵclassProp("page-nav-inactive", ((tmp_4_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_4_0.selectedPage) === 1);
|
|
341
354
|
i0.ɵɵadvance(3);
|
|
342
|
-
i0.ɵɵproperty("ngIf", !((
|
|
355
|
+
i0.ɵɵproperty("ngIf", !((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.disablePageJumping));
|
|
343
356
|
i0.ɵɵadvance();
|
|
344
|
-
i0.ɵɵclassProp("page-nav-inactive", ((
|
|
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");
|
|
357
|
+
i0.ɵɵclassProp("page-nav-inactive", ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.selectedPage) === ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.noOfPages));
|
|
355
358
|
} }
|
|
356
359
|
class TableComponent {
|
|
357
360
|
constructor(renderer) {
|
|
@@ -385,22 +388,7 @@ class TableComponent {
|
|
|
385
388
|
this.showPageSizeDropdown = computed(() => {
|
|
386
389
|
return !!this.tableConfig()?.paginationConfig?.showPageSizeDropdown;
|
|
387
390
|
});
|
|
388
|
-
this.selectedPageSizeOption =
|
|
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
|
-
});
|
|
391
|
+
this.selectedPageSizeOption = signal({ label: "", value: "" });
|
|
404
392
|
// Convert inputs to signal-based inputs
|
|
405
393
|
this.tableConfig = input();
|
|
406
394
|
this.subTableconfig = input();
|
|
@@ -428,6 +416,40 @@ class TableComponent {
|
|
|
428
416
|
if (this.rowCollapseConfigIndex() !== -1) {
|
|
429
417
|
this.buildExpandedMap();
|
|
430
418
|
}
|
|
419
|
+
if (config?.paginationConfig?.showPageSizeDropdown) {
|
|
420
|
+
const options = this.pageSizeOptions();
|
|
421
|
+
const rowsPerPage = this.tableConfig()?.paginationConfig?.rowsPerPage;
|
|
422
|
+
if (!Array.isArray(options) || !rowsPerPage) {
|
|
423
|
+
this.selectedPageSizeOption.set({ label: "", value: "" });
|
|
424
|
+
return;
|
|
425
|
+
}
|
|
426
|
+
const selected = options.find(opt => opt?.value === rowsPerPage.toString());
|
|
427
|
+
if (selected) {
|
|
428
|
+
this.selectedPageSizeOption.set(selected);
|
|
429
|
+
}
|
|
430
|
+
else if (options.length > 0) {
|
|
431
|
+
// If configured rowsPerPage is not among options, pick the floor value and notify parent
|
|
432
|
+
const target = Number(rowsPerPage);
|
|
433
|
+
//Sort the options
|
|
434
|
+
const sorted = options
|
|
435
|
+
.map(opt => ({ opt, num: Number(opt?.value) }))
|
|
436
|
+
.filter(({ num }) => Number.isFinite(num))
|
|
437
|
+
.sort((a, b) => a.num - b.num);
|
|
438
|
+
let floorOption = sorted[0]?.opt;
|
|
439
|
+
for (let i = sorted.length - 1; i >= 0; i--) {
|
|
440
|
+
if (sorted[i].num <= target) {
|
|
441
|
+
floorOption = sorted[i].opt;
|
|
442
|
+
break;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
console.error("The configured rowsPerPage was not matched to any of the pageSizes sent in the paginationConfig. Selecting the nearest floor value among the available pageSizes.");
|
|
446
|
+
this.selectedPageSizeOption.set(floorOption);
|
|
447
|
+
this.onPageSizeChange(floorOption);
|
|
448
|
+
}
|
|
449
|
+
else {
|
|
450
|
+
console.error("No page size options available.");
|
|
451
|
+
}
|
|
452
|
+
}
|
|
431
453
|
}, { allowSignalWrites: true });
|
|
432
454
|
}
|
|
433
455
|
// Function to handle row click
|
|
@@ -726,7 +748,7 @@ class TableComponent {
|
|
|
726
748
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
727
749
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
728
750
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
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:
|
|
751
|
+
} }, 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: 10, vars: 15, 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"], [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-text"], [1, "page-size-selector"], ["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"], [1, "page-size-dropdown", 3, "onChange", "data", "selectedItem", "width", "height", "searchEnabled", "dropdownListHeight"], [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"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
730
752
|
i0.ɵɵelementStart(0, "div", 4);
|
|
731
753
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 5);
|
|
732
754
|
i0.ɵɵelementStart(2, "div", 6, 0)(4, "div", 7);
|
|
@@ -736,16 +758,16 @@ class TableComponent {
|
|
|
736
758
|
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 11, "div", 10);
|
|
737
759
|
i0.ɵɵelementEnd()();
|
|
738
760
|
i0.ɵɵelementStart(8, "div", 11);
|
|
739
|
-
i0.ɵɵtemplate(9,
|
|
761
|
+
i0.ɵɵtemplate(9, TableComponent_Conditional_9_Template, 12, 9, "div", 12);
|
|
740
762
|
i0.ɵɵelementEnd()();
|
|
741
763
|
} if (rf & 2) {
|
|
742
764
|
let tmp_5_0;
|
|
743
765
|
let tmp_7_0;
|
|
744
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(
|
|
766
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.tableConfig().canScrollHorizontally ? "auto" : "unset"));
|
|
745
767
|
i0.ɵɵadvance();
|
|
746
768
|
i0.ɵɵproperty("ngIf", ctx.showFilter());
|
|
747
769
|
i0.ɵɵadvance();
|
|
748
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(
|
|
770
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c4$1, ctx.expandedIndex() < 0, !(ctx.expandedIndex() < 0), ctx.tableConfig().canScrollHorizontally));
|
|
749
771
|
i0.ɵɵadvance(2);
|
|
750
772
|
i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
|
|
751
773
|
i0.ɵɵadvance();
|
|
@@ -753,14 +775,12 @@ class TableComponent {
|
|
|
753
775
|
i0.ɵɵadvance(2);
|
|
754
776
|
i0.ɵɵproperty("ngForOf", ctx.tableData());
|
|
755
777
|
i0.ɵɵadvance(2);
|
|
756
|
-
i0.ɵɵ
|
|
757
|
-
|
|
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}}"] }); }
|
|
778
|
+
i0.ɵɵconditional(ctx.showPageSizeDropdown() || ((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) ? 9 : -1);
|
|
779
|
+
} }, 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 16px 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}}"] }); }
|
|
760
780
|
}
|
|
761
781
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
762
782
|
type: Component,
|
|
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"] }]
|
|
783
|
+
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(showPageSizeDropdown() || (tableConfig()?.paginationConfig && (tableLength() >= tableConfig().paginationConfig.rowsPerPage || tableConfig().paginationConfig?.selectedPage !== 1))){\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"] }]
|
|
764
784
|
}], () => [{ type: i0.Renderer2 }], { filter: [{
|
|
765
785
|
type: ViewChild,
|
|
766
786
|
args: ["filter"]
|