mis-crystal-design-system 18.0.13-test-9 → 18.0.13-test-11
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/radio-button/radio-button.component.mjs +57 -27
- package/esm2022/table/actions-cell/actions-cell.component.mjs +64 -37
- package/esm2022/table/table.component.mjs +39 -24
- package/esm2022/toast/toast.component.mjs +75 -14
- package/esm2022/toast/toast.data.service.mjs +1 -1
- package/esm2022/toast/toast.interface.mjs +2 -0
- package/esm2022/toast/toast.service.mjs +14 -7
- package/fesm2022/mis-crystal-design-system-radio-button.mjs +56 -26
- package/fesm2022/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-table.mjs +100 -59
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-toast.mjs +87 -19
- package/fesm2022/mis-crystal-design-system-toast.mjs.map +1 -1
- package/package.json +13 -13
- package/radio-button/radio-button.component.d.ts +12 -18
- package/table/actions-cell/actions-cell.component.d.ts +6 -2
- package/table/filter/filter.component.d.ts +1 -1
- package/table/table.component.d.ts +4 -2
- package/toast/toast.component.d.ts +17 -1
- package/toast/toast.data.service.d.ts +3 -2
- package/toast/toast.interface.d.ts +6 -0
- package/toast/toast.service.d.ts +2 -1
|
@@ -121,22 +121,25 @@ function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
121
121
|
i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r12].componentRef)("data", col_r11);
|
|
122
122
|
} }
|
|
123
123
|
function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
|
|
124
|
-
i0.ɵɵ
|
|
124
|
+
const _r14 = i0.ɵɵgetCurrentView();
|
|
125
|
+
i0.ɵɵelementStart(0, "mis-actions-cell", 34);
|
|
126
|
+
i0.ɵɵlistener("actionClick", function TableComponent_div_7_div_2_mis_actions_cell_4_Template_mis_actions_cell_actionClick_0_listener($event) { i0.ɵɵrestoreView(_r14); const rowIndex_r15 = i0.ɵɵnextContext(2).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick($event, rowIndex_r15)); });
|
|
127
|
+
i0.ɵɵelementEnd();
|
|
125
128
|
} if (rf & 2) {
|
|
126
129
|
const ctx_r12 = i0.ɵɵnextContext();
|
|
127
130
|
const col_r11 = ctx_r12.$implicit;
|
|
128
131
|
const i_r12 = ctx_r12.index;
|
|
129
|
-
const
|
|
132
|
+
const rowIndex_r15 = i0.ɵɵnextContext().index;
|
|
130
133
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
131
134
|
i0.ɵɵstyleMap(ctx_r1.getActionsCellStyle(ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style));
|
|
132
|
-
i0.ɵɵproperty("data", col_r11)("actionItems", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionItems) || i0.ɵɵpureFunction0(
|
|
135
|
+
i0.ɵɵproperty("data", col_r11)("actionItems", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionItems) || i0.ɵɵpureFunction0(10, _c13))("actionPermissions", ctx_r1.config.actionPermissions == null ? null : ctx_r1.config.actionPermissions[rowIndex_r15])("actionType", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].actionType) || "inline")("dropdownIcon", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].dropdownIcon) || "")("submenuAlign", ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].submenuAlign)("menuAlign", ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].menuAlign)("isChecked", col_r11);
|
|
133
136
|
} }
|
|
134
137
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
135
138
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
136
139
|
i0.ɵɵelementStart(0, "div", 29);
|
|
137
140
|
i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r9 = i0.ɵɵrestoreView(_r9); const col_r11 = ctx_r9.$implicit; const i_r12 = ctx_r9.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action(col_r11) : null); });
|
|
138
141
|
i0.ɵɵelementStart(1, "div", 30);
|
|
139
|
-
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 31)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 16)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1,
|
|
142
|
+
i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 31)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 16)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 11, "mis-actions-cell", 32);
|
|
140
143
|
i0.ɵɵelementEnd()();
|
|
141
144
|
} if (rf & 2) {
|
|
142
145
|
const i_r12 = ctx.index;
|
|
@@ -203,28 +206,28 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
203
206
|
i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 28);
|
|
204
207
|
i0.ɵɵelementEnd();
|
|
205
208
|
} if (rf & 2) {
|
|
206
|
-
const
|
|
209
|
+
const row_r16 = ctx.$implicit;
|
|
207
210
|
const i_r8 = ctx.index;
|
|
208
211
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
209
212
|
i0.ɵɵadvance();
|
|
210
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c6$1, ctx_r1.config.cellHover,
|
|
213
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c6$1, ctx_r1.config.cellHover, ctx_r1.activeRowIndex.includes(i_r8)))("ngStyle", i0.ɵɵpureFunction1(7, _c7$1, (ctx_r1.config == null ? null : ctx_r1.config.rowConfig == null ? null : ctx_r1.config.rowConfig.height) ? ctx_r1.config.rowConfig.height : "44px"));
|
|
211
214
|
i0.ɵɵadvance();
|
|
212
|
-
i0.ɵɵproperty("ngForOf",
|
|
215
|
+
i0.ɵɵproperty("ngForOf", row_r16);
|
|
213
216
|
i0.ɵɵadvance();
|
|
214
217
|
i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r8);
|
|
215
218
|
} }
|
|
216
219
|
function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
217
|
-
const
|
|
220
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
218
221
|
i0.ɵɵelementStart(0, "span", 49);
|
|
219
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(
|
|
222
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_ng_container_7_div_1_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r18); const pageNumber_r19 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r19)); });
|
|
220
223
|
i0.ɵɵtext(1);
|
|
221
224
|
i0.ɵɵelementEnd();
|
|
222
225
|
} if (rf & 2) {
|
|
223
|
-
const
|
|
226
|
+
const pageNumber_r19 = i0.ɵɵnextContext().$implicit;
|
|
224
227
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
225
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15,
|
|
228
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, pageNumber_r19 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)))("ngClass", i0.ɵɵpureFunction1(5, _c16, !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping)));
|
|
226
229
|
i0.ɵɵadvance();
|
|
227
|
-
i0.ɵɵtextInterpolate(
|
|
230
|
+
i0.ɵɵtextInterpolate(pageNumber_r19);
|
|
228
231
|
} }
|
|
229
232
|
function TableComponent_div_8_ng_container_7_div_1_span_2_Template(rf, ctx) { if (rf & 1) {
|
|
230
233
|
i0.ɵɵelementStart(0, "span", 50)(1, "div", 36);
|
|
@@ -243,11 +246,11 @@ function TableComponent_div_8_ng_container_7_div_1_Template(rf, ctx) { if (rf &
|
|
|
243
246
|
i0.ɵɵtemplate(1, TableComponent_div_8_ng_container_7_div_1_span_1_Template, 2, 7, "span", 47)(2, TableComponent_div_8_ng_container_7_div_1_span_2_Template, 5, 6, "span", 48);
|
|
244
247
|
i0.ɵɵelementEnd();
|
|
245
248
|
} if (rf & 2) {
|
|
246
|
-
const
|
|
249
|
+
const pageNumber_r19 = ctx.$implicit;
|
|
247
250
|
i0.ɵɵadvance();
|
|
248
|
-
i0.ɵɵproperty("ngIf",
|
|
251
|
+
i0.ɵɵproperty("ngIf", pageNumber_r19 != 0);
|
|
249
252
|
i0.ɵɵadvance();
|
|
250
|
-
i0.ɵɵproperty("ngIf",
|
|
253
|
+
i0.ɵɵproperty("ngIf", pageNumber_r19 == 0);
|
|
251
254
|
} }
|
|
252
255
|
function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
253
256
|
i0.ɵɵelementContainerStart(0);
|
|
@@ -268,12 +271,12 @@ function TableComponent_div_8_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
268
271
|
i0.ɵɵtextInterpolate2("", ctx_r1.config.paginationConfig.selectedPage, " of ", ctx_r1.config.paginationConfig.noOfPages, "");
|
|
269
272
|
} }
|
|
270
273
|
function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
271
|
-
const
|
|
274
|
+
const _r17 = i0.ɵɵgetCurrentView();
|
|
272
275
|
i0.ɵɵelementStart(0, "div", 38)(1, "p", 39);
|
|
273
276
|
i0.ɵɵtext(2);
|
|
274
277
|
i0.ɵɵelementEnd();
|
|
275
278
|
i0.ɵɵelementStart(3, "div", 40)(4, "span", 41);
|
|
276
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(
|
|
279
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1)); });
|
|
277
280
|
i0.ɵɵnamespaceSVG();
|
|
278
281
|
i0.ɵɵelementStart(5, "svg", 42);
|
|
279
282
|
i0.ɵɵelement(6, "path", 43);
|
|
@@ -281,7 +284,7 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
281
284
|
i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container", 16)(8, TableComponent_div_8_div_8_Template, 3, 2, "div", 44);
|
|
282
285
|
i0.ɵɵnamespaceHTML();
|
|
283
286
|
i0.ɵɵelementStart(9, "span", 41);
|
|
284
|
-
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_9_listener() { i0.ɵɵrestoreView(
|
|
287
|
+
i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_9_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) + 1)); });
|
|
285
288
|
i0.ɵɵnamespaceSVG();
|
|
286
289
|
i0.ɵɵelementStart(10, "svg", 42);
|
|
287
290
|
i0.ɵɵelement(11, "path", 45);
|
|
@@ -299,7 +302,8 @@ class TableComponent {
|
|
|
299
302
|
constructor(renderer) {
|
|
300
303
|
this.renderer = renderer;
|
|
301
304
|
// Initialize with -1 to indicate no row is colored at the beginning
|
|
302
|
-
this.activeRowIndex =
|
|
305
|
+
this.activeRowIndex = [-1];
|
|
306
|
+
this.hasCheckboxActions = false;
|
|
303
307
|
// Filter related variables
|
|
304
308
|
this.showFilter = false;
|
|
305
309
|
this.filterName = "";
|
|
@@ -319,10 +323,13 @@ class TableComponent {
|
|
|
319
323
|
}
|
|
320
324
|
// Function to handle row click
|
|
321
325
|
selectRow(index) {
|
|
322
|
-
this.
|
|
326
|
+
if (this.hasCheckboxActions)
|
|
327
|
+
return;
|
|
328
|
+
this.activeRowIndex = [index]; // Set the selected index to the clicked row's index
|
|
323
329
|
!!this.config.rowConfig.action && this.config.rowConfig.action(index);
|
|
324
330
|
}
|
|
325
331
|
ngOnInit() {
|
|
332
|
+
this.hasCheckboxActions = this.config.colConfig?.some(col => col.type === 'actions' && col.actionType === 'checkbox');
|
|
326
333
|
this.tableLength = !!this.tableData ? this.tableData.length : 0;
|
|
327
334
|
this.initializeFilters();
|
|
328
335
|
if (this.config.paginationConfig) {
|
|
@@ -354,7 +361,7 @@ class TableComponent {
|
|
|
354
361
|
}
|
|
355
362
|
ngOnChanges() {
|
|
356
363
|
this.tableLength = !!this.tableData ? this.tableData.length : 0;
|
|
357
|
-
this.activeRowIndex = this.config.activeRowIndex ||
|
|
364
|
+
this.activeRowIndex = [this.config.activeRowIndex || -1];
|
|
358
365
|
}
|
|
359
366
|
// Filter related functions
|
|
360
367
|
initializeFilters() {
|
|
@@ -491,6 +498,14 @@ class TableComponent {
|
|
|
491
498
|
const { width, ...restStyle } = style;
|
|
492
499
|
return restStyle;
|
|
493
500
|
}
|
|
501
|
+
onActionClick(event, rowIndex) {
|
|
502
|
+
if (event.isChecked) {
|
|
503
|
+
this.activeRowIndex.push(rowIndex);
|
|
504
|
+
}
|
|
505
|
+
else {
|
|
506
|
+
this.activeRowIndex = this.activeRowIndex.filter(index => index !== rowIndex);
|
|
507
|
+
}
|
|
508
|
+
}
|
|
494
509
|
static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
495
510
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
|
|
496
511
|
i0.ɵɵviewQuery(_c0$3, 5);
|
|
@@ -501,7 +516,7 @@ class TableComponent {
|
|
|
501
516
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
502
517
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
503
518
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
|
|
504
|
-
} }, 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", "actionPermissions", "actionType", "dropdownIcon", "style", "submenuAlign", "menuAlign", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "data", "actionItems", "actionPermissions", "actionType", "dropdownIcon", "submenuAlign", "menuAlign"], [1, "sub-row"], [3, "ngStyle"], [3, "config", "tableData"], ["id", "pagination-container"], ["id", "pagination-text"], ["id", "pages-container"], [1, "page", 3, "click"], ["fill", "none", "height", "10", "viewBox", "0 0 7 10", "width", "7", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z", "fill", "#181F33", "fill-rule", "evenodd"], ["class", "page-indicator", 4, "ngIf"], ["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"], [1, "page-indicator"], [1, "page-indicator-text"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
519
|
+
} }, 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", "actionPermissions", "actionType", "dropdownIcon", "style", "submenuAlign", "menuAlign", "isChecked", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "actionClick", "data", "actionItems", "actionPermissions", "actionType", "dropdownIcon", "submenuAlign", "menuAlign", "isChecked"], [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", "page-indicator", 4, "ngIf"], ["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"], [1, "page-indicator"], [1, "page-indicator-text"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
|
|
505
520
|
i0.ɵɵelementStart(0, "div", 3);
|
|
506
521
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
507
522
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
@@ -530,7 +545,7 @@ class TableComponent {
|
|
|
530
545
|
}
|
|
531
546
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
532
547
|
type: Component,
|
|
533
|
-
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': i === activeRowIndex }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n >\n <div\n (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\n >\n <div\n class=\"t-col\"\n [style]=\"config.colConfig[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: config.colConfig[i]?.action ? 'pointer' : 'default',\n 'justify-content': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config.colConfig[i]?.type !== 'custom' && config.colConfig[i]?.type !== 'actions'\"\n [ngStyle]=\"{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n }\"\n [ngClass]=\"{'text-ellipsis': !!config?.colConfig[i]?.style?.textEllipsis}\"\n class=\"t-col-text\"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf=\"config.colConfig[i]?.type === 'custom'\"\n [customComponent]=\"config.colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n <mis-actions-cell\n *ngIf=\"config.colConfig[i]?.type === 'actions'\"\n [data]=\"col\"\n [actionItems]=\"config.colConfig[i]?.actionItems || []\"\n [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 ></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"] }]
|
|
548
|
+
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"] }]
|
|
534
549
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
535
550
|
type: Output
|
|
536
551
|
}], filter: [{
|
|
@@ -1103,14 +1118,14 @@ class SortIconsDirective {
|
|
|
1103
1118
|
|
|
1104
1119
|
const _c0 = a0 => ({ "disabled": a0 });
|
|
1105
1120
|
function ActionsCellComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
|
|
1106
|
-
i0.ɵɵelement(0, "img",
|
|
1121
|
+
i0.ɵɵelement(0, "img", 9);
|
|
1107
1122
|
} if (rf & 2) {
|
|
1108
1123
|
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
1109
1124
|
i0.ɵɵproperty("src", item_r1.icon, i0.ɵɵsanitizeUrl)("alt", item_r1.label);
|
|
1110
1125
|
} }
|
|
1111
1126
|
function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1112
|
-
i0.ɵɵelementStart(0, "div",
|
|
1113
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img",
|
|
1127
|
+
i0.ɵɵelementStart(0, "div", 7);
|
|
1128
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 8);
|
|
1114
1129
|
i0.ɵɵelementEnd();
|
|
1115
1130
|
} if (rf & 2) {
|
|
1116
1131
|
const item_r1 = ctx.$implicit;
|
|
@@ -1120,8 +1135,8 @@ function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
1120
1135
|
i0.ɵɵproperty("ngIf", ctx_r1.isSvgFile(item_r1.icon));
|
|
1121
1136
|
} }
|
|
1122
1137
|
function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1123
|
-
i0.ɵɵelementStart(0, "div",
|
|
1124
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 4, "div",
|
|
1138
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
1139
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 4, "div", 6);
|
|
1125
1140
|
i0.ɵɵelementEnd();
|
|
1126
1141
|
} if (rf & 2) {
|
|
1127
1142
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -1129,8 +1144,8 @@ function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
1129
1144
|
i0.ɵɵproperty("ngForOf", ctx_r1.actionItems)("ngForTrackBy", ctx_r1.trackByAction);
|
|
1130
1145
|
} }
|
|
1131
1146
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1132
|
-
i0.ɵɵelementStart(0, "span",
|
|
1133
|
-
i0.ɵɵelement(1, "img",
|
|
1147
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1148
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1134
1149
|
i0.ɵɵelementEnd();
|
|
1135
1150
|
} if (rf & 2) {
|
|
1136
1151
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1138,8 +1153,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(r
|
|
|
1138
1153
|
i0.ɵɵproperty("src", item_r5.icon, i0.ɵɵsanitizeUrl);
|
|
1139
1154
|
} }
|
|
1140
1155
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
1141
|
-
i0.ɵɵelementStart(0, "span",
|
|
1142
|
-
i0.ɵɵelement(1, "img",
|
|
1156
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1157
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1143
1158
|
i0.ɵɵelementEnd();
|
|
1144
1159
|
} if (rf & 2) {
|
|
1145
1160
|
const child_r7 = i0.ɵɵnextContext().$implicit;
|
|
@@ -1148,10 +1163,10 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_
|
|
|
1148
1163
|
} }
|
|
1149
1164
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1150
1165
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
1151
|
-
i0.ɵɵelementStart(0, "div",
|
|
1166
|
+
i0.ɵɵelementStart(0, "div", 19);
|
|
1152
1167
|
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_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onDropdownItemClick(child_r7, $event)); });
|
|
1153
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span",
|
|
1154
|
-
i0.ɵɵelementStart(2, "span",
|
|
1168
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 21);
|
|
1169
|
+
i0.ɵɵelementStart(2, "span", 22);
|
|
1155
1170
|
i0.ɵɵtext(3);
|
|
1156
1171
|
i0.ɵɵelementEnd()();
|
|
1157
1172
|
} if (rf & 2) {
|
|
@@ -1164,8 +1179,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Templ
|
|
|
1164
1179
|
i0.ɵɵtextInterpolate(child_r7.label);
|
|
1165
1180
|
} }
|
|
1166
1181
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
1167
|
-
i0.ɵɵelementStart(0, "div",
|
|
1168
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div",
|
|
1182
|
+
i0.ɵɵelementStart(0, "div", 29);
|
|
1183
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 18);
|
|
1169
1184
|
i0.ɵɵelementEnd();
|
|
1170
1185
|
} if (rf & 2) {
|
|
1171
1186
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1175,16 +1190,16 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf
|
|
|
1175
1190
|
} }
|
|
1176
1191
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
1177
1192
|
i0.ɵɵelementContainerStart(0);
|
|
1178
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template, 2, 1, "span",
|
|
1179
|
-
i0.ɵɵelementStart(2, "span",
|
|
1193
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template, 2, 1, "span", 21);
|
|
1194
|
+
i0.ɵɵelementStart(2, "span", 22);
|
|
1180
1195
|
i0.ɵɵtext(3);
|
|
1181
1196
|
i0.ɵɵelementEnd();
|
|
1182
|
-
i0.ɵɵelementStart(4, "span",
|
|
1197
|
+
i0.ɵɵelementStart(4, "span", 23);
|
|
1183
1198
|
i0.ɵɵnamespaceSVG();
|
|
1184
|
-
i0.ɵɵelementStart(5, "svg",
|
|
1185
|
-
i0.ɵɵelement(6, "path",
|
|
1199
|
+
i0.ɵɵelementStart(5, "svg", 24);
|
|
1200
|
+
i0.ɵɵelement(6, "path", 25);
|
|
1186
1201
|
i0.ɵɵelementEnd()();
|
|
1187
|
-
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div",
|
|
1202
|
+
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div", 26);
|
|
1188
1203
|
i0.ɵɵelementContainerEnd();
|
|
1189
1204
|
} if (rf & 2) {
|
|
1190
1205
|
const item_r5 = i0.ɵɵnextContext().$implicit;
|
|
@@ -1197,8 +1212,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx)
|
|
|
1197
1212
|
i0.ɵɵproperty("ngIf", item_r5.showSubmenu);
|
|
1198
1213
|
} }
|
|
1199
1214
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
|
|
1200
|
-
i0.ɵɵelementStart(0, "span",
|
|
1201
|
-
i0.ɵɵelement(1, "img",
|
|
1215
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1216
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1202
1217
|
i0.ɵɵelementEnd();
|
|
1203
1218
|
} if (rf & 2) {
|
|
1204
1219
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1206,8 +1221,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf
|
|
|
1206
1221
|
i0.ɵɵproperty("src", item_r5.icon, i0.ɵɵsanitizeUrl);
|
|
1207
1222
|
} }
|
|
1208
1223
|
function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
1209
|
-
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span",
|
|
1210
|
-
i0.ɵɵelementStart(1, "span",
|
|
1224
|
+
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 21);
|
|
1225
|
+
i0.ɵɵelementStart(1, "span", 22);
|
|
1211
1226
|
i0.ɵɵtext(2);
|
|
1212
1227
|
i0.ɵɵelementEnd();
|
|
1213
1228
|
} if (rf & 2) {
|
|
@@ -1219,9 +1234,9 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx)
|
|
|
1219
1234
|
} }
|
|
1220
1235
|
function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1221
1236
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
1222
|
-
i0.ɵɵelementStart(0, "div",
|
|
1237
|
+
i0.ɵɵelementStart(0, "div", 19);
|
|
1223
1238
|
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_Template_div_click_0_listener($event) { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDropdownItemClick(item_r5, $event)); });
|
|
1224
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template, 8, 3, "ng-container",
|
|
1239
|
+
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);
|
|
1225
1240
|
i0.ɵɵelementEnd();
|
|
1226
1241
|
} if (rf & 2) {
|
|
1227
1242
|
const item_r5 = ctx.$implicit;
|
|
@@ -1232,8 +1247,8 @@ function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1)
|
|
|
1232
1247
|
i0.ɵɵproperty("ngIf", item_r5.children == null ? null : item_r5.children.length)("ngIfElse", noChildren_r8);
|
|
1233
1248
|
} }
|
|
1234
1249
|
function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
1235
|
-
i0.ɵɵelementStart(0, "div",
|
|
1236
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div",
|
|
1250
|
+
i0.ɵɵelementStart(0, "div", 17);
|
|
1251
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div", 18);
|
|
1237
1252
|
i0.ɵɵelementEnd();
|
|
1238
1253
|
} if (rf & 2) {
|
|
1239
1254
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -1243,19 +1258,29 @@ function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
1243
1258
|
} }
|
|
1244
1259
|
function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1245
1260
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
1246
|
-
i0.ɵɵelementStart(0, "div",
|
|
1261
|
+
i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
|
|
1247
1262
|
i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleDropdown($event)); });
|
|
1248
1263
|
i0.ɵɵnamespaceSVG();
|
|
1249
|
-
i0.ɵɵelementStart(2, "svg",
|
|
1250
|
-
i0.ɵɵelement(3, "circle",
|
|
1264
|
+
i0.ɵɵelementStart(2, "svg", 12);
|
|
1265
|
+
i0.ɵɵelement(3, "circle", 13)(4, "circle", 14)(5, "circle", 15);
|
|
1251
1266
|
i0.ɵɵelementEnd()();
|
|
1252
|
-
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div",
|
|
1267
|
+
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div", 16);
|
|
1253
1268
|
i0.ɵɵelementEnd();
|
|
1254
1269
|
} if (rf & 2) {
|
|
1255
1270
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1256
1271
|
i0.ɵɵadvance(6);
|
|
1257
1272
|
i0.ɵɵproperty("ngIf", ctx_r1.isDropdownOpen);
|
|
1258
1273
|
} }
|
|
1274
|
+
function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
1275
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
1276
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "mis-checkbox", 31);
|
|
1277
|
+
i0.ɵɵlistener("valueChange", function ActionsCellComponent_div_3_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCheckboxChange($event)); });
|
|
1278
|
+
i0.ɵɵelementEnd()();
|
|
1279
|
+
} if (rf & 2) {
|
|
1280
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
1281
|
+
i0.ɵɵadvance();
|
|
1282
|
+
i0.ɵɵproperty("checked", ctx_r1.isChecked)("disabled", ctx_r1.actionPermissions && ctx_r1.actionPermissions.hasOwnProperty("checkbox") && ctx_r1.actionPermissions["checkbox"] === false);
|
|
1283
|
+
} }
|
|
1259
1284
|
class ActionsCellComponent {
|
|
1260
1285
|
constructor() {
|
|
1261
1286
|
this.actionItems = [];
|
|
@@ -1263,6 +1288,8 @@ class ActionsCellComponent {
|
|
|
1263
1288
|
this.dropdownIcon = '';
|
|
1264
1289
|
this.submenuAlign = 'right';
|
|
1265
1290
|
this.menuAlign = 'left';
|
|
1291
|
+
this.isChecked = false;
|
|
1292
|
+
this.checkboxChange = new EventEmitter();
|
|
1266
1293
|
this._style = {};
|
|
1267
1294
|
this.containerStyle = {};
|
|
1268
1295
|
this.actionClick = new EventEmitter();
|
|
@@ -1345,12 +1372,20 @@ class ActionsCellComponent {
|
|
|
1345
1372
|
this.isDropdownOpen = false; // Only close if action was executed
|
|
1346
1373
|
}
|
|
1347
1374
|
}
|
|
1375
|
+
onCheckboxChange(event) {
|
|
1376
|
+
// Check permissions before allowing change
|
|
1377
|
+
if (this.actionPermissions && this.actionPermissions.hasOwnProperty('checkbox') && this.actionPermissions['checkbox'] === false) {
|
|
1378
|
+
return; // Don't allow change if disabled
|
|
1379
|
+
}
|
|
1380
|
+
this.isChecked = event.value;
|
|
1381
|
+
this.actionClick.emit({ isChecked: this.isChecked, data: this.data });
|
|
1382
|
+
}
|
|
1348
1383
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1349
1384
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1350
1385
|
i0.ɵɵlistener("click", function ActionsCellComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
|
|
1351
|
-
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", menuAlign: "menuAlign", actionPermissions: "actionPermissions", style: "style" }, outputs: { actionClick: "actionClick" }, decls:
|
|
1386
|
+
} }, inputs: { data: "data", actionItems: "actionItems", actionType: "actionType", dropdownIcon: "dropdownIcon", submenuAlign: "submenuAlign", menuAlign: "menuAlign", actionPermissions: "actionPermissions", 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", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "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", "disabled"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1352
1387
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1353
|
-
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3);
|
|
1388
|
+
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, 2, "div", 4);
|
|
1354
1389
|
i0.ɵɵelementEnd();
|
|
1355
1390
|
} if (rf & 2) {
|
|
1356
1391
|
i0.ɵɵproperty("ngStyle", ctx.containerStyle);
|
|
@@ -1358,11 +1393,13 @@ class ActionsCellComponent {
|
|
|
1358
1393
|
i0.ɵɵproperty("ngIf", ctx.actionType === "inline");
|
|
1359
1394
|
i0.ɵɵadvance();
|
|
1360
1395
|
i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
|
|
1361
|
-
|
|
1396
|
+
i0.ɵɵadvance();
|
|
1397
|
+
i0.ɵɵproperty("ngIf", ctx.actionType === "checkbox");
|
|
1398
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent], styles: [".actions-cell-container[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item[_ngcontent-%COMP%]:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item[_ngcontent-%COMP%]:active:not(.disabled){transform:scale(.95)}.action-item.disabled[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.action-item.disabled[_ngcontent-%COMP%]:hover{background-color:transparent;transform:none}.action-icon[_ngcontent-%COMP%]{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg[_ngcontent-%COMP%]{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg[_ngcontent-%COMP%]:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer}.dropdown-actions[_ngcontent-%COMP%]{position:relative}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu[_ngcontent-%COMP%]{position:absolute;top:100%;width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.left[_ngcontent-%COMP%]{right:0!important;left:auto!important}.dropdown-menu.right[_ngcontent-%COMP%]{left:0!important;right:auto!important}.dropdown-menu-item.disabled[_ngcontent-%COMP%]{color:#aaa;cursor:not-allowed}.dropdown-menu-item[_ngcontent-%COMP%]:hover:not(.disabled), .dropdown-menu-item.has-submenu[_ngcontent-%COMP%]:hover{background:#f5f5f5}.dropdown-menu-item[_ngcontent-%COMP%]{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item[_ngcontent-%COMP%] .dropdown-label[_ngcontent-%COMP%]{flex:1;margin-left:8px}.dropdown-menu-item[_ngcontent-%COMP%] .submenu-arrow[_ngcontent-%COMP%]{margin-left:auto;width:16px;height:16px}.submenu-container[_ngcontent-%COMP%]{position:absolute;top:0;left:100%;margin-left:4px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;white-space:nowrap}.dropdown-submenu[_ngcontent-%COMP%]{position:absolute;top:0;min-width:132px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu.right[_ngcontent-%COMP%]{left:100%;margin-left:4px}.dropdown-submenu.left[_ngcontent-%COMP%]{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute;margin-right:4px}.submenu-arrow[_ngcontent-%COMP%]{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.dropdown-menu-item.disabled[_ngcontent-%COMP%]{color:#181f33;filter:grayscale(100%) opacity(.3);cursor:not-allowed}"] }); }
|
|
1362
1399
|
}
|
|
1363
1400
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1364
1401
|
type: Component,
|
|
1365
|
-
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': actionPermissions && actionPermissions.hasOwnProperty(item.value) && actionPermissions[item.value] === false }\"> \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': actionPermissions && actionPermissions.hasOwnProperty(item.value) && actionPermissions[item.value] === false }\">\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': actionPermissions && actionPermissions.hasOwnProperty(child.value) && actionPermissions[child.value] === false }\"\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</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"] }]
|
|
1402
|
+
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': actionPermissions && actionPermissions.hasOwnProperty(item.value) && actionPermissions[item.value] === false }\"> \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': actionPermissions && actionPermissions.hasOwnProperty(item.value) && actionPermissions[item.value] === false }\">\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': actionPermissions && actionPermissions.hasOwnProperty(child.value) && actionPermissions[child.value] === false }\"\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 [disabled]=\"actionPermissions && actionPermissions.hasOwnProperty('checkbox') && actionPermissions['checkbox'] === false\">\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"] }]
|
|
1366
1403
|
}], null, { data: [{
|
|
1367
1404
|
type: Input
|
|
1368
1405
|
}], actionItems: [{
|
|
@@ -1377,6 +1414,10 @@ class ActionsCellComponent {
|
|
|
1377
1414
|
type: Input
|
|
1378
1415
|
}], actionPermissions: [{
|
|
1379
1416
|
type: Input
|
|
1417
|
+
}], isChecked: [{
|
|
1418
|
+
type: Input
|
|
1419
|
+
}], checkboxChange: [{
|
|
1420
|
+
type: Output
|
|
1380
1421
|
}], style: [{
|
|
1381
1422
|
type: Input
|
|
1382
1423
|
}], actionClick: [{
|