mis-crystal-design-system 18.0.13-test-12 → 18.0.13-test-14
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 +67 -70
- package/esm2022/table/table.component.mjs +161 -103
- package/esm2022/table/table.module.mjs +3 -2
- package/fesm2022/mis-crystal-design-system-table.mjs +227 -172
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +13 -13
- package/table/actions-cell/actions-cell.component.d.ts +2 -2
- package/table/table.component.d.ts +11 -4
|
@@ -21,11 +21,12 @@ const _c10 = (a0, a1) => ({ width: "100%", cursor: a0, "justify-content": a1 });
|
|
|
21
21
|
const _c11 = a0 => ({ color: a0 });
|
|
22
22
|
const _c12 = a0 => ({ "text-ellipsis": a0 });
|
|
23
23
|
const _c13 = () => [];
|
|
24
|
-
const _c14 =
|
|
25
|
-
const _c15 =
|
|
26
|
-
const _c16 = a0 => ({ "page-
|
|
27
|
-
const _c17 =
|
|
28
|
-
const _c18 = () => ({
|
|
24
|
+
const _c14 = a0 => ({ "disable-actions": a0 });
|
|
25
|
+
const _c15 = () => ({ display: "flex", justifyContent: "center", alignItems: "center", padding: "16px" });
|
|
26
|
+
const _c16 = a0 => ({ "page-active": a0 });
|
|
27
|
+
const _c17 = a0 => ({ "page-jumping-enabled": a0 });
|
|
28
|
+
const _c18 = () => ({ display: "flex" });
|
|
29
|
+
const _c19 = () => ({ "margin-right": "4px" });
|
|
29
30
|
function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
30
31
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
31
32
|
i0.ɵɵelementStart(0, "mis-table-filter", 11, 1);
|
|
@@ -36,7 +37,7 @@ function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
36
37
|
i0.ɵɵproperty("containerStyles", ctx_r1.filterContainerStyles)("filtersData", ctx_r1.filterData);
|
|
37
38
|
} }
|
|
38
39
|
function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
39
|
-
i0.ɵɵelementStart(0, "p",
|
|
40
|
+
i0.ɵɵelementStart(0, "p", 18);
|
|
40
41
|
i0.ɵɵtext(1);
|
|
41
42
|
i0.ɵɵelementEnd();
|
|
42
43
|
} if (rf & 2) {
|
|
@@ -45,16 +46,16 @@ function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
45
46
|
i0.ɵɵtextInterpolate1(" ", (colHeader_r4 == null ? null : colHeader_r4.data) || " ", " ");
|
|
46
47
|
} }
|
|
47
48
|
function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
48
|
-
i0.ɵɵelement(0, "span",
|
|
49
|
+
i0.ɵɵelement(0, "span", 23);
|
|
49
50
|
} }
|
|
50
51
|
function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
51
52
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
52
|
-
i0.ɵɵelementStart(0, "span",
|
|
53
|
+
i0.ɵɵelementStart(0, "span", 19);
|
|
53
54
|
i0.ɵɵlistener("click", function TableComponent_div_5_span_3_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const colHeader_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.filterData = colHeader_r4.filters; ctx_r1.toggleFilter(colHeader_r4.data); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
54
|
-
i0.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span",
|
|
55
|
+
i0.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span", 20);
|
|
55
56
|
i0.ɵɵnamespaceSVG();
|
|
56
|
-
i0.ɵɵelementStart(2, "svg",
|
|
57
|
-
i0.ɵɵelement(3, "path",
|
|
57
|
+
i0.ɵɵelementStart(2, "svg", 21);
|
|
58
|
+
i0.ɵɵelement(3, "path", 22);
|
|
58
59
|
i0.ɵɵelementEnd()();
|
|
59
60
|
} if (rf & 2) {
|
|
60
61
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
@@ -64,17 +65,28 @@ function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
64
65
|
} }
|
|
65
66
|
function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
|
|
66
67
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
67
|
-
i0.ɵɵelementStart(0, "span",
|
|
68
|
-
i0.ɵɵlistener("
|
|
68
|
+
i0.ɵɵelementStart(0, "span", 24);
|
|
69
|
+
i0.ɵɵlistener("click", function TableComponent_div_5_span_4_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.toggleCheckbox(); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
70
|
+
i0.ɵɵelement(1, "mis-checkbox", 25);
|
|
71
|
+
i0.ɵɵelementEnd();
|
|
72
|
+
} if (rf & 2) {
|
|
73
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
74
|
+
i0.ɵɵadvance();
|
|
75
|
+
i0.ɵɵproperty("checked", ctx_r1.selectAllCheckbox);
|
|
76
|
+
} }
|
|
77
|
+
function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
|
|
78
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
79
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
80
|
+
i0.ɵɵlistener("sortChange", function TableComponent_div_5_span_5_Template_span_sortChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSortChange($event)); });
|
|
69
81
|
i0.ɵɵelementEnd();
|
|
70
82
|
} if (rf & 2) {
|
|
71
83
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
72
84
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
73
85
|
i0.ɵɵproperty("column", colHeader_r4)("activeSort", ctx_r1.currentSort)("activeSorts", ctx_r1.multiColumnSort)("multiColumnSort", ctx_r1.config.multiColumnSort);
|
|
74
86
|
} }
|
|
75
|
-
function
|
|
76
|
-
function
|
|
77
|
-
i0.ɵɵtemplate(0,
|
|
87
|
+
function TableComponent_div_5_6_ng_template_0_Template(rf, ctx) { }
|
|
88
|
+
function TableComponent_div_5_6_Template(rf, ctx) { if (rf & 1) {
|
|
89
|
+
i0.ɵɵtemplate(0, TableComponent_div_5_6_ng_template_0_Template, 0, 0, "ng-template", 27);
|
|
78
90
|
} if (rf & 2) {
|
|
79
91
|
const colHeader_r4 = i0.ɵɵnextContext().$implicit;
|
|
80
92
|
i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
|
|
@@ -83,101 +95,103 @@ function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
83
95
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
84
96
|
i0.ɵɵelementStart(0, "div", 12, 2);
|
|
85
97
|
i0.ɵɵlistener("click", function TableComponent_div_5_Template_div_click_0_listener() { const colHeader_r4 = i0.ɵɵrestoreView(_r3).$implicit; return i0.ɵɵresetView((colHeader_r4 == null ? null : colHeader_r4.action) ? colHeader_r4 == null ? null : colHeader_r4.action(colHeader_r4) : null); });
|
|
86
|
-
i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p", 13)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 14)(4, TableComponent_div_5_span_4_Template,
|
|
98
|
+
i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p", 13)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 14)(4, TableComponent_div_5_span_4_Template, 2, 1, "span", 15)(5, TableComponent_div_5_span_5_Template, 1, 4, "span", 16)(6, TableComponent_div_5_6_Template, 1, 2, null, 17);
|
|
87
99
|
i0.ɵɵelementEnd();
|
|
88
100
|
} if (rf & 2) {
|
|
89
101
|
const colHeader_r4 = ctx.$implicit;
|
|
90
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(
|
|
102
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(6, _c5$1, (colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.width) || "", colHeader_r4.action ? "pointer" : "default", (colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.justifyContent) ? colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.justifyContent : colHeader_r4.type === "number" ? "flex-end" : "space-between"));
|
|
91
103
|
i0.ɵɵadvance(2);
|
|
92
|
-
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom");
|
|
104
|
+
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom" && (colHeader_r4 == null ? null : colHeader_r4.type) !== "checkbox");
|
|
93
105
|
i0.ɵɵadvance();
|
|
94
106
|
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom" && (colHeader_r4 == null ? null : colHeader_r4.filters) && (colHeader_r4 == null ? null : colHeader_r4.filters == null ? null : colHeader_r4.filters.length) > 0);
|
|
95
107
|
i0.ɵɵadvance();
|
|
108
|
+
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) === "checkbox");
|
|
109
|
+
i0.ɵɵadvance();
|
|
96
110
|
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.isSortable) && !(colHeader_r4 == null ? null : colHeader_r4.filters));
|
|
97
111
|
i0.ɵɵadvance();
|
|
98
112
|
i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) === "custom");
|
|
99
113
|
} }
|
|
100
114
|
function TableComponent_div_7_div_2_p_2_Template(rf, ctx) { if (rf & 1) {
|
|
101
|
-
i0.ɵɵelementStart(0, "p",
|
|
115
|
+
i0.ɵɵelementStart(0, "p", 36);
|
|
102
116
|
i0.ɵɵtext(1);
|
|
103
117
|
i0.ɵɵelementEnd();
|
|
104
118
|
} if (rf & 2) {
|
|
105
|
-
const
|
|
106
|
-
const
|
|
107
|
-
const
|
|
119
|
+
const ctx_r13 = i0.ɵɵnextContext();
|
|
120
|
+
const col_r12 = ctx_r13.$implicit;
|
|
121
|
+
const i_r13 = ctx_r13.index;
|
|
108
122
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
109
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c11, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[
|
|
123
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c11, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.color) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.color : ""))("ngClass", i0.ɵɵpureFunction1(5, _c12, !!(ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.textEllipsis)));
|
|
110
124
|
i0.ɵɵadvance();
|
|
111
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
125
|
+
i0.ɵɵtextInterpolate1(" ", col_r12, " ");
|
|
112
126
|
} }
|
|
113
127
|
function TableComponent_div_7_div_2_3_ng_template_0_Template(rf, ctx) { }
|
|
114
128
|
function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
115
|
-
i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template",
|
|
129
|
+
i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 27);
|
|
116
130
|
} if (rf & 2) {
|
|
117
|
-
const
|
|
118
|
-
const
|
|
119
|
-
const
|
|
131
|
+
const ctx_r13 = i0.ɵɵnextContext();
|
|
132
|
+
const col_r12 = ctx_r13.$implicit;
|
|
133
|
+
const i_r13 = ctx_r13.index;
|
|
120
134
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
121
|
-
i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[
|
|
135
|
+
i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r13].componentRef)("data", col_r12);
|
|
122
136
|
} }
|
|
123
137
|
function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
|
|
124
|
-
const
|
|
125
|
-
i0.ɵɵelementStart(0, "mis-actions-cell",
|
|
126
|
-
i0.ɵɵlistener("actionClick", function TableComponent_div_7_div_2_mis_actions_cell_4_Template_mis_actions_cell_actionClick_0_listener($event) { i0.ɵɵrestoreView(
|
|
138
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
139
|
+
i0.ɵɵelementStart(0, "mis-actions-cell", 37);
|
|
140
|
+
i0.ɵɵlistener("actionClick", function TableComponent_div_7_div_2_mis_actions_cell_4_Template_mis_actions_cell_actionClick_0_listener($event) { i0.ɵɵrestoreView(_r15); const rowIndex_r16 = i0.ɵɵnextContext(2).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick($event, rowIndex_r16)); });
|
|
127
141
|
i0.ɵɵelementEnd();
|
|
128
142
|
} if (rf & 2) {
|
|
129
|
-
const
|
|
130
|
-
const
|
|
131
|
-
const
|
|
132
|
-
const
|
|
143
|
+
const ctx_r13 = i0.ɵɵnextContext();
|
|
144
|
+
const col_r12 = ctx_r13.$implicit;
|
|
145
|
+
const i_r13 = ctx_r13.index;
|
|
146
|
+
const row_r17 = i0.ɵɵnextContext().$implicit;
|
|
133
147
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
134
|
-
i0.ɵɵstyleMap(ctx_r1.getActionsCellStyle(ctx_r1.config.colConfig[
|
|
135
|
-
i0.ɵɵproperty("data",
|
|
148
|
+
i0.ɵɵstyleMap(ctx_r1.getActionsCellStyle(ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style));
|
|
149
|
+
i0.ɵɵproperty("data", col_r12)("actionItems", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionItems) || i0.ɵɵpureFunction0(10, _c13))("actionType", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionType) || "inline")("dropdownIcon", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].dropdownIcon) || "")("submenuAlign", ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].submenuAlign)("menuAlign", ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].menuAlign)("isChecked", col_r12)("ngClass", i0.ɵɵpureFunction1(11, _c14, (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionType) === "checkbox" && ctx_r1.isRowDisabled(row_r17)));
|
|
136
150
|
} }
|
|
137
151
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
138
|
-
const
|
|
139
|
-
i0.ɵɵelementStart(0, "div",
|
|
140
|
-
i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const
|
|
141
|
-
i0.ɵɵelementStart(1, "div",
|
|
142
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p",
|
|
152
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
153
|
+
i0.ɵɵelementStart(0, "div", 32);
|
|
154
|
+
i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r10 = i0.ɵɵrestoreView(_r10); const col_r12 = ctx_r10.$implicit; const i_r13 = ctx_r10.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action(col_r12) : null); });
|
|
155
|
+
i0.ɵɵelementStart(1, "div", 33);
|
|
156
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 34)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 17)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 13, "mis-actions-cell", 35);
|
|
143
157
|
i0.ɵɵelementEnd()();
|
|
144
158
|
} if (rf & 2) {
|
|
145
|
-
const
|
|
159
|
+
const i_r13 = ctx.index;
|
|
146
160
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
147
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[
|
|
161
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.width) || (ctx_r1.config == null ? null : ctx_r1.config.colHeaderConfig[i_r13] == null ? null : ctx_r1.config.colHeaderConfig[i_r13].style == null ? null : ctx_r1.config.colHeaderConfig[i_r13].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(10, _c9, ctx_r1.config.cellHover));
|
|
148
162
|
i0.ɵɵadvance();
|
|
149
|
-
i0.ɵɵstyleMap(ctx_r1.config.colConfig[
|
|
150
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, (ctx_r1.config.colConfig[
|
|
163
|
+
i0.ɵɵstyleMap(ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style);
|
|
164
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action) ? "pointer" : "default", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.justifyContent) ? ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.justifyContent : (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "number" ? "flex-end" : "space-between"));
|
|
151
165
|
i0.ɵɵadvance();
|
|
152
|
-
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[
|
|
166
|
+
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) !== "custom" && (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) !== "actions");
|
|
153
167
|
i0.ɵɵadvance();
|
|
154
|
-
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[
|
|
168
|
+
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "custom");
|
|
155
169
|
i0.ɵɵadvance();
|
|
156
|
-
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[
|
|
170
|
+
i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "actions");
|
|
157
171
|
} }
|
|
158
172
|
function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
159
173
|
i0.ɵɵelementContainerStart(0);
|
|
160
|
-
i0.ɵɵelementStart(1, "div",
|
|
174
|
+
i0.ɵɵelementStart(1, "div", 39);
|
|
161
175
|
i0.ɵɵtext(2, " Loading... ");
|
|
162
176
|
i0.ɵɵelementEnd();
|
|
163
177
|
i0.ɵɵelementContainerEnd();
|
|
164
178
|
} if (rf & 2) {
|
|
165
179
|
i0.ɵɵadvance();
|
|
166
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1,
|
|
180
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c15));
|
|
167
181
|
} }
|
|
168
182
|
function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
169
183
|
i0.ɵɵelementContainerStart(0);
|
|
170
|
-
i0.ɵɵelementStart(1, "div",
|
|
184
|
+
i0.ɵɵelementStart(1, "div", 39);
|
|
171
185
|
i0.ɵɵtext(2, " No Data Available... ");
|
|
172
186
|
i0.ɵɵelementEnd();
|
|
173
187
|
i0.ɵɵelementContainerEnd();
|
|
174
188
|
} if (rf & 2) {
|
|
175
189
|
i0.ɵɵadvance();
|
|
176
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1,
|
|
190
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c15));
|
|
177
191
|
} }
|
|
178
192
|
function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
179
193
|
i0.ɵɵelementContainerStart(0);
|
|
180
|
-
i0.ɵɵelement(1, "sub-table",
|
|
194
|
+
i0.ɵɵelement(1, "sub-table", 40);
|
|
181
195
|
i0.ɵɵelementContainerEnd();
|
|
182
196
|
} if (rf & 2) {
|
|
183
197
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -185,8 +199,8 @@ function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf &
|
|
|
185
199
|
i0.ɵɵproperty("config", ctx_r1.subTableconfig)("tableData", ctx_r1.subTableData);
|
|
186
200
|
} }
|
|
187
201
|
function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
188
|
-
i0.ɵɵelementStart(0, "div",
|
|
189
|
-
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container",
|
|
202
|
+
i0.ɵɵelementStart(0, "div", 38);
|
|
203
|
+
i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 17)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 17)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 17);
|
|
190
204
|
i0.ɵɵelementEnd();
|
|
191
205
|
} if (rf & 2) {
|
|
192
206
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -198,63 +212,64 @@ function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
198
212
|
i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading && ctx_r1.subTableData.length > 0);
|
|
199
213
|
} }
|
|
200
214
|
function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
201
|
-
const
|
|
202
|
-
i0.ɵɵelementStart(0, "div",
|
|
203
|
-
i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const
|
|
204
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 5, 15, "div",
|
|
215
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
216
|
+
i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
|
|
217
|
+
i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const i_r9 = i0.ɵɵrestoreView(_r8).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectRow(i_r9)); });
|
|
218
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 5, 15, "div", 30);
|
|
205
219
|
i0.ɵɵelementEnd();
|
|
206
|
-
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div",
|
|
220
|
+
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 31);
|
|
207
221
|
i0.ɵɵelementEnd();
|
|
208
222
|
} if (rf & 2) {
|
|
209
|
-
const
|
|
210
|
-
const
|
|
223
|
+
const row_r17 = ctx.$implicit;
|
|
224
|
+
const i_r9 = ctx.index;
|
|
211
225
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
212
226
|
i0.ɵɵadvance();
|
|
213
|
-
i0.ɵɵ
|
|
227
|
+
i0.ɵɵclassProp("disabled-row", ctx_r1.isRowDisabled(row_r17));
|
|
228
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c6$1, ctx_r1.config.cellHover, ctx_r1.activeRowIndex.includes(i_r9)))("ngStyle", i0.ɵɵpureFunction1(9, _c7$1, (ctx_r1.config == null ? null : ctx_r1.config.rowConfig == null ? null : ctx_r1.config.rowConfig.height) ? ctx_r1.config.rowConfig.height : "44px"));
|
|
214
229
|
i0.ɵɵadvance();
|
|
215
|
-
i0.ɵɵproperty("ngForOf",
|
|
230
|
+
i0.ɵɵproperty("ngForOf", row_r17);
|
|
216
231
|
i0.ɵɵadvance();
|
|
217
|
-
i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex ===
|
|
232
|
+
i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r9);
|
|
218
233
|
} }
|
|
219
234
|
function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
220
|
-
const
|
|
221
|
-
i0.ɵɵelementStart(0, "span",
|
|
222
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(
|
|
235
|
+
const _r19 = i0.ɵɵgetCurrentView();
|
|
236
|
+
i0.ɵɵelementStart(0, "span", 52);
|
|
237
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r19); const pageNumber_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r20)); });
|
|
223
238
|
i0.ɵɵtext(1);
|
|
224
239
|
i0.ɵɵelementEnd();
|
|
225
240
|
} if (rf & 2) {
|
|
226
|
-
const
|
|
241
|
+
const pageNumber_r20 = i0.ɵɵnextContext().$implicit;
|
|
227
242
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
228
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3,
|
|
243
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c16, pageNumber_r20 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)))("ngClass", i0.ɵɵpureFunction1(5, _c17, !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping)));
|
|
229
244
|
i0.ɵɵadvance();
|
|
230
|
-
i0.ɵɵtextInterpolate(
|
|
245
|
+
i0.ɵɵtextInterpolate(pageNumber_r20);
|
|
231
246
|
} }
|
|
232
247
|
function TableComponent_div_8_ng_container_7_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
233
|
-
i0.ɵɵelementStart(0, "span",
|
|
234
|
-
i0.ɵɵelement(2, "span",
|
|
248
|
+
i0.ɵɵelementStart(0, "span", 53)(1, "div", 39);
|
|
249
|
+
i0.ɵɵelement(2, "span", 54)(3, "span", 54)(4, "span", 55);
|
|
235
250
|
i0.ɵɵelementEnd()();
|
|
236
251
|
} if (rf & 2) {
|
|
237
252
|
i0.ɵɵadvance();
|
|
238
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(3,
|
|
253
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(3, _c18));
|
|
239
254
|
i0.ɵɵadvance();
|
|
240
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4,
|
|
255
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c19));
|
|
241
256
|
i0.ɵɵadvance();
|
|
242
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5,
|
|
257
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c19));
|
|
243
258
|
} }
|
|
244
259
|
function TableComponent_div_8_ng_container_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
245
260
|
i0.ɵɵelementStart(0, "div");
|
|
246
|
-
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_span_1_Template, 2, 7, "span",
|
|
261
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_span_1_Template, 2, 7, "span", 50)(2, TableComponent_div_8_ng_container_7_div_1_span_2_Template, 5, 6, "span", 51);
|
|
247
262
|
i0.ɵɵelementEnd();
|
|
248
263
|
} if (rf & 2) {
|
|
249
|
-
const
|
|
264
|
+
const pageNumber_r20 = ctx.$implicit;
|
|
250
265
|
i0.ɵɵadvance();
|
|
251
|
-
i0.ɵɵproperty("ngIf",
|
|
266
|
+
i0.ɵɵproperty("ngIf", pageNumber_r20 != 0);
|
|
252
267
|
i0.ɵɵadvance();
|
|
253
|
-
i0.ɵɵproperty("ngIf",
|
|
268
|
+
i0.ɵɵproperty("ngIf", pageNumber_r20 == 0);
|
|
254
269
|
} }
|
|
255
270
|
function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
256
271
|
i0.ɵɵelementContainerStart(0);
|
|
257
|
-
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_Template, 3, 2, "div",
|
|
272
|
+
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_Template, 3, 2, "div", 49);
|
|
258
273
|
i0.ɵɵelementContainerEnd();
|
|
259
274
|
} if (rf & 2) {
|
|
260
275
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -262,30 +277,34 @@ function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
262
277
|
i0.ɵɵproperty("ngForOf", ctx_r1.pages);
|
|
263
278
|
} }
|
|
264
279
|
function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
265
|
-
const
|
|
266
|
-
i0.ɵɵelementStart(0, "div",
|
|
280
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
281
|
+
i0.ɵɵelementStart(0, "div", 41)(1, "p", 42);
|
|
267
282
|
i0.ɵɵtext(2);
|
|
268
283
|
i0.ɵɵelementEnd();
|
|
269
|
-
i0.ɵɵelementStart(3, "div",
|
|
270
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(
|
|
284
|
+
i0.ɵɵelementStart(3, "div", 43)(4, "span", 44);
|
|
285
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) > 1 && ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1)); });
|
|
271
286
|
i0.ɵɵnamespaceSVG();
|
|
272
|
-
i0.ɵɵelementStart(5, "svg",
|
|
273
|
-
i0.ɵɵelement(6, "path",
|
|
287
|
+
i0.ɵɵelementStart(5, "svg", 45);
|
|
288
|
+
i0.ɵɵelement(6, "path", 46);
|
|
274
289
|
i0.ɵɵelementEnd()();
|
|
275
|
-
i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container",
|
|
290
|
+
i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container", 17);
|
|
276
291
|
i0.ɵɵnamespaceHTML();
|
|
277
|
-
i0.ɵɵelementStart(8, "span",
|
|
278
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(
|
|
292
|
+
i0.ɵɵelementStart(8, "span", 47);
|
|
293
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) < (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.noOfPages) && ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) + 1)); });
|
|
279
294
|
i0.ɵɵnamespaceSVG();
|
|
280
|
-
i0.ɵɵelementStart(9, "svg",
|
|
281
|
-
i0.ɵɵelement(10, "path",
|
|
295
|
+
i0.ɵɵelementStart(9, "svg", 45);
|
|
296
|
+
i0.ɵɵelement(10, "path", 48);
|
|
282
297
|
i0.ɵɵelementEnd()()()();
|
|
283
298
|
} if (rf & 2) {
|
|
284
299
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
285
300
|
i0.ɵɵadvance(2);
|
|
286
301
|
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 ");
|
|
287
|
-
i0.ɵɵadvance(
|
|
302
|
+
i0.ɵɵadvance(2);
|
|
303
|
+
i0.ɵɵclassProp("disabled", (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) === 1);
|
|
304
|
+
i0.ɵɵadvance(3);
|
|
288
305
|
i0.ɵɵproperty("ngIf", !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping));
|
|
306
|
+
i0.ɵɵadvance();
|
|
307
|
+
i0.ɵɵclassProp("disabled", (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) === (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.noOfPages));
|
|
289
308
|
} }
|
|
290
309
|
class TableComponent {
|
|
291
310
|
constructor(renderer) {
|
|
@@ -309,6 +328,8 @@ class TableComponent {
|
|
|
309
328
|
this.currentSort = null;
|
|
310
329
|
this.multiColumnSort = [];
|
|
311
330
|
this.sortChange = new EventEmitter();
|
|
331
|
+
this.headerAction = new EventEmitter();
|
|
332
|
+
this.selectAllCheckbox = false;
|
|
312
333
|
}
|
|
313
334
|
// Function to handle row click
|
|
314
335
|
selectRow(index) {
|
|
@@ -417,6 +438,12 @@ class TableComponent {
|
|
|
417
438
|
}
|
|
418
439
|
}
|
|
419
440
|
updateSelectedPage(pageNumber) {
|
|
441
|
+
// Guard clause to prevent out-of-range updates
|
|
442
|
+
if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
|
|
443
|
+
return;
|
|
444
|
+
if (this.config.colHeaderConfig?.some(col => col.type === 'checkbox')) {
|
|
445
|
+
this.selectAllCheckbox = false;
|
|
446
|
+
}
|
|
420
447
|
if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
|
|
421
448
|
return;
|
|
422
449
|
this.config.paginationConfig.selectedPage = pageNumber;
|
|
@@ -495,6 +522,35 @@ class TableComponent {
|
|
|
495
522
|
this.activeRowIndex = this.activeRowIndex.filter(index => index !== rowIndex);
|
|
496
523
|
}
|
|
497
524
|
}
|
|
525
|
+
isRowDisabled(row) {
|
|
526
|
+
// console.log("testestts",typeof this.config.rowConfig.disableRow)
|
|
527
|
+
return typeof this.config.rowConfig.disableRow === 'function'
|
|
528
|
+
? this.config.rowConfig.disableRow(row)
|
|
529
|
+
: false;
|
|
530
|
+
}
|
|
531
|
+
toggleCheckbox() {
|
|
532
|
+
this.selectAllCheckbox = !this.selectAllCheckbox;
|
|
533
|
+
// Find the checkbox column index (if any)
|
|
534
|
+
const checkboxColIndex = this.config.colHeaderConfig.findIndex(col => col.type === 'checkbox');
|
|
535
|
+
// Only update if checkbox column exists
|
|
536
|
+
if (checkboxColIndex !== -1) {
|
|
537
|
+
this.tableData = this.tableData.map((row) => {
|
|
538
|
+
const updatedRow = [...row];
|
|
539
|
+
updatedRow[checkboxColIndex] = this.selectAllCheckbox;
|
|
540
|
+
return updatedRow;
|
|
541
|
+
});
|
|
542
|
+
}
|
|
543
|
+
// console.log("Table Data:",this.tableData);
|
|
544
|
+
// this.tableData = this.tableData.map((cellData: any)=>{
|
|
545
|
+
// cellData[0] = this.selectAllCheckbox;
|
|
546
|
+
// return cellData;
|
|
547
|
+
// })
|
|
548
|
+
this.headerAction?.emit({
|
|
549
|
+
type: 'checkboxToggle',
|
|
550
|
+
payload: this.tableData
|
|
551
|
+
});
|
|
552
|
+
// console.log("Data:",data);
|
|
553
|
+
}
|
|
498
554
|
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
499
555
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
|
|
500
556
|
i0.ɵɵviewQuery(_c0$3, 5);
|
|
@@ -505,16 +561,16 @@ class TableComponent {
|
|
|
505
561
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
506
562
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
507
563
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
508
|
-
} }, 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", "
|
|
564
|
+
} }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange", headerAction: "headerAction" }, 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"], ["class", "checkbox-icon", 3, "click", 4, "ngIf"], ["appSortIcons", "", "class", "sort-icon", 3, "column", "activeSort", "activeSorts", "multiColumnSort", "sortChange", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], [1, "filter-icon", 3, "click"], ["id", "filter-active", 4, "ngIf"], ["fill", "none", "height", "10", "viewBox", "0 0 13 10", "width", "13", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z", "fill", "#181F33", "fill-rule", "evenodd"], ["id", "filter-active"], [1, "checkbox-icon", 3, "click"], [3, "checked"], ["appSortIcons", "", 1, "sort-icon", 3, "sortChange", "column", "activeSort", "activeSorts", "multiColumnSort"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper"], [1, "t-row", 3, "click", "ngClass", "ngStyle"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "click", "ngStyle", "ngClass"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", "ngClass", 4, "ngIf"], [3, "data", "actionItems", "actionType", "dropdownIcon", "style", "submenuAlign", "menuAlign", "isChecked", "ngClass", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "actionClick", "data", "actionItems", "actionType", "dropdownIcon", "submenuAlign", "menuAlign", "isChecked", "ngClass"], [1, "sub-row"], [3, "ngStyle"], [3, "config", "tableData"], ["id", "pagination-container"], ["id", "pagination-text"], ["id", "pages-container"], [1, "page", 3, "click"], ["fill", "none", "height", "10", "viewBox", "0 0 7 10", "width", "7", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z", "fill", "#181F33", "fill-rule", "evenodd"], [3, "click"], ["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) {
|
|
509
565
|
i0.ɵɵelementStart(0, "div", 3);
|
|
510
566
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
511
567
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
512
|
-
i0.ɵɵtemplate(5, TableComponent_div_5_Template,
|
|
568
|
+
i0.ɵɵtemplate(5, TableComponent_div_5_Template, 7, 10, "div", 7);
|
|
513
569
|
i0.ɵɵelementEnd();
|
|
514
570
|
i0.ɵɵelementStart(6, "div", 8);
|
|
515
|
-
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4,
|
|
571
|
+
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 11, "div", 9);
|
|
516
572
|
i0.ɵɵelementEnd()();
|
|
517
|
-
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11,
|
|
573
|
+
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 8, "div", 10);
|
|
518
574
|
i0.ɵɵelementEnd();
|
|
519
575
|
} if (rf & 2) {
|
|
520
576
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
|
|
@@ -530,11 +586,11 @@ class TableComponent {
|
|
|
530
586
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
531
587
|
i0.ɵɵadvance();
|
|
532
588
|
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));
|
|
533
|
-
} }, 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}"] }); }
|
|
589
|
+
} }, 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}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]{opacity:.4;pointer-events:none}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){opacity:1;pointer-events:auto}.row[_ngcontent-%COMP%]{transition:background-color .2s}.row[_ngcontent-%COMP%]:hover:not(.disabled-row), .row.selected[_ngcontent-%COMP%]:not(.disabled-row){background-color:#e6f5fd}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]{pointer-events:none;opacity:.4}.disabled-row[_ngcontent-%COMP%] .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions[_ngcontent-%COMP%]{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-arrow.disabled[_ngcontent-%COMP%], .page-number.disabled[_ngcontent-%COMP%]{pointer-events:none;opacity:.5;cursor:default}.page-number.selected[_ngcontent-%COMP%]{font-weight:700;text-decoration:underline}"] }); }
|
|
534
590
|
}
|
|
535
591
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
536
592
|
type: Component,
|
|
537
|
-
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; let rowIndex = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': activeRowIndex.includes(i) }\"\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 [actionPermissions]=\"config.actionPermissions?.[rowIndex]\"\n [actionType]=\"config.colConfig[i]?.actionType || 'inline'\"\n [dropdownIcon]=\"config.colConfig[i]?.dropdownIcon || ''\"\n [style]=\"getActionsCellStyle(config.colConfig[i]?.style)\"\n [submenuAlign]=\"config.colConfig[i]?.submenuAlign\"\n [menuAlign]=\"config.colConfig[i]?.menuAlign\"\n [isChecked]=\"col\" \n (actionClick)=\"onActionClick($event, rowIndex)\"\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 <!-- 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"] }]
|
|
593
|
+
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' && colHeader?.type !== 'checkbox'\" 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 <!-- {{colHeader?.type}} -->\n <span\n (click)=\"toggleCheckbox(); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type === 'checkbox'\"\n class=\"checkbox-icon\"\n >\n <!-- <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span> -->\n <mis-checkbox [checked]=\"selectAllCheckbox\"></mis-checkbox>\n </span>\n <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n [column]=\"colHeader\"\n [activeSort]=\"currentSort\"\n [activeSorts]=\"multiColumnSort\"\n [multiColumnSort]=\"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; let rowIndex = index\">\n <div\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': activeRowIndex.includes(i) }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n [class.disabled-row]=\"isRowDisabled(row)\"\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 [submenuAlign]=\"config.colConfig[i]?.submenuAlign\"\n [menuAlign]=\"config.colConfig[i]?.menuAlign\"\n [isChecked]=\"col\" \n (actionClick)=\"onActionClick($event, rowIndex)\"\n [ngClass]=\"{\n 'disable-actions': config.colConfig[i]?.actionType === 'checkbox' && isRowDisabled(row)\n }\"\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)=\"config.paginationConfig?.selectedPage > 1 && updateSelectedPage(config.paginationConfig?.selectedPage - 1)\" class=\"page\" [class.disabled]=\"config.paginationConfig?.selectedPage === 1\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n fill=\"#181F33\"\n fill-rule=\"evenodd\"\n />\n </svg>\n </span>\n <!-- Page numbers (only show if disablePageJumping is false) -->\n <ng-container *ngIf=\"!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 <span [class.disabled]=\"config.paginationConfig?.selectedPage === config.paginationConfig?.noOfPages\"\n (click)=\"config.paginationConfig?.selectedPage < config.paginationConfig?.noOfPages && updateSelectedPage(config.paginationConfig?.selectedPage + 1)\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n clip-rule=\"evenodd\"\n d=\"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}.disabled-row .t-col-container{opacity:.4;pointer-events:none}.disabled-row .t-col-container:has(mis-actions-cell){opacity:1;pointer-events:auto}.row{transition:background-color .2s}.row:hover:not(.disabled-row),.row.selected:not(.disabled-row){background-color:#e6f5fd}.disabled-row .t-col-container{pointer-events:none;opacity:.4}.disabled-row .t-col-container:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-arrow.disabled,.page-number.disabled{pointer-events:none;opacity:.5;cursor:default}.page-number.selected{font-weight:700;text-decoration:underline}\n"] }]
|
|
538
594
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
539
595
|
type: Output
|
|
540
596
|
}], filter: [{
|
|
@@ -565,6 +621,8 @@ class TableComponent {
|
|
|
565
621
|
args: ["table"]
|
|
566
622
|
}], sortChange: [{
|
|
567
623
|
type: Output
|
|
624
|
+
}], headerAction: [{
|
|
625
|
+
type: Output
|
|
568
626
|
}] }); })();
|
|
569
627
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent" }); })();
|
|
570
628
|
|
|
@@ -1109,73 +1167,75 @@ const _c0 = a0 => ({ "disabled": a0 });
|
|
|
1109
1167
|
function ActionsCellComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
|
|
1110
1168
|
i0.ɵɵelement(0, "img", 9);
|
|
1111
1169
|
} if (rf & 2) {
|
|
1112
|
-
const
|
|
1113
|
-
i0.ɵɵproperty("src",
|
|
1170
|
+
const item_r2 = i0.ɵɵnextContext().$implicit;
|
|
1171
|
+
i0.ɵɵproperty("src", item_r2.icon, i0.ɵɵsanitizeUrl)("alt", item_r2.label);
|
|
1114
1172
|
} }
|
|
1115
1173
|
function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1174
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
1116
1175
|
i0.ɵɵelementStart(0, "div", 7);
|
|
1176
|
+
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)); });
|
|
1117
1177
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 8);
|
|
1118
1178
|
i0.ɵɵelementEnd();
|
|
1119
1179
|
} if (rf & 2) {
|
|
1120
|
-
const
|
|
1121
|
-
const
|
|
1122
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0,
|
|
1180
|
+
const item_r2 = ctx.$implicit;
|
|
1181
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
1182
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0, ctx_r2.isDisabled(item_r2)));
|
|
1123
1183
|
i0.ɵɵadvance();
|
|
1124
|
-
i0.ɵɵproperty("ngIf",
|
|
1184
|
+
i0.ɵɵproperty("ngIf", ctx_r2.isSvgFile(item_r2.icon));
|
|
1125
1185
|
} }
|
|
1126
1186
|
function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1127
1187
|
i0.ɵɵelementStart(0, "div", 5);
|
|
1128
1188
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 4, "div", 6);
|
|
1129
1189
|
i0.ɵɵelementEnd();
|
|
1130
1190
|
} if (rf & 2) {
|
|
1131
|
-
const
|
|
1191
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1132
1192
|
i0.ɵɵadvance();
|
|
1133
|
-
i0.ɵɵproperty("ngForOf",
|
|
1193
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.actionItems)("ngForTrackBy", ctx_r2.trackByAction);
|
|
1134
1194
|
} }
|
|
1135
1195
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1136
1196
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1137
1197
|
i0.ɵɵelement(1, "img", 28);
|
|
1138
1198
|
i0.ɵɵelementEnd();
|
|
1139
1199
|
} if (rf & 2) {
|
|
1140
|
-
const
|
|
1200
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1141
1201
|
i0.ɵɵadvance();
|
|
1142
|
-
i0.ɵɵproperty("src",
|
|
1202
|
+
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1143
1203
|
} }
|
|
1144
1204
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1145
1205
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1146
1206
|
i0.ɵɵelement(1, "img", 28);
|
|
1147
1207
|
i0.ɵɵelementEnd();
|
|
1148
1208
|
} if (rf & 2) {
|
|
1149
|
-
const
|
|
1209
|
+
const child_r8 = i0.ɵɵnextContext().$implicit;
|
|
1150
1210
|
i0.ɵɵadvance();
|
|
1151
|
-
i0.ɵɵproperty("src",
|
|
1211
|
+
i0.ɵɵproperty("src", child_r8.icon, i0.ɵɵsanitizeUrl);
|
|
1152
1212
|
} }
|
|
1153
1213
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1154
|
-
const
|
|
1214
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
1155
1215
|
i0.ɵɵelementStart(0, "div", 19);
|
|
1156
|
-
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template_div_click_0_listener($event) { const
|
|
1216
|
+
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template_div_click_0_listener($event) { const child_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(child_r8, $event)); });
|
|
1157
1217
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 21);
|
|
1158
1218
|
i0.ɵɵelementStart(2, "span", 22);
|
|
1159
1219
|
i0.ɵɵtext(3);
|
|
1160
1220
|
i0.ɵɵelementEnd()();
|
|
1161
1221
|
} if (rf & 2) {
|
|
1162
|
-
const
|
|
1163
|
-
const
|
|
1164
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0,
|
|
1222
|
+
const child_r8 = ctx.$implicit;
|
|
1223
|
+
const ctx_r2 = i0.ɵɵnextContext(6);
|
|
1224
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(child_r8)));
|
|
1165
1225
|
i0.ɵɵadvance();
|
|
1166
|
-
i0.ɵɵproperty("ngIf",
|
|
1226
|
+
i0.ɵɵproperty("ngIf", child_r8.icon && ctx_r2.isSvgFile(child_r8.icon));
|
|
1167
1227
|
i0.ɵɵadvance(2);
|
|
1168
|
-
i0.ɵɵtextInterpolate(
|
|
1228
|
+
i0.ɵɵtextInterpolate(child_r8.label);
|
|
1169
1229
|
} }
|
|
1170
1230
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
1171
1231
|
i0.ɵɵelementStart(0, "div", 29);
|
|
1172
1232
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 18);
|
|
1173
1233
|
i0.ɵɵelementEnd();
|
|
1174
1234
|
} if (rf & 2) {
|
|
1175
|
-
const
|
|
1176
|
-
i0.ɵɵproperty("ngClass",
|
|
1235
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1236
|
+
i0.ɵɵproperty("ngClass", item_r6.submenuAlign);
|
|
1177
1237
|
i0.ɵɵadvance();
|
|
1178
|
-
i0.ɵɵproperty("ngForOf",
|
|
1238
|
+
i0.ɵɵproperty("ngForOf", item_r6.children);
|
|
1179
1239
|
} }
|
|
1180
1240
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
1181
1241
|
i0.ɵɵelementContainerStart(0);
|
|
@@ -1191,23 +1251,23 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx)
|
|
|
1191
1251
|
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div", 26);
|
|
1192
1252
|
i0.ɵɵelementContainerEnd();
|
|
1193
1253
|
} if (rf & 2) {
|
|
1194
|
-
const
|
|
1195
|
-
const
|
|
1254
|
+
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1255
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1196
1256
|
i0.ɵɵadvance();
|
|
1197
|
-
i0.ɵɵproperty("ngIf",
|
|
1257
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1198
1258
|
i0.ɵɵadvance(2);
|
|
1199
|
-
i0.ɵɵtextInterpolate(
|
|
1259
|
+
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1200
1260
|
i0.ɵɵadvance(4);
|
|
1201
|
-
i0.ɵɵproperty("ngIf",
|
|
1261
|
+
i0.ɵɵproperty("ngIf", item_r6.showSubmenu);
|
|
1202
1262
|
} }
|
|
1203
1263
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
|
|
1204
1264
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1205
1265
|
i0.ɵɵelement(1, "img", 28);
|
|
1206
1266
|
i0.ɵɵelementEnd();
|
|
1207
1267
|
} if (rf & 2) {
|
|
1208
|
-
const
|
|
1268
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1209
1269
|
i0.ɵɵadvance();
|
|
1210
|
-
i0.ɵɵproperty("src",
|
|
1270
|
+
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1211
1271
|
} }
|
|
1212
1272
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
1213
1273
|
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 21);
|
|
@@ -1215,40 +1275,40 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx)
|
|
|
1215
1275
|
i0.ɵɵtext(2);
|
|
1216
1276
|
i0.ɵɵelementEnd();
|
|
1217
1277
|
} if (rf & 2) {
|
|
1218
|
-
const
|
|
1219
|
-
const
|
|
1220
|
-
i0.ɵɵproperty("ngIf",
|
|
1278
|
+
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1279
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1280
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1221
1281
|
i0.ɵɵadvance(2);
|
|
1222
|
-
i0.ɵɵtextInterpolate(
|
|
1282
|
+
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1223
1283
|
} }
|
|
1224
1284
|
function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1225
|
-
const
|
|
1285
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
1226
1286
|
i0.ɵɵelementStart(0, "div", 19);
|
|
1227
|
-
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_Template_div_click_0_listener($event) { const
|
|
1287
|
+
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)); });
|
|
1228
1288
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template, 8, 3, "ng-container", 20)(2, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template, 3, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
1229
1289
|
i0.ɵɵelementEnd();
|
|
1230
1290
|
} if (rf & 2) {
|
|
1231
|
-
const
|
|
1232
|
-
const
|
|
1233
|
-
const
|
|
1234
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0,
|
|
1291
|
+
const item_r6 = ctx.$implicit;
|
|
1292
|
+
const noChildren_r9 = i0.ɵɵreference(3);
|
|
1293
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1294
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(item_r6)));
|
|
1235
1295
|
i0.ɵɵadvance();
|
|
1236
|
-
i0.ɵɵproperty("ngIf",
|
|
1296
|
+
i0.ɵɵproperty("ngIf", item_r6.children == null ? null : item_r6.children.length)("ngIfElse", noChildren_r9);
|
|
1237
1297
|
} }
|
|
1238
1298
|
function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
1239
1299
|
i0.ɵɵelementStart(0, "div", 17);
|
|
1240
1300
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div", 18);
|
|
1241
1301
|
i0.ɵɵelementEnd();
|
|
1242
1302
|
} if (rf & 2) {
|
|
1243
|
-
const
|
|
1244
|
-
i0.ɵɵproperty("ngClass",
|
|
1303
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
1304
|
+
i0.ɵɵproperty("ngClass", ctx_r2.menuAlign);
|
|
1245
1305
|
i0.ɵɵadvance();
|
|
1246
|
-
i0.ɵɵproperty("ngForOf",
|
|
1306
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.actionItems);
|
|
1247
1307
|
} }
|
|
1248
1308
|
function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1249
|
-
const
|
|
1309
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
1250
1310
|
i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
|
|
1251
|
-
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
1311
|
+
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)); });
|
|
1252
1312
|
i0.ɵɵnamespaceSVG();
|
|
1253
1313
|
i0.ɵɵelementStart(2, "svg", 12);
|
|
1254
1314
|
i0.ɵɵelement(3, "circle", 13)(4, "circle", 14)(5, "circle", 15);
|
|
@@ -1256,19 +1316,19 @@ function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
1256
1316
|
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div", 16);
|
|
1257
1317
|
i0.ɵɵelementEnd();
|
|
1258
1318
|
} if (rf & 2) {
|
|
1259
|
-
const
|
|
1319
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1260
1320
|
i0.ɵɵadvance(6);
|
|
1261
|
-
i0.ɵɵproperty("ngIf",
|
|
1321
|
+
i0.ɵɵproperty("ngIf", ctx_r2.isDropdownOpen);
|
|
1262
1322
|
} }
|
|
1263
1323
|
function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
1264
|
-
const
|
|
1324
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
1265
1325
|
i0.ɵɵelementStart(0, "div", 30)(1, "mis-checkbox", 31);
|
|
1266
|
-
i0.ɵɵlistener("valueChange", function ActionsCellComponent_div_3_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(
|
|
1326
|
+
i0.ɵɵlistener("valueChange", function ActionsCellComponent_div_3_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCheckboxChange($event)); });
|
|
1267
1327
|
i0.ɵɵelementEnd()();
|
|
1268
1328
|
} if (rf & 2) {
|
|
1269
|
-
const
|
|
1329
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1270
1330
|
i0.ɵɵadvance();
|
|
1271
|
-
i0.ɵɵproperty("checked",
|
|
1331
|
+
i0.ɵɵproperty("checked", ctx_r2.isChecked);
|
|
1272
1332
|
} }
|
|
1273
1333
|
class ActionsCellComponent {
|
|
1274
1334
|
constructor() {
|
|
@@ -1307,9 +1367,8 @@ class ActionsCellComponent {
|
|
|
1307
1367
|
onActionClick(item, event) {
|
|
1308
1368
|
event.stopPropagation();
|
|
1309
1369
|
// Check permissions before executing action
|
|
1310
|
-
if (this.
|
|
1370
|
+
if (this.isDisabled(item))
|
|
1311
1371
|
return;
|
|
1312
|
-
}
|
|
1313
1372
|
// Execute action only if permitted
|
|
1314
1373
|
if (item.action) {
|
|
1315
1374
|
item.action(this.data);
|
|
@@ -1336,15 +1395,11 @@ class ActionsCellComponent {
|
|
|
1336
1395
|
this.actionItems.forEach((item) => item.showSubmenu = false);
|
|
1337
1396
|
}
|
|
1338
1397
|
onDropdownItemClick(item, event) {
|
|
1398
|
+
console.log("1:", event, item);
|
|
1339
1399
|
event.stopPropagation();
|
|
1340
|
-
|
|
1341
|
-
if (this.actionPermissions && this.actionPermissions.hasOwnProperty(item.value) && this.actionPermissions[item.value] === false) {
|
|
1342
|
-
console.log('Action blocked: insufficient permissions');
|
|
1343
|
-
return; // Don't close dropdown or execute action
|
|
1344
|
-
}
|
|
1345
|
-
if (item.disabled)
|
|
1400
|
+
if (this.isDisabled(item))
|
|
1346
1401
|
return;
|
|
1347
|
-
if (item.children) {
|
|
1402
|
+
if (item.children.length) {
|
|
1348
1403
|
// Toggle submenu
|
|
1349
1404
|
item.showSubmenu = !item.showSubmenu;
|
|
1350
1405
|
// Optionally close other submenus
|
|
@@ -1362,19 +1417,21 @@ class ActionsCellComponent {
|
|
|
1362
1417
|
}
|
|
1363
1418
|
}
|
|
1364
1419
|
onCheckboxChange(event) {
|
|
1365
|
-
// Check permissions before allowing change
|
|
1366
|
-
if (this.actionPermissions && this.actionPermissions.hasOwnProperty('checkbox') && this.actionPermissions['checkbox'] === false) {
|
|
1367
|
-
return; // Don't allow change if disabled
|
|
1368
|
-
}
|
|
1369
1420
|
this.isChecked = event.value;
|
|
1370
1421
|
this.actionClick.emit({ isChecked: this.isChecked, data: this.data });
|
|
1371
1422
|
}
|
|
1423
|
+
isDisabled(item) {
|
|
1424
|
+
if (typeof item.disable === 'function') {
|
|
1425
|
+
return item.disable(this.data);
|
|
1426
|
+
}
|
|
1427
|
+
return false;
|
|
1428
|
+
}
|
|
1372
1429
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1373
1430
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1374
1431
|
i0.ɵɵlistener("click", function ActionsCellComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
|
|
1375
|
-
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", menuAlign: "menuAlign",
|
|
1432
|
+
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", menuAlign: "menuAlign", isChecked: "isChecked", style: "style" }, outputs: { checkboxChange: "checkboxChange", actionClick: "actionClick" }, decls: 4, vars: 4, consts: [["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], ["class", "checkbox-actions", 4, "ngIf"], [1, "inline-actions"], ["class", "action-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "click", "ngClass"], ["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", 3, "ngClass", 4, "ngIf"], [1, "dropdown-menu", 3, "ngClass"], ["class", "dropdown-menu-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "dropdown-menu-item", 3, "click", "ngClass"], [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"], [1, "checkbox-actions"], [3, "valueChange", "checked"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1376
1433
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1377
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3)(3, ActionsCellComponent_div_3_Template, 2,
|
|
1434
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3)(3, ActionsCellComponent_div_3_Template, 2, 1, "div", 4);
|
|
1378
1435
|
i0.ɵɵelementEnd();
|
|
1379
1436
|
} if (rf & 2) {
|
|
1380
1437
|
i0.ɵɵproperty("ngStyle", ctx.containerStyle);
|
|
@@ -1388,7 +1445,7 @@ class ActionsCellComponent {
|
|
|
1388
1445
|
}
|
|
1389
1446
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1390
1447
|
type: Component,
|
|
1391
|
-
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':
|
|
1448
|
+
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': isDisabled(item) }\" (click)=\"onActionClick(item, $event)\"> \n <img *ngIf=\"isSvgFile(item.icon)\" [src]=\"item.icon\" [alt]=\"item.label\" class=\"action-icon-svg\" />\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\" \n *ngIf=\"isDropdownOpen\" \n [ngClass]=\"menuAlign\"\n >\n <div class=\"dropdown-menu-item\" *ngFor=\"let item of actionItems\" \n (click)=\"onDropdownItemClick(item, $event)\" [ngClass]=\"{ 'disabled': isDisabled(item)}\">\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]=\"item.submenuAlign\"\n *ngIf=\"item.showSubmenu\">\n <div class=\"dropdown-menu-item\" *ngFor=\"let child of item.children\"\n [ngClass]=\"{ 'disabled': isDisabled(child) }\"\n (click)=\"onDropdownItemClick(child, $event)\">\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\n <!-- Checkbox Actions -->\n <div *ngIf=\"actionType === 'checkbox'\" class=\"checkbox-actions\">\n <mis-checkbox \n [checked]=\"isChecked\"\n (valueChange)=\"onCheckboxChange($event)\">\n </mis-checkbox>\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:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.left{right:0!important;left:auto!important}.dropdown-menu.right{left:0!important;right:auto!important}.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:132px;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;margin-right:4px}.submenu-arrow{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon{display:flex;justify-content:center;align-items:center}.dropdown-menu-item.disabled{color:#181f33;filter:grayscale(100%) opacity(.3);cursor:not-allowed}\n"] }]
|
|
1392
1449
|
}], null, { data: [{
|
|
1393
1450
|
type: Input
|
|
1394
1451
|
}], actionItems: [{
|
|
@@ -1401,8 +1458,6 @@ class ActionsCellComponent {
|
|
|
1401
1458
|
type: Input
|
|
1402
1459
|
}], menuAlign: [{
|
|
1403
1460
|
type: Input
|
|
1404
|
-
}], actionPermissions: [{
|
|
1405
|
-
type: Input
|
|
1406
1461
|
}], isChecked: [{
|
|
1407
1462
|
type: Input
|
|
1408
1463
|
}], checkboxChange: [{
|
|
@@ -1458,7 +1513,7 @@ class TableModule {
|
|
|
1458
1513
|
CustomTableCellDirective,
|
|
1459
1514
|
SortIconsDirective,
|
|
1460
1515
|
ActionsCellComponent] }); })();
|
|
1461
|
-
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent,
|
|
1516
|
+
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent, SubTableComponent,
|
|
1462
1517
|
TableFilterComponent,
|
|
1463
1518
|
CustomTableCellDirective,
|
|
1464
1519
|
SortIconsDirective,
|