mis-crystal-design-system 18.0.13-test-12 → 18.0.13-test-13
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 +154 -103
- package/esm2022/table/table.module.mjs +3 -2
- package/fesm2022/mis-crystal-design-system-table.mjs +220 -172
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +24 -24
- 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,29 +277,31 @@ 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));
|
|
289
306
|
} }
|
|
290
307
|
class TableComponent {
|
|
@@ -309,6 +326,8 @@ class TableComponent {
|
|
|
309
326
|
this.currentSort = null;
|
|
310
327
|
this.multiColumnSort = [];
|
|
311
328
|
this.sortChange = new EventEmitter();
|
|
329
|
+
this.headerAction = new EventEmitter();
|
|
330
|
+
this.selectAllCheckbox = false;
|
|
312
331
|
}
|
|
313
332
|
// Function to handle row click
|
|
314
333
|
selectRow(index) {
|
|
@@ -417,6 +436,7 @@ class TableComponent {
|
|
|
417
436
|
}
|
|
418
437
|
}
|
|
419
438
|
updateSelectedPage(pageNumber) {
|
|
439
|
+
this.selectAllCheckbox = false;
|
|
420
440
|
if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
|
|
421
441
|
return;
|
|
422
442
|
this.config.paginationConfig.selectedPage = pageNumber;
|
|
@@ -495,6 +515,35 @@ class TableComponent {
|
|
|
495
515
|
this.activeRowIndex = this.activeRowIndex.filter(index => index !== rowIndex);
|
|
496
516
|
}
|
|
497
517
|
}
|
|
518
|
+
isRowDisabled(row) {
|
|
519
|
+
// console.log("testestts",typeof this.config.rowConfig.disableRow)
|
|
520
|
+
return typeof this.config.rowConfig.disableRow === 'function'
|
|
521
|
+
? this.config.rowConfig.disableRow(row)
|
|
522
|
+
: false;
|
|
523
|
+
}
|
|
524
|
+
toggleCheckbox() {
|
|
525
|
+
this.selectAllCheckbox = !this.selectAllCheckbox;
|
|
526
|
+
// Find the checkbox column index (if any)
|
|
527
|
+
const checkboxColIndex = this.config.colHeaderConfig.findIndex(col => col.type === 'checkbox');
|
|
528
|
+
// Only update if checkbox column exists
|
|
529
|
+
if (checkboxColIndex !== -1) {
|
|
530
|
+
this.tableData = this.tableData.map((row) => {
|
|
531
|
+
const updatedRow = [...row];
|
|
532
|
+
updatedRow[checkboxColIndex] = this.selectAllCheckbox;
|
|
533
|
+
return updatedRow;
|
|
534
|
+
});
|
|
535
|
+
}
|
|
536
|
+
// console.log("Table Data:",this.tableData);
|
|
537
|
+
// this.tableData = this.tableData.map((cellData: any)=>{
|
|
538
|
+
// cellData[0] = this.selectAllCheckbox;
|
|
539
|
+
// return cellData;
|
|
540
|
+
// })
|
|
541
|
+
this.headerAction?.emit({
|
|
542
|
+
type: 'checkboxToggle',
|
|
543
|
+
payload: this.tableData
|
|
544
|
+
});
|
|
545
|
+
// console.log("Data:",data);
|
|
546
|
+
}
|
|
498
547
|
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
499
548
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
|
|
500
549
|
i0.ɵɵviewQuery(_c0$3, 5);
|
|
@@ -505,16 +554,16 @@ class TableComponent {
|
|
|
505
554
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
506
555
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
507
556
|
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", "
|
|
557
|
+
} }, 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"], ["class.disabled]", "config.paginationConfig?.selectedPage === config.paginationConfig?.noOfPages", 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
558
|
i0.ɵɵelementStart(0, "div", 3);
|
|
510
559
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
511
560
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
512
|
-
i0.ɵɵtemplate(5, TableComponent_div_5_Template,
|
|
561
|
+
i0.ɵɵtemplate(5, TableComponent_div_5_Template, 7, 10, "div", 7);
|
|
513
562
|
i0.ɵɵelementEnd();
|
|
514
563
|
i0.ɵɵelementStart(6, "div", 8);
|
|
515
|
-
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4,
|
|
564
|
+
i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 11, "div", 9);
|
|
516
565
|
i0.ɵɵelementEnd()();
|
|
517
|
-
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11,
|
|
566
|
+
i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 6, "div", 10);
|
|
518
567
|
i0.ɵɵelementEnd();
|
|
519
568
|
} if (rf & 2) {
|
|
520
569
|
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
|
|
@@ -530,11 +579,11 @@ class TableComponent {
|
|
|
530
579
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
531
580
|
i0.ɵɵadvance();
|
|
532
581
|
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}"] }); }
|
|
582
|
+
} }, 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
583
|
}
|
|
535
584
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
536
585
|
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"] }]
|
|
586
|
+
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
587
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
539
588
|
type: Output
|
|
540
589
|
}], filter: [{
|
|
@@ -565,6 +614,8 @@ class TableComponent {
|
|
|
565
614
|
args: ["table"]
|
|
566
615
|
}], sortChange: [{
|
|
567
616
|
type: Output
|
|
617
|
+
}], headerAction: [{
|
|
618
|
+
type: Output
|
|
568
619
|
}] }); })();
|
|
569
620
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent" }); })();
|
|
570
621
|
|
|
@@ -1109,73 +1160,75 @@ const _c0 = a0 => ({ "disabled": a0 });
|
|
|
1109
1160
|
function ActionsCellComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
|
|
1110
1161
|
i0.ɵɵelement(0, "img", 9);
|
|
1111
1162
|
} if (rf & 2) {
|
|
1112
|
-
const
|
|
1113
|
-
i0.ɵɵproperty("src",
|
|
1163
|
+
const item_r2 = i0.ɵɵnextContext().$implicit;
|
|
1164
|
+
i0.ɵɵproperty("src", item_r2.icon, i0.ɵɵsanitizeUrl)("alt", item_r2.label);
|
|
1114
1165
|
} }
|
|
1115
1166
|
function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1167
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
1116
1168
|
i0.ɵɵelementStart(0, "div", 7);
|
|
1169
|
+
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
1170
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 8);
|
|
1118
1171
|
i0.ɵɵelementEnd();
|
|
1119
1172
|
} if (rf & 2) {
|
|
1120
|
-
const
|
|
1121
|
-
const
|
|
1122
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0,
|
|
1173
|
+
const item_r2 = ctx.$implicit;
|
|
1174
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
1175
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0, ctx_r2.isDisabled(item_r2)));
|
|
1123
1176
|
i0.ɵɵadvance();
|
|
1124
|
-
i0.ɵɵproperty("ngIf",
|
|
1177
|
+
i0.ɵɵproperty("ngIf", ctx_r2.isSvgFile(item_r2.icon));
|
|
1125
1178
|
} }
|
|
1126
1179
|
function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1127
1180
|
i0.ɵɵelementStart(0, "div", 5);
|
|
1128
1181
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 4, "div", 6);
|
|
1129
1182
|
i0.ɵɵelementEnd();
|
|
1130
1183
|
} if (rf & 2) {
|
|
1131
|
-
const
|
|
1184
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1132
1185
|
i0.ɵɵadvance();
|
|
1133
|
-
i0.ɵɵproperty("ngForOf",
|
|
1186
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.actionItems)("ngForTrackBy", ctx_r2.trackByAction);
|
|
1134
1187
|
} }
|
|
1135
1188
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1136
1189
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1137
1190
|
i0.ɵɵelement(1, "img", 28);
|
|
1138
1191
|
i0.ɵɵelementEnd();
|
|
1139
1192
|
} if (rf & 2) {
|
|
1140
|
-
const
|
|
1193
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1141
1194
|
i0.ɵɵadvance();
|
|
1142
|
-
i0.ɵɵproperty("src",
|
|
1195
|
+
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1143
1196
|
} }
|
|
1144
1197
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1145
1198
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1146
1199
|
i0.ɵɵelement(1, "img", 28);
|
|
1147
1200
|
i0.ɵɵelementEnd();
|
|
1148
1201
|
} if (rf & 2) {
|
|
1149
|
-
const
|
|
1202
|
+
const child_r8 = i0.ɵɵnextContext().$implicit;
|
|
1150
1203
|
i0.ɵɵadvance();
|
|
1151
|
-
i0.ɵɵproperty("src",
|
|
1204
|
+
i0.ɵɵproperty("src", child_r8.icon, i0.ɵɵsanitizeUrl);
|
|
1152
1205
|
} }
|
|
1153
1206
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1154
|
-
const
|
|
1207
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
1155
1208
|
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
|
|
1209
|
+
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
1210
|
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
1211
|
i0.ɵɵelementStart(2, "span", 22);
|
|
1159
1212
|
i0.ɵɵtext(3);
|
|
1160
1213
|
i0.ɵɵelementEnd()();
|
|
1161
1214
|
} if (rf & 2) {
|
|
1162
|
-
const
|
|
1163
|
-
const
|
|
1164
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0,
|
|
1215
|
+
const child_r8 = ctx.$implicit;
|
|
1216
|
+
const ctx_r2 = i0.ɵɵnextContext(6);
|
|
1217
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(child_r8)));
|
|
1165
1218
|
i0.ɵɵadvance();
|
|
1166
|
-
i0.ɵɵproperty("ngIf",
|
|
1219
|
+
i0.ɵɵproperty("ngIf", child_r8.icon && ctx_r2.isSvgFile(child_r8.icon));
|
|
1167
1220
|
i0.ɵɵadvance(2);
|
|
1168
|
-
i0.ɵɵtextInterpolate(
|
|
1221
|
+
i0.ɵɵtextInterpolate(child_r8.label);
|
|
1169
1222
|
} }
|
|
1170
1223
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
1171
1224
|
i0.ɵɵelementStart(0, "div", 29);
|
|
1172
1225
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 18);
|
|
1173
1226
|
i0.ɵɵelementEnd();
|
|
1174
1227
|
} if (rf & 2) {
|
|
1175
|
-
const
|
|
1176
|
-
i0.ɵɵproperty("ngClass",
|
|
1228
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1229
|
+
i0.ɵɵproperty("ngClass", item_r6.submenuAlign);
|
|
1177
1230
|
i0.ɵɵadvance();
|
|
1178
|
-
i0.ɵɵproperty("ngForOf",
|
|
1231
|
+
i0.ɵɵproperty("ngForOf", item_r6.children);
|
|
1179
1232
|
} }
|
|
1180
1233
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
1181
1234
|
i0.ɵɵelementContainerStart(0);
|
|
@@ -1191,23 +1244,23 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx)
|
|
|
1191
1244
|
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div", 26);
|
|
1192
1245
|
i0.ɵɵelementContainerEnd();
|
|
1193
1246
|
} if (rf & 2) {
|
|
1194
|
-
const
|
|
1195
|
-
const
|
|
1247
|
+
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1248
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1196
1249
|
i0.ɵɵadvance();
|
|
1197
|
-
i0.ɵɵproperty("ngIf",
|
|
1250
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1198
1251
|
i0.ɵɵadvance(2);
|
|
1199
|
-
i0.ɵɵtextInterpolate(
|
|
1252
|
+
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1200
1253
|
i0.ɵɵadvance(4);
|
|
1201
|
-
i0.ɵɵproperty("ngIf",
|
|
1254
|
+
i0.ɵɵproperty("ngIf", item_r6.showSubmenu);
|
|
1202
1255
|
} }
|
|
1203
1256
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
|
|
1204
1257
|
i0.ɵɵelementStart(0, "span", 27);
|
|
1205
1258
|
i0.ɵɵelement(1, "img", 28);
|
|
1206
1259
|
i0.ɵɵelementEnd();
|
|
1207
1260
|
} if (rf & 2) {
|
|
1208
|
-
const
|
|
1261
|
+
const item_r6 = i0.ɵɵnextContext(2).$implicit;
|
|
1209
1262
|
i0.ɵɵadvance();
|
|
1210
|
-
i0.ɵɵproperty("src",
|
|
1263
|
+
i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
|
|
1211
1264
|
} }
|
|
1212
1265
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
1213
1266
|
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 21);
|
|
@@ -1215,40 +1268,40 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx)
|
|
|
1215
1268
|
i0.ɵɵtext(2);
|
|
1216
1269
|
i0.ɵɵelementEnd();
|
|
1217
1270
|
} if (rf & 2) {
|
|
1218
|
-
const
|
|
1219
|
-
const
|
|
1220
|
-
i0.ɵɵproperty("ngIf",
|
|
1271
|
+
const item_r6 = i0.ɵɵnextContext().$implicit;
|
|
1272
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1273
|
+
i0.ɵɵproperty("ngIf", item_r6.icon && ctx_r2.isSvgFile(item_r6.icon));
|
|
1221
1274
|
i0.ɵɵadvance(2);
|
|
1222
|
-
i0.ɵɵtextInterpolate(
|
|
1275
|
+
i0.ɵɵtextInterpolate(item_r6.label);
|
|
1223
1276
|
} }
|
|
1224
1277
|
function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1225
|
-
const
|
|
1278
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
1226
1279
|
i0.ɵɵelementStart(0, "div", 19);
|
|
1227
|
-
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_Template_div_click_0_listener($event) { const
|
|
1280
|
+
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
1281
|
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
1282
|
i0.ɵɵelementEnd();
|
|
1230
1283
|
} if (rf & 2) {
|
|
1231
|
-
const
|
|
1232
|
-
const
|
|
1233
|
-
const
|
|
1234
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0,
|
|
1284
|
+
const item_r6 = ctx.$implicit;
|
|
1285
|
+
const noChildren_r9 = i0.ɵɵreference(3);
|
|
1286
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
1287
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(item_r6)));
|
|
1235
1288
|
i0.ɵɵadvance();
|
|
1236
|
-
i0.ɵɵproperty("ngIf",
|
|
1289
|
+
i0.ɵɵproperty("ngIf", item_r6.children == null ? null : item_r6.children.length)("ngIfElse", noChildren_r9);
|
|
1237
1290
|
} }
|
|
1238
1291
|
function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
1239
1292
|
i0.ɵɵelementStart(0, "div", 17);
|
|
1240
1293
|
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div", 18);
|
|
1241
1294
|
i0.ɵɵelementEnd();
|
|
1242
1295
|
} if (rf & 2) {
|
|
1243
|
-
const
|
|
1244
|
-
i0.ɵɵproperty("ngClass",
|
|
1296
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
1297
|
+
i0.ɵɵproperty("ngClass", ctx_r2.menuAlign);
|
|
1245
1298
|
i0.ɵɵadvance();
|
|
1246
|
-
i0.ɵɵproperty("ngForOf",
|
|
1299
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.actionItems);
|
|
1247
1300
|
} }
|
|
1248
1301
|
function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1249
|
-
const
|
|
1302
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
1250
1303
|
i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
|
|
1251
|
-
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
1304
|
+
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
1305
|
i0.ɵɵnamespaceSVG();
|
|
1253
1306
|
i0.ɵɵelementStart(2, "svg", 12);
|
|
1254
1307
|
i0.ɵɵelement(3, "circle", 13)(4, "circle", 14)(5, "circle", 15);
|
|
@@ -1256,19 +1309,19 @@ function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
1256
1309
|
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div", 16);
|
|
1257
1310
|
i0.ɵɵelementEnd();
|
|
1258
1311
|
} if (rf & 2) {
|
|
1259
|
-
const
|
|
1312
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1260
1313
|
i0.ɵɵadvance(6);
|
|
1261
|
-
i0.ɵɵproperty("ngIf",
|
|
1314
|
+
i0.ɵɵproperty("ngIf", ctx_r2.isDropdownOpen);
|
|
1262
1315
|
} }
|
|
1263
1316
|
function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
1264
|
-
const
|
|
1317
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
1265
1318
|
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(
|
|
1319
|
+
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
1320
|
i0.ɵɵelementEnd()();
|
|
1268
1321
|
} if (rf & 2) {
|
|
1269
|
-
const
|
|
1322
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
1270
1323
|
i0.ɵɵadvance();
|
|
1271
|
-
i0.ɵɵproperty("checked",
|
|
1324
|
+
i0.ɵɵproperty("checked", ctx_r2.isChecked);
|
|
1272
1325
|
} }
|
|
1273
1326
|
class ActionsCellComponent {
|
|
1274
1327
|
constructor() {
|
|
@@ -1307,9 +1360,8 @@ class ActionsCellComponent {
|
|
|
1307
1360
|
onActionClick(item, event) {
|
|
1308
1361
|
event.stopPropagation();
|
|
1309
1362
|
// Check permissions before executing action
|
|
1310
|
-
if (this.
|
|
1363
|
+
if (this.isDisabled(item))
|
|
1311
1364
|
return;
|
|
1312
|
-
}
|
|
1313
1365
|
// Execute action only if permitted
|
|
1314
1366
|
if (item.action) {
|
|
1315
1367
|
item.action(this.data);
|
|
@@ -1336,15 +1388,11 @@ class ActionsCellComponent {
|
|
|
1336
1388
|
this.actionItems.forEach((item) => item.showSubmenu = false);
|
|
1337
1389
|
}
|
|
1338
1390
|
onDropdownItemClick(item, event) {
|
|
1391
|
+
console.log("1:", event, item);
|
|
1339
1392
|
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)
|
|
1393
|
+
if (this.isDisabled(item))
|
|
1346
1394
|
return;
|
|
1347
|
-
if (item.children) {
|
|
1395
|
+
if (item.children.length) {
|
|
1348
1396
|
// Toggle submenu
|
|
1349
1397
|
item.showSubmenu = !item.showSubmenu;
|
|
1350
1398
|
// Optionally close other submenus
|
|
@@ -1362,19 +1410,21 @@ class ActionsCellComponent {
|
|
|
1362
1410
|
}
|
|
1363
1411
|
}
|
|
1364
1412
|
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
1413
|
this.isChecked = event.value;
|
|
1370
1414
|
this.actionClick.emit({ isChecked: this.isChecked, data: this.data });
|
|
1371
1415
|
}
|
|
1416
|
+
isDisabled(item) {
|
|
1417
|
+
if (typeof item.disable === 'function') {
|
|
1418
|
+
return item.disable(this.data);
|
|
1419
|
+
}
|
|
1420
|
+
return false;
|
|
1421
|
+
}
|
|
1372
1422
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1373
1423
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1374
1424
|
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",
|
|
1425
|
+
} }, 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
1426
|
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,
|
|
1427
|
+
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
1428
|
i0.ɵɵelementEnd();
|
|
1379
1429
|
} if (rf & 2) {
|
|
1380
1430
|
i0.ɵɵproperty("ngStyle", ctx.containerStyle);
|
|
@@ -1388,7 +1438,7 @@ class ActionsCellComponent {
|
|
|
1388
1438
|
}
|
|
1389
1439
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1390
1440
|
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':
|
|
1441
|
+
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
1442
|
}], null, { data: [{
|
|
1393
1443
|
type: Input
|
|
1394
1444
|
}], actionItems: [{
|
|
@@ -1401,8 +1451,6 @@ class ActionsCellComponent {
|
|
|
1401
1451
|
type: Input
|
|
1402
1452
|
}], menuAlign: [{
|
|
1403
1453
|
type: Input
|
|
1404
|
-
}], actionPermissions: [{
|
|
1405
|
-
type: Input
|
|
1406
1454
|
}], isChecked: [{
|
|
1407
1455
|
type: Input
|
|
1408
1456
|
}], checkboxChange: [{
|
|
@@ -1458,7 +1506,7 @@ class TableModule {
|
|
|
1458
1506
|
CustomTableCellDirective,
|
|
1459
1507
|
SortIconsDirective,
|
|
1460
1508
|
ActionsCellComponent] }); })();
|
|
1461
|
-
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent,
|
|
1509
|
+
i0.ɵɵsetComponentScope(TableComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent, SubTableComponent,
|
|
1462
1510
|
TableFilterComponent,
|
|
1463
1511
|
CustomTableCellDirective,
|
|
1464
1512
|
SortIconsDirective,
|