@nova-design-system/nova-angular 3.17.0 → 3.18.0
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/dist/nova-components/esm2022/lib/components/index.mjs +2 -1
- package/dist/nova-components/esm2022/lib/components/nv-datatable-cell.directive.mjs +37 -0
- package/dist/nova-components/esm2022/lib/components/nv-datatable.component.mjs +267 -40
- package/dist/nova-components/esm2022/lib/nova-components.module.mjs +1 -1
- package/dist/nova-components/esm2022/lib/stencil-generated/component-value-accessors.mjs +37 -1
- package/dist/nova-components/esm2022/lib/stencil-generated/components.mjs +1 -1
- package/dist/nova-components/fesm2022/nova-components.mjs +337 -41
- package/dist/nova-components/fesm2022/nova-components.mjs.map +1 -1
- package/dist/nova-components/lib/components/index.d.ts +1 -0
- package/dist/nova-components/lib/components/nv-datatable-cell.directive.d.ts +37 -0
- package/dist/nova-components/lib/components/nv-datatable.component.d.ts +95 -3
- package/dist/nova-components/lib/nova-components.module.d.ts +1 -1
- package/dist/nova-components/lib/stencil-generated/component-value-accessors.d.ts +7 -0
- package/dist/nova-components/lib/stencil-generated/components.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, untracked, computed, InjectionToken, inject, reflectComponentType, ViewContainerRef, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, Injector, runInInjectionContext, effect,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, Input, Directive, untracked, computed, InjectionToken, inject, reflectComponentType, ViewContainerRef, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, Injector, runInInjectionContext, effect, Inject, signal, input, viewChild, ContentChildren, ContentChild, CUSTOM_ELEMENTS_SCHEMA, HostListener, ElementRef, ViewChildren, APP_INITIALIZER, NgModule } from '@angular/core';
|
|
3
3
|
import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
|
|
4
4
|
import { __decorate } from 'tslib';
|
|
5
5
|
import { fromEvent, BehaviorSubject } from 'rxjs';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
|
-
import { memo, createTable, getCoreRowModel } from '@tanstack/table-core';
|
|
8
|
+
import { memo, createTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
|
|
9
9
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
10
|
export * from '@nova-design-system/nova-webcomponents/constants';
|
|
11
11
|
|
|
@@ -1331,6 +1331,41 @@ const DIRECTIVES = [
|
|
|
1331
1331
|
NvTooltip
|
|
1332
1332
|
];
|
|
1333
1333
|
|
|
1334
|
+
/**
|
|
1335
|
+
* Directive to mark ng-templates as cell templates for specific fields.
|
|
1336
|
+
*
|
|
1337
|
+
* @example
|
|
1338
|
+
* ```html
|
|
1339
|
+
* <nv-datatable [columns]="columns" [rows]="data">
|
|
1340
|
+
* <ng-template nvDatatableCell="name" let-context>
|
|
1341
|
+
* <div class="font-semibold">{{ context.value }}</div>
|
|
1342
|
+
* </ng-template>
|
|
1343
|
+
*
|
|
1344
|
+
* <ng-template nvDatatableCell="price" let-context>
|
|
1345
|
+
* <span class="font-mono">${{ context.value }}</span>
|
|
1346
|
+
* </ng-template>
|
|
1347
|
+
* </nv-datatable>
|
|
1348
|
+
* ```
|
|
1349
|
+
*/
|
|
1350
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1351
|
+
class NvDatatableCellDirective {
|
|
1352
|
+
constructor(template) {
|
|
1353
|
+
this.template = template;
|
|
1354
|
+
}
|
|
1355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvDatatableCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1356
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: NvDatatableCellDirective, isStandalone: true, selector: "ng-template[nvDatatableCell]", inputs: { nvDatatableCell: "nvDatatableCell" }, ngImport: i0 }); }
|
|
1357
|
+
}
|
|
1358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvDatatableCellDirective, decorators: [{
|
|
1359
|
+
type: Directive,
|
|
1360
|
+
args: [{
|
|
1361
|
+
selector: 'ng-template[nvDatatableCell]',
|
|
1362
|
+
standalone: true,
|
|
1363
|
+
}]
|
|
1364
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { nvDatatableCell: [{
|
|
1365
|
+
type: Input,
|
|
1366
|
+
args: [{ required: true }]
|
|
1367
|
+
}] } });
|
|
1368
|
+
|
|
1334
1369
|
/**
|
|
1335
1370
|
* Implementation from @tanstack/angular-query
|
|
1336
1371
|
* {@link https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
|
|
@@ -2062,38 +2097,227 @@ function createAngularTable(options) {
|
|
|
2062
2097
|
* Nova Datatable built on TanStack Table (Angular).
|
|
2063
2098
|
*/
|
|
2064
2099
|
class NvDatatable {
|
|
2100
|
+
/** Public getter for table instance. */
|
|
2101
|
+
table() {
|
|
2102
|
+
return this.tableInstance();
|
|
2103
|
+
}
|
|
2065
2104
|
constructor() {
|
|
2066
2105
|
/** Column definitions */
|
|
2067
2106
|
this.columns = input([]);
|
|
2068
2107
|
/** Row data */
|
|
2069
2108
|
this.rows = input([]);
|
|
2109
|
+
/** Optional pagination configuration */
|
|
2110
|
+
this.pagination = input(undefined);
|
|
2111
|
+
/** Should the header stick to the top of the table when scrolling? */
|
|
2112
|
+
this.stickyHeader = input(false);
|
|
2113
|
+
/** Signal to track cell templates array */
|
|
2114
|
+
this.cellTemplatesSignal = signal([]);
|
|
2115
|
+
/** Map of field names to cell templates */
|
|
2116
|
+
this.cellTemplateMap = computed(() => {
|
|
2117
|
+
const map = new Map();
|
|
2118
|
+
this.cellTemplatesSignal().forEach((directive) => {
|
|
2119
|
+
map.set(directive.nvDatatableCell, directive.template);
|
|
2120
|
+
});
|
|
2121
|
+
return map;
|
|
2122
|
+
});
|
|
2123
|
+
/** Pagination state for server mode */
|
|
2124
|
+
this.paginationState = signal({
|
|
2125
|
+
pageIndex: 0,
|
|
2126
|
+
pageSize: this.pagination()?.initialPageSize || 10,
|
|
2127
|
+
});
|
|
2128
|
+
/** Reference to table rows for infinite scroll observer */
|
|
2129
|
+
this.tableRows = viewChild('tableRow');
|
|
2130
|
+
/** Intersection observer for infinite scroll */
|
|
2131
|
+
this.observer = null;
|
|
2132
|
+
/** Helper to check if using infinite scroll */
|
|
2133
|
+
this.isInfiniteScroll = computed(() => this.pagination()?.mode === 'infinite');
|
|
2070
2134
|
/** Computed table columns with proper typing and filtering. */
|
|
2071
|
-
this.tableColumns = computed(() =>
|
|
2072
|
-
|
|
2073
|
-
.
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2135
|
+
this.tableColumns = computed(() => {
|
|
2136
|
+
const templateMap = this.cellTemplateMap();
|
|
2137
|
+
return this.columns()
|
|
2138
|
+
.filter((col) => !col.hidden)
|
|
2139
|
+
.map((col) => ({
|
|
2140
|
+
accessorKey: col.field,
|
|
2141
|
+
header: col.headerName || String(col.field),
|
|
2142
|
+
size: col.width,
|
|
2143
|
+
enableResizing: col.resizable ?? true,
|
|
2144
|
+
cell: (context) => {
|
|
2145
|
+
const fieldName = String(col.field);
|
|
2146
|
+
const cellTemplate = templateMap.get(fieldName);
|
|
2147
|
+
// Priority: template > renderCell > default
|
|
2148
|
+
if (cellTemplate) {
|
|
2149
|
+
// Return TemplateRef directly - FlexRender will handle it
|
|
2150
|
+
return cellTemplate;
|
|
2151
|
+
}
|
|
2152
|
+
// Fall back to renderCell if provided
|
|
2153
|
+
if (col.renderCell) {
|
|
2154
|
+
return col.renderCell(context);
|
|
2155
|
+
}
|
|
2156
|
+
// Default: just return the value
|
|
2157
|
+
return context.getValue();
|
|
2158
|
+
},
|
|
2159
|
+
}));
|
|
2160
|
+
});
|
|
2081
2161
|
/** TanStack table instance with Signals */
|
|
2082
|
-
this.tableInstance = createAngularTable(() =>
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2162
|
+
this.tableInstance = createAngularTable(() => {
|
|
2163
|
+
const paginationConfig = this.pagination();
|
|
2164
|
+
if (!paginationConfig || paginationConfig.mode === 'infinite') {
|
|
2165
|
+
// No pagination or infinite scroll - simple config
|
|
2166
|
+
return {
|
|
2167
|
+
data: this.rows(),
|
|
2168
|
+
columns: this.tableColumns(),
|
|
2169
|
+
getCoreRowModel: getCoreRowModel(),
|
|
2170
|
+
};
|
|
2171
|
+
}
|
|
2172
|
+
else if (paginationConfig.mode === 'client') {
|
|
2173
|
+
// Client-side pagination
|
|
2174
|
+
return {
|
|
2175
|
+
data: this.rows(),
|
|
2176
|
+
columns: this.tableColumns(),
|
|
2177
|
+
getCoreRowModel: getCoreRowModel(),
|
|
2178
|
+
getPaginationRowModel: getPaginationRowModel(),
|
|
2179
|
+
initialState: {
|
|
2180
|
+
pagination: {
|
|
2181
|
+
pageIndex: 0,
|
|
2182
|
+
pageSize: paginationConfig.initialPageSize || 10,
|
|
2183
|
+
},
|
|
2184
|
+
},
|
|
2185
|
+
};
|
|
2186
|
+
}
|
|
2187
|
+
else {
|
|
2188
|
+
// Server-side pagination
|
|
2189
|
+
const pageSize = this.paginationState().pageSize;
|
|
2190
|
+
return {
|
|
2191
|
+
data: this.rows(),
|
|
2192
|
+
columns: this.tableColumns(),
|
|
2193
|
+
getCoreRowModel: getCoreRowModel(),
|
|
2194
|
+
manualPagination: true,
|
|
2195
|
+
pageCount: paginationConfig.totalPageCount !== undefined
|
|
2196
|
+
? paginationConfig.totalPageCount
|
|
2197
|
+
: paginationConfig.totalRowCount !== undefined
|
|
2198
|
+
? Math.ceil(paginationConfig.totalRowCount / pageSize)
|
|
2199
|
+
: -1,
|
|
2200
|
+
state: {
|
|
2201
|
+
pagination: this.paginationState(),
|
|
2202
|
+
},
|
|
2203
|
+
onPaginationChange: (updaterOrValue) => {
|
|
2204
|
+
if (typeof updaterOrValue === 'function') {
|
|
2205
|
+
this.paginationState.set(updaterOrValue(this.paginationState()));
|
|
2206
|
+
}
|
|
2207
|
+
else {
|
|
2208
|
+
this.paginationState.set(updaterOrValue);
|
|
2209
|
+
}
|
|
2210
|
+
},
|
|
2211
|
+
};
|
|
2212
|
+
}
|
|
2213
|
+
});
|
|
2214
|
+
/** Build pagination API for template */
|
|
2215
|
+
this.paginationAPI = computed(() => {
|
|
2216
|
+
const paginationConfig = this.pagination();
|
|
2217
|
+
if (!paginationConfig) {
|
|
2218
|
+
return null;
|
|
2219
|
+
}
|
|
2220
|
+
const table = this.table();
|
|
2221
|
+
const tablePaginationState = table.getState().pagination;
|
|
2222
|
+
const pageCount = table.getPageCount();
|
|
2223
|
+
const rowCount = paginationConfig.mode === 'server'
|
|
2224
|
+
? paginationConfig.totalRowCount || this.rows().length
|
|
2225
|
+
: this.rows().length;
|
|
2226
|
+
return {
|
|
2227
|
+
pageIndex: tablePaginationState.pageIndex,
|
|
2228
|
+
pageSize: tablePaginationState.pageSize,
|
|
2229
|
+
pageCount,
|
|
2230
|
+
rowCount,
|
|
2231
|
+
firstPage: () => table.setPageIndex(0),
|
|
2232
|
+
previousPage: () => table.previousPage(),
|
|
2233
|
+
nextPage: () => table.nextPage(),
|
|
2234
|
+
lastPage: () => table.setPageIndex(pageCount - 1),
|
|
2235
|
+
setPageIndex: (index) => table.setPageIndex(index),
|
|
2236
|
+
setPageSize: (size) => table.setPageSize(size),
|
|
2237
|
+
canPreviousPage: table.getCanPreviousPage(),
|
|
2238
|
+
canNextPage: table.getCanNextPage(),
|
|
2239
|
+
isLoading: paginationConfig.mode === 'infinite'
|
|
2240
|
+
? paginationConfig.isLoading
|
|
2241
|
+
: undefined,
|
|
2242
|
+
hasMore: paginationConfig.mode === 'infinite'
|
|
2243
|
+
? paginationConfig.hasMore
|
|
2244
|
+
: undefined,
|
|
2245
|
+
};
|
|
2246
|
+
});
|
|
2247
|
+
// Watch pagination state changes for server mode
|
|
2248
|
+
effect(() => {
|
|
2249
|
+
const paginationConfig = this.pagination();
|
|
2250
|
+
const state = this.paginationState();
|
|
2251
|
+
if (paginationConfig?.mode === 'server' &&
|
|
2252
|
+
paginationConfig.onPaginationChange) {
|
|
2253
|
+
paginationConfig.onPaginationChange({
|
|
2254
|
+
pageIndex: state.pageIndex,
|
|
2255
|
+
pageSize: state.pageSize,
|
|
2256
|
+
});
|
|
2257
|
+
}
|
|
2258
|
+
}, { allowSignalWrites: true });
|
|
2259
|
+
// Set up intersection observer for infinite scroll
|
|
2260
|
+
effect(() => {
|
|
2261
|
+
const paginationConfig = this.pagination();
|
|
2262
|
+
const rows = this.rows(); // Track rows changes
|
|
2263
|
+
// Clean up existing observer
|
|
2264
|
+
if (this.observer) {
|
|
2265
|
+
this.observer.disconnect();
|
|
2266
|
+
this.observer = null;
|
|
2267
|
+
}
|
|
2268
|
+
// Only set up observer for infinite scroll mode
|
|
2269
|
+
if (paginationConfig?.mode !== 'infinite' || rows.length === 0) {
|
|
2270
|
+
return;
|
|
2271
|
+
}
|
|
2272
|
+
// Use setTimeout to ensure DOM is updated
|
|
2273
|
+
setTimeout(() => {
|
|
2274
|
+
const threshold = paginationConfig.loadMoreThreshold || 500;
|
|
2275
|
+
// Find the last row element
|
|
2276
|
+
const tableRowElements = document.querySelectorAll('[data-is-last="true"]');
|
|
2277
|
+
const lastRowElement = tableRowElements[tableRowElements.length - 1];
|
|
2278
|
+
if (!lastRowElement) {
|
|
2279
|
+
return;
|
|
2280
|
+
}
|
|
2281
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
2282
|
+
const entry = entries[0];
|
|
2283
|
+
if (entry.isIntersecting &&
|
|
2284
|
+
paginationConfig.mode === 'infinite' &&
|
|
2285
|
+
paginationConfig.hasMore &&
|
|
2286
|
+
!paginationConfig.isLoading &&
|
|
2287
|
+
paginationConfig.onLoadMore) {
|
|
2288
|
+
paginationConfig.onLoadMore();
|
|
2289
|
+
}
|
|
2290
|
+
}, {
|
|
2291
|
+
rootMargin: `${threshold}px`,
|
|
2292
|
+
root: null,
|
|
2293
|
+
});
|
|
2294
|
+
this.observer.observe(lastRowElement);
|
|
2295
|
+
}, 0);
|
|
2296
|
+
}, { allowSignalWrites: true });
|
|
2087
2297
|
}
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2298
|
+
ngAfterViewInit() {
|
|
2299
|
+
// Sync cell templates QueryList to signal
|
|
2300
|
+
if (this.cellTemplates) {
|
|
2301
|
+
this.cellTemplatesSignal.set(this.cellTemplates.toArray());
|
|
2302
|
+
// Subscribe to changes in the QueryList
|
|
2303
|
+
this.cellTemplates.changes.subscribe(() => {
|
|
2304
|
+
if (this.cellTemplates) {
|
|
2305
|
+
this.cellTemplatesSignal.set(this.cellTemplates.toArray());
|
|
2306
|
+
}
|
|
2307
|
+
});
|
|
2308
|
+
}
|
|
2309
|
+
}
|
|
2310
|
+
ngOnDestroy() {
|
|
2311
|
+
if (this.observer) {
|
|
2312
|
+
this.observer.disconnect();
|
|
2313
|
+
this.observer = null;
|
|
2314
|
+
}
|
|
2091
2315
|
}
|
|
2092
2316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvDatatable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: NvDatatable, isStandalone: true, selector: "nv-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
2317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: NvDatatable, isStandalone: true, selector: "nv-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "paginationTemplate", first: true, predicate: ["paginationTemplate"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: NvDatatableCellDirective }], viewQueries: [{ propertyName: "tableRows", first: true, predicate: ["tableRow"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2094
2318
|
<nv-table>
|
|
2095
2319
|
<table>
|
|
2096
|
-
<thead>
|
|
2320
|
+
<thead [attr.data-sticky-top]="stickyHeader() ? 'true' : null">
|
|
2097
2321
|
@for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
|
|
2098
2322
|
{
|
|
2099
2323
|
<tr>
|
|
@@ -2119,14 +2343,19 @@ class NvDatatable {
|
|
|
2119
2343
|
</thead>
|
|
2120
2344
|
|
|
2121
2345
|
<tbody>
|
|
2122
|
-
@for (row of table().getRowModel().rows; track row.id)
|
|
2123
|
-
|
|
2346
|
+
@for (row of table().getRowModel().rows; track row.id; let i = $index)
|
|
2347
|
+
{
|
|
2348
|
+
<tr
|
|
2349
|
+
[attr.data-testid]="'datatable-row-' + row.id"
|
|
2350
|
+
#tableRow
|
|
2351
|
+
[attr.data-is-last]="
|
|
2352
|
+
isInfiniteScroll() && i === table().getRowModel().rows.length - 1
|
|
2353
|
+
? 'true'
|
|
2354
|
+
: null
|
|
2355
|
+
"
|
|
2356
|
+
>
|
|
2124
2357
|
@for (cell of row.getVisibleCells(); track cell.id) {
|
|
2125
|
-
<td
|
|
2126
|
-
[attr.data-testid]="'datatable-cell-' + cell.id"
|
|
2127
|
-
style="padding: 8px; border-bottom: 1px solid #eee;"
|
|
2128
|
-
>
|
|
2129
|
-
<!-- Let FlexRender handle strings vs TemplateRef -->
|
|
2358
|
+
<td [attr.data-testid]="'datatable-cell-' + cell.id">
|
|
2130
2359
|
<ng-container
|
|
2131
2360
|
*flexRender="
|
|
2132
2361
|
cell.column.columnDef.cell;
|
|
@@ -2143,7 +2372,17 @@ class NvDatatable {
|
|
|
2143
2372
|
</tbody>
|
|
2144
2373
|
</table>
|
|
2145
2374
|
</nv-table>
|
|
2146
|
-
|
|
2375
|
+
|
|
2376
|
+
<!-- Render pagination if configured -->
|
|
2377
|
+
@if (paginationAPI()) {
|
|
2378
|
+
<ng-container
|
|
2379
|
+
*ngTemplateOutlet="
|
|
2380
|
+
paginationTemplate || null;
|
|
2381
|
+
context: { $implicit: paginationAPI() }
|
|
2382
|
+
"
|
|
2383
|
+
></ng-container>
|
|
2384
|
+
}
|
|
2385
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }] }); }
|
|
2147
2386
|
}
|
|
2148
2387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvDatatable, decorators: [{
|
|
2149
2388
|
type: Component,
|
|
@@ -2155,7 +2394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
2155
2394
|
template: `
|
|
2156
2395
|
<nv-table>
|
|
2157
2396
|
<table>
|
|
2158
|
-
<thead>
|
|
2397
|
+
<thead [attr.data-sticky-top]="stickyHeader() ? 'true' : null">
|
|
2159
2398
|
@for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
|
|
2160
2399
|
{
|
|
2161
2400
|
<tr>
|
|
@@ -2181,14 +2420,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
2181
2420
|
</thead>
|
|
2182
2421
|
|
|
2183
2422
|
<tbody>
|
|
2184
|
-
@for (row of table().getRowModel().rows; track row.id)
|
|
2185
|
-
|
|
2423
|
+
@for (row of table().getRowModel().rows; track row.id; let i = $index)
|
|
2424
|
+
{
|
|
2425
|
+
<tr
|
|
2426
|
+
[attr.data-testid]="'datatable-row-' + row.id"
|
|
2427
|
+
#tableRow
|
|
2428
|
+
[attr.data-is-last]="
|
|
2429
|
+
isInfiniteScroll() && i === table().getRowModel().rows.length - 1
|
|
2430
|
+
? 'true'
|
|
2431
|
+
: null
|
|
2432
|
+
"
|
|
2433
|
+
>
|
|
2186
2434
|
@for (cell of row.getVisibleCells(); track cell.id) {
|
|
2187
|
-
<td
|
|
2188
|
-
[attr.data-testid]="'datatable-cell-' + cell.id"
|
|
2189
|
-
style="padding: 8px; border-bottom: 1px solid #eee;"
|
|
2190
|
-
>
|
|
2191
|
-
<!-- Let FlexRender handle strings vs TemplateRef -->
|
|
2435
|
+
<td [attr.data-testid]="'datatable-cell-' + cell.id">
|
|
2192
2436
|
<ng-container
|
|
2193
2437
|
*flexRender="
|
|
2194
2438
|
cell.column.columnDef.cell;
|
|
@@ -2205,9 +2449,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
2205
2449
|
</tbody>
|
|
2206
2450
|
</table>
|
|
2207
2451
|
</nv-table>
|
|
2452
|
+
|
|
2453
|
+
<!-- Render pagination if configured -->
|
|
2454
|
+
@if (paginationAPI()) {
|
|
2455
|
+
<ng-container
|
|
2456
|
+
*ngTemplateOutlet="
|
|
2457
|
+
paginationTemplate || null;
|
|
2458
|
+
context: { $implicit: paginationAPI() }
|
|
2459
|
+
"
|
|
2460
|
+
></ng-container>
|
|
2461
|
+
}
|
|
2208
2462
|
`,
|
|
2209
2463
|
}]
|
|
2210
|
-
}]
|
|
2464
|
+
}], ctorParameters: () => [], propDecorators: { paginationTemplate: [{
|
|
2465
|
+
type: ContentChild,
|
|
2466
|
+
args: ['paginationTemplate', { read: TemplateRef }]
|
|
2467
|
+
}], cellTemplates: [{
|
|
2468
|
+
type: ContentChildren,
|
|
2469
|
+
args: [NvDatatableCellDirective]
|
|
2470
|
+
}] } });
|
|
2211
2471
|
|
|
2212
2472
|
class ValueAccessor {
|
|
2213
2473
|
constructor(el) {
|
|
@@ -2843,6 +3103,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
2843
3103
|
type: HostListener,
|
|
2844
3104
|
args: ['valueChanged', ['$event']]
|
|
2845
3105
|
}] } });
|
|
3106
|
+
class NvFieldtimeValueAccessor extends ValueAccessor {
|
|
3107
|
+
constructor(el) {
|
|
3108
|
+
super(el);
|
|
3109
|
+
}
|
|
3110
|
+
handleValueChanged(event) {
|
|
3111
|
+
this.handleChangeEvent(event.target.value);
|
|
3112
|
+
}
|
|
3113
|
+
writeValue(value) {
|
|
3114
|
+
this.el.nativeElement.value = this.lastValue = value;
|
|
3115
|
+
}
|
|
3116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvFieldtimeValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3117
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: NvFieldtimeValueAccessor, selector: "nv-fieldtime", host: { listeners: { "valueChanged": "handleValueChanged($event)" } }, providers: [
|
|
3118
|
+
{
|
|
3119
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3120
|
+
useExisting: NvFieldtimeValueAccessor,
|
|
3121
|
+
multi: true,
|
|
3122
|
+
},
|
|
3123
|
+
], usesInheritance: true, ngImport: i0 }); }
|
|
3124
|
+
}
|
|
3125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NvFieldtimeValueAccessor, decorators: [{
|
|
3126
|
+
type: Directive,
|
|
3127
|
+
args: [{
|
|
3128
|
+
selector: 'nv-fieldtime',
|
|
3129
|
+
providers: [
|
|
3130
|
+
{
|
|
3131
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3132
|
+
useExisting: NvFieldtimeValueAccessor,
|
|
3133
|
+
multi: true,
|
|
3134
|
+
},
|
|
3135
|
+
],
|
|
3136
|
+
}]
|
|
3137
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleValueChanged: [{
|
|
3138
|
+
type: HostListener,
|
|
3139
|
+
args: ['valueChanged', ['$event']]
|
|
3140
|
+
}] } });
|
|
2846
3141
|
class NvNotificationValueAccessor extends ValueAccessor {
|
|
2847
3142
|
constructor(el) {
|
|
2848
3143
|
super(el);
|
|
@@ -3036,6 +3331,7 @@ const VALUE_ACCESSORS = [
|
|
|
3036
3331
|
NvFieldsliderValueAccessor,
|
|
3037
3332
|
NvFieldtextValueAccessor,
|
|
3038
3333
|
NvFieldtextareaValueAccessor,
|
|
3334
|
+
NvFieldtimeValueAccessor,
|
|
3039
3335
|
NvNotificationValueAccessor,
|
|
3040
3336
|
NvPopoverValueAccessor,
|
|
3041
3337
|
NvSplitValueAccessor,
|
|
@@ -3379,7 +3675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
3379
3675
|
}] });
|
|
3380
3676
|
class NovaComponentsValueAccessorModule {
|
|
3381
3677
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NovaComponentsValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3382
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: NovaComponentsValueAccessorModule, declarations: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
|
|
3678
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: NovaComponentsValueAccessorModule, declarations: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvFieldtimeValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvSplitValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
|
|
3383
3679
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NovaComponentsValueAccessorModule }); }
|
|
3384
3680
|
}
|
|
3385
3681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NovaComponentsValueAccessorModule, decorators: [{
|
|
@@ -3410,5 +3706,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
3410
3706
|
* Generated bundle index. Do not edit.
|
|
3411
3707
|
*/
|
|
3412
3708
|
|
|
3413
|
-
export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsProvidersModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
|
|
3709
|
+
export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsProvidersModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
|
|
3414
3710
|
//# sourceMappingURL=nova-components.mjs.map
|