@rangertechnologies/ngnxt 2.1.215 → 2.1.217
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/environments/version.mjs +2 -2
- package/esm2022/lib/components/datatable/datatable.component.mjs +3 -3
- package/esm2022/lib/services/translation.service.mjs +2 -1
- package/fesm2022/rangertechnologies-ngnxt.mjs +4 -3
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.217.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.215.tgz +0 -0
|
@@ -8171,6 +8171,7 @@ class TranslationService {
|
|
|
8171
8171
|
// Set language (if applicable)
|
|
8172
8172
|
setLanguage(lang) {
|
|
8173
8173
|
this.currentLang = lang;
|
|
8174
|
+
this.load();
|
|
8174
8175
|
this.translationsLoaded.next(); // Optional: notify on language change
|
|
8175
8176
|
}
|
|
8176
8177
|
translate(key) {
|
|
@@ -9662,7 +9663,7 @@ class NxtDatatable {
|
|
|
9662
9663
|
}
|
|
9663
9664
|
}
|
|
9664
9665
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n [listViews]=\"listViews\"\n [selectedView]=\"selectedView\"\n [displayedColumns] = 'columns'\n [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of currentDisplayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n <div>\n <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | date }}\n </div>\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | time }}\n </div>\n </ng-container>\n </ng-template>\n <ng-template #default>\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ '-' | getValue: element : column }}\n </div>\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.label }}\n </div>\n \n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of displayedColumns; let last = last\"\n class=\"horizontal-summary-table-cell\"\n style=\"text-align: left;\">\n @if (row?.columns?.includes(col)) {\n {{ summaryValues[col] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container> \n </ng-container> \n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n </div>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n No records/data found.\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;border-bottom:solid 1px var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: CustomTranslatePipe, name: "customTranslate" }] });
|
|
9666
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n [listViews]=\"listViews\"\n [selectedView]=\"selectedView\"\n [displayedColumns] = 'columns'\n [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of currentDisplayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n <div>\n <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | date }}\n </div>\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | time }}\n </div>\n </ng-container>\n </ng-template>\n <ng-template #default>\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ '-' | getValue: element : column }}\n </div>\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.label }}\n </div>\n \n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of displayedColumns; let last = last\"\n class=\"horizontal-summary-table-cell\"\n style=\"text-align: left;\">\n @if (row?.columns?.includes(col)) {\n {{ summaryValues[col] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container> \n </ng-container> \n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n </div>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n No records/data found.\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;border-bottom:solid 1px var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: CustomTranslatePipe, name: "customTranslate" }] });
|
|
9666
9667
|
}
|
|
9667
9668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
|
|
9668
9669
|
type: Component,
|
|
@@ -9683,7 +9684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9683
9684
|
ListViewFilterComponent,
|
|
9684
9685
|
CustomTranslatePipe
|
|
9685
9686
|
// RowResizerDirective
|
|
9686
|
-
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n [listViews]=\"listViews\"\n [selectedView]=\"selectedView\"\n [displayedColumns] = 'columns'\n [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of currentDisplayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n <div>\n <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | date }}\n </div>\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | time }}\n </div>\n </ng-container>\n </ng-template>\n <ng-template #default>\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ '-' | getValue: element : column }}\n </div>\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.label }}\n </div>\n \n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of displayedColumns; let last = last\"\n class=\"horizontal-summary-table-cell\"\n style=\"text-align: left;\">\n @if (row?.columns?.includes(col)) {\n {{ summaryValues[col] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container> \n </ng-container> \n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n </div>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n No records/data found.\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;border-bottom:solid 1px var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}\n"] }]
|
|
9687
|
+
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n [listViews]=\"listViews\"\n [selectedView]=\"selectedView\"\n [displayedColumns] = 'columns'\n [tableFilterArray]=\"tableFilterArray\"\n (listViewEmit)=\"listViewEmit($event)\">\n </app-list-view-filter>\n <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of currentDisplayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n <div>\n <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | date }}\n </div>\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ ('-' | getValue: element : column) | time }}\n </div>\n </ng-container>\n </ng-template>\n <ng-template #default>\n <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n {{ '-' | getValue: element : column }}\n </div>\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n </div>\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n \u2715\n </div>\n {{ summaryValues[row.fieldName] | number }}\n </ng-container>\n <ng-container *ngIf=\"row.type === 'input'\">\n <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.label }}\n </div>\n \n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of displayedColumns; let last = last\"\n class=\"horizontal-summary-table-cell\"\n style=\"text-align: left;\">\n @if (row?.columns?.includes(col)) {\n {{ summaryValues[col] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container> \n </ng-container> \n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n </div>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n No records/data found.\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\"\n buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;border-bottom:solid 1px var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}\n"] }]
|
|
9687
9688
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
|
|
9688
9689
|
type: Input
|
|
9689
9690
|
}], tableFilterData: [{
|
|
@@ -61119,7 +61120,7 @@ const VERSION = {
|
|
|
61119
61120
|
"semver": null,
|
|
61120
61121
|
"suffix": "73e492bd-dirty",
|
|
61121
61122
|
"semverString": null,
|
|
61122
|
-
"version": "2.1.
|
|
61123
|
+
"version": "2.1.217"
|
|
61123
61124
|
};
|
|
61124
61125
|
/* tslint:enable */
|
|
61125
61126
|
|