mis-crystal-design-system 18.0.13-test-9 → 18.0.13-test-10
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 +5 -5
- 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 +66 -40
- package/fesm2022/mis-crystal-design-system-table.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/table.component.d.ts +1 -1
|
@@ -129,14 +129,14 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
|
|
|
129
129
|
const rowIndex_r14 = i0.ɵɵnextContext().index;
|
|
130
130
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
131
131
|
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(
|
|
132
|
+
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_r14])("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
133
|
} }
|
|
134
134
|
function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
135
135
|
const _r9 = i0.ɵɵgetCurrentView();
|
|
136
136
|
i0.ɵɵelementStart(0, "div", 29);
|
|
137
137
|
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
138
|
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,
|
|
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, 11, "mis-actions-cell", 32);
|
|
140
140
|
i0.ɵɵelementEnd()();
|
|
141
141
|
} if (rf & 2) {
|
|
142
142
|
const i_r12 = ctx.index;
|
|
@@ -501,7 +501,7 @@ class TableComponent {
|
|
|
501
501
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
|
|
502
502
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
|
|
503
503
|
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) {
|
|
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", "isChecked", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [3, "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
505
|
i0.ɵɵelementStart(0, "div", 3);
|
|
506
506
|
i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
|
|
507
507
|
i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
|
|
@@ -530,7 +530,7 @@ class TableComponent {
|
|
|
530
530
|
}
|
|
531
531
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
532
532
|
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"] }]
|
|
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 [isChecked]=\"col\" \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
534
|
}], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
|
|
535
535
|
type: Output
|
|
536
536
|
}], filter: [{
|
|
@@ -1103,14 +1103,14 @@ class SortIconsDirective {
|
|
|
1103
1103
|
|
|
1104
1104
|
const _c0 = a0 => ({ "disabled": a0 });
|
|
1105
1105
|
function ActionsCellComponent_div_1_div_1_img_1_Template(rf, ctx) { if (rf & 1) {
|
|
1106
|
-
i0.ɵɵelement(0, "img",
|
|
1106
|
+
i0.ɵɵelement(0, "img", 9);
|
|
1107
1107
|
} if (rf & 2) {
|
|
1108
1108
|
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
1109
1109
|
i0.ɵɵproperty("src", item_r1.icon, i0.ɵɵsanitizeUrl)("alt", item_r1.label);
|
|
1110
1110
|
} }
|
|
1111
1111
|
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",
|
|
1112
|
+
i0.ɵɵelementStart(0, "div", 7);
|
|
1113
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_img_1_Template, 1, 2, "img", 8);
|
|
1114
1114
|
i0.ɵɵelementEnd();
|
|
1115
1115
|
} if (rf & 2) {
|
|
1116
1116
|
const item_r1 = ctx.$implicit;
|
|
@@ -1120,8 +1120,8 @@ function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
1120
1120
|
i0.ɵɵproperty("ngIf", ctx_r1.isSvgFile(item_r1.icon));
|
|
1121
1121
|
} }
|
|
1122
1122
|
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",
|
|
1123
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
1124
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 4, "div", 6);
|
|
1125
1125
|
i0.ɵɵelementEnd();
|
|
1126
1126
|
} if (rf & 2) {
|
|
1127
1127
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -1129,8 +1129,8 @@ function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
1129
1129
|
i0.ɵɵproperty("ngForOf", ctx_r1.actionItems)("ngForTrackBy", ctx_r1.trackByAction);
|
|
1130
1130
|
} }
|
|
1131
1131
|
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",
|
|
1132
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1133
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1134
1134
|
i0.ɵɵelementEnd();
|
|
1135
1135
|
} if (rf & 2) {
|
|
1136
1136
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1138,8 +1138,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(r
|
|
|
1138
1138
|
i0.ɵɵproperty("src", item_r5.icon, i0.ɵɵsanitizeUrl);
|
|
1139
1139
|
} }
|
|
1140
1140
|
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",
|
|
1141
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1142
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1143
1143
|
i0.ɵɵelementEnd();
|
|
1144
1144
|
} if (rf & 2) {
|
|
1145
1145
|
const child_r7 = i0.ɵɵnextContext().$implicit;
|
|
@@ -1148,10 +1148,10 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_
|
|
|
1148
1148
|
} }
|
|
1149
1149
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1150
1150
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
1151
|
-
i0.ɵɵelementStart(0, "div",
|
|
1151
|
+
i0.ɵɵelementStart(0, "div", 19);
|
|
1152
1152
|
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",
|
|
1153
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 21);
|
|
1154
|
+
i0.ɵɵelementStart(2, "span", 22);
|
|
1155
1155
|
i0.ɵɵtext(3);
|
|
1156
1156
|
i0.ɵɵelementEnd()();
|
|
1157
1157
|
} if (rf & 2) {
|
|
@@ -1164,8 +1164,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Templ
|
|
|
1164
1164
|
i0.ɵɵtextInterpolate(child_r7.label);
|
|
1165
1165
|
} }
|
|
1166
1166
|
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",
|
|
1167
|
+
i0.ɵɵelementStart(0, "div", 29);
|
|
1168
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 18);
|
|
1169
1169
|
i0.ɵɵelementEnd();
|
|
1170
1170
|
} if (rf & 2) {
|
|
1171
1171
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1175,16 +1175,16 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf
|
|
|
1175
1175
|
} }
|
|
1176
1176
|
function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
1177
1177
|
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",
|
|
1178
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template, 2, 1, "span", 21);
|
|
1179
|
+
i0.ɵɵelementStart(2, "span", 22);
|
|
1180
1180
|
i0.ɵɵtext(3);
|
|
1181
1181
|
i0.ɵɵelementEnd();
|
|
1182
|
-
i0.ɵɵelementStart(4, "span",
|
|
1182
|
+
i0.ɵɵelementStart(4, "span", 23);
|
|
1183
1183
|
i0.ɵɵnamespaceSVG();
|
|
1184
|
-
i0.ɵɵelementStart(5, "svg",
|
|
1185
|
-
i0.ɵɵelement(6, "path",
|
|
1184
|
+
i0.ɵɵelementStart(5, "svg", 24);
|
|
1185
|
+
i0.ɵɵelement(6, "path", 25);
|
|
1186
1186
|
i0.ɵɵelementEnd()();
|
|
1187
|
-
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div",
|
|
1187
|
+
i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div", 26);
|
|
1188
1188
|
i0.ɵɵelementContainerEnd();
|
|
1189
1189
|
} if (rf & 2) {
|
|
1190
1190
|
const item_r5 = i0.ɵɵnextContext().$implicit;
|
|
@@ -1197,8 +1197,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx)
|
|
|
1197
1197
|
i0.ɵɵproperty("ngIf", item_r5.showSubmenu);
|
|
1198
1198
|
} }
|
|
1199
1199
|
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",
|
|
1200
|
+
i0.ɵɵelementStart(0, "span", 27);
|
|
1201
|
+
i0.ɵɵelement(1, "img", 28);
|
|
1202
1202
|
i0.ɵɵelementEnd();
|
|
1203
1203
|
} if (rf & 2) {
|
|
1204
1204
|
const item_r5 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -1206,8 +1206,8 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf
|
|
|
1206
1206
|
i0.ɵɵproperty("src", item_r5.icon, i0.ɵɵsanitizeUrl);
|
|
1207
1207
|
} }
|
|
1208
1208
|
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",
|
|
1209
|
+
i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 21);
|
|
1210
|
+
i0.ɵɵelementStart(1, "span", 22);
|
|
1211
1211
|
i0.ɵɵtext(2);
|
|
1212
1212
|
i0.ɵɵelementEnd();
|
|
1213
1213
|
} if (rf & 2) {
|
|
@@ -1219,9 +1219,9 @@ function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx)
|
|
|
1219
1219
|
} }
|
|
1220
1220
|
function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
1221
1221
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
1222
|
-
i0.ɵɵelementStart(0, "div",
|
|
1222
|
+
i0.ɵɵelementStart(0, "div", 19);
|
|
1223
1223
|
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",
|
|
1224
|
+
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
1225
|
i0.ɵɵelementEnd();
|
|
1226
1226
|
} if (rf & 2) {
|
|
1227
1227
|
const item_r5 = ctx.$implicit;
|
|
@@ -1232,8 +1232,8 @@ function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1)
|
|
|
1232
1232
|
i0.ɵɵproperty("ngIf", item_r5.children == null ? null : item_r5.children.length)("ngIfElse", noChildren_r8);
|
|
1233
1233
|
} }
|
|
1234
1234
|
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",
|
|
1235
|
+
i0.ɵɵelementStart(0, "div", 17);
|
|
1236
|
+
i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div", 18);
|
|
1237
1237
|
i0.ɵɵelementEnd();
|
|
1238
1238
|
} if (rf & 2) {
|
|
1239
1239
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -1243,19 +1243,29 @@ function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
1243
1243
|
} }
|
|
1244
1244
|
function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
1245
1245
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
1246
|
-
i0.ɵɵelementStart(0, "div",
|
|
1246
|
+
i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
|
|
1247
1247
|
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
1248
|
i0.ɵɵnamespaceSVG();
|
|
1249
|
-
i0.ɵɵelementStart(2, "svg",
|
|
1250
|
-
i0.ɵɵelement(3, "circle",
|
|
1249
|
+
i0.ɵɵelementStart(2, "svg", 12);
|
|
1250
|
+
i0.ɵɵelement(3, "circle", 13)(4, "circle", 14)(5, "circle", 15);
|
|
1251
1251
|
i0.ɵɵelementEnd()();
|
|
1252
|
-
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div",
|
|
1252
|
+
i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div", 16);
|
|
1253
1253
|
i0.ɵɵelementEnd();
|
|
1254
1254
|
} if (rf & 2) {
|
|
1255
1255
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
1256
1256
|
i0.ɵɵadvance(6);
|
|
1257
1257
|
i0.ɵɵproperty("ngIf", ctx_r1.isDropdownOpen);
|
|
1258
1258
|
} }
|
|
1259
|
+
function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
1260
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
1261
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "mis-checkbox", 31);
|
|
1262
|
+
i0.ɵɵlistener("change", function ActionsCellComponent_div_3_Template_mis_checkbox_change_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCheckboxChange($event)); });
|
|
1263
|
+
i0.ɵɵelementEnd()();
|
|
1264
|
+
} if (rf & 2) {
|
|
1265
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
1266
|
+
i0.ɵɵadvance();
|
|
1267
|
+
i0.ɵɵproperty("checked", ctx_r1.isChecked)("disabled", ctx_r1.actionPermissions && ctx_r1.actionPermissions.hasOwnProperty("checkbox") && ctx_r1.actionPermissions["checkbox"] === false);
|
|
1268
|
+
} }
|
|
1259
1269
|
class ActionsCellComponent {
|
|
1260
1270
|
constructor() {
|
|
1261
1271
|
this.actionItems = [];
|
|
@@ -1263,6 +1273,8 @@ class ActionsCellComponent {
|
|
|
1263
1273
|
this.dropdownIcon = '';
|
|
1264
1274
|
this.submenuAlign = 'right';
|
|
1265
1275
|
this.menuAlign = 'left';
|
|
1276
|
+
this.isChecked = false;
|
|
1277
|
+
this.checkboxChange = new EventEmitter();
|
|
1266
1278
|
this._style = {};
|
|
1267
1279
|
this.containerStyle = {};
|
|
1268
1280
|
this.actionClick = new EventEmitter();
|
|
@@ -1345,12 +1357,20 @@ class ActionsCellComponent {
|
|
|
1345
1357
|
this.isDropdownOpen = false; // Only close if action was executed
|
|
1346
1358
|
}
|
|
1347
1359
|
}
|
|
1360
|
+
onCheckboxChange(event) {
|
|
1361
|
+
// Check permissions before allowing change
|
|
1362
|
+
if (this.actionPermissions && this.actionPermissions.hasOwnProperty('checkbox') && this.actionPermissions['checkbox'] === false) {
|
|
1363
|
+
return; // Don't allow change if disabled
|
|
1364
|
+
}
|
|
1365
|
+
this.isChecked = event.checked;
|
|
1366
|
+
this.actionClick.emit({ isChecked: this.isChecked, data: this.data });
|
|
1367
|
+
}
|
|
1348
1368
|
static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
|
|
1349
1369
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1350
1370
|
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:
|
|
1371
|
+
} }, 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, "change", "checked", "disabled"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1352
1372
|
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);
|
|
1373
|
+
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
1374
|
i0.ɵɵelementEnd();
|
|
1355
1375
|
} if (rf & 2) {
|
|
1356
1376
|
i0.ɵɵproperty("ngStyle", ctx.containerStyle);
|
|
@@ -1358,11 +1378,13 @@ class ActionsCellComponent {
|
|
|
1358
1378
|
i0.ɵɵproperty("ngIf", ctx.actionType === "inline");
|
|
1359
1379
|
i0.ɵɵadvance();
|
|
1360
1380
|
i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
|
|
1361
|
-
|
|
1381
|
+
i0.ɵɵadvance();
|
|
1382
|
+
i0.ɵɵproperty("ngIf", ctx.actionType === "checkbox");
|
|
1383
|
+
} }, 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
1384
|
}
|
|
1363
1385
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
|
|
1364
1386
|
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"] }]
|
|
1387
|
+
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 (change)=\"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
1388
|
}], null, { data: [{
|
|
1367
1389
|
type: Input
|
|
1368
1390
|
}], actionItems: [{
|
|
@@ -1377,6 +1399,10 @@ class ActionsCellComponent {
|
|
|
1377
1399
|
type: Input
|
|
1378
1400
|
}], actionPermissions: [{
|
|
1379
1401
|
type: Input
|
|
1402
|
+
}], isChecked: [{
|
|
1403
|
+
type: Input
|
|
1404
|
+
}], checkboxChange: [{
|
|
1405
|
+
type: Output
|
|
1380
1406
|
}], style: [{
|
|
1381
1407
|
type: Input
|
|
1382
1408
|
}], actionClick: [{
|