@3kles/kles-material-table-v2 21.10.0 → 22.0.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.
|
@@ -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',
|
|
@@ -117,10 +117,10 @@ class ResolveNgStylePipe {
|
|
|
117
117
|
return {};
|
|
118
118
|
return typeof style === 'function' ? style(value, status, row, rowStatus) : style;
|
|
119
119
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
121
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, isStandalone: true, name: "resolveNgStyle" }); }
|
|
122
122
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveNgStylePipe, decorators: [{
|
|
124
124
|
type: Pipe,
|
|
125
125
|
args: [{
|
|
126
126
|
name: 'resolveNgStyle',
|
|
@@ -154,10 +154,10 @@ class EventsService {
|
|
|
154
154
|
complete() {
|
|
155
155
|
this.eventsSubject.complete();
|
|
156
156
|
}
|
|
157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
158
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
158
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService }); }
|
|
159
159
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EventsService, decorators: [{
|
|
161
161
|
type: Injectable
|
|
162
162
|
}] });
|
|
163
163
|
|
|
@@ -169,12 +169,14 @@ class ColumnsService {
|
|
|
169
169
|
return this.getVisibleColumns()
|
|
170
170
|
.filter((column) => column.sticky === true)
|
|
171
171
|
.at(-1)?.columnDef;
|
|
172
|
-
},
|
|
172
|
+
}, /* @ts-ignore */
|
|
173
|
+
...(ngDevMode ? [{ debugName: "stickyStartBoundary" }] : /* istanbul ignore next */ []));
|
|
173
174
|
this.stickyEndBoundary = computed(() => {
|
|
174
175
|
return this.getVisibleColumns()
|
|
175
176
|
.filter((column) => column.stickyEnd === true)
|
|
176
177
|
.at(0)?.columnDef;
|
|
177
|
-
},
|
|
178
|
+
}, /* @ts-ignore */
|
|
179
|
+
...(ngDevMode ? [{ debugName: "stickyEndBoundary" }] : /* istanbul ignore next */ []));
|
|
178
180
|
}
|
|
179
181
|
register() {
|
|
180
182
|
this.setDisplayedColumns();
|
|
@@ -249,7 +251,8 @@ class ColumnsService {
|
|
|
249
251
|
setDisplayedColumns() {
|
|
250
252
|
this.displayedColumns = computed(() => {
|
|
251
253
|
return this.getVisibleColumns().map((column) => column.columnDef);
|
|
252
|
-
},
|
|
254
|
+
}, /* @ts-ignore */
|
|
255
|
+
...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
|
|
253
256
|
}
|
|
254
257
|
getVisibleColumns() {
|
|
255
258
|
return this._columns().filter((column) => {
|
|
@@ -259,10 +262,10 @@ class ColumnsService {
|
|
|
259
262
|
return column.visible !== false;
|
|
260
263
|
});
|
|
261
264
|
}
|
|
262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
263
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
265
|
+
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 }); }
|
|
266
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService }); }
|
|
264
267
|
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ColumnsService, decorators: [{
|
|
266
269
|
type: Injectable
|
|
267
270
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
268
271
|
type: Inject,
|
|
@@ -635,10 +638,10 @@ class ResizableColumnDirective {
|
|
|
635
638
|
clearDocumentListeners() {
|
|
636
639
|
this.documentCleanups.splice(0).forEach((cleanup) => cleanup());
|
|
637
640
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
639
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
641
|
+
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 }); }
|
|
642
|
+
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
643
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
644
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableColumnDirective, decorators: [{
|
|
642
645
|
type: Directive,
|
|
643
646
|
args: [{ selector: 'th[appResizableColumn]', standalone: true }]
|
|
644
647
|
}], 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: [{
|
|
@@ -650,12 +653,12 @@ class FooterFieldPipe {
|
|
|
650
653
|
transform(col) {
|
|
651
654
|
if (!col)
|
|
652
655
|
return null;
|
|
653
|
-
return { name: col.columnDef, ...col.footerCell
|
|
656
|
+
return { name: col.columnDef, ...col.footerCell?.field };
|
|
654
657
|
}
|
|
655
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
656
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
659
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, isStandalone: true, name: "footerField" }); }
|
|
657
660
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterFieldPipe, decorators: [{
|
|
659
662
|
type: Pipe,
|
|
660
663
|
args: [{
|
|
661
664
|
name: 'footerField',
|
|
@@ -672,10 +675,10 @@ class UiFieldPipe {
|
|
|
672
675
|
return undefined;
|
|
673
676
|
return this.tableService?.klesForm.uiStore.get(control);
|
|
674
677
|
}
|
|
675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
676
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
678
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
679
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, isStandalone: true, name: "uiField" }); }
|
|
677
680
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UiFieldPipe, decorators: [{
|
|
679
682
|
type: Pipe,
|
|
680
683
|
args: [{
|
|
681
684
|
name: 'uiField',
|
|
@@ -695,10 +698,10 @@ class SpanPipe {
|
|
|
695
698
|
}
|
|
696
699
|
return span;
|
|
697
700
|
}
|
|
698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
699
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
701
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
702
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, isStandalone: true, name: "spanPipe" }); }
|
|
700
703
|
}
|
|
701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SpanPipe, decorators: [{
|
|
702
705
|
type: Pipe,
|
|
703
706
|
args: [{
|
|
704
707
|
name: 'spanPipe',
|
|
@@ -712,10 +715,10 @@ class ResolveRowStylePipe {
|
|
|
712
715
|
return {};
|
|
713
716
|
return typeof style === 'function' ? style(row, status, index, context) : style;
|
|
714
717
|
}
|
|
715
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
716
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
718
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
719
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, isStandalone: true, name: "resolveRowStyle" }); }
|
|
717
720
|
}
|
|
718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowStylePipe, decorators: [{
|
|
719
722
|
type: Pipe,
|
|
720
723
|
args: [{
|
|
721
724
|
name: 'resolveRowStyle',
|
|
@@ -728,10 +731,10 @@ class ResolveRowClassPipe {
|
|
|
728
731
|
return [];
|
|
729
732
|
return typeof classes === 'function' ? classes(row, status, index, context) : classes;
|
|
730
733
|
}
|
|
731
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
732
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
735
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, isStandalone: true, name: "resolveRowClass" }); }
|
|
733
736
|
}
|
|
734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResolveRowClassPipe, decorators: [{
|
|
735
738
|
type: Pipe,
|
|
736
739
|
args: [{
|
|
737
740
|
name: 'resolveRowClass',
|
|
@@ -772,10 +775,10 @@ class ExpandedRowStore {
|
|
|
772
775
|
this.expand(id);
|
|
773
776
|
}
|
|
774
777
|
}
|
|
775
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
776
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
778
|
+
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 }); }
|
|
779
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore }); }
|
|
777
780
|
}
|
|
778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
781
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExpandedRowStore, decorators: [{
|
|
779
782
|
type: Injectable
|
|
780
783
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
781
784
|
type: Inject,
|
|
@@ -800,10 +803,10 @@ class LoaderChildrensService {
|
|
|
800
803
|
refresh() {
|
|
801
804
|
this._refresh$.next();
|
|
802
805
|
}
|
|
803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
804
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
806
|
+
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 }); }
|
|
807
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService }); }
|
|
805
808
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderChildrensService, decorators: [{
|
|
807
810
|
type: Injectable
|
|
808
811
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
809
812
|
type: Inject,
|
|
@@ -853,10 +856,10 @@ class RowFormFactory {
|
|
|
853
856
|
createRows(fields, records, meta = { depth: 0, parentId: null }) {
|
|
854
857
|
return records.map((r) => this.createRow(fields, r, meta));
|
|
855
858
|
}
|
|
856
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
857
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
859
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
860
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, providedIn: 'root' }); }
|
|
858
861
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowFormFactory, decorators: [{
|
|
860
863
|
type: Injectable,
|
|
861
864
|
args: [{ providedIn: 'root' }]
|
|
862
865
|
}] });
|
|
@@ -888,10 +891,10 @@ class RowContextStore {
|
|
|
888
891
|
delete(row) {
|
|
889
892
|
this.contexts.delete(row);
|
|
890
893
|
}
|
|
891
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
892
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
894
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
895
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore }); }
|
|
893
896
|
}
|
|
894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextStore, decorators: [{
|
|
895
898
|
type: Injectable
|
|
896
899
|
}] });
|
|
897
900
|
|
|
@@ -1214,10 +1217,10 @@ class KlesForm {
|
|
|
1214
1217
|
notifyRowsStructureChanged() {
|
|
1215
1218
|
this.rowsStructureChangedSubject.next();
|
|
1216
1219
|
}
|
|
1217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1218
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1220
|
+
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 }); }
|
|
1221
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm }); }
|
|
1219
1222
|
}
|
|
1220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesForm, decorators: [{
|
|
1221
1224
|
type: Injectable
|
|
1222
1225
|
}], ctorParameters: () => [{ type: ColumnsService }, { type: RowFormFactory }, { type: RowContextStore }] });
|
|
1223
1226
|
|
|
@@ -1232,8 +1235,10 @@ class TreeService {
|
|
|
1232
1235
|
this.destroyRef = inject(DestroyRef);
|
|
1233
1236
|
this.expandedSubject = new BehaviorSubject(new Set());
|
|
1234
1237
|
this.expandedIds$ = this.expandedSubject.asObservable();
|
|
1235
|
-
this.expandedIds = signal(new Set(),
|
|
1236
|
-
|
|
1238
|
+
this.expandedIds = signal(new Set(), /* @ts-ignore */
|
|
1239
|
+
...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
|
|
1240
|
+
this.loadingIds = signal(new Set(), /* @ts-ignore */
|
|
1241
|
+
...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
|
|
1237
1242
|
this.fm.rowsReplaced$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
|
|
1238
1243
|
}
|
|
1239
1244
|
toggle(id, group, depth) {
|
|
@@ -1363,10 +1368,10 @@ class TreeService {
|
|
|
1363
1368
|
level,
|
|
1364
1369
|
};
|
|
1365
1370
|
}
|
|
1366
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1367
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1372
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService }); }
|
|
1368
1373
|
}
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TreeService, decorators: [{
|
|
1370
1375
|
type: Injectable
|
|
1371
1376
|
}], ctorParameters: () => [] });
|
|
1372
1377
|
|
|
@@ -1376,22 +1381,32 @@ class KlesCellComponent {
|
|
|
1376
1381
|
this.expandedRowStore = inject(ExpandedRowStore);
|
|
1377
1382
|
this.treeService = inject(TreeService);
|
|
1378
1383
|
this.eventsService = inject(EventsService);
|
|
1379
|
-
this.ui = input.required(
|
|
1380
|
-
|
|
1381
|
-
this.
|
|
1382
|
-
|
|
1383
|
-
this.
|
|
1384
|
+
this.ui = input.required(/* @ts-ignore */
|
|
1385
|
+
...(ngDevMode ? [{ debugName: "ui" }] : /* istanbul ignore next */ []));
|
|
1386
|
+
this.group = input.required(/* @ts-ignore */
|
|
1387
|
+
...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
|
|
1388
|
+
this.column = input.required(/* @ts-ignore */
|
|
1389
|
+
...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
1390
|
+
this.rowIndex = input.required(/* @ts-ignore */
|
|
1391
|
+
...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
|
|
1392
|
+
this.dragHandle = input(false, /* @ts-ignore */
|
|
1393
|
+
...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
|
|
1384
1394
|
this.expandedRow = computed(() => {
|
|
1385
1395
|
return (this.column().canExpand ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedRow ?? false);
|
|
1386
|
-
},
|
|
1396
|
+
}, /* @ts-ignore */
|
|
1397
|
+
...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
|
|
1387
1398
|
this.expandedNode = computed(() => {
|
|
1388
1399
|
return (this.column().canExpandNode ?? false) && (this.ui().get(this.column().columnDef)?.value().expandedNode ?? false);
|
|
1389
|
-
},
|
|
1400
|
+
}, /* @ts-ignore */
|
|
1401
|
+
...(ngDevMode ? [{ debugName: "expandedNode" }] : /* istanbul ignore next */ []));
|
|
1390
1402
|
this.hasChildren = computed(() => {
|
|
1391
1403
|
return this.treeService.hasChildren(this.group(), this.group().getRawValue()._depth);
|
|
1392
|
-
},
|
|
1393
|
-
|
|
1394
|
-
this.
|
|
1404
|
+
}, /* @ts-ignore */
|
|
1405
|
+
...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
|
|
1406
|
+
this.depth = computed(() => Math.max(0, this.group().getRawValue()._depth ?? 0), /* @ts-ignore */
|
|
1407
|
+
...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
|
|
1408
|
+
this.loadingNode = computed(() => this.treeService.isLoading(this.group().getRawValue()._id), /* @ts-ignore */
|
|
1409
|
+
...(ngDevMode ? [{ debugName: "loadingNode" }] : /* istanbul ignore next */ []));
|
|
1395
1410
|
this.column$ = toObservable(this.column);
|
|
1396
1411
|
}
|
|
1397
1412
|
ngOnInit() {
|
|
@@ -1437,29 +1452,33 @@ class KlesCellComponent {
|
|
|
1437
1452
|
this.ui().get(this.column().columnDef)?.patchValue({ expandedNode });
|
|
1438
1453
|
});
|
|
1439
1454
|
}
|
|
1440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1455
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1456
|
+
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
1457
|
}
|
|
1443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesCellComponent, decorators: [{
|
|
1444
1459
|
type: Component,
|
|
1445
1460
|
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
1461
|
}], 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
1462
|
|
|
1448
1463
|
class KlesHeaderComponent {
|
|
1449
1464
|
constructor() {
|
|
1450
|
-
this.header = input.required(
|
|
1451
|
-
|
|
1452
|
-
this.
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1465
|
+
this.header = input.required(/* @ts-ignore */
|
|
1466
|
+
...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
1467
|
+
this.group = input.required(/* @ts-ignore */
|
|
1468
|
+
...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
|
|
1469
|
+
this.dragHandleSpacer = input(false, /* @ts-ignore */
|
|
1470
|
+
...(ngDevMode ? [{ debugName: "dragHandleSpacer" }] : /* istanbul ignore next */ []));
|
|
1471
|
+
this.columnDragHandle = input(false, /* @ts-ignore */
|
|
1472
|
+
...(ngDevMode ? [{ debugName: "columnDragHandle" }] : /* istanbul ignore next */ []));
|
|
1473
|
+
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 });
|
|
1474
|
+
}
|
|
1475
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1476
|
+
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
1477
|
<div
|
|
1459
1478
|
class="header"
|
|
1460
1479
|
mat-sort-header
|
|
1461
1480
|
[disabled]="!header().sortable"
|
|
1462
|
-
[arrowPosition]="header().sortArrowPosition"
|
|
1481
|
+
[arrowPosition]="header().sortArrowPosition ?? 'after'"
|
|
1463
1482
|
[matTooltip]="header().tooltip"
|
|
1464
1483
|
matTooltipPosition="above"
|
|
1465
1484
|
>
|
|
@@ -1486,7 +1505,7 @@ class KlesHeaderComponent {
|
|
|
1486
1505
|
<ng-content></ng-content>
|
|
1487
1506
|
</div>
|
|
1488
1507
|
|
|
1489
|
-
@if (header().filterClearable &&
|
|
1508
|
+
@if (header().filterClearable && filterValue()) {
|
|
1490
1509
|
<div class="icon-button">
|
|
1491
1510
|
<button
|
|
1492
1511
|
mat-icon-button
|
|
@@ -1502,14 +1521,14 @@ class KlesHeaderComponent {
|
|
|
1502
1521
|
</div>
|
|
1503
1522
|
`, 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
1523
|
}
|
|
1505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesHeaderComponent, decorators: [{
|
|
1506
1525
|
type: Component,
|
|
1507
1526
|
args: [{ selector: 'kles-header', template: `
|
|
1508
1527
|
<div
|
|
1509
1528
|
class="header"
|
|
1510
1529
|
mat-sort-header
|
|
1511
1530
|
[disabled]="!header().sortable"
|
|
1512
|
-
[arrowPosition]="header().sortArrowPosition"
|
|
1531
|
+
[arrowPosition]="header().sortArrowPosition ?? 'after'"
|
|
1513
1532
|
[matTooltip]="header().tooltip"
|
|
1514
1533
|
matTooltipPosition="above"
|
|
1515
1534
|
>
|
|
@@ -1536,7 +1555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
1536
1555
|
<ng-content></ng-content>
|
|
1537
1556
|
</div>
|
|
1538
1557
|
|
|
1539
|
-
@if (header().filterClearable &&
|
|
1558
|
+
@if (header().filterClearable && filterValue()) {
|
|
1540
1559
|
<div class="icon-button">
|
|
1541
1560
|
<button
|
|
1542
1561
|
mat-icon-button
|
|
@@ -1565,10 +1584,10 @@ class HeaderPipe {
|
|
|
1565
1584
|
...col.headerCell,
|
|
1566
1585
|
};
|
|
1567
1586
|
}
|
|
1568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1569
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1587
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1588
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, isStandalone: true, name: "header" }); }
|
|
1570
1589
|
}
|
|
1571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderPipe, decorators: [{
|
|
1572
1591
|
type: Pipe,
|
|
1573
1592
|
args: [{
|
|
1574
1593
|
name: 'header',
|
|
@@ -1582,10 +1601,10 @@ class KlesTableIntl {
|
|
|
1582
1601
|
this.emptyStateTitle = 'No data';
|
|
1583
1602
|
this.emptyStateDescription = 'There are no rows to display.';
|
|
1584
1603
|
}
|
|
1585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1586
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1604
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1605
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, providedIn: 'root' }); }
|
|
1587
1606
|
}
|
|
1588
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableIntl, decorators: [{
|
|
1589
1608
|
type: Injectable,
|
|
1590
1609
|
args: [{
|
|
1591
1610
|
providedIn: 'root',
|
|
@@ -1601,10 +1620,10 @@ class KlesTableEmptyStateComponent {
|
|
|
1601
1620
|
this.changeDetectorRef.markForCheck();
|
|
1602
1621
|
});
|
|
1603
1622
|
}
|
|
1604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1624
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: KlesTableEmptyStateComponent, isStandalone: true, selector: "kles-table-empty-state", 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 </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"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1606
1625
|
}
|
|
1607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableEmptyStateComponent, decorators: [{
|
|
1608
1627
|
type: Component,
|
|
1609
1628
|
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
1629
|
}], ctorParameters: () => [] });
|
|
@@ -1616,10 +1635,10 @@ class RowContextPipe {
|
|
|
1616
1635
|
transform(row) {
|
|
1617
1636
|
return row ? this.store.get(row) : null;
|
|
1618
1637
|
}
|
|
1619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1620
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1638
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1639
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, isStandalone: true, name: "rowContext" }); }
|
|
1621
1640
|
}
|
|
1622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowContextPipe, decorators: [{
|
|
1623
1642
|
type: Pipe,
|
|
1624
1643
|
args: [{
|
|
1625
1644
|
name: 'rowContext',
|
|
@@ -1691,17 +1710,18 @@ class KlesTableConnectorService {
|
|
|
1691
1710
|
refresh() {
|
|
1692
1711
|
this.table?.refresh();
|
|
1693
1712
|
}
|
|
1694
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1695
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1713
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1714
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService }); }
|
|
1696
1715
|
}
|
|
1697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableConnectorService, decorators: [{
|
|
1698
1717
|
type: Injectable
|
|
1699
1718
|
}], ctorParameters: () => [] });
|
|
1700
1719
|
|
|
1701
1720
|
class LoadingService {
|
|
1702
1721
|
constructor(eventsService) {
|
|
1703
1722
|
this.eventsService = eventsService;
|
|
1704
|
-
this._loading = signal(false,
|
|
1723
|
+
this._loading = signal(false, /* @ts-ignore */
|
|
1724
|
+
...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
|
|
1705
1725
|
}
|
|
1706
1726
|
get loading() {
|
|
1707
1727
|
return this._loading.asReadonly();
|
|
@@ -1720,10 +1740,10 @@ class LoadingService {
|
|
|
1720
1740
|
this._loading.set(false);
|
|
1721
1741
|
this.eventsService.emit('loadingChange', { loading: false });
|
|
1722
1742
|
}
|
|
1723
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1724
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1743
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1744
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService }); }
|
|
1725
1745
|
}
|
|
1726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingService, decorators: [{
|
|
1727
1747
|
type: Injectable
|
|
1728
1748
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
1729
1749
|
|
|
@@ -1742,10 +1762,10 @@ class PaginatorStore {
|
|
|
1742
1762
|
reset() {
|
|
1743
1763
|
this.s.next({ page: 0, perPage: this.config?.pageSize ?? 10 });
|
|
1744
1764
|
}
|
|
1745
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1746
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1765
|
+
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 }); }
|
|
1766
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore }); }
|
|
1747
1767
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorStore, decorators: [{
|
|
1749
1769
|
type: Injectable
|
|
1750
1770
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1751
1771
|
type: Optional
|
|
@@ -1760,7 +1780,8 @@ class PaginatorService {
|
|
|
1760
1780
|
this.paginatorStore = paginatorStore;
|
|
1761
1781
|
this.datasourceService = datasourceService;
|
|
1762
1782
|
this.eventsService = eventsService;
|
|
1763
|
-
this._disabled = signal(false,
|
|
1783
|
+
this._disabled = signal(false, /* @ts-ignore */
|
|
1784
|
+
...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
1764
1785
|
this._pageChanged = new EventEmitter();
|
|
1765
1786
|
this.destroyRef = inject(DestroyRef);
|
|
1766
1787
|
}
|
|
@@ -1842,10 +1863,10 @@ class PaginatorService {
|
|
|
1842
1863
|
});
|
|
1843
1864
|
}
|
|
1844
1865
|
}
|
|
1845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1846
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1866
|
+
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 }); }
|
|
1867
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService }); }
|
|
1847
1868
|
}
|
|
1848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginatorService, decorators: [{
|
|
1849
1870
|
type: Injectable
|
|
1850
1871
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1851
1872
|
type: Optional
|
|
@@ -1899,10 +1920,10 @@ class ScrollbarService {
|
|
|
1899
1920
|
getTop() {
|
|
1900
1921
|
return this.element?.scrollTop;
|
|
1901
1922
|
}
|
|
1902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1903
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1923
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1924
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService }); }
|
|
1904
1925
|
}
|
|
1905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarService, decorators: [{
|
|
1906
1927
|
type: Injectable
|
|
1907
1928
|
}] });
|
|
1908
1929
|
|
|
@@ -1928,10 +1949,10 @@ class FooterService {
|
|
|
1928
1949
|
this._footer.set(false);
|
|
1929
1950
|
this.eventsService.emit('footerVisibilityChange', { visible: false });
|
|
1930
1951
|
}
|
|
1931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1932
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1952
|
+
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 }); }
|
|
1953
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService }); }
|
|
1933
1954
|
}
|
|
1934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FooterService, decorators: [{
|
|
1935
1956
|
type: Injectable
|
|
1936
1957
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1937
1958
|
type: Inject,
|
|
@@ -1942,12 +1963,14 @@ class ExtraRowService {
|
|
|
1942
1963
|
constructor(_extraRowsConfig, expandedRowStore) {
|
|
1943
1964
|
this._extraRowsConfig = _extraRowsConfig;
|
|
1944
1965
|
this.expandedRowStore = expandedRowStore;
|
|
1945
|
-
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0,
|
|
1966
|
+
this.multiTemplateDataRows = computed(() => this._extraRowsConfig().length > 0, /* @ts-ignore */
|
|
1967
|
+
...(ngDevMode ? [{ debugName: "multiTemplateDataRows" }] : /* istanbul ignore next */ []));
|
|
1946
1968
|
this.rows = computed(() => this._extraRowsConfig().map((config) => ({
|
|
1947
1969
|
...config,
|
|
1948
1970
|
when: this.createWhen(config),
|
|
1949
1971
|
displayedColumns: config.cells.map((cel) => cel.columnDef),
|
|
1950
|
-
})),
|
|
1972
|
+
})), /* @ts-ignore */
|
|
1973
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1951
1974
|
}
|
|
1952
1975
|
extraFields() {
|
|
1953
1976
|
return this._extraRowsConfig()
|
|
@@ -1965,10 +1988,10 @@ class ExtraRowService {
|
|
|
1965
1988
|
return config?.when;
|
|
1966
1989
|
}
|
|
1967
1990
|
}
|
|
1968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1969
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1991
|
+
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 }); }
|
|
1992
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService }); }
|
|
1970
1993
|
}
|
|
1971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ExtraRowService, decorators: [{
|
|
1972
1995
|
type: Injectable
|
|
1973
1996
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1974
1997
|
type: Inject,
|
|
@@ -1985,10 +2008,10 @@ class RenderService {
|
|
|
1985
2008
|
forceRenderRows() {
|
|
1986
2009
|
this._render.emit();
|
|
1987
2010
|
}
|
|
1988
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1989
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2011
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2012
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService }); }
|
|
1990
2013
|
}
|
|
1991
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RenderService, decorators: [{
|
|
1992
2015
|
type: Injectable
|
|
1993
2016
|
}] });
|
|
1994
2017
|
|
|
@@ -2084,10 +2107,10 @@ class CellValueChangeService {
|
|
|
2084
2107
|
}
|
|
2085
2108
|
}
|
|
2086
2109
|
}
|
|
2087
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2088
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2111
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService }); }
|
|
2089
2112
|
}
|
|
2090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellValueChangeService, decorators: [{
|
|
2091
2114
|
type: Injectable
|
|
2092
2115
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2093
2116
|
|
|
@@ -2174,10 +2197,10 @@ class ValidationService {
|
|
|
2174
2197
|
}
|
|
2175
2198
|
}
|
|
2176
2199
|
}
|
|
2177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2178
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2201
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService }); }
|
|
2179
2202
|
}
|
|
2180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ValidationService, decorators: [{
|
|
2181
2204
|
type: Injectable
|
|
2182
2205
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2183
2206
|
|
|
@@ -2188,7 +2211,8 @@ class DatasourceService {
|
|
|
2188
2211
|
this.cellValueChangeService = cellValueChangeService;
|
|
2189
2212
|
this.validationService = validationService;
|
|
2190
2213
|
this.destroyRef = inject(DestroyRef);
|
|
2191
|
-
this._isEmpty = signal(true,
|
|
2214
|
+
this._isEmpty = signal(true, /* @ts-ignore */
|
|
2215
|
+
...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
|
|
2192
2216
|
this.isEmpty = this._isEmpty.asReadonly();
|
|
2193
2217
|
}
|
|
2194
2218
|
register() {
|
|
@@ -2214,10 +2238,10 @@ class DatasourceService {
|
|
|
2214
2238
|
this.validationService.listen(rows, this.columnsService.getVisible());
|
|
2215
2239
|
});
|
|
2216
2240
|
}
|
|
2217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2218
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2241
|
+
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 }); }
|
|
2242
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService }); }
|
|
2219
2243
|
}
|
|
2220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceService, decorators: [{
|
|
2221
2245
|
type: Injectable
|
|
2222
2246
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
|
|
2223
2247
|
class DatasourceLazyService {
|
|
@@ -2227,7 +2251,8 @@ class DatasourceLazyService {
|
|
|
2227
2251
|
this.cellValueChangeService = cellValueChangeService;
|
|
2228
2252
|
this.validationService = validationService;
|
|
2229
2253
|
this.destroyRef = inject(DestroyRef);
|
|
2230
|
-
this._isEmpty = signal(true,
|
|
2254
|
+
this._isEmpty = signal(true, /* @ts-ignore */
|
|
2255
|
+
...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
|
|
2231
2256
|
this.isEmpty = this._isEmpty.asReadonly();
|
|
2232
2257
|
}
|
|
2233
2258
|
register() {
|
|
@@ -2253,10 +2278,10 @@ class DatasourceLazyService {
|
|
|
2253
2278
|
this.validationService.listen(rows, this.columnsService.getVisible());
|
|
2254
2279
|
});
|
|
2255
2280
|
}
|
|
2256
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2257
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2281
|
+
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 }); }
|
|
2282
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService }); }
|
|
2258
2283
|
}
|
|
2259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DatasourceLazyService, decorators: [{
|
|
2260
2285
|
type: Injectable
|
|
2261
2286
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: CellValueChangeService }, { type: ValidationService }] });
|
|
2262
2287
|
|
|
@@ -2330,10 +2355,10 @@ class FilterService {
|
|
|
2330
2355
|
});
|
|
2331
2356
|
};
|
|
2332
2357
|
}
|
|
2333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2334
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2358
|
+
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 }); }
|
|
2359
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService }); }
|
|
2335
2360
|
}
|
|
2336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterService, decorators: [{
|
|
2337
2362
|
type: Injectable
|
|
2338
2363
|
}], ctorParameters: () => [{ type: ColumnsService }, { type: DatasourceService, decorators: [{
|
|
2339
2364
|
type: Inject,
|
|
@@ -2393,10 +2418,10 @@ class RowService {
|
|
|
2393
2418
|
event,
|
|
2394
2419
|
});
|
|
2395
2420
|
}
|
|
2396
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2397
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2421
|
+
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 }); }
|
|
2422
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService }); }
|
|
2398
2423
|
}
|
|
2399
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RowService, decorators: [{
|
|
2400
2425
|
type: Injectable
|
|
2401
2426
|
}], ctorParameters: () => [{ type: EventsService }, { type: undefined, decorators: [{
|
|
2402
2427
|
type: Inject,
|
|
@@ -2445,17 +2470,18 @@ class CellService {
|
|
|
2445
2470
|
control,
|
|
2446
2471
|
});
|
|
2447
2472
|
}
|
|
2448
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2449
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2474
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService }); }
|
|
2450
2475
|
}
|
|
2451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CellService, decorators: [{
|
|
2452
2477
|
type: Injectable
|
|
2453
2478
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
2454
2479
|
|
|
2455
2480
|
class EmptyStateService {
|
|
2456
2481
|
constructor(config, eventsService) {
|
|
2457
2482
|
this.eventsService = eventsService;
|
|
2458
|
-
this._enabled = signal(true,
|
|
2483
|
+
this._enabled = signal(true, /* @ts-ignore */
|
|
2484
|
+
...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
|
|
2459
2485
|
this.enabled = this._enabled.asReadonly();
|
|
2460
2486
|
if (typeof config === 'boolean') {
|
|
2461
2487
|
this._enabled.set(config);
|
|
@@ -2482,10 +2508,10 @@ class EmptyStateService {
|
|
|
2482
2508
|
toggle() {
|
|
2483
2509
|
this._enabled() ? this.disable() : this.enable();
|
|
2484
2510
|
}
|
|
2485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2486
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2511
|
+
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 }); }
|
|
2512
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService }); }
|
|
2487
2513
|
}
|
|
2488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyStateService, decorators: [{
|
|
2489
2515
|
type: Injectable
|
|
2490
2516
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2491
2517
|
type: Inject,
|
|
@@ -2728,13 +2754,20 @@ class TableComponent {
|
|
|
2728
2754
|
this.emptyStateService = emptyStateService;
|
|
2729
2755
|
this.treeService = treeService;
|
|
2730
2756
|
this.rowContextStore = rowContextStore;
|
|
2731
|
-
this.headerHeightPx = signal(56,
|
|
2732
|
-
|
|
2733
|
-
this.
|
|
2734
|
-
|
|
2735
|
-
this.
|
|
2757
|
+
this.headerHeightPx = signal(56, /* @ts-ignore */
|
|
2758
|
+
...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
|
|
2759
|
+
this.scrollHeightPx = signal(0, /* @ts-ignore */
|
|
2760
|
+
...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
|
|
2761
|
+
this.footerHeightPx = signal(0, /* @ts-ignore */
|
|
2762
|
+
...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
|
|
2763
|
+
this.viewportWidthPx = signal(0, /* @ts-ignore */
|
|
2764
|
+
...(ngDevMode ? [{ debugName: "viewportWidthPx" }] : /* istanbul ignore next */ []));
|
|
2765
|
+
this.viewportScrollRangePx = signal(0, /* @ts-ignore */
|
|
2766
|
+
...(ngDevMode ? [{ debugName: "viewportScrollRangePx" }] : /* istanbul ignore next */ []));
|
|
2767
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
2736
2768
|
this.destroyRef = inject(DestroyRef);
|
|
2737
2769
|
this.emptyStateComponent = KlesTableEmptyStateComponent;
|
|
2770
|
+
this.identityTrackBy = (_, row) => row;
|
|
2738
2771
|
this.columns = this.columnsService.columns;
|
|
2739
2772
|
this.displayedColumns = this.columnsService.displayedColumns;
|
|
2740
2773
|
this.showFooter = this.footerService.footer;
|
|
@@ -2742,6 +2775,9 @@ class TableComponent {
|
|
|
2742
2775
|
this.isEmpty = this.datasourceService.isEmpty;
|
|
2743
2776
|
this.multiTemplateDataRows = this.extraRowService.multiTemplateDataRows;
|
|
2744
2777
|
this.extraRows = this.extraRowService.rows;
|
|
2778
|
+
this.tableService.form.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
2779
|
+
this.changeDetectorRef.markForCheck();
|
|
2780
|
+
});
|
|
2745
2781
|
this.connectorService.connect(this);
|
|
2746
2782
|
this.filterService?.register();
|
|
2747
2783
|
}
|
|
@@ -3070,10 +3106,10 @@ class TableComponent {
|
|
|
3070
3106
|
};
|
|
3071
3107
|
}
|
|
3072
3108
|
}
|
|
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" }] }); }
|
|
3109
|
+
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 }); }
|
|
3110
|
+
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 #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\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 [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 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 <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" }] }); }
|
|
3075
3111
|
}
|
|
3076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
3077
3113
|
type: Component,
|
|
3078
3114
|
args: [{ selector: 'kles-table', standalone: true, imports: [
|
|
3079
3115
|
CommonModule,
|
|
@@ -3104,7 +3140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3104
3140
|
RowContextPipe,
|
|
3105
3141
|
ResolveRowStylePipe,
|
|
3106
3142
|
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"] }]
|
|
3143
|
+
], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\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 [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 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 <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"] }]
|
|
3108
3144
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
|
|
3109
3145
|
type: Inject,
|
|
3110
3146
|
args: [LOADER_SERVICE]
|
|
@@ -3167,10 +3203,10 @@ class PaginateTableComponent {
|
|
|
3167
3203
|
ngOnInit() {
|
|
3168
3204
|
this.paginatorService.register(this.paginator);
|
|
3169
3205
|
}
|
|
3170
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, deps: [{ token: PaginatorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3207
|
+
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
3208
|
}
|
|
3173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginateTableComponent, decorators: [{
|
|
3174
3210
|
type: Component,
|
|
3175
3211
|
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
3212
|
}], ctorParameters: () => [{ type: PaginatorService }], propDecorators: { paginator: [{
|
|
@@ -3196,10 +3232,10 @@ class SortStore {
|
|
|
3196
3232
|
reset() {
|
|
3197
3233
|
this.s.next(this.config || undefined);
|
|
3198
3234
|
}
|
|
3199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3200
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3235
|
+
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 }); }
|
|
3236
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore }); }
|
|
3201
3237
|
}
|
|
3202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortStore, decorators: [{
|
|
3203
3239
|
type: Injectable
|
|
3204
3240
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3205
3241
|
type: Optional
|
|
@@ -3242,10 +3278,10 @@ class AbstractSortService {
|
|
|
3242
3278
|
sortChange() {
|
|
3243
3279
|
return this._sortChange;
|
|
3244
3280
|
}
|
|
3245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3246
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3282
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService }); }
|
|
3247
3283
|
}
|
|
3248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSortService, decorators: [{
|
|
3249
3285
|
type: Injectable
|
|
3250
3286
|
}], ctorParameters: () => [{ type: EventsService }] });
|
|
3251
3287
|
class SortService extends AbstractSortService {
|
|
@@ -3336,10 +3372,10 @@ class SortService extends AbstractSortService {
|
|
|
3336
3372
|
});
|
|
3337
3373
|
};
|
|
3338
3374
|
}
|
|
3339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3340
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3375
|
+
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 }); }
|
|
3376
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService }); }
|
|
3341
3377
|
}
|
|
3342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortService, decorators: [{
|
|
3343
3379
|
type: Injectable
|
|
3344
3380
|
}], ctorParameters: () => [{ type: SortStore, decorators: [{
|
|
3345
3381
|
type: Optional
|
|
@@ -3365,10 +3401,10 @@ class SortLazyService extends AbstractSortService {
|
|
|
3365
3401
|
this.sortStore?.setSort(event);
|
|
3366
3402
|
});
|
|
3367
3403
|
}
|
|
3368
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3369
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3404
|
+
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 }); }
|
|
3405
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService }); }
|
|
3370
3406
|
}
|
|
3371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SortLazyService, decorators: [{
|
|
3372
3408
|
type: Injectable
|
|
3373
3409
|
}], ctorParameters: () => [{ type: SortStore, decorators: [{
|
|
3374
3410
|
type: Optional
|
|
@@ -3388,10 +3424,10 @@ class FilterStore {
|
|
|
3388
3424
|
reset() {
|
|
3389
3425
|
this.s.next({});
|
|
3390
3426
|
}
|
|
3391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3392
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3428
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore }); }
|
|
3393
3429
|
}
|
|
3394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FilterStore, decorators: [{
|
|
3395
3431
|
type: Injectable
|
|
3396
3432
|
}] });
|
|
3397
3433
|
|
|
@@ -3411,7 +3447,8 @@ class InfiniteScrollService {
|
|
|
3411
3447
|
this.registered = false;
|
|
3412
3448
|
this.loading = false;
|
|
3413
3449
|
this.lastLoadedPage = 0;
|
|
3414
|
-
this._loadingMore = signal(false,
|
|
3450
|
+
this._loadingMore = signal(false, /* @ts-ignore */
|
|
3451
|
+
...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
|
|
3415
3452
|
this.loadingMore = this._loadingMore.asReadonly();
|
|
3416
3453
|
}
|
|
3417
3454
|
register(element) {
|
|
@@ -3480,10 +3517,10 @@ class InfiniteScrollService {
|
|
|
3480
3517
|
requestAnimationFrame(() => this.loadNextPageIfNeeded());
|
|
3481
3518
|
}
|
|
3482
3519
|
}
|
|
3483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3484
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3520
|
+
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 }); }
|
|
3521
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService }); }
|
|
3485
3522
|
}
|
|
3486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollService, decorators: [{
|
|
3487
3524
|
type: Injectable
|
|
3488
3525
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3489
3526
|
type: Inject,
|
|
@@ -3507,10 +3544,10 @@ class InfiniteScrollTableComponent {
|
|
|
3507
3544
|
ngAfterViewInit() {
|
|
3508
3545
|
this.infiniteScrollService.register(this.table.formElemRef.nativeElement);
|
|
3509
3546
|
}
|
|
3510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3548
|
+
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
3549
|
}
|
|
3513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
|
|
3514
3551
|
type: Component,
|
|
3515
3552
|
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
3553
|
}], ctorParameters: () => [{ type: InfiniteScrollService }], propDecorators: { table: [{
|
|
@@ -3580,10 +3617,10 @@ class SelectionLoaderService {
|
|
|
3580
3617
|
success: false,
|
|
3581
3618
|
})));
|
|
3582
3619
|
}
|
|
3583
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3584
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3620
|
+
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 }); }
|
|
3621
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService }); }
|
|
3585
3622
|
}
|
|
3586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3623
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLoaderService, decorators: [{
|
|
3587
3624
|
type: Injectable
|
|
3588
3625
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3589
3626
|
type: Optional
|
|
@@ -3666,10 +3703,10 @@ class HeaderService {
|
|
|
3666
3703
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
3667
3704
|
});
|
|
3668
3705
|
}
|
|
3669
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3670
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3706
|
+
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 }); }
|
|
3707
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService }); }
|
|
3671
3708
|
}
|
|
3672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderService, decorators: [{
|
|
3673
3710
|
type: Injectable
|
|
3674
3711
|
}], ctorParameters: () => [{ type: KlesForm }, { type: FilterService, decorators: [{
|
|
3675
3712
|
type: Optional
|
|
@@ -3746,10 +3783,10 @@ class HeaderLazyService {
|
|
|
3746
3783
|
this.fm.getHeader().patchValue(header, { emitEvent: false });
|
|
3747
3784
|
});
|
|
3748
3785
|
}
|
|
3749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3750
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3786
|
+
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 }); }
|
|
3787
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService }); }
|
|
3751
3788
|
}
|
|
3752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: HeaderLazyService, decorators: [{
|
|
3753
3790
|
type: Injectable
|
|
3754
3791
|
}], ctorParameters: () => [{ type: KlesForm }, { type: FilterStore, decorators: [{
|
|
3755
3792
|
type: Optional
|
|
@@ -3775,7 +3812,8 @@ class KlesSelectionModel {
|
|
|
3775
3812
|
this._changed = new Subject();
|
|
3776
3813
|
this._stateChanged = new Subject();
|
|
3777
3814
|
this._state = KlesSelectionModelState.ENABLED;
|
|
3778
|
-
this._count = signal(0,
|
|
3815
|
+
this._count = signal(0, /* @ts-ignore */
|
|
3816
|
+
...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
|
|
3779
3817
|
const values = initialValues ?? [];
|
|
3780
3818
|
this.assertSelectionCardinality(values);
|
|
3781
3819
|
values.forEach((value) => this._selection.add(value));
|
|
@@ -3922,7 +3960,8 @@ class AbstractSelectionService {
|
|
|
3922
3960
|
this.selectionConfig = selectionConfig;
|
|
3923
3961
|
this.fm = fm;
|
|
3924
3962
|
this.eventsService = eventsService;
|
|
3925
|
-
this._loadingRows = signal(new Set(),
|
|
3963
|
+
this._loadingRows = signal(new Set(), /* @ts-ignore */
|
|
3964
|
+
...(ngDevMode ? [{ debugName: "_loadingRows" }] : /* istanbul ignore next */ []));
|
|
3926
3965
|
this.rowSelectionRequests = new Subject();
|
|
3927
3966
|
this.loadingRows = this._loadingRows.asReadonly();
|
|
3928
3967
|
}
|
|
@@ -4019,10 +4058,10 @@ class AbstractSelectionService {
|
|
|
4019
4058
|
return (target instanceof Element &&
|
|
4020
4059
|
target.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="link"], [contenteditable]:not([contenteditable="false"])') !== null);
|
|
4021
4060
|
}
|
|
4022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4023
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4061
|
+
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 }); }
|
|
4062
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService }); }
|
|
4024
4063
|
}
|
|
4025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSelectionService, decorators: [{
|
|
4026
4065
|
type: Injectable
|
|
4027
4066
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4028
4067
|
type: Optional
|
|
@@ -4224,10 +4263,10 @@ class SelectionService extends AbstractSelectionService {
|
|
|
4224
4263
|
this.fm.getHeader().controls[this.selectionLoaderService.key]?.patchValue(false, { emitEvent: false });
|
|
4225
4264
|
}
|
|
4226
4265
|
}
|
|
4227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4228
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4266
|
+
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 }); }
|
|
4267
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService }); }
|
|
4229
4268
|
}
|
|
4230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionService, decorators: [{
|
|
4231
4270
|
type: Injectable
|
|
4232
4271
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4233
4272
|
type: Optional
|
|
@@ -4251,7 +4290,8 @@ class SelectionLazyService extends AbstractSelectionService {
|
|
|
4251
4290
|
this.linesService = linesService;
|
|
4252
4291
|
this.filterStore = filterStore;
|
|
4253
4292
|
this.destroyRef = inject(DestroyRef);
|
|
4254
|
-
this._count = signal(0,
|
|
4293
|
+
this._count = signal(0, /* @ts-ignore */
|
|
4294
|
+
...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
|
|
4255
4295
|
this.selectionModel = new KlesSelectionModel(selectionConfig?.selectionMode);
|
|
4256
4296
|
}
|
|
4257
4297
|
register() {
|
|
@@ -4432,10 +4472,10 @@ class SelectionLazyService extends AbstractSelectionService {
|
|
|
4432
4472
|
emitEvent: false,
|
|
4433
4473
|
});
|
|
4434
4474
|
}
|
|
4435
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4436
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4475
|
+
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 }); }
|
|
4476
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService }); }
|
|
4437
4477
|
}
|
|
4438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectionLazyService, decorators: [{
|
|
4439
4479
|
type: Injectable
|
|
4440
4480
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4441
4481
|
type: Optional
|
|
@@ -4476,10 +4516,10 @@ class LoaderService {
|
|
|
4476
4516
|
this._refresh$.next();
|
|
4477
4517
|
this.eventsService.emit('refresh');
|
|
4478
4518
|
}
|
|
4479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4480
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4519
|
+
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 }); }
|
|
4520
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService }); }
|
|
4481
4521
|
}
|
|
4482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderService, decorators: [{
|
|
4483
4523
|
type: Injectable
|
|
4484
4524
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4485
4525
|
type: Inject,
|
|
@@ -4518,10 +4558,10 @@ class LoaderLazyService {
|
|
|
4518
4558
|
this._refresh$.next();
|
|
4519
4559
|
this.eventsService.emit('refresh');
|
|
4520
4560
|
}
|
|
4521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4522
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4561
|
+
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 }); }
|
|
4562
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService }); }
|
|
4523
4563
|
}
|
|
4524
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoaderLazyService, decorators: [{
|
|
4525
4565
|
type: Injectable
|
|
4526
4566
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4527
4567
|
type: Inject,
|
|
@@ -4591,10 +4631,10 @@ class LinesService {
|
|
|
4591
4631
|
}
|
|
4592
4632
|
});
|
|
4593
4633
|
}
|
|
4594
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4595
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4634
|
+
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 }); }
|
|
4635
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService }); }
|
|
4596
4636
|
}
|
|
4597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesService, decorators: [{
|
|
4598
4638
|
type: Injectable
|
|
4599
4639
|
}], ctorParameters: () => [{ type: LoaderService, decorators: [{
|
|
4600
4640
|
type: Inject,
|
|
@@ -4663,10 +4703,10 @@ class LinesLazyService {
|
|
|
4663
4703
|
}
|
|
4664
4704
|
});
|
|
4665
4705
|
}
|
|
4666
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4667
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4706
|
+
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 }); }
|
|
4707
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService }); }
|
|
4668
4708
|
}
|
|
4669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesLazyService, decorators: [{
|
|
4670
4710
|
type: Injectable
|
|
4671
4711
|
}], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
|
|
4672
4712
|
type: Inject,
|
|
@@ -4732,10 +4772,10 @@ class LinesInfiniteService {
|
|
|
4732
4772
|
loading() {
|
|
4733
4773
|
return this._loading;
|
|
4734
4774
|
}
|
|
4735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4736
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4775
|
+
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 }); }
|
|
4776
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService }); }
|
|
4737
4777
|
}
|
|
4738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinesInfiniteService, decorators: [{
|
|
4739
4779
|
type: Injectable
|
|
4740
4780
|
}], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
|
|
4741
4781
|
type: Inject,
|
|
@@ -4764,10 +4804,10 @@ class LoadingOrchestratorService {
|
|
|
4764
4804
|
}
|
|
4765
4805
|
});
|
|
4766
4806
|
}
|
|
4767
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4768
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4807
|
+
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 }); }
|
|
4808
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService }); }
|
|
4769
4809
|
}
|
|
4770
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LoadingOrchestratorService, decorators: [{
|
|
4771
4811
|
type: Injectable
|
|
4772
4812
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4773
4813
|
type: Inject,
|
|
@@ -4793,10 +4833,10 @@ class InfiniteLoadingOrchestratorService {
|
|
|
4793
4833
|
}
|
|
4794
4834
|
});
|
|
4795
4835
|
}
|
|
4796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4797
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4836
|
+
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 }); }
|
|
4837
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService }); }
|
|
4798
4838
|
}
|
|
4799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InfiniteLoadingOrchestratorService, decorators: [{
|
|
4800
4840
|
type: Injectable
|
|
4801
4841
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4802
4842
|
type: Inject,
|
|
@@ -4835,10 +4875,10 @@ class TableService {
|
|
|
4835
4875
|
this.linesService.register();
|
|
4836
4876
|
this.selectionService.register();
|
|
4837
4877
|
}
|
|
4838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4839
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4878
|
+
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 }); }
|
|
4879
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService }); }
|
|
4840
4880
|
}
|
|
4841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TableService, decorators: [{
|
|
4842
4882
|
type: Injectable
|
|
4843
4883
|
}], ctorParameters: () => [{ type: KlesForm }, { type: ColumnsService }, { type: undefined, decorators: [{
|
|
4844
4884
|
type: Inject,
|
|
@@ -4895,10 +4935,10 @@ class ScrollbarOrchestratorService {
|
|
|
4895
4935
|
this.scrollbarService.toTop('instant');
|
|
4896
4936
|
});
|
|
4897
4937
|
}
|
|
4898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4899
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4938
|
+
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 }); }
|
|
4939
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService }); }
|
|
4900
4940
|
}
|
|
4901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarOrchestratorService, decorators: [{
|
|
4902
4942
|
type: Injectable
|
|
4903
4943
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4904
4944
|
type: Inject,
|
|
@@ -4935,10 +4975,10 @@ class ScrollbarLazyOrchestratorService {
|
|
|
4935
4975
|
this.scrollbarService.hideScrollbar();
|
|
4936
4976
|
});
|
|
4937
4977
|
}
|
|
4938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4939
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4978
|
+
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 }); }
|
|
4979
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService }); }
|
|
4940
4980
|
}
|
|
4941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarLazyOrchestratorService, decorators: [{
|
|
4942
4982
|
type: Injectable
|
|
4943
4983
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4944
4984
|
type: Inject,
|
|
@@ -4956,10 +4996,10 @@ class ScrollbarInfiniteOrchestratorService {
|
|
|
4956
4996
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
4957
4997
|
.subscribe(() => this.scrollbarService.showScrollbar());
|
|
4958
4998
|
}
|
|
4959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4960
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4999
|
+
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 }); }
|
|
5000
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService }); }
|
|
4961
5001
|
}
|
|
4962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, decorators: [{
|
|
4963
5003
|
type: Injectable
|
|
4964
5004
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4965
5005
|
type: Inject,
|
|
@@ -4978,7 +5018,8 @@ class DynamicTableLoaderDirective {
|
|
|
4978
5018
|
});
|
|
4979
5019
|
return v;
|
|
4980
5020
|
} });
|
|
4981
|
-
this.footerStart = input(
|
|
5021
|
+
this.footerStart = input(/* @ts-ignore */
|
|
5022
|
+
...(ngDevMode ? [undefined, { debugName: "footerStart" }] : /* istanbul ignore next */ []));
|
|
4982
5023
|
this.componentRef = null;
|
|
4983
5024
|
effect(() => {
|
|
4984
5025
|
if (this.tableConfig()) {
|
|
@@ -5250,10 +5291,10 @@ class DynamicTableLoaderDirective {
|
|
|
5250
5291
|
providers,
|
|
5251
5292
|
});
|
|
5252
5293
|
}
|
|
5253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5254
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
5294
|
+
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 }); }
|
|
5295
|
+
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
5296
|
}
|
|
5256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicTableLoaderDirective, decorators: [{
|
|
5257
5298
|
type: Directive,
|
|
5258
5299
|
args: [{
|
|
5259
5300
|
selector: '[appDynamicTableLoader]',
|
|
@@ -5264,10 +5305,10 @@ class KlesTableFooterStartDirective {
|
|
|
5264
5305
|
constructor() {
|
|
5265
5306
|
this.elementRef = inject(ElementRef);
|
|
5266
5307
|
}
|
|
5267
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5268
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5309
|
+
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
5310
|
}
|
|
5270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableFooterStartDirective, decorators: [{
|
|
5271
5312
|
type: Directive,
|
|
5272
5313
|
args: [{
|
|
5273
5314
|
selector: '[klesTableFooterStart]',
|
|
@@ -5284,8 +5325,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
5284
5325
|
class KlesTableComponent {
|
|
5285
5326
|
constructor(connectorService) {
|
|
5286
5327
|
this.connectorService = connectorService;
|
|
5287
|
-
this.tableConfig = input.required(
|
|
5288
|
-
|
|
5328
|
+
this.tableConfig = input.required(/* @ts-ignore */
|
|
5329
|
+
...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
|
|
5330
|
+
this.footerStart = contentChild(KlesTableFooterStartDirective, /* @ts-ignore */
|
|
5331
|
+
...(ngDevMode ? [{ debugName: "footerStart" }] : /* istanbul ignore next */ []));
|
|
5289
5332
|
this.destroyRef = inject(DestroyRef);
|
|
5290
5333
|
this.tableEvent = new EventEmitter();
|
|
5291
5334
|
this.rowClick = new EventEmitter();
|
|
@@ -5313,7 +5356,8 @@ class KlesTableComponent {
|
|
|
5313
5356
|
this.elevationShadow = computed(() => {
|
|
5314
5357
|
const level = this.tableConfig().elevation ?? 2;
|
|
5315
5358
|
return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
|
|
5316
|
-
},
|
|
5359
|
+
}, /* @ts-ignore */
|
|
5360
|
+
...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
|
|
5317
5361
|
}
|
|
5318
5362
|
ngOnInit() {
|
|
5319
5363
|
this.connectorService.connected$
|
|
@@ -5440,10 +5484,10 @@ class KlesTableComponent {
|
|
|
5440
5484
|
break;
|
|
5441
5485
|
}
|
|
5442
5486
|
}
|
|
5443
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
5487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, deps: [{ token: KlesTableConnectorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5488
|
+
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
5489
|
}
|
|
5446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesTableComponent, decorators: [{
|
|
5447
5491
|
type: Component,
|
|
5448
5492
|
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
5493
|
}], 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 +5546,11 @@ const directives = [KlesTableFooterStartDirective];
|
|
|
5502
5546
|
const pipes = [];
|
|
5503
5547
|
class KlesMaterialTableModule {
|
|
5504
5548
|
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: "
|
|
5549
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5550
|
+
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] }); }
|
|
5551
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, providers: [pipes], imports: [CommonModule, components, KlesMaterialDynamicformsModule] }); }
|
|
5508
5552
|
}
|
|
5509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMaterialTableModule, decorators: [{
|
|
5510
5554
|
type: NgModule,
|
|
5511
5555
|
args: [{
|
|
5512
5556
|
imports: [CommonModule, components, directives, KlesTableComponent, KlesMaterialDynamicformsModule],
|