mis-crystal-design-system 18.0.13-test-3 → 18.0.13-test-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/table/actions-cell/actions-cell.component.mjs +7 -4
- package/esm2022/table/table.component.mjs +22 -43
- package/fesm2022/mis-crystal-design-system-table.mjs +27 -45
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +18 -18
- package/table/actions-cell/actions-cell.component.d.ts +3 -2
- package/table/table.component.d.ts +1 -0
|
@@ -130,14 +130,14 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
|
|
|
130
130
|
const i_r12 = ctx_r12.index;
|
|
131
131
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
132
132
|
i0.ɵɵstyleMap(ctx_r1.getActionsCellStyle(ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style));
|
|
133
|
-
i0.ɵɵproperty("data", col_r11)("actionItems", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionItems) || i0.ɵɵpureFunction0(
|
|
133
|
+
i0.ɵɵproperty("data", col_r11)("actionItems", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionItems) || i0.ɵɵpureFunction0(8, _c13))("actionType", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionType) || "inline")("dropdownIcon", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].dropdownIcon) || "")("submenuAlign", ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].submenuAlign)("menuAlign", ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].menuAlign);
|
|
134
134
|
} }
|
|
135
135
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
136
136
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
137
137
|
i0.ɵɵelementStart(0, "div", 29);
|
|
138
138
|
i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r9 = i0.ɵɵrestoreView(_r9); const col_r11 = ctx_r9.$implicit; const i_r12 = ctx_r9.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action(col_r11) : null); });
|
|
139
139
|
i0.ɵɵelementStart(1, "div", 30);
|
|
140
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 31)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 16)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1,
|
|
140
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 31)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 16)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 9, "mis-actions-cell", 32);
|
|
141
141
|
i0.ɵɵelementEnd()();
|
|
142
142
|
} if (rf & 2) {
|
|
143
143
|
const i_r12 = ctx.index;
|
|
@@ -214,22 +214,22 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
214
214
|
i0.ɵɵadvance();
|
|
215
215
|
i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r8);
|
|
216
216
|
} }
|
|
217
|
-
function
|
|
217
|
+
function TableComponent_div_8_div_7_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
218
218
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
219
|
-
i0.ɵɵelementStart(0, "span",
|
|
220
|
-
i0.ɵɵlistener("click", function
|
|
219
|
+
i0.ɵɵelementStart(0, "span", 48);
|
|
220
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_div_7_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r17); const pageNumber_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r18)); });
|
|
221
221
|
i0.ɵɵtext(1);
|
|
222
222
|
i0.ɵɵelementEnd();
|
|
223
223
|
} if (rf & 2) {
|
|
224
224
|
const pageNumber_r18 = i0.ɵɵnextContext().$implicit;
|
|
225
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
225
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
226
226
|
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r18 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)));
|
|
227
227
|
i0.ɵɵadvance();
|
|
228
228
|
i0.ɵɵtextInterpolate(pageNumber_r18);
|
|
229
229
|
} }
|
|
230
|
-
function
|
|
231
|
-
i0.ɵɵelementStart(0, "span",
|
|
232
|
-
i0.ɵɵelement(2, "span",
|
|
230
|
+
function TableComponent_div_8_div_7_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
231
|
+
i0.ɵɵelementStart(0, "span", 49)(1, "div", 36);
|
|
232
|
+
i0.ɵɵelement(2, "span", 50)(3, "span", 50)(4, "span", 51);
|
|
233
233
|
i0.ɵɵelementEnd()();
|
|
234
234
|
} if (rf & 2) {
|
|
235
235
|
i0.ɵɵadvance();
|
|
@@ -239,9 +239,9 @@ function TableComponent_div_8_div_7_div_1_span_2_Template(rf, ctx) { if (rf & 1)
|
|
|
239
239
|
i0.ɵɵadvance();
|
|
240
240
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c17));
|
|
241
241
|
} }
|
|
242
|
-
function
|
|
242
|
+
function TableComponent_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
243
243
|
i0.ɵɵelementStart(0, "div");
|
|
244
|
-
i0.ɵɵtemplate(1,
|
|
244
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_div_7_span_1_Template, 2, 4, "span", 46)(2, TableComponent_div_8_div_7_span_2_Template, 5, 6, "span", 47);
|
|
245
245
|
i0.ɵɵelementEnd();
|
|
246
246
|
} if (rf & 2) {
|
|
247
247
|
const pageNumber_r18 = ctx.$implicit;
|
|
@@ -250,24 +250,6 @@ function TableComponent_div_8_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
250
250
|
i0.ɵɵadvance();
|
|
251
251
|
i0.ɵɵproperty("ngIf", pageNumber_r18 == 0);
|
|
252
252
|
} }
|
|
253
|
-
function TableComponent_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
254
|
-
i0.ɵɵelementStart(0, "div");
|
|
255
|
-
i0.ɵɵtemplate(1, TableComponent_div_8_div_7_div_1_Template, 3, 2, "div", 46);
|
|
256
|
-
i0.ɵɵelementEnd();
|
|
257
|
-
} if (rf & 2) {
|
|
258
|
-
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
259
|
-
i0.ɵɵadvance();
|
|
260
|
-
i0.ɵɵproperty("ngForOf", ctx_r1.pages);
|
|
261
|
-
} }
|
|
262
|
-
function TableComponent_div_8_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
263
|
-
i0.ɵɵelementStart(0, "div", 53)(1, "span", 54);
|
|
264
|
-
i0.ɵɵtext(2);
|
|
265
|
-
i0.ɵɵelementEnd()();
|
|
266
|
-
} if (rf & 2) {
|
|
267
|
-
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
268
|
-
i0.ɵɵadvance(2);
|
|
269
|
-
i0.ɵɵtextInterpolate2("", ctx_r1.config.paginationConfig.selectedPage, " of ", ctx_r1.config.paginationConfig.noOfPages, "");
|
|
270
|
-
} }
|
|
271
253
|
function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
272
254
|
const _r16 = i0.ɵɵgetCurrentView();
|
|
273
255
|
i0.ɵɵelementStart(0, "div", 38)(1, "p", 39);
|
|
@@ -279,22 +261,20 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
279
261
|
i0.ɵɵelementStart(5, "svg", 42);
|
|
280
262
|
i0.ɵɵelement(6, "path", 43);
|
|
281
263
|
i0.ɵɵelementEnd()();
|
|
282
|
-
i0.ɵɵtemplate(7, TableComponent_div_8_div_7_Template,
|
|
264
|
+
i0.ɵɵtemplate(7, TableComponent_div_8_div_7_Template, 3, 2, "div", 44);
|
|
283
265
|
i0.ɵɵnamespaceHTML();
|
|
284
|
-
i0.ɵɵelementStart(
|
|
285
|
-
i0.ɵɵlistener("click", function
|
|
266
|
+
i0.ɵɵelementStart(8, "span", 41);
|
|
267
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) + 1)); });
|
|
286
268
|
i0.ɵɵnamespaceSVG();
|
|
287
|
-
i0.ɵɵelementStart(
|
|
288
|
-
i0.ɵɵelement(
|
|
269
|
+
i0.ɵɵelementStart(9, "svg", 42);
|
|
270
|
+
i0.ɵɵelement(10, "path", 45);
|
|
289
271
|
i0.ɵɵelementEnd()()()();
|
|
290
272
|
} if (rf & 2) {
|
|
291
273
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
292
274
|
i0.ɵɵadvance(2);
|
|
293
275
|
i0.ɵɵtextInterpolate3(" Showing ", ((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1) * ctx_r1.config.paginationConfig.rowsPerPage + 1, "-", ((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1) * ctx_r1.config.paginationConfig.rowsPerPage + ctx_r1.tableLength, " of ", ctx_r1.config.paginationConfig.totalNoOfRows, " items ");
|
|
294
276
|
i0.ɵɵadvance(5);
|
|
295
|
-
i0.ɵɵproperty("
|
|
296
|
-
i0.ɵɵadvance();
|
|
297
|
-
i0.ɵɵproperty("ngIf", ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping);
|
|
277
|
+
i0.ɵɵproperty("ngForOf", ctx_r1.pages);
|
|
298
278
|
} }
|
|
299
279
|
class TableComponent {
|
|
300
280
|
constructor(renderer) {
|
|
@@ -493,7 +473,6 @@ class TableComponent {
|
|
|
493
473
|
getActionsCellStyle(style) {
|
|
494
474
|
if (!style)
|
|
495
475
|
return {};
|
|
496
|
-
// Create a copy of the style object without width
|
|
497
476
|
const { width, ...restStyle } = style;
|
|
498
477
|
return restStyle;
|
|
499
478
|
}
|
|
@@ -507,7 +486,7 @@ class TableComponent {
|
|
|
507
486
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
508
487
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
509
488
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
510
|
-
} }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 9, vars: 15, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["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"], ["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"], ["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, "data", "actionItems", "actionType", "dropdownIcon", "style", "submenuAlign", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "actionClick", "data", "actionItems", "actionType", "dropdownIcon", "submenuAlign"], [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"], [
|
|
489
|
+
} }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 9, vars: 15, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["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"], ["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"], ["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, "data", "actionItems", "actionType", "dropdownIcon", "style", "submenuAlign", "menuAlign", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "actionClick", "data", "actionItems", "actionType", "dropdownIcon", "submenuAlign", "menuAlign"], [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"], [4, "ngFor", "ngForOf"], ["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"], ["class", "page", 3, "ngClass", "click", 4, "ngIf"], ["class", "page-seperator", 4, "ngIf"], [1, "page", 3, "click", "ngClass"], [1, "page-seperator"], [1, "dot", 3, "ngStyle"], [1, "dot"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
511
490
|
i0.ɵɵelementStart(0, "div", 3);
|
|
512
491
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
513
492
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
@@ -516,7 +495,7 @@ class TableComponent {
|
|
|
516
495
|
i0.ɵɵelementStart(6, "div", 8);
|
|
517
496
|
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 9, "div", 9);
|
|
518
497
|
i0.ɵɵelementEnd()();
|
|
519
|
-
i0.ɵɵtemplate(8, TableComponent_div_8_Template,
|
|
498
|
+
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 4, "div", 10);
|
|
520
499
|
i0.ɵɵelementEnd();
|
|
521
500
|
} if (rf & 2) {
|
|
522
501
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
|
|
@@ -532,11 +511,11 @@ class TableComponent {
|
|
|
532
511
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
533
512
|
i0.ɵɵadvance();
|
|
534
513
|
i0.ɵɵproperty("ngIf", (ctx.config == null ? null : ctx.config.paginationConfig) && (ctx.tableLength >= ctx.config.paginationConfig.rowsPerPage || (ctx.config.paginationConfig == null ? null : ctx.config.paginationConfig.selectedPage) !== 1));
|
|
535
|
-
} }, 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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;overflow-wrap:anywhere}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #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:#6a737d;margin:0 96px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;
|
|
514
|
+
} }, 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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;overflow-wrap:anywhere}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #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:#6a737d;margin:0 96px 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:#6a737d;margin-right:8px;cursor:pointer}.page.page-jumping-enabled[_ngcontent-%COMP%]{border:1px solid #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:#6a737d}.page-active[_ngcontent-%COMP%]{color:#0937b2;border:1px solid #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}"] }); }
|
|
536
515
|
}
|
|
537
516
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
538
517
|
type: Component,
|
|
539
|
-
args: [{ selector: "mis-table", template: "<div\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth(),\n 'overflow-x': config.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': config.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 config?.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'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData = 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 *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n [column]=\"colHeader\"\n [activeSort]=\"currentSort\"\n [activeSorts]=\"multiColumnSort\"\n [multiColumnSort]=\"config.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 <div id=\"data-container\">\n <div class=\"row-wrapper\" *ngFor=\"let row of tableData; let i = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': i === activeRowIndex }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n >\n <div\n (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\n >\n <div\n class=\"t-col\"\n [style]=\"config.colConfig[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: config.colConfig[i]?.action ? 'pointer' : 'default',\n 'justify-content': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config.colConfig[i]?.type !== 'custom' && config.colConfig[i]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n }\"\n [ngClass]=\"{'text-ellipsis': !!config?.colConfig[i]?.style?.textEllipsis}\"\n class=\"t-col-text\"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf=\"config.colConfig[i]?.type === 'custom'\"\n [customComponent]=\"config.colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <!-- <ng-template > -->\n <mis-actions-cell\n *ngIf=\"config.colConfig[i]?.type === 'actions'\"\n [data]=\"col\"\n [actionItems]=\"config.colConfig[i]?.actionItems || []\"\n [actionType]=\"config.colConfig[i]?.actionType || 'inline'\"\n [dropdownIcon]=\"config.colConfig[i]?.dropdownIcon || ''\"\n [style]=\"getActionsCellStyle(config.colConfig[i]?.style)\"\n (actionClick)=\"onActionClick($event)\"\n [submenuAlign]=\"config.colConfig[i]?.submenuAlign\"\n ></mis-actions-cell>\n <!-- </ng-template> -->\n </div>\n </div>\n </div>\n <div *ngIf=\"config?.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=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id=\"pages-container\">\n <span (click)=\"updateSelectedPage(config.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=\"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 <div *ngIf=\"!config.paginationConfig?.disablePageJumping\">\n <div *ngFor=\"let pageNumber of pages\">\n <span\n (click)=\"updateSelectedPage(pageNumber)\"\n *ngIf=\"pageNumber != 0\"\n [ngClass]=\"{ 'page-active': pageNumber == config.paginationConfig?.selectedPage }\"\n class=\"page\"\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 </div>\n \n <!-- Page indicator (only show if disablePageJumping is true) -->\n <div *ngIf=\"config.paginationConfig?.disablePageJumping\" class=\"page-indicator\">\n <span class=\"page-indicator-text\">{{ config.paginationConfig.selectedPage }} of {{ config.paginationConfig.noOfPages }}</span>\n </div>\n \n <span (click)=\"updateSelectedPage(config.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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.t-col-container{padding:0 16px;overflow-wrap:anywhere}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #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:#6a737d;margin:0 96px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.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:#6a737d}.page-active{color:#0937b2;border:1px solid #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}\n"] }]
|
|
518
|
+
args: [{ selector: "mis-table", template: "<div\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth(),\n 'overflow-x': config.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': config.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 config?.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'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData = 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 *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n [column]=\"colHeader\"\n [activeSort]=\"currentSort\"\n [activeSorts]=\"multiColumnSort\"\n [multiColumnSort]=\"config.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 <div id=\"data-container\">\n <div class=\"row-wrapper\" *ngFor=\"let row of tableData; let i = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': i === activeRowIndex }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n >\n <div\n (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\n >\n <div\n class=\"t-col\"\n [style]=\"config.colConfig[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: config.colConfig[i]?.action ? 'pointer' : 'default',\n 'justify-content': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config.colConfig[i]?.type !== 'custom' && config.colConfig[i]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n }\"\n [ngClass]=\"{'text-ellipsis': !!config?.colConfig[i]?.style?.textEllipsis}\"\n class=\"t-col-text\"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf=\"config.colConfig[i]?.type === 'custom'\"\n [customComponent]=\"config.colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <mis-actions-cell\n *ngIf=\"config.colConfig[i]?.type === 'actions'\"\n [data]=\"col\"\n [actionItems]=\"config.colConfig[i]?.actionItems || []\"\n [actionType]=\"config.colConfig[i]?.actionType || 'inline'\"\n [dropdownIcon]=\"config.colConfig[i]?.dropdownIcon || ''\"\n [style]=\"getActionsCellStyle(config.colConfig[i]?.style)\"\n (actionClick)=\"onActionClick($event)\"\n [submenuAlign]=\"config.colConfig[i]?.submenuAlign\"\n [menuAlign]=\"config.colConfig[i]?.menuAlign\"\n ></mis-actions-cell>\n </div>\n </div>\n </div>\n <div *ngIf=\"config?.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=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id=\"pages-container\">\n <span (click)=\"updateSelectedPage(config.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=\"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 <div *ngFor=\"let pageNumber of pages\">\n <span\n (click)=\"updateSelectedPage(pageNumber)\"\n *ngIf=\"pageNumber != 0\"\n [ngClass]=\"{ 'page-active': pageNumber == config.paginationConfig?.selectedPage }\"\n class=\"page\"\n >{{ pageNumber }}</span\n >\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 <span (click)=\"updateSelectedPage(config.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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.t-col-container{padding:0 16px;overflow-wrap:anywhere}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #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:#6a737d;margin:0 96px 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:#6a737d;margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid #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:#6a737d}.page-active{color:#0937b2;border:1px solid #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}\n"] }]
|
|
540
519
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
541
520
|
type: Output
|
|
542
521
|
}], filter: [{
|
|
@@ -1268,6 +1247,7 @@ class ActionsCellComponent {
|
|
|
1268
1247
|
this.actionType = 'inline';
|
|
1269
1248
|
this.dropdownIcon = '';
|
|
1270
1249
|
this.submenuAlign = 'right';
|
|
1250
|
+
this.menuAlign = 'right';
|
|
1271
1251
|
this._style = {};
|
|
1272
1252
|
this.containerStyle = {};
|
|
1273
1253
|
this.actionClick = new EventEmitter();
|
|
@@ -1356,7 +1336,7 @@ class ActionsCellComponent {
|
|
|
1356
1336
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1357
1337
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1358
1338
|
i0.ɵɵlistener("click", function ActionsCellComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
|
|
1359
|
-
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", style: "style" }, outputs: { actionClick: "actionClick" }, decls: 3, vars: 3, consts: [["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], [1, "inline-actions"], ["class", "action-item", 3, "ngClass", "title", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "click", "ngClass", "title"], ["class", "action-icon-svg", 3, "src", "alt", 4, "ngIf"], [1, "action-icon-svg", 3, "src", "alt"], [1, "dropdown-actions"], ["title", "More actions", 1, "dropdown-trigger", 3, "click"], ["width", "
|
|
1339
|
+
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", menuAlign: "menuAlign", style: "style" }, outputs: { actionClick: "actionClick" }, decls: 3, vars: 3, consts: [["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], [1, "inline-actions"], ["class", "action-item", 3, "ngClass", "title", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "click", "ngClass", "title"], ["class", "action-icon-svg", 3, "src", "alt", 4, "ngIf"], [1, "action-icon-svg", 3, "src", "alt"], [1, "dropdown-actions"], ["title", "More actions", 1, "dropdown-trigger", 3, "click"], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none"], ["cx", "10", "cy", "4", "r", "2", "fill", "#333"], ["cx", "10", "cy", "10", "r", "2", "fill", "#333"], ["cx", "10", "cy", "16", "r", "2", "fill", "#333"], ["class", "dropdown-menu", 4, "ngIf"], [1, "dropdown-menu"], ["class", "dropdown-menu-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "dropdown-menu-item", 3, "click"], [4, "ngIf", "ngIfElse"], ["class", "dropdown-icon", 4, "ngIf"], [1, "dropdown-label"], [1, "submenu-arrow"], ["width", "20", "height", "20", "viewBox", "0 0 24 24", "fill", "none"], ["d", "M9 6L15 12L9 18", "stroke", "#0D1321", "stroke-width", "2", "stroke-linecap", "round", "stroke-linejoin", "round"], ["class", "dropdown-submenu", 3, "ngClass", 4, "ngIf"], [1, "dropdown-icon"], [3, "src"], [1, "dropdown-submenu", 3, "ngClass"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1360
1340
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1361
1341
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3);
|
|
1362
1342
|
i0.ɵɵelementEnd();
|
|
@@ -1366,11 +1346,11 @@ class ActionsCellComponent {
|
|
|
1366
1346
|
i0.ɵɵproperty("ngIf", ctx.actionType === "inline");
|
|
1367
1347
|
i0.ɵɵadvance();
|
|
1368
1348
|
i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
|
|
1369
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle], styles: [".actions-cell-container[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item[_ngcontent-%COMP%]:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item[_ngcontent-%COMP%]:active:not(.disabled){transform:scale(.95)}.action-item.disabled[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.action-item.disabled[_ngcontent-%COMP%]:hover{background-color:transparent;transform:none}.action-icon[_ngcontent-%COMP%]{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg[_ngcontent-%COMP%]{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg[_ngcontent-%COMP%]:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer}.dropdown-actions[_ngcontent-%COMP%]{position:relative}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu[_ngcontent-%COMP%]{position:absolute;top:100%;
|
|
1349
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle], styles: [".actions-cell-container[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item[_ngcontent-%COMP%]:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item[_ngcontent-%COMP%]:active:not(.disabled){transform:scale(.95)}.action-item.disabled[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.action-item.disabled[_ngcontent-%COMP%]:hover{background-color:transparent;transform:none}.action-icon[_ngcontent-%COMP%]{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg[_ngcontent-%COMP%]{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg[_ngcontent-%COMP%]:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer}.dropdown-actions[_ngcontent-%COMP%]{position:relative}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu[_ngcontent-%COMP%]{position:absolute;top:100%;width:240px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.right[_ngcontent-%COMP%]{right:0!important;left:auto!important}.dropdown-menu.left[_ngcontent-%COMP%]{left:0!important;right:auto!important}.dropdown-menu.menu-left[_ngcontent-%COMP%]{left:0;right:auto}.dropdown-menu.menu-right[_ngcontent-%COMP%]{right:0;left:auto}.dropdown-menu-item.disabled[_ngcontent-%COMP%]{color:#aaa;cursor:not-allowed}.dropdown-menu-item[_ngcontent-%COMP%]:hover:not(.disabled), .dropdown-menu-item.has-submenu[_ngcontent-%COMP%]:hover{background:#f5f5f5}.dropdown-menu-item[_ngcontent-%COMP%]{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item[_ngcontent-%COMP%] .dropdown-label[_ngcontent-%COMP%]{flex:1;margin-left:8px}.dropdown-menu-item[_ngcontent-%COMP%] .submenu-arrow[_ngcontent-%COMP%]{margin-left:auto;width:16px;height:16px}.submenu-container[_ngcontent-%COMP%]{position:absolute;top:0;left:100%;margin-left:4px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;white-space:nowrap}.dropdown-submenu[_ngcontent-%COMP%]{position:absolute;top:0;min-width:180px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu.right[_ngcontent-%COMP%]{left:100%;margin-left:4px}.dropdown-submenu.left[_ngcontent-%COMP%]{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute}.submenu-arrow[_ngcontent-%COMP%]{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}"] }); }
|
|
1370
1350
|
}
|
|
1371
1351
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1372
1352
|
type: Component,
|
|
1373
|
-
args: [{ selector: 'mis-actions-cell', template: "<div class=\"actions-cell-container\" [ngStyle]=\"containerStyle\">\n <!-- Inline Actions -->\n <div *ngIf=\"actionType === 'inline'\" class=\"inline-actions\">\n <div *ngFor=\"let item of actionItems; trackBy: trackByAction\" class=\"action-item\"\n [ngClass]=\"{ 'disabled': item.disabled }\" (click)=\"onActionClick(item, $event)\" [title]=\"item.label\">\n <img *ngIf=\"isSvgFile(item.icon)\" [src]=\"item.icon\" [alt]=\"item.label\" class=\"action-icon-svg\" />\n <!-- <span *ngIf=\"!isSvgFile(item.icon)\" class=\"action-icon\" [innerHTML]=\"item.icon\"></span> -->\n </div>\n </div>\n\n <!-- Dropdown Actions -->\n <div *ngIf=\"actionType === 'dropdown'\" class=\"dropdown-actions\">\n <div class=\"dropdown-trigger\" (click)=\"toggleDropdown($event)\" title=\"More actions\">\n <svg width=\"
|
|
1353
|
+
args: [{ selector: 'mis-actions-cell', template: "<div class=\"actions-cell-container\" [ngStyle]=\"containerStyle\">\n <!-- Inline Actions -->\n <div *ngIf=\"actionType === 'inline'\" class=\"inline-actions\">\n <div *ngFor=\"let item of actionItems; trackBy: trackByAction\" class=\"action-item\"\n [ngClass]=\"{ 'disabled': item.disabled }\" (click)=\"onActionClick(item, $event)\" [title]=\"item.label\">\n <img *ngIf=\"isSvgFile(item.icon)\" [src]=\"item.icon\" [alt]=\"item.label\" class=\"action-icon-svg\" />\n <!-- <span *ngIf=\"!isSvgFile(item.icon)\" class=\"action-icon\" [innerHTML]=\"item.icon\"></span> -->\n </div>\n </div>\n\n <!-- Dropdown Actions -->\n <div *ngIf=\"actionType === 'dropdown'\" class=\"dropdown-actions\">\n <div class=\"dropdown-trigger\" (click)=\"toggleDropdown($event)\" title=\"More actions\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#333\" />\n <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#333\" />\n <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#333\" />\n </svg>\n </div>\n\n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <div class=\"dropdown-menu-item\" *ngFor=\"let item of actionItems\" \n (click)=\"onDropdownItemClick(item, $event)\">\n <ng-container *ngIf=\"item.children?.length; else noChildren\">\n <span class=\"dropdown-icon\" *ngIf=\"item.icon && isSvgFile(item.icon)\">\n <img [src]=\"item.icon\" />\n </span>\n <span class=\"dropdown-label\">{{ item.label }}</span>\n <span class=\"submenu-arrow\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 6L15 12L9 18\" stroke=\"#0D1321\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n\n <!-- DYNAMIC SUBMENU -->\n <div class=\"dropdown-submenu\"\n [ngClass]=\"{ 'left': submenuAlign === 'left', 'right': submenuAlign !== 'left' }\"\n *ngIf=\"item.showSubmenu\">\n <div class=\"dropdown-menu-item\" *ngFor=\"let child of item.children\"\n (click)=\"handleAction(child)\">\n <span class=\"dropdown-icon\" *ngIf=\"child.icon && isSvgFile(child.icon)\">\n <img [src]=\"child.icon\" />\n </span>\n <span class=\"dropdown-label\">{{ child.label }}</span>\n </div>\n </div>\n </ng-container>\n\n <ng-template #noChildren>\n <span class=\"dropdown-icon\" *ngIf=\"item.icon && isSvgFile(item.icon)\">\n <img [src]=\"item.icon\" />\n </span>\n <span class=\"dropdown-label\">{{ item.label }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n</div>", styles: [".actions-cell-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item:active:not(.disabled){transform:scale(.95)}.action-item.disabled{opacity:.5;cursor:not-allowed}.action-item.disabled:hover{background-color:transparent;transform:none}.action-icon{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger{cursor:pointer}.dropdown-actions{position:relative}.dropdown-trigger{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu{position:absolute;top:100%;width:240px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.right{right:0!important;left:auto!important}.dropdown-menu.left{left:0!important;right:auto!important}.dropdown-menu.menu-left{left:0;right:auto}.dropdown-menu.menu-right{right:0;left:auto}.dropdown-menu-item.disabled{color:#aaa;cursor:not-allowed}.dropdown-menu-item:hover:not(.disabled),.dropdown-menu-item.has-submenu:hover{background:#f5f5f5}.dropdown-menu-item{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item .dropdown-label{flex:1;margin-left:8px}.dropdown-menu-item .submenu-arrow{margin-left:auto;width:16px;height:16px}.submenu-container{position:absolute;top:0;left:100%;margin-left:4px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;white-space:nowrap}.dropdown-submenu{position:absolute;top:0;min-width:180px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu.right{left:100%;margin-left:4px}.dropdown-submenu.left{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute}.submenu-arrow{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon{display:flex;justify-content:center;align-items:center}\n"] }]
|
|
1374
1354
|
}], null, { data: [{
|
|
1375
1355
|
type: Input
|
|
1376
1356
|
}], actionItems: [{
|
|
@@ -1381,6 +1361,8 @@ class ActionsCellComponent {
|
|
|
1381
1361
|
type: Input
|
|
1382
1362
|
}], submenuAlign: [{
|
|
1383
1363
|
type: Input
|
|
1364
|
+
}], menuAlign: [{
|
|
1365
|
+
type: Input
|
|
1384
1366
|
}], style: [{
|
|
1385
1367
|
type: Input
|
|
1386
1368
|
}], actionClick: [{
|