@3kles/kles-material-table-v2 21.10.0 → 22.1.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.
|
@@ -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, inject,
|
|
4
|
+
import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, signal, inject, Optional, DestroyRef, Component, output, ChangeDetectorRef, 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';
|
|
@@ -25,7 +25,7 @@ import { CdkDragHandle, DragDropModule, CdkDropList, CdkDrag } from '@angular/cd
|
|
|
25
25
|
import * as i26 from '@angular/material/progress-spinner';
|
|
26
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
27
27
|
import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
|
|
28
|
-
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
28
|
+
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
29
29
|
import * as _ from 'lodash';
|
|
30
30
|
import ___default from 'lodash';
|
|
31
31
|
import * as i3 from '@angular/material/tooltip';
|
|
@@ -43,10 +43,10 @@ class HeaderFieldPipe {
|
|
|
43
43
|
...col.headerCell?.field,
|
|
44
44
|
};
|
|
45
45
|
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
47
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, isStandalone: true, name: "headerField" }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderFieldPipe, decorators: [{
|
|
50
50
|
type: Pipe,
|
|
51
51
|
args: [{
|
|
52
52
|
name: 'headerField',
|
|
@@ -60,10 +60,10 @@ class CellFieldPipe {
|
|
|
60
60
|
return null;
|
|
61
61
|
return { name: col.columnDef, canExpand: col.canExpand, ...col.cell?.field };
|
|
62
62
|
}
|
|
63
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
64
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
63
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
64
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, isStandalone: true, name: "cellField" }); }
|
|
65
65
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellFieldPipe, decorators: [{
|
|
67
67
|
type: Pipe,
|
|
68
68
|
args: [{
|
|
69
69
|
name: 'cellField',
|
|
@@ -76,10 +76,10 @@ class ExtraCellFieldPipe {
|
|
|
76
76
|
return null;
|
|
77
77
|
return { name: col.columnDef, ...col.field };
|
|
78
78
|
}
|
|
79
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
80
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
80
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, isStandalone: true, name: "extraCellField" }); }
|
|
81
81
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraCellFieldPipe, decorators: [{
|
|
83
83
|
type: Pipe,
|
|
84
84
|
args: [{
|
|
85
85
|
name: 'extraCellField',
|
|
@@ -94,6 +94,7 @@ const FOOTER = new InjectionToken('FOOTER');
|
|
|
94
94
|
const EXTRA_ROWS = new InjectionToken('EXTRA_ROWS');
|
|
95
95
|
const MULTI_UNFOLD = new InjectionToken('MULTI_UNFOLD');
|
|
96
96
|
const ROW_APPEARANCE_CONFIG = new InjectionToken('ROW_APPEARANCE_CONFIG');
|
|
97
|
+
const ROW_VALIDATION_CONFIG = new InjectionToken('ROW_VALIDATION_CONFIG');
|
|
97
98
|
const ROW_DRAG_DROP = new InjectionToken('ROW_DRAG_DROP');
|
|
98
99
|
const COLUMN_DRAG_DROP = new InjectionToken('COLUMN_DRAG_DROP');
|
|
99
100
|
const DRAG_DROP_CONFIG = new InjectionToken('DRAG_DROP_CONFIG');
|
|
@@ -110,6 +111,7 @@ const SORT_SERVICE = new InjectionToken('SORT_SERVICE');
|
|
|
110
111
|
const SCROLLBAR_ORCHESTRATOR_SERVICE = new InjectionToken('SCROLLBAR_ORCHESTRATOR_SERVICE');
|
|
111
112
|
const TABLE_SERVICE = new InjectionToken('TABLE_SERVICE');
|
|
112
113
|
const EMPTY_STATE_CONFIG = new InjectionToken('EMPTY_STATE_CONFIG');
|
|
114
|
+
const KEYBOARD_NAVIGATION_CONFIG = new InjectionToken('KEYBOARD_NAVIGATION_CONFIG');
|
|
113
115
|
|
|
114
116
|
class ResolveNgStylePipe {
|
|
115
117
|
transform(style, value, status, row, rowStatus) {
|
|
@@ -117,10 +119,10 @@ class ResolveNgStylePipe {
|
|
|
117
119
|
return {};
|
|
118
120
|
return typeof style === 'function' ? style(value, status, row, rowStatus) : style;
|
|
119
121
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
123
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, isStandalone: true, name: "resolveNgStyle" }); }
|
|
122
124
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, decorators: [{
|
|
124
126
|
type: Pipe,
|
|
125
127
|
args: [{
|
|
126
128
|
name: 'resolveNgStyle',
|
|
@@ -154,10 +156,10 @@ class EventsService {
|
|
|
154
156
|
complete() {
|
|
155
157
|
this.eventsSubject.complete();
|
|
156
158
|
}
|
|
157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
158
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
160
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService }); }
|
|
159
161
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, decorators: [{
|
|
161
163
|
type: Injectable
|
|
162
164
|
}] });
|
|
163
165
|
|
|
@@ -169,12 +171,14 @@ class ColumnsService {
|
|
|
169
171
|
return this.getVisibleColumns()
|
|
170
172
|
.filter((column) => column.sticky === true)
|
|
171
173
|
.at(-1)?.columnDef;
|
|
172
|
-
},
|
|
174
|
+
}, /* @ts-ignore */
|
|
175
|
+
...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
|
|
173
176
|
this.stickyEndBoundary = computed(() => {
|
|
174
177
|
return this.getVisibleColumns()
|
|
175
178
|
.filter((column) => column.stickyEnd === true)
|
|
176
179
|
.at(0)?.columnDef;
|
|
177
|
-
},
|
|
180
|
+
}, /* @ts-ignore */
|
|
181
|
+
...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
|
|
178
182
|
}
|
|
179
183
|
register() {
|
|
180
184
|
this.setDisplayedColumns();
|
|
@@ -249,7 +253,8 @@ class ColumnsService {
|
|
|
249
253
|
setDisplayedColumns() {
|
|
250
254
|
this.displayedColumns = computed(() => {
|
|
251
255
|
return this.getVisibleColumns().map((column) => column.columnDef);
|
|
252
|
-
},
|
|
256
|
+
}, /* @ts-ignore */
|
|
257
|
+
...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
|
|
253
258
|
}
|
|
254
259
|
getVisibleColumns() {
|
|
255
260
|
return this._columns().filter((column) => {
|
|
@@ -259,10 +264,10 @@ class ColumnsService {
|
|
|
259
264
|
return column.visible !== false;
|
|
260
265
|
});
|
|
261
266
|
}
|
|
262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
263
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService, deps: [{ token: COLUMNS }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
268
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService }); }
|
|
264
269
|
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService, decorators: [{
|
|
266
271
|
type: Injectable
|
|
267
272
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
268
273
|
type: Inject,
|
|
@@ -635,10 +640,10 @@ class ResizableColumnDirective {
|
|
|
635
640
|
clearDocumentListeners() {
|
|
636
641
|
this.documentCleanups.splice(0).forEach((cleanup) => cleanup());
|
|
637
642
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
639
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: EventsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
644
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ResizableColumnDirective, isStandalone: true, selector: "th[appResizableColumn]", inputs: { column: { classPropertyName: "column", publicName: "appResizableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.appResizableColumn": "this.appResizableColumnAttr" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
640
645
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableColumnDirective, decorators: [{
|
|
642
647
|
type: Directive,
|
|
643
648
|
args: [{ selector: 'th[appResizableColumn]', standalone: true }]
|
|
644
649
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: EventsService }, { type: ColumnsService }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "appResizableColumn", required: true }] }], appResizableColumnAttr: [{
|
|
@@ -646,16 +651,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
646
651
|
args: ['attr.appResizableColumn']
|
|
647
652
|
}] } });
|
|
648
653
|
|
|
654
|
+
class CursorService {
|
|
655
|
+
constructor(selectionService) {
|
|
656
|
+
this.selectionService = selectionService;
|
|
657
|
+
this._mode = signal('auto', /* @ts-ignore */
|
|
658
|
+
...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
|
|
659
|
+
this.mode = this._mode.asReadonly();
|
|
660
|
+
}
|
|
661
|
+
enable() {
|
|
662
|
+
this._mode.set('pointer');
|
|
663
|
+
}
|
|
664
|
+
disable() {
|
|
665
|
+
this._mode.set('default');
|
|
666
|
+
}
|
|
667
|
+
reset() {
|
|
668
|
+
this._mode.set('auto');
|
|
669
|
+
}
|
|
670
|
+
isPointer(row) {
|
|
671
|
+
const mode = this.mode();
|
|
672
|
+
return mode === 'pointer' || (mode === 'auto' && this.selectionService.canSelectOnRowClick(row));
|
|
673
|
+
}
|
|
674
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService, deps: [{ token: SELECTION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
675
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService }); }
|
|
676
|
+
}
|
|
677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CursorService, decorators: [{
|
|
678
|
+
type: Injectable
|
|
679
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
680
|
+
type: Inject,
|
|
681
|
+
args: [SELECTION_SERVICE]
|
|
682
|
+
}] }] });
|
|
683
|
+
|
|
649
684
|
class FooterFieldPipe {
|
|
650
685
|
transform(col) {
|
|
651
686
|
if (!col)
|
|
652
687
|
return null;
|
|
653
|
-
return { name: col.columnDef, ...col.footerCell
|
|
688
|
+
return { name: col.columnDef, ...col.footerCell?.field };
|
|
654
689
|
}
|
|
655
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
656
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
690
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
691
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, isStandalone: true, name: "footerField" }); }
|
|
657
692
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
693
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, decorators: [{
|
|
659
694
|
type: Pipe,
|
|
660
695
|
args: [{
|
|
661
696
|
name: 'footerField',
|
|
@@ -672,10 +707,10 @@ class UiFieldPipe {
|
|
|
672
707
|
return undefined;
|
|
673
708
|
return this.tableService?.klesForm.uiStore.get(control);
|
|
674
709
|
}
|
|
675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
676
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
710
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
711
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, isStandalone: true, name: "uiField" }); }
|
|
677
712
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, decorators: [{
|
|
679
714
|
type: Pipe,
|
|
680
715
|
args: [{
|
|
681
716
|
name: 'uiField',
|
|
@@ -695,10 +730,10 @@ class SpanPipe {
|
|
|
695
730
|
}
|
|
696
731
|
return span;
|
|
697
732
|
}
|
|
698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
699
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
734
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, isStandalone: true, name: "spanPipe" }); }
|
|
700
735
|
}
|
|
701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, decorators: [{
|
|
702
737
|
type: Pipe,
|
|
703
738
|
args: [{
|
|
704
739
|
name: 'spanPipe',
|
|
@@ -712,10 +747,10 @@ class ResolveRowStylePipe {
|
|
|
712
747
|
return {};
|
|
713
748
|
return typeof style === 'function' ? style(row, status, index, context) : style;
|
|
714
749
|
}
|
|
715
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
716
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
750
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
751
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, isStandalone: true, name: "resolveRowStyle" }); }
|
|
717
752
|
}
|
|
718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, decorators: [{
|
|
719
754
|
type: Pipe,
|
|
720
755
|
args: [{
|
|
721
756
|
name: 'resolveRowStyle',
|
|
@@ -728,10 +763,10 @@ class ResolveRowClassPipe {
|
|
|
728
763
|
return [];
|
|
729
764
|
return typeof classes === 'function' ? classes(row, status, index, context) : classes;
|
|
730
765
|
}
|
|
731
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
732
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
766
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
767
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, isStandalone: true, name: "resolveRowClass" }); }
|
|
733
768
|
}
|
|
734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, decorators: [{
|
|
735
770
|
type: Pipe,
|
|
736
771
|
args: [{
|
|
737
772
|
name: 'resolveRowClass',
|
|
@@ -772,10 +807,10 @@ class ExpandedRowStore {
|
|
|
772
807
|
this.expand(id);
|
|
773
808
|
}
|
|
774
809
|
}
|
|
775
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
776
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
810
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore, deps: [{ token: MULTI_UNFOLD }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
811
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore }); }
|
|
777
812
|
}
|
|
778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore, decorators: [{
|
|
779
814
|
type: Injectable
|
|
780
815
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
781
816
|
type: Inject,
|
|
@@ -800,10 +835,10 @@ class LoaderChildrensService {
|
|
|
800
835
|
refresh() {
|
|
801
836
|
this._refresh$.next();
|
|
802
837
|
}
|
|
803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
804
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
838
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService, deps: [{ token: LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
839
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService }); }
|
|
805
840
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService, decorators: [{
|
|
807
842
|
type: Injectable
|
|
808
843
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
809
844
|
type: Inject,
|
|
@@ -811,6 +846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
811
846
|
}] }] });
|
|
812
847
|
|
|
813
848
|
class RowFormFactory {
|
|
849
|
+
constructor(validationConfig = null) {
|
|
850
|
+
this.validationConfig = validationConfig;
|
|
851
|
+
}
|
|
814
852
|
createControl(field, value) {
|
|
815
853
|
let control;
|
|
816
854
|
let ui;
|
|
@@ -841,7 +879,10 @@ class RowFormFactory {
|
|
|
841
879
|
uis[field.name] = ui;
|
|
842
880
|
}
|
|
843
881
|
return {
|
|
844
|
-
formGroup: new FormGroup(controls
|
|
882
|
+
formGroup: new FormGroup(controls, {
|
|
883
|
+
validators: this.validationConfig?.lineValidations,
|
|
884
|
+
asyncValidators: this.validationConfig?.lineAsyncValidations,
|
|
885
|
+
}),
|
|
845
886
|
groupUi: new GroupUiState(uis),
|
|
846
887
|
context: {
|
|
847
888
|
source: record,
|
|
@@ -853,13 +894,18 @@ class RowFormFactory {
|
|
|
853
894
|
createRows(fields, records, meta = { depth: 0, parentId: null }) {
|
|
854
895
|
return records.map((r) => this.createRow(fields, r, meta));
|
|
855
896
|
}
|
|
856
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
857
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
897
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, deps: [{ token: ROW_VALIDATION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
898
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, providedIn: 'root' }); }
|
|
858
899
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
900
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, decorators: [{
|
|
860
901
|
type: Injectable,
|
|
861
902
|
args: [{ providedIn: 'root' }]
|
|
862
|
-
}]
|
|
903
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
904
|
+
type: Optional
|
|
905
|
+
}, {
|
|
906
|
+
type: Inject,
|
|
907
|
+
args: [ROW_VALIDATION_CONFIG]
|
|
908
|
+
}] }] });
|
|
863
909
|
|
|
864
910
|
class RowContextStore {
|
|
865
911
|
constructor() {
|
|
@@ -888,10 +934,10 @@ class RowContextStore {
|
|
|
888
934
|
delete(row) {
|
|
889
935
|
this.contexts.delete(row);
|
|
890
936
|
}
|
|
891
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
892
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
938
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore }); }
|
|
893
939
|
}
|
|
894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, decorators: [{
|
|
895
941
|
type: Injectable
|
|
896
942
|
}] });
|
|
897
943
|
|
|
@@ -1214,10 +1260,10 @@ class KlesForm {
|
|
|
1214
1260
|
notifyRowsStructureChanged() {
|
|
1215
1261
|
this.rowsStructureChangedSubject.next();
|
|
1216
1262
|
}
|
|
1217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1218
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm, deps: [{ token: ColumnsService }, { token: RowFormFactory }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1264
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm }); }
|
|
1219
1265
|
}
|
|
1220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm, decorators: [{
|
|
1221
1267
|
type: Injectable
|
|
1222
1268
|
}], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }, { type: RowContextStore }] });
|
|
1223
1269
|
|
|
@@ -1232,8 +1278,10 @@ class TreeService {
|
|
|
1232
1278
|
this.destroyRef = inject(DestroyRef);
|
|
1233
1279
|
this.expandedSubject = new BehaviorSubject(new Set());
|
|
1234
1280
|
this.expandedIds$ = this.expandedSubject.asObservable();
|
|
1235
|
-
this.expandedIds = signal(new Set(),
|
|
1236
|
-
|
|
1281
|
+
this.expandedIds = signal(new Set(), /* @ts-ignore */
|
|
1282
|
+
...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
|
|
1283
|
+
this.loadingIds = signal(new Set(), /* @ts-ignore */
|
|
1284
|
+
...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
|
|
1237
1285
|
this.fm.rowsReplaced$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
|
|
1238
1286
|
}
|
|
1239
1287
|
toggle(id, group, depth) {
|
|
@@ -1363,10 +1411,10 @@ class TreeService {
|
|
|
1363
1411
|
level,
|
|
1364
1412
|
};
|
|
1365
1413
|
}
|
|
1366
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1367
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1414
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1415
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService }); }
|
|
1368
1416
|
}
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, decorators: [{
|
|
1370
1418
|
type: Injectable
|
|
1371
1419
|
}], ctorParameters: () => [] });
|
|
1372
1420
|
|
|
@@ -1376,22 +1424,32 @@ class KlesCellComponent {
|
|
|
1376
1424
|
this.expandedRowStore = inject(ExpandedRowStore);
|
|
1377
1425
|
this.treeService = inject(TreeService);
|
|
1378
1426
|
this.eventsService = inject(EventsService);
|
|
1379
|
-
this.ui = input.required(
|
|
1380
|
-
|
|
1381
|
-
this.
|
|
1382
|
-
|
|
1383
|
-
this.
|
|
1427
|
+
this.ui = input.required(/* @ts-ignore */
|
|
1428
|
+
...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
this.group = input.required(/* @ts-ignore */
|
|
1430
|
+
...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
|
|
1431
|
+
this.column = input.required(/* @ts-ignore */
|
|
1432
|
+
...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
1433
|
+
this.rowIndex = input.required(/* @ts-ignore */
|
|
1434
|
+
...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
|
|
1435
|
+
this.dragHandle = input(false, /* @ts-ignore */
|
|
1436
|
+
...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
|
|
1384
1437
|
this.expandedRow = computed(() => {
|
|
1385
1438
|
return (this.column().canExpand ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedRow ?? false);
|
|
1386
|
-
},
|
|
1439
|
+
}, /* @ts-ignore */
|
|
1440
|
+
...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
|
|
1387
1441
|
this.expandedNode = computed(() => {
|
|
1388
1442
|
return (this.column().canExpandNode ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedNode ?? false);
|
|
1389
|
-
},
|
|
1443
|
+
}, /* @ts-ignore */
|
|
1444
|
+
...(ngDevMode ? [{ debugName: "expandedNode" }] : /* istanbul ignore next */ []));
|
|
1390
1445
|
this.hasChildren = computed(() => {
|
|
1391
1446
|
return this.treeService.hasChildren(this.group(), this.group().getRawValue()._depth);
|
|
1392
|
-
},
|
|
1393
|
-
|
|
1394
|
-
this.
|
|
1447
|
+
}, /* @ts-ignore */
|
|
1448
|
+
...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
|
|
1449
|
+
this.depth = computed(() => Math.max(0, this.group().getRawValue()._depth ?? 0), /* @ts-ignore */
|
|
1450
|
+
...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
|
|
1451
|
+
this.loadingNode = computed(() => this.treeService.isLoading(this.group().getRawValue()._id), /* @ts-ignore */
|
|
1452
|
+
...(ngDevMode ? [{ debugName: "loadingNode" }] : /* istanbul ignore next */ []));
|
|
1395
1453
|
this.column$ = toObservable(this.column);
|
|
1396
1454
|
}
|
|
1397
1455
|
ngOnInit() {
|
|
@@ -1437,29 +1495,33 @@ class KlesCellComponent {
|
|
|
1437
1495
|
this.ui().get(this.column().columnDef)?.patchValue({ expandedNode });
|
|
1438
1496
|
});
|
|
1439
1497
|
}
|
|
1440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1498
|
+
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=\"D\u00E9placer la ligne\"\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 matIconButton class=\"expand-button\" (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() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\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"] }] }); }
|
|
1442
1500
|
}
|
|
1443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, decorators: [{
|
|
1444
1502
|
type: Component,
|
|
1445
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=\"D\u00E9placer la ligne\"\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 matIconButton class=\"expand-button\" (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() ? 'R\u00E9duire la ligne' : 'D\u00E9velopper la ligne'\"\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"] }]
|
|
1446
1504
|
}], 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 }] }] } });
|
|
1447
1505
|
|
|
1448
1506
|
class KlesHeaderComponent {
|
|
1449
1507
|
constructor() {
|
|
1450
|
-
this.header = input.required(
|
|
1451
|
-
|
|
1452
|
-
this.
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1508
|
+
this.header = input.required(/* @ts-ignore */
|
|
1509
|
+
...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
1510
|
+
this.group = input.required(/* @ts-ignore */
|
|
1511
|
+
...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
|
|
1512
|
+
this.dragHandleSpacer = input(false, /* @ts-ignore */
|
|
1513
|
+
...(ngDevMode ? [{ debugName: "dragHandleSpacer" }] : /* istanbul ignore next */ []));
|
|
1514
|
+
this.columnDragHandle = input(false, /* @ts-ignore */
|
|
1515
|
+
...(ngDevMode ? [{ debugName: "columnDragHandle" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.filterValue = toSignal(toObservable(computed(() => this.group().get(this.header().columnDef))).pipe(switchMap((control) => (control ? control.valueChanges.pipe(startWith(control.value)) : of(null)))), { initialValue: null });
|
|
1517
|
+
}
|
|
1518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesHeaderComponent, isStandalone: true, selector: "kles-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, dragHandleSpacer: { classPropertyName: "dragHandleSpacer", publicName: "dragHandleSpacer", isSignal: true, isRequired: false, transformFunction: null }, columnDragHandle: { classPropertyName: "columnDragHandle", publicName: "columnDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1458
1520
|
<div
|
|
1459
1521
|
class="header"
|
|
1460
1522
|
mat-sort-header
|
|
1461
1523
|
[disabled]="!header().sortable"
|
|
1462
|
-
[arrowPosition]="header().sortArrowPosition"
|
|
1524
|
+
[arrowPosition]="header().sortArrowPosition ?? 'after'"
|
|
1463
1525
|
[matTooltip]="header().tooltip"
|
|
1464
1526
|
matTooltipPosition="above"
|
|
1465
1527
|
>
|
|
@@ -1486,7 +1548,7 @@ class KlesHeaderComponent {
|
|
|
1486
1548
|
<ng-content></ng-content>
|
|
1487
1549
|
</div>
|
|
1488
1550
|
|
|
1489
|
-
@if (header().filterClearable &&
|
|
1551
|
+
@if (header().filterClearable && filterValue()) {
|
|
1490
1552
|
<div class="icon-button">
|
|
1491
1553
|
<button
|
|
1492
1554
|
mat-icon-button
|
|
@@ -1502,14 +1564,14 @@ class KlesHeaderComponent {
|
|
|
1502
1564
|
</div>
|
|
1503
1565
|
`, isInline: true, styles: [":host{padding-bottom:10px;display:flex;flex-direction:column;justify-content:inherit}.header{flex-grow:1;align-items:center;display:flex;justify-content:inherit;gap:4px}.column-drag-handle{flex:0 0 28px;width:28px;height:28px;padding:2px;cursor:grab;color:currentColor;opacity:.65}.column-drag-handle:active{cursor:grabbing}.column-drag-handle mat-icon{width:20px;height:20px;font-size:20px;line-height:20px}.filterHeader{display:flex;flex-grow:1;align-items:center;gap:2px}.filterHeader.has-drag-handle-spacer{gap:5px}.drag-handle-spacer{flex:0 0 32px;width:32px;height:32px}.field{flex-grow:1;text-align:center}.icon-button button[mat-icon-button].icon-button-small{width:24px;height:24px;line-height:24px;padding:0}.icon-button button[mat-icon-button].icon-button-small .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.icon-button button[mat-icon-button].icon-button-small .mat-mdc-button-ripple{font-size:inherit;width:inherit;height:inherit;line-height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
1504
1566
|
}
|
|
1505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, decorators: [{
|
|
1506
1568
|
type: Component,
|
|
1507
1569
|
args: [{ selector: 'kles-header', template: `
|
|
1508
1570
|
<div
|
|
1509
1571
|
class="header"
|
|
1510
1572
|
mat-sort-header
|
|
1511
1573
|
[disabled]="!header().sortable"
|
|
1512
|
-
[arrowPosition]="header().sortArrowPosition"
|
|
1574
|
+
[arrowPosition]="header().sortArrowPosition ?? 'after'"
|
|
1513
1575
|
[matTooltip]="header().tooltip"
|
|
1514
1576
|
matTooltipPosition="above"
|
|
1515
1577
|
>
|
|
@@ -1536,7 +1598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1536
1598
|
<ng-content></ng-content>
|
|
1537
1599
|
</div>
|
|
1538
1600
|
|
|
1539
|
-
@if (header().filterClearable &&
|
|
1601
|
+
@if (header().filterClearable && filterValue()) {
|
|
1540
1602
|
<div class="icon-button">
|
|
1541
1603
|
<button
|
|
1542
1604
|
mat-icon-button
|
|
@@ -1565,10 +1627,10 @@ class HeaderPipe {
|
|
|
1565
1627
|
...col.headerCell,
|
|
1566
1628
|
};
|
|
1567
1629
|
}
|
|
1568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1569
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1630
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1631
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, isStandalone: true, name: "header" }); }
|
|
1570
1632
|
}
|
|
1571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, decorators: [{
|
|
1572
1634
|
type: Pipe,
|
|
1573
1635
|
args: [{
|
|
1574
1636
|
name: 'header',
|
|
@@ -1581,11 +1643,13 @@ class KlesTableIntl {
|
|
|
1581
1643
|
this.changes = new Subject();
|
|
1582
1644
|
this.emptyStateTitle = 'No data';
|
|
1583
1645
|
this.emptyStateDescription = 'There are no rows to display.';
|
|
1646
|
+
this.emptyStateRefreshLabel = 'Refresh';
|
|
1647
|
+
this.keyboardNavigationEntryLabel = 'Go to table rows';
|
|
1584
1648
|
}
|
|
1585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1586
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
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' }); }
|
|
1587
1651
|
}
|
|
1588
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
|
|
1589
1653
|
type: Injectable,
|
|
1590
1654
|
args: [{
|
|
1591
1655
|
providedIn: 'root',
|
|
@@ -1594,6 +1658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1594
1658
|
|
|
1595
1659
|
class KlesTableEmptyStateComponent {
|
|
1596
1660
|
constructor() {
|
|
1661
|
+
this.refreshRequested = output();
|
|
1597
1662
|
this.intl = inject(KlesTableIntl);
|
|
1598
1663
|
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
1599
1664
|
this.destroyRef = inject(DestroyRef);
|
|
@@ -1601,13 +1666,13 @@ class KlesTableEmptyStateComponent {
|
|
|
1601
1666
|
this.changeDetectorRef.markForCheck();
|
|
1602
1667
|
});
|
|
1603
1668
|
}
|
|
1604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableEmptyStateComponent, isStandalone: true, selector: "kles-table-empty-state", outputs: { refreshRequested: "refreshRequested" }, ngImport: i0, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n <div class=\"empty-state__panel\">\n <div class=\"empty-state__visual\" aria-hidden=\"true\">\n <div class=\"empty-state__table-icon\">\n <span class=\"empty-state__table-header\"></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n\n <div class=\"empty-state__badge\">\n <mat-icon>remove</mat-icon>\n </div>\n </div>\n\n <div class=\"empty-state__content\">\n <h2 class=\"empty-state__title\">\n {{ intl.emptyStateTitle }}\n </h2>\n\n <p class=\"empty-state__description\">\n {{ intl.emptyStateDescription }}\n </p>\n <button mat-stroked-button type=\"button\" class=\"empty-state__refresh\" (click)=\"refreshRequested.emit()\">\n <mat-icon>refresh</mat-icon>\n {{ intl.emptyStateRefreshLabel }}\n </button>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;min-width:0;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance;overflow-wrap:anywhere}.empty-state__refresh{justify-self:start}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}@container kles-empty-state (max-width: 37.5rem){.empty-state__visual{width:3rem;height:3rem;flex-basis:3rem;border-radius:.875rem}.empty-state__table-icon{width:1.75rem;height:1.6rem;grid-template-rows:.45rem repeat(3,1fr)}.empty-state__badge{width:1.25rem;height:1.25rem;border-width:.15rem}.empty-state__panel{flex-direction:column;gap:.25rem;padding:0}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}\n"], dependencies: [{ 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.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1606
1671
|
}
|
|
1607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, decorators: [{
|
|
1608
1673
|
type: Component,
|
|
1609
|
-
args: [{ selector: 'kles-table-empty-state', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n <div class=\"empty-state__panel\">\n <div class=\"empty-state__visual\" aria-hidden=\"true\">\n <div class=\"empty-state__table-icon\">\n <span class=\"empty-state__table-header\"></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n\n <div class=\"empty-state__badge\">\n <mat-icon>remove</mat-icon>\n </div>\n </div>\n\n <div class=\"empty-state__content\">\n <h2 class=\"empty-state__title\">\n {{ intl.emptyStateTitle }}\n </h2>\n\n <p class=\"empty-state__description\">\n {{ intl.emptyStateDescription }}\n </p>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}}\n"] }]
|
|
1610
|
-
}], ctorParameters: () => [] });
|
|
1674
|
+
args: [{ selector: 'kles-table-empty-state', standalone: true, imports: [MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n <div class=\"empty-state__panel\">\n <div class=\"empty-state__visual\" aria-hidden=\"true\">\n <div class=\"empty-state__table-icon\">\n <span class=\"empty-state__table-header\"></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n\n <div class=\"empty-state__badge\">\n <mat-icon>remove</mat-icon>\n </div>\n </div>\n\n <div class=\"empty-state__content\">\n <h2 class=\"empty-state__title\">\n {{ intl.emptyStateTitle }}\n </h2>\n\n <p class=\"empty-state__description\">\n {{ intl.emptyStateDescription }}\n </p>\n <button mat-stroked-button type=\"button\" class=\"empty-state__refresh\" (click)=\"refreshRequested.emit()\">\n <mat-icon>refresh</mat-icon>\n {{ intl.emptyStateRefreshLabel }}\n </button>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%;box-sizing:border-box;--kles-empty-state-accent: var(--mat-sys-primary);--kles-empty-state-accent-container: var(--mat-sys-primary-container)}.empty-state{display:grid;width:100%;height:100%;box-sizing:border-box;place-items:center}.empty-state__panel{display:flex;width:min(100%,31rem);align-items:center;justify-content:center;gap:1.25rem;color:var(--mat-sys-on-surface-variant)}.empty-state__visual{position:relative;display:grid;width:4.5rem;height:4.5rem;flex:0 0 4.5rem;place-items:center;border-radius:1.25rem;background:color-mix(in srgb,var(--kles-empty-state-accent-container) 72%,var(--mat-sys-surface))}.empty-state__table-icon{display:grid;width:2.35rem;height:2.15rem;overflow:hidden;box-sizing:border-box;grid-template-rows:.65rem repeat(3,1fr);border:.125rem solid var(--kles-empty-state-accent);border-radius:.35rem}.empty-state__table-icon span{border-top:1px solid color-mix(in srgb,var(--kles-empty-state-accent) 45%,transparent)}.empty-state__table-icon .empty-state__table-header{border-top:0;background:color-mix(in srgb,var(--kles-empty-state-accent) 24%,transparent)}.empty-state__badge{position:absolute;right:-.2rem;bottom:-.2rem;display:grid;width:1.65rem;height:1.65rem;place-items:center;border:.2rem solid var(--mat-sys-surface);border-radius:50%;color:var(--mat-sys-on-primary);background:var(--kles-empty-state-accent)}.empty-state__badge mat-icon{width:1rem;height:1rem;font-size:1rem;font-weight:700}.empty-state__content{display:grid;min-width:0;max-width:25rem;gap:.3rem;text-align:left}.empty-state__title{margin:0;color:var(--mat-sys-on-surface);font:var(--mat-sys-title-medium)}.empty-state__description{margin:0;font:var(--mat-sys-body-medium);line-height:1.45;text-wrap:balance;overflow-wrap:anywhere}.empty-state__refresh{justify-self:start}@media(max-width:37.5rem){.empty-state__panel{flex-direction:column;gap:.875rem;padding:1.25rem;text-align:center}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}@container kles-empty-state (max-width: 37.5rem){.empty-state__visual{width:3rem;height:3rem;flex-basis:3rem;border-radius:.875rem}.empty-state__table-icon{width:1.75rem;height:1.6rem;grid-template-rows:.45rem repeat(3,1fr)}.empty-state__badge{width:1.25rem;height:1.25rem;border-width:.15rem}.empty-state__panel{flex-direction:column;gap:.25rem;padding:0}.empty-state__content{text-align:center}.empty-state__refresh{justify-self:center}}\n"] }]
|
|
1675
|
+
}], ctorParameters: () => [], propDecorators: { refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }] } });
|
|
1611
1676
|
|
|
1612
1677
|
class RowContextPipe {
|
|
1613
1678
|
constructor() {
|
|
@@ -1616,10 +1681,10 @@ class RowContextPipe {
|
|
|
1616
1681
|
transform(row) {
|
|
1617
1682
|
return row ? this.store.get(row) : null;
|
|
1618
1683
|
}
|
|
1619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1620
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1684
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1685
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, isStandalone: true, name: "rowContext" }); }
|
|
1621
1686
|
}
|
|
1622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, decorators: [{
|
|
1623
1688
|
type: Pipe,
|
|
1624
1689
|
args: [{
|
|
1625
1690
|
name: 'rowContext',
|
|
@@ -1628,6 +1693,339 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1628
1693
|
}]
|
|
1629
1694
|
}] });
|
|
1630
1695
|
|
|
1696
|
+
const interactiveSelector = 'input, textarea, select, button, a[href], [tabindex], [contenteditable]:not([contenteditable="false"])';
|
|
1697
|
+
/** One instance per rendered grid, including nested tables. */
|
|
1698
|
+
class KeyboardNavigationService {
|
|
1699
|
+
constructor(config, selection) {
|
|
1700
|
+
this.config = config;
|
|
1701
|
+
this.selection = selection;
|
|
1702
|
+
this.registered = new Set();
|
|
1703
|
+
this.cells = [];
|
|
1704
|
+
this.editing = false;
|
|
1705
|
+
this.focusOwned = false;
|
|
1706
|
+
this.originalTabIndexes = new Map();
|
|
1707
|
+
}
|
|
1708
|
+
get enabled() { return this.config?.enabled === true; }
|
|
1709
|
+
get ariaLabel() { return this.config?.ariaLabel; }
|
|
1710
|
+
register(cell) { this.registered.add(cell); }
|
|
1711
|
+
unregister(cell) { this.registered.delete(cell); }
|
|
1712
|
+
focusActive() {
|
|
1713
|
+
if (!this.enabled)
|
|
1714
|
+
return false;
|
|
1715
|
+
this.reconcile();
|
|
1716
|
+
if (!this.active)
|
|
1717
|
+
return false;
|
|
1718
|
+
this.focus(this.active);
|
|
1719
|
+
return true;
|
|
1720
|
+
}
|
|
1721
|
+
click(cell, event) {
|
|
1722
|
+
if (!this.enabled || event.defaultPrevented || !this.ownsEvent(cell, event))
|
|
1723
|
+
return;
|
|
1724
|
+
const target = event.target;
|
|
1725
|
+
// Preserve native field focus, action buttons and links, including custom widgets.
|
|
1726
|
+
if (target !== cell.element && target.closest('input, textarea, select, button, a, [role="button"], [role="checkbox"], [role="combobox"], [role="link"], [contenteditable]:not([contenteditable="false"]), [tabindex]') !== cell.element)
|
|
1727
|
+
return;
|
|
1728
|
+
this.focus(cell);
|
|
1729
|
+
}
|
|
1730
|
+
/** Runs after Angular has rendered rows, reordered columns and updated controls. */
|
|
1731
|
+
reconcile() {
|
|
1732
|
+
if (!this.enabled)
|
|
1733
|
+
return;
|
|
1734
|
+
const previous = this.active;
|
|
1735
|
+
const previousIndex = previous ? this.cells.indexOf(previous) : 0;
|
|
1736
|
+
this.cells = [...this.registered].filter(cell => cell.element.isConnected).sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
|
|
1737
|
+
const next = this.cells.find(cell => this.identity &&
|
|
1738
|
+
cell.row.get('_id')?.value === this.identity.rowId && cell.columnDef === this.identity.columnDef)
|
|
1739
|
+
?? this.cells.find(cell => this.identity && cell.row.get('_id')?.value === this.identity.rowId)
|
|
1740
|
+
?? this.cells[Math.max(0, Math.min(previousIndex, this.cells.length - 1))];
|
|
1741
|
+
const focused = previous?.element.ownerDocument.activeElement;
|
|
1742
|
+
if (focused && focused !== focused.ownerDocument.body &&
|
|
1743
|
+
!this.cells.some(cell => cell.element === focused || cell.element.contains(focused))) {
|
|
1744
|
+
this.focusOwned = false;
|
|
1745
|
+
}
|
|
1746
|
+
if (next !== previous) {
|
|
1747
|
+
this.editing = false;
|
|
1748
|
+
this.activate(next);
|
|
1749
|
+
}
|
|
1750
|
+
this.updateTabStops();
|
|
1751
|
+
if (next && previous && this.focusOwned &&
|
|
1752
|
+
(next !== previous || !next.element.contains(next.element.ownerDocument.activeElement)))
|
|
1753
|
+
this.focus(next);
|
|
1754
|
+
}
|
|
1755
|
+
focusIn(cell, event) {
|
|
1756
|
+
if (!this.enabled || !this.ownsEvent(cell, event))
|
|
1757
|
+
return;
|
|
1758
|
+
this.focusOwned = true;
|
|
1759
|
+
this.activate(cell);
|
|
1760
|
+
this.editing = event.target !== cell.element;
|
|
1761
|
+
this.updateTabStops();
|
|
1762
|
+
}
|
|
1763
|
+
focusOut(event) {
|
|
1764
|
+
if (event.relatedTarget instanceof Node &&
|
|
1765
|
+
!this.cells.some(cell => cell.element.contains(event.relatedTarget))) {
|
|
1766
|
+
this.focusOwned = false;
|
|
1767
|
+
}
|
|
1768
|
+
else if (!event.relatedTarget && event.target?.isConnected) {
|
|
1769
|
+
// Browsers also emit a null destination while Angular removes or moves a focused node.
|
|
1770
|
+
// Wait until rendering is finished to distinguish removal from an intentional blur.
|
|
1771
|
+
const target = event.target;
|
|
1772
|
+
queueMicrotask(() => {
|
|
1773
|
+
if (target.isConnected && !this.cells.some(cell => cell.element.contains(target.ownerDocument.activeElement))) {
|
|
1774
|
+
this.focusOwned = false;
|
|
1775
|
+
}
|
|
1776
|
+
});
|
|
1777
|
+
}
|
|
1778
|
+
}
|
|
1779
|
+
keyDown(cell, event) {
|
|
1780
|
+
if (!this.enabled || event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey ||
|
|
1781
|
+
!this.ownsEvent(cell, event))
|
|
1782
|
+
return;
|
|
1783
|
+
this.activate(cell);
|
|
1784
|
+
if (event.target !== cell.element) {
|
|
1785
|
+
// Let the field own arrows, selection shortcuts, multiline input and open popups.
|
|
1786
|
+
const target = event.target;
|
|
1787
|
+
const popupOpen = target.closest('[aria-expanded="true"]') !== null;
|
|
1788
|
+
const simpleInput = target instanceof HTMLInputElement &&
|
|
1789
|
+
['text', 'search', 'email', 'tel', 'url', 'password', 'number'].includes(target.type) &&
|
|
1790
|
+
target.getAttribute('role') !== 'combobox';
|
|
1791
|
+
if (event.key === 'Tab') {
|
|
1792
|
+
const controls = this.availableControls(cell).filter(element => element.tabIndex >= 0);
|
|
1793
|
+
const index = controls.indexOf(target);
|
|
1794
|
+
if (index >= 0 && (event.shiftKey ? index > 0 : index < controls.length - 1))
|
|
1795
|
+
return;
|
|
1796
|
+
this.editing = false;
|
|
1797
|
+
this.focus(cell); // Native Tab now leaves this single grid tab stop.
|
|
1798
|
+
}
|
|
1799
|
+
else if (!popupOpen && (event.key === 'Escape' ||
|
|
1800
|
+
(event.key === 'Enter' && simpleInput))) {
|
|
1801
|
+
event.preventDefault();
|
|
1802
|
+
event.stopPropagation();
|
|
1803
|
+
this.editing = false;
|
|
1804
|
+
this.focus(cell);
|
|
1805
|
+
}
|
|
1806
|
+
return;
|
|
1807
|
+
}
|
|
1808
|
+
let destination;
|
|
1809
|
+
const rowCells = this.cells.filter(current => current.row === cell.row);
|
|
1810
|
+
const columnCells = this.cells.filter(current => current.columnDef === cell.columnDef);
|
|
1811
|
+
switch (event.key) {
|
|
1812
|
+
case 'ArrowLeft':
|
|
1813
|
+
destination = rowCells[rowCells.indexOf(cell) - 1];
|
|
1814
|
+
break;
|
|
1815
|
+
case 'ArrowRight':
|
|
1816
|
+
destination = rowCells[rowCells.indexOf(cell) + 1];
|
|
1817
|
+
break;
|
|
1818
|
+
case 'ArrowUp':
|
|
1819
|
+
destination = columnCells[columnCells.indexOf(cell) - 1];
|
|
1820
|
+
break;
|
|
1821
|
+
case 'ArrowDown':
|
|
1822
|
+
destination = columnCells[columnCells.indexOf(cell) + 1];
|
|
1823
|
+
break;
|
|
1824
|
+
case 'Home':
|
|
1825
|
+
destination = rowCells[0];
|
|
1826
|
+
break;
|
|
1827
|
+
case 'End':
|
|
1828
|
+
destination = rowCells.at(-1);
|
|
1829
|
+
break;
|
|
1830
|
+
case 'Enter':
|
|
1831
|
+
case 'F2':
|
|
1832
|
+
this.enterEdit(cell);
|
|
1833
|
+
break;
|
|
1834
|
+
case ' ':
|
|
1835
|
+
if (!event.repeat && this.selection?.canSelectRow(cell.row))
|
|
1836
|
+
this.selection.toggleRowSelection(cell.row);
|
|
1837
|
+
break;
|
|
1838
|
+
default: return;
|
|
1839
|
+
}
|
|
1840
|
+
event.preventDefault();
|
|
1841
|
+
event.stopPropagation();
|
|
1842
|
+
if (destination)
|
|
1843
|
+
this.focus(destination);
|
|
1844
|
+
}
|
|
1845
|
+
destroy() {
|
|
1846
|
+
for (const [element, tabIndex] of this.originalTabIndexes)
|
|
1847
|
+
this.restoreTabIndex(element, tabIndex);
|
|
1848
|
+
this.originalTabIndexes.clear();
|
|
1849
|
+
this.registered.clear();
|
|
1850
|
+
this.cells = [];
|
|
1851
|
+
}
|
|
1852
|
+
ownsEvent(cell, event) {
|
|
1853
|
+
return event.target instanceof Element && event.target.closest('[data-kles-keyboard-cell]') === cell.element;
|
|
1854
|
+
}
|
|
1855
|
+
activate(cell) {
|
|
1856
|
+
this.active = cell;
|
|
1857
|
+
if (cell)
|
|
1858
|
+
this.identity = { rowId: cell.row.get('_id')?.value, columnDef: cell.columnDef };
|
|
1859
|
+
}
|
|
1860
|
+
focus(cell) {
|
|
1861
|
+
this.activate(cell);
|
|
1862
|
+
this.editing = false;
|
|
1863
|
+
this.updateTabStops();
|
|
1864
|
+
cell.element.focus({ preventScroll: true });
|
|
1865
|
+
cell.element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
|
|
1866
|
+
}
|
|
1867
|
+
enterEdit(cell) {
|
|
1868
|
+
this.editing = true;
|
|
1869
|
+
this.updateTabStops();
|
|
1870
|
+
// Prefer the field over row handles and expansion buttons.
|
|
1871
|
+
const fields = [...cell.element.querySelectorAll('.cell-field')];
|
|
1872
|
+
const candidates = fields.flatMap(field => [...field.querySelectorAll(interactiveSelector)])
|
|
1873
|
+
.concat([...cell.element.querySelectorAll(interactiveSelector)]);
|
|
1874
|
+
const available = this.availableControls(cell);
|
|
1875
|
+
const target = candidates.find(element => available.includes(element));
|
|
1876
|
+
if (target)
|
|
1877
|
+
target.focus();
|
|
1878
|
+
else {
|
|
1879
|
+
this.editing = false;
|
|
1880
|
+
this.updateTabStops();
|
|
1881
|
+
}
|
|
1882
|
+
}
|
|
1883
|
+
isOwnControl(cell, element) {
|
|
1884
|
+
return element.closest('[data-kles-keyboard-cell]') === cell.element &&
|
|
1885
|
+
element.closest('table') === cell.element.closest('table');
|
|
1886
|
+
}
|
|
1887
|
+
availableControls(cell) {
|
|
1888
|
+
return [...cell.element.querySelectorAll(interactiveSelector)].filter(element => this.isOwnControl(cell, element) &&
|
|
1889
|
+
!element.matches(':disabled, [aria-disabled="true"], input[type="hidden"]') &&
|
|
1890
|
+
!element.closest('[hidden], [inert]') && element.getClientRects().length > 0);
|
|
1891
|
+
}
|
|
1892
|
+
updateTabStops() {
|
|
1893
|
+
const managed = new Set();
|
|
1894
|
+
for (const cell of this.cells) {
|
|
1895
|
+
this.setTabIndex(cell.element, cell === this.active ? '0' : '-1', managed);
|
|
1896
|
+
for (const element of cell.element.querySelectorAll(interactiveSelector)) {
|
|
1897
|
+
if (!this.isOwnControl(cell, element))
|
|
1898
|
+
continue;
|
|
1899
|
+
managed.add(element);
|
|
1900
|
+
if (this.editing && cell === this.active) {
|
|
1901
|
+
if (this.originalTabIndexes.has(element))
|
|
1902
|
+
this.restoreTabIndex(element, this.originalTabIndexes.get(element));
|
|
1903
|
+
}
|
|
1904
|
+
else
|
|
1905
|
+
this.setTabIndex(element, '-1', managed);
|
|
1906
|
+
}
|
|
1907
|
+
}
|
|
1908
|
+
for (const [element, tabIndex] of this.originalTabIndexes) {
|
|
1909
|
+
if (!managed.has(element)) {
|
|
1910
|
+
this.restoreTabIndex(element, tabIndex);
|
|
1911
|
+
this.originalTabIndexes.delete(element);
|
|
1912
|
+
}
|
|
1913
|
+
}
|
|
1914
|
+
}
|
|
1915
|
+
setTabIndex(element, value, managed) {
|
|
1916
|
+
managed.add(element);
|
|
1917
|
+
if (!this.originalTabIndexes.has(element))
|
|
1918
|
+
this.originalTabIndexes.set(element, element.getAttribute('tabindex'));
|
|
1919
|
+
if (element.getAttribute('tabindex') !== value)
|
|
1920
|
+
element.setAttribute('tabindex', value);
|
|
1921
|
+
}
|
|
1922
|
+
restoreTabIndex(element, value) {
|
|
1923
|
+
if (value === null)
|
|
1924
|
+
element.removeAttribute('tabindex');
|
|
1925
|
+
else if (element.getAttribute('tabindex') !== value)
|
|
1926
|
+
element.setAttribute('tabindex', value);
|
|
1927
|
+
}
|
|
1928
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: KEYBOARD_NAVIGATION_CONFIG, optional: true }, { token: SELECTION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1929
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService }); }
|
|
1930
|
+
}
|
|
1931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardNavigationService, decorators: [{
|
|
1932
|
+
type: Injectable
|
|
1933
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1934
|
+
type: Optional
|
|
1935
|
+
}, {
|
|
1936
|
+
type: Inject,
|
|
1937
|
+
args: [KEYBOARD_NAVIGATION_CONFIG]
|
|
1938
|
+
}] }, { type: undefined, decorators: [{
|
|
1939
|
+
type: Optional
|
|
1940
|
+
}, {
|
|
1941
|
+
type: Inject,
|
|
1942
|
+
args: [SELECTION_SERVICE]
|
|
1943
|
+
}] }] });
|
|
1944
|
+
|
|
1945
|
+
class KeyboardGridDirective {
|
|
1946
|
+
constructor() {
|
|
1947
|
+
this.navigation = inject(KeyboardNavigationService);
|
|
1948
|
+
this.element = inject(ElementRef).nativeElement;
|
|
1949
|
+
}
|
|
1950
|
+
get role() { return this.navigation.enabled ? 'grid' : null; }
|
|
1951
|
+
get label() { return this.navigation.enabled ? this.navigation.ariaLabel ?? null : null; }
|
|
1952
|
+
ngAfterViewChecked() { this.navigation.reconcile(); }
|
|
1953
|
+
ngOnDestroy() { this.navigation.destroy(); }
|
|
1954
|
+
onKeyDown(event) {
|
|
1955
|
+
if (event.defaultPrevented || event.isComposing || event.key !== 'Enter' || !event.ctrlKey || event.altKey || event.metaKey ||
|
|
1956
|
+
!(event.target instanceof Element) || event.target.closest('table') !== this.element)
|
|
1957
|
+
return;
|
|
1958
|
+
if (this.navigation.focusActive()) {
|
|
1959
|
+
event.preventDefault();
|
|
1960
|
+
event.stopPropagation();
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1964
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KeyboardGridDirective, isStandalone: true, selector: "table[klesKeyboardGrid]", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.label" } }, providers: [KeyboardNavigationService], exportAs: ["klesKeyboardGrid"], ngImport: i0 }); }
|
|
1965
|
+
}
|
|
1966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardGridDirective, decorators: [{
|
|
1967
|
+
type: Directive,
|
|
1968
|
+
args: [{
|
|
1969
|
+
selector: 'table[klesKeyboardGrid]',
|
|
1970
|
+
exportAs: 'klesKeyboardGrid',
|
|
1971
|
+
standalone: true,
|
|
1972
|
+
providers: [KeyboardNavigationService],
|
|
1973
|
+
}]
|
|
1974
|
+
}], propDecorators: { role: [{
|
|
1975
|
+
type: HostBinding,
|
|
1976
|
+
args: ['attr.role']
|
|
1977
|
+
}], label: [{
|
|
1978
|
+
type: HostBinding,
|
|
1979
|
+
args: ['attr.aria-label']
|
|
1980
|
+
}], onKeyDown: [{
|
|
1981
|
+
type: HostListener,
|
|
1982
|
+
args: ['keydown', ['$event']]
|
|
1983
|
+
}] } });
|
|
1984
|
+
class KeyboardCellDirective {
|
|
1985
|
+
constructor() {
|
|
1986
|
+
this.navigation = inject(KeyboardNavigationService);
|
|
1987
|
+
this.element = inject(ElementRef).nativeElement;
|
|
1988
|
+
}
|
|
1989
|
+
get role() { return this.navigation.enabled ? 'gridcell' : null; }
|
|
1990
|
+
get enabled() { return this.navigation.enabled; }
|
|
1991
|
+
ngOnInit() { this.navigation.register(this); }
|
|
1992
|
+
ngOnDestroy() { this.navigation.unregister(this); }
|
|
1993
|
+
onFocusIn(event) { this.navigation.focusIn(this, event); }
|
|
1994
|
+
onFocusOut(event) { this.navigation.focusOut(event); }
|
|
1995
|
+
onKeyDown(event) { this.navigation.keyDown(this, event); }
|
|
1996
|
+
onClick(event) { this.navigation.click(this, event); }
|
|
1997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1998
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KeyboardCellDirective, isStandalone: true, selector: "td[klesKeyboardCell]", inputs: { row: ["klesKeyboardCell", "row"], columnDef: "columnDef" }, host: { attributes: { "data-kles-keyboard-cell": "" }, listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "attr.role": "this.role", "class.kles-keyboard-cell": "this.enabled" } }, ngImport: i0 }); }
|
|
1999
|
+
}
|
|
2000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KeyboardCellDirective, decorators: [{
|
|
2001
|
+
type: Directive,
|
|
2002
|
+
args: [{ selector: 'td[klesKeyboardCell]', standalone: true, host: { 'data-kles-keyboard-cell': '' } }]
|
|
2003
|
+
}], propDecorators: { row: [{
|
|
2004
|
+
type: Input,
|
|
2005
|
+
args: [{ required: true, alias: 'klesKeyboardCell' }]
|
|
2006
|
+
}], columnDef: [{
|
|
2007
|
+
type: Input,
|
|
2008
|
+
args: [{ required: true }]
|
|
2009
|
+
}], role: [{
|
|
2010
|
+
type: HostBinding,
|
|
2011
|
+
args: ['attr.role']
|
|
2012
|
+
}], enabled: [{
|
|
2013
|
+
type: HostBinding,
|
|
2014
|
+
args: ['class.kles-keyboard-cell']
|
|
2015
|
+
}], onFocusIn: [{
|
|
2016
|
+
type: HostListener,
|
|
2017
|
+
args: ['focusin', ['$event']]
|
|
2018
|
+
}], onFocusOut: [{
|
|
2019
|
+
type: HostListener,
|
|
2020
|
+
args: ['focusout', ['$event']]
|
|
2021
|
+
}], onKeyDown: [{
|
|
2022
|
+
type: HostListener,
|
|
2023
|
+
args: ['keydown', ['$event']]
|
|
2024
|
+
}], onClick: [{
|
|
2025
|
+
type: HostListener,
|
|
2026
|
+
args: ['click', ['$event']]
|
|
2027
|
+
}] } });
|
|
2028
|
+
|
|
1631
2029
|
class KlesTableConnectorService {
|
|
1632
2030
|
constructor() {
|
|
1633
2031
|
this._connected$ = new BehaviorSubject(false);
|
|
@@ -1667,6 +2065,9 @@ class KlesTableConnectorService {
|
|
|
1667
2065
|
get selection() {
|
|
1668
2066
|
return this.table.selection;
|
|
1669
2067
|
}
|
|
2068
|
+
get cursor() {
|
|
2069
|
+
return this.table.cursor;
|
|
2070
|
+
}
|
|
1670
2071
|
get footer() {
|
|
1671
2072
|
return this.table.footer;
|
|
1672
2073
|
}
|
|
@@ -1691,17 +2092,18 @@ class KlesTableConnectorService {
|
|
|
1691
2092
|
refresh() {
|
|
1692
2093
|
this.table?.refresh();
|
|
1693
2094
|
}
|
|
1694
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1695
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2095
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2096
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService }); }
|
|
1696
2097
|
}
|
|
1697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, decorators: [{
|
|
1698
2099
|
type: Injectable
|
|
1699
2100
|
}], ctorParameters: () => [] });
|
|
1700
2101
|
|
|
1701
2102
|
class LoadingService {
|
|
1702
2103
|
constructor(eventsService) {
|
|
1703
2104
|
this.eventsService = eventsService;
|
|
1704
|
-
this._loading = signal(false,
|
|
2105
|
+
this._loading = signal(false, /* @ts-ignore */
|
|
2106
|
+
...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
|
|
1705
2107
|
}
|
|
1706
2108
|
get loading() {
|
|
1707
2109
|
return this._loading.asReadonly();
|
|
@@ -1720,10 +2122,10 @@ class LoadingService {
|
|
|
1720
2122
|
this._loading.set(false);
|
|
1721
2123
|
this.eventsService.emit('loadingChange', { loading: false });
|
|
1722
2124
|
}
|
|
1723
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1724
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2126
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService }); }
|
|
1725
2127
|
}
|
|
1726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, decorators: [{
|
|
1727
2129
|
type: Injectable
|
|
1728
2130
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
1729
2131
|
|
|
@@ -1742,10 +2144,10 @@ class PaginatorStore {
|
|
|
1742
2144
|
reset() {
|
|
1743
2145
|
this.s.next({ page: 0, perPage: this.config?.pageSize ?? 10 });
|
|
1744
2146
|
}
|
|
1745
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1746
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore, deps: [{ token: PAGINATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2148
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore }); }
|
|
1747
2149
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore, decorators: [{
|
|
1749
2151
|
type: Injectable
|
|
1750
2152
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1751
2153
|
type: Optional
|
|
@@ -1760,7 +2162,8 @@ class PaginatorService {
|
|
|
1760
2162
|
this.paginatorStore = paginatorStore;
|
|
1761
2163
|
this.datasourceService = datasourceService;
|
|
1762
2164
|
this.eventsService = eventsService;
|
|
1763
|
-
this._disabled = signal(false,
|
|
2165
|
+
this._disabled = signal(false, /* @ts-ignore */
|
|
2166
|
+
...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1764
2167
|
this._pageChanged = new EventEmitter();
|
|
1765
2168
|
this.destroyRef = inject(DestroyRef);
|
|
1766
2169
|
}
|
|
@@ -1842,10 +2245,10 @@ class PaginatorService {
|
|
|
1842
2245
|
});
|
|
1843
2246
|
}
|
|
1844
2247
|
}
|
|
1845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1846
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService, deps: [{ token: PAGINATOR_CONFIG, optional: true }, { token: PaginatorStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2249
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService }); }
|
|
1847
2250
|
}
|
|
1848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService, decorators: [{
|
|
1849
2252
|
type: Injectable
|
|
1850
2253
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1851
2254
|
type: Optional
|
|
@@ -1899,10 +2302,10 @@ class ScrollbarService {
|
|
|
1899
2302
|
getTop() {
|
|
1900
2303
|
return this.element?.scrollTop;
|
|
1901
2304
|
}
|
|
1902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1903
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2306
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService }); }
|
|
1904
2307
|
}
|
|
1905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, decorators: [{
|
|
1906
2309
|
type: Injectable
|
|
1907
2310
|
}] });
|
|
1908
2311
|
|
|
@@ -1928,10 +2331,10 @@ class FooterService {
|
|
|
1928
2331
|
this._footer.set(false);
|
|
1929
2332
|
this.eventsService.emit('footerVisibilityChange', { visible: false });
|
|
1930
2333
|
}
|
|
1931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1932
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService, deps: [{ token: FOOTER }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2335
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService }); }
|
|
1933
2336
|
}
|
|
1934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService, decorators: [{
|
|
1935
2338
|
type: Injectable
|
|
1936
2339
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1937
2340
|
type: Inject,
|
|
@@ -1942,12 +2345,14 @@ class ExtraRowService {
|
|
|
1942
2345
|
constructor(_extraRowsConfig, expandedRowStore) {
|
|
1943
2346
|
this._extraRowsConfig = _extraRowsConfig;
|
|
1944
2347
|
this.expandedRowStore = expandedRowStore;
|
|
1945
|
-
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0,
|
|
2348
|
+
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
|
|
2349
|
+
...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
|
|
1946
2350
|
this.rows = computed(() => this._extraRowsConfig().map((config) => ({
|
|
1947
2351
|
...config,
|
|
1948
2352
|
when: this.createWhen(config),
|
|
1949
2353
|
displayedColumns: config.cells.map((cel) => cel.columnDef),
|
|
1950
|
-
})),
|
|
2354
|
+
})), /* @ts-ignore */
|
|
2355
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1951
2356
|
}
|
|
1952
2357
|
extraFields() {
|
|
1953
2358
|
return this._extraRowsConfig()
|
|
@@ -1965,10 +2370,10 @@ class ExtraRowService {
|
|
|
1965
2370
|
return config?.when;
|
|
1966
2371
|
}
|
|
1967
2372
|
}
|
|
1968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1969
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
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 }); }
|
|
1970
2375
|
}
|
|
1971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
|
|
1972
2377
|
type: Injectable
|
|
1973
2378
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1974
2379
|
type: Inject,
|
|
@@ -1985,10 +2390,10 @@ class RenderService {
|
|
|
1985
2390
|
forceRenderRows() {
|
|
1986
2391
|
this._render.emit();
|
|
1987
2392
|
}
|
|
1988
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1989
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2394
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService }); }
|
|
1990
2395
|
}
|
|
1991
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, decorators: [{
|
|
1992
2397
|
type: Injectable
|
|
1993
2398
|
}] });
|
|
1994
2399
|
|
|
@@ -2084,10 +2489,10 @@ class CellValueChangeService {
|
|
|
2084
2489
|
}
|
|
2085
2490
|
}
|
|
2086
2491
|
}
|
|
2087
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2088
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2492
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2493
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService }); }
|
|
2089
2494
|
}
|
|
2090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, decorators: [{
|
|
2091
2496
|
type: Injectable
|
|
2092
2497
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2093
2498
|
|
|
@@ -2099,85 +2504,74 @@ class ValidationService {
|
|
|
2099
2504
|
this.rowSubscriptions = new Map();
|
|
2100
2505
|
}
|
|
2101
2506
|
listen(visibleRows, visibleColumns) {
|
|
2102
|
-
const
|
|
2103
|
-
const
|
|
2507
|
+
const expectedControls = new Set();
|
|
2508
|
+
const expectedRows = new Set(visibleRows);
|
|
2104
2509
|
visibleRows.forEach((row, rowIndex) => {
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2510
|
+
let rowEntry = this.rowSubscriptions.get(row);
|
|
2511
|
+
if (rowEntry) {
|
|
2512
|
+
rowEntry.rowIndex = rowIndex;
|
|
2513
|
+
}
|
|
2514
|
+
else {
|
|
2515
|
+
rowEntry = { row, rowIndex };
|
|
2516
|
+
this.rowSubscriptions.set(row, rowEntry);
|
|
2517
|
+
rowEntry.subscription = this.subscribeToRow(rowEntry);
|
|
2518
|
+
}
|
|
2519
|
+
visibleColumns.forEach((columnDef) => {
|
|
2520
|
+
const control = row.get(columnDef);
|
|
2521
|
+
if (!control)
|
|
2113
2522
|
return;
|
|
2114
|
-
|
|
2115
|
-
const
|
|
2116
|
-
|
|
2117
|
-
|
|
2523
|
+
expectedControls.add(control);
|
|
2524
|
+
const existing = this.columnSubscriptions.get(control);
|
|
2525
|
+
if (existing) {
|
|
2526
|
+
existing.rowIndex = rowIndex;
|
|
2118
2527
|
return;
|
|
2119
2528
|
}
|
|
2120
|
-
const
|
|
2121
|
-
this.columnSubscriptions.set(
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
subscribeToCell(row, rowIndex, columnDef, control) {
|
|
2133
|
-
return control.statusChanges
|
|
2134
|
-
.pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID'))
|
|
2135
|
-
.subscribe(() => {
|
|
2136
|
-
this.eventsService.emit('cellValidationError', {
|
|
2137
|
-
row,
|
|
2138
|
-
rowIndex,
|
|
2139
|
-
rawValue: row.getRawValue(),
|
|
2140
|
-
value: row.value,
|
|
2141
|
-
errors: control.errors,
|
|
2142
|
-
controlsErrors: { columnDef: control.errors },
|
|
2529
|
+
const entry = { row, rowIndex };
|
|
2530
|
+
this.columnSubscriptions.set(control, entry);
|
|
2531
|
+
entry.subscription = control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID')).subscribe(() => {
|
|
2532
|
+
this.eventsService.emit('cellValidationError', {
|
|
2533
|
+
row,
|
|
2534
|
+
rowIndex: entry.rowIndex,
|
|
2535
|
+
rawValue: row.getRawValue(),
|
|
2536
|
+
value: row.value,
|
|
2537
|
+
errors: control.errors,
|
|
2538
|
+
controlsErrors: { [columnDef]: control.errors },
|
|
2539
|
+
});
|
|
2540
|
+
});
|
|
2143
2541
|
});
|
|
2144
2542
|
});
|
|
2543
|
+
for (const [control, entry] of this.columnSubscriptions) {
|
|
2544
|
+
if (!expectedControls.has(control)) {
|
|
2545
|
+
entry.subscription?.unsubscribe();
|
|
2546
|
+
this.columnSubscriptions.delete(control);
|
|
2547
|
+
}
|
|
2548
|
+
}
|
|
2549
|
+
for (const [row, entry] of this.rowSubscriptions) {
|
|
2550
|
+
if (!expectedRows.has(row)) {
|
|
2551
|
+
entry.subscription?.unsubscribe();
|
|
2552
|
+
this.rowSubscriptions.delete(row);
|
|
2553
|
+
}
|
|
2554
|
+
}
|
|
2145
2555
|
}
|
|
2146
|
-
subscribeToRow(
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
.subscribe(() => {
|
|
2556
|
+
subscribeToRow(entry) {
|
|
2557
|
+
const row = entry.row;
|
|
2558
|
+
return row.statusChanges.pipe(startWith(row.status), takeUntilDestroyed(this.destroyRef), filter((status) => status === 'INVALID')).subscribe(() => {
|
|
2150
2559
|
this.eventsService.emit('rowValidationError', {
|
|
2151
2560
|
row,
|
|
2152
|
-
rowIndex,
|
|
2561
|
+
rowIndex: entry.rowIndex,
|
|
2153
2562
|
rawValue: row.getRawValue(),
|
|
2154
2563
|
value: row.value,
|
|
2155
2564
|
errors: row.errors,
|
|
2156
|
-
controlsErrors: Object.
|
|
2157
|
-
.filter((
|
|
2158
|
-
.map((
|
|
2159
|
-
.reduce((a, b) => ({ ...a, ...b })),
|
|
2565
|
+
controlsErrors: Object.fromEntries(Object.entries(row.controls)
|
|
2566
|
+
.filter(([, control]) => control.errors)
|
|
2567
|
+
.map(([name, control]) => [name, control.errors])),
|
|
2160
2568
|
});
|
|
2161
2569
|
});
|
|
2162
2570
|
}
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
if (!expectedColumnKeys.has(key)) {
|
|
2166
|
-
subscription.unsubscribe();
|
|
2167
|
-
this.columnSubscriptions.delete(key);
|
|
2168
|
-
}
|
|
2169
|
-
}
|
|
2170
|
-
for (const [key, subscription] of this.rowSubscriptions.entries()) {
|
|
2171
|
-
if (!expectedRowKeys.has(key)) {
|
|
2172
|
-
subscription.unsubscribe();
|
|
2173
|
-
this.rowSubscriptions.delete(key);
|
|
2174
|
-
}
|
|
2175
|
-
}
|
|
2176
|
-
}
|
|
2177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2178
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ValidationService }); }
|
|
2571
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2572
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService }); }
|
|
2179
2573
|
}
|
|
2180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, decorators: [{
|
|
2181
2575
|
type: Injectable
|
|
2182
2576
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2183
2577
|
|
|
@@ -2188,7 +2582,8 @@ class DatasourceService {
|
|
|
2188
2582
|
this.cellValueChangeService = cellValueChangeService;
|
|
2189
2583
|
this.validationService = validationService;
|
|
2190
2584
|
this.destroyRef = inject(DestroyRef);
|
|
2191
|
-
this._isEmpty = signal(true,
|
|
2585
|
+
this._isEmpty = signal(true, /* @ts-ignore */
|
|
2586
|
+
...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
|
|
2192
2587
|
this.isEmpty = this._isEmpty.asReadonly();
|
|
2193
2588
|
}
|
|
2194
2589
|
register() {
|
|
@@ -2214,10 +2609,10 @@ class DatasourceService {
|
|
|
2214
2609
|
this.validationService.listen(rows, this.columnsService.getVisible());
|
|
2215
2610
|
});
|
|
2216
2611
|
}
|
|
2217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2218
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2612
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2613
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService }); }
|
|
2219
2614
|
}
|
|
2220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService, decorators: [{
|
|
2221
2616
|
type: Injectable
|
|
2222
2617
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
|
|
2223
2618
|
class DatasourceLazyService {
|
|
@@ -2227,7 +2622,8 @@ class DatasourceLazyService {
|
|
|
2227
2622
|
this.cellValueChangeService = cellValueChangeService;
|
|
2228
2623
|
this.validationService = validationService;
|
|
2229
2624
|
this.destroyRef = inject(DestroyRef);
|
|
2230
|
-
this._isEmpty = signal(true,
|
|
2625
|
+
this._isEmpty = signal(true, /* @ts-ignore */
|
|
2626
|
+
...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
|
|
2231
2627
|
this.isEmpty = this._isEmpty.asReadonly();
|
|
2232
2628
|
}
|
|
2233
2629
|
register() {
|
|
@@ -2253,10 +2649,10 @@ class DatasourceLazyService {
|
|
|
2253
2649
|
this.validationService.listen(rows, this.columnsService.getVisible());
|
|
2254
2650
|
});
|
|
2255
2651
|
}
|
|
2256
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2257
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2652
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: CellValueChangeService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2653
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService }); }
|
|
2258
2654
|
}
|
|
2259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService, decorators: [{
|
|
2260
2656
|
type: Injectable
|
|
2261
2657
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
|
|
2262
2658
|
|
|
@@ -2330,10 +2726,10 @@ class FilterService {
|
|
|
2330
2726
|
});
|
|
2331
2727
|
};
|
|
2332
2728
|
}
|
|
2333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2334
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, deps: [{ token: ColumnsService }, { token: DATASOURCE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2730
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService }); }
|
|
2335
2731
|
}
|
|
2336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, decorators: [{
|
|
2337
2733
|
type: Injectable
|
|
2338
2734
|
}], ctorParameters: () => [{ type: ColumnsService }, { type: DatasourceService, decorators: [{
|
|
2339
2735
|
type: Inject,
|
|
@@ -2393,10 +2789,10 @@ class RowService {
|
|
|
2393
2789
|
event,
|
|
2394
2790
|
});
|
|
2395
2791
|
}
|
|
2396
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2397
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2792
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService, deps: [{ token: EventsService }, { token: SELECTION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2793
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService }); }
|
|
2398
2794
|
}
|
|
2399
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService, decorators: [{
|
|
2400
2796
|
type: Injectable
|
|
2401
2797
|
}], ctorParameters: () => [{ type: EventsService }, { type: undefined, decorators: [{
|
|
2402
2798
|
type: Inject,
|
|
@@ -2445,17 +2841,18 @@ class CellService {
|
|
|
2445
2841
|
control,
|
|
2446
2842
|
});
|
|
2447
2843
|
}
|
|
2448
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2449
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2844
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2845
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService }); }
|
|
2450
2846
|
}
|
|
2451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, decorators: [{
|
|
2452
2848
|
type: Injectable
|
|
2453
2849
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2454
2850
|
|
|
2455
2851
|
class EmptyStateService {
|
|
2456
2852
|
constructor(config, eventsService) {
|
|
2457
2853
|
this.eventsService = eventsService;
|
|
2458
|
-
this._enabled = signal(true,
|
|
2854
|
+
this._enabled = signal(true, /* @ts-ignore */
|
|
2855
|
+
...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
|
|
2459
2856
|
this.enabled = this._enabled.asReadonly();
|
|
2460
2857
|
if (typeof config === 'boolean') {
|
|
2461
2858
|
this._enabled.set(config);
|
|
@@ -2482,10 +2879,10 @@ class EmptyStateService {
|
|
|
2482
2879
|
toggle() {
|
|
2483
2880
|
this._enabled() ? this.disable() : this.enable();
|
|
2484
2881
|
}
|
|
2485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2486
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService, deps: [{ token: EMPTY_STATE_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2883
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService }); }
|
|
2487
2884
|
}
|
|
2488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService, decorators: [{
|
|
2489
2886
|
type: Injectable
|
|
2490
2887
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2491
2888
|
type: Inject,
|
|
@@ -2701,6 +3098,9 @@ class ColumnDragDropService {
|
|
|
2701
3098
|
}
|
|
2702
3099
|
|
|
2703
3100
|
class TableComponent {
|
|
3101
|
+
get cursor() {
|
|
3102
|
+
return this.cursorService;
|
|
3103
|
+
}
|
|
2704
3104
|
constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, columnDragDropService, rowAppearance, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService, rowContextStore) {
|
|
2705
3105
|
this.host = host;
|
|
2706
3106
|
this.connectorService = connectorService;
|
|
@@ -2728,13 +3128,22 @@ class TableComponent {
|
|
|
2728
3128
|
this.emptyStateService = emptyStateService;
|
|
2729
3129
|
this.treeService = treeService;
|
|
2730
3130
|
this.rowContextStore = rowContextStore;
|
|
2731
|
-
this.headerHeightPx = signal(56,
|
|
2732
|
-
|
|
2733
|
-
this.
|
|
2734
|
-
|
|
2735
|
-
this.
|
|
3131
|
+
this.headerHeightPx = signal(56, /* @ts-ignore */
|
|
3132
|
+
...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
|
|
3133
|
+
this.scrollHeightPx = signal(0, /* @ts-ignore */
|
|
3134
|
+
...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
|
|
3135
|
+
this.footerHeightPx = signal(0, /* @ts-ignore */
|
|
3136
|
+
...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
|
|
3137
|
+
this.viewportWidthPx = signal(0, /* @ts-ignore */
|
|
3138
|
+
...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
|
|
3139
|
+
this.viewportScrollRangePx = signal(0, /* @ts-ignore */
|
|
3140
|
+
...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
|
|
3141
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
2736
3142
|
this.destroyRef = inject(DestroyRef);
|
|
2737
3143
|
this.emptyStateComponent = KlesTableEmptyStateComponent;
|
|
3144
|
+
this.identityTrackBy = (_, row) => row;
|
|
3145
|
+
this.cursorService = inject(CursorService);
|
|
3146
|
+
this.intl = inject(KlesTableIntl);
|
|
2738
3147
|
this.columns = this.columnsService.columns;
|
|
2739
3148
|
this.displayedColumns = this.columnsService.displayedColumns;
|
|
2740
3149
|
this.showFooter = this.footerService.footer;
|
|
@@ -2742,6 +3151,9 @@ class TableComponent {
|
|
|
2742
3151
|
this.isEmpty = this.datasourceService.isEmpty;
|
|
2743
3152
|
this.multiTemplateDataRows = this.extraRowService.multiTemplateDataRows;
|
|
2744
3153
|
this.extraRows = this.extraRowService.rows;
|
|
3154
|
+
this.tableService.form.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
3155
|
+
this.changeDetectorRef.markForCheck();
|
|
3156
|
+
});
|
|
2745
3157
|
this.connectorService.connect(this);
|
|
2746
3158
|
this.filterService?.register();
|
|
2747
3159
|
}
|
|
@@ -3070,10 +3482,10 @@ class TableComponent {
|
|
|
3070
3482
|
};
|
|
3071
3483
|
}
|
|
3072
3484
|
}
|
|
3073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr\n mat-header-row\n class=\"kles-column-drop-list\"\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n [cdkDropListAutoScrollDisabled]=\"true\"\n [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n [class.kles-row-selected]=\"isRowSelected(row)\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <div\n class=\"kles-extra-row-content\"\n [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n >\n <ng-container\n klesDynamicField\n [field]=\"extraColumn | extraCellField\"\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [context]=\"row | rowContext\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
|
|
3485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: COLUMN_DRAG_DROP }, { token: ROW_APPEARANCE_CONFIG }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }, { token: TreeService }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }, { propertyName: "dropLists", predicate: CdkDropList, descendants: true }, { propertyName: "drags", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<form\n #form\n cdkScrollable\n [formGroup]=\"tableService.form\"\n [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n {{ intl.keyboardNavigationEntryLabel }}\n </button>\n }\n <table\n mat-table\n klesKeyboardGrid\n #keyboardGrid=\"klesKeyboardGrid\"\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n | resolveNgStyle\n : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"(column | header)!\"\n [group]=\"tableService.form.controls.header\"\n [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"(column | headerField)!\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [klesKeyboardCell]=\"row\"\n [columnDef]=\"column.columnDef\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.cell?.style?.ngStyle)\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container\n klesDynamicField\n [field]=\"(column | cellField)!\"\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [context]=\"row | rowContext\"\n ></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n | resolveNgStyle\n : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"(column | footerField)!\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr\n mat-header-row\n class=\"kles-column-drop-list\"\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n [cdkDropListAutoScrollDisabled]=\"true\"\n [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n [class.kles-row-selected]=\"isRowSelected(row)\"\n [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n $safeNavigationMigration(extraColumn?.style?.ngStyle)\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <div\n class=\"kles-extra-row-content\"\n [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n >\n <ng-container\n klesDynamicField\n [field]=\"(extraColumn | extraCellField)!\"\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [context]=\"row | rowContext\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n @if (emptyStateService.component === emptyStateComponent) {\n <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n } @else {\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer", "columnDragHandle"] }, { kind: "directive", type: KeyboardGridDirective, selector: "table[klesKeyboardGrid]", exportAs: ["klesKeyboardGrid"] }, { kind: "directive", type: KeyboardCellDirective, selector: "td[klesKeyboardCell]", inputs: ["klesKeyboardCell", "columnDef"] }, { kind: "component", type: KlesTableEmptyStateComponent, selector: "kles-table-empty-state", outputs: ["refreshRequested"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
|
|
3075
3487
|
}
|
|
3076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
3077
3489
|
type: Component,
|
|
3078
3490
|
args: [{ selector: 'kles-table', standalone: true, imports: [
|
|
3079
3491
|
CommonModule,
|
|
@@ -3104,7 +3516,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3104
3516
|
RowContextPipe,
|
|
3105
3517
|
ResolveRowStylePipe,
|
|
3106
3518
|
ResolveRowClassPipe,
|
|
3107
|
-
], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr\n mat-header-row\n class=\"kles-column-drop-list\"\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n [cdkDropListAutoScrollDisabled]=\"true\"\n [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n [class.kles-row-selected]=\"isRowSelected(row)\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <div\n class=\"kles-extra-row-content\"\n [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n >\n <ng-container\n klesDynamicField\n [field]=\"extraColumn | extraCellField\"\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [context]=\"row | rowContext\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
|
|
3519
|
+
KeyboardGridDirective,
|
|
3520
|
+
KeyboardCellDirective,
|
|
3521
|
+
KlesTableEmptyStateComponent,
|
|
3522
|
+
], template: "<form\n #form\n cdkScrollable\n [formGroup]=\"tableService.form\"\n [style.scroll-padding-top.px]=\"keyboardGrid.navigation.enabled ? headerHeightPx() : null\"\n [style.scroll-padding-bottom.px]=\"keyboardGrid.navigation.enabled && showFooter() ? footerHeightPx() : null\"\n>\n @if (keyboardGrid.navigation.enabled && !isEmpty()) {\n <button type=\"button\" class=\"kles-grid-entry\" (click)=\"keyboardGrid.navigation.focusActive()\">\n {{ intl.keyboardNavigationEntryLabel }}\n </button>\n }\n <table\n mat-table\n klesKeyboardGrid\n #keyboardGrid=\"klesKeyboardGrid\"\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? identityTrackBy : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo ?? []\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"columnDragDropService.isDragDisabled(column)\"\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.headerCell?.style?.ngStyle)\n | resolveNgStyle\n : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.value)\n : $safeNavigationMigration(tableService.form.get(['header', column.columnDef])?.status)\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"(column | header)!\"\n [group]=\"tableService.form.controls.header\"\n [columnDragHandle]=\"columnDragDropService.enable && !columnDragDropService.isDragDisabled(column)\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"(column | headerField)!\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [klesKeyboardCell]=\"row\"\n [columnDef]=\"column.columnDef\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.cell?.style?.ngStyle)\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container\n klesDynamicField\n [field]=\"(column | cellField)!\"\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [context]=\"row | rowContext\"\n ></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n $safeNavigationMigration(column.footerCell?.style?.ngStyle)\n | resolveNgStyle\n : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.value)\n : $safeNavigationMigration(tableService.form.get(['footer', column.columnDef])?.status)\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"(column | footerField)!\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr\n mat-header-row\n class=\"kles-column-drop-list\"\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"columnDragDropService.visibleColumns()\"\n [cdkDropListDisabled]=\"!columnDragDropService.enable\"\n [cdkDropListAutoScrollDisabled]=\"true\"\n [cdkDropListSortPredicate]=\"columnDragDropService.sortPredicate\"\n (cdkDropListDropped)=\"columnDragDropService.listDropped($event)\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n [class.kles-row-selected]=\"isRowSelected(row)\"\n [class.kles-row-pointer]=\"cursorService.isPointer(row)\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"(extraColumn.colspan ?? 1) | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n $safeNavigationMigration(extraColumn?.style?.ngStyle)\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <div\n class=\"kles-extra-row-content\"\n [class.kles-extra-row-content--viewport]=\"extraRow.width === 'viewport'\"\n [style.width.px]=\"extraRow.width === 'viewport' ? viewportWidthPx() : null\"\n [style.--kles-table-horizontal-scroll-range.px]=\"extraRow.width === 'viewport' ? viewportScrollRangePx() : null\"\n >\n <ng-container\n klesDynamicField\n [field]=\"(extraColumn | extraCellField)!\"\n [group]=\"row\"\n [ui]=\"(row | uiField)!\"\n [context]=\"row | rowContext\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n @if (emptyStateService.component === emptyStateComponent) {\n <kles-table-empty-state (refreshRequested)=\"refresh()\"></kles-table-empty-state>\n } @else {\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n }\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 4%, var(--mat-sys-surface));--kles-table-row-selected-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));--kles-table-row-selected-hover-background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface));--kles-table-row-selected-indicator-color: var(--mat-sys-primary);overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto;scroll-timeline-name:--kles-table-horizontal-scroll;scroll-timeline-axis:inline}.kles-row-pointer{cursor:pointer}.kles-keyboard-cell:focus-visible{outline:2px solid var(--mat-sys-primary, Highlight);outline-offset:-2px}.kles-grid-entry{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kles-grid-entry:focus-visible{top:4px;left:4px;z-index:10;width:auto;height:auto;padding:8px 12px;clip-path:none;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);outline:2px solid var(--mat-sys-primary, Highlight)}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}.kles-extra-row-content--viewport{box-sizing:border-box;animation:kles-extra-row-horizontal-scroll 1ms linear both paused}@supports (animation-timeline: scroll()){.kles-extra-row-content--viewport{animation-play-state:running;animation-timeline:--kles-table-horizontal-scroll}}@keyframes kles-extra-row-horizontal-scroll{0%{transform:translate(0)}to{transform:translate(var(--kles-table-horizontal-scroll-range, 0px))}}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected{background:var(--kles-table-row-selected-background);box-shadow:inset 3px 0 0 var(--kles-table-row-selected-indicator-color)}:host .mat-mdc-row:not(.kles-extra-row).kles-row-selected:hover{background:var(--kles-table-row-selected-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .kles-column-drop-list.cdk-drop-list-dragging .mat-mdc-header-cell:not(.cdk-drag-placeholder),:host .mat-mdc-header-cell.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}:host .mat-mdc-header-cell.cdk-drag-placeholder{opacity:.25}.mat-mdc-header-cell.cdk-drag-preview{box-sizing:border-box;background:var(--kles-table-header-background);color:var(--kles-table-header-color);box-shadow:var(--mat-sys-level3)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow-x:hidden;overflow-y:auto;container-type:size;container-name:kles-empty-state;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:16px;box-sizing:border-box}@container kles-empty-state (max-height: 220px){.table-empty-state-content{padding:8px}}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
|
|
3108
3523
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
|
|
3109
3524
|
type: Inject,
|
|
3110
3525
|
args: [LOADER_SERVICE]
|
|
@@ -3167,10 +3582,10 @@ class PaginateTableComponent {
|
|
|
3167
3582
|
ngOnInit() {
|
|
3168
3583
|
this.paginatorService.register(this.paginator);
|
|
3169
3584
|
}
|
|
3170
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, deps: [{ token: PaginatorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: PaginateTableComponent, isStandalone: true, selector: "kles-paginate-table", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n<div class=\"table-footer\">\n <div class=\"table-footer-start\">\n <ng-content select=\"[klesTableFooterStart]\"></ng-content>\n </div>\n <mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto;container-type:inline-size}.table-footer{display:flex;flex:0 0 auto;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;overflow-x:auto}.table-footer-start{display:flex;flex:1 1 0;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;padding-inline:var(--kles-table-footer-padding-inline, 8px);box-sizing:border-box;overflow:hidden}.table-footer-start:empty{display:none}.paginator{flex:0 0 auto;margin-inline-start:auto;padding-bottom:4px}@container (max-width: 760px){.table-footer{flex-wrap:wrap}.table-footer-start{flex:1 1 100%;overflow-x:auto}.paginator{max-width:100%}}@container (max-width: 480px){.table-footer-start{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
3172
3587
|
}
|
|
3173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, decorators: [{
|
|
3174
3589
|
type: Component,
|
|
3175
3590
|
args: [{ selector: 'kles-paginate-table', standalone: true, imports: [CommonModule, TableComponent, MatPaginatorModule], template: "<kles-table></kles-table>\n<div class=\"table-footer\">\n <div class=\"table-footer-start\">\n <ng-content select=\"[klesTableFooterStart]\"></ng-content>\n </div>\n <mat-paginator [disabled]=\"disabled()\" class=\"paginator\"></mat-paginator>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto;container-type:inline-size}.table-footer{display:flex;flex:0 0 auto;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;overflow-x:auto}.table-footer-start{display:flex;flex:1 1 0;align-items:center;gap:var(--kles-table-footer-gap, 12px);min-width:0;padding-inline:var(--kles-table-footer-padding-inline, 8px);box-sizing:border-box;overflow:hidden}.table-footer-start:empty{display:none}.paginator{flex:0 0 auto;margin-inline-start:auto;padding-bottom:4px}@container (max-width: 760px){.table-footer{flex-wrap:wrap}.table-footer-start{flex:1 1 100%;overflow-x:auto}.paginator{max-width:100%}}@container (max-width: 480px){.table-footer-start{display:none}}\n"] }]
|
|
3176
3591
|
}], ctorParameters: () => [{ type: PaginatorService }], propDecorators: { paginator: [{
|
|
@@ -3196,10 +3611,10 @@ class SortStore {
|
|
|
3196
3611
|
reset() {
|
|
3197
3612
|
this.s.next(this.config || undefined);
|
|
3198
3613
|
}
|
|
3199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3200
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3614
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore, deps: [{ token: SORT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3615
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore }); }
|
|
3201
3616
|
}
|
|
3202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore, decorators: [{
|
|
3203
3618
|
type: Injectable
|
|
3204
3619
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3205
3620
|
type: Optional
|
|
@@ -3242,10 +3657,10 @@ class AbstractSortService {
|
|
|
3242
3657
|
sortChange() {
|
|
3243
3658
|
return this._sortChange;
|
|
3244
3659
|
}
|
|
3245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3246
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3661
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService }); }
|
|
3247
3662
|
}
|
|
3248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, decorators: [{
|
|
3249
3664
|
type: Injectable
|
|
3250
3665
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
3251
3666
|
class SortService extends AbstractSortService {
|
|
@@ -3336,10 +3751,10 @@ class SortService extends AbstractSortService {
|
|
|
3336
3751
|
});
|
|
3337
3752
|
};
|
|
3338
3753
|
}
|
|
3339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3340
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3754
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService, deps: [{ token: SortStore, optional: true }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3755
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService }); }
|
|
3341
3756
|
}
|
|
3342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService, decorators: [{
|
|
3343
3758
|
type: Injectable
|
|
3344
3759
|
}], ctorParameters: () => [{ type: SortStore, decorators: [{
|
|
3345
3760
|
type: Optional
|
|
@@ -3365,10 +3780,10 @@ class SortLazyService extends AbstractSortService {
|
|
|
3365
3780
|
this.sortStore?.setSort(event);
|
|
3366
3781
|
});
|
|
3367
3782
|
}
|
|
3368
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3369
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3783
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService, deps: [{ token: SortStore, optional: true }, { token: DATASOURCE_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3784
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService }); }
|
|
3370
3785
|
}
|
|
3371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3786
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService, decorators: [{
|
|
3372
3787
|
type: Injectable
|
|
3373
3788
|
}], ctorParameters: () => [{ type: SortStore, decorators: [{
|
|
3374
3789
|
type: Optional
|
|
@@ -3388,10 +3803,10 @@ class FilterStore {
|
|
|
3388
3803
|
reset() {
|
|
3389
3804
|
this.s.next({});
|
|
3390
3805
|
}
|
|
3391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3392
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3807
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore }); }
|
|
3393
3808
|
}
|
|
3394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, decorators: [{
|
|
3395
3810
|
type: Injectable
|
|
3396
3811
|
}] });
|
|
3397
3812
|
|
|
@@ -3411,7 +3826,8 @@ class InfiniteScrollService {
|
|
|
3411
3826
|
this.registered = false;
|
|
3412
3827
|
this.loading = false;
|
|
3413
3828
|
this.lastLoadedPage = 0;
|
|
3414
|
-
this._loadingMore = signal(false,
|
|
3829
|
+
this._loadingMore = signal(false, /* @ts-ignore */
|
|
3830
|
+
...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
|
|
3415
3831
|
this.loadingMore = this._loadingMore.asReadonly();
|
|
3416
3832
|
}
|
|
3417
3833
|
register(element) {
|
|
@@ -3480,10 +3896,10 @@ class InfiniteScrollService {
|
|
|
3480
3896
|
requestAnimationFrame(() => this.loadNextPageIfNeeded());
|
|
3481
3897
|
}
|
|
3482
3898
|
}
|
|
3483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3484
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService, deps: [{ token: INFINITE_SCROLL_CONFIG }, { token: LOADER_CONFIG }, { token: LOADER_SERVICE }, { token: LINES_SERVICE }, { token: PaginatorStore }, { token: SortStore }, { token: FilterStore }, { token: KlesForm }, { token: ScrollbarService }, { token: EventsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3900
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService }); }
|
|
3485
3901
|
}
|
|
3486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService, decorators: [{
|
|
3487
3903
|
type: Injectable
|
|
3488
3904
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3489
3905
|
type: Inject,
|
|
@@ -3507,10 +3923,10 @@ class InfiniteScrollTableComponent {
|
|
|
3507
3923
|
ngAfterViewInit() {
|
|
3508
3924
|
this.infiniteScrollService.register(this.table.formElemRef.nativeElement);
|
|
3509
3925
|
}
|
|
3510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n <mat-spinner [diameter]=\"24\"></mat-spinner>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
3512
3928
|
}
|
|
3513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
|
|
3514
3930
|
type: Component,
|
|
3515
3931
|
args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [TableComponent, MatProgressSpinnerModule], template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n <mat-spinner [diameter]=\"24\"></mat-spinner>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"] }]
|
|
3516
3932
|
}], ctorParameters: () => [{ type: InfiniteScrollService }], propDecorators: { table: [{
|
|
@@ -3580,10 +3996,10 @@ class SelectionLoaderService {
|
|
|
3580
3996
|
success: false,
|
|
3581
3997
|
})));
|
|
3582
3998
|
}
|
|
3583
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3584
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3999
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService, deps: [{ token: SELECTION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4000
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService }); }
|
|
3585
4001
|
}
|
|
3586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService, decorators: [{
|
|
3587
4003
|
type: Injectable
|
|
3588
4004
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3589
4005
|
type: Optional
|
|
@@ -3666,10 +4082,10 @@ class HeaderService {
|
|
|
3666
4082
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
3667
4083
|
});
|
|
3668
4084
|
}
|
|
3669
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3670
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
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 }); }
|
|
4086
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService }); }
|
|
3671
4087
|
}
|
|
3672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, decorators: [{
|
|
3673
4089
|
type: Injectable
|
|
3674
4090
|
}], ctorParameters: () => [{ type: KlesForm }, { type: FilterService, decorators: [{
|
|
3675
4091
|
type: Optional
|
|
@@ -3746,10 +4162,10 @@ class HeaderLazyService {
|
|
|
3746
4162
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
3747
4163
|
});
|
|
3748
4164
|
}
|
|
3749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3750
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
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 }); }
|
|
4166
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService }); }
|
|
3751
4167
|
}
|
|
3752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, decorators: [{
|
|
3753
4169
|
type: Injectable
|
|
3754
4170
|
}], ctorParameters: () => [{ type: KlesForm }, { type: FilterStore, decorators: [{
|
|
3755
4171
|
type: Optional
|
|
@@ -3775,7 +4191,8 @@ class KlesSelectionModel {
|
|
|
3775
4191
|
this._changed = new Subject();
|
|
3776
4192
|
this._stateChanged = new Subject();
|
|
3777
4193
|
this._state = KlesSelectionModelState.ENABLED;
|
|
3778
|
-
this._count = signal(0,
|
|
4194
|
+
this._count = signal(0, /* @ts-ignore */
|
|
4195
|
+
...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
|
|
3779
4196
|
const values = initialValues ?? [];
|
|
3780
4197
|
this.assertSelectionCardinality(values);
|
|
3781
4198
|
values.forEach((value) => this._selection.add(value));
|
|
@@ -3922,7 +4339,8 @@ class AbstractSelectionService {
|
|
|
3922
4339
|
this.selectionConfig = selectionConfig;
|
|
3923
4340
|
this.fm = fm;
|
|
3924
4341
|
this.eventsService = eventsService;
|
|
3925
|
-
this._loadingRows = signal(new Set(),
|
|
4342
|
+
this._loadingRows = signal(new Set(), /* @ts-ignore */
|
|
4343
|
+
...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
|
|
3926
4344
|
this.rowSelectionRequests = new Subject();
|
|
3927
4345
|
this.loadingRows = this._loadingRows.asReadonly();
|
|
3928
4346
|
}
|
|
@@ -3935,17 +4353,26 @@ class AbstractSelectionService {
|
|
|
3935
4353
|
isLoading(row) {
|
|
3936
4354
|
return this._loadingRows().has(row);
|
|
3937
4355
|
}
|
|
4356
|
+
canSelectOnRowClick(row) {
|
|
4357
|
+
return !!this.selectionConfig?.selectOnRowClick && this.canSelectRow(row);
|
|
4358
|
+
}
|
|
4359
|
+
canSelectRow(row) {
|
|
4360
|
+
return (!!this.selectionConfig &&
|
|
4361
|
+
!row.controls[this.key]?.disabled &&
|
|
4362
|
+
!this.isLoading(row) &&
|
|
4363
|
+
this.selectionModel.state !== KlesSelectionModelState.DISABLED &&
|
|
4364
|
+
!this.selectionConfig.isDisabled?.(row));
|
|
4365
|
+
}
|
|
3938
4366
|
onRowClick(event, row) {
|
|
3939
|
-
if (!this.
|
|
4367
|
+
if (!this.canSelectOnRowClick(row) || event.defaultPrevented || this.isInteractiveClick(event)) {
|
|
3940
4368
|
return;
|
|
3941
4369
|
}
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
this.selectionConfig.isDisabled?.(row)) {
|
|
4370
|
+
this.toggleRowSelection(row);
|
|
4371
|
+
}
|
|
4372
|
+
toggleRowSelection(row) {
|
|
4373
|
+
if (!this.canSelectRow(row))
|
|
3947
4374
|
return;
|
|
3948
|
-
|
|
4375
|
+
const control = row.controls[this.key];
|
|
3949
4376
|
const selected = !this.selectionModel.isSelected(row);
|
|
3950
4377
|
if (control) {
|
|
3951
4378
|
control.setValue(selected);
|
|
@@ -4019,10 +4446,10 @@ class AbstractSelectionService {
|
|
|
4019
4446
|
return (target instanceof Element &&
|
|
4020
4447
|
target.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="link"], [contenteditable]:not([contenteditable="false"])') !== null);
|
|
4021
4448
|
}
|
|
4022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4023
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4449
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4450
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService }); }
|
|
4024
4451
|
}
|
|
4025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService, decorators: [{
|
|
4026
4453
|
type: Injectable
|
|
4027
4454
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4028
4455
|
type: Optional
|
|
@@ -4224,10 +4651,10 @@ class SelectionService extends AbstractSelectionService {
|
|
|
4224
4651
|
this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
|
|
4225
4652
|
}
|
|
4226
4653
|
}
|
|
4227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4228
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4655
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService }); }
|
|
4229
4656
|
}
|
|
4230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService, decorators: [{
|
|
4231
4658
|
type: Injectable
|
|
4232
4659
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4233
4660
|
type: Optional
|
|
@@ -4251,7 +4678,8 @@ class SelectionLazyService extends AbstractSelectionService {
|
|
|
4251
4678
|
this.linesService = linesService;
|
|
4252
4679
|
this.filterStore = filterStore;
|
|
4253
4680
|
this.destroyRef = inject(DestroyRef);
|
|
4254
|
-
this._count = signal(0,
|
|
4681
|
+
this._count = signal(0, /* @ts-ignore */
|
|
4682
|
+
...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
|
|
4255
4683
|
this.selectionModel = new KlesSelectionModel(selectionConfig?.selectionMode);
|
|
4256
4684
|
}
|
|
4257
4685
|
register() {
|
|
@@ -4432,10 +4860,10 @@ class SelectionLazyService extends AbstractSelectionService {
|
|
|
4432
4860
|
emitEvent: false,
|
|
4433
4861
|
});
|
|
4434
4862
|
}
|
|
4435
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4436
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4863
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService, deps: [{ token: SELECTION_CONFIG, optional: true }, { token: KlesForm }, { token: SelectionLoaderService }, { token: ScrollbarService }, { token: LoadingService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4864
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService }); }
|
|
4437
4865
|
}
|
|
4438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService, decorators: [{
|
|
4439
4867
|
type: Injectable
|
|
4440
4868
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4441
4869
|
type: Optional
|
|
@@ -4476,10 +4904,10 @@ class LoaderService {
|
|
|
4476
4904
|
this._refresh$.next();
|
|
4477
4905
|
this.eventsService.emit('refresh');
|
|
4478
4906
|
}
|
|
4479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4480
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4907
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService, deps: [{ token: LOADER_CONFIG }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4908
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService }); }
|
|
4481
4909
|
}
|
|
4482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4910
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService, decorators: [{
|
|
4483
4911
|
type: Injectable
|
|
4484
4912
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4485
4913
|
type: Inject,
|
|
@@ -4518,10 +4946,10 @@ class LoaderLazyService {
|
|
|
4518
4946
|
this._refresh$.next();
|
|
4519
4947
|
this.eventsService.emit('refresh');
|
|
4520
4948
|
}
|
|
4521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4522
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService, deps: [{ token: LOADER_CONFIG }, { token: PaginatorStore, optional: true }, { token: SortStore, optional: true }, { token: FilterStore, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4950
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService }); }
|
|
4523
4951
|
}
|
|
4524
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService, decorators: [{
|
|
4525
4953
|
type: Injectable
|
|
4526
4954
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4527
4955
|
type: Inject,
|
|
@@ -4591,10 +5019,10 @@ class LinesService {
|
|
|
4591
5019
|
}
|
|
4592
5020
|
});
|
|
4593
5021
|
}
|
|
4594
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4595
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5023
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService }); }
|
|
4596
5024
|
}
|
|
4597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService, decorators: [{
|
|
4598
5026
|
type: Injectable
|
|
4599
5027
|
}], ctorParameters: () => [{ type: LoaderService, decorators: [{
|
|
4600
5028
|
type: Inject,
|
|
@@ -4663,10 +5091,10 @@ class LinesLazyService {
|
|
|
4663
5091
|
}
|
|
4664
5092
|
});
|
|
4665
5093
|
}
|
|
4666
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4667
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5094
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5095
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService }); }
|
|
4668
5096
|
}
|
|
4669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService, decorators: [{
|
|
4670
5098
|
type: Injectable
|
|
4671
5099
|
}], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
|
|
4672
5100
|
type: Inject,
|
|
@@ -4732,10 +5160,10 @@ class LinesInfiniteService {
|
|
|
4732
5160
|
loading() {
|
|
4733
5161
|
return this._loading;
|
|
4734
5162
|
}
|
|
4735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4736
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorStore }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5164
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService }); }
|
|
4737
5165
|
}
|
|
4738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService, decorators: [{
|
|
4739
5167
|
type: Injectable
|
|
4740
5168
|
}], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
|
|
4741
5169
|
type: Inject,
|
|
@@ -4764,10 +5192,10 @@ class LoadingOrchestratorService {
|
|
|
4764
5192
|
}
|
|
4765
5193
|
});
|
|
4766
5194
|
}
|
|
4767
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4768
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5196
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService }); }
|
|
4769
5197
|
}
|
|
4770
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService, decorators: [{
|
|
4771
5199
|
type: Injectable
|
|
4772
5200
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4773
5201
|
type: Inject,
|
|
@@ -4793,10 +5221,10 @@ class InfiniteLoadingOrchestratorService {
|
|
|
4793
5221
|
}
|
|
4794
5222
|
});
|
|
4795
5223
|
}
|
|
4796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4797
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }, { token: KlesForm }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5225
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService }); }
|
|
4798
5226
|
}
|
|
4799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService, decorators: [{
|
|
4800
5228
|
type: Injectable
|
|
4801
5229
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4802
5230
|
type: Inject,
|
|
@@ -4835,10 +5263,10 @@ class TableService {
|
|
|
4835
5263
|
this.linesService.register();
|
|
4836
5264
|
this.selectionService.register();
|
|
4837
5265
|
}
|
|
4838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4839
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5266
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService, deps: [{ token: KlesForm }, { token: ColumnsService }, { token: DATASOURCE_SERVICE }, { token: LINES_SERVICE }, { token: HEADER_SERVICE }, { token: SELECTION_SERVICE }, { token: LoadingOrchestratorService }, { token: SCROLLBAR_ORCHESTRATOR_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5267
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService }); }
|
|
4840
5268
|
}
|
|
4841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService, decorators: [{
|
|
4842
5270
|
type: Injectable
|
|
4843
5271
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: undefined, decorators: [{
|
|
4844
5272
|
type: Inject,
|
|
@@ -4895,10 +5323,10 @@ class ScrollbarOrchestratorService {
|
|
|
4895
5323
|
this.scrollbarService.toTop('instant');
|
|
4896
5324
|
});
|
|
4897
5325
|
}
|
|
4898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4899
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }, { token: PaginatorService, optional: true }, { token: SORT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5327
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService }); }
|
|
4900
5328
|
}
|
|
4901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService, decorators: [{
|
|
4902
5330
|
type: Injectable
|
|
4903
5331
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4904
5332
|
type: Inject,
|
|
@@ -4935,10 +5363,10 @@ class ScrollbarLazyOrchestratorService {
|
|
|
4935
5363
|
this.scrollbarService.hideScrollbar();
|
|
4936
5364
|
});
|
|
4937
5365
|
}
|
|
4938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4939
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5367
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService }); }
|
|
4940
5368
|
}
|
|
4941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService, decorators: [{
|
|
4942
5370
|
type: Injectable
|
|
4943
5371
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4944
5372
|
type: Inject,
|
|
@@ -4956,10 +5384,10 @@ class ScrollbarInfiniteOrchestratorService {
|
|
|
4956
5384
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
4957
5385
|
.subscribe(() => this.scrollbarService.showScrollbar());
|
|
4958
5386
|
}
|
|
4959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4960
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5388
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService }); }
|
|
4961
5389
|
}
|
|
4962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, decorators: [{
|
|
4963
5391
|
type: Injectable
|
|
4964
5392
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4965
5393
|
type: Inject,
|
|
@@ -4978,7 +5406,8 @@ class DynamicTableLoaderDirective {
|
|
|
4978
5406
|
});
|
|
4979
5407
|
return v;
|
|
4980
5408
|
} });
|
|
4981
|
-
this.footerStart = input(
|
|
5409
|
+
this.footerStart = input(/* @ts-ignore */
|
|
5410
|
+
...(ngDevMode ? [undefined, { debugName: "footerStart" }] : /* istanbul ignore next */ []));
|
|
4982
5411
|
this.componentRef = null;
|
|
4983
5412
|
effect(() => {
|
|
4984
5413
|
if (this.tableConfig()) {
|
|
@@ -5038,6 +5467,10 @@ class DynamicTableLoaderDirective {
|
|
|
5038
5467
|
const emptyState = this.tableConfig().emptyState;
|
|
5039
5468
|
const emptyStateIntl = typeof emptyState === 'object' && emptyState !== null ? emptyState.intl : undefined;
|
|
5040
5469
|
const configProviders = [
|
|
5470
|
+
{
|
|
5471
|
+
provide: KEYBOARD_NAVIGATION_CONFIG,
|
|
5472
|
+
useValue: this.tableConfig().keyboardNavigation ?? { enabled: false },
|
|
5473
|
+
},
|
|
5041
5474
|
{
|
|
5042
5475
|
provide: COLUMNS,
|
|
5043
5476
|
useValue: signal(this.tableConfig().columns || []),
|
|
@@ -5057,6 +5490,13 @@ class DynamicTableLoaderDirective {
|
|
|
5057
5490
|
rowClass: this.tableConfig().rowClass,
|
|
5058
5491
|
},
|
|
5059
5492
|
},
|
|
5493
|
+
{
|
|
5494
|
+
provide: ROW_VALIDATION_CONFIG,
|
|
5495
|
+
useValue: {
|
|
5496
|
+
lineValidations: this.tableConfig().lineValidations,
|
|
5497
|
+
lineAsyncValidations: this.tableConfig().lineAsyncValidations,
|
|
5498
|
+
},
|
|
5499
|
+
},
|
|
5060
5500
|
{
|
|
5061
5501
|
provide: FOOTER,
|
|
5062
5502
|
useValue: signal(this.tableConfig().footer ?? false),
|
|
@@ -5157,6 +5597,7 @@ class DynamicTableLoaderDirective {
|
|
|
5157
5597
|
},
|
|
5158
5598
|
];
|
|
5159
5599
|
const featureProviders = [
|
|
5600
|
+
RowFormFactory,
|
|
5160
5601
|
TreeService,
|
|
5161
5602
|
RenderService,
|
|
5162
5603
|
ExtraRowService,
|
|
@@ -5173,6 +5614,7 @@ class DynamicTableLoaderDirective {
|
|
|
5173
5614
|
...(this.tableConfig().infinite ? [InfiniteScrollService] : []),
|
|
5174
5615
|
EventsService,
|
|
5175
5616
|
RowService,
|
|
5617
|
+
CursorService,
|
|
5176
5618
|
CellService,
|
|
5177
5619
|
CellValueChangeService,
|
|
5178
5620
|
ValidationService,
|
|
@@ -5250,10 +5692,10 @@ class DynamicTableLoaderDirective {
|
|
|
5250
5692
|
providers,
|
|
5251
5693
|
});
|
|
5252
5694
|
}
|
|
5253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5254
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
5695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicTableLoaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5696
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: DynamicTableLoaderDirective, isStandalone: true, selector: "[appDynamicTableLoader]", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, footerStart: { classPropertyName: "footerStart", publicName: "footerStart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
5255
5697
|
}
|
|
5256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicTableLoaderDirective, decorators: [{
|
|
5257
5699
|
type: Directive,
|
|
5258
5700
|
args: [{
|
|
5259
5701
|
selector: '[appDynamicTableLoader]',
|
|
@@ -5264,10 +5706,10 @@ class KlesTableFooterStartDirective {
|
|
|
5264
5706
|
constructor() {
|
|
5265
5707
|
this.elementRef = inject(ElementRef);
|
|
5266
5708
|
}
|
|
5267
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5268
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5709
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5710
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableFooterStartDirective, isStandalone: true, selector: "[klesTableFooterStart]", host: { properties: { "style.display": "'flex'", "style.align-items": "'center'", "style.gap": "'var(--kles-table-footer-gap, 12px)'", "style.min-width": "'0'" } }, ngImport: i0 }); }
|
|
5269
5711
|
}
|
|
5270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, decorators: [{
|
|
5271
5713
|
type: Directive,
|
|
5272
5714
|
args: [{
|
|
5273
5715
|
selector: '[klesTableFooterStart]',
|
|
@@ -5284,8 +5726,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5284
5726
|
class KlesTableComponent {
|
|
5285
5727
|
constructor(connectorService) {
|
|
5286
5728
|
this.connectorService = connectorService;
|
|
5287
|
-
this.tableConfig = input.required(
|
|
5288
|
-
|
|
5729
|
+
this.tableConfig = input.required(/* @ts-ignore */
|
|
5730
|
+
...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
|
|
5731
|
+
this.footerStart = contentChild(KlesTableFooterStartDirective, /* @ts-ignore */
|
|
5732
|
+
...(ngDevMode ? [{ debugName: "footerStart" }] : /* istanbul ignore next */ []));
|
|
5289
5733
|
this.destroyRef = inject(DestroyRef);
|
|
5290
5734
|
this.tableEvent = new EventEmitter();
|
|
5291
5735
|
this.rowClick = new EventEmitter();
|
|
@@ -5313,7 +5757,8 @@ class KlesTableComponent {
|
|
|
5313
5757
|
this.elevationShadow = computed(() => {
|
|
5314
5758
|
const level = this.tableConfig().elevation ?? 2;
|
|
5315
5759
|
return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
|
|
5316
|
-
},
|
|
5760
|
+
}, /* @ts-ignore */
|
|
5761
|
+
...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
|
|
5317
5762
|
}
|
|
5318
5763
|
ngOnInit() {
|
|
5319
5764
|
this.connectorService.connected$
|
|
@@ -5348,6 +5793,9 @@ class KlesTableComponent {
|
|
|
5348
5793
|
get selection() {
|
|
5349
5794
|
return this.connectorService.selection;
|
|
5350
5795
|
}
|
|
5796
|
+
get cursor() {
|
|
5797
|
+
return this.connectorService.cursor;
|
|
5798
|
+
}
|
|
5351
5799
|
get form() {
|
|
5352
5800
|
return this.connectorService.form;
|
|
5353
5801
|
}
|
|
@@ -5440,10 +5888,10 @@ class KlesTableComponent {
|
|
|
5440
5888
|
break;
|
|
5441
5889
|
}
|
|
5442
5890
|
}
|
|
5443
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
5891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: KlesTableComponent, isStandalone: true, selector: "kles-dynamic-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tableEvent: "tableEvent", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", rowContextMenu: "rowContextMenu", rowMouseEnter: "rowMouseEnter", rowMouseLeave: "rowMouseLeave", rowDrop: "rowDrop", rowDropSuccess: "rowDropSuccess", rowDropError: "rowDropError", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellContextMenu: "cellContextMenu", cellValueChange: "cellValueChange", selectionChange: "selectionChange", selectionError: "selectionError", pageChange: "pageChange", sortChange: "sortChange", filterChange: "filterChange", loadError: "loadError", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeLoadChildren: "nodeLoadChildren", nodeChildrenLoaded: "nodeChildrenLoaded" }, host: { properties: { "attr.id": "this.hostId" } }, providers: [KlesTableConnectorService], queries: [{ propertyName: "footerStart", first: true, predicate: KlesTableFooterStartDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\" [footerStart]=\"footerStart()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: DynamicTableLoaderDirective, selector: "[appDynamicTableLoader]", inputs: ["tableConfig", "footerStart"] }] }); }
|
|
5445
5893
|
}
|
|
5446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, decorators: [{
|
|
5447
5895
|
type: Component,
|
|
5448
5896
|
args: [{ selector: 'kles-dynamic-table', standalone: true, imports: [DynamicTableLoaderDirective], providers: [KlesTableConnectorService], template: "<div class=\"table-frame\" [style.box-shadow]=\"elevationShadow()\">\n <ng-template appDynamicTableLoader [tableConfig]=\"tableConfig()\" [footerStart]=\"footerStart()\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:auto;padding:4px;box-sizing:border-box}.table-frame{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--mat-sys-surface);border-radius:var(--mat-sys-corner-small);overflow:hidden}\n"] }]
|
|
5449
5897
|
}], ctorParameters: () => [{ type: KlesTableConnectorService }], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], footerStart: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KlesTableFooterStartDirective), { isSignal: true }] }], tableEvent: [{
|
|
@@ -5502,11 +5950,11 @@ const directives = [KlesTableFooterStartDirective];
|
|
|
5502
5950
|
const pipes = [];
|
|
5503
5951
|
class KlesMaterialTableModule {
|
|
5504
5952
|
static { this.declarations = [components, directives, pipes]; }
|
|
5505
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5506
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5507
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5954
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, imports: [CommonModule, TableComponent, KlesTableFooterStartDirective, KlesTableComponent, KlesMaterialDynamicformsModule], exports: [KlesTableFooterStartDirective, KlesTableComponent] }); }
|
|
5955
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, providers: [pipes], imports: [CommonModule, components, KlesMaterialDynamicformsModule] }); }
|
|
5508
5956
|
}
|
|
5509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, decorators: [{
|
|
5510
5958
|
type: NgModule,
|
|
5511
5959
|
args: [{
|
|
5512
5960
|
imports: [CommonModule, components, directives, KlesTableComponent, KlesMaterialDynamicformsModule],
|
|
@@ -5535,5 +5983,5 @@ var AlignCell;
|
|
|
5535
5983
|
* Generated bundle index. Do not edit.
|
|
5536
5984
|
*/
|
|
5537
5985
|
|
|
5538
|
-
export { AlignCell, COLUMNS, COLUMN_DRAG_DROP, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableFooterStartDirective, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
|
|
5986
|
+
export { AlignCell, COLUMNS, COLUMN_DRAG_DROP, CursorService, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KEYBOARD_NAVIGATION_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KeyboardCellDirective, KeyboardGridDirective, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableFooterStartDirective, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_APPEARANCE_CONFIG, ROW_DRAG_DROP, ROW_VALIDATION_CONFIG, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
|
|
5539
5987
|
//# sourceMappingURL=3kles-kles-material-table-v2.mjs.map
|