igniteui-angular 22.1.3 → 22.2.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/combo/README.md +19 -0
- package/drop-down/README.md +40 -4
- package/fesm2022/igniteui-angular-accordion.mjs +7 -7
- package/fesm2022/igniteui-angular-action-strip.mjs +15 -12
- package/fesm2022/igniteui-angular-action-strip.mjs.map +1 -1
- package/fesm2022/igniteui-angular-avatar.mjs +7 -7
- package/fesm2022/igniteui-angular-badge.mjs +7 -7
- package/fesm2022/igniteui-angular-banner.mjs +15 -12
- package/fesm2022/igniteui-angular-banner.mjs.map +1 -1
- package/fesm2022/igniteui-angular-bottom-nav.mjs +22 -22
- package/fesm2022/igniteui-angular-button-group.mjs +12 -13
- package/fesm2022/igniteui-angular-button-group.mjs.map +1 -1
- package/fesm2022/igniteui-angular-calendar.mjs +73 -66
- package/fesm2022/igniteui-angular-calendar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-card.mjs +31 -31
- package/fesm2022/igniteui-angular-carousel.mjs +27 -24
- package/fesm2022/igniteui-angular-carousel.mjs.map +1 -1
- package/fesm2022/igniteui-angular-chat-extras.mjs +6 -6
- package/fesm2022/igniteui-angular-chat.mjs +12 -12
- package/fesm2022/igniteui-angular-checkbox.mjs +7 -7
- package/fesm2022/igniteui-angular-chips.mjs +15 -12
- package/fesm2022/igniteui-angular-chips.mjs.map +1 -1
- package/fesm2022/igniteui-angular-combo.mjs +273 -122
- package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-core.mjs +188 -59
- package/fesm2022/igniteui-angular-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-date-picker.mjs +76 -82
- package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-dialog.mjs +13 -13
- package/fesm2022/igniteui-angular-directives.mjs +321 -457
- package/fesm2022/igniteui-angular-directives.mjs.map +1 -1
- package/fesm2022/igniteui-angular-drop-down.mjs +331 -104
- package/fesm2022/igniteui-angular-drop-down.mjs.map +1 -1
- package/fesm2022/igniteui-angular-expansion-panel.mjs +28 -28
- package/fesm2022/igniteui-angular-grids-core.mjs +556 -518
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +91 -85
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +59 -46
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-lite.mjs +12 -12
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +113 -86
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +57 -57
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-icon.mjs +10 -10
- package/fesm2022/igniteui-angular-input-group.mjs +52 -63
- package/fesm2022/igniteui-angular-input-group.mjs.map +1 -1
- package/fesm2022/igniteui-angular-list.mjs +45 -42
- package/fesm2022/igniteui-angular-list.mjs.map +1 -1
- package/fesm2022/igniteui-angular-navbar.mjs +13 -13
- package/fesm2022/igniteui-angular-navigation-drawer.mjs +16 -16
- package/fesm2022/igniteui-angular-paginator.mjs +24 -21
- package/fesm2022/igniteui-angular-paginator.mjs.map +1 -1
- package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
- package/fesm2022/igniteui-angular-query-builder.mjs +44 -31
- package/fesm2022/igniteui-angular-query-builder.mjs.map +1 -1
- package/fesm2022/igniteui-angular-radio.mjs +59 -35
- package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
- package/fesm2022/igniteui-angular-select.mjs +35 -43
- package/fesm2022/igniteui-angular-select.mjs.map +1 -1
- package/fesm2022/igniteui-angular-simple-combo.mjs +44 -33
- package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-slider.mjs +28 -28
- package/fesm2022/igniteui-angular-snackbar.mjs +7 -7
- package/fesm2022/igniteui-angular-splitter.mjs +37 -27
- package/fesm2022/igniteui-angular-splitter.mjs.map +1 -1
- package/fesm2022/igniteui-angular-stepper.mjs +34 -34
- package/fesm2022/igniteui-angular-switch.mjs +7 -7
- package/fesm2022/igniteui-angular-tabs.mjs +34 -34
- package/fesm2022/igniteui-angular-time-picker.mjs +34 -40
- package/fesm2022/igniteui-angular-time-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-toast.mjs +7 -7
- package/fesm2022/igniteui-angular-tree.mjs +33 -30
- package/fesm2022/igniteui-angular-tree.mjs.map +1 -1
- package/fesm2022/igniteui-angular-virtual-scroll.mjs +1257 -0
- package/fesm2022/igniteui-angular-virtual-scroll.mjs.map +1 -0
- package/fesm2022/igniteui-angular.mjs +1 -0
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/input-group/README.md +2 -0
- package/lib/core/styles/components/scrollbar/scrollbar-component.scss +0 -2
- package/lib/core/styles/components/scrollbar/scrollbar-theme.scss +23 -51
- package/lib/grids/core/src/column-actions/themes/_derived.scss +3 -3
- package/lib/grids/core/src/filtering/excel-style/themes/_derived.scss +3 -3
- package/lib/grids/themes/_derived.scss +3 -3
- package/lib/query-builder/src/query-builder/themes/_derived.scss +3 -3
- package/migrations/migration-collection.json +10 -0
- package/migrations/update-22_2_0/changes/theme-changes.json +77 -0
- package/migrations/update-22_2_0/index.d.ts +3 -0
- package/migrations/update-22_2_0/index.js +18 -0
- package/migrations/update-22_2_0/index.spec.d.ts +1 -0
- package/migrations/update-22_2_0/index.spec.js +88 -0
- package/migrations/update-22_2_0_grid-summary-borders/changes/theme-changes.json +17 -0
- package/migrations/update-22_2_0_grid-summary-borders/index.d.ts +3 -0
- package/migrations/update-22_2_0_grid-summary-borders/index.js +64 -0
- package/migrations/update-22_2_0_grid-summary-borders/index.spec.d.ts +1 -0
- package/migrations/update-22_2_0_grid-summary-borders/index.spec.js +100 -0
- package/package.json +6 -2
- package/schematics/tsconfig.tsbuildinfo +1 -1
- package/simple-combo/README.md +3 -0
- package/skills/igniteui-angular-components/references/form-controls.md +58 -0
- package/styles/igniteui-angular-dark.css +1 -1
- package/styles/igniteui-angular.css +1 -1
- package/styles/igniteui-bootstrap-dark.css +1 -1
- package/styles/igniteui-bootstrap-light.css +1 -1
- package/styles/igniteui-dark-green.css +1 -1
- package/styles/igniteui-fluent-dark-excel.css +1 -1
- package/styles/igniteui-fluent-dark-word.css +1 -1
- package/styles/igniteui-fluent-dark.css +1 -1
- package/styles/igniteui-fluent-light-excel.css +1 -1
- package/styles/igniteui-fluent-light-word.css +1 -1
- package/styles/igniteui-fluent-light.css +1 -1
- package/styles/igniteui-indigo-dark.css +1 -1
- package/styles/igniteui-indigo-light.css +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
- package/types/igniteui-angular-action-strip.d.ts +1 -0
- package/types/igniteui-angular-banner.d.ts +1 -0
- package/types/igniteui-angular-calendar.d.ts +3 -1
- package/types/igniteui-angular-carousel.d.ts +1 -0
- package/types/igniteui-angular-chips.d.ts +1 -0
- package/types/igniteui-angular-combo.d.ts +56 -12
- package/types/igniteui-angular-core.d.ts +64 -11
- package/types/igniteui-angular-date-picker.d.ts +4 -4
- package/types/igniteui-angular-directives.d.ts +50 -164
- package/types/igniteui-angular-drop-down.d.ts +76 -4
- package/types/igniteui-angular-grids-core.d.ts +64 -28
- package/types/igniteui-angular-grids-grid.d.ts +4 -7
- package/types/igniteui-angular-grids-hierarchical-grid.d.ts +5 -4
- package/types/igniteui-angular-grids-pivot-grid.d.ts +11 -5
- package/types/igniteui-angular-grids-tree-grid.d.ts +1 -1
- package/types/igniteui-angular-icon.d.ts +1 -1
- package/types/igniteui-angular-input-group.d.ts +2 -2
- package/types/igniteui-angular-list.d.ts +1 -0
- package/types/igniteui-angular-paginator.d.ts +1 -0
- package/types/igniteui-angular-query-builder.d.ts +5 -1
- package/types/igniteui-angular-radio.d.ts +16 -1
- package/types/igniteui-angular-select.d.ts +1 -2
- package/types/igniteui-angular-simple-combo.d.ts +7 -0
- package/types/igniteui-angular-splitter.d.ts +6 -1
- package/types/igniteui-angular-stepper.d.ts +1 -1
- package/types/igniteui-angular-time-picker.d.ts +2 -2
- package/types/igniteui-angular-tree.d.ts +4 -3
- package/types/igniteui-angular-virtual-scroll.d.ts +408 -0
- package/types/igniteui-angular.d.ts +1 -0
- package/virtual-scroll/README.md +332 -0
|
@@ -562,7 +562,7 @@ declare class IgxStepperService {
|
|
|
562
562
|
private updateLinearDisabledSteps;
|
|
563
563
|
private getNextRequiredStep;
|
|
564
564
|
static ɵfac: i0.ɵɵFactoryDeclaration<IgxStepperService, never>;
|
|
565
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
565
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
566
566
|
}
|
|
567
567
|
|
|
568
568
|
/**
|
|
@@ -246,12 +246,14 @@ declare class IgxTimePickerComponent extends PickerBaseDirective implements IgxT
|
|
|
246
246
|
private _dateMaxValue;
|
|
247
247
|
private _selectedDate;
|
|
248
248
|
private _resourceStrings;
|
|
249
|
+
private _customResourceStrings;
|
|
249
250
|
private _defaultResourceStrings;
|
|
250
251
|
private _okButtonLabel;
|
|
251
252
|
private _cancelButtonLabel;
|
|
252
253
|
private _itemsDelta;
|
|
253
254
|
private _statusChanges$;
|
|
254
255
|
private _ngControl;
|
|
256
|
+
private _control;
|
|
255
257
|
private _onChangeCallback;
|
|
256
258
|
private _onTouchedCallback;
|
|
257
259
|
private _onValidatorChange;
|
|
@@ -434,8 +436,6 @@ declare class IgxTimePickerComponent extends PickerBaseDirective implements IgxT
|
|
|
434
436
|
setSelectedValue(value: Date): void;
|
|
435
437
|
protected onStatusChanged(): void;
|
|
436
438
|
protected updateResources(): void;
|
|
437
|
-
private get isTouchedOrDirty();
|
|
438
|
-
private get hasValidators();
|
|
439
439
|
private setMinMaxDropdownValue;
|
|
440
440
|
private initializeContainer;
|
|
441
441
|
private validateDropdownValue;
|
|
@@ -136,7 +136,7 @@ declare class IgxTreeNavigationService implements OnDestroy {
|
|
|
136
136
|
/** Gets the next visible node in the given direction - 1 -> next, -1 -> previous */
|
|
137
137
|
private getVisibleNode;
|
|
138
138
|
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeNavigationService, never>;
|
|
139
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
139
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
/** @hidden @internal */
|
|
@@ -203,7 +203,7 @@ declare class IgxTreeSelectionService {
|
|
|
203
203
|
/** Emits the `selectedChange` event for each node affected by the selection */
|
|
204
204
|
private emitSelectedChangeEvent;
|
|
205
205
|
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeSelectionService, never>;
|
|
206
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
206
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
/** @hidden @internal */
|
|
@@ -236,7 +236,7 @@ declare class IgxTreeService {
|
|
|
236
236
|
register(tree: IgxTree): void;
|
|
237
237
|
private siblingComparer;
|
|
238
238
|
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeService, never>;
|
|
239
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
239
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
/**
|
|
@@ -442,6 +442,7 @@ declare class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer implements I
|
|
|
442
442
|
/** @hidden @internal */
|
|
443
443
|
registeredChildren: IgxTreeNodeLinkDirective[];
|
|
444
444
|
private _resourceStrings;
|
|
445
|
+
private _customResourceStrings;
|
|
445
446
|
private _defaultResourceStrings;
|
|
446
447
|
private _tabIndex;
|
|
447
448
|
private _disabled;
|
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { OnDestroy, TemplateRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/** Template context for a single item of the virtual scroll. */
|
|
5
|
+
declare class IgxVsItemContext<T> {
|
|
6
|
+
/** The current item in the virtual scroll. */
|
|
7
|
+
$implicit: T;
|
|
8
|
+
/** The index of the current item. */
|
|
9
|
+
index: number;
|
|
10
|
+
/** The total number of items in the virtual scroll. */
|
|
11
|
+
count: number;
|
|
12
|
+
constructor(
|
|
13
|
+
/** The current item in the virtual scroll. */
|
|
14
|
+
$implicit: T,
|
|
15
|
+
/** The index of the current item. */
|
|
16
|
+
index: number,
|
|
17
|
+
/** The total number of items in the virtual scroll. */
|
|
18
|
+
count: number);
|
|
19
|
+
/** Whether the current item is the first in the list. */
|
|
20
|
+
get first(): boolean;
|
|
21
|
+
/** Whether the current item is the last in the list. */
|
|
22
|
+
get last(): boolean;
|
|
23
|
+
/** Whether the current item is at an even index. */
|
|
24
|
+
get even(): boolean;
|
|
25
|
+
/** Whether the current item is at an odd index. */
|
|
26
|
+
get odd(): boolean;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* How `scrollToIndex` positions the requested item in the viewport.
|
|
30
|
+
* The subset of `ScrollLogicalPosition` that the engine supports.
|
|
31
|
+
*/
|
|
32
|
+
type ScrollAlignment = "start" | "center" | "end";
|
|
33
|
+
/** The currently rendered (visible plus over-scanned) range of items. */
|
|
34
|
+
interface VisibleRange {
|
|
35
|
+
/** Index of the first rendered item, inclusive. */
|
|
36
|
+
startIndex: number;
|
|
37
|
+
/** Index of the last rendered item, inclusive. */
|
|
38
|
+
endIndex: number;
|
|
39
|
+
}
|
|
40
|
+
/** Snapshot of the currently rendered virtual window. */
|
|
41
|
+
interface VirtualScrollState extends VisibleRange {
|
|
42
|
+
/** The size of the viewport in pixels. */
|
|
43
|
+
viewportSize: number;
|
|
44
|
+
/** The total size of the virtual scroll content in pixels. */
|
|
45
|
+
totalSize: number;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* A loaded page of a larger collection, for data that arrives a page at a time.
|
|
49
|
+
*
|
|
50
|
+
* The list is sized by `totalCount` while only `items` are in memory. Indices are indices
|
|
51
|
+
* in the whole collection: the item at `index` is `items[index - startIndex]`, and indices
|
|
52
|
+
* the page does not cover render nothing.
|
|
53
|
+
*
|
|
54
|
+
* Measured sizes are kept per index across pages while `totalCount` holds: the indices still
|
|
55
|
+
* mean the same records. A page with another `totalCount` is a different collection, and
|
|
56
|
+
* every size is measured again. A page that keeps the count but puts different records at
|
|
57
|
+
* the same indices keeps the sizes measured for the previous ones until those rows render.
|
|
58
|
+
*/
|
|
59
|
+
interface VirtualDataWindow<T> {
|
|
60
|
+
/** The loaded items. */
|
|
61
|
+
readonly items: readonly T[];
|
|
62
|
+
/** The index `items[0]` has in the whole collection. */
|
|
63
|
+
readonly startIndex: number;
|
|
64
|
+
/** How many items the whole collection has. */
|
|
65
|
+
readonly totalCount: number;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Request for more data, emitted when the rendered window nears the end of
|
|
69
|
+
* the loaded items. Listen to it to implement infinite / remote scrolling.
|
|
70
|
+
*/
|
|
71
|
+
interface VirtualScrollDataRequest {
|
|
72
|
+
/** The first index that does not yet have data. */
|
|
73
|
+
startIndex: number;
|
|
74
|
+
/** Number of items being requested. */
|
|
75
|
+
count: number;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* A virtual scroll component for large lists. Only the items visible in the
|
|
80
|
+
* viewport (plus a configurable over-scan) are rendered.
|
|
81
|
+
*
|
|
82
|
+
* @igxKeywords virtual, scroll, virtualization, list
|
|
83
|
+
* @igxGroup Grids & Lists
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```html
|
|
87
|
+
* <igx-virtual-scroll [data]="items" style="height: 400px">
|
|
88
|
+
* <ng-template igxVirtualItem let-item let-i="index">
|
|
89
|
+
* <div>{{ i }}: {{ item }}</div>
|
|
90
|
+
* </ng-template>
|
|
91
|
+
* </igx-virtual-scroll>
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
declare class IgxVirtualScrollComponent<T> implements OnDestroy {
|
|
95
|
+
private readonly _hostRef;
|
|
96
|
+
private readonly _zone;
|
|
97
|
+
private readonly _document;
|
|
98
|
+
private readonly _isBrowser;
|
|
99
|
+
private readonly _engine;
|
|
100
|
+
private _viewportResizeObserver;
|
|
101
|
+
private _itemResizeObserver;
|
|
102
|
+
private _onScroll;
|
|
103
|
+
/** Elements currently registered with the item resize observer. */
|
|
104
|
+
private readonly _observedItems;
|
|
105
|
+
/** The data index each observed wrapper element last hosted. */
|
|
106
|
+
private readonly _observedItemIndexes;
|
|
107
|
+
/**
|
|
108
|
+
* The live scroll offset on the active axis. A plain field, not a signal:
|
|
109
|
+
* `_visibleRange` reads it but is invalidated by `_scrollTick`, so a scroll
|
|
110
|
+
* that does not move the rendered window schedules no work.
|
|
111
|
+
*/
|
|
112
|
+
private _scrollPosition;
|
|
113
|
+
/** Bumped only when a scroll actually moves the rendered window. */
|
|
114
|
+
private readonly _scrollTick;
|
|
115
|
+
/** The measured viewport, or `null` while the host has never been laid out. */
|
|
116
|
+
private readonly _viewportSize;
|
|
117
|
+
/**
|
|
118
|
+
* Whether the host is laid out left-to-right, as of the last read of the
|
|
119
|
+
* horizontal axis. `_contentTransform` depends on it, so a `dir` change
|
|
120
|
+
* flips the wrapper even while the rendered window stays put.
|
|
121
|
+
*/
|
|
122
|
+
private readonly _ltr;
|
|
123
|
+
/** What was loaded as of the previous change, for `_retainCount`. */
|
|
124
|
+
private _previousItems;
|
|
125
|
+
private _lastEmittedState;
|
|
126
|
+
private _hasPendingDataRequest;
|
|
127
|
+
/**
|
|
128
|
+
* The `startIndex` of the last emitted `dataRequest`, which is also the
|
|
129
|
+
* item count at that emit. See `_checkDataRequest`.
|
|
130
|
+
*/
|
|
131
|
+
private _lastDataRequestIndex;
|
|
132
|
+
private _layoutCompletePromise;
|
|
133
|
+
private _scrollRequestId;
|
|
134
|
+
private readonly _itemDirective;
|
|
135
|
+
private readonly _contentDivRef;
|
|
136
|
+
/**
|
|
137
|
+
* The array of items to virtualize.
|
|
138
|
+
*
|
|
139
|
+
* Compared by reference: mutating the array in place (`data.push(...)`)
|
|
140
|
+
* causes no update. Assign a new array instead. The `dataRequest` flow
|
|
141
|
+
* also expects a new array.
|
|
142
|
+
*/
|
|
143
|
+
readonly data: _angular_core.InputSignal<T[]>;
|
|
144
|
+
/**
|
|
145
|
+
* Scroll orientation of the virtual scroll.
|
|
146
|
+
* Can be either "vertical" or "horizontal".
|
|
147
|
+
* Default is "vertical".
|
|
148
|
+
*/
|
|
149
|
+
readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
150
|
+
/**
|
|
151
|
+
* Number of extra items to render beyond the visible area of the viewport.
|
|
152
|
+
* Higher values reduce blank flashes during fast scrolling but may impact performance.
|
|
153
|
+
* Default is 2.
|
|
154
|
+
*/
|
|
155
|
+
readonly overScan: _angular_core.InputSignal<number>;
|
|
156
|
+
/**
|
|
157
|
+
* Estimated item size in pixels used before an item is measured in the DOM.
|
|
158
|
+
* The engine replaces this with the actual measured size after the first render of each item.
|
|
159
|
+
* Default is 50 pixels.
|
|
160
|
+
* Setting this to a value close to the actual average item size can improve initial rendering performance.
|
|
161
|
+
*/
|
|
162
|
+
readonly estimatedItemSize: _angular_core.InputSignal<number>;
|
|
163
|
+
/**
|
|
164
|
+
* A loaded page of a larger collection, for data that arrives a page at a time.
|
|
165
|
+
*
|
|
166
|
+
* Takes the place of `data` while it is set. The list is as long as `totalCount`, so the
|
|
167
|
+
* scrollbar spans the whole collection while only the page is in memory. Indices the page
|
|
168
|
+
* does not cover render nothing; use `stateChange` to see which range is wanted and supply
|
|
169
|
+
* the page that covers it.
|
|
170
|
+
*
|
|
171
|
+
* Measured sizes are kept per index across pages while `totalCount` holds: the indices still
|
|
172
|
+
* mean the same records. A page with another `totalCount` is a different collection, and
|
|
173
|
+
* every size is measured again. A page that keeps the count but puts different records at
|
|
174
|
+
* the same indices keeps the sizes measured for the previous ones until those rows render.
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```html
|
|
178
|
+
* <igx-virtual-scroll [dataWindow]="page" (stateChange)="load($event)" style="height: 400px">
|
|
179
|
+
* <ng-template igxVirtualItem let-item>{{ item?.name }}</ng-template>
|
|
180
|
+
* </igx-virtual-scroll>
|
|
181
|
+
* ```
|
|
182
|
+
*/
|
|
183
|
+
readonly dataWindow: _angular_core.InputSignal<VirtualDataWindow<T> | null>;
|
|
184
|
+
/**
|
|
185
|
+
* @hidden @internal
|
|
186
|
+
*
|
|
187
|
+
* Viewport size in pixels to render the first window against, for a list that is hidden
|
|
188
|
+
* until the change detection pass that reveals it and so has no size to measure in it.
|
|
189
|
+
*
|
|
190
|
+
* A hint for that first render: once the host has been laid out its own size takes over,
|
|
191
|
+
* zero included. Changing `orientation` begins an axis with no measurement of its own, so
|
|
192
|
+
* the hint applies again there. Negative, `NaN` and infinite values count as no hint.
|
|
193
|
+
*
|
|
194
|
+
* A workaround for the drop-down family, which reads and focuses items in the pass that
|
|
195
|
+
* opens the list. To be removed once those components render their list on reveal.
|
|
196
|
+
*/
|
|
197
|
+
readonly initialViewportSize: _angular_core.InputSignal<number>;
|
|
198
|
+
/**
|
|
199
|
+
* Item template provided programmatically. Takes precedence over a content
|
|
200
|
+
* `ng-template[igxVirtualItem]` when both are provided.
|
|
201
|
+
*
|
|
202
|
+
* Items are measured by their border box, so margins accumulate as drift
|
|
203
|
+
* down the list. Use padding on the item, or a gap on a wrapper, instead.
|
|
204
|
+
*
|
|
205
|
+
* Only the current window is in the DOM, so assistive technology cannot
|
|
206
|
+
* infer an item's position from the markup. Templates that render a role
|
|
207
|
+
* with set semantics (`listitem`, `option`, `row`, ...) should map the
|
|
208
|
+
* context's `index` and `count` onto `aria-posinset` and `aria-setsize`.
|
|
209
|
+
*/
|
|
210
|
+
readonly itemTemplate: _angular_core.InputSignal<TemplateRef<IgxVsItemContext<T>> | null>;
|
|
211
|
+
/** Emitted when the rendered virtual window changes. */
|
|
212
|
+
readonly stateChange: _angular_core.OutputEmitterRef<VirtualScrollState>;
|
|
213
|
+
/**
|
|
214
|
+
* Emitted when the rendered window comes within a few items of the end of
|
|
215
|
+
* `data`. Also emitted on the first render, when the loaded items do not
|
|
216
|
+
* fill the viewport. Listen to this event to append more items
|
|
217
|
+
* (infinite / remote scrolling).
|
|
218
|
+
*/
|
|
219
|
+
readonly dataRequest: _angular_core.OutputEmitterRef<VirtualScrollDataRequest>;
|
|
220
|
+
protected readonly _isVertical: _angular_core.Signal<boolean>;
|
|
221
|
+
protected readonly _resolvedTemplate: _angular_core.Signal<TemplateRef<IgxVsItemContext<any>> | null>;
|
|
222
|
+
/**
|
|
223
|
+
* What the component has to work with, from whichever data input is in use. A page is
|
|
224
|
+
* trusted to be no longer than the collection it says it belongs to.
|
|
225
|
+
*/
|
|
226
|
+
private readonly _loaded;
|
|
227
|
+
/** The measured size once the host has been laid out, the hint until then. */
|
|
228
|
+
private readonly _effectiveViewportSize;
|
|
229
|
+
/** The configured `overScan`, normalized to a non-negative integer. */
|
|
230
|
+
private readonly _normalizedOverScan;
|
|
231
|
+
/** The configured `estimatedItemSize`, normalized to a positive number. */
|
|
232
|
+
private readonly _normalizedItemSize;
|
|
233
|
+
/**
|
|
234
|
+
* The window to render for the current scroll position and viewport. Empty
|
|
235
|
+
* until an item template is resolved, because nothing renders without one.
|
|
236
|
+
*
|
|
237
|
+
* The scroll position is read from the plain `_scrollPosition` field so
|
|
238
|
+
* that a recompute triggered by a measurement uses the live offset, while
|
|
239
|
+
* `_scrollTick` limits recomputes to scrolls that actually move the window.
|
|
240
|
+
*/
|
|
241
|
+
private readonly _visibleRange;
|
|
242
|
+
/** The track size, in DOM space. */
|
|
243
|
+
protected readonly _spaceSize: _angular_core.Signal<number>;
|
|
244
|
+
/** The part of the rendered range a page actually covers. */
|
|
245
|
+
private readonly _loadedRange;
|
|
246
|
+
/** The item contexts for the currently rendered window, in render order. */
|
|
247
|
+
protected readonly _renderedItems: _angular_core.Signal<IgxVsItemContext<T>[]>;
|
|
248
|
+
/**
|
|
249
|
+
* The `translateY` / `translateX` for the content wrapper. It is absolutely
|
|
250
|
+
* positioned at the origin of a `domSize` px track, so translating it to
|
|
251
|
+
* the first rendered item's offset puts that item at its virtual position.
|
|
252
|
+
*/
|
|
253
|
+
protected readonly _contentTransform: _angular_core.Signal<string>;
|
|
254
|
+
constructor();
|
|
255
|
+
ngOnDestroy(): void;
|
|
256
|
+
/**
|
|
257
|
+
* Resolves when the virtual scroll has settled: the current render pass is
|
|
258
|
+
* complete, the item-size measurements it triggers are complete, and so
|
|
259
|
+
* are the renders those measurements schedule.
|
|
260
|
+
*/
|
|
261
|
+
get layoutComplete(): Promise<void>;
|
|
262
|
+
/**
|
|
263
|
+
* Scrolls to the specified item index.
|
|
264
|
+
*
|
|
265
|
+
* Items outside the rendered window have only an estimated size, so the
|
|
266
|
+
* first jump can miss the target. The items at the landing point are then
|
|
267
|
+
* measured and the scroll position is corrected, until the offset is
|
|
268
|
+
* stable. The returned promise resolves on that final offset; callers that
|
|
269
|
+
* need only the first, approximate scroll can ignore it.
|
|
270
|
+
*
|
|
271
|
+
* @param index The index of the item to scroll to.
|
|
272
|
+
* @param options `block` / `inline` select the alignment (`start`,
|
|
273
|
+
* `center`, `end` or `nearest`); `behavior` selects `auto` or `smooth`.
|
|
274
|
+
*/
|
|
275
|
+
scrollToIndex(index: number, options?: ScrollIntoViewOptions): Promise<void>;
|
|
276
|
+
/**
|
|
277
|
+
* Re-reads the host's direction, which `dir` can change at runtime. `:dir()`
|
|
278
|
+
* is a selector match, so this costs no layout.
|
|
279
|
+
*/
|
|
280
|
+
private _syncDirection;
|
|
281
|
+
/** The current real scroll position on the active axis, normalized for RTL. */
|
|
282
|
+
private _currentAxisScroll;
|
|
283
|
+
/** Applies a scroll offset to the active axis, accounting for RTL. */
|
|
284
|
+
private _applyScroll;
|
|
285
|
+
/**
|
|
286
|
+
* The scroll offset that aligns `index` in the viewport according to
|
|
287
|
+
* `options`, from the engine's current size data. As more items are
|
|
288
|
+
* measured, the same input can give a different, more accurate result.
|
|
289
|
+
*
|
|
290
|
+
* `nearest` keeps the current offset for an item already in view and
|
|
291
|
+
* otherwise brings the item to its nearer edge, as native `scrollIntoView`
|
|
292
|
+
* does.
|
|
293
|
+
*/
|
|
294
|
+
private _getAlignedScrollOffset;
|
|
295
|
+
/**
|
|
296
|
+
* Applies a scroll offset to the active axis and waits for the scroll,
|
|
297
|
+
* instant or smooth, to settle.
|
|
298
|
+
*
|
|
299
|
+
* `scrollend` does not fire when the requested offset does not move the
|
|
300
|
+
* scroll position, so that case resolves immediately. The deadline covers
|
|
301
|
+
* an event that never arrives, for example when the element is detached
|
|
302
|
+
* mid-scroll.
|
|
303
|
+
*/
|
|
304
|
+
private _scrollAndWaitForEnd;
|
|
305
|
+
private _waitForScrollEnd;
|
|
306
|
+
/**
|
|
307
|
+
* Resolves when no `scroll` event arrives for `SCROLL_IDLE_MS`: the closest
|
|
308
|
+
* replacement for `scrollend`. The first timer starts immediately, so a
|
|
309
|
+
* scroll that does not move still settles.
|
|
310
|
+
*/
|
|
311
|
+
private _waitForScrollIdle;
|
|
312
|
+
/** A promise whose subscription work stays out of the Angular zone. */
|
|
313
|
+
private _promiseOutsideZone;
|
|
314
|
+
/**
|
|
315
|
+
* Resolves with `task` or with a deadline of `ms`, whichever comes first.
|
|
316
|
+
* The signal then tears down the other, so no live timer or dangling
|
|
317
|
+
* listener remains.
|
|
318
|
+
*/
|
|
319
|
+
private _withDeadline;
|
|
320
|
+
/**
|
|
321
|
+
* Resolves on the next animation frame, or after `LAYOUT_FRAME_TIMEOUT_MS`
|
|
322
|
+
* when no frame arrives. A hidden tab or a detached element gets no frames
|
|
323
|
+
* and has no layout to wait for, so resolving early there is safe.
|
|
324
|
+
*/
|
|
325
|
+
private _nextFrame;
|
|
326
|
+
/**
|
|
327
|
+
* Waits out the frames in which the item measurements land. Each
|
|
328
|
+
* measurement that changes a size bumps the engine's version and schedules
|
|
329
|
+
* another render, so the layout has settled once the version holds still
|
|
330
|
+
* across two consecutive frames.
|
|
331
|
+
*/
|
|
332
|
+
private _resolveLayoutComplete;
|
|
333
|
+
private _measureViewport;
|
|
334
|
+
private _setupViewportResizeObserver;
|
|
335
|
+
private _setupScrollListener;
|
|
336
|
+
/**
|
|
337
|
+
* Records the new scroll offset and invalidates the rendered window only
|
|
338
|
+
* when it actually moves. Without the guard, a scroll inside a single item
|
|
339
|
+
* would schedule a change detection pass for an identical result.
|
|
340
|
+
*/
|
|
341
|
+
private _handleScroll;
|
|
342
|
+
private _handleItemResize;
|
|
343
|
+
/**
|
|
344
|
+
* Synchronizes the item observer with the rendered window, applying only
|
|
345
|
+
* the difference. A newly observed element gets one initial measurement.
|
|
346
|
+
*
|
|
347
|
+
* An element whose `data-index` changed is re-registered, because
|
|
348
|
+
* `observe` on an already observed element is a no-op. `@for` tracks by
|
|
349
|
+
* slot and reuses the wrapper elements, so after a scroll the same element
|
|
350
|
+
* can host a different item at an identical size. The observer stays quiet
|
|
351
|
+
* about that and the new index would keep its estimated size.
|
|
352
|
+
*/
|
|
353
|
+
private _scheduleItemMeasurement;
|
|
354
|
+
/**
|
|
355
|
+
* Forgets the wrappers from `index` on, so the next pass registers them
|
|
356
|
+
* again: the resize dropped their sizes, and a wrapper whose size did not
|
|
357
|
+
* change reports nothing on its own.
|
|
358
|
+
*/
|
|
359
|
+
private _remeasureFrom;
|
|
360
|
+
private _getItemResizeObserver;
|
|
361
|
+
/**
|
|
362
|
+
* The number of leading items that kept their identity across a `data`
|
|
363
|
+
* change: the index of the first item whose measured size no longer
|
|
364
|
+
* matches its rendered content. An append (the `dataRequest` flow) retains
|
|
365
|
+
* all items. A filter or a replacement retains only the unchanged prefix.
|
|
366
|
+
*/
|
|
367
|
+
private _firstChangedIndex;
|
|
368
|
+
/**
|
|
369
|
+
* How many leading items keep their measured size across a change. A page of the same
|
|
370
|
+
* collection keeps all of them - its indices still mean the same records. A page with
|
|
371
|
+
* another `totalCount` comes from a filtered or otherwise different collection, and
|
|
372
|
+
* switching inputs starts over, so neither keeps any.
|
|
373
|
+
*/
|
|
374
|
+
private _retainCount;
|
|
375
|
+
/**
|
|
376
|
+
* Emits `stateChange`. Skipped when the window is empty or equal to the
|
|
377
|
+
* last reported one, because measurement passes re-render without a window
|
|
378
|
+
* change.
|
|
379
|
+
*/
|
|
380
|
+
private _emitStateChange;
|
|
381
|
+
private _checkDataRequest;
|
|
382
|
+
private _teardown;
|
|
383
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxVirtualScrollComponent<any>, never>;
|
|
384
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IgxVirtualScrollComponent<any>, "igx-virtual-scroll", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "overScan": { "alias": "overScan"; "required": false; "isSignal": true; }; "estimatedItemSize": { "alias": "estimatedItemSize"; "required": false; "isSignal": true; }; "dataWindow": { "alias": "dataWindow"; "required": false; "isSignal": true; }; "initialViewportSize": { "alias": "initialViewportSize"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "dataRequest": "dataRequest"; }, ["_itemDirective"], never, true, never>;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/**
|
|
388
|
+
* Directive to mark an `ng-template` as the item template for the virtual scroll component.
|
|
389
|
+
* The template provided by this directive will be used to render each item in the virtual scroll.
|
|
390
|
+
* The context for the template will include the item data and its index.
|
|
391
|
+
*
|
|
392
|
+
* @example
|
|
393
|
+
* ```html
|
|
394
|
+
* <igx-virtual-scroll [data]="items">
|
|
395
|
+
* <ng-template igxVirtualItem let-item let-i="index">
|
|
396
|
+
* <div>{{ i }}: {{ item }}</div>
|
|
397
|
+
* </ng-template>
|
|
398
|
+
* </igx-virtual-scroll>
|
|
399
|
+
* ```
|
|
400
|
+
*/
|
|
401
|
+
declare class IgxVirtualItemDirective<T = unknown> {
|
|
402
|
+
readonly template: TemplateRef<IgxVsItemContext<T>>;
|
|
403
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IgxVirtualItemDirective<any>, never>;
|
|
404
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IgxVirtualItemDirective<any>, "ng-template[igxVirtualItem]", never, {}, {}, never, never, true, never>;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
export { IgxVirtualItemDirective, IgxVirtualScrollComponent, IgxVsItemContext };
|
|
408
|
+
export type { ScrollAlignment, VirtualDataWindow, VirtualScrollDataRequest, VirtualScrollState, VisibleRange };
|