mis-crystal-design-system 18.0.13-test-2 → 18.0.13-test-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.
- package/esm2022/table/actions-cell/actions-cell.component.mjs +50 -54
- package/esm2022/table/table.component.mjs +30 -20
- package/fesm2022/mis-crystal-design-system-table.mjs +78 -72
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +17 -17
- package/table/filter/filter.component.d.ts +1 -1
- package/table/table.component.d.ts +2 -0
|
@@ -23,8 +23,9 @@ const _c12 = a0 => ({ "text-ellipsis": a0 });
|
|
|
23
23
|
const _c13 = () => [];
|
|
24
24
|
const _c14 = () => ({ display: "flex", justifyContent: "center", alignItems: "center", padding: "16px" });
|
|
25
25
|
const _c15 = a0 => ({ "page-active": a0 });
|
|
26
|
-
const _c16 =
|
|
27
|
-
const _c17 = () => ({
|
|
26
|
+
const _c16 = a0 => ({ "page-jumping-enabled": a0 });
|
|
27
|
+
const _c17 = () => ({ display: "flex" });
|
|
28
|
+
const _c18 = () => ({ "margin-right": "4px" });
|
|
28
29
|
function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
29
30
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
30
31
|
i0.ɵɵelementStart(0, "mis-table-filter", 11, 1);
|
|
@@ -130,7 +131,7 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
|
|
|
130
131
|
const i_r12 = ctx_r12.index;
|
|
131
132
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
132
133
|
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(7, _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",
|
|
134
|
+
i0.ɵɵproperty("data", col_r11)("actionItems", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionItems) || i0.ɵɵpureFunction0(7, _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);
|
|
134
135
|
} }
|
|
135
136
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
136
137
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
@@ -214,34 +215,34 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
214
215
|
i0.ɵɵadvance();
|
|
215
216
|
i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r8);
|
|
216
217
|
} }
|
|
217
|
-
function
|
|
218
|
+
function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
218
219
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
219
220
|
i0.ɵɵelementStart(0, "span", 48);
|
|
220
|
-
i0.ɵɵlistener("click", function
|
|
221
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r17); const pageNumber_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r18)); });
|
|
221
222
|
i0.ɵɵtext(1);
|
|
222
223
|
i0.ɵɵelementEnd();
|
|
223
224
|
} if (rf & 2) {
|
|
224
225
|
const pageNumber_r18 = i0.ɵɵnextContext().$implicit;
|
|
225
|
-
const ctx_r1 = i0.ɵɵnextContext(
|
|
226
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
226
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
227
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, pageNumber_r18 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)))("ngClass", i0.ɵɵpureFunction1(5, _c16, !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping)));
|
|
227
228
|
i0.ɵɵadvance();
|
|
228
229
|
i0.ɵɵtextInterpolate(pageNumber_r18);
|
|
229
230
|
} }
|
|
230
|
-
function
|
|
231
|
+
function TableComponent_div_8_ng_container_7_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
231
232
|
i0.ɵɵelementStart(0, "span", 49)(1, "div", 36);
|
|
232
233
|
i0.ɵɵelement(2, "span", 50)(3, "span", 50)(4, "span", 51);
|
|
233
234
|
i0.ɵɵelementEnd()();
|
|
234
235
|
} if (rf & 2) {
|
|
235
236
|
i0.ɵɵadvance();
|
|
236
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(3,
|
|
237
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(3, _c17));
|
|
237
238
|
i0.ɵɵadvance();
|
|
238
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4,
|
|
239
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c18));
|
|
239
240
|
i0.ɵɵadvance();
|
|
240
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5,
|
|
241
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c18));
|
|
241
242
|
} }
|
|
242
|
-
function
|
|
243
|
+
function TableComponent_div_8_ng_container_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
243
244
|
i0.ɵɵelementStart(0, "div");
|
|
244
|
-
i0.ɵɵtemplate(1,
|
|
245
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_span_1_Template, 2, 7, "span", 46)(2, TableComponent_div_8_ng_container_7_div_1_span_2_Template, 5, 6, "span", 47);
|
|
245
246
|
i0.ɵɵelementEnd();
|
|
246
247
|
} if (rf & 2) {
|
|
247
248
|
const pageNumber_r18 = ctx.$implicit;
|
|
@@ -250,6 +251,15 @@ function TableComponent_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
250
251
|
i0.ɵɵadvance();
|
|
251
252
|
i0.ɵɵproperty("ngIf", pageNumber_r18 == 0);
|
|
252
253
|
} }
|
|
254
|
+
function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
255
|
+
i0.ɵɵelementContainerStart(0);
|
|
256
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_Template, 3, 2, "div", 45);
|
|
257
|
+
i0.ɵɵelementContainerEnd();
|
|
258
|
+
} if (rf & 2) {
|
|
259
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
260
|
+
i0.ɵɵadvance();
|
|
261
|
+
i0.ɵɵproperty("ngForOf", ctx_r1.pages);
|
|
262
|
+
} }
|
|
253
263
|
function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
254
264
|
const _r16 = i0.ɵɵgetCurrentView();
|
|
255
265
|
i0.ɵɵelementStart(0, "div", 38)(1, "p", 39);
|
|
@@ -261,20 +271,20 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
261
271
|
i0.ɵɵelementStart(5, "svg", 42);
|
|
262
272
|
i0.ɵɵelement(6, "path", 43);
|
|
263
273
|
i0.ɵɵelementEnd()();
|
|
264
|
-
i0.ɵɵtemplate(7,
|
|
274
|
+
i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container", 16);
|
|
265
275
|
i0.ɵɵnamespaceHTML();
|
|
266
276
|
i0.ɵɵelementStart(8, "span", 41);
|
|
267
277
|
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)); });
|
|
268
278
|
i0.ɵɵnamespaceSVG();
|
|
269
279
|
i0.ɵɵelementStart(9, "svg", 42);
|
|
270
|
-
i0.ɵɵelement(10, "path",
|
|
280
|
+
i0.ɵɵelement(10, "path", 44);
|
|
271
281
|
i0.ɵɵelementEnd()()()();
|
|
272
282
|
} if (rf & 2) {
|
|
273
283
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
274
284
|
i0.ɵɵadvance(2);
|
|
275
285
|
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 ");
|
|
276
286
|
i0.ɵɵadvance(5);
|
|
277
|
-
i0.ɵɵproperty("
|
|
287
|
+
i0.ɵɵproperty("ngIf", !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping));
|
|
278
288
|
} }
|
|
279
289
|
class TableComponent {
|
|
280
290
|
constructor(renderer) {
|
|
@@ -487,7 +497,7 @@ class TableComponent {
|
|
|
487
497
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
488
498
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
489
499
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
490
|
-
} }, 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"], [
|
|
500
|
+
} }, 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"], ["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", 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) {
|
|
491
501
|
i0.ɵɵelementStart(0, "div", 3);
|
|
492
502
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
493
503
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
@@ -512,11 +522,11 @@ class TableComponent {
|
|
|
512
522
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
513
523
|
i0.ɵɵadvance();
|
|
514
524
|
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));
|
|
515
|
-
} }, 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;
|
|
525
|
+
} }, 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}"] }); }
|
|
516
526
|
}
|
|
517
527
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
518
528
|
type: Component,
|
|
519
|
-
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 || 'left'\"\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 <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;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"] }]
|
|
529
|
+
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 <ng-container *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 [ngClass]=\"{\n 'page-jumping-enabled': !config.paginationConfig?.disablePageJumping\n }\"\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 <!-- 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;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"] }]
|
|
520
530
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
521
531
|
type: Output
|
|
522
532
|
}], filter: [{
|
|
@@ -1090,74 +1100,70 @@ class SortIconsDirective {
|
|
|
1090
1100
|
const _c0 = a0 => ({ "disabled": a0 });
|
|
1091
1101
|
const _c1 = (a0, a1) => ({ "left": a0, "right": a1 });
|
|
1092
1102
|
function ActionsCellComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
|
|
1093
|
-
i0.ɵɵelement(0, "img",
|
|
1103
|
+
i0.ɵɵelement(0, "img", 8);
|
|
1094
1104
|
} if (rf & 2) {
|
|
1095
1105
|
const item_r2 = i0.ɵɵnextContext().$implicit;
|
|
1096
1106
|
i0.ɵɵproperty("src", item_r2.icon, i0.ɵɵsanitizeUrl)("alt", item_r2.label);
|
|
1097
1107
|
} }
|
|
1098
|
-
function ActionsCellComponent_div_1_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
1099
|
-
i0.ɵɵelement(0, "span", 10);
|
|
1100
|
-
} if (rf & 2) {
|
|
1101
|
-
const item_r2 = i0.ɵɵnextContext().$implicit;
|
|
1102
|
-
i0.ɵɵproperty("innerHTML", item_r2.icon, i0.ɵɵsanitizeHtml);
|
|
1103
|
-
} }
|
|
1104
1108
|
function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1105
1109
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
1106
1110
|
i0.ɵɵelementStart(0, "div", 6);
|
|
1107
1111
|
i0.ɵɵlistener("click", function ActionsCellComponent_div_1_div_1_Template_div_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onActionClick(item_r2, $event)); });
|
|
1108
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 7)
|
|
1112
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 7);
|
|
1109
1113
|
i0.ɵɵelementEnd();
|
|
1110
1114
|
} if (rf & 2) {
|
|
1111
1115
|
const item_r2 = ctx.$implicit;
|
|
1112
1116
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
1113
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
1117
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, item_r2.disabled))("title", item_r2.label);
|
|
1114
1118
|
i0.ɵɵadvance();
|
|
1115
1119
|
i0.ɵɵproperty("ngIf", ctx_r2.isSvgFile(item_r2.icon));
|
|
1116
|
-
i0.ɵɵadvance();
|
|
1117
|
-
i0.ɵɵproperty("ngIf", !ctx_r2.isSvgFile(item_r2.icon));
|
|
1118
1120
|
} }
|
|
1119
1121
|
function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1120
1122
|
i0.ɵɵelementStart(0, "div", 4);
|
|
1121
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template,
|
|
1123
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 5, "div", 5);
|
|
1122
1124
|
i0.ɵɵelementEnd();
|
|
1123
1125
|
} if (rf & 2) {
|
|
1124
1126
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
1125
1127
|
i0.ɵɵadvance();
|
|
1126
1128
|
i0.ɵɵproperty("ngForOf", ctx_r2.actionItems)("ngForTrackBy", ctx_r2.trackByAction);
|
|
1127
1129
|
} }
|
|
1128
|
-
function
|
|
1129
|
-
i0.ɵɵ
|
|
1130
|
+
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1131
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
1132
|
+
i0.ɵɵelement(1, "img", 27);
|
|
1133
|
+
i0.ɵɵelementEnd();
|
|
1130
1134
|
} if (rf & 2) {
|
|
1131
1135
|
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1136
|
+
i0.ɵɵadvance();
|
|
1132
1137
|
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1133
1138
|
} }
|
|
1134
|
-
function
|
|
1135
|
-
i0.ɵɵelementStart(0, "span",
|
|
1136
|
-
i0.ɵɵelement(1, "img",
|
|
1139
|
+
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1140
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
1141
|
+
i0.ɵɵelement(1, "img", 27);
|
|
1137
1142
|
i0.ɵɵelementEnd();
|
|
1138
1143
|
} if (rf & 2) {
|
|
1139
1144
|
const child_r8 = i0.ɵɵnextContext().$implicit;
|
|
1140
1145
|
i0.ɵɵadvance();
|
|
1141
1146
|
i0.ɵɵproperty("src", child_r8.icon, i0.ɵɵsanitizeUrl);
|
|
1142
1147
|
} }
|
|
1143
|
-
function
|
|
1148
|
+
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1144
1149
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
1145
|
-
i0.ɵɵelementStart(0, "div",
|
|
1146
|
-
i0.ɵɵlistener("click", function
|
|
1147
|
-
i0.ɵɵtemplate(1,
|
|
1148
|
-
i0.ɵɵelementStart(2, "span",
|
|
1150
|
+
i0.ɵɵelementStart(0, "div", 18);
|
|
1151
|
+
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template_div_click_0_listener() { const child_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.handleAction(child_r8)); });
|
|
1152
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 20);
|
|
1153
|
+
i0.ɵɵelementStart(2, "span", 21);
|
|
1149
1154
|
i0.ɵɵtext(3);
|
|
1150
1155
|
i0.ɵɵelementEnd()();
|
|
1151
1156
|
} if (rf & 2) {
|
|
1152
1157
|
const child_r8 = ctx.$implicit;
|
|
1158
|
+
const ctx_r2 = i0.ɵɵnextContext(6);
|
|
1153
1159
|
i0.ɵɵadvance();
|
|
1154
|
-
i0.ɵɵproperty("ngIf", child_r8.icon);
|
|
1160
|
+
i0.ɵɵproperty("ngIf", child_r8.icon && ctx_r2.isSvgFile(child_r8.icon));
|
|
1155
1161
|
i0.ɵɵadvance(2);
|
|
1156
1162
|
i0.ɵɵtextInterpolate(child_r8.label);
|
|
1157
1163
|
} }
|
|
1158
|
-
function
|
|
1159
|
-
i0.ɵɵelementStart(0, "div",
|
|
1160
|
-
i0.ɵɵtemplate(1,
|
|
1164
|
+
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
1165
|
+
i0.ɵɵelementStart(0, "div", 28);
|
|
1166
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 2, "div", 17);
|
|
1161
1167
|
i0.ɵɵelementEnd();
|
|
1162
1168
|
} if (rf & 2) {
|
|
1163
1169
|
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1168,31 +1174,30 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_8_Template(rf
|
|
|
1168
1174
|
} }
|
|
1169
1175
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
1170
1176
|
i0.ɵɵelementContainerStart(0);
|
|
1171
|
-
i0.ɵɵ
|
|
1172
|
-
i0.ɵɵ
|
|
1173
|
-
i0.ɵɵ
|
|
1174
|
-
i0.ɵɵelementStart(3, "span", 24);
|
|
1175
|
-
i0.ɵɵtext(4);
|
|
1177
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template, 2, 1, "span", 20);
|
|
1178
|
+
i0.ɵɵelementStart(2, "span", 21);
|
|
1179
|
+
i0.ɵɵtext(3);
|
|
1176
1180
|
i0.ɵɵelementEnd();
|
|
1177
|
-
i0.ɵɵelementStart(
|
|
1181
|
+
i0.ɵɵelementStart(4, "span", 22);
|
|
1178
1182
|
i0.ɵɵnamespaceSVG();
|
|
1179
|
-
i0.ɵɵelementStart(
|
|
1180
|
-
i0.ɵɵelement(
|
|
1183
|
+
i0.ɵɵelementStart(5, "svg", 23);
|
|
1184
|
+
i0.ɵɵelement(6, "path", 24);
|
|
1181
1185
|
i0.ɵɵelementEnd()();
|
|
1182
|
-
i0.ɵɵtemplate(
|
|
1186
|
+
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 5, "div", 25);
|
|
1183
1187
|
i0.ɵɵelementContainerEnd();
|
|
1184
1188
|
} if (rf & 2) {
|
|
1185
1189
|
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1186
|
-
i0.ɵɵ
|
|
1187
|
-
i0.ɵɵ
|
|
1190
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1191
|
+
i0.ɵɵadvance();
|
|
1192
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1188
1193
|
i0.ɵɵadvance(2);
|
|
1189
1194
|
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1190
1195
|
i0.ɵɵadvance(4);
|
|
1191
1196
|
i0.ɵɵproperty("ngIf", item_r6.showSubmenu);
|
|
1192
1197
|
} }
|
|
1193
1198
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
|
|
1194
|
-
i0.ɵɵelementStart(0, "span",
|
|
1195
|
-
i0.ɵɵelement(1, "img",
|
|
1199
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
1200
|
+
i0.ɵɵelement(1, "img", 27);
|
|
1196
1201
|
i0.ɵɵelementEnd();
|
|
1197
1202
|
} if (rf & 2) {
|
|
1198
1203
|
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1200,21 +1205,22 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf
|
|
|
1200
1205
|
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1201
1206
|
} }
|
|
1202
1207
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
1203
|
-
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span",
|
|
1204
|
-
i0.ɵɵelementStart(1, "span",
|
|
1208
|
+
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 20);
|
|
1209
|
+
i0.ɵɵelementStart(1, "span", 21);
|
|
1205
1210
|
i0.ɵɵtext(2);
|
|
1206
1211
|
i0.ɵɵelementEnd();
|
|
1207
1212
|
} if (rf & 2) {
|
|
1208
1213
|
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1209
|
-
i0.ɵɵ
|
|
1214
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1215
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1210
1216
|
i0.ɵɵadvance(2);
|
|
1211
1217
|
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1212
1218
|
} }
|
|
1213
1219
|
function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1214
1220
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
1215
|
-
i0.ɵɵelementStart(0, "div",
|
|
1221
|
+
i0.ɵɵelementStart(0, "div", 18);
|
|
1216
1222
|
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_Template_div_click_0_listener($event) { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(item_r6, $event)); });
|
|
1217
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template,
|
|
1223
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template, 8, 3, "ng-container", 19)(2, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template, 3, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
1218
1224
|
i0.ɵɵelementEnd();
|
|
1219
1225
|
} if (rf & 2) {
|
|
1220
1226
|
const item_r6 = ctx.$implicit;
|
|
@@ -1223,8 +1229,8 @@ function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1)
|
|
|
1223
1229
|
i0.ɵɵproperty("ngIf", item_r6.children == null ? null : item_r6.children.length)("ngIfElse", noChildren_r9);
|
|
1224
1230
|
} }
|
|
1225
1231
|
function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
1226
|
-
i0.ɵɵelementStart(0, "div",
|
|
1227
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 2, "div",
|
|
1232
|
+
i0.ɵɵelementStart(0, "div", 16);
|
|
1233
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 2, "div", 17);
|
|
1228
1234
|
i0.ɵɵelementEnd();
|
|
1229
1235
|
} if (rf & 2) {
|
|
1230
1236
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
@@ -1233,13 +1239,13 @@ function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
1233
1239
|
} }
|
|
1234
1240
|
function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1235
1241
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
1236
|
-
i0.ɵɵelementStart(0, "div",
|
|
1242
|
+
i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
|
|
1237
1243
|
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleDropdown($event)); });
|
|
1238
1244
|
i0.ɵɵnamespaceSVG();
|
|
1239
|
-
i0.ɵɵelementStart(2, "svg",
|
|
1240
|
-
i0.ɵɵelement(3, "circle",
|
|
1245
|
+
i0.ɵɵelementStart(2, "svg", 11);
|
|
1246
|
+
i0.ɵɵelement(3, "circle", 12)(4, "circle", 13)(5, "circle", 14);
|
|
1241
1247
|
i0.ɵɵelementEnd()();
|
|
1242
|
-
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 1, "div",
|
|
1248
|
+
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 1, "div", 15);
|
|
1243
1249
|
i0.ɵɵelementEnd();
|
|
1244
1250
|
} if (rf & 2) {
|
|
1245
1251
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -1340,7 +1346,7 @@ class ActionsCellComponent {
|
|
|
1340
1346
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1341
1347
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1342
1348
|
i0.ɵɵlistener("click", function ActionsCellComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
|
|
1343
|
-
} }, 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"], [
|
|
1349
|
+
} }, 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", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none"], ["cx", "8", "cy", "4", "r", "1.5", "fill", "#333"], ["cx", "8", "cy", "8", "r", "1.5", "fill", "#333"], ["cx", "8", "cy", "12", "r", "1.5", "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) {
|
|
1344
1350
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1345
1351
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3);
|
|
1346
1352
|
i0.ɵɵelementEnd();
|
|
@@ -1350,11 +1356,11 @@ class ActionsCellComponent {
|
|
|
1350
1356
|
i0.ɵɵproperty("ngIf", ctx.actionType === "inline");
|
|
1351
1357
|
i0.ɵɵadvance();
|
|
1352
1358
|
i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
|
|
1353
|
-
} }, 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%;right:0;width:240px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.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%;
|
|
1359
|
+
} }, 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%;right:0;width:240px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.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}"] }); }
|
|
1354
1360
|
}
|
|
1355
1361
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1356
1362
|
type: Component,
|
|
1357
|
-
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
|
|
1363
|
+
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=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"4\" r=\"1.5\" fill=\"#333\" />\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#333\" />\n <circle cx=\"8\" cy=\"12\" r=\"1.5\" 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%;right:0;width:240px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.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"] }]
|
|
1358
1364
|
}], null, { data: [{
|
|
1359
1365
|
type: Input
|
|
1360
1366
|
}], actionItems: [{
|