@taiga-ui/addon-table 4.52.0-canary.24b31eb → 4.52.0-canary.2d877cf
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/components/reorder/reorder.component.d.ts +7 -10
- package/components/reorder/reorder.options.d.ts +1 -3
- package/components/table/directives/cell.directive.d.ts +2 -2
- package/components/table/directives/direction-order.directive.d.ts +5 -3
- package/components/table/directives/head.directive.d.ts +2 -2
- package/components/table/directives/resized.directive.d.ts +2 -1
- package/components/table/directives/sort-by.directive.d.ts +10 -6
- package/components/table/directives/sortable.directive.d.ts +5 -7
- package/components/table/directives/table.directive.d.ts +14 -10
- package/components/table/pipes/table-sort.pipe.d.ts +4 -4
- package/components/table/table-expand/table-expand.component.d.ts +4 -6
- package/components/table/table.options.d.ts +1 -3
- package/components/table/tbody/tbody.component.d.ts +5 -8
- package/components/table/td/td.component.d.ts +3 -2
- package/components/table/th/th.component.d.ts +7 -7
- package/components/table/th-group/th-group.component.d.ts +4 -7
- package/components/table/tr/tr.component.d.ts +2 -0
- package/components/table-pagination/table-pagination.component.d.ts +13 -17
- package/components/table-pagination/table-pagination.options.d.ts +1 -3
- package/directives/table-control/checkbox-row.directive.d.ts +2 -2
- package/directives/table-filters/generic-filter.directive.d.ts +2 -1
- package/directives/table-filters/table-filter.directive.d.ts +3 -3
- package/fesm2022/taiga-ui-addon-table-components-reorder.mjs +35 -49
- package/fesm2022/taiga-ui-addon-table-components-reorder.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-table-components-table-pagination.mjs +37 -72
- package/fesm2022/taiga-ui-addon-table-components-table-pagination.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-table-components-table.mjs +185 -275
- package/fesm2022/taiga-ui-addon-table-components-table.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-table-directives-table-control.mjs +18 -21
- package/fesm2022/taiga-ui-addon-table-directives-table-control.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-table-directives-table-filters.mjs +23 -32
- package/fesm2022/taiga-ui-addon-table-directives-table-filters.mjs.map +1 -1
- package/package.json +9 -6
- package/tokens/i18n.d.ts +2 -2
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, TemplateRef,
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, TemplateRef, Directive, ChangeDetectorRef, output, signal, Input, effect, forwardRef, untracked, computed, contentChildren, Pipe, SkipSelf, viewChild, PLATFORM_ID, model, contentChild } from '@angular/core';
|
|
3
|
+
import { toSignal, outputToObservable, outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
4
|
+
import { tuiWithStyles, tuiSetSignal, tuiDefaultSort, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
5
|
+
import { map, distinctUntilChanged, catchError, EMPTY, combineLatest, debounceTime, Subject, switchMap, takeUntil, delay, filter, timer, of, ReplaySubject } from 'rxjs';
|
|
6
|
+
import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
|
|
5
7
|
import { IntersectionObserverService, WA_INTERSECTION_THRESHOLD, WA_INTERSECTION_ROOT_MARGIN } from '@ng-web-apis/intersection-observer';
|
|
6
8
|
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
|
|
7
9
|
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
|
|
8
10
|
import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
|
|
9
11
|
import { tuiChipOptionsProvider } from '@taiga-ui/kit/components/chip';
|
|
10
12
|
import { tuiProgressOptionsProvider } from '@taiga-ui/kit/components/progress';
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { EMPTY_CLIENT_RECT, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
|
|
13
|
+
import { tuiWatch, tuiTypedFromEvent, tuiPreventDefault, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
|
|
14
|
+
import { DOCUMENT, AsyncPipe, NgTemplateOutlet, isPlatformServer } from '@angular/common';
|
|
15
|
+
import { EMPTY_CLIENT_RECT } from '@taiga-ui/cdk/constants';
|
|
15
16
|
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
|
|
16
17
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
17
18
|
import { TuiIcon } from '@taiga-ui/core/components/icon';
|
|
@@ -24,31 +25,28 @@ import { ResizeObserverService } from '@ng-web-apis/resize-observer';
|
|
|
24
25
|
import { TuiControl } from '@taiga-ui/cdk/classes';
|
|
25
26
|
|
|
26
27
|
class TuiTableCaption {
|
|
27
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiTableCaption, isStandalone: true, selector: "caption[tuiCaption]", ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
29
30
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableCaption, decorators: [{
|
|
31
32
|
type: Component,
|
|
32
|
-
args: [{
|
|
33
|
+
args: [{ selector: 'caption[tuiCaption]', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"] }]
|
|
33
34
|
}] });
|
|
34
35
|
|
|
35
36
|
class TuiTableCell {
|
|
36
37
|
constructor() {
|
|
37
|
-
this.tuiCell = '';
|
|
38
|
+
this.tuiCell = input('');
|
|
38
39
|
this.template = inject((TemplateRef));
|
|
39
40
|
}
|
|
40
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
41
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
42
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTableCell, isStandalone: true, selector: "ng-template[tuiCell]", inputs: { tuiCell: { classPropertyName: "tuiCell", publicName: "tuiCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
42
43
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableCell, decorators: [{
|
|
44
45
|
type: Directive,
|
|
45
46
|
args: [{
|
|
46
|
-
standalone: true,
|
|
47
47
|
selector: 'ng-template[tuiCell]',
|
|
48
48
|
}]
|
|
49
|
-
}]
|
|
50
|
-
type: Input
|
|
51
|
-
}] } });
|
|
49
|
+
}] });
|
|
52
50
|
|
|
53
51
|
const TuiSortDirection = {
|
|
54
52
|
Asc: 1,
|
|
@@ -67,20 +65,15 @@ const TUI_TABLE_DEFAULT_OPTIONS = {
|
|
|
67
65
|
off: '@tui.chevrons-up-down',
|
|
68
66
|
},
|
|
69
67
|
};
|
|
70
|
-
const TUI_TABLE_OPTIONS =
|
|
71
|
-
factory: () => TUI_TABLE_DEFAULT_OPTIONS,
|
|
72
|
-
});
|
|
73
|
-
function tuiTableOptionsProvider(options) {
|
|
74
|
-
return tuiProvideOptions(TUI_TABLE_OPTIONS, options, TUI_TABLE_DEFAULT_OPTIONS);
|
|
75
|
-
}
|
|
68
|
+
const [TUI_TABLE_OPTIONS, tuiTableOptionsProvider] = tuiCreateOptions(TUI_TABLE_DEFAULT_OPTIONS);
|
|
76
69
|
|
|
77
70
|
// TODO: Consider making universal and moving to CDK
|
|
78
71
|
class TuiStuck {
|
|
79
72
|
constructor() {
|
|
80
73
|
this.stuck = toSignal(inject(IntersectionObserverService).pipe(map((entries) => (entries[entries.length - 1]?.intersectionRatio ?? 0) < 1), distinctUntilChanged(), tuiWatch(), catchError(() => EMPTY)));
|
|
81
74
|
}
|
|
82
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
83
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
75
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiStuck, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
76
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiStuck, isStandalone: true, selector: "tui-stuck:never", host: { properties: { "class._stuck": "stuck()" } }, providers: [
|
|
84
77
|
IntersectionObserverService,
|
|
85
78
|
{
|
|
86
79
|
provide: WA_INTERSECTION_THRESHOLD,
|
|
@@ -88,10 +81,9 @@ class TuiStuck {
|
|
|
88
81
|
},
|
|
89
82
|
], ngImport: i0 }); }
|
|
90
83
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiStuck, decorators: [{
|
|
92
85
|
type: Directive,
|
|
93
86
|
args: [{
|
|
94
|
-
standalone: true,
|
|
95
87
|
selector: 'tui-stuck:never',
|
|
96
88
|
providers: [
|
|
97
89
|
IntersectionObserverService,
|
|
@@ -106,10 +98,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
106
98
|
|
|
107
99
|
const EMPTY_COMPARATOR = () => 0;
|
|
108
100
|
class Styles {
|
|
109
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-table" }, ngImport: i0, template: '', isInline: true, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
111
103
|
}
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Styles, decorators: [{
|
|
113
105
|
type: Component,
|
|
114
106
|
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-table' }, styles: ["table[tuiTable]{border-collapse:separate;border-spacing:0}table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"] }]
|
|
115
107
|
}] });
|
|
@@ -118,38 +110,41 @@ class TuiTableDirective {
|
|
|
118
110
|
this.options = inject(TUI_TABLE_OPTIONS);
|
|
119
111
|
this.cdr = inject(ChangeDetectorRef);
|
|
120
112
|
this.nothing = tuiWithStyles(Styles);
|
|
121
|
-
this.columns = [];
|
|
122
|
-
this.direction = this.options.direction;
|
|
113
|
+
this.columns = input([]);
|
|
114
|
+
this.direction = input(this.options.direction);
|
|
123
115
|
this.sorter = EMPTY_COMPARATOR;
|
|
124
116
|
/**
|
|
125
117
|
* @deprecated: use sortChange
|
|
126
118
|
*/
|
|
127
|
-
this.directionChange =
|
|
119
|
+
this.directionChange = output();
|
|
128
120
|
/**
|
|
129
121
|
* @deprecated: use sortChange
|
|
130
122
|
*/
|
|
131
|
-
this.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
123
|
+
this.directionChange$ = outputToObservable(this.directionChange);
|
|
124
|
+
/**
|
|
125
|
+
* @deprecated: use sortChange
|
|
126
|
+
*/
|
|
127
|
+
this.sorterChange = output();
|
|
128
|
+
this.sorterChange$ = outputToObservable(this.sorterChange);
|
|
129
|
+
this.sortChange$ = combineLatest([
|
|
130
|
+
this.sorterChange$,
|
|
131
|
+
this.directionChange$,
|
|
135
132
|
]).pipe(debounceTime(0), map(([sortComparator, sortDirection]) => ({
|
|
136
133
|
sortBy: sortComparator,
|
|
137
134
|
orderBy: sortDirection,
|
|
138
135
|
sortComparator,
|
|
139
136
|
sortDirection,
|
|
140
137
|
})));
|
|
138
|
+
this.sortChange = outputFromObservable(this.sortChange$);
|
|
141
139
|
this.appearance = signal('table');
|
|
142
|
-
this.size =
|
|
140
|
+
this.size = input(this.options.size);
|
|
143
141
|
this.cleaner = signal(false);
|
|
144
142
|
// TODO: refactor to signal inputs after Angular update
|
|
145
143
|
this.change$ = new Subject();
|
|
146
144
|
}
|
|
147
|
-
set sizeSetter(size) {
|
|
148
|
-
this.size.set(size);
|
|
149
|
-
}
|
|
150
145
|
updateSorterAndDirection(sorter) {
|
|
151
146
|
if (this.sorter === sorter) {
|
|
152
|
-
this.updateSorter(this.sorter, this.direction === TuiSortDirection.Asc
|
|
147
|
+
this.updateSorter(this.sorter, this.direction() === TuiSortDirection.Asc
|
|
153
148
|
? TuiSortDirection.Desc
|
|
154
149
|
: TuiSortDirection.Asc);
|
|
155
150
|
}
|
|
@@ -165,13 +160,13 @@ class TuiTableDirective {
|
|
|
165
160
|
}
|
|
166
161
|
updateSorter(sorter, direction = TuiSortDirection.Asc) {
|
|
167
162
|
this.sorter = sorter || EMPTY_COMPARATOR.bind({});
|
|
168
|
-
this.direction
|
|
163
|
+
tuiSetSignal(this.direction, direction);
|
|
169
164
|
this.sorterChange.emit(sorter);
|
|
170
|
-
this.directionChange.emit(this.direction);
|
|
165
|
+
this.directionChange.emit(this.direction());
|
|
171
166
|
this.change$.next();
|
|
172
167
|
}
|
|
173
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
174
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
169
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTableDirective, isStandalone: true, selector: "table[tuiTable]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { directionChange: "directionChange", sorterChange: "sorterChange", sortChange: "sortChange" }, host: { attributes: { "tuiTable": "" }, properties: { "attr.data-size": "size()" } }, providers: [
|
|
175
170
|
{
|
|
176
171
|
provide: WA_INTERSECTION_ROOT_MARGIN,
|
|
177
172
|
useValue: '10000px 10000px 10000px 0px',
|
|
@@ -183,7 +178,7 @@ class TuiTableDirective {
|
|
|
183
178
|
tuiProgressOptionsProvider({ size: 's', color: 'var(--tui-text-action)' }),
|
|
184
179
|
], usesOnChanges: true, hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
|
|
185
180
|
}
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableDirective, decorators: [{
|
|
187
182
|
type: Directive,
|
|
188
183
|
args: [{
|
|
189
184
|
selector: 'table[tuiTable]',
|
|
@@ -200,93 +195,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
200
195
|
],
|
|
201
196
|
hostDirectives: [TuiStuck],
|
|
202
197
|
host: {
|
|
198
|
+
tuiTable: '',
|
|
203
199
|
'[attr.data-size]': 'size()',
|
|
204
200
|
},
|
|
205
201
|
}]
|
|
206
|
-
}], propDecorators: {
|
|
202
|
+
}], propDecorators: { sorter: [{
|
|
207
203
|
type: Input
|
|
208
|
-
}], direction: [{
|
|
209
|
-
type: Input
|
|
210
|
-
}], sorter: [{
|
|
211
|
-
type: Input
|
|
212
|
-
}], directionChange: [{
|
|
213
|
-
type: Output
|
|
214
|
-
}], sorterChange: [{
|
|
215
|
-
type: Output
|
|
216
|
-
}], sortChange: [{
|
|
217
|
-
type: Output
|
|
218
|
-
}], sizeSetter: [{
|
|
219
|
-
type: Input,
|
|
220
|
-
args: ['size']
|
|
221
204
|
}] } });
|
|
222
205
|
|
|
223
206
|
class TuiTableDirectionOrder {
|
|
224
207
|
constructor() {
|
|
225
208
|
this.table = inject((TuiTableDirective));
|
|
209
|
+
this.directionOrderChange$ = this.table.directionChange$.pipe(map((dir) => (dir === 1 ? 'asc' : 'desc')));
|
|
226
210
|
/**
|
|
227
211
|
* @deprecated: use tuiSortChange
|
|
228
212
|
*/
|
|
229
|
-
this.directionOrderChange = this.
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
213
|
+
this.directionOrderChange = outputFromObservable(this.directionOrderChange$);
|
|
214
|
+
this.directionOrder = input();
|
|
215
|
+
this.setTableDirection = effect((_, order = this.directionOrder()) => {
|
|
216
|
+
tuiSetSignal(this.table.direction, order === 'asc' ? TuiSortDirection.Asc : TuiSortDirection.Desc);
|
|
217
|
+
});
|
|
234
218
|
}
|
|
235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
236
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableDirectionOrder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
220
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTableDirectionOrder, isStandalone: true, selector: "table[tuiTable][tuiDirectionOrder]", inputs: { directionOrder: { classPropertyName: "directionOrder", publicName: "directionOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { directionOrderChange: "directionOrderChange" }, ngImport: i0 }); }
|
|
237
221
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableDirectionOrder, decorators: [{
|
|
239
223
|
type: Directive,
|
|
240
224
|
args: [{
|
|
241
|
-
standalone: true,
|
|
242
225
|
selector: 'table[tuiTable][tuiDirectionOrder]',
|
|
243
226
|
}]
|
|
244
|
-
}]
|
|
245
|
-
type: Output
|
|
246
|
-
}], directionOrder: [{
|
|
247
|
-
type: Input
|
|
248
|
-
}] } });
|
|
227
|
+
}] });
|
|
249
228
|
|
|
250
229
|
class TuiTableHead {
|
|
251
230
|
constructor() {
|
|
252
|
-
this.tuiHead =
|
|
231
|
+
this.tuiHead = input.required();
|
|
253
232
|
this.template = inject((TemplateRef));
|
|
254
233
|
}
|
|
255
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
256
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
235
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTableHead, isStandalone: true, selector: "[tuiHead]", inputs: { tuiHead: { classPropertyName: "tuiHead", publicName: "tuiHead", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
257
236
|
}
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableHead, decorators: [{
|
|
259
238
|
type: Directive,
|
|
260
239
|
args: [{
|
|
261
|
-
standalone: true,
|
|
262
240
|
selector: '[tuiHead]',
|
|
263
241
|
}]
|
|
264
|
-
}]
|
|
265
|
-
type: Input,
|
|
266
|
-
args: [{ required: true }]
|
|
267
|
-
}] } });
|
|
242
|
+
}] });
|
|
268
243
|
|
|
269
244
|
class TuiTableResized {
|
|
270
245
|
constructor() {
|
|
271
246
|
this.doc = inject(DOCUMENT);
|
|
272
247
|
this.el = tuiInjectElement();
|
|
273
|
-
this.tuiResized = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
|
|
248
|
+
this.tuiResized$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
|
|
274
249
|
const { width, right } = this.el.closest('th')?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
|
|
275
250
|
return tuiTypedFromEvent(this.doc, 'mousemove').pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
|
|
276
251
|
}));
|
|
252
|
+
this.tuiResized = outputFromObservable(this.tuiResized$);
|
|
277
253
|
}
|
|
278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
279
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
254
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableResized, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
255
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiTableResized, isStandalone: true, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 }); }
|
|
280
256
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableResized, decorators: [{
|
|
282
258
|
type: Directive,
|
|
283
259
|
args: [{
|
|
284
|
-
standalone: true,
|
|
285
260
|
selector: '[tuiResized]',
|
|
286
261
|
}]
|
|
287
|
-
}]
|
|
288
|
-
type: Output
|
|
289
|
-
}] } });
|
|
262
|
+
}] });
|
|
290
263
|
|
|
291
264
|
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
|
|
292
265
|
class TuiTableTh {
|
|
@@ -295,67 +268,57 @@ class TuiTableTh {
|
|
|
295
268
|
this.head = inject(TuiTableHead, {
|
|
296
269
|
optional: true,
|
|
297
270
|
});
|
|
298
|
-
this.width = null;
|
|
271
|
+
this.width = signal(null);
|
|
299
272
|
this.table = inject(forwardRef(() => TuiTableDirective), { optional: true });
|
|
300
|
-
this.minWidth = -Infinity;
|
|
301
|
-
this.maxWidth = Infinity;
|
|
273
|
+
this.minWidth = input(-Infinity);
|
|
274
|
+
this.maxWidth = input(Infinity);
|
|
302
275
|
this.sorter = this.head
|
|
303
276
|
? (a, b) => tuiDefaultSort(a[this.key], b[this.key])
|
|
304
277
|
: null;
|
|
305
|
-
this.resizable = this.options.resizable;
|
|
306
|
-
this.sticky = this.options.sticky;
|
|
307
|
-
this.requiredSort = this.options.requiredSort;
|
|
278
|
+
this.resizable = input(this.options.resizable);
|
|
279
|
+
this.sticky = input(this.options.sticky);
|
|
280
|
+
this.requiredSort = input(this.options.requiredSort);
|
|
308
281
|
}
|
|
309
282
|
get key() {
|
|
310
283
|
if (!this.head) {
|
|
311
284
|
throw new TuiTableSortKeyException();
|
|
312
285
|
}
|
|
313
|
-
return this.head.tuiHead;
|
|
286
|
+
return this.head.tuiHead();
|
|
314
287
|
}
|
|
315
288
|
get isCurrent() {
|
|
316
289
|
return !!this.sorter && !!this.table && this.sorter === this.table.sorter;
|
|
317
290
|
}
|
|
318
291
|
get icon() {
|
|
319
292
|
if (this.isCurrent) {
|
|
320
|
-
return this.table?.direction === TuiSortDirection.Asc
|
|
293
|
+
return this.table?.direction() === TuiSortDirection.Asc
|
|
321
294
|
? this.options.sortIcons.asc
|
|
322
295
|
: this.options.sortIcons.desc;
|
|
323
296
|
}
|
|
324
297
|
return this.options.sortIcons.off;
|
|
325
298
|
}
|
|
326
299
|
updateSorterAndDirection() {
|
|
327
|
-
const sorter = this.requiredSort ? this.sorter : null;
|
|
300
|
+
const sorter = this.requiredSort() ? this.sorter : null;
|
|
328
301
|
this.table?.updateSorterAndDirection(this.isCurrentAndDescDirection ? sorter : this.sorter);
|
|
329
302
|
}
|
|
330
303
|
onResized(width) {
|
|
331
|
-
this.width
|
|
304
|
+
this.width.set(Math.min(Math.max(width, this.minWidth()), this.maxWidth()));
|
|
332
305
|
}
|
|
333
306
|
get isCurrentAndDescDirection() {
|
|
334
307
|
return (this.sorter === this.table?.sorter &&
|
|
335
|
-
this.table?.direction === TuiSortDirection.Desc);
|
|
308
|
+
this.table?.direction() === TuiSortDirection.Desc);
|
|
336
309
|
}
|
|
337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: false, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, requiredSort: { classPropertyName: "requiredSort", publicName: "requiredSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.min-width.px": "width() || minWidth()", "style.width.px": "width() || minWidth()", "style.max-width.px": "width() || maxWidth()", "class._sticky": "sticky()" } }, ngImport: i0, template: "@if (sorter && table) {\n <button\n type=\"button\"\n class=\"t-sort\"\n [class.t-sort_sorted]=\"isCurrent\"\n (click)=\"updateSorterAndDirection()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n {{ table.change$ | async }}\n <tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n <ng-content />\n</ng-template>\n@if (resizable()) {\n <div\n class=\"t-bar\"\n (tuiResized)=\"onResized($event)\"\n ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
339
312
|
}
|
|
340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTh, decorators: [{
|
|
341
314
|
type: Component,
|
|
342
|
-
args: [{ selector: 'th[tuiTh]', imports: [AsyncPipe,
|
|
343
|
-
'[style.min-width.px]': 'width || minWidth',
|
|
344
|
-
'[style.width.px]': 'width || minWidth',
|
|
345
|
-
'[style.max-width.px]': 'width || maxWidth',
|
|
346
|
-
'[class._sticky]': 'sticky',
|
|
347
|
-
}, template: "
|
|
348
|
-
}], propDecorators: {
|
|
349
|
-
type: Input
|
|
350
|
-
}], maxWidth: [{
|
|
351
|
-
type: Input
|
|
352
|
-
}], sorter: [{
|
|
353
|
-
type: Input
|
|
354
|
-
}], resizable: [{
|
|
355
|
-
type: Input
|
|
356
|
-
}], sticky: [{
|
|
357
|
-
type: Input
|
|
358
|
-
}], requiredSort: [{
|
|
315
|
+
args: [{ selector: 'th[tuiTh]', imports: [AsyncPipe, NgTemplateOutlet, TuiIcon, TuiTableResized], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
316
|
+
'[style.min-width.px]': 'width() || minWidth()',
|
|
317
|
+
'[style.width.px]': 'width() || minWidth()',
|
|
318
|
+
'[style.max-width.px]': 'width() || maxWidth()',
|
|
319
|
+
'[class._sticky]': 'sticky()',
|
|
320
|
+
}, template: "@if (sorter && table) {\n <button\n type=\"button\"\n class=\"t-sort\"\n [class.t-sort_sorted]=\"isCurrent\"\n (click)=\"updateSorterAndDirection()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n {{ table.change$ | async }}\n <tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n <ng-content />\n</ng-template>\n@if (resizable()) {\n <div\n class=\"t-bar\"\n (tuiResized)=\"onResized($event)\"\n ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;block-size:var(--tui-height-m);font:var(--tui-font-text-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;left:100%;bottom:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"] }]
|
|
321
|
+
}], propDecorators: { sorter: [{
|
|
359
322
|
type: Input
|
|
360
323
|
}] } });
|
|
361
324
|
class TuiTableSortKeyException extends Error {
|
|
@@ -369,110 +332,92 @@ class TuiTableSortable {
|
|
|
369
332
|
this.table = inject((TuiTableDirective));
|
|
370
333
|
this.th = inject((TuiTableTh));
|
|
371
334
|
this.sortBy = inject(forwardRef(() => TuiTableSortBy));
|
|
372
|
-
this.
|
|
335
|
+
this.sortable = input(undefined, {
|
|
336
|
+
alias: 'tuiSortable',
|
|
337
|
+
transform: coerceBooleanProperty,
|
|
338
|
+
});
|
|
339
|
+
this.setSorter = effect(() => {
|
|
340
|
+
this.th.sorter = this.sortable() ? untracked(this.sorter) : null;
|
|
341
|
+
});
|
|
342
|
+
this.sorter = computed(() => {
|
|
343
|
+
return this.sortable() && this.match ? this.table.sorter : () => 0;
|
|
344
|
+
});
|
|
373
345
|
}
|
|
374
346
|
get key() {
|
|
375
347
|
return this.th.key;
|
|
376
348
|
}
|
|
377
|
-
ngOnChanges() {
|
|
378
|
-
if (this.sortable) {
|
|
379
|
-
this.sorter = this.match ? this.table.sorter : this.sorter;
|
|
380
|
-
this.th.sorter = this.sorter;
|
|
381
|
-
}
|
|
382
|
-
else {
|
|
383
|
-
this.th.sorter = null;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
349
|
check() {
|
|
387
|
-
if (this.match && this.table.sorter !== this.sorter) {
|
|
388
|
-
this.table.updateSorter(this.sorter);
|
|
350
|
+
if (this.match && this.table.sorter !== this.sorter()) {
|
|
351
|
+
this.table.updateSorter(this.sorter());
|
|
389
352
|
}
|
|
390
353
|
}
|
|
391
354
|
get match() {
|
|
392
|
-
return this.sortBy.tuiSortBy === this.key;
|
|
355
|
+
return untracked(this.sortBy.tuiSortBy) === this.key;
|
|
393
356
|
}
|
|
394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
395
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
358
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: { classPropertyName: "sortable", publicName: "tuiSortable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
396
359
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortable, decorators: [{
|
|
398
361
|
type: Directive,
|
|
399
362
|
args: [{
|
|
400
|
-
standalone: true,
|
|
401
363
|
selector: 'th[tuiTh][tuiSortable]',
|
|
402
364
|
}]
|
|
403
|
-
}]
|
|
404
|
-
type: Input,
|
|
405
|
-
args: [{
|
|
406
|
-
alias: 'tuiSortable',
|
|
407
|
-
transform: coerceBooleanProperty,
|
|
408
|
-
}]
|
|
409
|
-
}] } });
|
|
365
|
+
}] });
|
|
410
366
|
|
|
411
367
|
class TuiTableSortBy {
|
|
412
368
|
constructor() {
|
|
413
|
-
this.sortables =
|
|
369
|
+
this.sortables = contentChildren(TuiTableSortable, {
|
|
370
|
+
descendants: true,
|
|
371
|
+
});
|
|
414
372
|
this.table = inject((TuiTableDirective));
|
|
415
373
|
/**
|
|
416
|
-
* @deprecated
|
|
374
|
+
* @deprecated
|
|
417
375
|
*/
|
|
418
|
-
this.tuiSortByChange = this.table.sorterChange
|
|
376
|
+
this.tuiSortByChange$ = this.table.sorterChange$.pipe(
|
|
419
377
|
// delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
|
|
420
|
-
delay(0), filter(() => !!this.sortables.length), map((sorter) => this.getKey(sorter)));
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
378
|
+
delay(0), filter(() => !!this.sortables().length), map((sorter) => this.getKey(sorter)));
|
|
379
|
+
/**
|
|
380
|
+
* @deprecated: use tuiSortChange
|
|
381
|
+
*/
|
|
382
|
+
this.tuiSortByChange = outputFromObservable(this.tuiSortByChange$);
|
|
383
|
+
this.tuiSortChange$ = combineLatest([
|
|
384
|
+
this.tuiSortByChange$,
|
|
385
|
+
this.table.directionChange$,
|
|
424
386
|
]).pipe(debounceTime(0), map(([sortKey, sortDirection]) => ({
|
|
425
387
|
sortBy: sortKey,
|
|
426
388
|
orderBy: sortDirection,
|
|
427
389
|
sortKey,
|
|
428
390
|
sortDirection,
|
|
429
391
|
})));
|
|
430
|
-
this.
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
this.tuiSortBy = sortBy;
|
|
434
|
-
this.checkSortables();
|
|
435
|
-
}
|
|
436
|
-
checkSortables() {
|
|
437
|
-
this.sortables.forEach((s) => s.check());
|
|
392
|
+
this.tuiSortChange = outputFromObservable(this.tuiSortChange$);
|
|
393
|
+
this.tuiSortBy = input(null);
|
|
394
|
+
this.checkSortables = effect((_, __ = this.tuiSortBy()) => untracked(this.sortables).forEach((s) => s.check()));
|
|
438
395
|
}
|
|
439
396
|
getKey(sorter) {
|
|
440
|
-
return this.sortables.find((s) => s.sorter === sorter)?.key || null;
|
|
397
|
+
return this.sortables().find((s) => s.sorter() === sorter)?.key || null;
|
|
441
398
|
}
|
|
442
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
443
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
399
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortBy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
400
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.17", type: TuiTableSortBy, isStandalone: true, selector: "table[tuiTable][tuiSortBy]", inputs: { tuiSortBy: { classPropertyName: "tuiSortBy", publicName: "tuiSortBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiSortByChange: "tuiSortByChange", tuiSortChange: "tuiSortChange" }, queries: [{ propertyName: "sortables", predicate: TuiTableSortable, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
444
401
|
}
|
|
445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortBy, decorators: [{
|
|
446
403
|
type: Directive,
|
|
447
404
|
args: [{
|
|
448
|
-
standalone: true,
|
|
449
405
|
selector: 'table[tuiTable][tuiSortBy]',
|
|
450
406
|
}]
|
|
451
|
-
}]
|
|
452
|
-
type: ContentChildren,
|
|
453
|
-
args: [TuiTableSortable, { descendants: true }]
|
|
454
|
-
}], tuiSortByChange: [{
|
|
455
|
-
type: Output
|
|
456
|
-
}], tuiSortChange: [{
|
|
457
|
-
type: Output
|
|
458
|
-
}], sortBy: [{
|
|
459
|
-
type: Input,
|
|
460
|
-
args: ['tuiSortBy']
|
|
461
|
-
}] } });
|
|
407
|
+
}] });
|
|
462
408
|
|
|
463
409
|
class TuiTableThead {
|
|
464
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
465
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableThead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
411
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiTableThead, isStandalone: true, selector: "thead[tuiThead]", providers: [
|
|
466
412
|
{
|
|
467
413
|
provide: WA_INTERSECTION_ROOT_MARGIN,
|
|
468
414
|
useValue: '0px 10000px 10000px 10000px',
|
|
469
415
|
},
|
|
470
416
|
], hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
|
|
471
417
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableThead, decorators: [{
|
|
473
419
|
type: Directive,
|
|
474
420
|
args: [{
|
|
475
|
-
standalone: true,
|
|
476
421
|
selector: 'thead[tuiThead]',
|
|
477
422
|
providers: [
|
|
478
423
|
{
|
|
@@ -489,21 +434,20 @@ class TuiTableSortPipe {
|
|
|
489
434
|
this.table = inject((TuiTableDirective));
|
|
490
435
|
}
|
|
491
436
|
transform(data) {
|
|
492
|
-
return this.sort(data ?? [], this.table.sorter, this.table.direction);
|
|
437
|
+
return this.sort(data ?? [], this.table.sorter, this.table.direction());
|
|
493
438
|
}
|
|
494
439
|
sort(data, sorter, direction) {
|
|
495
440
|
return [...data].sort((a, b) => direction * sorter(a, b));
|
|
496
441
|
}
|
|
497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
498
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
443
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortPipe, isStandalone: true, name: "tuiTableSort", pure: false }); }
|
|
499
444
|
}
|
|
500
445
|
__decorate([
|
|
501
446
|
tuiPure
|
|
502
447
|
], TuiTableSortPipe.prototype, "sort", null);
|
|
503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableSortPipe, decorators: [{
|
|
504
449
|
type: Pipe,
|
|
505
450
|
args: [{
|
|
506
|
-
standalone: true,
|
|
507
451
|
name: 'tuiTableSort',
|
|
508
452
|
pure: false,
|
|
509
453
|
}]
|
|
@@ -525,42 +469,37 @@ const TUI_TABLE_PROVIDER = [
|
|
|
525
469
|
|
|
526
470
|
class TuiTableExpand {
|
|
527
471
|
constructor() {
|
|
472
|
+
this.content = viewChild('content');
|
|
528
473
|
this.el = tuiInjectElement();
|
|
529
474
|
this.server = isPlatformServer(inject(PLATFORM_ID));
|
|
530
475
|
this.transitioning = signal(false);
|
|
531
|
-
this.contentHeight = computed((_ = this.expanded()) => this.update());
|
|
476
|
+
this.contentHeight = computed((_ = this.expanded()) => this.update(this.content()));
|
|
532
477
|
this.visible$ = new Subject();
|
|
533
478
|
this.sub = this.visible$
|
|
534
479
|
.pipe(switchMap((v) => (v ? timer(500).pipe(map(() => v)) : of(v))), takeUntilDestroyed())
|
|
535
480
|
.subscribe((visible) => this.el.classList.toggle('_visible', visible));
|
|
536
|
-
this.
|
|
537
|
-
this.
|
|
538
|
-
}
|
|
539
|
-
set expandedSetter(open) {
|
|
540
|
-
this.expanded.set(open);
|
|
541
|
-
this.transitioning.set(true);
|
|
481
|
+
this.expanded = model(inject(TUI_TABLE_OPTIONS).open);
|
|
482
|
+
this.transitioningEffect = effect((_, __ = this.expanded()) => this.transitioning.set(true));
|
|
542
483
|
}
|
|
543
484
|
toggle() {
|
|
544
485
|
this.expanded.set(!this.expanded());
|
|
545
|
-
this.transitioning.set(true);
|
|
546
|
-
this.expandedChange.emit(this.expanded());
|
|
547
486
|
}
|
|
548
|
-
update() {
|
|
549
|
-
if (!
|
|
487
|
+
update(content) {
|
|
488
|
+
if (!content || this.server) {
|
|
550
489
|
return 0;
|
|
551
490
|
}
|
|
552
|
-
const el =
|
|
491
|
+
const el = content.nativeElement;
|
|
553
492
|
el.style.setProperty('display', 'block');
|
|
554
493
|
const height = el.getBoundingClientRect().height;
|
|
555
494
|
el.style.removeProperty('display');
|
|
556
495
|
return height;
|
|
557
496
|
}
|
|
558
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
497
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: TuiTableExpand, isStandalone: true, selector: "tui-table-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "tuiPresentChange": "visible$.next($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TuiPresent, outputs: ["tuiPresentChange", "tuiPresentChange"] }], ngImport: i0, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
560
499
|
}
|
|
561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableExpand, decorators: [{
|
|
562
501
|
type: Component,
|
|
563
|
-
args: [{
|
|
502
|
+
args: [{ selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
564
503
|
{
|
|
565
504
|
directive: TuiPresent,
|
|
566
505
|
outputs: ['tuiPresentChange'],
|
|
@@ -569,116 +508,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
569
508
|
ngSkipHydration: 'true',
|
|
570
509
|
'(tuiPresentChange)': 'visible$.next($event)',
|
|
571
510
|
}, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"] }]
|
|
572
|
-
}]
|
|
573
|
-
type: ViewChild,
|
|
574
|
-
args: ['content', { static: true }]
|
|
575
|
-
}], expandedChange: [{
|
|
576
|
-
type: Output
|
|
577
|
-
}], expandedSetter: [{
|
|
578
|
-
type: Input,
|
|
579
|
-
args: ['expanded']
|
|
580
|
-
}] } });
|
|
511
|
+
}] });
|
|
581
512
|
|
|
582
513
|
class TuiTableTd {
|
|
583
|
-
|
|
584
|
-
|
|
514
|
+
constructor() {
|
|
515
|
+
this.control = contentChild((TuiControl));
|
|
516
|
+
this.textfield = contentChild((TuiTextfieldComponent));
|
|
517
|
+
}
|
|
518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "control() || textfield()" } }, queries: [{ propertyName: "control", first: true, predicate: (TuiControl), descendants: true, isSignal: true }, { propertyName: "textfield", first: true, predicate: (TuiTextfieldComponent), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
585
520
|
}
|
|
586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTd, decorators: [{
|
|
587
522
|
type: Component,
|
|
588
|
-
args: [{
|
|
589
|
-
'[class._editable]': 'control || textfield',
|
|
523
|
+
args: [{ selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
524
|
+
'[class._editable]': 'control() || textfield()',
|
|
590
525
|
}, styles: [":host{position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-inline-start:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-font-text-m);padding:1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"] }]
|
|
591
|
-
}]
|
|
592
|
-
type: ContentChild,
|
|
593
|
-
args: [TuiControl]
|
|
594
|
-
}], textfield: [{
|
|
595
|
-
type: ContentChild,
|
|
596
|
-
args: [TuiTextfieldComponent]
|
|
597
|
-
}] } });
|
|
526
|
+
}] });
|
|
598
527
|
|
|
599
528
|
class TuiTableTr {
|
|
600
529
|
constructor() {
|
|
601
|
-
this.cells =
|
|
530
|
+
this.cells = contentChildren(forwardRef(() => TuiTableCell));
|
|
602
531
|
this.body = inject(forwardRef(() => TuiTableTbody));
|
|
603
532
|
this.contentReady$ = new ReplaySubject(1);
|
|
533
|
+
this.rows$ = toObservable(this.body.rows);
|
|
534
|
+
this.contentCells$ = toObservable(this.cells);
|
|
604
535
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
605
536
|
this.height = toSignal(inject(ResizeObserverService, { self: true }).pipe(map(([entry]) => entry?.contentRect.height ?? 0), distinctUntilChanged(), tuiZoneOptimized()), { initialValue: 0 });
|
|
606
|
-
this.cells$ = this.contentReady$.pipe(switchMap(() =>
|
|
607
|
-
this.item$ = this.contentReady$.pipe(switchMap(() =>
|
|
537
|
+
this.cells$ = this.contentReady$.pipe(switchMap(() => this.contentCells$), map((cells) => cells.reduce((record, item) => ({ ...record, [item.tuiCell()]: item }), {})));
|
|
538
|
+
this.item$ = this.contentReady$.pipe(switchMap(() => this.rows$), map((rows) => this.body.data()[rows.findIndex((row) => row === this)]));
|
|
608
539
|
}
|
|
609
540
|
ngAfterContentInit() {
|
|
610
541
|
Promise.resolve().then(() => this.contentReady$.next(true));
|
|
611
542
|
}
|
|
612
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
613
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
543
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { properties: { "style.--t-row-height.px": "height()" } }, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], queries: [{ propertyName: "cells", predicate: i0.forwardRef(() => TuiTableCell), isSignal: true }], ngImport: i0, template: "@if (cells$ | async; as items) {\n @for (key of table.columns(); track key) {\n <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n <ng-template #plain>\n @if (item$ | async; as item) {\n <td tuiTd>\n {{ item[key] }}\n </td>\n }\n </ng-template>\n </ng-container>\n }\n} @else {\n <td></td>\n}\n<ng-content />\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
614
545
|
}
|
|
615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
546
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTr, decorators: [{
|
|
616
547
|
type: Component,
|
|
617
548
|
args: [{ selector: 'tr[tuiTr]', imports: [AsyncPipe, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], host: {
|
|
618
549
|
'[style.--t-row-height.px]': 'height()',
|
|
619
|
-
}, template: "@if (cells$ | async; as items) {\n @for (key of table.columns; track key) {\n <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n <ng-template #plain>\n @if (item$ | async; as item) {\n <td tuiTd>\n {{ item[key] }}\n </td>\n }\n </ng-template>\n </ng-container>\n }\n} @else {\n <td></td>\n}\n<ng-content />\n" }]
|
|
620
|
-
}]
|
|
621
|
-
type: ContentChildren,
|
|
622
|
-
args: [forwardRef(() => TuiTableCell)]
|
|
623
|
-
}] } });
|
|
550
|
+
}, template: "@if (cells$ | async; as items) {\n @for (key of table.columns(); track key) {\n <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\">\n <ng-template #plain>\n @if (item$ | async; as item) {\n <td tuiTd>\n {{ item[key] }}\n </td>\n }\n </ng-template>\n </ng-container>\n }\n} @else {\n <td></td>\n}\n<ng-content />\n" }]
|
|
551
|
+
}] });
|
|
624
552
|
|
|
625
553
|
class TuiTableTbody {
|
|
626
554
|
constructor() {
|
|
627
555
|
this.options = inject(TUI_TABLE_OPTIONS);
|
|
628
556
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
629
|
-
this.rows =
|
|
630
|
-
this.data = [];
|
|
557
|
+
this.rows = contentChildren(forwardRef(() => TuiTableTr));
|
|
558
|
+
this.data = input([]);
|
|
631
559
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
632
|
-
this.
|
|
560
|
+
this.heading = input();
|
|
633
561
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
634
|
-
this.
|
|
562
|
+
this.open = model(this.options.open);
|
|
635
563
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
636
564
|
this.onClick = () => {
|
|
637
|
-
this.open
|
|
638
|
-
this.openChange.emit(this.open);
|
|
565
|
+
this.open.set(!this.open());
|
|
639
566
|
};
|
|
640
567
|
}
|
|
641
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTbody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTableTbody, isStandalone: true, selector: "tbody[tuiTbody]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: TUI_TABLE_PROVIDER, queries: [{ propertyName: "rows", predicate: i0.forwardRef(() => TuiTableTr), isSignal: true }], ngImport: i0, template: "@if (heading()) {\n <tr>\n <th\n class=\"t-heading\"\n [colSpan]=\"table.columns().length\"\n >\n <button\n type=\"button\"\n class=\"t-expand\"\n (click)=\"onClick()\"\n >\n <span class=\"t-name\">\n <ng-container *polymorpheusOutlet=\"heading() as text\">\n {{ text }}\n </ng-container>\n </span>\n <tui-icon\n class=\"t-chevron\"\n [tuiChevron]=\"open()\"\n />\n </button>\n </th>\n </tr>\n}\n@if (open()) {\n <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
643
570
|
}
|
|
644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableTbody, decorators: [{
|
|
645
572
|
type: Component,
|
|
646
|
-
args: [{ selector: 'tbody[tuiTbody]', imports: [PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_TABLE_PROVIDER, template: "@if (heading) {\n <tr>\n <th\n class=\"t-heading\"\n [colSpan]=\"table.columns.length\"\n >\n <button\n type=\"button\"\n class=\"t-expand\"\n (click)=\"onClick()\"\n >\n <span class=\"t-name\">\n <ng-container *polymorpheusOutlet=\"heading as text\">\n {{ text }}\n </ng-container>\n </span>\n <tui-icon\n class=\"t-chevron\"\n [tuiChevron]=\"open\"\n />\n </button>\n </th>\n </tr>\n}\n@if (open) {\n <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"] }]
|
|
647
|
-
}]
|
|
648
|
-
type: ContentChildren,
|
|
649
|
-
args: [forwardRef(() => TuiTableTr)]
|
|
650
|
-
}], data: [{
|
|
651
|
-
type: Input
|
|
652
|
-
}], heading: [{
|
|
653
|
-
type: Input
|
|
654
|
-
}], open: [{
|
|
655
|
-
type: Input
|
|
656
|
-
}], openChange: [{
|
|
657
|
-
type: Output
|
|
658
|
-
}] } });
|
|
573
|
+
args: [{ selector: 'tbody[tuiTbody]', imports: [PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_TABLE_PROVIDER, template: "@if (heading()) {\n <tr>\n <th\n class=\"t-heading\"\n [colSpan]=\"table.columns().length\"\n >\n <button\n type=\"button\"\n class=\"t-expand\"\n (click)=\"onClick()\"\n >\n <span class=\"t-name\">\n <ng-container *polymorpheusOutlet=\"heading() as text\">\n {{ text }}\n </ng-container>\n </span>\n <tui-icon\n class=\"t-chevron\"\n [tuiChevron]=\"open()\"\n />\n </button>\n </th>\n </tr>\n}\n@if (open()) {\n <ng-content />\n}\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"] }]
|
|
574
|
+
}] });
|
|
659
575
|
|
|
660
576
|
class TuiTableThGroup {
|
|
661
577
|
constructor() {
|
|
662
|
-
this.
|
|
663
|
-
this.heads
|
|
578
|
+
this.th = contentChild(forwardRef(() => TuiTableTh));
|
|
579
|
+
this.heads = contentChildren(forwardRef(() => TuiTableHead));
|
|
580
|
+
this.computedHeads = computed(() => {
|
|
581
|
+
return this.heads().reduce((record, item) => ({ ...record, [item.tuiHead()]: item }), {});
|
|
582
|
+
});
|
|
664
583
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
665
584
|
}
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
}
|
|
669
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(() => TuiTableTh), descendants: true }, { propertyName: "heads", predicate: i0.forwardRef(() => TuiTableHead) }], ngImport: i0, template: "<ng-content />\n@if (heads$ | async; as headings) {\n @for (key of table.columns; track key) {\n <ng-container\n [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n [ngTemplateOutletContext]=\"{$implicit: key}\"\n />\n }\n <ng-template\n #plain\n let-key\n >\n @if (!th && !heads.length) {\n <th tuiTh>\n {{ key.toString() }}\n </th>\n }\n </ng-template>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTableThGroup, isStandalone: true, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(() => TuiTableTh), descendants: true, isSignal: true }, { propertyName: "heads", predicate: i0.forwardRef(() => TuiTableHead), isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (computedHeads(); as headings) {\n @for (key of table.columns(); track key) {\n <ng-container\n [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n [ngTemplateOutletContext]=\"{$implicit: key}\"\n />\n }\n <ng-template\n #plain\n let-key\n >\n @if (!th() && !heads().length) {\n <th tuiTh>\n {{ key.toString() }}\n </th>\n }\n </ng-template>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
671
587
|
}
|
|
672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTableThGroup, decorators: [{
|
|
673
589
|
type: Component,
|
|
674
|
-
args: [{ selector: 'tr[tuiThGroup]', imports: [
|
|
675
|
-
}]
|
|
676
|
-
type: ContentChild,
|
|
677
|
-
args: [forwardRef(() => TuiTableTh)]
|
|
678
|
-
}], heads: [{
|
|
679
|
-
type: ContentChildren,
|
|
680
|
-
args: [forwardRef(() => TuiTableHead)]
|
|
681
|
-
}] } });
|
|
590
|
+
args: [{ selector: 'tr[tuiThGroup]', imports: [NgTemplateOutlet, TuiTableTh], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-content />\n@if (computedHeads(); as headings) {\n @for (key of table.columns(); track key) {\n <ng-container\n [ngTemplateOutlet]=\"headings?.[key]?.template || plain\"\n [ngTemplateOutletContext]=\"{$implicit: key}\"\n />\n }\n <ng-template\n #plain\n let-key\n >\n @if (!th() && !heads().length) {\n <th tuiTh>\n {{ key.toString() }}\n </th>\n }\n </ng-template>\n}\n" }]
|
|
591
|
+
}] });
|
|
682
592
|
|
|
683
593
|
const TuiTable = [
|
|
684
594
|
TuiTableDirective,
|