mis-crystal-design-system 18.1.7-signal-2 → 18.1.7-signal-4
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.
|
@@ -43,8 +43,9 @@ function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
43
43
|
i0.ɵɵelementEnd();
|
|
44
44
|
} if (rf & 2) {
|
|
45
45
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
46
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
46
47
|
i0.ɵɵadvance();
|
|
47
|
-
i0.ɵɵ
|
|
48
|
+
i0.ɵɵtextInterpolate2(" ", (colHeader_r4 == null ? null : colHeader_r4.data) || " ", " - 67 - ", ctx_r1.tableData().length, " ");
|
|
48
49
|
} }
|
|
49
50
|
function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
50
51
|
i0.ɵɵelement(0, "span", 24);
|
|
@@ -97,7 +98,7 @@ function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
97
98
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
98
99
|
i0.ɵɵelementStart(0, "div", 13, 2);
|
|
99
100
|
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,
|
|
101
|
+
i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 2, "p", 14)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 15)(4, TableComponent_div_5_span_4_Template, 2, 1, "span", 16)(5, TableComponent_div_5_span_5_Template, 1, 4, "span", 17)(6, TableComponent_div_5_6_Template, 1, 2, null, 18);
|
|
101
102
|
i0.ɵɵelementEnd();
|
|
102
103
|
} if (rf & 2) {
|
|
103
104
|
const colHeader_r4 = ctx.$implicit;
|
|
@@ -113,7 +114,7 @@ function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
113
114
|
i0.ɵɵadvance();
|
|
114
115
|
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) === "custom");
|
|
115
116
|
} }
|
|
116
|
-
function
|
|
117
|
+
function TableComponent_div_7_div_2_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
117
118
|
i0.ɵɵelementContainerStart(0);
|
|
118
119
|
i0.ɵɵelement(1, "span", 39);
|
|
119
120
|
i0.ɵɵelementContainerEnd();
|
|
@@ -122,7 +123,7 @@ function TableComponent_div_8_div_2_div_2_ng_container_1_Template(rf, ctx) { if
|
|
|
122
123
|
i0.ɵɵadvance();
|
|
123
124
|
i0.ɵɵproperty("innerHTML", col_r12, i0.ɵɵsanitizeHtml);
|
|
124
125
|
} }
|
|
125
|
-
function
|
|
126
|
+
function TableComponent_div_7_div_2_div_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
126
127
|
i0.ɵɵelementStart(0, "span");
|
|
127
128
|
i0.ɵɵtext(1);
|
|
128
129
|
i0.ɵɵelementEnd();
|
|
@@ -131,51 +132,51 @@ function TableComponent_div_8_div_2_div_2_ng_template_2_Template(rf, ctx) { if (
|
|
|
131
132
|
i0.ɵɵadvance();
|
|
132
133
|
i0.ɵɵtextInterpolate(col_r12);
|
|
133
134
|
} }
|
|
134
|
-
function
|
|
135
|
+
function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
135
136
|
i0.ɵɵelementStart(0, "div", 37);
|
|
136
|
-
i0.ɵɵtemplate(1,
|
|
137
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container", 38)(2, TableComponent_div_7_div_2_div_2_ng_template_2_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
137
138
|
i0.ɵɵelementEnd();
|
|
138
139
|
} if (rf & 2) {
|
|
139
140
|
let tmp_10_0;
|
|
140
141
|
let tmp_12_0;
|
|
141
142
|
const plainText_r14 = i0.ɵɵreference(3);
|
|
142
|
-
const
|
|
143
|
+
const colIndex_r13 = i0.ɵɵnextContext().index;
|
|
143
144
|
const rowIndex_r15 = i0.ɵɵnextContext().index;
|
|
144
145
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
145
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(4, _c11, ((tmp_10_0 = ctx_r1.tableConfig()) == null ? null : tmp_10_0.colConfig[
|
|
146
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(4, _c11, ((tmp_10_0 = ctx_r1.tableConfig()) == null ? null : tmp_10_0.colConfig[colIndex_r13] == null ? null : tmp_10_0.colConfig[colIndex_r13].style == null ? null : tmp_10_0.colConfig[colIndex_r13].style.color) || "", ctx_r1.previewLines() || 3))("ngClass", i0.ɵɵpureFunction1(7, _c12, ctx_r1.collapseColIndex() == colIndex_r13 && ctx_r1.expandedMap()[rowIndex_r15]));
|
|
146
147
|
i0.ɵɵadvance();
|
|
147
|
-
i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[
|
|
148
|
+
i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_12_0.type) === "html")("ngIfElse", plainText_r14);
|
|
148
149
|
} }
|
|
149
|
-
function
|
|
150
|
-
function
|
|
151
|
-
i0.ɵɵtemplate(0,
|
|
150
|
+
function TableComponent_div_7_div_2_3_ng_template_0_Template(rf, ctx) { }
|
|
151
|
+
function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
152
|
+
i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 28);
|
|
152
153
|
} if (rf & 2) {
|
|
153
154
|
const ctx_r15 = i0.ɵɵnextContext();
|
|
154
155
|
const col_r12 = ctx_r15.$implicit;
|
|
155
|
-
const
|
|
156
|
+
const colIndex_r13 = ctx_r15.index;
|
|
156
157
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
157
|
-
i0.ɵɵproperty("customComponent", ctx_r1.tableConfig().colConfig[
|
|
158
|
+
i0.ɵɵproperty("customComponent", ctx_r1.tableConfig().colConfig[colIndex_r13].componentRef)("data", col_r12);
|
|
158
159
|
} }
|
|
159
|
-
function
|
|
160
|
+
function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
|
|
160
161
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
161
162
|
i0.ɵɵelementStart(0, "mis-actions-cell", 40);
|
|
162
|
-
i0.ɵɵlistener("actionClick", function
|
|
163
|
+
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
164
|
i0.ɵɵelementEnd();
|
|
164
165
|
} if (rf & 2) {
|
|
165
166
|
let tmp_11_0;
|
|
166
167
|
const ctx_r15 = i0.ɵɵnextContext();
|
|
167
168
|
const col_r12 = ctx_r15.$implicit;
|
|
168
|
-
const
|
|
169
|
+
const colIndex_r13 = ctx_r15.index;
|
|
169
170
|
const row_r18 = i0.ɵɵnextContext().$implicit;
|
|
170
171
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
171
|
-
i0.ɵɵproperty("cellData", col_r12)("config", ctx_r1.tableConfig().colConfig[
|
|
172
|
+
i0.ɵɵproperty("cellData", col_r12)("config", ctx_r1.tableConfig().colConfig[colIndex_r13])("ngClass", i0.ɵɵpureFunction1(3, _c13, (((tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.actionType) === "checkbox" || ((tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.actionType) === "row-collapse") && ctx_r1.isRowDisabled(row_r18)));
|
|
172
173
|
} }
|
|
173
|
-
function
|
|
174
|
+
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
174
175
|
const _r10 = i0.ɵɵgetCurrentView();
|
|
175
176
|
i0.ɵɵelementStart(0, "div", 33);
|
|
176
|
-
i0.ɵɵlistener("click", function
|
|
177
|
+
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
178
|
i0.ɵɵelementStart(1, "div", 34);
|
|
178
|
-
i0.ɵɵtemplate(2,
|
|
179
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div", 35)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 18)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 5, "mis-actions-cell", 36);
|
|
179
180
|
i0.ɵɵelementEnd()();
|
|
180
181
|
} if (rf & 2) {
|
|
181
182
|
let tmp_8_0;
|
|
@@ -184,20 +185,20 @@ function TableComponent_div_8_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
184
185
|
let tmp_12_0;
|
|
185
186
|
let tmp_13_0;
|
|
186
187
|
let tmp_14_0;
|
|
187
|
-
const
|
|
188
|
+
const colIndex_r13 = ctx.index;
|
|
188
189
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
189
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, ((tmp_8_0 = ctx_r1.tableConfig()) == null ? null : tmp_8_0.colConfig[
|
|
190
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, ((tmp_8_0 = ctx_r1.tableConfig()) == null ? null : tmp_8_0.colConfig[colIndex_r13] == null ? null : tmp_8_0.colConfig[colIndex_r13].style == null ? null : tmp_8_0.colConfig[colIndex_r13].style.width) || ((tmp_8_0 = ctx_r1.tableConfig()) == null ? null : tmp_8_0.colHeaderConfig[colIndex_r13] == null ? null : tmp_8_0.colHeaderConfig[colIndex_r13].style == null ? null : tmp_8_0.colHeaderConfig[colIndex_r13].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(10, _c9, ctx_r1.tableConfig().cellHover));
|
|
190
191
|
i0.ɵɵadvance();
|
|
191
|
-
i0.ɵɵstyleMap((tmp_10_0 = ctx_r1.tableConfig().colConfig[
|
|
192
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, ((tmp_11_0 = ctx_r1.tableConfig().colConfig[
|
|
192
|
+
i0.ɵɵstyleMap((tmp_10_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_10_0.style);
|
|
193
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, ((tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.action) ? "pointer" : "default", ((tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.style == null ? null : tmp_11_0.style.justifyContent) ? (tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.style == null ? null : tmp_11_0.style.justifyContent : ((tmp_11_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_11_0.type) === "number" ? "flex-end" : "space-between"));
|
|
193
194
|
i0.ɵɵadvance();
|
|
194
|
-
i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[
|
|
195
|
+
i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_12_0.type) !== "custom" && ((tmp_12_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_12_0.type) !== "actions");
|
|
195
196
|
i0.ɵɵadvance();
|
|
196
|
-
i0.ɵɵproperty("ngIf", ((tmp_13_0 = ctx_r1.tableConfig().colConfig[
|
|
197
|
+
i0.ɵɵproperty("ngIf", ((tmp_13_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_13_0.type) === "custom");
|
|
197
198
|
i0.ɵɵadvance();
|
|
198
|
-
i0.ɵɵproperty("ngIf", ((tmp_14_0 = ctx_r1.tableConfig().colConfig[
|
|
199
|
+
i0.ɵɵproperty("ngIf", ((tmp_14_0 = ctx_r1.tableConfig().colConfig[colIndex_r13]) == null ? null : tmp_14_0.type) === "actions");
|
|
199
200
|
} }
|
|
200
|
-
function
|
|
201
|
+
function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
201
202
|
i0.ɵɵelementContainerStart(0);
|
|
202
203
|
i0.ɵɵelementStart(1, "div", 42);
|
|
203
204
|
i0.ɵɵtext(2, " Loading... ");
|
|
@@ -207,7 +208,7 @@ function TableComponent_div_8_div_3_ng_container_1_Template(rf, ctx) { if (rf &
|
|
|
207
208
|
i0.ɵɵadvance();
|
|
208
209
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c14));
|
|
209
210
|
} }
|
|
210
|
-
function
|
|
211
|
+
function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
211
212
|
i0.ɵɵelementContainerStart(0);
|
|
212
213
|
i0.ɵɵelementStart(1, "div", 42);
|
|
213
214
|
i0.ɵɵtext(2, " No Data Available... ");
|
|
@@ -217,35 +218,35 @@ function TableComponent_div_8_div_3_ng_container_2_Template(rf, ctx) { if (rf &
|
|
|
217
218
|
i0.ɵɵadvance();
|
|
218
219
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c14));
|
|
219
220
|
} }
|
|
220
|
-
function
|
|
221
|
+
function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
221
222
|
i0.ɵɵelementContainerStart(0);
|
|
222
223
|
i0.ɵɵelement(1, "sub-table", 43);
|
|
223
224
|
i0.ɵɵelementContainerEnd();
|
|
224
225
|
} if (rf & 2) {
|
|
225
226
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
226
227
|
i0.ɵɵadvance();
|
|
227
|
-
i0.ɵɵproperty("config", ctx_r1.subTableconfig)("tableData", ctx_r1.subTableData);
|
|
228
|
+
i0.ɵɵproperty("config", ctx_r1.subTableconfig())("tableData", ctx_r1.subTableData());
|
|
228
229
|
} }
|
|
229
|
-
function
|
|
230
|
+
function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
230
231
|
i0.ɵɵelementStart(0, "div", 41);
|
|
231
|
-
i0.ɵɵtemplate(1,
|
|
232
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 18)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 18)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 18);
|
|
232
233
|
i0.ɵɵelementEnd();
|
|
233
234
|
} if (rf & 2) {
|
|
234
235
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
235
236
|
i0.ɵɵadvance();
|
|
236
|
-
i0.ɵɵproperty("ngIf", ctx_r1.subTableDataLoading);
|
|
237
|
+
i0.ɵɵproperty("ngIf", ctx_r1.subTableDataLoading());
|
|
237
238
|
i0.ɵɵadvance();
|
|
238
|
-
i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading && ctx_r1.subTableData.length === 0);
|
|
239
|
+
i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading() && ctx_r1.subTableData().length === 0);
|
|
239
240
|
i0.ɵɵadvance();
|
|
240
|
-
i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading && ctx_r1.subTableData.length > 0);
|
|
241
|
+
i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading() && ctx_r1.subTableData().length > 0);
|
|
241
242
|
} }
|
|
242
|
-
function
|
|
243
|
+
function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
243
244
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
244
245
|
i0.ɵɵelementStart(0, "div", 29)(1, "div", 30);
|
|
245
|
-
i0.ɵɵlistener("click", function
|
|
246
|
-
i0.ɵɵtemplate(2,
|
|
246
|
+
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)); });
|
|
247
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 5, 15, "div", 31);
|
|
247
248
|
i0.ɵɵelementEnd();
|
|
248
|
-
i0.ɵɵtemplate(3,
|
|
249
|
+
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 32);
|
|
249
250
|
i0.ɵɵelementEnd();
|
|
250
251
|
} if (rf & 2) {
|
|
251
252
|
let tmp_7_0;
|
|
@@ -259,12 +260,12 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
259
260
|
i0.ɵɵadvance();
|
|
260
261
|
i0.ɵɵproperty("ngForOf", row_r18);
|
|
261
262
|
i0.ɵɵadvance();
|
|
262
|
-
i0.ɵɵproperty("ngIf", ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.canExpand) && ctx_r1.expandedIndex === i_r9);
|
|
263
|
+
i0.ɵɵproperty("ngIf", ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.canExpand) && ctx_r1.expandedIndex() === i_r9);
|
|
263
264
|
} }
|
|
264
|
-
function
|
|
265
|
+
function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
265
266
|
const _r20 = i0.ɵɵgetCurrentView();
|
|
266
267
|
i0.ɵɵelementStart(0, "span", 54);
|
|
267
|
-
i0.ɵɵlistener("click", function
|
|
268
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_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
269
|
i0.ɵɵtext(1);
|
|
269
270
|
i0.ɵɵelementEnd();
|
|
270
271
|
} if (rf & 2) {
|
|
@@ -275,7 +276,7 @@ function TableComponent_div_9_ng_container_7_div_1_span_1_Template(rf, ctx) { if
|
|
|
275
276
|
i0.ɵɵadvance();
|
|
276
277
|
i0.ɵɵtextInterpolate(pageNumber_r21);
|
|
277
278
|
} }
|
|
278
|
-
function
|
|
279
|
+
function TableComponent_div_8_ng_container_7_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
279
280
|
i0.ɵɵelementStart(0, "span", 55)(1, "div", 42);
|
|
280
281
|
i0.ɵɵelement(2, "span", 56)(3, "span", 56)(4, "span", 57);
|
|
281
282
|
i0.ɵɵelementEnd()();
|
|
@@ -287,9 +288,9 @@ function TableComponent_div_9_ng_container_7_div_1_span_2_Template(rf, ctx) { if
|
|
|
287
288
|
i0.ɵɵadvance();
|
|
288
289
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c17));
|
|
289
290
|
} }
|
|
290
|
-
function
|
|
291
|
+
function TableComponent_div_8_ng_container_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
291
292
|
i0.ɵɵelementStart(0, "div");
|
|
292
|
-
i0.ɵɵtemplate(1,
|
|
293
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_span_1_Template, 2, 4, "span", 52)(2, TableComponent_div_8_ng_container_7_div_1_span_2_Template, 5, 6, "span", 53);
|
|
293
294
|
i0.ɵɵelementEnd();
|
|
294
295
|
} if (rf & 2) {
|
|
295
296
|
const pageNumber_r21 = ctx.$implicit;
|
|
@@ -298,30 +299,30 @@ function TableComponent_div_9_ng_container_7_div_1_Template(rf, ctx) { if (rf &
|
|
|
298
299
|
i0.ɵɵadvance();
|
|
299
300
|
i0.ɵɵproperty("ngIf", pageNumber_r21 == 0);
|
|
300
301
|
} }
|
|
301
|
-
function
|
|
302
|
+
function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
302
303
|
i0.ɵɵelementContainerStart(0);
|
|
303
|
-
i0.ɵɵtemplate(1,
|
|
304
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_Template, 3, 2, "div", 51);
|
|
304
305
|
i0.ɵɵelementContainerEnd();
|
|
305
306
|
} if (rf & 2) {
|
|
306
307
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
307
308
|
i0.ɵɵadvance();
|
|
308
309
|
i0.ɵɵproperty("ngForOf", ctx_r1.pages());
|
|
309
310
|
} }
|
|
310
|
-
function
|
|
311
|
+
function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
311
312
|
const _r19 = i0.ɵɵgetCurrentView();
|
|
312
313
|
i0.ɵɵelementStart(0, "div", 44)(1, "p", 45);
|
|
313
314
|
i0.ɵɵtext(2);
|
|
314
315
|
i0.ɵɵelementEnd();
|
|
315
316
|
i0.ɵɵelementStart(3, "div", 46)(4, "span", 47);
|
|
316
|
-
i0.ɵɵlistener("click", function
|
|
317
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_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
318
|
i0.ɵɵnamespaceSVG();
|
|
318
319
|
i0.ɵɵelementStart(5, "svg", 48);
|
|
319
320
|
i0.ɵɵelement(6, "path", 49);
|
|
320
321
|
i0.ɵɵelementEnd()();
|
|
321
|
-
i0.ɵɵtemplate(7,
|
|
322
|
+
i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container", 18);
|
|
322
323
|
i0.ɵɵnamespaceHTML();
|
|
323
324
|
i0.ɵɵelementStart(8, "span", 47);
|
|
324
|
-
i0.ɵɵlistener("click", function
|
|
325
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_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
326
|
i0.ɵɵnamespaceSVG();
|
|
326
327
|
i0.ɵɵelementStart(9, "svg", 48);
|
|
327
328
|
i0.ɵɵelement(10, "path", 50);
|
|
@@ -342,8 +343,9 @@ function TableComponent_div_9_Template(rf, ctx) { if (rf & 1) {
|
|
|
342
343
|
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
344
|
} }
|
|
344
345
|
class TableComponent {
|
|
345
|
-
constructor(renderer) {
|
|
346
|
+
constructor(renderer, cdr) {
|
|
346
347
|
this.renderer = renderer;
|
|
348
|
+
this.cdr = cdr;
|
|
347
349
|
// Initialize with -1 to indicate no row is colored at the beginning
|
|
348
350
|
this.activeRowIndex = signal([]);
|
|
349
351
|
this.hasCheckboxActions = signal(false);
|
|
@@ -387,6 +389,8 @@ class TableComponent {
|
|
|
387
389
|
if (this.rowCollapseConfigIndex() !== -1) {
|
|
388
390
|
this.buildExpandedMap();
|
|
389
391
|
}
|
|
392
|
+
// Trigger change detection when input signals change
|
|
393
|
+
this.cdr.markForCheck();
|
|
390
394
|
}, { allowSignalWrites: true });
|
|
391
395
|
}
|
|
392
396
|
// Function to handle row click
|
|
@@ -661,7 +665,7 @@ class TableComponent {
|
|
|
661
665
|
});
|
|
662
666
|
}
|
|
663
667
|
}
|
|
664
|
-
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
668
|
+
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
|
|
665
669
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
|
|
666
670
|
i0.ɵɵviewQuery(_c0$3, 5);
|
|
667
671
|
i0.ɵɵviewQuery(_c1$3, 5);
|
|
@@ -671,42 +675,39 @@ class TableComponent {
|
|
|
671
675
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
672
676
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
673
677
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
674
|
-
} }, 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:
|
|
678
|
+
} }, 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: 9, 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-container", 4, "ngIf"], [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"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
675
679
|
i0.ɵɵelementStart(0, "div", 4);
|
|
676
680
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 5);
|
|
677
681
|
i0.ɵɵelementStart(2, "div", 6, 0)(4, "div", 7);
|
|
678
682
|
i0.ɵɵtemplate(5, TableComponent_div_5_Template, 7, 10, "div", 8);
|
|
679
683
|
i0.ɵɵelementEnd();
|
|
680
|
-
i0.ɵɵ
|
|
681
|
-
i0.ɵɵ
|
|
682
|
-
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 4, 11, "div", 10);
|
|
684
|
+
i0.ɵɵelementStart(6, "div", 9);
|
|
685
|
+
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 11, "div", 10);
|
|
683
686
|
i0.ɵɵelementEnd()();
|
|
684
|
-
i0.ɵɵtemplate(
|
|
687
|
+
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 8, "div", 11);
|
|
685
688
|
i0.ɵɵelementEnd();
|
|
686
689
|
} if (rf & 2) {
|
|
687
690
|
let tmp_5_0;
|
|
688
|
-
let
|
|
689
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(
|
|
691
|
+
let tmp_7_0;
|
|
692
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.tableConfig().canScrollHorizontally ? "auto" : "unset"));
|
|
690
693
|
i0.ɵɵadvance();
|
|
691
694
|
i0.ɵɵproperty("ngIf", ctx.showFilter());
|
|
692
695
|
i0.ɵɵadvance();
|
|
693
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(
|
|
696
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c4$1, ctx.expandedIndex() < 0, !(ctx.expandedIndex() < 0), ctx.tableConfig().canScrollHorizontally));
|
|
694
697
|
i0.ɵɵadvance(2);
|
|
695
698
|
i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
|
|
696
699
|
i0.ɵɵadvance();
|
|
697
700
|
i0.ɵɵproperty("ngForOf", (tmp_5_0 = ctx.tableConfig()) == null ? null : tmp_5_0.colHeaderConfig);
|
|
698
|
-
i0.ɵɵadvance();
|
|
699
|
-
i0.ɵɵtextInterpolate1(" ", ctx.tableData().length, " ");
|
|
700
701
|
i0.ɵɵadvance(2);
|
|
701
702
|
i0.ɵɵproperty("ngForOf", ctx.tableData());
|
|
702
703
|
i0.ɵɵadvance();
|
|
703
|
-
i0.ɵɵproperty("ngIf", ((
|
|
704
|
+
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));
|
|
704
705
|
} }, 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%]{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}.collapsed-cell[_ngcontent-%COMP%]{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block;@supports (-webkit-line-clamp: 2){display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}"] }); }
|
|
705
706
|
}
|
|
706
707
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
707
708
|
type: Component,
|
|
708
|
-
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 {{tableData().length}}\n <div id=\"data-container 234\">\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[i]?.action && tableConfig()?.colConfig[i]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: tableConfig()?.colConfig[i]?.style?.width || tableConfig()?.colHeaderConfig[i]?.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[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: tableConfig().colConfig[i]?.action ? 'pointer' : 'default',\n 'justify-content': tableConfig().colConfig[i]?.style?.justifyContent\n ? tableConfig().colConfig[i]?.style?.justifyContent\n : tableConfig().colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <div\n *ngIf=\"tableConfig().colConfig[i]?.type !== 'custom' && tableConfig().colConfig[i]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: tableConfig()?.colConfig[i]?.style?.color || '',\n '--collapsed-lines': previewLines() || 3\n }\"\n [ngClass]=\"{\n 'collapsed-cell': collapseColIndex() == i && expandedMap()[rowIndex]\n }\"\n class=\"t-col-text\"\n >\n <!-- Render as HTML -->\n <ng-container *ngIf=\"tableConfig().colConfig[i]?.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[i]?.type === 'custom'\"\n [customComponent]=\"tableConfig().colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <mis-actions-cell\n *ngIf=\"tableConfig().colConfig[i]?.type === 'actions'\"\n [cellData]=\"col\"\n [config]=\"tableConfig().colConfig[i]\"\n (actionClick)=\"onActionClick($event, rowIndex)\"\n [ngClass]=\"{\n 'disable-actions': (tableConfig().colConfig[i]?.actionType === 'checkbox' || tableConfig().colConfig[i]?.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){display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
|
|
709
|
-
}], () => [{ type: i0.Renderer2 }], { filter: [{
|
|
709
|
+
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 || \" \" }} - 67 - {{tableData().length}}\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){display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
|
|
710
|
+
}], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], { filter: [{
|
|
710
711
|
type: ViewChild,
|
|
711
712
|
args: ["filter"]
|
|
712
713
|
}], colHeaders: [{
|