@3kles/kles-material-table-v2 22.1.0 → 22.1.2
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i18 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, signal, inject, Optional, DestroyRef, Component, output,
|
|
4
|
+
import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, signal, inject, Optional, DestroyRef, ChangeDetectorRef, Component, output, ChangeDetectionStrategy, ElementRef, HostListener, Input, EventEmitter, Injector, ViewChildren, ViewChild, effect, contentChild, Output, NgModule } from '@angular/core';
|
|
5
5
|
import * as i19 from '@angular/forms';
|
|
6
6
|
import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i2 from '@angular/material/button';
|
|
@@ -24,7 +24,7 @@ import * as i25 from '@angular/cdk/drag-drop';
|
|
|
24
24
|
import { CdkDragHandle, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
25
25
|
import * as i26 from '@angular/material/progress-spinner';
|
|
26
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
27
|
-
import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip,
|
|
27
|
+
import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, merge, defer, defaultIfEmpty, fromEvent, skip, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
|
|
28
28
|
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
29
29
|
import * as _ from 'lodash';
|
|
30
30
|
import ___default from 'lodash';
|
|
@@ -1418,12 +1418,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1418
1418
|
type: Injectable
|
|
1419
1419
|
}], ctorParameters: () => [] });
|
|
1420
1420
|
|
|
1421
|
+
class ExtraRowService {
|
|
1422
|
+
constructor(_extraRowsConfig, expandedRowStore) {
|
|
1423
|
+
this._extraRowsConfig = _extraRowsConfig;
|
|
1424
|
+
this.expandedRowStore = expandedRowStore;
|
|
1425
|
+
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
|
|
1426
|
+
...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
|
|
1427
|
+
this.rows = computed(() => this._extraRowsConfig().map((config) => ({
|
|
1428
|
+
...config,
|
|
1429
|
+
when: this.createWhen(config),
|
|
1430
|
+
displayedColumns: config.cells.map((cel) => cel.columnDef),
|
|
1431
|
+
})), /* @ts-ignore */
|
|
1432
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1433
|
+
}
|
|
1434
|
+
extraFields() {
|
|
1435
|
+
return this._extraRowsConfig()
|
|
1436
|
+
.flatMap((config) => config.cells)
|
|
1437
|
+
.filter(Boolean)
|
|
1438
|
+
.map((cell) => ({ ...cell.field, name: cell.columnDef }));
|
|
1439
|
+
}
|
|
1440
|
+
canExpand(index, row) {
|
|
1441
|
+
return this._extraRowsConfig().some(config => config.mode === 'expand' && (config.when?.(index, row) ?? true));
|
|
1442
|
+
}
|
|
1443
|
+
createWhen(config) {
|
|
1444
|
+
if (config.mode === 'expand') {
|
|
1445
|
+
return (index, row) => {
|
|
1446
|
+
return (config.when?.(index, row) ?? true) && this.expandedRowStore.isExpanded(row.getRawValue()._id);
|
|
1447
|
+
};
|
|
1448
|
+
}
|
|
1449
|
+
else {
|
|
1450
|
+
return config?.when;
|
|
1451
|
+
}
|
|
1452
|
+
}
|
|
1453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1454
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
|
|
1455
|
+
}
|
|
1456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
|
|
1457
|
+
type: Injectable
|
|
1458
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1459
|
+
type: Inject,
|
|
1460
|
+
args: [EXTRA_ROWS]
|
|
1461
|
+
}] }, { type: ExpandedRowStore }] });
|
|
1462
|
+
|
|
1463
|
+
class KlesTableIntl {
|
|
1464
|
+
constructor() {
|
|
1465
|
+
this.changes = new Subject();
|
|
1466
|
+
this.emptyStateTitle = 'No data';
|
|
1467
|
+
this.emptyStateDescription = 'There are no rows to display.';
|
|
1468
|
+
this.emptyStateRefreshLabel = 'Refresh';
|
|
1469
|
+
this.keyboardNavigationEntryLabel = 'Go to table rows';
|
|
1470
|
+
this.expandRowLabel = 'Expand row';
|
|
1471
|
+
this.collapseRowLabel = 'Collapse row';
|
|
1472
|
+
this.moveRowLabel = 'Move row';
|
|
1473
|
+
}
|
|
1474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1475
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
|
|
1476
|
+
}
|
|
1477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
|
|
1478
|
+
type: Injectable,
|
|
1479
|
+
args: [{
|
|
1480
|
+
providedIn: 'root',
|
|
1481
|
+
}]
|
|
1482
|
+
}] });
|
|
1483
|
+
|
|
1421
1484
|
class KlesCellComponent {
|
|
1422
1485
|
constructor() {
|
|
1423
1486
|
this.destroyRef = inject(DestroyRef);
|
|
1424
1487
|
this.expandedRowStore = inject(ExpandedRowStore);
|
|
1425
1488
|
this.treeService = inject(TreeService);
|
|
1426
1489
|
this.eventsService = inject(EventsService);
|
|
1490
|
+
this.extraRowService = inject(ExtraRowService);
|
|
1491
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
1492
|
+
this.intl = inject(KlesTableIntl);
|
|
1427
1493
|
this.ui = input.required(/* @ts-ignore */
|
|
1428
1494
|
...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
|
|
1429
1495
|
this.group = input.required(/* @ts-ignore */
|
|
@@ -1454,11 +1520,19 @@ class KlesCellComponent {
|
|
|
1454
1520
|
}
|
|
1455
1521
|
ngOnInit() {
|
|
1456
1522
|
this.listen();
|
|
1523
|
+
merge(this.intl.changes, this.group().valueChanges)
|
|
1524
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1525
|
+
.subscribe(() => this.changeDetectorRef.markForCheck());
|
|
1457
1526
|
}
|
|
1458
1527
|
stopPropagation(event) {
|
|
1459
1528
|
event.stopPropagation();
|
|
1460
1529
|
}
|
|
1530
|
+
canExpandRow() {
|
|
1531
|
+
return !!this.column().canExpand && this.extraRowService.canExpand(this.rowIndex(), this.group());
|
|
1532
|
+
}
|
|
1461
1533
|
expandRow() {
|
|
1534
|
+
if (!this.canExpandRow())
|
|
1535
|
+
return;
|
|
1462
1536
|
const row = this.group();
|
|
1463
1537
|
const expanded = this.expandedRowStore.isExpanded(row.getRawValue()._id);
|
|
1464
1538
|
this.expandedRowStore.toggle(row.getRawValue()._id);
|
|
@@ -1496,11 +1570,11 @@ class KlesCellComponent {
|
|
|
1496
1570
|
});
|
|
1497
1571
|
}
|
|
1498
1572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n <button\n type=\"button\"\n matIconButton\n cdkDragHandle\n class=\"drag-handle\"\n aria-label=\"
|
|
1573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesCellComponent, isStandalone: true, selector: "kles-cell", inputs: { ui: { classPropertyName: "ui", publicName: "ui", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dragHandle()) {\n <button\n type=\"button\"\n matIconButton\n cdkDragHandle\n class=\"drag-handle\"\n [attr.aria-label]=\"intl.moveRowLabel\"\n (click)=\"stopPropagation($event)\"\n (dblclick)=\"stopPropagation($event)\"\n >\n <mat-icon>drag_indicator</mat-icon>\n </button>\n}\n@if (column().canExpand) {\n <button type=\"button\" matIconButton class=\"expand-button\" [disabled]=\"!canExpandRow()\"\n [attr.aria-expanded]=\"expandedRow()\"\n [attr.aria-label]=\"expandedRow() ? intl.collapseRowLabel : intl.expandRowLabel\"\n (click)=\"expandRow(); stopPropagation($event)\">\n @if (this.expandedRow()) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>chevron_right</mat-icon>\n }\n </button>\n}\n@if (column().canExpandNode) {\n <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n @if (hasChildren()) {\n <button\n matIconButton\n class=\"expand-button\"\n [disabled]=\"loadingNode()\"\n [attr.aria-expanded]=\"expandedNode()\"\n [attr.aria-label]=\"expandedNode() ? intl.collapseRowLabel : intl.expandRowLabel\"\n (click)=\"expandNode(); stopPropagation($event)\"\n >\n @if (loadingNode()) {\n <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n } @else if (expandedNode()) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>chevron_right</mat-icon>\n }\n </button>\n } @else {\n <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
1500
1574
|
}
|
|
1501
1575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, decorators: [{
|
|
1502
1576
|
type: Component,
|
|
1503
|
-
args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n <button\n type=\"button\"\n matIconButton\n cdkDragHandle\n class=\"drag-handle\"\n aria-label=\"
|
|
1577
|
+
args: [{ selector: 'kles-cell', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, CdkDragHandle], template: "@if (dragHandle()) {\n <button\n type=\"button\"\n matIconButton\n cdkDragHandle\n class=\"drag-handle\"\n [attr.aria-label]=\"intl.moveRowLabel\"\n (click)=\"stopPropagation($event)\"\n (dblclick)=\"stopPropagation($event)\"\n >\n <mat-icon>drag_indicator</mat-icon>\n </button>\n}\n@if (column().canExpand) {\n <button type=\"button\" matIconButton class=\"expand-button\" [disabled]=\"!canExpandRow()\"\n [attr.aria-expanded]=\"expandedRow()\"\n [attr.aria-label]=\"expandedRow() ? intl.collapseRowLabel : intl.expandRowLabel\"\n (click)=\"expandRow(); stopPropagation($event)\">\n @if (this.expandedRow()) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>chevron_right</mat-icon>\n }\n </button>\n}\n@if (column().canExpandNode) {\n <span class=\"tree-indent\" [style.width.px]=\"depth() * 24\" aria-hidden=\"true\"></span>\n @if (hasChildren()) {\n <button\n matIconButton\n class=\"expand-button\"\n [disabled]=\"loadingNode()\"\n [attr.aria-expanded]=\"expandedNode()\"\n [attr.aria-label]=\"expandedNode() ? intl.collapseRowLabel : intl.expandRowLabel\"\n (click)=\"expandNode(); stopPropagation($event)\"\n >\n @if (loadingNode()) {\n <mat-icon class=\"tree-loading-icon\">more_horiz</mat-icon>\n } @else if (expandedNode()) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>chevron_right</mat-icon>\n }\n </button>\n } @else {\n <span class=\"expand-button-spacer\" aria-hidden=\"true\"></span>\n }\n}\n<div class=\"cell-field\"><ng-content></ng-content></div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:inherit;gap:5px;align-items:center}.cell-field{min-width:0;flex-grow:1;justify-content:inherit;flex-direction:column;display:flex;text-align:var(--align, center)}.tree-indent{flex:0 0 auto}.expand-button-spacer{flex:0 0 28px;width:28px;height:28px}.tree-loading-icon{animation:tree-loading-pulse .8s ease-in-out infinite alternate}@keyframes tree-loading-pulse{0%{opacity:.35}to{opacity:1}}.expand-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 22px;width:28px;height:28px;padding:0;display:grid;place-items:center}.expand-button.mat-mdc-icon-button .mat-icon{width:22px;height:22px;font-size:22px;line-height:22px;margin:0}.drag-handle.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 32px;--mdc-icon-button-icon-size: 24px;flex:0 0 32px;width:32px;height:32px;padding:0;cursor:grab;touch-action:none;display:grid;place-items:center}.drag-handle.mat-mdc-icon-button .mat-icon{width:24px;height:24px;font-size:24px;line-height:24px;margin:0}.drag-handle.mat-mdc-icon-button:active{cursor:grabbing}\n"] }]
|
|
1504
1578
|
}], propDecorators: { ui: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }] } });
|
|
1505
1579
|
|
|
1506
1580
|
class KlesHeaderComponent {
|
|
@@ -1638,24 +1712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1638
1712
|
}]
|
|
1639
1713
|
}] });
|
|
1640
1714
|
|
|
1641
|
-
class KlesTableIntl {
|
|
1642
|
-
constructor() {
|
|
1643
|
-
this.changes = new Subject();
|
|
1644
|
-
this.emptyStateTitle = 'No data';
|
|
1645
|
-
this.emptyStateDescription = 'There are no rows to display.';
|
|
1646
|
-
this.emptyStateRefreshLabel = 'Refresh';
|
|
1647
|
-
this.keyboardNavigationEntryLabel = 'Go to table rows';
|
|
1648
|
-
}
|
|
1649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1650
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
|
|
1651
|
-
}
|
|
1652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
|
|
1653
|
-
type: Injectable,
|
|
1654
|
-
args: [{
|
|
1655
|
-
providedIn: 'root',
|
|
1656
|
-
}]
|
|
1657
|
-
}] });
|
|
1658
|
-
|
|
1659
1715
|
class KlesTableEmptyStateComponent {
|
|
1660
1716
|
constructor() {
|
|
1661
1717
|
this.refreshRequested = output();
|
|
@@ -2341,45 +2397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
2341
2397
|
args: [FOOTER]
|
|
2342
2398
|
}] }, { type: EventsService }] });
|
|
2343
2399
|
|
|
2344
|
-
class ExtraRowService {
|
|
2345
|
-
constructor(_extraRowsConfig, expandedRowStore) {
|
|
2346
|
-
this._extraRowsConfig = _extraRowsConfig;
|
|
2347
|
-
this.expandedRowStore = expandedRowStore;
|
|
2348
|
-
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
|
|
2349
|
-
...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
|
|
2350
|
-
this.rows = computed(() => this._extraRowsConfig().map((config) => ({
|
|
2351
|
-
...config,
|
|
2352
|
-
when: this.createWhen(config),
|
|
2353
|
-
displayedColumns: config.cells.map((cel) => cel.columnDef),
|
|
2354
|
-
})), /* @ts-ignore */
|
|
2355
|
-
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
2356
|
-
}
|
|
2357
|
-
extraFields() {
|
|
2358
|
-
return this._extraRowsConfig()
|
|
2359
|
-
.flatMap((config) => config.cells)
|
|
2360
|
-
.filter(Boolean)
|
|
2361
|
-
.map((cell) => ({ ...cell.field, name: cell.columnDef }));
|
|
2362
|
-
}
|
|
2363
|
-
createWhen(config) {
|
|
2364
|
-
if (config.mode === 'expand') {
|
|
2365
|
-
return (_, row) => {
|
|
2366
|
-
return this.expandedRowStore.isExpanded(row.getRawValue()._id);
|
|
2367
|
-
};
|
|
2368
|
-
}
|
|
2369
|
-
else {
|
|
2370
|
-
return config?.when;
|
|
2371
|
-
}
|
|
2372
|
-
}
|
|
2373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, deps: [{ token: EXTRA_ROWS }, { token: ExpandedRowStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2374
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
|
|
2375
|
-
}
|
|
2376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
|
|
2377
|
-
type: Injectable
|
|
2378
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2379
|
-
type: Inject,
|
|
2380
|
-
args: [EXTRA_ROWS]
|
|
2381
|
-
}] }, { type: ExpandedRowStore }] });
|
|
2382
|
-
|
|
2383
2400
|
class RenderService {
|
|
2384
2401
|
constructor() {
|
|
2385
2402
|
this._render = new EventEmitter();
|
|
@@ -4009,7 +4026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
4009
4026
|
}] }] });
|
|
4010
4027
|
|
|
4011
4028
|
class HeaderService {
|
|
4012
|
-
constructor(fm, filterService, filterStore, datasourceService, loader, columnsService, eventsService) {
|
|
4029
|
+
constructor(fm, filterService, filterStore, datasourceService, loader, columnsService, eventsService, paginatorService) {
|
|
4013
4030
|
this.fm = fm;
|
|
4014
4031
|
this.filterService = filterService;
|
|
4015
4032
|
this.filterStore = filterStore;
|
|
@@ -4017,6 +4034,7 @@ class HeaderService {
|
|
|
4017
4034
|
this.loader = loader;
|
|
4018
4035
|
this.columnsService = columnsService;
|
|
4019
4036
|
this.eventsService = eventsService;
|
|
4037
|
+
this.paginatorService = paginatorService;
|
|
4020
4038
|
this.destroyRef = inject(DestroyRef);
|
|
4021
4039
|
this.filterableColumns = this.columnsService
|
|
4022
4040
|
.columns()
|
|
@@ -4057,6 +4075,7 @@ class HeaderService {
|
|
|
4057
4075
|
changedFilter: undefined,
|
|
4058
4076
|
}))
|
|
4059
4077
|
.subscribe(({ filters, changedFilter }) => {
|
|
4078
|
+
this.paginatorService.firstPage();
|
|
4060
4079
|
if (this.filterService) {
|
|
4061
4080
|
const prepared = this.filterService.formatData(filters);
|
|
4062
4081
|
this.datasourceService.datasource.filter = JSON.stringify(prepared);
|
|
@@ -4082,7 +4101,7 @@ class HeaderService {
|
|
|
4082
4101
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
4083
4102
|
});
|
|
4084
4103
|
}
|
|
4085
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, deps: [{ token: KlesForm }, { token: FilterService, optional: true }, { token: FilterStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4104
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, deps: [{ token: KlesForm }, { token: FilterService, optional: true }, { token: FilterStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }, { token: PaginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4086
4105
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService }); }
|
|
4087
4106
|
}
|
|
4088
4107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, decorators: [{
|
|
@@ -4097,14 +4116,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
4097
4116
|
}] }, { type: undefined, decorators: [{
|
|
4098
4117
|
type: Inject,
|
|
4099
4118
|
args: [LOADER_SERVICE]
|
|
4100
|
-
}] }, { type: ColumnsService }, { type: EventsService }] });
|
|
4119
|
+
}] }, { type: ColumnsService }, { type: EventsService }, { type: PaginatorService }] });
|
|
4101
4120
|
class HeaderLazyService {
|
|
4102
|
-
constructor(fm, filterStore, loader, columnsService, eventsService) {
|
|
4121
|
+
constructor(fm, filterStore, loader, columnsService, eventsService, paginatorService) {
|
|
4103
4122
|
this.fm = fm;
|
|
4104
4123
|
this.filterStore = filterStore;
|
|
4105
4124
|
this.loader = loader;
|
|
4106
4125
|
this.columnsService = columnsService;
|
|
4107
4126
|
this.eventsService = eventsService;
|
|
4127
|
+
this.paginatorService = paginatorService;
|
|
4108
4128
|
this.destroyRef = inject(DestroyRef);
|
|
4109
4129
|
this.filterableColumns = this.columnsService
|
|
4110
4130
|
.columns()
|
|
@@ -4145,6 +4165,7 @@ class HeaderLazyService {
|
|
|
4145
4165
|
changedFilter: undefined,
|
|
4146
4166
|
}))
|
|
4147
4167
|
.subscribe(({ filters, changedFilter }) => {
|
|
4168
|
+
this.paginatorService.firstPage();
|
|
4148
4169
|
this.filterStore?.setFilters(filters);
|
|
4149
4170
|
this.eventsService.emit('filterChange', {
|
|
4150
4171
|
filters,
|
|
@@ -4162,7 +4183,7 @@ class HeaderLazyService {
|
|
|
4162
4183
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
4163
4184
|
});
|
|
4164
4185
|
}
|
|
4165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, deps: [{ token: KlesForm }, { token: FilterStore, optional: true }, { token: LOADER_SERVICE }, { token: ColumnsService }, { token: EventsService }, { token: PaginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4166
4187
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService }); }
|
|
4167
4188
|
}
|
|
4168
4189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, decorators: [{
|
|
@@ -4172,7 +4193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
4172
4193
|
}] }, { type: undefined, decorators: [{
|
|
4173
4194
|
type: Inject,
|
|
4174
4195
|
args: [LOADER_SERVICE]
|
|
4175
|
-
}] }, { type: ColumnsService }, { type: EventsService }] });
|
|
4196
|
+
}] }, { type: ColumnsService }, { type: EventsService }, { type: PaginatorService }] });
|
|
4176
4197
|
|
|
4177
4198
|
function getMultipleValuesInSingleSelectionError() {
|
|
4178
4199
|
return Error('Cannot pass multiple values into SelectionModel with single-value mode.');
|