@taiga-ui/addon-table 4.52.0-canary.e444d19 → 4.52.0-canary.e53e79e
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-control/checkbox-table.directive.d.ts +2 -1
- 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 +189 -282
- package/fesm2022/taiga-ui-addon-table-components-table.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-table-directives-table-control.mjs +27 -28
- 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 +13 -10
- 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.16", ngImport: i0, type: TuiTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", 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.16", 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.16", ngImport: i0, type: TuiTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
42
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.16", 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.16", 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.16", ngImport: i0, type: TuiStuck, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
76
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", 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.16", 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,
|
|
@@ -105,53 +97,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
105
97
|
}] });
|
|
106
98
|
|
|
107
99
|
const EMPTY_COMPARATOR = () => 0;
|
|
108
|
-
class
|
|
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.
|
|
100
|
+
class Styles {
|
|
101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", 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.16", ngImport: i0, type: Styles, decorators: [{
|
|
113
105
|
type: Component,
|
|
114
|
-
args: [{
|
|
115
|
-
class: 'tui-table',
|
|
116
|
-
}, 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"] }]
|
|
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"] }]
|
|
117
107
|
}] });
|
|
118
108
|
class TuiTableDirective {
|
|
119
109
|
constructor() {
|
|
120
110
|
this.options = inject(TUI_TABLE_OPTIONS);
|
|
121
111
|
this.cdr = inject(ChangeDetectorRef);
|
|
122
|
-
this.nothing = tuiWithStyles(
|
|
123
|
-
this.columns = [];
|
|
124
|
-
this.direction = this.options.direction;
|
|
112
|
+
this.nothing = tuiWithStyles(Styles);
|
|
113
|
+
this.columns = input([]);
|
|
114
|
+
this.direction = input(this.options.direction);
|
|
125
115
|
this.sorter = EMPTY_COMPARATOR;
|
|
126
116
|
/**
|
|
127
117
|
* @deprecated: use sortChange
|
|
128
118
|
*/
|
|
129
|
-
this.directionChange =
|
|
119
|
+
this.directionChange = output();
|
|
130
120
|
/**
|
|
131
121
|
* @deprecated: use sortChange
|
|
132
122
|
*/
|
|
133
|
-
this.
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
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$,
|
|
137
132
|
]).pipe(debounceTime(0), map(([sortComparator, sortDirection]) => ({
|
|
138
133
|
sortBy: sortComparator,
|
|
139
134
|
orderBy: sortDirection,
|
|
140
135
|
sortComparator,
|
|
141
136
|
sortDirection,
|
|
142
137
|
})));
|
|
138
|
+
this.sortChange = outputFromObservable(this.sortChange$);
|
|
143
139
|
this.appearance = signal('table');
|
|
144
|
-
this.size =
|
|
140
|
+
this.size = input(this.options.size);
|
|
145
141
|
this.cleaner = signal(false);
|
|
146
142
|
// TODO: refactor to signal inputs after Angular update
|
|
147
143
|
this.change$ = new Subject();
|
|
148
144
|
}
|
|
149
|
-
set sizeSetter(size) {
|
|
150
|
-
this.size.set(size);
|
|
151
|
-
}
|
|
152
145
|
updateSorterAndDirection(sorter) {
|
|
153
146
|
if (this.sorter === sorter) {
|
|
154
|
-
this.updateSorter(this.sorter, this.direction === TuiSortDirection.Asc
|
|
147
|
+
this.updateSorter(this.sorter, this.direction() === TuiSortDirection.Asc
|
|
155
148
|
? TuiSortDirection.Desc
|
|
156
149
|
: TuiSortDirection.Asc);
|
|
157
150
|
}
|
|
@@ -166,14 +159,14 @@ class TuiTableDirective {
|
|
|
166
159
|
this.cdr.detectChanges();
|
|
167
160
|
}
|
|
168
161
|
updateSorter(sorter, direction = TuiSortDirection.Asc) {
|
|
169
|
-
this.sorter = sorter || EMPTY_COMPARATOR;
|
|
170
|
-
this.direction
|
|
162
|
+
this.sorter = sorter || EMPTY_COMPARATOR.bind({});
|
|
163
|
+
tuiSetSignal(this.direction, direction);
|
|
171
164
|
this.sorterChange.emit(sorter);
|
|
172
|
-
this.directionChange.emit(this.direction);
|
|
165
|
+
this.directionChange.emit(this.direction());
|
|
173
166
|
this.change$.next();
|
|
174
167
|
}
|
|
175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
176
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
169
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.16", 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: [
|
|
177
170
|
{
|
|
178
171
|
provide: WA_INTERSECTION_ROOT_MARGIN,
|
|
179
172
|
useValue: '10000px 10000px 10000px 0px',
|
|
@@ -185,10 +178,9 @@ class TuiTableDirective {
|
|
|
185
178
|
tuiProgressOptionsProvider({ size: 's', color: 'var(--tui-text-action)' }),
|
|
186
179
|
], usesOnChanges: true, hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
|
|
187
180
|
}
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableDirective, decorators: [{
|
|
189
182
|
type: Directive,
|
|
190
183
|
args: [{
|
|
191
|
-
standalone: true,
|
|
192
184
|
selector: 'table[tuiTable]',
|
|
193
185
|
providers: [
|
|
194
186
|
{
|
|
@@ -203,93 +195,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
203
195
|
],
|
|
204
196
|
hostDirectives: [TuiStuck],
|
|
205
197
|
host: {
|
|
198
|
+
tuiTable: '',
|
|
206
199
|
'[attr.data-size]': 'size()',
|
|
207
200
|
},
|
|
208
201
|
}]
|
|
209
|
-
}], propDecorators: {
|
|
202
|
+
}], propDecorators: { sorter: [{
|
|
210
203
|
type: Input
|
|
211
|
-
}], direction: [{
|
|
212
|
-
type: Input
|
|
213
|
-
}], sorter: [{
|
|
214
|
-
type: Input
|
|
215
|
-
}], directionChange: [{
|
|
216
|
-
type: Output
|
|
217
|
-
}], sorterChange: [{
|
|
218
|
-
type: Output
|
|
219
|
-
}], sortChange: [{
|
|
220
|
-
type: Output
|
|
221
|
-
}], sizeSetter: [{
|
|
222
|
-
type: Input,
|
|
223
|
-
args: ['size']
|
|
224
204
|
}] } });
|
|
225
205
|
|
|
226
206
|
class TuiTableDirectionOrder {
|
|
227
207
|
constructor() {
|
|
228
208
|
this.table = inject((TuiTableDirective));
|
|
209
|
+
this.directionOrderChange$ = this.table.directionChange$.pipe(map((dir) => (dir === 1 ? 'asc' : 'desc')));
|
|
229
210
|
/**
|
|
230
211
|
* @deprecated: use tuiSortChange
|
|
231
212
|
*/
|
|
232
|
-
this.directionOrderChange = this.
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
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
|
+
});
|
|
237
218
|
}
|
|
238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
239
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableDirectionOrder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
220
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.16", 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 }); }
|
|
240
221
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableDirectionOrder, decorators: [{
|
|
242
223
|
type: Directive,
|
|
243
224
|
args: [{
|
|
244
|
-
standalone: true,
|
|
245
225
|
selector: 'table[tuiTable][tuiDirectionOrder]',
|
|
246
226
|
}]
|
|
247
|
-
}]
|
|
248
|
-
type: Output
|
|
249
|
-
}], directionOrder: [{
|
|
250
|
-
type: Input
|
|
251
|
-
}] } });
|
|
227
|
+
}] });
|
|
252
228
|
|
|
253
229
|
class TuiTableHead {
|
|
254
230
|
constructor() {
|
|
255
|
-
this.tuiHead =
|
|
231
|
+
this.tuiHead = input.required();
|
|
256
232
|
this.template = inject((TemplateRef));
|
|
257
233
|
}
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
259
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
235
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.16", type: TuiTableHead, isStandalone: true, selector: "[tuiHead]", inputs: { tuiHead: { classPropertyName: "tuiHead", publicName: "tuiHead", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
260
236
|
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableHead, decorators: [{
|
|
262
238
|
type: Directive,
|
|
263
239
|
args: [{
|
|
264
|
-
standalone: true,
|
|
265
240
|
selector: '[tuiHead]',
|
|
266
241
|
}]
|
|
267
|
-
}]
|
|
268
|
-
type: Input,
|
|
269
|
-
args: [{ required: true }]
|
|
270
|
-
}] } });
|
|
242
|
+
}] });
|
|
271
243
|
|
|
272
244
|
class TuiTableResized {
|
|
273
245
|
constructor() {
|
|
274
246
|
this.doc = inject(DOCUMENT);
|
|
275
247
|
this.el = tuiInjectElement();
|
|
276
|
-
this.tuiResized = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
|
|
248
|
+
this.tuiResized$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
|
|
277
249
|
const { width, right } = this.el.closest('th')?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
|
|
278
250
|
return tuiTypedFromEvent(this.doc, 'mousemove').pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
|
|
279
251
|
}));
|
|
252
|
+
this.tuiResized = outputFromObservable(this.tuiResized$);
|
|
280
253
|
}
|
|
281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
282
|
-
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.16", ngImport: i0, type: TuiTableResized, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
255
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: TuiTableResized, isStandalone: true, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 }); }
|
|
283
256
|
}
|
|
284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableResized, decorators: [{
|
|
285
258
|
type: Directive,
|
|
286
259
|
args: [{
|
|
287
|
-
standalone: true,
|
|
288
260
|
selector: '[tuiResized]',
|
|
289
261
|
}]
|
|
290
|
-
}]
|
|
291
|
-
type: Output
|
|
292
|
-
}] } });
|
|
262
|
+
}] });
|
|
293
263
|
|
|
294
264
|
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
|
|
295
265
|
class TuiTableTh {
|
|
@@ -298,67 +268,57 @@ class TuiTableTh {
|
|
|
298
268
|
this.head = inject(TuiTableHead, {
|
|
299
269
|
optional: true,
|
|
300
270
|
});
|
|
301
|
-
this.width = null;
|
|
271
|
+
this.width = signal(null);
|
|
302
272
|
this.table = inject(forwardRef(() => TuiTableDirective), { optional: true });
|
|
303
|
-
this.minWidth = -Infinity;
|
|
304
|
-
this.maxWidth = Infinity;
|
|
273
|
+
this.minWidth = input(-Infinity);
|
|
274
|
+
this.maxWidth = input(Infinity);
|
|
305
275
|
this.sorter = this.head
|
|
306
276
|
? (a, b) => tuiDefaultSort(a[this.key], b[this.key])
|
|
307
277
|
: null;
|
|
308
|
-
this.resizable = this.options.resizable;
|
|
309
|
-
this.sticky = this.options.sticky;
|
|
310
|
-
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);
|
|
311
281
|
}
|
|
312
282
|
get key() {
|
|
313
283
|
if (!this.head) {
|
|
314
284
|
throw new TuiTableSortKeyException();
|
|
315
285
|
}
|
|
316
|
-
return this.head.tuiHead;
|
|
286
|
+
return this.head.tuiHead();
|
|
317
287
|
}
|
|
318
288
|
get isCurrent() {
|
|
319
289
|
return !!this.sorter && !!this.table && this.sorter === this.table.sorter;
|
|
320
290
|
}
|
|
321
291
|
get icon() {
|
|
322
292
|
if (this.isCurrent) {
|
|
323
|
-
return this.table?.direction === TuiSortDirection.Asc
|
|
293
|
+
return this.table?.direction() === TuiSortDirection.Asc
|
|
324
294
|
? this.options.sortIcons.asc
|
|
325
295
|
: this.options.sortIcons.desc;
|
|
326
296
|
}
|
|
327
297
|
return this.options.sortIcons.off;
|
|
328
298
|
}
|
|
329
299
|
updateSorterAndDirection() {
|
|
330
|
-
const sorter = this.requiredSort ? this.sorter : null;
|
|
300
|
+
const sorter = this.requiredSort() ? this.sorter : null;
|
|
331
301
|
this.table?.updateSorterAndDirection(this.isCurrentAndDescDirection ? sorter : this.sorter);
|
|
332
302
|
}
|
|
333
303
|
onResized(width) {
|
|
334
|
-
this.width
|
|
304
|
+
this.width.set(Math.min(Math.max(width, this.minWidth()), this.maxWidth()));
|
|
335
305
|
}
|
|
336
306
|
get isCurrentAndDescDirection() {
|
|
337
307
|
return (this.sorter === this.table?.sorter &&
|
|
338
|
-
this.table?.direction === TuiSortDirection.Desc);
|
|
308
|
+
this.table?.direction() === TuiSortDirection.Desc);
|
|
339
309
|
}
|
|
340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableTh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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 }); }
|
|
342
312
|
}
|
|
343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableTh, decorators: [{
|
|
344
314
|
type: Component,
|
|
345
|
-
args: [{ selector: 'th[tuiTh]', imports: [AsyncPipe,
|
|
346
|
-
'[style.min-width.px]': 'width || minWidth',
|
|
347
|
-
'[style.width.px]': 'width || minWidth',
|
|
348
|
-
'[style.max-width.px]': 'width || maxWidth',
|
|
349
|
-
'[class._sticky]': 'sticky',
|
|
350
|
-
}, template: "
|
|
351
|
-
}], propDecorators: {
|
|
352
|
-
type: Input
|
|
353
|
-
}], maxWidth: [{
|
|
354
|
-
type: Input
|
|
355
|
-
}], sorter: [{
|
|
356
|
-
type: Input
|
|
357
|
-
}], resizable: [{
|
|
358
|
-
type: Input
|
|
359
|
-
}], sticky: [{
|
|
360
|
-
type: Input
|
|
361
|
-
}], 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: [{
|
|
362
322
|
type: Input
|
|
363
323
|
}] } });
|
|
364
324
|
class TuiTableSortKeyException extends Error {
|
|
@@ -372,110 +332,92 @@ class TuiTableSortable {
|
|
|
372
332
|
this.table = inject((TuiTableDirective));
|
|
373
333
|
this.th = inject((TuiTableTh));
|
|
374
334
|
this.sortBy = inject(forwardRef(() => TuiTableSortBy));
|
|
375
|
-
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
|
+
});
|
|
376
345
|
}
|
|
377
346
|
get key() {
|
|
378
347
|
return this.th.key;
|
|
379
348
|
}
|
|
380
|
-
ngOnChanges() {
|
|
381
|
-
if (this.sortable) {
|
|
382
|
-
this.sorter = this.match ? this.table.sorter : this.sorter;
|
|
383
|
-
this.th.sorter = this.sorter;
|
|
384
|
-
}
|
|
385
|
-
else {
|
|
386
|
-
this.th.sorter = null;
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
349
|
check() {
|
|
390
|
-
if (this.match && this.table.sorter !== this.sorter) {
|
|
391
|
-
this.table.updateSorter(this.sorter);
|
|
350
|
+
if (this.match && this.table.sorter !== this.sorter()) {
|
|
351
|
+
this.table.updateSorter(this.sorter());
|
|
392
352
|
}
|
|
393
353
|
}
|
|
394
354
|
get match() {
|
|
395
|
-
return this.sortBy.tuiSortBy === this.key;
|
|
355
|
+
return untracked(this.sortBy.tuiSortBy) === this.key;
|
|
396
356
|
}
|
|
397
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
398
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
358
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.16", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: { classPropertyName: "sortable", publicName: "tuiSortable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
399
359
|
}
|
|
400
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortable, decorators: [{
|
|
401
361
|
type: Directive,
|
|
402
362
|
args: [{
|
|
403
|
-
standalone: true,
|
|
404
363
|
selector: 'th[tuiTh][tuiSortable]',
|
|
405
364
|
}]
|
|
406
|
-
}]
|
|
407
|
-
type: Input,
|
|
408
|
-
args: [{
|
|
409
|
-
alias: 'tuiSortable',
|
|
410
|
-
transform: coerceBooleanProperty,
|
|
411
|
-
}]
|
|
412
|
-
}] } });
|
|
365
|
+
}] });
|
|
413
366
|
|
|
414
367
|
class TuiTableSortBy {
|
|
415
368
|
constructor() {
|
|
416
|
-
this.sortables =
|
|
369
|
+
this.sortables = contentChildren(TuiTableSortable, {
|
|
370
|
+
descendants: true,
|
|
371
|
+
});
|
|
417
372
|
this.table = inject((TuiTableDirective));
|
|
418
373
|
/**
|
|
419
|
-
* @deprecated
|
|
374
|
+
* @deprecated
|
|
420
375
|
*/
|
|
421
|
-
this.tuiSortByChange = this.table.sorterChange
|
|
376
|
+
this.tuiSortByChange$ = this.table.sorterChange$.pipe(
|
|
422
377
|
// delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
|
|
423
|
-
delay(0), filter(() => !!this.sortables.length), map((sorter) => this.getKey(sorter)));
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
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$,
|
|
427
386
|
]).pipe(debounceTime(0), map(([sortKey, sortDirection]) => ({
|
|
428
387
|
sortBy: sortKey,
|
|
429
388
|
orderBy: sortDirection,
|
|
430
389
|
sortKey,
|
|
431
390
|
sortDirection,
|
|
432
391
|
})));
|
|
433
|
-
this.
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
this.tuiSortBy = sortBy;
|
|
437
|
-
this.checkSortables();
|
|
438
|
-
}
|
|
439
|
-
checkSortables() {
|
|
440
|
-
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()));
|
|
441
395
|
}
|
|
442
396
|
getKey(sorter) {
|
|
443
|
-
return this.sortables.find((s) => s.sorter === sorter)?.key || null;
|
|
397
|
+
return this.sortables().find((s) => s.sorter() === sorter)?.key || null;
|
|
444
398
|
}
|
|
445
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
446
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
399
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortBy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
400
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.16", 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 }); }
|
|
447
401
|
}
|
|
448
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortBy, decorators: [{
|
|
449
403
|
type: Directive,
|
|
450
404
|
args: [{
|
|
451
|
-
standalone: true,
|
|
452
405
|
selector: 'table[tuiTable][tuiSortBy]',
|
|
453
406
|
}]
|
|
454
|
-
}]
|
|
455
|
-
type: ContentChildren,
|
|
456
|
-
args: [TuiTableSortable, { descendants: true }]
|
|
457
|
-
}], tuiSortByChange: [{
|
|
458
|
-
type: Output
|
|
459
|
-
}], tuiSortChange: [{
|
|
460
|
-
type: Output
|
|
461
|
-
}], sortBy: [{
|
|
462
|
-
type: Input,
|
|
463
|
-
args: ['tuiSortBy']
|
|
464
|
-
}] } });
|
|
407
|
+
}] });
|
|
465
408
|
|
|
466
409
|
class TuiTableThead {
|
|
467
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
468
|
-
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.16", ngImport: i0, type: TuiTableThead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
411
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: TuiTableThead, isStandalone: true, selector: "thead[tuiThead]", providers: [
|
|
469
412
|
{
|
|
470
413
|
provide: WA_INTERSECTION_ROOT_MARGIN,
|
|
471
414
|
useValue: '0px 10000px 10000px 10000px',
|
|
472
415
|
},
|
|
473
416
|
], hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
|
|
474
417
|
}
|
|
475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableThead, decorators: [{
|
|
476
419
|
type: Directive,
|
|
477
420
|
args: [{
|
|
478
|
-
standalone: true,
|
|
479
421
|
selector: 'thead[tuiThead]',
|
|
480
422
|
providers: [
|
|
481
423
|
{
|
|
@@ -492,21 +434,20 @@ class TuiTableSortPipe {
|
|
|
492
434
|
this.table = inject((TuiTableDirective));
|
|
493
435
|
}
|
|
494
436
|
transform(data) {
|
|
495
|
-
return this.sort(data ?? [], this.table.sorter, this.table.direction);
|
|
437
|
+
return this.sort(data ?? [], this.table.sorter, this.table.direction());
|
|
496
438
|
}
|
|
497
439
|
sort(data, sorter, direction) {
|
|
498
440
|
return [...data].sort((a, b) => direction * sorter(a, b));
|
|
499
441
|
}
|
|
500
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
501
|
-
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.16", ngImport: i0, type: TuiTableSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
443
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortPipe, isStandalone: true, name: "tuiTableSort", pure: false }); }
|
|
502
444
|
}
|
|
503
445
|
__decorate([
|
|
504
446
|
tuiPure
|
|
505
447
|
], TuiTableSortPipe.prototype, "sort", null);
|
|
506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableSortPipe, decorators: [{
|
|
507
449
|
type: Pipe,
|
|
508
450
|
args: [{
|
|
509
|
-
standalone: true,
|
|
510
451
|
name: 'tuiTableSort',
|
|
511
452
|
pure: false,
|
|
512
453
|
}]
|
|
@@ -528,42 +469,37 @@ const TUI_TABLE_PROVIDER = [
|
|
|
528
469
|
|
|
529
470
|
class TuiTableExpand {
|
|
530
471
|
constructor() {
|
|
472
|
+
this.content = viewChild('content');
|
|
531
473
|
this.el = tuiInjectElement();
|
|
532
474
|
this.server = isPlatformServer(inject(PLATFORM_ID));
|
|
533
475
|
this.transitioning = signal(false);
|
|
534
|
-
this.contentHeight = computed((_ = this.expanded()) => this.update());
|
|
476
|
+
this.contentHeight = computed((_ = this.expanded()) => this.update(this.content()));
|
|
535
477
|
this.visible$ = new Subject();
|
|
536
478
|
this.sub = this.visible$
|
|
537
479
|
.pipe(switchMap((v) => (v ? timer(500).pipe(map(() => v)) : of(v))), takeUntilDestroyed())
|
|
538
480
|
.subscribe((visible) => this.el.classList.toggle('_visible', visible));
|
|
539
|
-
this.
|
|
540
|
-
this.
|
|
541
|
-
}
|
|
542
|
-
set expandedSetter(open) {
|
|
543
|
-
this.expanded.set(open);
|
|
544
|
-
this.transitioning.set(true);
|
|
481
|
+
this.expanded = model(inject(TUI_TABLE_OPTIONS).open);
|
|
482
|
+
this.transitioningEffect = effect((_, __ = this.expanded()) => this.transitioning.set(true));
|
|
545
483
|
}
|
|
546
484
|
toggle() {
|
|
547
485
|
this.expanded.set(!this.expanded());
|
|
548
|
-
this.transitioning.set(true);
|
|
549
|
-
this.expandedChange.emit(this.expanded());
|
|
550
486
|
}
|
|
551
|
-
update() {
|
|
552
|
-
if (!
|
|
487
|
+
update(content) {
|
|
488
|
+
if (!content || this.server) {
|
|
553
489
|
return 0;
|
|
554
490
|
}
|
|
555
|
-
const el =
|
|
491
|
+
const el = content.nativeElement;
|
|
556
492
|
el.style.setProperty('display', 'block');
|
|
557
493
|
const height = el.getBoundingClientRect().height;
|
|
558
494
|
el.style.removeProperty('display');
|
|
559
495
|
return height;
|
|
560
496
|
}
|
|
561
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
562
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
497
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.16", 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 }); }
|
|
563
499
|
}
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableExpand, decorators: [{
|
|
565
501
|
type: Component,
|
|
566
|
-
args: [{
|
|
502
|
+
args: [{ selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
567
503
|
{
|
|
568
504
|
directive: TuiPresent,
|
|
569
505
|
outputs: ['tuiPresentChange'],
|
|
@@ -572,116 +508,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
572
508
|
ngSkipHydration: 'true',
|
|
573
509
|
'(tuiPresentChange)': 'visible$.next($event)',
|
|
574
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"] }]
|
|
575
|
-
}]
|
|
576
|
-
type: ViewChild,
|
|
577
|
-
args: ['content', { static: true }]
|
|
578
|
-
}], expandedChange: [{
|
|
579
|
-
type: Output
|
|
580
|
-
}], expandedSetter: [{
|
|
581
|
-
type: Input,
|
|
582
|
-
args: ['expanded']
|
|
583
|
-
}] } });
|
|
511
|
+
}] });
|
|
584
512
|
|
|
585
513
|
class TuiTableTd {
|
|
586
|
-
|
|
587
|
-
|
|
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.16", ngImport: i0, type: TuiTableTd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.16", 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 }); }
|
|
588
520
|
}
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableTd, decorators: [{
|
|
590
522
|
type: Component,
|
|
591
|
-
args: [{
|
|
592
|
-
'[class._editable]': 'control || textfield',
|
|
523
|
+
args: [{ selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
524
|
+
'[class._editable]': 'control() || textfield()',
|
|
593
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"] }]
|
|
594
|
-
}]
|
|
595
|
-
type: ContentChild,
|
|
596
|
-
args: [TuiControl]
|
|
597
|
-
}], textfield: [{
|
|
598
|
-
type: ContentChild,
|
|
599
|
-
args: [TuiTextfieldComponent]
|
|
600
|
-
}] } });
|
|
526
|
+
}] });
|
|
601
527
|
|
|
602
528
|
class TuiTableTr {
|
|
603
529
|
constructor() {
|
|
604
|
-
this.cells =
|
|
530
|
+
this.cells = contentChildren(forwardRef(() => TuiTableCell));
|
|
605
531
|
this.body = inject(forwardRef(() => TuiTableTbody));
|
|
606
532
|
this.contentReady$ = new ReplaySubject(1);
|
|
533
|
+
this.rows$ = toObservable(this.body.rows);
|
|
534
|
+
this.contentCells$ = toObservable(this.cells);
|
|
607
535
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
608
536
|
this.height = toSignal(inject(ResizeObserverService, { self: true }).pipe(map(([entry]) => entry?.contentRect.height ?? 0), distinctUntilChanged(), tuiZoneOptimized()), { initialValue: 0 });
|
|
609
|
-
this.cells$ = this.contentReady$.pipe(switchMap(() =>
|
|
610
|
-
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)]));
|
|
611
539
|
}
|
|
612
540
|
ngAfterContentInit() {
|
|
613
541
|
Promise.resolve().then(() => this.contentReady$.next(true));
|
|
614
542
|
}
|
|
615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
616
|
-
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.16", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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 }); }
|
|
617
545
|
}
|
|
618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
546
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableTr, decorators: [{
|
|
619
547
|
type: Component,
|
|
620
548
|
args: [{ selector: 'tr[tuiTr]', imports: [AsyncPipe, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], host: {
|
|
621
549
|
'[style.--t-row-height.px]': 'height()',
|
|
622
|
-
}, 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" }]
|
|
623
|
-
}]
|
|
624
|
-
type: ContentChildren,
|
|
625
|
-
args: [forwardRef(() => TuiTableCell)]
|
|
626
|
-
}] } });
|
|
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
|
+
}] });
|
|
627
552
|
|
|
628
553
|
class TuiTableTbody {
|
|
629
554
|
constructor() {
|
|
630
555
|
this.options = inject(TUI_TABLE_OPTIONS);
|
|
631
556
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
632
|
-
this.rows =
|
|
633
|
-
this.data = [];
|
|
557
|
+
this.rows = contentChildren(forwardRef(() => TuiTableTr));
|
|
558
|
+
this.data = input([]);
|
|
634
559
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
635
|
-
this.
|
|
560
|
+
this.heading = input();
|
|
636
561
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
637
|
-
this.
|
|
562
|
+
this.open = model(this.options.open);
|
|
638
563
|
/** @deprecated: drop in v5.0, use TuiTableExpand */
|
|
639
564
|
this.onClick = () => {
|
|
640
|
-
this.open
|
|
641
|
-
this.openChange.emit(this.open);
|
|
565
|
+
this.open.set(!this.open());
|
|
642
566
|
};
|
|
643
567
|
}
|
|
644
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
645
|
-
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.16", ngImport: i0, type: TuiTableTbody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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 }); }
|
|
646
570
|
}
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableTbody, decorators: [{
|
|
648
572
|
type: Component,
|
|
649
|
-
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"] }]
|
|
650
|
-
}]
|
|
651
|
-
type: ContentChildren,
|
|
652
|
-
args: [forwardRef(() => TuiTableTr)]
|
|
653
|
-
}], data: [{
|
|
654
|
-
type: Input
|
|
655
|
-
}], heading: [{
|
|
656
|
-
type: Input
|
|
657
|
-
}], open: [{
|
|
658
|
-
type: Input
|
|
659
|
-
}], openChange: [{
|
|
660
|
-
type: Output
|
|
661
|
-
}] } });
|
|
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
|
+
}] });
|
|
662
575
|
|
|
663
576
|
class TuiTableThGroup {
|
|
664
577
|
constructor() {
|
|
665
|
-
this.
|
|
666
|
-
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
|
+
});
|
|
667
583
|
this.table = inject(forwardRef(() => TuiTableDirective));
|
|
668
584
|
}
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
}
|
|
672
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
673
|
-
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.16", ngImport: i0, type: TuiTableThGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.16", 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 }); }
|
|
674
587
|
}
|
|
675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TuiTableThGroup, decorators: [{
|
|
676
589
|
type: Component,
|
|
677
|
-
args: [{ selector: 'tr[tuiThGroup]', imports: [
|
|
678
|
-
}]
|
|
679
|
-
type: ContentChild,
|
|
680
|
-
args: [forwardRef(() => TuiTableTh)]
|
|
681
|
-
}], heads: [{
|
|
682
|
-
type: ContentChildren,
|
|
683
|
-
args: [forwardRef(() => TuiTableHead)]
|
|
684
|
-
}] } });
|
|
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
|
+
}] });
|
|
685
592
|
|
|
686
593
|
const TuiTable = [
|
|
687
594
|
TuiTableDirective,
|