ng-dynamic-datatable 0.0.5 → 0.0.6
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/README.md +1 -1
- package/fesm2022/ng-dynamic-datatable.mjs +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -458,11 +458,11 @@ class DynamicDatatableComponent {
|
|
|
458
458
|
this.isExportMenuOpen = false;
|
|
459
459
|
}
|
|
460
460
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
461
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicDatatableComponent, isStandalone: true, selector: "lib-dynamic-datatable", inputs: { config: "config", columns: "columns", data: "data" }, outputs: { actionSelected: "actionSelected", selectionChange: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", exportTriggered: "exportTriggered" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ndt-card\" (click)=\"closeMenus()\">\r\n <div class=\"ndt-header\">\r\n <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n </div>\r\n\r\n <div class=\"ndt-toolbar\">\r\n <div class=\"ndt-left-tools\">\r\n <ng-container *ngIf=\"isFeatureOn('export')\">\r\n <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"ndt-btn ndt-export-btn\" type=\"button\" (click)=\"toggleExportMenu($event)\">\r\n <i class=\"bi bi-download\"></i>\r\n <span>Export</span>\r\n <i class=\"bi bi-chevron-down ndt-chevron\"></i>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isExportMenuOpen\">\r\n <li *ngIf=\"isExportFormatEnabled('csv')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportCSV()\">\r\n <i class=\"bi bi-filetype-csv\"></i>\r\n <span>CSV</span>\r\n </button>\r\n </li>\r\n <li *ngIf=\"isExportFormatEnabled('excel')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportExcel()\">\r\n <i class=\"bi bi-file-earmark-spreadsheet\"></i>\r\n <span>Excel (.xls)</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n\r\n <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n Rows per page:\r\n <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n <input\r\n type=\"search\"\r\n placeholder=\"Search records\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInput($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ndt-table-wrap\">\r\n <table class=\"ndt-table\">\r\n <colgroup>\r\n <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n </colgroup>\r\n\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isCurrentPageFullySelected()\"\r\n (change)=\"toggleSelectAllCurrentPage($event)\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of mergedColumns\"\r\n [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n (click)=\"toggleSort(column)\"\r\n >\r\n <span class=\"ndt-th-content\">\r\n <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n <i\r\n *ngIf=\"isFeatureOn('sorting') && column.sortable\"\r\n [ngClass]=\"[\r\n 'ndt-sort-indicator',\r\n getSortIconClass(column.key.toString()),\r\n isSortColumn(column.key.toString()) ? 'active' : ''\r\n ]\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngIf=\"!pagedRows.length\">\r\n <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n </tr>\r\n\r\n <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isRowSelected(row.id)\"\r\n (change)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n\r\n <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n <div class=\"ndt-dropdown\" [class.ndt-dropup]=\"shouldOpenActionUp(rowIndex)\" (click)=\"$event.stopPropagation()\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-actions-btn\"\r\n (click)=\"toggleActionMenu(row.id, $event)\"\r\n [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n >\r\n <span class=\"ndt-dots\">...</span>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-dropdown-item\"\r\n [class.ndt-danger]=\"!!action.danger\"\r\n (click)=\"onActionItemClick(i, row, $event)\"\r\n >\r\n <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n <span>{{ action.label }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"ndt-footer\">\r\n <div>\r\n {{ selectedRows.size }} selected\r\n </div>\r\n\r\n <div>\r\n Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n </div>\r\n\r\n <ul class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n <li [class.disabled]=\"currentPage <= 1\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n </li>\r\n <li *ngFor=\"let page of getPaginationPages()\" [class.active]=\"page === currentPage\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(page)\">{{ page }}</button>\r\n </li>\r\n <li [class.disabled]=\"currentPage >= totalPages\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-dark: #4338ca;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:20px;padding:10px;background:#ffffffe6;backdrop-filter:blur(3px);box-shadow:0 20px 45px #2d489124;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:1.05rem 1.35rem}.ndt-header{background:linear-gradient(180deg,#fff,#fafcff);border-bottom:1px solid #eaf0ff}.ndt-title{margin:0;font-size:1.2rem;color:#1b2550}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:center}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.ndt-btn,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #d5def8;background:#fff;color:#445381;border-radius:10px;padding:.36rem .62rem;font-size:.85rem}.ndt-btn:hover{border-color:var(--ndt-primary);background:#4f46e512;color:var(--ndt-primary)}.ndt-toolbar input{min-width:260px}.ndt-toolbar input:focus,.ndt-toolbar select:focus{outline:none;border-color:#4f46e58c;box-shadow:0 0 0 .2rem #4f46e51f}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{margin:0 1.35rem;overflow-x:auto;border:1px solid #e5ecff;border-radius:14px;background:#fff}.ndt-table{width:100%;min-width:920px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.8rem .72rem;text-align:left;border-bottom:1px solid #edf2ff;vertical-align:middle}.ndt-table th{color:#4a577f;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;background:#f7faff;border-bottom:1px solid #e6edff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.82rem;color:#8a98c2;min-width:16px;text-align:center}.ndt-sort-indicator.active{color:var(--ndt-primary)}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-export-btn{display:inline-flex;align-items:center;gap:.42rem}.ndt-chevron{font-size:.72rem;margin-left:.12rem}.ndt-actions-btn{border:1px solid #d2dcfb;background:#f7f9ff;color:#33446e;border-radius:10px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:#eef3ff}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;left:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:150px;border:1px solid #dbe4ff;border-radius:12px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown.ndt-dropup .ndt-dropdown-menu{top:auto;bottom:calc(100% + .35rem)}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item i{font-size:.9rem;width:14px}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#52628a;font-size:.88rem}.ndt-pagination{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:.35rem}.ndt-pagination li{display:inline-flex}.ndt-page-link{border:1px solid #d5def8;background:#fff;color:var(--ndt-primary);border-radius:8px;min-width:34px;height:30px;padding:0 .6rem;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}.ndt-page-link:hover{border-color:var(--ndt-primary);background:#4f46e512}.ndt-pagination li.active .ndt-page-link{background:var(--ndt-primary);border-color:var(--ndt-primary);color:#fff}.ndt-pagination li.disabled .ndt-page-link{opacity:.55;cursor:not-allowed}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}.ndt-toolbar input{min-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
461
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicDatatableComponent, isStandalone: true, selector: "lib-dynamic-datatable", inputs: { config: "config", columns: "columns", data: "data" }, outputs: { actionSelected: "actionSelected", selectionChange: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", exportTriggered: "exportTriggered" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ndt-card\" (click)=\"closeMenus()\">\r\n <div class=\"ndt-header\">\r\n <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n </div>\r\n\r\n <div class=\"ndt-toolbar\">\r\n <div class=\"ndt-left-tools\">\r\n <ng-container *ngIf=\"isFeatureOn('export')\">\r\n <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"ndt-btn ndt-export-btn\" type=\"button\" (click)=\"toggleExportMenu($event)\">\r\n <i class=\"bi bi-download\"></i>\r\n <span>Export</span>\r\n <i class=\"bi bi-chevron-down ndt-chevron\"></i>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isExportMenuOpen\">\r\n <li *ngIf=\"isExportFormatEnabled('csv')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportCSV()\">\r\n <i class=\"bi bi-filetype-csv\"></i>\r\n <span>CSV</span>\r\n </button>\r\n </li>\r\n <li *ngIf=\"isExportFormatEnabled('excel')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportExcel()\">\r\n <i class=\"bi bi-file-earmark-spreadsheet\"></i>\r\n <span>Excel (.xls)</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n\r\n <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n Rows per page:\r\n <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n <input\r\n type=\"search\"\r\n placeholder=\"Search records\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInput($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ndt-table-wrap\">\r\n <table class=\"ndt-table\">\r\n <colgroup>\r\n <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n </colgroup>\r\n\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isCurrentPageFullySelected()\"\r\n (change)=\"toggleSelectAllCurrentPage($event)\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of mergedColumns\"\r\n [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n (click)=\"toggleSort(column)\"\r\n >\r\n <span class=\"ndt-th-content\">\r\n <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n <i\r\n *ngIf=\"isFeatureOn('sorting') && column.sortable\"\r\n [ngClass]=\"[\r\n 'ndt-sort-indicator',\r\n getSortIconClass(column.key.toString()),\r\n isSortColumn(column.key.toString()) ? 'active' : ''\r\n ]\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngIf=\"!pagedRows.length\">\r\n <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n </tr>\r\n\r\n <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isRowSelected(row.id)\"\r\n (change)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n\r\n <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n <div class=\"ndt-dropdown\" [class.ndt-dropup]=\"shouldOpenActionUp(rowIndex)\" (click)=\"$event.stopPropagation()\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-actions-btn\"\r\n (click)=\"toggleActionMenu(row.id, $event)\"\r\n [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n >\r\n <span class=\"ndt-dots\">...</span>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-dropdown-item\"\r\n [class.ndt-danger]=\"!!action.danger\"\r\n (click)=\"onActionItemClick(i, row, $event)\"\r\n >\r\n <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n <span>{{ action.label }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"ndt-footer\">\r\n <div>\r\n {{ selectedRows.size }} selected\r\n </div>\r\n\r\n <div>\r\n Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n </div>\r\n\r\n <ul class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n <li [class.disabled]=\"currentPage <= 1\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n </li>\r\n <li *ngFor=\"let page of getPaginationPages()\" [class.active]=\"page === currentPage\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(page)\">{{ page }}</button>\r\n </li>\r\n <li [class.disabled]=\"currentPage >= totalPages\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-dark: #4338ca;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:20px;padding:10px;background:#ffffffe6;backdrop-filter:blur(3px);box-shadow:0 20px 45px #2d489124;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:1.05rem 1.35rem}.ndt-header{background:linear-gradient(180deg,#fff,#fafcff);border-bottom:1px solid #eaf0ff}.ndt-title{margin:0;font-size:1.2rem;color:#1b2550}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:center}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.ndt-btn,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #d5def8;background:#fff;color:#445381;border-radius:10px;padding:.36rem .62rem;font-size:.85rem}.ndt-btn:hover{border-color:var(--ndt-primary);background:#4f46e512;color:var(--ndt-primary)}.ndt-toolbar input{min-width:260px}.ndt-toolbar input:focus,.ndt-toolbar select:focus{outline:none;border-color:#4f46e58c;box-shadow:0 0 0 .2rem #4f46e51f}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{margin:0 1.35rem;overflow-x:auto;border:1px solid #e5ecff;border-radius:14px;background:#fff}.ndt-table{width:100%;min-width:920px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.8rem .72rem;text-align:left;border-bottom:1px solid #edf2ff;vertical-align:middle}.ndt-table th{color:#4a577f;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;background:#f7faff;border-bottom:1px solid #e6edff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.82rem;color:#8a98c2;min-width:16px;text-align:center}.ndt-sort-indicator.active{color:var(--ndt-primary)}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-export-btn{display:inline-flex;align-items:center;gap:.42rem}.ndt-chevron{font-size:.72rem;margin-left:.12rem}.ndt-actions-btn{border:1px solid #d2dcfb;background:#f7f9ff;color:#33446e;border-radius:10px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:#eef3ff}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;left:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:120px;border:1px solid #dbe4ff;border-radius:12px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown.ndt-dropup .ndt-dropdown-menu{top:auto;bottom:calc(100% + .35rem)}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item i{font-size:.9rem;width:14px}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#52628a;font-size:.88rem}.ndt-pagination{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:.35rem}.ndt-pagination li{display:inline-flex}.ndt-page-link{border:1px solid #d5def8;background:#fff;color:var(--ndt-primary);border-radius:8px;min-width:34px;height:30px;padding:0 .6rem;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}.ndt-page-link:hover{border-color:var(--ndt-primary);background:#4f46e512}.ndt-pagination li.active .ndt-page-link{background:var(--ndt-primary);border-color:var(--ndt-primary);color:#fff}.ndt-pagination li.disabled .ndt-page-link{opacity:.55;cursor:not-allowed}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}.ndt-toolbar input{min-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
462
462
|
}
|
|
463
463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicDatatableComponent, decorators: [{
|
|
464
464
|
type: Component,
|
|
465
|
-
args: [{ selector: 'lib-dynamic-datatable', standalone: true, imports: [CommonModule], template: "<div class=\"ndt-card\" (click)=\"closeMenus()\">\r\n <div class=\"ndt-header\">\r\n <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n </div>\r\n\r\n <div class=\"ndt-toolbar\">\r\n <div class=\"ndt-left-tools\">\r\n <ng-container *ngIf=\"isFeatureOn('export')\">\r\n <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"ndt-btn ndt-export-btn\" type=\"button\" (click)=\"toggleExportMenu($event)\">\r\n <i class=\"bi bi-download\"></i>\r\n <span>Export</span>\r\n <i class=\"bi bi-chevron-down ndt-chevron\"></i>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isExportMenuOpen\">\r\n <li *ngIf=\"isExportFormatEnabled('csv')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportCSV()\">\r\n <i class=\"bi bi-filetype-csv\"></i>\r\n <span>CSV</span>\r\n </button>\r\n </li>\r\n <li *ngIf=\"isExportFormatEnabled('excel')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportExcel()\">\r\n <i class=\"bi bi-file-earmark-spreadsheet\"></i>\r\n <span>Excel (.xls)</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n\r\n <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n Rows per page:\r\n <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n <input\r\n type=\"search\"\r\n placeholder=\"Search records\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInput($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ndt-table-wrap\">\r\n <table class=\"ndt-table\">\r\n <colgroup>\r\n <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n </colgroup>\r\n\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isCurrentPageFullySelected()\"\r\n (change)=\"toggleSelectAllCurrentPage($event)\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of mergedColumns\"\r\n [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n (click)=\"toggleSort(column)\"\r\n >\r\n <span class=\"ndt-th-content\">\r\n <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n <i\r\n *ngIf=\"isFeatureOn('sorting') && column.sortable\"\r\n [ngClass]=\"[\r\n 'ndt-sort-indicator',\r\n getSortIconClass(column.key.toString()),\r\n isSortColumn(column.key.toString()) ? 'active' : ''\r\n ]\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngIf=\"!pagedRows.length\">\r\n <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n </tr>\r\n\r\n <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isRowSelected(row.id)\"\r\n (change)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n\r\n <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n <div class=\"ndt-dropdown\" [class.ndt-dropup]=\"shouldOpenActionUp(rowIndex)\" (click)=\"$event.stopPropagation()\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-actions-btn\"\r\n (click)=\"toggleActionMenu(row.id, $event)\"\r\n [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n >\r\n <span class=\"ndt-dots\">...</span>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-dropdown-item\"\r\n [class.ndt-danger]=\"!!action.danger\"\r\n (click)=\"onActionItemClick(i, row, $event)\"\r\n >\r\n <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n <span>{{ action.label }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"ndt-footer\">\r\n <div>\r\n {{ selectedRows.size }} selected\r\n </div>\r\n\r\n <div>\r\n Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n </div>\r\n\r\n <ul class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n <li [class.disabled]=\"currentPage <= 1\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n </li>\r\n <li *ngFor=\"let page of getPaginationPages()\" [class.active]=\"page === currentPage\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(page)\">{{ page }}</button>\r\n </li>\r\n <li [class.disabled]=\"currentPage >= totalPages\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-dark: #4338ca;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:20px;padding:10px;background:#ffffffe6;backdrop-filter:blur(3px);box-shadow:0 20px 45px #2d489124;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:1.05rem 1.35rem}.ndt-header{background:linear-gradient(180deg,#fff,#fafcff);border-bottom:1px solid #eaf0ff}.ndt-title{margin:0;font-size:1.2rem;color:#1b2550}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:center}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.ndt-btn,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #d5def8;background:#fff;color:#445381;border-radius:10px;padding:.36rem .62rem;font-size:.85rem}.ndt-btn:hover{border-color:var(--ndt-primary);background:#4f46e512;color:var(--ndt-primary)}.ndt-toolbar input{min-width:260px}.ndt-toolbar input:focus,.ndt-toolbar select:focus{outline:none;border-color:#4f46e58c;box-shadow:0 0 0 .2rem #4f46e51f}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{margin:0 1.35rem;overflow-x:auto;border:1px solid #e5ecff;border-radius:14px;background:#fff}.ndt-table{width:100%;min-width:920px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.8rem .72rem;text-align:left;border-bottom:1px solid #edf2ff;vertical-align:middle}.ndt-table th{color:#4a577f;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;background:#f7faff;border-bottom:1px solid #e6edff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.82rem;color:#8a98c2;min-width:16px;text-align:center}.ndt-sort-indicator.active{color:var(--ndt-primary)}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-export-btn{display:inline-flex;align-items:center;gap:.42rem}.ndt-chevron{font-size:.72rem;margin-left:.12rem}.ndt-actions-btn{border:1px solid #d2dcfb;background:#f7f9ff;color:#33446e;border-radius:10px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:#eef3ff}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;left:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:150px;border:1px solid #dbe4ff;border-radius:12px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown.ndt-dropup .ndt-dropdown-menu{top:auto;bottom:calc(100% + .35rem)}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item i{font-size:.9rem;width:14px}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#52628a;font-size:.88rem}.ndt-pagination{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:.35rem}.ndt-pagination li{display:inline-flex}.ndt-page-link{border:1px solid #d5def8;background:#fff;color:var(--ndt-primary);border-radius:8px;min-width:34px;height:30px;padding:0 .6rem;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}.ndt-page-link:hover{border-color:var(--ndt-primary);background:#4f46e512}.ndt-pagination li.active .ndt-page-link{background:var(--ndt-primary);border-color:var(--ndt-primary);color:#fff}.ndt-pagination li.disabled .ndt-page-link{opacity:.55;cursor:not-allowed}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}.ndt-toolbar input{min-width:100%}}\n"] }]
|
|
465
|
+
args: [{ selector: 'lib-dynamic-datatable', standalone: true, imports: [CommonModule], template: "<div class=\"ndt-card\" (click)=\"closeMenus()\">\r\n <div class=\"ndt-header\">\r\n <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n </div>\r\n\r\n <div class=\"ndt-toolbar\">\r\n <div class=\"ndt-left-tools\">\r\n <ng-container *ngIf=\"isFeatureOn('export')\">\r\n <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button class=\"ndt-btn ndt-export-btn\" type=\"button\" (click)=\"toggleExportMenu($event)\">\r\n <i class=\"bi bi-download\"></i>\r\n <span>Export</span>\r\n <i class=\"bi bi-chevron-down ndt-chevron\"></i>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isExportMenuOpen\">\r\n <li *ngIf=\"isExportFormatEnabled('csv')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportCSV()\">\r\n <i class=\"bi bi-filetype-csv\"></i>\r\n <span>CSV</span>\r\n </button>\r\n </li>\r\n <li *ngIf=\"isExportFormatEnabled('excel')\">\r\n <button type=\"button\" class=\"ndt-dropdown-item\" (click)=\"exportExcel()\">\r\n <i class=\"bi bi-file-earmark-spreadsheet\"></i>\r\n <span>Excel (.xls)</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n\r\n <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n Rows per page:\r\n <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </label>\r\n </div>\r\n\r\n <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n <input\r\n type=\"search\"\r\n placeholder=\"Search records\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInput($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ndt-table-wrap\">\r\n <table class=\"ndt-table\">\r\n <colgroup>\r\n <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n </colgroup>\r\n\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isCurrentPageFullySelected()\"\r\n (change)=\"toggleSelectAllCurrentPage($event)\"\r\n />\r\n </th>\r\n <th\r\n *ngFor=\"let column of mergedColumns\"\r\n [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n (click)=\"toggleSort(column)\"\r\n >\r\n <span class=\"ndt-th-content\">\r\n <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n <i\r\n *ngIf=\"isFeatureOn('sorting') && column.sortable\"\r\n [ngClass]=\"[\r\n 'ndt-sort-indicator',\r\n getSortIconClass(column.key.toString()),\r\n isSortColumn(column.key.toString()) ? 'active' : ''\r\n ]\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngIf=\"!pagedRows.length\">\r\n <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n </tr>\r\n\r\n <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isRowSelected(row.id)\"\r\n (change)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n\r\n <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n <div class=\"ndt-dropdown\" [class.ndt-dropup]=\"shouldOpenActionUp(rowIndex)\" (click)=\"$event.stopPropagation()\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-actions-btn\"\r\n (click)=\"toggleActionMenu(row.id, $event)\"\r\n [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n >\r\n <span class=\"ndt-dots\">...</span>\r\n </button>\r\n\r\n <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n <button\r\n type=\"button\"\r\n class=\"ndt-dropdown-item\"\r\n [class.ndt-danger]=\"!!action.danger\"\r\n (click)=\"onActionItemClick(i, row, $event)\"\r\n >\r\n <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n <span>{{ action.label }}</span>\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"ndt-footer\">\r\n <div>\r\n {{ selectedRows.size }} selected\r\n </div>\r\n\r\n <div>\r\n Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n </div>\r\n\r\n <ul class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n <li [class.disabled]=\"currentPage <= 1\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n </li>\r\n <li *ngFor=\"let page of getPaginationPages()\" [class.active]=\"page === currentPage\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(page)\">{{ page }}</button>\r\n </li>\r\n <li [class.disabled]=\"currentPage >= totalPages\">\r\n <button type=\"button\" class=\"ndt-page-link\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-dark: #4338ca;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:20px;padding:10px;background:#ffffffe6;backdrop-filter:blur(3px);box-shadow:0 20px 45px #2d489124;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:1.05rem 1.35rem}.ndt-header{background:linear-gradient(180deg,#fff,#fafcff);border-bottom:1px solid #eaf0ff}.ndt-title{margin:0;font-size:1.2rem;color:#1b2550}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:center}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.ndt-btn,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #d5def8;background:#fff;color:#445381;border-radius:10px;padding:.36rem .62rem;font-size:.85rem}.ndt-btn:hover{border-color:var(--ndt-primary);background:#4f46e512;color:var(--ndt-primary)}.ndt-toolbar input{min-width:260px}.ndt-toolbar input:focus,.ndt-toolbar select:focus{outline:none;border-color:#4f46e58c;box-shadow:0 0 0 .2rem #4f46e51f}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{margin:0 1.35rem;overflow-x:auto;border:1px solid #e5ecff;border-radius:14px;background:#fff}.ndt-table{width:100%;min-width:920px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.8rem .72rem;text-align:left;border-bottom:1px solid #edf2ff;vertical-align:middle}.ndt-table th{color:#4a577f;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;background:#f7faff;border-bottom:1px solid #e6edff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.82rem;color:#8a98c2;min-width:16px;text-align:center}.ndt-sort-indicator.active{color:var(--ndt-primary)}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-export-btn{display:inline-flex;align-items:center;gap:.42rem}.ndt-chevron{font-size:.72rem;margin-left:.12rem}.ndt-actions-btn{border:1px solid #d2dcfb;background:#f7f9ff;color:#33446e;border-radius:10px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:#eef3ff}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;left:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:120px;border:1px solid #dbe4ff;border-radius:12px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown.ndt-dropup .ndt-dropdown-menu{top:auto;bottom:calc(100% + .35rem)}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item i{font-size:.9rem;width:14px}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#52628a;font-size:.88rem}.ndt-pagination{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:.35rem}.ndt-pagination li{display:inline-flex}.ndt-page-link{border:1px solid #d5def8;background:#fff;color:var(--ndt-primary);border-radius:8px;min-width:34px;height:30px;padding:0 .6rem;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}.ndt-page-link:hover{border-color:var(--ndt-primary);background:#4f46e512}.ndt-pagination li.active .ndt-page-link{background:var(--ndt-primary);border-color:var(--ndt-primary);color:#fff}.ndt-pagination li.disabled .ndt-page-link{opacity:.55;cursor:not-allowed}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}.ndt-toolbar input{min-width:100%}}\n"] }]
|
|
466
466
|
}], propDecorators: { config: [{
|
|
467
467
|
type: Input
|
|
468
468
|
}], columns: [{
|