@rangertechnologies/ngnxt 2.1.146 → 2.1.148
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 +56 -30
- package/esm2022/lib/components/list-view-filter/list-view-filter.component.mjs +4 -5
- package/fesm2022/rangertechnologies-ngnxt.mjs +59 -34
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/datatable/datatable.component.d.ts +2 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.148.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.146.tgz +0 -0
|
@@ -4935,6 +4935,7 @@ class ListViewFilterComponent {
|
|
|
4935
4935
|
if (!this.selectedView && this.listViews?.length > 0) {
|
|
4936
4936
|
this.selectedView = this.listViews[0].filterName;
|
|
4937
4937
|
}
|
|
4938
|
+
console.log(this.tableFilterArray);
|
|
4938
4939
|
// SKS3MAY25 Compute columnValuesMap and columnNames from tableFilterArray
|
|
4939
4940
|
this.columnValuesMap = Array.isArray(this.tableFilterArray)
|
|
4940
4941
|
? this.tableFilterArray.reduce((acc, curr) => {
|
|
@@ -5040,8 +5041,6 @@ class ListViewFilterComponent {
|
|
|
5040
5041
|
order: this.listViews?.length,
|
|
5041
5042
|
isDefault: false
|
|
5042
5043
|
});
|
|
5043
|
-
this.addFilter();
|
|
5044
|
-
this.addColumn();
|
|
5045
5044
|
this.isDropdownOpen = false;
|
|
5046
5045
|
}
|
|
5047
5046
|
// SKS3MAY25 Saves the currently edited or added list view
|
|
@@ -5189,11 +5188,11 @@ class ListViewFilterComponent {
|
|
|
5189
5188
|
}
|
|
5190
5189
|
}
|
|
5191
5190
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, deps: [{ token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
5192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div class=\"filter-label\">Data Related to</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n {{ selectedView || 'Select a view' }}\n <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <span class=\"view-name\">{{ view.filterName }}</span>\n <div class=\"actions\" *ngIf=\"view.showActions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span>New List View</span>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Name:</label>\n <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n Name is required.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Order:</label>\n <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n Order is required and must be a number.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Default View:</label>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Filters</h3>\n <span class=\"section-description\">Define conditions for filtered list view</span>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">Column</div>\n <div class=\"operator-cell\">Operator</div>\n <div class=\"value-cell\">Value</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n {{ field }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n Column is required.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n {{ operator }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n Operator is required.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n Value is required.\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Filter</span>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Columns</h3>\n <span class=\"section-description\">Configure columns to display in this view</span>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">Column Name</div>\n <div class=\"bool-cell\">Sortable</div>\n <div class=\"bool-cell\">Filterable</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n {{ colName }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n Column name is required.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Column</span>\n </div>\n </div>\n\n <div class=\"form-actions\">\n <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Delete List View</h2>\n <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n </div>\n </div>\n </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
5191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div class=\"filter-label\">Data Related to</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n {{ selectedView || 'Select a view' }}\n <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <span class=\"view-name\">{{ view.filterName }}</span>\n <div class=\"actions\" *ngIf=\"view.showActions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span>New List View</span>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Name:</label>\n <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n Name is required.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Order:</label>\n <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n Order is required and must be a number.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Default View:</label>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Filters</h3>\n <span class=\"section-description\">Define conditions for filtered list view</span>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">Column</div>\n <div class=\"operator-cell\">Operator</div>\n <div class=\"value-cell\">Value</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n {{ field }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n Column is required.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n {{ operator }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n Operator is required.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n Value is required.\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Filter</span>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Columns</h3>\n <span class=\"section-description\">Configure columns to display in this view</span>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">Column Name</div>\n <div class=\"bool-cell\">Sortable</div>\n <div class=\"bool-cell\">Filterable</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n {{ colName }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n Column name is required.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Column</span>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n At least one filter or one column is required.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">Save</button>\n <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Delete List View</h2>\n <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n </div>\n </div>\n </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
5193
5192
|
}
|
|
5194
5193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, decorators: [{
|
|
5195
5194
|
type: Component,
|
|
5196
|
-
args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div class=\"filter-label\">Data Related to</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n {{ selectedView || 'Select a view' }}\n <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <span class=\"view-name\">{{ view.filterName }}</span>\n <div class=\"actions\" *ngIf=\"view.showActions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span>New List View</span>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Name:</label>\n <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n Name is required.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Order:</label>\n <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n Order is required and must be a number.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Default View:</label>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Filters</h3>\n <span class=\"section-description\">Define conditions for filtered list view</span>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">Column</div>\n <div class=\"operator-cell\">Operator</div>\n <div class=\"value-cell\">Value</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n {{ field }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n Column is required.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n {{ operator }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n Operator is required.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n Value is required.\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Filter</span>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Columns</h3>\n <span class=\"section-description\">Configure columns to display in this view</span>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">Column Name</div>\n <div class=\"bool-cell\">Sortable</div>\n <div class=\"bool-cell\">Filterable</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n {{ colName }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n Column name is required.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Column</span>\n </div>\n </div>\n\n <div class=\"form-actions\">\n <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Delete List View</h2>\n <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n </div>\n </div>\n </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"] }]
|
|
5195
|
+
args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"list-view-filter\">\n <div class=\"custom-dropdown\">\n <div class=\"filter-label\">Data Related to</div>\n <div class=\"select-wrapper\">\n <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"custom-dropdown\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n {{ selectedView || 'Select a view' }}\n <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 list view Drop down-->\n <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n <ul class=\"dropdown-options\">\n <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n <span class=\"view-name\">{{ view.filterName }}</span>\n <div class=\"actions\" *ngIf=\"view.showActions\">\n <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"add-filter\" (click)=\"startAdd()\">\n <div class=\"add-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span>New List View</span>\n </div>\n </div>\n </div>\n <!-- SKS3MAY25 Add New List View-->\n <div *ngIf=\"isModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n <form [formGroup]=\"editingView\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Name:</label>\n <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n Name is required.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Order:</label>\n <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n Order is required and must be a number.\n </div>\n </div>\n <div class=\"form-group\">\n <label>Default View:</label>\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n <label for=\"isDefault\" class=\"toggle-button\"></label>\n </div>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Filters</h3>\n <span class=\"section-description\">Define conditions for filtered list view</span>\n </div>\n <div formArrayName=\"conditions\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"column-cell\">Column</div>\n <div class=\"operator-cell\">Operator</div>\n <div class=\"value-cell\">Value</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n <div class=\"column-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n {{ field }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n Column is required.\n </div>\n </div>\n \n <div class=\"operator-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n {{ operator }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n Operator is required.\n </div>\n </div>\n \n <div class=\"value-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n {{ val }}\n </div>\n </div>\n </div>\n <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n Value is required.\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Filter</span>\n </div>\n </div>\n\n <div class=\"section-header\">\n <h3>Columns</h3>\n <span class=\"section-description\">Configure columns to display in this view</span>\n </div>\n <div formArrayName=\"columns\" class=\"table-container\">\n <div class=\"table-header\">\n <div class=\"name-cell\">Column Name</div>\n <div class=\"bool-cell\">Sortable</div>\n <div class=\"bool-cell\">Filterable</div>\n <div class=\"action-cell\">Action</div>\n </div>\n \n <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n <div class=\"name-cell\">\n <div class=\"custom-select\">\n <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n {{ colName }}\n </div>\n </div>\n </div>\n <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n Column name is required.\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"bool-cell\">\n <div class=\"toggle-wrapper small\">\n <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n </div>\n </div>\n \n <div class=\"action-cell\">\n <div class=\"dicon-container\" matTooltip=\"Remove\">\n <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"add-row\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n <div class=\"addIcon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <span>Add Column</span>\n </div>\n </div>\n <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n At least one filter or one column is required.\n </div> \n <div class=\"form-actions\">\n <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">Save</button>\n <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n </div>\n </form>\n </div>\n </div>\n <!-- SKS3MAY25 Delete List View-->\n <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n <div class=\"modal-content\">\n <h2>Delete List View</h2>\n <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n <div class=\"form-delete\">\n <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n </div>\n </div>\n </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\n"] }]
|
|
5197
5196
|
}], ctorParameters: () => [{ type: i3.FormBuilder }], propDecorators: { listViews: [{
|
|
5198
5197
|
type: Input
|
|
5199
5198
|
}], tableFilterArray: [{
|
|
@@ -5320,7 +5319,9 @@ class NxtDatatable {
|
|
|
5320
5319
|
headerLabels = []; // to get the header labels
|
|
5321
5320
|
displayedColumns = []; // to get the displayed columns
|
|
5322
5321
|
filterColumns = []; // to get the filter columns
|
|
5322
|
+
currentFilterColumns = []; // to get the filter columns
|
|
5323
5323
|
sortColumns = []; // to get the filter columns
|
|
5324
|
+
currentSortColumns = []; // to get the filter columns
|
|
5324
5325
|
hyperLinkColumns = []; // to get the hyper link columns
|
|
5325
5326
|
editColumn = []; // to get the edit column
|
|
5326
5327
|
dateColumns = []; // to get the date columns
|
|
@@ -5460,6 +5461,8 @@ class NxtDatatable {
|
|
|
5460
5461
|
this.objectColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.fldType === 'object').map(column => column.fieldName) : this.objectColumns;
|
|
5461
5462
|
this.fileColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.fldType === 'file').map(column => column.fieldName) : this.fileColumns;
|
|
5462
5463
|
this.booleanColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.fldType === 'boolean').map(column => column.fieldName) : this.booleanColumns;
|
|
5464
|
+
this.currentFilterColumns = this.filterColumns;
|
|
5465
|
+
this.currentSortColumns = this.sortColumns;
|
|
5463
5466
|
this.inlineElement = Object.fromEntries(this.displayedColumns.map(key => [key, ""]));
|
|
5464
5467
|
this.dropdownActionButton = (this.actionButtonArray?.buttonArray && this.actionButtonArray?.buttonArray?.length > 0) ? this.actionButtonArray?.buttonArray?.slice(this.actionButtonArray?.size) : [];
|
|
5465
5468
|
this.selection = new SelectionModel(true, []);
|
|
@@ -5497,15 +5500,31 @@ class NxtDatatable {
|
|
|
5497
5500
|
this.searchBoxValue = this.searchConfigs?.searchFilterVal; // Show value in the search box
|
|
5498
5501
|
this.prevSearch = this.searchConfigs?.searchFilterVal;
|
|
5499
5502
|
}
|
|
5500
|
-
if (this.
|
|
5503
|
+
if (this.currentViewFilter === undefined || this.currentViewFilter === null) {
|
|
5504
|
+
this.currentViewFilter = this.listViews && this.listViews.length > 0 ? this.listViews[0] : null;
|
|
5505
|
+
}
|
|
5506
|
+
if (this.currentViewFilter !== undefined && this.currentViewFilter !== null) {
|
|
5507
|
+
this.selectedView = this.currentViewFilter.filterName;
|
|
5508
|
+
const columns = this.currentViewFilter?.columns || [];
|
|
5509
|
+
if (columns.length > 0) {
|
|
5510
|
+
this.currentDisplayedColumns = columns.map(col => col.name);
|
|
5511
|
+
this.currentHeaderLabels = this.currentDisplayedColumns.map(name => {
|
|
5512
|
+
const index = this.displayedColumns.indexOf(name);
|
|
5513
|
+
return index !== -1 ? this.headerLabels[index] : name; // fallback to name if no label found
|
|
5514
|
+
});
|
|
5515
|
+
this.currentFilterColumns = columns.filter(col => col.filterable === true).map(col => col.name);
|
|
5516
|
+
this.currentSortColumns = columns.filter(col => col.sortable === true).map(col => col.name);
|
|
5517
|
+
}
|
|
5518
|
+
}
|
|
5519
|
+
if (this.currentFilterColumns?.length > 0 && this.configPagination === false) {
|
|
5501
5520
|
this.multipleFilterArray = {};
|
|
5502
5521
|
const filtObjs = {};
|
|
5503
|
-
this.
|
|
5522
|
+
this.currentFilterColumns.forEach((element) => {
|
|
5504
5523
|
this.multipleFilterArray[element] = null;
|
|
5505
5524
|
filtObjs[element] = [];
|
|
5506
5525
|
});
|
|
5507
5526
|
this.data.forEach(element => {
|
|
5508
|
-
this.
|
|
5527
|
+
this.currentFilterColumns.forEach((key) => {
|
|
5509
5528
|
const value = this.getValue(element, key); // <- get nested value
|
|
5510
5529
|
if (value !== undefined) {
|
|
5511
5530
|
filtObjs[key].push(value);
|
|
@@ -5713,6 +5732,8 @@ class NxtDatatable {
|
|
|
5713
5732
|
this.objectColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.type === 'object').map(column => column.fieldName) : this.objectColumns;
|
|
5714
5733
|
this.fileColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.type === 'file').map(column => column.fieldName) : this.fileColumns;
|
|
5715
5734
|
this.booleanColumns = this.from !== 'formBuilder' ? this.columns.filter(column => column.type === 'boolean').map(column => column.fieldName) : this.booleanColumns;
|
|
5735
|
+
this.currentFilterColumns = this.filterColumns;
|
|
5736
|
+
this.currentSortColumns = this.sortColumns;
|
|
5716
5737
|
this.inlineElement = Object.fromEntries(this.displayedColumns.map(key => [key, ""]));
|
|
5717
5738
|
this.pageSize = this.pagination?.pageSize ? this.pagination['pageSize'] : this.tableParams?.pagination?.pageSize || 10;
|
|
5718
5739
|
this.pageIndex = this.pagination?.pageIndex ? this.pagination['pageIndex'] : this.tableParams?.pagination?.pageIndex || 1;
|
|
@@ -5723,7 +5744,7 @@ class NxtDatatable {
|
|
|
5723
5744
|
this.originalData = [...this.data];
|
|
5724
5745
|
this.sFilterData = [...this.data];
|
|
5725
5746
|
this.dataSource.data = this.originalData;
|
|
5726
|
-
if (
|
|
5747
|
+
if (this.configPagination === false && this.data && this.isPagination) {
|
|
5727
5748
|
const pageIndex = Number(this.pageIndex) || 0;
|
|
5728
5749
|
const pageSize = Number(this.pageSize) || 10;
|
|
5729
5750
|
const start = (pageIndex - 1) * pageSize;
|
|
@@ -5733,15 +5754,31 @@ class NxtDatatable {
|
|
|
5733
5754
|
else if (!this.isPagination) {
|
|
5734
5755
|
this.dataSource.data = this.data;
|
|
5735
5756
|
}
|
|
5736
|
-
if (this.
|
|
5757
|
+
if (this.currentViewFilter === undefined || this.currentViewFilter === null) {
|
|
5758
|
+
this.currentViewFilter = this.listViews && this.listViews.length > 0 ? this.listViews[0] : null;
|
|
5759
|
+
}
|
|
5760
|
+
if (this.currentViewFilter !== undefined && this.currentViewFilter !== null) {
|
|
5761
|
+
this.selectedView = this.currentViewFilter.filterName;
|
|
5762
|
+
const columns = this.currentViewFilter?.columns || [];
|
|
5763
|
+
if (columns.length > 0) {
|
|
5764
|
+
this.currentDisplayedColumns = columns.map(col => col.name);
|
|
5765
|
+
this.currentHeaderLabels = this.currentDisplayedColumns.map(name => {
|
|
5766
|
+
const index = this.displayedColumns.indexOf(name);
|
|
5767
|
+
return index !== -1 ? this.headerLabels[index] : name; // fallback to name if no label found
|
|
5768
|
+
});
|
|
5769
|
+
this.currentFilterColumns = columns.filter(col => col.filterable === true).map(col => col.name);
|
|
5770
|
+
this.currentSortColumns = columns.filter(col => col.sortable === true).map(col => col.name);
|
|
5771
|
+
}
|
|
5772
|
+
}
|
|
5773
|
+
if (this.currentFilterColumns?.length > 0 && this.configPagination === false) {
|
|
5737
5774
|
this.multipleFilterArray = {};
|
|
5738
5775
|
const filtObjs = {};
|
|
5739
|
-
this.
|
|
5776
|
+
this.currentFilterColumns.forEach((element) => {
|
|
5740
5777
|
this.multipleFilterArray[element] = null;
|
|
5741
5778
|
filtObjs[element] = [];
|
|
5742
5779
|
});
|
|
5743
5780
|
this.data.forEach(element => {
|
|
5744
|
-
this.
|
|
5781
|
+
this.currentFilterColumns.forEach((key) => {
|
|
5745
5782
|
const value = this.getValue(element, key); // <- get nested value
|
|
5746
5783
|
if (value !== undefined) {
|
|
5747
5784
|
filtObjs[key].push(value);
|
|
@@ -5918,7 +5955,7 @@ class NxtDatatable {
|
|
|
5918
5955
|
sortData(column, sortingState, currentState, from) {
|
|
5919
5956
|
// Define sorting states
|
|
5920
5957
|
const sortingStates = ['asc', 'desc', 'none'];
|
|
5921
|
-
if (
|
|
5958
|
+
if (this.configPagination === false || this.dataSource.data.length === this.totalRecords) {
|
|
5922
5959
|
// Determine the current sorting state
|
|
5923
5960
|
if (this.currentSortColumn === column && !sortingState) {
|
|
5924
5961
|
// Move to the next sorting state
|
|
@@ -5930,7 +5967,7 @@ class NxtDatatable {
|
|
|
5930
5967
|
this.currentSortColumn = column;
|
|
5931
5968
|
this.currentSortDirection = sortingState || 'asc';
|
|
5932
5969
|
}
|
|
5933
|
-
const data =
|
|
5970
|
+
const data = this.filterBoxData && this.filterBoxData.length > 0 ? this.filterBoxData : this.dataSource.data;
|
|
5934
5971
|
// Only sort if the direction is 'asc' or 'desc'
|
|
5935
5972
|
if (this.currentSortDirection === 'asc' || this.currentSortDirection === 'desc') {
|
|
5936
5973
|
data.sort((a, b) => {
|
|
@@ -5972,7 +6009,7 @@ class NxtDatatable {
|
|
|
5972
6009
|
return 0;
|
|
5973
6010
|
}
|
|
5974
6011
|
});
|
|
5975
|
-
this.dataSource.data = data;
|
|
6012
|
+
this.dataSource.data = [...data];
|
|
5976
6013
|
}
|
|
5977
6014
|
else {
|
|
5978
6015
|
const pageIndex = Number(this.pageIndex) || 0;
|
|
@@ -6031,7 +6068,7 @@ class NxtDatatable {
|
|
|
6031
6068
|
this.pageIndex = event?.pageIndex || this.pageIndex;
|
|
6032
6069
|
this.pageSize = event?.pageSize || this.pageSize;
|
|
6033
6070
|
this.filterTableNos = this.filterBoxData?.length;
|
|
6034
|
-
if (
|
|
6071
|
+
if (this.configPagination === false || this.dataSource.data.length === this.totalRecords) {
|
|
6035
6072
|
if (from !== 'onChange')
|
|
6036
6073
|
this.applyFilter(this.searchBoxValue, 'pageParams');
|
|
6037
6074
|
const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
|
|
@@ -6256,7 +6293,7 @@ class NxtDatatable {
|
|
|
6256
6293
|
}
|
|
6257
6294
|
// SKS15FEB25 on add record in table, the 'inlineElement' values will be assigned to the table data
|
|
6258
6295
|
addTableRecord(element, from) {
|
|
6259
|
-
if (
|
|
6296
|
+
if (this.configPagination === false || this.dataSource.data.length === this.totalRecords) {
|
|
6260
6297
|
var obj = {};
|
|
6261
6298
|
const keys = Object.keys(element);
|
|
6262
6299
|
keys.forEach((elementKey) => {
|
|
@@ -6399,7 +6436,7 @@ class NxtDatatable {
|
|
|
6399
6436
|
this.pageIndex = 1;
|
|
6400
6437
|
this.filterDataArray[this.selectedFilter] = [];
|
|
6401
6438
|
this.isResized = false;
|
|
6402
|
-
if (
|
|
6439
|
+
if (this.configPagination === false || this.dataSource.data.length === this.totalRecords) {
|
|
6403
6440
|
this.filterRetain(this.filterDataArray);
|
|
6404
6441
|
}
|
|
6405
6442
|
else {
|
|
@@ -6561,26 +6598,14 @@ class NxtDatatable {
|
|
|
6561
6598
|
else {
|
|
6562
6599
|
if (event.action === 'select') {
|
|
6563
6600
|
this.selectedView = event.data.filterName;
|
|
6564
|
-
this.currentViewFilter = event;
|
|
6565
|
-
|
|
6566
|
-
const columns = event?.data?.columns || [];
|
|
6567
|
-
// Update currentDisplayedColumns with column names
|
|
6568
|
-
this.currentDisplayedColumns = columns.map(col => col.name);
|
|
6569
|
-
// Map from displayedColumns and headerLabels
|
|
6570
|
-
// Assume headerLabels and displayedColumns are aligned in order
|
|
6571
|
-
this.currentHeaderLabels = this.currentDisplayedColumns.map(name => {
|
|
6572
|
-
const index = this.displayedColumns.indexOf(name);
|
|
6573
|
-
return index !== -1 ? this.headerLabels[index] : name; // fallback to name if no label found
|
|
6574
|
-
});
|
|
6601
|
+
this.currentViewFilter = event.data;
|
|
6602
|
+
this.ngOnChanges({});
|
|
6575
6603
|
}
|
|
6576
6604
|
this.NxtTableFilterEmit.emit(event);
|
|
6577
6605
|
}
|
|
6578
6606
|
}
|
|
6579
|
-
isColumnInclude(column, columns, checkType) {
|
|
6580
|
-
return columns?.some(col => col.name === column && col[checkType] === true);
|
|
6581
|
-
}
|
|
6582
6607
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6583
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, 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> <!-- class=\"m-4\" -->\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\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\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\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]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.includes(column) || (currentViewFilter?.data?.columns?.length > 0 && isColumnInclude(column, currentViewFilter?.data?.columns, 'sortable')) ? 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=\"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 {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentViewFilter?.data?.columns?.length > 0 ? isColumnInclude(column, currentViewFilter?.data?.columns, 'filterable') : filterColumns.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=\"(currentViewFilter?.data?.columns?.length > 0 && isColumnInclude(column, currentViewFilter?.data?.columns, 'sortable')) || sortColumns.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]=\"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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"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\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}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], 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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.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"] }] });
|
|
6608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, 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> <!-- class=\"m-4\" -->\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\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\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\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]=\"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=\"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 {{ 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]=\"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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"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\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}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], 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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.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"] }] });
|
|
6584
6609
|
}
|
|
6585
6610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
|
|
6586
6611
|
type: Component,
|
|
@@ -6600,7 +6625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6600
6625
|
GetValuePipe,
|
|
6601
6626
|
ListViewFilterComponent
|
|
6602
6627
|
// RowResizerDirective
|
|
6603
|
-
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\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\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\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]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.includes(column) || (currentViewFilter?.data?.columns?.length > 0 && isColumnInclude(column, currentViewFilter?.data?.columns, 'sortable')) ? 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=\"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 {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\">\n <svg *ngIf=\"currentViewFilter?.data?.columns?.length > 0 ? isColumnInclude(column, currentViewFilter?.data?.columns, 'filterable') : filterColumns.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=\"(currentViewFilter?.data?.columns?.length > 0 && isColumnInclude(column, currentViewFilter?.data?.columns, 'sortable')) || sortColumns.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]=\"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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"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\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}.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"] }]
|
|
6628
|
+
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\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\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\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]=\"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=\"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 {{ 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]=\"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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n <ng-container *ngIf=\"row.type === 'calculation'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"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\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}.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"] }]
|
|
6604
6629
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
|
|
6605
6630
|
type: Input
|
|
6606
6631
|
}], tableFilterData: [{
|
|
@@ -14653,7 +14678,7 @@ const VERSION = {
|
|
|
14653
14678
|
"semver": null,
|
|
14654
14679
|
"suffix": "05a52cb-dirty",
|
|
14655
14680
|
"semverString": null,
|
|
14656
|
-
"version": "2.1.
|
|
14681
|
+
"version": "2.1.148"
|
|
14657
14682
|
};
|
|
14658
14683
|
/* tslint:enable */
|
|
14659
14684
|
|