ng-virtual-list 22.12.4 → 22.12.9
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 +8 -8
- package/fesm2022/ng-virtual-list.mjs +259 -140
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-virtual-list.d.ts +29 -11
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, inject, viewChild, signal, ElementRef, DestroyRef, effect, computed, ChangeDetectionStrategy, Component, output, Input, Directive, Injector, InjectionToken, input, ViewChild, ViewContainerRef, ViewEncapsulation, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
|
|
3
|
-
import { Subject, BehaviorSubject, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, takeUntil as takeUntil$1, startWith,
|
|
3
|
+
import { Subject, BehaviorSubject, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, takeUntil as takeUntil$1, startWith, take, from, skip } from 'rxjs';
|
|
4
4
|
import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
|
|
6
6
|
import * as i1 from '@angular/common';
|
|
@@ -328,7 +328,7 @@ const VISIBILITY_HIDDEN = 'hidden';
|
|
|
328
328
|
const SIZE_100_PERSENT = '100%';
|
|
329
329
|
const SIZE_AUTO = 'auto';
|
|
330
330
|
const UNSET$5 = 'unset';
|
|
331
|
-
const LEFT$
|
|
331
|
+
const LEFT$3 = 'left';
|
|
332
332
|
const RIGHT$1 = 'right';
|
|
333
333
|
const POSITION$1 = 'position';
|
|
334
334
|
const POSITION_RELATIVE = 'relative';
|
|
@@ -1831,7 +1831,7 @@ class ScrollEvent {
|
|
|
1831
1831
|
|
|
1832
1832
|
/**
|
|
1833
1833
|
* Event emitter
|
|
1834
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
1834
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/utils/event-emitter/event-emitter.ts
|
|
1835
1835
|
* @author Evgenii Alexandrovich Grebennikov
|
|
1836
1836
|
* @email djonnyx@gmail.com
|
|
1837
1837
|
*/
|
|
@@ -2741,7 +2741,7 @@ class TrackBox extends CacheMap {
|
|
|
2741
2741
|
* Calculates list metrics
|
|
2742
2742
|
*/
|
|
2743
2743
|
recalculateMetrics(options) {
|
|
2744
|
-
const { alignment, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize: minBufferSize, scrollSize, stickyEnabled, itemConfigMap, enabledBufferOptimization, previousTotalSize, snapToItem, snapToItemAlign, deletedItemsMap, itemTransform } = options, roundedScrollSize = Math.round(scrollSize);
|
|
2744
|
+
const { alignment, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize: minBufferSize, scrollSize, stickyEnabled, itemConfigMap, enabledBufferOptimization, previousTotalSize, snapToItem, snapToItemAlign, deletedItemsMap, inverted, itemTransform } = options, roundedScrollSize = Math.round(scrollSize);
|
|
2745
2745
|
const trackBy = this._trackingPropertyName, bufferSize = Math.max(minBufferSize, this._bufferSize), { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, divides = this._divides, stickyPos = Math.floor(scrollSize) + this._scrollStartOffset, leftItemsOrRowsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
|
|
2746
2746
|
|| (typeof fromItemId === 'string' && fromItemId > '-1');
|
|
2747
2747
|
let leftItemsOffset = 0, rightItemsOffset = 0;
|
|
@@ -3194,6 +3194,7 @@ class TrackBox extends CacheMap {
|
|
|
3194
3194
|
rightItemLength,
|
|
3195
3195
|
rightItemsWeight,
|
|
3196
3196
|
scrollSize: actualScrollSize,
|
|
3197
|
+
maxScrollSize: totalSize,
|
|
3197
3198
|
leftSizeOfAddedItems,
|
|
3198
3199
|
sizeProperty,
|
|
3199
3200
|
stickyEnabled,
|
|
@@ -3208,6 +3209,7 @@ class TrackBox extends CacheMap {
|
|
|
3208
3209
|
isUpdating,
|
|
3209
3210
|
snapToItem,
|
|
3210
3211
|
snapToItemAlign,
|
|
3212
|
+
inverted,
|
|
3211
3213
|
itemTransform,
|
|
3212
3214
|
};
|
|
3213
3215
|
return metrics;
|
|
@@ -3259,7 +3261,7 @@ class TrackBox extends CacheMap {
|
|
|
3259
3261
|
return false;
|
|
3260
3262
|
}
|
|
3261
3263
|
generateDisplayCollection(items, actualItems, itemConfigMap, metrics) {
|
|
3262
|
-
const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, divides, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, leftLayoutOffset: layoutOffset, leftLayoutIndexOffset: layoutIndexOffset, renderItems: renderItemsLength, scrollSize, sizeProperty, stickyEnabled, stickyPos, startPosition, totalLength, startIndex, typicalItemSize, minItemSize, maxItemSize, snapToItem, snapToItemAlign, itemTransform, } = metrics, displayItems = [];
|
|
3264
|
+
const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, divides, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, leftLayoutOffset: layoutOffset, leftLayoutIndexOffset: layoutIndexOffset, renderItems: renderItemsLength, scrollSize, maxScrollSize, sizeProperty, stickyEnabled, stickyPos, startPosition, totalLength, startIndex, typicalItemSize, minItemSize, maxItemSize, snapToItem, snapToItemAlign, inverted, itemTransform, } = metrics, displayItems = [];
|
|
3263
3265
|
if (items.length) {
|
|
3264
3266
|
const trackBy = this._trackingPropertyName, actualSnippedPosition = stickyPos, isSnappingMethodAdvanced = this._isSnappingMethodAdvanced, deltaOffet = (isSnappingMethodAdvanced ? scrollSize : 0), scrollDirection = this._scrollDirection, boundsSize = isVertical ? height : width, actualEndSnippedPosition = scrollSize + boundsSize - this._scrollEndOffset;
|
|
3265
3267
|
let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, nexstStickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
|
|
@@ -3299,6 +3301,7 @@ class TrackBox extends CacheMap {
|
|
|
3299
3301
|
position: pos,
|
|
3300
3302
|
boundsSize,
|
|
3301
3303
|
scrollSize,
|
|
3304
|
+
maxScrollSize,
|
|
3302
3305
|
absoluteStartPosition,
|
|
3303
3306
|
absoluteStartPositionPercent,
|
|
3304
3307
|
absoluteEndPosition,
|
|
@@ -3329,6 +3332,7 @@ class TrackBox extends CacheMap {
|
|
|
3329
3332
|
tabIndex: i - layoutIndexOffset,
|
|
3330
3333
|
divides,
|
|
3331
3334
|
opacity: 1,
|
|
3335
|
+
inverted,
|
|
3332
3336
|
zIndex: Z_INDEX_1,
|
|
3333
3337
|
};
|
|
3334
3338
|
const itemData = collectionItem;
|
|
@@ -3375,6 +3379,7 @@ class TrackBox extends CacheMap {
|
|
|
3375
3379
|
position: pos,
|
|
3376
3380
|
boundsSize,
|
|
3377
3381
|
scrollSize,
|
|
3382
|
+
maxScrollSize,
|
|
3378
3383
|
absoluteStartPosition,
|
|
3379
3384
|
absoluteStartPositionPercent,
|
|
3380
3385
|
absoluteEndPosition,
|
|
@@ -3411,6 +3416,7 @@ class TrackBox extends CacheMap {
|
|
|
3411
3416
|
tabIndex: i - layoutIndexOffset,
|
|
3412
3417
|
divides,
|
|
3413
3418
|
opacity: 1,
|
|
3419
|
+
inverted,
|
|
3414
3420
|
zIndex: Z_INDEX_1,
|
|
3415
3421
|
};
|
|
3416
3422
|
const itemData = collectionItem;
|
|
@@ -3471,6 +3477,7 @@ class TrackBox extends CacheMap {
|
|
|
3471
3477
|
position: pos,
|
|
3472
3478
|
boundsSize,
|
|
3473
3479
|
scrollSize,
|
|
3480
|
+
maxScrollSize,
|
|
3474
3481
|
absoluteStartPosition,
|
|
3475
3482
|
absoluteStartPositionPercent,
|
|
3476
3483
|
absoluteEndPosition,
|
|
@@ -3509,6 +3516,7 @@ class TrackBox extends CacheMap {
|
|
|
3509
3516
|
opacity: 1,
|
|
3510
3517
|
zIndex: Z_INDEX_0,
|
|
3511
3518
|
fullSize,
|
|
3519
|
+
inverted,
|
|
3512
3520
|
};
|
|
3513
3521
|
if (snapped) {
|
|
3514
3522
|
config.zIndex = Z_INDEX_2;
|
|
@@ -3653,18 +3661,18 @@ class TrackBox extends CacheMap {
|
|
|
3653
3661
|
let first = null, last = null;
|
|
3654
3662
|
if (!!components) {
|
|
3655
3663
|
for (const comp of components) {
|
|
3656
|
-
const id = comp.instance.itemId ?? null, isVertical = comp.instance.item?.config?.isVertical, x = comp.instance.item?.measures?.x ?? 0, y = comp.instance.item?.measures?.y ?? 0, isFirst = comp.instance.item?.config?.isFirst ?? false, isLast = comp.instance.item?.config?.isLast ?? false,
|
|
3664
|
+
const id = comp.instance.itemId ?? null, isVertical = comp.instance.item?.config?.isVertical, inverted = comp.instance.item?.config.inverted ?? false, maxScrollSize = comp.instance.item?.measures.maxScrollSize ?? 0, { width, height } = comp.instance.getBounds(), x = comp.instance.item?.measures?.x ?? 0, xx = inverted ? (maxScrollSize - x) - width : x, y = comp.instance.item?.measures?.y ?? 0, isFirst = comp.instance.item?.config?.isFirst ?? false, isLast = comp.instance.item?.config?.isLast ?? false, pos = position;
|
|
3657
3665
|
if (isVertical && (pos >= y && pos < y + height)) {
|
|
3658
3666
|
return { id, x, y, width, height, isFirst, isLast };
|
|
3659
3667
|
}
|
|
3660
|
-
else if (!isVertical && (pos >=
|
|
3661
|
-
return { id, x, y, width, height, isFirst, isLast };
|
|
3668
|
+
else if (!isVertical && (pos >= xx && pos < xx + width)) {
|
|
3669
|
+
return { id, x: xx, y, width, height, isFirst, isLast };
|
|
3662
3670
|
}
|
|
3663
3671
|
if (isFirst) {
|
|
3664
|
-
first = { id, x, y, width, height, isFirst, isLast };
|
|
3672
|
+
first = { id, x: xx, y, width, height, isFirst, isLast };
|
|
3665
3673
|
}
|
|
3666
3674
|
else if (isLast) {
|
|
3667
|
-
last = { id, x, y, width, height, isFirst, isLast };
|
|
3675
|
+
last = { id, x: xx, y, width, height, isFirst, isLast };
|
|
3668
3676
|
}
|
|
3669
3677
|
}
|
|
3670
3678
|
}
|
|
@@ -4052,7 +4060,7 @@ const easeLinear = (t) => {
|
|
|
4052
4060
|
|
|
4053
4061
|
/**
|
|
4054
4062
|
* Animator
|
|
4055
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
4063
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/22.x/projects/ng-virtual-list/src/lib/utils/animator/animator.ts
|
|
4056
4064
|
* @author Evgenii Alexandrovich Grebennikov
|
|
4057
4065
|
* @email djonnyx@gmail.com
|
|
4058
4066
|
*/
|
|
@@ -4072,9 +4080,13 @@ class Animator {
|
|
|
4072
4080
|
_endValue = 0;
|
|
4073
4081
|
_prevPos = 0;
|
|
4074
4082
|
updateTo(end) {
|
|
4075
|
-
this.
|
|
4076
|
-
|
|
4077
|
-
|
|
4083
|
+
if (this.hasAnimation()) {
|
|
4084
|
+
this._startValue = this._prevPos;
|
|
4085
|
+
this._endValue = end;
|
|
4086
|
+
this._diff = this._endValue - this._startValue;
|
|
4087
|
+
return true;
|
|
4088
|
+
}
|
|
4089
|
+
return false;
|
|
4078
4090
|
}
|
|
4079
4091
|
animate(params) {
|
|
4080
4092
|
this.stop();
|
|
@@ -4106,6 +4118,9 @@ class Animator {
|
|
|
4106
4118
|
const frameTimestamp = t - prevTime, actualFrameTimestamp = frameTimestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : frameTimestamp;
|
|
4107
4119
|
prevTime = t;
|
|
4108
4120
|
this._prevPos = currentValue;
|
|
4121
|
+
if (isFinished) {
|
|
4122
|
+
this._animationId = -1;
|
|
4123
|
+
}
|
|
4109
4124
|
if (onUpdate !== undefined) {
|
|
4110
4125
|
const data = {
|
|
4111
4126
|
id,
|
|
@@ -4117,7 +4132,6 @@ class Animator {
|
|
|
4117
4132
|
onUpdate(data);
|
|
4118
4133
|
}
|
|
4119
4134
|
if (isFinished) {
|
|
4120
|
-
this._animationId = -1;
|
|
4121
4135
|
if (onComplete !== undefined) {
|
|
4122
4136
|
const data = {
|
|
4123
4137
|
id,
|
|
@@ -4154,7 +4168,7 @@ class Animator {
|
|
|
4154
4168
|
const SCROLL_VIEW_INVERSION = new InjectionToken('ScrollViewInversion');
|
|
4155
4169
|
const SCROLL_VIEW_OVERSCROLL_ENABLED = new InjectionToken('ScrollViewOverscrollEnabled');
|
|
4156
4170
|
const SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO = new InjectionToken('ScrollViewNormalizeValueFromZero');
|
|
4157
|
-
const TOP$1 = 'top', LEFT$
|
|
4171
|
+
const TOP$1 = 'top', LEFT$2 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MIN_DELTA = 0.1, MAX_VELOCITY_TIMESTAMP = 100, MAX_VELOCITIES_LENGTH = 10, MIN_ACCELERATION = 0.001, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
|
|
4158
4172
|
const MAX_ITERATIONS_FOR_AVERAGE_CALCULATIONS = 5, INSTANT_VELOCITY_SCALE = 1000;
|
|
4159
4173
|
const SCROLL_EVENT$1 = new Event(SCROLLER_SCROLL);
|
|
4160
4174
|
|
|
@@ -4284,6 +4298,8 @@ class BaseScrollView {
|
|
|
4284
4298
|
isVertical;
|
|
4285
4299
|
grabbing = signal(false, /* @ts-ignore */
|
|
4286
4300
|
...(ngDevMode ? [{ debugName: "grabbing" }] : /* istanbul ignore next */ []));
|
|
4301
|
+
langTextDir = input(TextDirections.LTR, /* @ts-ignore */
|
|
4302
|
+
...(ngDevMode ? [{ debugName: "langTextDir" }] : /* istanbul ignore next */ []));
|
|
4287
4303
|
_inversion = inject(SCROLL_VIEW_INVERSION);
|
|
4288
4304
|
_overscrollEnabled = inject(SCROLL_VIEW_OVERSCROLL_ENABLED);
|
|
4289
4305
|
_$updateScrollBar = new Subject();
|
|
@@ -4449,7 +4465,7 @@ class BaseScrollView {
|
|
|
4449
4465
|
}
|
|
4450
4466
|
}
|
|
4451
4467
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: BaseScrollView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: BaseScrollView, isStandalone: true, selector: "base-scroll-view", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, alignmentStartOffset: { classPropertyName: "alignmentStartOffset", publicName: "alignmentStartOffset", isSignal: true, isRequired: false, transformFunction: null }, alignmentEndOffset: { classPropertyName: "alignmentEndOffset", publicName: "alignmentEndOffset", isSignal: true, isRequired: false, transformFunction: null }, isInfinity: { classPropertyName: "isInfinity", publicName: "isInfinity", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true });
|
|
4468
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: BaseScrollView, isStandalone: true, selector: "base-scroll-view", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, alignmentStartOffset: { classPropertyName: "alignmentStartOffset", publicName: "alignmentStartOffset", isSignal: true, isRequired: false, transformFunction: null }, alignmentEndOffset: { classPropertyName: "alignmentEndOffset", publicName: "alignmentEndOffset", isSignal: true, isRequired: false, transformFunction: null }, isInfinity: { classPropertyName: "isInfinity", publicName: "isInfinity", isSignal: true, isRequired: false, transformFunction: null }, langTextDir: { classPropertyName: "langTextDir", publicName: "langTextDir", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true });
|
|
4453
4469
|
}
|
|
4454
4470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: BaseScrollView, decorators: [{
|
|
4455
4471
|
type: Component,
|
|
@@ -4457,7 +4473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4457
4473
|
selector: 'base-scroll-view',
|
|
4458
4474
|
template: '',
|
|
4459
4475
|
}]
|
|
4460
|
-
}], ctorParameters: () => [], propDecorators: { scrollContent: [{ type: i0.ViewChild, args: ['scrollContent', { isSignal: true }] }], scrollViewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], alignmentStartOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignmentStartOffset", required: false }] }], alignmentEndOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignmentEndOffset", required: false }] }], isInfinity: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInfinity", required: false }] }] } });
|
|
4476
|
+
}], ctorParameters: () => [], propDecorators: { scrollContent: [{ type: i0.ViewChild, args: ['scrollContent', { isSignal: true }] }], scrollViewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], alignmentStartOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignmentStartOffset", required: false }] }], alignmentEndOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignmentEndOffset", required: false }] }], isInfinity: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInfinity", required: false }] }], langTextDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "langTextDir", required: false }] }] } });
|
|
4461
4477
|
|
|
4462
4478
|
/**
|
|
4463
4479
|
* ScrollingDirection
|
|
@@ -4547,10 +4563,32 @@ class NgScrollView extends BaseScrollView {
|
|
|
4547
4563
|
get averageVelocity() { return this._$averageVelocity.getValue(); }
|
|
4548
4564
|
_measureVelocityTimestamp = Date.now();
|
|
4549
4565
|
_measureVelocityLastPosition = this.isVertical() ? this._y : this._x;
|
|
4550
|
-
|
|
4566
|
+
_startPositionX = 0;
|
|
4567
|
+
_startPositionY = 0;
|
|
4568
|
+
set startPosition(v) {
|
|
4569
|
+
const isVertical = this.isVertical(), c = isVertical ? this._startPositionY : this._startPositionX;
|
|
4570
|
+
if (v !== c) {
|
|
4571
|
+
if (isVertical) {
|
|
4572
|
+
this._startPositionY = v;
|
|
4573
|
+
}
|
|
4574
|
+
else {
|
|
4575
|
+
this._startPositionX = v;
|
|
4576
|
+
}
|
|
4577
|
+
}
|
|
4578
|
+
}
|
|
4579
|
+
get startPosition() {
|
|
4580
|
+
if (this.isVertical()) {
|
|
4581
|
+
return this._startPositionY;
|
|
4582
|
+
}
|
|
4583
|
+
return this._startPositionX;
|
|
4584
|
+
}
|
|
4551
4585
|
_animator = new Animator();
|
|
4552
4586
|
_interactive = true;
|
|
4587
|
+
_horizontalAxisInvertion;
|
|
4588
|
+
get inverted() { return this._horizontalAxisInvertion(); }
|
|
4553
4589
|
_overscrollIteration = 0;
|
|
4590
|
+
_overscrollStartIteration = 0;
|
|
4591
|
+
_overscrollApplied = false;
|
|
4554
4592
|
set x(v) {
|
|
4555
4593
|
this.setX(v);
|
|
4556
4594
|
}
|
|
@@ -4590,7 +4628,7 @@ class NgScrollView extends BaseScrollView {
|
|
|
4590
4628
|
_delta = 0;
|
|
4591
4629
|
set delta(v) {
|
|
4592
4630
|
this._delta = v;
|
|
4593
|
-
this.
|
|
4631
|
+
this.startPosition += v;
|
|
4594
4632
|
}
|
|
4595
4633
|
set startLayoutOffset(v) {
|
|
4596
4634
|
if (this._startLayoutOffset !== v) {
|
|
@@ -4599,12 +4637,19 @@ class NgScrollView extends BaseScrollView {
|
|
|
4599
4637
|
}
|
|
4600
4638
|
}
|
|
4601
4639
|
get startLayoutOffset() { return this._startLayoutOffset; }
|
|
4640
|
+
_scrollDirectionValueX = 0;
|
|
4641
|
+
_scrollDirectionValueY = 0;
|
|
4602
4642
|
_intersectionComponentId = null;
|
|
4603
4643
|
_isAlignmentAnimation = false;
|
|
4604
4644
|
get animated() { return this._animator?.isAnimated ?? false; }
|
|
4605
4645
|
constructor() {
|
|
4606
4646
|
super();
|
|
4607
4647
|
let mouseCanceled = false, touchCanceled = false;
|
|
4648
|
+
this._horizontalAxisInvertion = computed(() => {
|
|
4649
|
+
const isVertical = this.isVertical(), langTextDir = this.langTextDir();
|
|
4650
|
+
return !isVertical && langTextDir === TextDirections.RTL;
|
|
4651
|
+
}, /* @ts-ignore */
|
|
4652
|
+
...(ngDevMode ? [{ debugName: "_horizontalAxisInvertion" }] : /* istanbul ignore next */ []));
|
|
4608
4653
|
const $viewportBounds = toObservable(this.viewportBounds);
|
|
4609
4654
|
$viewportBounds.pipe(takeUntilDestroyed(), debounceTime(0), tap(() => {
|
|
4610
4655
|
this._isMoving = false;
|
|
@@ -4622,17 +4667,20 @@ class NgScrollView extends BaseScrollView {
|
|
|
4622
4667
|
const $wheel = this.$wheel;
|
|
4623
4668
|
$wheel.pipe(takeUntilDestroyed(), switchMap$1(v => of(this.averageVelocity)), debounceTime(100), tap(v => {
|
|
4624
4669
|
this.snapWithInitialForceIfNecessary(v);
|
|
4670
|
+
this._overscrollIteration = this._overscrollStartIteration = 0;
|
|
4671
|
+
this._overscrollApplied = false;
|
|
4625
4672
|
this._scrollDirection.clear();
|
|
4673
|
+
this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
|
|
4626
4674
|
})).subscribe();
|
|
4627
4675
|
const $viewport = toObservable(this.scrollViewport).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), map(v => v.nativeElement)), $content = toObservable(this.scrollContent).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), map(v => v.nativeElement)), $wheelEmitter = this._inversion ? $viewport : $content;
|
|
4628
4676
|
$wheelEmitter.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
|
|
4629
4677
|
return fromEvent(content, WHEEL, { passive: false }).pipe(filter$1(() => this._interactive), takeUntilDestroyed(this._destroyRef), tap(e => {
|
|
4630
4678
|
const isVertical = this.isVertical();
|
|
4631
4679
|
this.emitScrollableEvent();
|
|
4632
|
-
this.checkOverscroll(e);
|
|
4680
|
+
this.checkOverscroll(e, true);
|
|
4633
4681
|
this.stopScrolling(true);
|
|
4634
|
-
const scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, startPos = isVertical ? this._y : this._x, delta = isVertical ? e.deltaY : e.deltaX, dp = (startPos + delta), position = this.isInfinity() ? dp : (dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp);
|
|
4635
|
-
this.scroll({ [isVertical ? TOP$1 : LEFT$
|
|
4682
|
+
const scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, startPos = isVertical ? this._y : this._x, delta = isVertical ? e.deltaY : (e.deltaX * (this._horizontalAxisInvertion() ? -1 : 1)), dp = (startPos + delta), position = this.isInfinity() ? dp : (dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp);
|
|
4683
|
+
this.scroll({ [isVertical ? TOP$1 : LEFT$2]: position, behavior: INSTANT$1, userAction: true, blending: false, fireUpdate: true });
|
|
4636
4684
|
this._$wheel.next(delta);
|
|
4637
4685
|
}));
|
|
4638
4686
|
})).subscribe();
|
|
@@ -4672,7 +4720,10 @@ class NgScrollView extends BaseScrollView {
|
|
|
4672
4720
|
$content.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
|
|
4673
4721
|
return fromEvent(content, MOUSE_DOWN, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => this._interactive), switchMap$1(e => {
|
|
4674
4722
|
mouseCanceled = false;
|
|
4723
|
+
this._overscrollStartIteration = 0;
|
|
4724
|
+
this._overscrollApplied = false;
|
|
4675
4725
|
this._scrollDirection.clear();
|
|
4726
|
+
this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
|
|
4676
4727
|
this.cancelOverscroll();
|
|
4677
4728
|
this.onDragStart();
|
|
4678
4729
|
this.stopScrolling(true);
|
|
@@ -4684,23 +4735,34 @@ class NgScrollView extends BaseScrollView {
|
|
|
4684
4735
|
const inversion = this._inversion, isVertical = this.isVertical();
|
|
4685
4736
|
this._isMoving = true;
|
|
4686
4737
|
this.grabbing.set(true);
|
|
4687
|
-
this.
|
|
4688
|
-
|
|
4738
|
+
this._startPositionX = this.x;
|
|
4739
|
+
this._startPositionY = this.y;
|
|
4740
|
+
let prevClientPositionX = (e.clientX) * (this._horizontalAxisInvertion() ? -1 : 1), prevClientPositionY = e.clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
|
|
4689
4741
|
return fromEvent(window, MOUSE_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($mouseDragCancel), tap(e => {
|
|
4690
4742
|
this.checkOverscroll(e);
|
|
4691
4743
|
}), switchMap$1(e => {
|
|
4692
|
-
const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(
|
|
4693
|
-
|
|
4744
|
+
const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this._horizontalAxisInvertion(), e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
|
|
4745
|
+
prevClientPositionX = currentPosX;
|
|
4746
|
+
prevClientPositionY = currentPosY;
|
|
4747
|
+
this._scrollDirectionValueX += Math.abs(scrollDeltaX);
|
|
4748
|
+
this._scrollDirectionValueY += Math.abs(scrollDeltaY);
|
|
4694
4749
|
this.move(isVertical, position, true, true, true);
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4750
|
+
if (this.isInfinity()) {
|
|
4751
|
+
const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
|
|
4752
|
+
if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
|
|
4753
|
+
if (isVertical) {
|
|
4754
|
+
startClientPosY -= offset;
|
|
4755
|
+
}
|
|
4756
|
+
else {
|
|
4757
|
+
startClientPosX -= offset;
|
|
4758
|
+
}
|
|
4759
|
+
}
|
|
4698
4760
|
}
|
|
4699
4761
|
startTime = endTime;
|
|
4700
4762
|
return race([fromEvent(window, MOUSE_UP, { passive: false }), fromEvent(content, MOUSE_UP, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($mouseDragCancel), tap(e => {
|
|
4701
4763
|
mouseCanceled = true;
|
|
4702
4764
|
this.cancelOverscroll();
|
|
4703
|
-
const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(
|
|
4765
|
+
const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
|
|
4704
4766
|
this._isMoving = false;
|
|
4705
4767
|
this.grabbing.set(false);
|
|
4706
4768
|
if (!this.snapIfNecessary(v0, false) && this.scrollBehavior() !== BEHAVIOR_INSTANT) {
|
|
@@ -4750,7 +4812,10 @@ class NgScrollView extends BaseScrollView {
|
|
|
4750
4812
|
$content.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
|
|
4751
4813
|
return fromEvent(content, TOUCH_START, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(() => this._interactive), switchMap$1(e => {
|
|
4752
4814
|
touchCanceled = false;
|
|
4815
|
+
this._overscrollStartIteration = 0;
|
|
4816
|
+
this._overscrollApplied = false;
|
|
4753
4817
|
this._scrollDirection.clear();
|
|
4818
|
+
this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
|
|
4754
4819
|
this.cancelOverscroll();
|
|
4755
4820
|
this.onDragStart();
|
|
4756
4821
|
this.stopScrolling(true);
|
|
@@ -4762,23 +4827,34 @@ class NgScrollView extends BaseScrollView {
|
|
|
4762
4827
|
const inversion = this._inversion, isVertical = this.isVertical();
|
|
4763
4828
|
this._isMoving = true;
|
|
4764
4829
|
this.grabbing.set(true);
|
|
4765
|
-
this.
|
|
4766
|
-
|
|
4830
|
+
this._startPositionX = this.x;
|
|
4831
|
+
this._startPositionY = this.y;
|
|
4832
|
+
let prevClientPositionX = (e.touches[e.touches.length - 1].clientX) * (this._horizontalAxisInvertion() ? -1 : 1), prevClientPositionY = e.touches[e.touches.length - 1].clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
|
|
4767
4833
|
return fromEvent(window, TOUCH_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchCanceler), tap(e => {
|
|
4768
4834
|
this.checkOverscroll(e);
|
|
4769
4835
|
}), switchMap$1(e => {
|
|
4770
|
-
const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(
|
|
4771
|
-
|
|
4836
|
+
const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this._horizontalAxisInvertion(), e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
|
|
4837
|
+
prevClientPositionX = currentPosX;
|
|
4838
|
+
prevClientPositionY = currentPosY;
|
|
4839
|
+
this._scrollDirectionValueX += Math.abs(scrollDeltaX);
|
|
4840
|
+
this._scrollDirectionValueY += Math.abs(scrollDeltaY);
|
|
4772
4841
|
this.move(isVertical, position, true, true, true);
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4842
|
+
if (this.isInfinity()) {
|
|
4843
|
+
const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
|
|
4844
|
+
if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
|
|
4845
|
+
if (isVertical) {
|
|
4846
|
+
startClientPosY -= offset;
|
|
4847
|
+
}
|
|
4848
|
+
else {
|
|
4849
|
+
startClientPosX -= offset;
|
|
4850
|
+
}
|
|
4851
|
+
}
|
|
4776
4852
|
}
|
|
4777
4853
|
startTime = endTime;
|
|
4778
4854
|
return race([fromEvent(window, TOUCH_END, { passive: false }), fromEvent(content, TOUCH_END, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchCanceler), tap(e => {
|
|
4779
4855
|
touchCanceled = true;
|
|
4780
4856
|
this.cancelOverscroll();
|
|
4781
|
-
const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(
|
|
4857
|
+
const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
|
|
4782
4858
|
this._isMoving = false;
|
|
4783
4859
|
this.grabbing.set(false);
|
|
4784
4860
|
if (!this.snapIfNecessary(v0, false) && this.scrollBehavior() !== BEHAVIOR_INSTANT) {
|
|
@@ -4860,8 +4936,11 @@ class NgScrollView extends BaseScrollView {
|
|
|
4860
4936
|
}
|
|
4861
4937
|
return false;
|
|
4862
4938
|
}
|
|
4863
|
-
calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
|
|
4864
|
-
|
|
4939
|
+
calculatePosition(isVertical, enabled, axisInversion, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
|
|
4940
|
+
if (!enabled) {
|
|
4941
|
+
return { position: isVertical ? this._y : this._x, currentPos: null, endTime: Date.now(), scrollDelta: 0 };
|
|
4942
|
+
}
|
|
4943
|
+
const currentPos = (isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX) * (axisInversion ? -1 : 1), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = (isVertical ? this._startPositionY : this._startPositionX) + delta, position = this.isInfinity() ? dp : dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp, endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = (prevClientPosition === 0 || prevClientPosition === null) ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
|
|
4865
4944
|
this.calculateAcceleration(velocities, v0, timestamp);
|
|
4866
4945
|
return { position, currentPos, endTime, scrollDelta };
|
|
4867
4946
|
}
|
|
@@ -4890,7 +4969,7 @@ class NgScrollView extends BaseScrollView {
|
|
|
4890
4969
|
}
|
|
4891
4970
|
}
|
|
4892
4971
|
}
|
|
4893
|
-
checkOverscroll(e) {
|
|
4972
|
+
checkOverscroll(e, wheel = false) {
|
|
4894
4973
|
if (!this._overscrollEnabled || !this.overscrollEnabled()) {
|
|
4895
4974
|
if (e.cancelable) {
|
|
4896
4975
|
e.stopImmediatePropagation();
|
|
@@ -4900,14 +4979,35 @@ class NgScrollView extends BaseScrollView {
|
|
|
4900
4979
|
}
|
|
4901
4980
|
if (this._overscrollEnabled) {
|
|
4902
4981
|
if (this.isVertical()) {
|
|
4903
|
-
|
|
4982
|
+
if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
|
|
4983
|
+
this._overscrollStartIteration++;
|
|
4984
|
+
this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
|
|
4985
|
+
}
|
|
4986
|
+
else {
|
|
4987
|
+
if (wheel || this._overscrollApplied || this._scrollDirectionValueY > this._scrollDirectionValueX) {
|
|
4988
|
+
this._overscrollApplied = true;
|
|
4989
|
+
this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
|
|
4990
|
+
}
|
|
4991
|
+
}
|
|
4904
4992
|
}
|
|
4905
4993
|
else {
|
|
4906
|
-
|
|
4994
|
+
if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
|
|
4995
|
+
this._overscrollStartIteration++;
|
|
4996
|
+
this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
|
|
4997
|
+
}
|
|
4998
|
+
else {
|
|
4999
|
+
if (wheel || this._overscrollApplied || this._scrollDirectionValueX > this._scrollDirectionValueY) {
|
|
5000
|
+
this._overscrollApplied = true;
|
|
5001
|
+
this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
|
|
5002
|
+
}
|
|
5003
|
+
}
|
|
4907
5004
|
}
|
|
4908
5005
|
}
|
|
4909
5006
|
}
|
|
4910
5007
|
calculateVelocity(offsets, delta, timestamp, indexOffset = 10) {
|
|
5008
|
+
if (offsets.length > MAX_VELOCITIES_LENGTH) {
|
|
5009
|
+
offsets.shift();
|
|
5010
|
+
}
|
|
4911
5011
|
offsets.push([delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
|
|
4912
5012
|
const len = offsets.length, startIndex = len > indexOffset ? len - indexOffset : 0, lastVSign = calculateDirection(offsets), speedScale = this.scrollingSettings()?.speedScale ?? SPEED_SCALE;
|
|
4913
5013
|
let vSum = 0;
|
|
@@ -4923,7 +5023,10 @@ class NgScrollView extends BaseScrollView {
|
|
|
4923
5023
|
return { v0 };
|
|
4924
5024
|
}
|
|
4925
5025
|
calculateAcceleration(velocities, delta, timestamp, indexOffset = 10) {
|
|
4926
|
-
velocities.
|
|
5026
|
+
if (velocities.length > MAX_VELOCITIES_LENGTH) {
|
|
5027
|
+
velocities.shift();
|
|
5028
|
+
}
|
|
5029
|
+
velocities.push([Math.abs(delta) < MIN_DELTA ? 0 : delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
|
|
4927
5030
|
const len = velocities.length, startIndex = len > indexOffset ? len - indexOffset : 0;
|
|
4928
5031
|
let aSum = 0, prevV0, iteration = 0, lastVSign = calculateDirection(velocities);
|
|
4929
5032
|
const mass = this.scrollingSettings()?.mass ?? MASS;
|
|
@@ -4941,7 +5044,7 @@ class NgScrollView extends BaseScrollView {
|
|
|
4941
5044
|
iteration++;
|
|
4942
5045
|
}
|
|
4943
5046
|
const a0 = aSum * (this.scrollingSettings()?.frictionalForce ?? FRICTION_FORCE);
|
|
4944
|
-
return { a0 };
|
|
5047
|
+
return { a0: Math.abs(a0) < MIN_ACCELERATION ? 0 : a0 };
|
|
4945
5048
|
}
|
|
4946
5049
|
stopScrolling(force = false) {
|
|
4947
5050
|
if (this._isAlignmentAnimation && !force) {
|
|
@@ -4951,7 +5054,7 @@ class NgScrollView extends BaseScrollView {
|
|
|
4951
5054
|
this._animator.stop();
|
|
4952
5055
|
}
|
|
4953
5056
|
move(isVertical, position, blending = false, userAction = false, fireUpdate = true) {
|
|
4954
|
-
this.scroll({ [isVertical ? TOP$1 : LEFT$
|
|
5057
|
+
this.scroll({ [isVertical ? TOP$1 : LEFT$2]: position, behavior: INSTANT$1, blending, userAction, fireUpdate });
|
|
4955
5058
|
}
|
|
4956
5059
|
moveWithAcceleration(isVertical, position, v0, v, a0, timestamp) {
|
|
4957
5060
|
if (a0 !== 0 && timestamp < MAX_VELOCITY_TIMESTAMP) {
|
|
@@ -5247,7 +5350,7 @@ class NgScrollView extends BaseScrollView {
|
|
|
5247
5350
|
}
|
|
5248
5351
|
refreshCoordinate(x, y) {
|
|
5249
5352
|
const scrollContent = this.scrollContent()?.nativeElement;
|
|
5250
|
-
scrollContent.style.transform = matrix3d((this._inversion ? 1 : -1) * x + (this.isVertical() ? 0 : this._startLayoutOffset), (this._inversion ? 1 : -1) * y + (this.isVertical() ? this._startLayoutOffset : 0));
|
|
5353
|
+
scrollContent.style.transform = matrix3d((this._inversion ? 1 : -1) * x * (this._horizontalAxisInvertion() ? -1 : 1) + (this.isVertical() ? 0 : this._startLayoutOffset), (this._inversion ? 1 : -1) * y + (this.isVertical() ? this._startLayoutOffset : 0));
|
|
5251
5354
|
}
|
|
5252
5355
|
fireScrollEvent(userAction) {
|
|
5253
5356
|
this._$scroll.next(userAction);
|
|
@@ -5308,8 +5411,6 @@ class NgScrollBarComponent extends NgScrollView {
|
|
|
5308
5411
|
...(ngDevMode ? [{ debugName: "scrollbarMinSize" }] : /* istanbul ignore next */ []));
|
|
5309
5412
|
prepared = input(false, /* @ts-ignore */
|
|
5310
5413
|
...(ngDevMode ? [{ debugName: "prepared" }] : /* istanbul ignore next */ []));
|
|
5311
|
-
langTextDir = input(DEFAULT_LANG_TEXT_DIR, /* @ts-ignore */
|
|
5312
|
-
...(ngDevMode ? [{ debugName: "langTextDir" }] : /* istanbul ignore next */ []));
|
|
5313
5414
|
interactive = input(DEFAULT_SCROLLBAR_INTERACTIVE, /* @ts-ignore */
|
|
5314
5415
|
...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
5315
5416
|
overlapping = input(DEFAULT_OVERLAPPING_SCROLLBAR, /* @ts-ignore */
|
|
@@ -5418,7 +5519,7 @@ class NgScrollBarComponent extends NgScrollView {
|
|
|
5418
5519
|
if (!!el) {
|
|
5419
5520
|
const overlapping = this.overlapping(), langTextDir = this.langTextDir();
|
|
5420
5521
|
el.style[POSITION$1] = overlapping ? POSITION_ABSOLUTE : POSITION_RELATIVE;
|
|
5421
|
-
el.style[LEFT$
|
|
5522
|
+
el.style[LEFT$3] = overlapping && langTextDir === TextDirections.RTL ? '0' : UNSET$5;
|
|
5422
5523
|
el.style[RIGHT$1] = overlapping && langTextDir === TextDirections.LTR ? '0' : UNSET$5;
|
|
5423
5524
|
el.style[WIDTH] = overlapping ? SIZE_AUTO : SIZE_100_PERSENT;
|
|
5424
5525
|
}
|
|
@@ -5438,7 +5539,7 @@ class NgScrollBarComponent extends NgScrollView {
|
|
|
5438
5539
|
})).subscribe();
|
|
5439
5540
|
}
|
|
5440
5541
|
createDragEvent(userAction) {
|
|
5441
|
-
const isVertical = this.isVertical(), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, scrollPosition = isVertical ? this.
|
|
5542
|
+
const isVertical = this.isVertical(), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, scrollPosition = isVertical ? this.y : this.x, startOffset = this.startOffset(), endOffset = this.endOffset(), scrollContent = this.scrollContent()?.nativeElement, scrollViewport = this.scrollViewport()?.nativeElement;
|
|
5442
5543
|
if (!!scrollViewport && !!scrollContent) {
|
|
5443
5544
|
const contentSize = isVertical ? scrollContent.offsetHeight : scrollContent.offsetWidth, viewportSize = isVertical ? scrollViewport.offsetHeight : scrollViewport.offsetWidth, offsetSize = (scrollSize !== 0 ? (startOffset / scrollSize) : 0), positionSize = (scrollSize !== 0 ? (scrollPosition / scrollSize) : 0), maxSize = 1 - offsetSize, pos = (positionSize - offsetSize);
|
|
5444
5545
|
const event = {
|
|
@@ -5466,7 +5567,7 @@ class NgScrollBarComponent extends NgScrollView {
|
|
|
5466
5567
|
this._scrollBarService.click(event);
|
|
5467
5568
|
}
|
|
5468
5569
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgScrollBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5469
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgScrollBarComponent, isStandalone: false, selector: "ng-scroll-bar", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, thumbGradientPositions: { classPropertyName: "thumbGradientPositions", publicName: "thumbGradientPositions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, prepared: { classPropertyName: "prepared", publicName: "prepared", isSignal: true, isRequired: false, transformFunction: null },
|
|
5570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgScrollBarComponent, isStandalone: false, selector: "ng-scroll-bar", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, thumbGradientPositions: { classPropertyName: "thumbGradientPositions", publicName: "thumbGradientPositions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, prepared: { classPropertyName: "prepared", publicName: "prepared", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, overlapping: { classPropertyName: "overlapping", publicName: "overlapping", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrag: "onDrag", onDragEnd: "onDragEnd" }, providers: [
|
|
5470
5571
|
{ provide: SCROLL_VIEW_INVERSION, useValue: true },
|
|
5471
5572
|
{ provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: false },
|
|
5472
5573
|
{ provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: false },
|
|
@@ -5483,9 +5584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
5483
5584
|
NgScrollBarService,
|
|
5484
5585
|
NgScrollBarPublicService,
|
|
5485
5586
|
], standalone: false, template: "@let grab = grabbing();\r\n<div #scrollViewport class=\"track\" part=\"scrollbar-track\" [ngStyle]=\"styles()\" [ngClass]=\"{grabbing: grab}\">\r\n <div #scrollContent class=\"thumb\" part=\"scrollbar-thumb\" [class.horizontal]=\"!isVertical()\"\r\n (pointerdown)=\"click($event)\">\r\n <ng-container [ngTemplateOutlet]=\"thumbRenderer()\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultRenderer let-api=\"api\" let-width=\"width\" let-height=\"height\" let-fillPositions=\"fillPositions\"\r\n let-params=\"params\">\r\n <div class=\"shape\" part=\"scrollbar-thumb__shape\" [style.width.px]=\"width\" [style.height.px]=\"height\"></div>\r\n</ng-template>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;width:100%;height:100%}.track{position:relative;overflow:hidden;width:100%;height:100%;cursor:grab}.track.grabbing{cursor:grabbing}.track .thumb{display:block;position:absolute;list-style:none;padding:0;margin:0;overflow:hidden}.track .thumb.prepared{overflow:hidden}.track .thumb.horizontal{top:0}.track .thumb .shape{box-sizing:border-box;pointer-events:none;background-color:#818181;border-radius:0;overflow:hidden}.track.grabbing .thumb{cursor:grabbing}\n"] }]
|
|
5486
|
-
}], ctorParameters: () => [], propDecorators: { _defaultRenderer: [{ type: i0.ViewChild, args: ['defaultRenderer', { isSignal: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onDrag: [{ type: i0.Output, args: ["onDrag"] }], onDragEnd: [{ type: i0.Output, args: ["onDragEnd"] }], thumbGradientPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbGradientPositions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], scrollbarMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarMinSize", required: false }] }], prepared: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepared", required: false }] }],
|
|
5587
|
+
}], ctorParameters: () => [], propDecorators: { _defaultRenderer: [{ type: i0.ViewChild, args: ['defaultRenderer', { isSignal: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onDrag: [{ type: i0.Output, args: ["onDrag"] }], onDragEnd: [{ type: i0.Output, args: ["onDragEnd"] }], thumbGradientPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbGradientPositions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], scrollbarMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarMinSize", required: false }] }], prepared: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepared", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], overlapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlapping", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }] } });
|
|
5487
5588
|
|
|
5488
|
-
const RIGHT = 'right', DIR = 'dir';
|
|
5589
|
+
const LEFT$1 = 'left', RIGHT = 'right', DIR = 'dir';
|
|
5489
5590
|
/**
|
|
5490
5591
|
* LocaleSensitiveDirective
|
|
5491
5592
|
* Maximum performance for extremely large lists.
|
|
@@ -5503,14 +5604,15 @@ class LocaleSensitiveDirective {
|
|
|
5503
5604
|
constructor() {
|
|
5504
5605
|
const $langTextDir = toObservable(this.langTextDir), $listDir = toObservable(this.listDir);
|
|
5505
5606
|
combineLatest([$langTextDir, $listDir]).pipe(takeUntilDestroyed(), tap(([dir, listDir]) => {
|
|
5506
|
-
const element = this._elementRef.nativeElement
|
|
5507
|
-
element.setAttribute(DIR,
|
|
5508
|
-
if (dir === TextDirections.RTL
|
|
5607
|
+
const element = this._elementRef.nativeElement;
|
|
5608
|
+
element.setAttribute(DIR, dir);
|
|
5609
|
+
if (dir === TextDirections.RTL) {
|
|
5509
5610
|
element.style.textAlign = RIGHT;
|
|
5510
5611
|
element.classList.add(TextDirections.RTL);
|
|
5511
5612
|
element.classList.remove(TextDirections.LTR);
|
|
5512
5613
|
}
|
|
5513
5614
|
else {
|
|
5615
|
+
element.style.textAlign = LEFT$1;
|
|
5514
5616
|
element.classList.add(TextDirections.LTR);
|
|
5515
5617
|
element.classList.remove(TextDirections.RTL);
|
|
5516
5618
|
}
|
|
@@ -5580,8 +5682,6 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5580
5682
|
...(ngDevMode ? [{ debugName: "scrollbarShow" }] : /* istanbul ignore next */ []));
|
|
5581
5683
|
preparedSignal = signal(false, /* @ts-ignore */
|
|
5582
5684
|
...(ngDevMode ? [{ debugName: "preparedSignal" }] : /* istanbul ignore next */ []));
|
|
5583
|
-
langTextDir = signal(TextDirections.LTR, /* @ts-ignore */
|
|
5584
|
-
...(ngDevMode ? [{ debugName: "langTextDir" }] : /* istanbul ignore next */ []));
|
|
5585
5685
|
listStyles = signal({ perspectiveOrigin: 'center' }, /* @ts-ignore */
|
|
5586
5686
|
...(ngDevMode ? [{ debugName: "listStyles" }] : /* istanbul ignore next */ []));
|
|
5587
5687
|
_scrollBox = new ScrollBox$1();
|
|
@@ -5653,6 +5753,13 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5653
5753
|
super();
|
|
5654
5754
|
this._filterId = `${this._service.id}-${MOTION_BLUR}`;
|
|
5655
5755
|
this._filter = `url(#${this._filterId})`;
|
|
5756
|
+
this.$resizeViewport.pipe(takeUntilDestroyed(), debounceTime(0), tap(() => {
|
|
5757
|
+
this.snapIfNeed();
|
|
5758
|
+
}), switchMap$1(() => {
|
|
5759
|
+
return this.$scroll.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
|
|
5760
|
+
this.snapIfNeed();
|
|
5761
|
+
}));
|
|
5762
|
+
})).subscribe();
|
|
5656
5763
|
const $filter = toObservable(this.filter), $motionBlur = toObservable(this.motionBlur), $maxMotionBlur = toObservable(this.maxMotionBlur), $motionBlurEnabled = toObservable(this.motionBlurEnabled), $isVertical = toObservable(this.isVertical);
|
|
5657
5764
|
const $scrollbarScroll = this.$scrollbarScroll;
|
|
5658
5765
|
$scrollbarScroll.pipe(takeUntilDestroyed(), debounceTime(50), tap(() => {
|
|
@@ -5666,10 +5773,6 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5666
5773
|
}), debounceTime(50), tap(([, , filter, ,]) => {
|
|
5667
5774
|
filter.nativeElement.setStdDeviation(0, 0);
|
|
5668
5775
|
})).subscribe();
|
|
5669
|
-
this._service.$langTextDir.pipe(tap(v => {
|
|
5670
|
-
takeUntilDestroyed(this._destroyRef),
|
|
5671
|
-
this.langTextDir.set(v);
|
|
5672
|
-
})).subscribe();
|
|
5673
5776
|
const $prepare = toObservable(this.preparedSignal);
|
|
5674
5777
|
$prepare.pipe(takeUntilDestroyed(), filter$1(v => !!v), tap(() => {
|
|
5675
5778
|
this.updateScrollBarHandler(true, false, true);
|
|
@@ -5704,9 +5807,9 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5704
5807
|
});
|
|
5705
5808
|
}
|
|
5706
5809
|
recalculatePerspective() {
|
|
5707
|
-
const isVertical = this.isVertical(), scrollSize = (isVertical ? this.scrollTop : this.scrollLeft) - this._startLayoutOffset, { width, height } = this.viewportBounds();
|
|
5810
|
+
const isVertical = this.isVertical(), inverted = this._horizontalAxisInvertion(), scrollSize = (isVertical ? this.scrollTop : this.scrollLeft) - this._startLayoutOffset, maxScrollSize = isVertical ? this.scrollHeight : this.scrollWidth, { width, height } = this.viewportBounds();
|
|
5708
5811
|
this.listStyles.set({
|
|
5709
|
-
perspectiveOrigin: `${isVertical ? width * .5 : (scrollSize + width * .5)}${PX$1} ${isVertical ? (scrollSize + height * .5) : height * .5}${PX$1}`
|
|
5812
|
+
perspectiveOrigin: `${isVertical ? width * .5 : (inverted ? ((maxScrollSize - scrollSize) + width * .5 - this.startOffset()) : (scrollSize + width * .5))}${PX$1} ${isVertical ? (inverted ? ((maxScrollSize - scrollSize) + height * .5) : (scrollSize + height * .5)) : height * .5}${PX$1}`
|
|
5710
5813
|
});
|
|
5711
5814
|
}
|
|
5712
5815
|
onResizeViewport() {
|
|
@@ -5719,6 +5822,7 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5719
5822
|
this.viewportBounds.set(bounds);
|
|
5720
5823
|
this.updateScrollBar();
|
|
5721
5824
|
this._$resizeViewport.next(bounds);
|
|
5825
|
+
this.recalculatePerspective();
|
|
5722
5826
|
}
|
|
5723
5827
|
}
|
|
5724
5828
|
onResizeContent(value = null) {
|
|
@@ -5734,6 +5838,7 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5734
5838
|
this.contentBounds.set(bounds);
|
|
5735
5839
|
this.updateScrollBar();
|
|
5736
5840
|
this._$resizeContent.next(bounds);
|
|
5841
|
+
this.recalculatePerspective();
|
|
5737
5842
|
}
|
|
5738
5843
|
}
|
|
5739
5844
|
updateScrollBarHandler(update = false, blending = true, fireUpdate = false) {
|
|
@@ -5901,7 +6006,7 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
5901
6006
|
{ provide: SCROLL_VIEW_INVERSION, useValue: false },
|
|
5902
6007
|
{ provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
|
|
5903
6008
|
{ provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: true },
|
|
5904
|
-
], viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "@let filtered = motionBlurEnabled();\r\n<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <filter [id]=\"_filterId\">\r\n <feGaussianBlur #filter></feGaussianBlur>\r\n </filter>\r\n <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"filtered\" [style.filter]=\"filtered ? _filter : 'unset'\">\r\n <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\"\r\n [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n [ngClass]=\"actualClasses()\" [ngStyle]=\"listStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </foreignObject>\r\n </svg>\r\n @if (scrollbarEnabled()) {\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [renderer]=\"scrollbarThumbRenderer()\"\r\n [thickness]=\"scrollbarThickness()\" [params]=\"scrollbarThumbParams()\" [loading]=\"loading()\" [overlapping]=\"overlappingScrollbar()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [prepared]=\"prepared\" [interactive]=\"scrollbarInteractive()\"\r\n [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\" [startOffset]=\"startOffset()\" [langTextDir]=\"langTextDir()\"\r\n [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollbarMinSize]=\"scrollbarMinSize()\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n }\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "thumbGradientPositions", "size", "thickness", "scrollbarMinSize", "prepared", "
|
|
6009
|
+
], viewQueries: [{ propertyName: "filter", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "@let filtered = motionBlurEnabled();\r\n<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <filter [id]=\"_filterId\">\r\n <feGaussianBlur #filter></feGaussianBlur>\r\n </filter>\r\n <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"filtered\" [style.filter]=\"filtered ? _filter : 'unset'\">\r\n <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\"\r\n [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n [ngClass]=\"actualClasses()\" [ngStyle]=\"listStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </foreignObject>\r\n </svg>\r\n @if (scrollbarEnabled()) {\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [langTextDir]=\"langTextDir()\" [size]=\"thumbSize()\" [renderer]=\"scrollbarThumbRenderer()\"\r\n [thickness]=\"scrollbarThickness()\" [params]=\"scrollbarThumbParams()\" [loading]=\"loading()\" [overlapping]=\"overlappingScrollbar()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [prepared]=\"prepared\" [interactive]=\"scrollbarInteractive()\"\r\n [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\" [startOffset]=\"startOffset()\" [langTextDir]=\"langTextDir()\"\r\n [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollbarMinSize]=\"scrollbarMinSize()\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n }\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "thumbGradientPositions", "size", "thickness", "scrollbarMinSize", "prepared", "interactive", "overlapping", "show", "params", "renderer"], outputs: ["onDrag", "onDragEnd"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
|
|
5905
6010
|
}
|
|
5906
6011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgScrollerComponent, decorators: [{
|
|
5907
6012
|
type: Component,
|
|
@@ -5909,7 +6014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
5909
6014
|
{ provide: SCROLL_VIEW_INVERSION, useValue: false },
|
|
5910
6015
|
{ provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
|
|
5911
6016
|
{ provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: true },
|
|
5912
|
-
], standalone: false, template: "@let filtered = motionBlurEnabled();\r\n<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <filter [id]=\"_filterId\">\r\n <feGaussianBlur #filter></feGaussianBlur>\r\n </filter>\r\n <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"filtered\" [style.filter]=\"filtered ? _filter : 'unset'\">\r\n <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\"\r\n [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n [ngClass]=\"actualClasses()\" [ngStyle]=\"listStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </foreignObject>\r\n </svg>\r\n @if (scrollbarEnabled()) {\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [renderer]=\"scrollbarThumbRenderer()\"\r\n [thickness]=\"scrollbarThickness()\" [params]=\"scrollbarThumbParams()\" [loading]=\"loading()\" [overlapping]=\"overlappingScrollbar()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [prepared]=\"prepared\" [interactive]=\"scrollbarInteractive()\"\r\n [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\" [startOffset]=\"startOffset()\" [langTextDir]=\"langTextDir()\"\r\n [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollbarMinSize]=\"scrollbarMinSize()\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n }\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"] }]
|
|
6017
|
+
], standalone: false, template: "@let filtered = motionBlurEnabled();\r\n<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <filter [id]=\"_filterId\">\r\n <feGaussianBlur #filter></feGaussianBlur>\r\n </filter>\r\n <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"filtered\" [style.filter]=\"filtered ? _filter : 'unset'\">\r\n <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\"\r\n [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n [ngClass]=\"actualClasses()\" [ngStyle]=\"listStyles()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </foreignObject>\r\n </svg>\r\n @if (scrollbarEnabled()) {\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [langTextDir]=\"langTextDir()\" [size]=\"thumbSize()\" [renderer]=\"scrollbarThumbRenderer()\"\r\n [thickness]=\"scrollbarThickness()\" [params]=\"scrollbarThumbParams()\" [loading]=\"loading()\" [overlapping]=\"overlappingScrollbar()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [prepared]=\"prepared\" [interactive]=\"scrollbarInteractive()\"\r\n [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\" [startOffset]=\"startOffset()\" [langTextDir]=\"langTextDir()\"\r\n [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollbarMinSize]=\"scrollbarMinSize()\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n }\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"] }]
|
|
5913
6018
|
}], ctorParameters: () => [], propDecorators: { scrollBar: [{
|
|
5914
6019
|
type: ViewChild,
|
|
5915
6020
|
args: ['scrollBar', { read: NgScrollBarComponent }]
|
|
@@ -5929,6 +6034,7 @@ const createItemData = (data, isVertical, bounds, boundsSize, dynamic, divides,
|
|
|
5929
6034
|
measures: {
|
|
5930
6035
|
position: 0,
|
|
5931
6036
|
scrollSize: 0,
|
|
6037
|
+
maxScrollSize: 0,
|
|
5932
6038
|
size: itemSize,
|
|
5933
6039
|
row: {
|
|
5934
6040
|
size: itemSize,
|
|
@@ -5988,6 +6094,7 @@ const createItemData = (data, isVertical, bounds, boundsSize, dynamic, divides,
|
|
|
5988
6094
|
fullSize: false,
|
|
5989
6095
|
layoutIndexOffset: 0,
|
|
5990
6096
|
totalItems: 0,
|
|
6097
|
+
inverted: false,
|
|
5991
6098
|
},
|
|
5992
6099
|
};
|
|
5993
6100
|
};
|
|
@@ -6214,8 +6321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
6214
6321
|
*/
|
|
6215
6322
|
class NgPrerenderScrollerComponent extends BaseScrollView {
|
|
6216
6323
|
scrollBar;
|
|
6217
|
-
langTextDir = signal(TextDirections.LTR, /* @ts-ignore */
|
|
6218
|
-
...(ngDevMode ? [{ debugName: "langTextDir" }] : /* istanbul ignore next */ []));
|
|
6219
6324
|
scrollbarEnabled = input(DEFAULT_SCROLLBAR_ENABLED, /* @ts-ignore */
|
|
6220
6325
|
...(ngDevMode ? [{ debugName: "scrollbarEnabled" }] : /* istanbul ignore next */ []));
|
|
6221
6326
|
classes = input({}, /* @ts-ignore */
|
|
@@ -7686,19 +7791,22 @@ class NgVirtualListComponent {
|
|
|
7686
7791
|
}
|
|
7687
7792
|
const scroller = this._scrollerComponent();
|
|
7688
7793
|
if (!!scroller) {
|
|
7689
|
-
const { width, height } = this._bounds(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, viewportSize = isVertical ? height : width, elementSize = isVertical ? elementHeight : elementWidth;
|
|
7794
|
+
const { width, height } = this._bounds(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, viewportSize = isVertical ? height : width, maxPosition = isVertical ? scroller.scrollHeight : scroller.scrollWidth, elementSize = isVertical ? elementHeight : elementWidth;
|
|
7690
7795
|
let pos = Number.NaN;
|
|
7691
7796
|
switch (align) {
|
|
7692
7797
|
case FocusAlignments.START: {
|
|
7693
|
-
|
|
7798
|
+
const p = position + scroller.startLayoutOffset;
|
|
7799
|
+
pos = scroller.inverted ? (maxPosition - p) : p;
|
|
7694
7800
|
break;
|
|
7695
7801
|
}
|
|
7696
7802
|
case FocusAlignments.CENTER: {
|
|
7697
|
-
|
|
7803
|
+
const p = position - (viewportSize - elementSize) * .5 + scroller.startLayoutOffset;
|
|
7804
|
+
pos = scroller.inverted ? (maxPosition - p) : p;
|
|
7698
7805
|
break;
|
|
7699
7806
|
}
|
|
7700
7807
|
case FocusAlignments.END: {
|
|
7701
|
-
|
|
7808
|
+
const p = position - (viewportSize - elementSize) + scroller.startLayoutOffset;
|
|
7809
|
+
pos = scroller.inverted ? (maxPosition - p) : p;
|
|
7702
7810
|
break;
|
|
7703
7811
|
}
|
|
7704
7812
|
case FocusAlignments.NONE:
|
|
@@ -7710,7 +7818,7 @@ class NgVirtualListComponent {
|
|
|
7710
7818
|
this._trackBox.preventScrollSnapping(true);
|
|
7711
7819
|
const params = {
|
|
7712
7820
|
[this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior, snap: false, normalize: true,
|
|
7713
|
-
fireUpdate:
|
|
7821
|
+
fireUpdate: true, blending: false, userAction: false,
|
|
7714
7822
|
duration: this.snapToItem() ? Math.max(this.animationParams().scrollToItem, this.animationParams().navigateToItem) : this.animationParams().navigateToItem,
|
|
7715
7823
|
};
|
|
7716
7824
|
scroller.scrollTo(params);
|
|
@@ -7804,10 +7912,9 @@ class NgVirtualListComponent {
|
|
|
7804
7912
|
this.onSnapItem.emit(id);
|
|
7805
7913
|
})).subscribe();
|
|
7806
7914
|
this._service.$tick.pipe(takeUntilDestroyed(), tap(() => {
|
|
7807
|
-
this.
|
|
7808
|
-
|
|
7809
|
-
|
|
7810
|
-
this.checkBoundsOfElements();
|
|
7915
|
+
if (this.dynamicSize() === true) {
|
|
7916
|
+
this.checkBoundsOfElements();
|
|
7917
|
+
}
|
|
7811
7918
|
this._scrollerComponent()?.tick();
|
|
7812
7919
|
})).subscribe();
|
|
7813
7920
|
const $scrollerComponent = toObservable(this._scrollerComponent), $resizeViewport = $scrollerComponent.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(scroller => scroller.$resizeViewport)), $resizeContent = $scrollerComponent.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(scroller => scroller.$resizeContent));
|
|
@@ -8189,7 +8296,12 @@ class NgVirtualListComponent {
|
|
|
8189
8296
|
return isSpreadingMode(spreadingMode, SpreadingModes.INFINITY) ? false : scrollbarEnabled;
|
|
8190
8297
|
}, /* @ts-ignore */
|
|
8191
8298
|
...(ngDevMode ? [{ debugName: "_actualScrollbarEnabled" }] : /* istanbul ignore next */ []));
|
|
8192
|
-
const $alignment = toObservable(this._actualAlignment), $precalculatedScrollStartOffset = toObservable(this._precalculatedScrollStartOffset), $precalculatedScrollEndOffset = toObservable(this._precalculatedScrollEndOffset), $listBounds = toObservable(this._listBounds).pipe(filter$1(b => !!b)), $scrollSize = this._$scrollSize.asObservable(), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $snapToItem = toObservable(this.snapToItem), $snapToItemAlign = toObservable(this.snapToItemAlign), $stickyEnabled = toObservable(this.stickyEnabled), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $collapsingMode = toObservable(this.collapsingMode), $selectingMode = toObservable(this.selectingMode), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $itemTransform = toObservable(this.itemTransform), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = this._service.$cacheVersion;
|
|
8299
|
+
const $alignment = toObservable(this._actualAlignment), $precalculatedScrollStartOffset = toObservable(this._precalculatedScrollStartOffset), $precalculatedScrollEndOffset = toObservable(this._precalculatedScrollEndOffset), $listBounds = toObservable(this._listBounds).pipe(filter$1(b => !!b)), $scrollSize = this._$scrollSize.asObservable(), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $snapToItem = toObservable(this.snapToItem), $snapToItemAlign = toObservable(this.snapToItemAlign), $stickyEnabled = toObservable(this.stickyEnabled), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $collapsingMode = toObservable(this.collapsingMode), $selectingMode = toObservable(this.selectingMode), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $langTextDir = toObservable(this.langTextDir), $itemTransform = toObservable(this.itemTransform), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = this._service.$cacheVersion;
|
|
8300
|
+
combineLatest([$isVertical, $langTextDir, $itemTransform]).pipe(takeUntilDestroyed(), debounceTime(0), tap(([isVertical, langTextDir, itemTransform]) => {
|
|
8301
|
+
if (langTextDir === TextDirections.RTL && !isVertical && itemTransform) {
|
|
8302
|
+
throw Error('Currently, converting right-to-left items in horizontal lists is not possible.');
|
|
8303
|
+
}
|
|
8304
|
+
})).subscribe();
|
|
8193
8305
|
$snapToItem.pipe(takeUntilDestroyed(), tap(v => {
|
|
8194
8306
|
this._service.snapToItem = v;
|
|
8195
8307
|
})).subscribe();
|
|
@@ -8250,6 +8362,9 @@ class NgVirtualListComponent {
|
|
|
8250
8362
|
actualItems.push(item);
|
|
8251
8363
|
}
|
|
8252
8364
|
const normalizedCollection = normalizeCollection(actualItems, itemConfigMap, trackBy, divides);
|
|
8365
|
+
if (this._scrollerComponent()?.inverted) {
|
|
8366
|
+
normalizedCollection.reverse();
|
|
8367
|
+
}
|
|
8253
8368
|
this._actualItems.set(normalizedCollection);
|
|
8254
8369
|
})).subscribe();
|
|
8255
8370
|
$isVertical.pipe(takeUntilDestroyed(), tap(v => {
|
|
@@ -8371,20 +8486,21 @@ class NgVirtualListComponent {
|
|
|
8371
8486
|
if (!!scroller) {
|
|
8372
8487
|
const isInfinity = this._isInfinity(), collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable || isChunkLoading, fireUpdate = !this._readyForShow || this._$scrollingTo.getValue(), fireUpdateAtEdges = fireUpdate || !isInfinity, useAnimations = !isInfinity && readyForAnimations && prevScrollable;
|
|
8373
8488
|
if (this._readyForShow || (cachable && cached)) {
|
|
8374
|
-
const currentScrollSize = (isVertical ? scroller.scrollTop : scroller.scrollLeft);
|
|
8375
|
-
let actualScrollSize = !this._readyForShow && snapScrollToEnd ?
|
|
8489
|
+
const inverted = scroller.inverted, currentScrollSize = (isVertical ? scroller.scrollTop : scroller.scrollLeft), maxScrollSize = (isVertical ? scroller.scrollHeight : scroller.scrollWidth);
|
|
8490
|
+
let actualScrollSize = !this._readyForShow && snapScrollToEnd ? maxScrollSize :
|
|
8376
8491
|
(isVertical ? scroller.scrollTop : scroller.scrollLeft), leftLayoutOffset = 0, displayItems;
|
|
8377
|
-
const { width, height } = bounds,
|
|
8492
|
+
const { width, height } = bounds, opts = {
|
|
8378
8493
|
alignment, bounds: { width, height }, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize,
|
|
8379
|
-
scrollSize: actualScrollSize, stickyEnabled, enabledBufferOptimization,
|
|
8494
|
+
scrollSize: inverted ? maxScrollSize - actualScrollSize : actualScrollSize, stickyEnabled, enabledBufferOptimization,
|
|
8495
|
+
snapToItem, snapToItemAlign, inverted, itemTransform,
|
|
8380
8496
|
};
|
|
8381
8497
|
if (snapScrollToEnd && !this._readyForShow) {
|
|
8382
|
-
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
|
|
8498
|
+
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? maxScrollSize - actualScrollSize : actualScrollSize });
|
|
8383
8499
|
displayItems = calculatedDisplayItems;
|
|
8384
8500
|
totalSize = calculatedTotalSize1;
|
|
8385
8501
|
leftLayoutOffset = leftLayoutOffset1;
|
|
8386
8502
|
if (!!itemTransform && dynamicSize && this._trackBox.delta !== 0) {
|
|
8387
|
-
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize + this._trackBox.delta });
|
|
8503
|
+
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? (maxScrollSize - actualScrollSize + this._trackBox.delta) : (actualScrollSize + this._trackBox.delta) });
|
|
8388
8504
|
displayItems = calculatedDisplayItems;
|
|
8389
8505
|
totalSize = calculatedTotalSize1;
|
|
8390
8506
|
leftLayoutOffset = leftLayoutOffset1;
|
|
@@ -8396,7 +8512,7 @@ class NgVirtualListComponent {
|
|
|
8396
8512
|
totalSize = calculatedTotalSize;
|
|
8397
8513
|
leftLayoutOffset = leftLayoutOffset1;
|
|
8398
8514
|
if (!!itemTransform && dynamicSize && this._trackBox.delta !== 0) {
|
|
8399
|
-
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize + this._trackBox.delta });
|
|
8515
|
+
const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? (maxScrollSize - actualScrollSize + this._trackBox.delta) : (actualScrollSize + this._trackBox.delta) });
|
|
8400
8516
|
displayItems = calculatedDisplayItems;
|
|
8401
8517
|
totalSize = calculatedTotalSize;
|
|
8402
8518
|
leftLayoutOffset = leftLayoutOffset1;
|
|
@@ -8420,18 +8536,48 @@ class NgVirtualListComponent {
|
|
|
8420
8536
|
this.updateOffsetsByAllignment();
|
|
8421
8537
|
scroller.delta = delta;
|
|
8422
8538
|
prevScrollable = scroller.scrollable;
|
|
8423
|
-
if (
|
|
8424
|
-
(snapScrollToStart &&
|
|
8425
|
-
|
|
8539
|
+
if (!scroller.grabbing()) {
|
|
8540
|
+
if ((snapScrollToStart && this._trackBox.isSnappedToStart && scroller.scrollable) ||
|
|
8541
|
+
(snapScrollToStart && currentScrollSize <= MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
|
|
8542
|
+
if (currentScrollSize !== roundedScrollPositionAfterUpdate) {
|
|
8543
|
+
this._trackBox.clearDelta();
|
|
8544
|
+
if (this._readyForShow) {
|
|
8545
|
+
this.emitScrollEvent(true, false, userAction);
|
|
8546
|
+
}
|
|
8547
|
+
this._trackBox.isScrollEnd;
|
|
8548
|
+
const params = {
|
|
8549
|
+
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0, userAction,
|
|
8550
|
+
fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams().scrollToItem > 0 && this.scrollBehavior() !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT),
|
|
8551
|
+
blending: useAnimations && scroller.hasAnimation(this._animationId), duration: this.animationParams().scrollToItem,
|
|
8552
|
+
};
|
|
8553
|
+
const animationId = scroller?.scrollTo?.(params);
|
|
8554
|
+
if (animationId > -1) {
|
|
8555
|
+
this._animationId = animationId;
|
|
8556
|
+
}
|
|
8557
|
+
else {
|
|
8558
|
+
scroller.stopAnimation(this._animationId);
|
|
8559
|
+
}
|
|
8560
|
+
if (emitUpdate) {
|
|
8561
|
+
this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
|
|
8562
|
+
}
|
|
8563
|
+
}
|
|
8564
|
+
return;
|
|
8565
|
+
}
|
|
8566
|
+
if ((snapScrollToEnd && this._trackBox.isSnappedToEnd) || (snapScrollToEnd && !scroller.scrollable) ||
|
|
8567
|
+
(scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING >= roundedMaxPositionAfterUpdate) ||
|
|
8568
|
+
(roundedScrollPositionAfterUpdate >= scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
|
|
8426
8569
|
this._trackBox.clearDelta();
|
|
8570
|
+
if (!this._trackBox.isSnappedToEnd) {
|
|
8571
|
+
this._trackBox.isScrollEnd = true;
|
|
8572
|
+
this._trackBox.isScrollStart = false;
|
|
8573
|
+
}
|
|
8427
8574
|
if (this._readyForShow) {
|
|
8428
|
-
this.emitScrollEvent(true, false,
|
|
8575
|
+
this.emitScrollEvent(true, false, false);
|
|
8429
8576
|
}
|
|
8430
|
-
this._trackBox.isScrollEnd;
|
|
8431
8577
|
const params = {
|
|
8432
|
-
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]:
|
|
8433
|
-
fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams().scrollToItem > 0 && this.scrollBehavior() !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT),
|
|
8434
|
-
blending: useAnimations && scroller.hasAnimation(this._animationId), duration: this.animationParams().scrollToItem,
|
|
8578
|
+
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
|
|
8579
|
+
fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams().scrollToItem > 0 && this.scrollBehavior() !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT), userAction: false,
|
|
8580
|
+
blending: useAnimations && scroller.hasAnimation(this._animationId) || cacheChanged, duration: this.animationParams().scrollToItem,
|
|
8435
8581
|
};
|
|
8436
8582
|
const animationId = scroller?.scrollTo?.(params);
|
|
8437
8583
|
if (animationId > -1) {
|
|
@@ -8443,36 +8589,8 @@ class NgVirtualListComponent {
|
|
|
8443
8589
|
if (emitUpdate) {
|
|
8444
8590
|
this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
|
|
8445
8591
|
}
|
|
8592
|
+
return;
|
|
8446
8593
|
}
|
|
8447
|
-
return;
|
|
8448
|
-
}
|
|
8449
|
-
if ((snapScrollToEnd && this._trackBox.isSnappedToEnd) || (snapScrollToEnd && !scroller.scrollable) ||
|
|
8450
|
-
(scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING >= roundedMaxPositionAfterUpdate) ||
|
|
8451
|
-
(roundedScrollPositionAfterUpdate >= scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
|
|
8452
|
-
this._trackBox.clearDelta();
|
|
8453
|
-
if (!this._trackBox.isSnappedToEnd) {
|
|
8454
|
-
this._trackBox.isScrollEnd = true;
|
|
8455
|
-
this._trackBox.isScrollStart = false;
|
|
8456
|
-
}
|
|
8457
|
-
if (this._readyForShow) {
|
|
8458
|
-
this.emitScrollEvent(true, false, false);
|
|
8459
|
-
}
|
|
8460
|
-
const params = {
|
|
8461
|
-
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
|
|
8462
|
-
fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams().scrollToItem > 0 && this.scrollBehavior() !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT), userAction: false,
|
|
8463
|
-
blending: useAnimations && scroller.hasAnimation(this._animationId) || cacheChanged, duration: this.animationParams().scrollToItem,
|
|
8464
|
-
};
|
|
8465
|
-
const animationId = scroller?.scrollTo?.(params);
|
|
8466
|
-
if (animationId > -1) {
|
|
8467
|
-
this._animationId = animationId;
|
|
8468
|
-
}
|
|
8469
|
-
else {
|
|
8470
|
-
scroller.stopAnimation(this._animationId);
|
|
8471
|
-
}
|
|
8472
|
-
if (emitUpdate) {
|
|
8473
|
-
this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
|
|
8474
|
-
}
|
|
8475
|
-
return;
|
|
8476
8594
|
}
|
|
8477
8595
|
if (scrollSize !== scrollPositionAfterUpdate &&
|
|
8478
8596
|
((scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) ||
|
|
@@ -8504,11 +8622,11 @@ class NgVirtualListComponent {
|
|
|
8504
8622
|
let prevItems = [];
|
|
8505
8623
|
const debouncedUpdate = debounce(update, 0, MAX_NUMBERS_OF_SKIPS_FOR_QUALITY_OPTIMIZATION_LVL1);
|
|
8506
8624
|
$viewInit.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(() => {
|
|
8507
|
-
return combineLatest([$trackBy, $isInfinity, $snapScrollToStart, $snapScrollToEnd, $bounds, $listBounds, $
|
|
8625
|
+
return combineLatest([$trackBy, $isInfinity, $snapScrollToStart, $snapScrollToEnd, $bounds, $listBounds, $actualItems, $itemConfigMap, $scrollSize,
|
|
8508
8626
|
$actualItemSize, $actualMinItemSize, $actualMaxItemSize, $collapsedItemIds, $bufferSize, $maxBufferSize, $stickyEnabled, $isVertical,
|
|
8509
8627
|
$dynamicSize, $divides, $snapToItem, $snapToItemAlign, $enabledBufferOptimization, $itemTransform, $alignment,
|
|
8510
8628
|
$precalculatedScrollStartOffset, $precalculatedScrollEndOffset, $cacheVersion, this.$fireUpdate,
|
|
8511
|
-
]).pipe(takeUntilDestroyed(this._destroyRef), tap(([trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds,
|
|
8629
|
+
]).pipe(takeUntilDestroyed(this._destroyRef), tap(([trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, collapsedIds, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, divides, snapToItem, snapToItemAlign, enabledBufferOptimization, itemTransform, alignment, precalculatedScrollStartOffset, precalculatedScrollEndOffset, cacheVersion,]) => {
|
|
8512
8630
|
let itemsChanged = false;
|
|
8513
8631
|
if (prevItems !== items) {
|
|
8514
8632
|
itemsChanged = true;
|
|
@@ -8519,7 +8637,7 @@ class NgVirtualListComponent {
|
|
|
8519
8637
|
if (enabledOptimization) {
|
|
8520
8638
|
if (useDebouncedUpdate) {
|
|
8521
8639
|
debouncedUpdate.execute({
|
|
8522
|
-
trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds,
|
|
8640
|
+
trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds, items, itemConfigMap, scrollSize, itemSize, minItemSize,
|
|
8523
8641
|
maxItemSize, collapsedIds, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, divides, enabledBufferOptimization, itemTransform,
|
|
8524
8642
|
snapToItem, snapToItemAlign, alignment, precalculatedScrollStartOffset, precalculatedScrollEndOffset, cacheVersion, userAction: hasUserAction,
|
|
8525
8643
|
});
|
|
@@ -8529,7 +8647,7 @@ class NgVirtualListComponent {
|
|
|
8529
8647
|
}
|
|
8530
8648
|
if (!isScrolling) {
|
|
8531
8649
|
update({
|
|
8532
|
-
trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds,
|
|
8650
|
+
trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds, items, itemConfigMap, scrollSize, itemSize, minItemSize,
|
|
8533
8651
|
maxItemSize, collapsedIds, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, divides, enabledBufferOptimization, itemTransform,
|
|
8534
8652
|
snapToItem, snapToItemAlign, alignment, precalculatedScrollStartOffset, precalculatedScrollEndOffset, cacheVersion, userAction: hasUserAction,
|
|
8535
8653
|
});
|
|
@@ -8612,23 +8730,23 @@ class NgVirtualListComponent {
|
|
|
8612
8730
|
if (!!items && items.length) {
|
|
8613
8731
|
const dynamicSize = this.dynamicSize(), itemSize = this._actualItemSize(), minItemSize = this._actualMinItemSize(), maxItemSize = this._actualMaxItemSize(), snapScrollToEnd = this.snapScrollToEnd();
|
|
8614
8732
|
if (dynamicSize) {
|
|
8615
|
-
const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), isVertical = this._isVertical, currentScrollSize = isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft, opts = {
|
|
8616
|
-
alignment: this.actualAlignment(),
|
|
8733
|
+
const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), isVertical = this._isVertical, inverted = scrollerComponent.inverted, maxScrollSize = isVertical ? scrollerComponent.scrollHeight : scrollerComponent.scrollWidth, currentScrollSize = isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft, opts = {
|
|
8734
|
+
alignment: this.actualAlignment(), inverted,
|
|
8617
8735
|
bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize, minItemSize, maxItemSize,
|
|
8618
8736
|
bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(), itemTransform: this.itemTransform(),
|
|
8619
|
-
scrollSize: (
|
|
8737
|
+
scrollSize: (inverted ? (maxScrollSize - currentScrollSize) : currentScrollSize),
|
|
8620
8738
|
snapToItem: this.snapToItem(), snapToItemAlign: this.snapToItemAlign(),
|
|
8621
8739
|
stickyEnabled: this.stickyEnabled(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
|
|
8622
8740
|
};
|
|
8623
8741
|
let scrollSize = snapScrollToEnd && this._trackBox.isSnappedToEnd ?
|
|
8624
|
-
|
|
8742
|
+
maxScrollSize :
|
|
8625
8743
|
this._trackBox.getItemPosition(id, itemConfigMap, opts);
|
|
8626
8744
|
if (scrollSize === -1) {
|
|
8627
8745
|
return of([finished, { id, blending, iteration: nextIteration, cb }]).pipe(delay(0));
|
|
8628
8746
|
}
|
|
8629
8747
|
this._trackBox.clearDelta();
|
|
8630
8748
|
const viewportSize = (isVertical ? height : width), { displayItems, totalSize, leftLayoutOffset } = this._trackBox.updateCollection(items, itemConfigMap, {
|
|
8631
|
-
...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
|
|
8749
|
+
...opts, scrollSize: (inverted ? (maxScrollSize - scrollSize) : scrollSize), fromItemId: isLastIteration ? undefined : id,
|
|
8632
8750
|
}), delta1 = this._trackBox.delta;
|
|
8633
8751
|
const normalizedTotalSize = totalSize < viewportSize ? viewportSize : totalSize;
|
|
8634
8752
|
scrollerComponent.startLayoutOffset = leftLayoutOffset;
|
|
@@ -8640,7 +8758,7 @@ class NgVirtualListComponent {
|
|
|
8640
8758
|
this.tracking();
|
|
8641
8759
|
this.snappingHandler();
|
|
8642
8760
|
this.updateOffsetsByAllignment();
|
|
8643
|
-
scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
|
|
8761
|
+
scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: (inverted ? (maxScrollSize - actualScrollSize) : actualScrollSize), fromItemId: id });
|
|
8644
8762
|
if (scrollSize === -1) {
|
|
8645
8763
|
return of([finished, { id, blending, iteration: nextIteration, cb }]).pipe(delay(0));
|
|
8646
8764
|
}
|
|
@@ -8677,17 +8795,18 @@ class NgVirtualListComponent {
|
|
|
8677
8795
|
}
|
|
8678
8796
|
}
|
|
8679
8797
|
}
|
|
8680
|
-
const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), opts = {
|
|
8681
|
-
alignment: this._actualAlignment(),
|
|
8798
|
+
const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), inverted = scrollerComponent.inverted, maxScrollSize = (isVertical ? scrollerComponent.scrollHeight : scrollerComponent.scrollWidth), actualScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), opts = {
|
|
8799
|
+
alignment: this._actualAlignment(), inverted,
|
|
8682
8800
|
bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize, minItemSize, maxItemSize,
|
|
8683
8801
|
bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(), itemTransform: this.itemTransform(),
|
|
8684
|
-
scrollSize: (
|
|
8802
|
+
scrollSize: (inverted ? (maxScrollSize - actualScrollSize) : actualScrollSize),
|
|
8685
8803
|
snapToItem, snapToItemAlign, stickyEnabled: this.stickyEnabled(), fromItemId: id,
|
|
8686
8804
|
enabledBufferOptimization: this.enabledBufferOptimization(),
|
|
8687
8805
|
};
|
|
8688
8806
|
this._trackBox.clearDelta();
|
|
8689
8807
|
const viewportSize = (isVertical ? height : width), { displayItems, totalSize, leftLayoutOffset } = this._trackBox.updateCollection(items, itemConfigMap, {
|
|
8690
|
-
...opts, scrollSize
|
|
8808
|
+
...opts, scrollSize: (inverted ? (maxScrollSize - scrollSize) : scrollSize),
|
|
8809
|
+
fromItemId: isLastIteration ? undefined : id,
|
|
8691
8810
|
});
|
|
8692
8811
|
const actualTotalSize = this._isInfinity() ? (totalSize + viewportSize) : totalSize;
|
|
8693
8812
|
const normalizedTotalSize = actualTotalSize < viewportSize ? viewportSize : actualTotalSize;
|
|
@@ -9208,13 +9327,13 @@ class NgVirtualListComponent {
|
|
|
9208
9327
|
}
|
|
9209
9328
|
}
|
|
9210
9329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgVirtualListComponent, isStandalone: false, selector: "ng-virtual-list", inputs: { scrollbarThickness: { classPropertyName: "scrollbarThickness", publicName: "scrollbarThickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbRenderer: { classPropertyName: "scrollbarThumbRenderer", publicName: "scrollbarThumbRenderer", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbParams: { classPropertyName: "scrollbarThumbParams", publicName: "scrollbarThumbParams", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, waitForPreparation: { classPropertyName: "waitForPreparation", publicName: "waitForPreparation", isSignal: true, isRequired: false, transformFunction: null }, clickDistance: { classPropertyName: "clickDistance", publicName: "clickDistance", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, defaultItemValue: { classPropertyName: "defaultItemValue", publicName: "defaultItemValue", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, stickyEnabled: { classPropertyName: "stickyEnabled", publicName: "stickyEnabled", isSignal: true, isRequired: false, transformFunction: null }, snapToEndTransitionInstantOffset: { classPropertyName: "snapToEndTransitionInstantOffset", publicName: "snapToEndTransitionInstantOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollStartOffset: { classPropertyName: "scrollStartOffset", publicName: "scrollStartOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollEndOffset: { classPropertyName: "scrollEndOffset", publicName: "scrollEndOffset", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToStart: { classPropertyName: "snapScrollToStart", publicName: "snapScrollToStart", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToEnd: { classPropertyName: "snapScrollToEnd", publicName: "snapScrollToEnd", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToBottom: { classPropertyName: "snapScrollToBottom", publicName: "snapScrollToBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", isSignal: true, isRequired: false, transformFunction: null }, overlappingScrollbar: { classPropertyName: "overlappingScrollbar", publicName: "overlappingScrollbar", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, scrollingSettings: { classPropertyName: "scrollingSettings", publicName: "scrollingSettings", isSignal: true, isRequired: false, transformFunction: null }, itemTransform: { classPropertyName: "itemTransform", publicName: "itemTransform", isSignal: true, isRequired: false, transformFunction: null }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", isSignal: true, isRequired: false, transformFunction: null }, snapToItemAlign: { classPropertyName: "snapToItemAlign", publicName: "snapToItemAlign", isSignal: true, isRequired: false, transformFunction: null }, snappingDistance: { classPropertyName: "snappingDistance", publicName: "snappingDistance", isSignal: true, isRequired: false, transformFunction: null }, scrollingOneByOne: { classPropertyName: "scrollingOneByOne", publicName: "scrollingOneByOne", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, zIndexWhenSelecting: { classPropertyName: "zIndexWhenSelecting", publicName: "zIndexWhenSelecting", isSignal: true, isRequired: false, transformFunction: null }, spreadingMode: { classPropertyName: "spreadingMode", publicName: "spreadingMode", isSignal: true, isRequired: false, transformFunction: null }, divides: { classPropertyName: "divides", publicName: "divides", isSignal: true, isRequired: false, transformFunction: null }, motionBlur: { classPropertyName: "motionBlur", publicName: "motionBlur", isSignal: true, isRequired: false, transformFunction: null }, maxMotionBlur: { classPropertyName: "maxMotionBlur", publicName: "maxMotionBlur", isSignal: true, isRequired: false, transformFunction: null }, motionBlurEnabled: { classPropertyName: "motionBlurEnabled", publicName: "motionBlurEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationParams: { classPropertyName: "animationParams", publicName: "animationParams", isSignal: true, isRequired: false, transformFunction: null }, overscrollEnabled: { classPropertyName: "overscrollEnabled", publicName: "overscrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minItemSize: { classPropertyName: "minItemSize", publicName: "minItemSize", isSignal: true, isRequired: false, transformFunction: null }, maxItemSize: { classPropertyName: "maxItemSize", publicName: "maxItemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, collapsingMode: { classPropertyName: "collapsingMode", publicName: "collapsingMode", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, selectingMode: { classPropertyName: "selectingMode", publicName: "selectingMode", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, screenReaderMessage: { classPropertyName: "screenReaderMessage", publicName: "screenReaderMessage", isSignal: true, isRequired: false, transformFunction: null }, langTextDir: { classPropertyName: "langTextDir", publicName: "langTextDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onSnapItem: "onSnapItem", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService, NgVirtualListPublicService], viewQueries: [{ propertyName: "_prerender", first: true, predicate: ["prerender"], descendants: true, isSignal: true }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@let scrollStartOffset = _actualScrollStartOffset();\r\n@let scrollEndOffset = _actualScrollEndOffset();\r\n@let alignmentScrollStartOffset = _alignmentScrollStartOffset();\r\n@let alignmentScrollEndOffset = _alignmentScrollEndOffset();\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamicSize()\"\r\n [divides]=\"divides()\" [isVertical]=\"isVertical\" [itemSize]=\"actualItemSize()\" [trackBy]=\"trackBy()\"\r\n [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset\" [endOffset]=\"scrollEndOffset\"\r\n [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (stickyEnabled()) {\r\n <div localeSensitive [langTextDir]=\"langTextDir()\" #snappedContainer class=\"ngvl__snapped-container\"\r\n [ngClass]=\"classes()\">\r\n <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n </div>\r\n </div>\r\n}\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset\"\r\n [endOffset]=\"scrollEndOffset\" [alignmentStartOffset]=\"alignmentScrollStartOffset\" [alignmentEndOffset]=\"alignmentScrollEndOffset\"\r\n [direction]=\"direction()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\" [isInfinity]=\"_isInfinity()\"\r\n [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n [animationParams]=\"animationParams()\" [focusedElement]=\"focusedElement()\" [loading]=\"loading()\"\r\n [overscrollEnabled]=\"overscrollEnabled()\" [snappingDistance]=\"snappingDistance()\" [overlappingScrollbar]=\"overlappingScrollbar()\"\r\n [scrollbarEnabled]=\"_actualScrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\" [snapToItem]=\"snapToItem()\"\r\n [snapToItemAlign]=\"snapToItemAlign()\" [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollingSettings]=\"scrollingSettings()\" [scrollingOneByOne]=\"scrollingOneByOne()\" [motionBlur]=\"motionBlur()\"\r\n [maxMotionBlur]=\"maxMotionBlur()\" [motionBlurEnabled]=\"motionBlurEnabled()\">\r\n <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "overlappingScrollbar", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams", "motionBlur", "maxMotionBlur", "motionBlurEnabled"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: NgPrerenderContainer, selector: "ng-prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "divides", "itemRenderer"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
9330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgVirtualListComponent, isStandalone: false, selector: "ng-virtual-list", inputs: { scrollbarThickness: { classPropertyName: "scrollbarThickness", publicName: "scrollbarThickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbRenderer: { classPropertyName: "scrollbarThumbRenderer", publicName: "scrollbarThumbRenderer", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbParams: { classPropertyName: "scrollbarThumbParams", publicName: "scrollbarThumbParams", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, waitForPreparation: { classPropertyName: "waitForPreparation", publicName: "waitForPreparation", isSignal: true, isRequired: false, transformFunction: null }, clickDistance: { classPropertyName: "clickDistance", publicName: "clickDistance", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, defaultItemValue: { classPropertyName: "defaultItemValue", publicName: "defaultItemValue", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, stickyEnabled: { classPropertyName: "stickyEnabled", publicName: "stickyEnabled", isSignal: true, isRequired: false, transformFunction: null }, snapToEndTransitionInstantOffset: { classPropertyName: "snapToEndTransitionInstantOffset", publicName: "snapToEndTransitionInstantOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollStartOffset: { classPropertyName: "scrollStartOffset", publicName: "scrollStartOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollEndOffset: { classPropertyName: "scrollEndOffset", publicName: "scrollEndOffset", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToStart: { classPropertyName: "snapScrollToStart", publicName: "snapScrollToStart", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToEnd: { classPropertyName: "snapScrollToEnd", publicName: "snapScrollToEnd", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToBottom: { classPropertyName: "snapScrollToBottom", publicName: "snapScrollToBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", isSignal: true, isRequired: false, transformFunction: null }, overlappingScrollbar: { classPropertyName: "overlappingScrollbar", publicName: "overlappingScrollbar", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, scrollingSettings: { classPropertyName: "scrollingSettings", publicName: "scrollingSettings", isSignal: true, isRequired: false, transformFunction: null }, itemTransform: { classPropertyName: "itemTransform", publicName: "itemTransform", isSignal: true, isRequired: false, transformFunction: null }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", isSignal: true, isRequired: false, transformFunction: null }, snapToItemAlign: { classPropertyName: "snapToItemAlign", publicName: "snapToItemAlign", isSignal: true, isRequired: false, transformFunction: null }, snappingDistance: { classPropertyName: "snappingDistance", publicName: "snappingDistance", isSignal: true, isRequired: false, transformFunction: null }, scrollingOneByOne: { classPropertyName: "scrollingOneByOne", publicName: "scrollingOneByOne", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, zIndexWhenSelecting: { classPropertyName: "zIndexWhenSelecting", publicName: "zIndexWhenSelecting", isSignal: true, isRequired: false, transformFunction: null }, spreadingMode: { classPropertyName: "spreadingMode", publicName: "spreadingMode", isSignal: true, isRequired: false, transformFunction: null }, divides: { classPropertyName: "divides", publicName: "divides", isSignal: true, isRequired: false, transformFunction: null }, motionBlur: { classPropertyName: "motionBlur", publicName: "motionBlur", isSignal: true, isRequired: false, transformFunction: null }, maxMotionBlur: { classPropertyName: "maxMotionBlur", publicName: "maxMotionBlur", isSignal: true, isRequired: false, transformFunction: null }, motionBlurEnabled: { classPropertyName: "motionBlurEnabled", publicName: "motionBlurEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationParams: { classPropertyName: "animationParams", publicName: "animationParams", isSignal: true, isRequired: false, transformFunction: null }, overscrollEnabled: { classPropertyName: "overscrollEnabled", publicName: "overscrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minItemSize: { classPropertyName: "minItemSize", publicName: "minItemSize", isSignal: true, isRequired: false, transformFunction: null }, maxItemSize: { classPropertyName: "maxItemSize", publicName: "maxItemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, collapsingMode: { classPropertyName: "collapsingMode", publicName: "collapsingMode", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, selectingMode: { classPropertyName: "selectingMode", publicName: "selectingMode", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, screenReaderMessage: { classPropertyName: "screenReaderMessage", publicName: "screenReaderMessage", isSignal: true, isRequired: false, transformFunction: null }, langTextDir: { classPropertyName: "langTextDir", publicName: "langTextDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onSnapItem: "onSnapItem", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService, NgVirtualListPublicService], viewQueries: [{ propertyName: "_prerender", first: true, predicate: ["prerender"], descendants: true, isSignal: true }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@let scrollStartOffset = _actualScrollStartOffset();\r\n@let scrollEndOffset = _actualScrollEndOffset();\r\n@let alignmentScrollStartOffset = _alignmentScrollStartOffset();\r\n@let alignmentScrollEndOffset = _alignmentScrollEndOffset();\r\n@let textDir = langTextDir();\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamicSize()\"\r\n [divides]=\"divides()\" [isVertical]=\"isVertical\" [itemSize]=\"actualItemSize()\" [trackBy]=\"trackBy()\"\r\n [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset\" [endOffset]=\"scrollEndOffset\"\r\n [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (stickyEnabled()) {\r\n <div localeSensitive [langTextDir]=\"textDir\" #snappedContainer class=\"ngvl__snapped-container\"\r\n [ngClass]=\"classes()\">\r\n <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n </div>\r\n </div>\r\n}\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [langTextDir]=\"textDir\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset\"\r\n [endOffset]=\"scrollEndOffset\" [alignmentStartOffset]=\"alignmentScrollStartOffset\" [alignmentEndOffset]=\"alignmentScrollEndOffset\"\r\n [direction]=\"direction()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\" [isInfinity]=\"_isInfinity()\"\r\n [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n [animationParams]=\"animationParams()\" [focusedElement]=\"focusedElement()\" [loading]=\"loading()\"\r\n [overscrollEnabled]=\"overscrollEnabled()\" [snappingDistance]=\"snappingDistance()\" [overlappingScrollbar]=\"overlappingScrollbar()\"\r\n [scrollbarEnabled]=\"_actualScrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\" [snapToItem]=\"snapToItem()\"\r\n [snapToItemAlign]=\"snapToItemAlign()\" [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollingSettings]=\"scrollingSettings()\" [scrollingOneByOne]=\"scrollingOneByOne()\" [motionBlur]=\"motionBlur()\"\r\n [maxMotionBlur]=\"maxMotionBlur()\" [motionBlurEnabled]=\"motionBlurEnabled()\">\r\n <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "overlappingScrollbar", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams", "motionBlur", "maxMotionBlur", "motionBlurEnabled"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: NgPrerenderContainer, selector: "ng-prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "divides", "itemRenderer"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
9212
9331
|
}
|
|
9213
9332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
|
|
9214
9333
|
type: Component,
|
|
9215
9334
|
args: [{ selector: 'ng-virtual-list', host: {
|
|
9216
9335
|
'style': 'position: relative;'
|
|
9217
|
-
}, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService, NgVirtualListPublicService], template: "@let scrollStartOffset = _actualScrollStartOffset();\r\n@let scrollEndOffset = _actualScrollEndOffset();\r\n@let alignmentScrollStartOffset = _alignmentScrollStartOffset();\r\n@let alignmentScrollEndOffset = _alignmentScrollEndOffset();\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamicSize()\"\r\n [divides]=\"divides()\" [isVertical]=\"isVertical\" [itemSize]=\"actualItemSize()\" [trackBy]=\"trackBy()\"\r\n [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset\" [endOffset]=\"scrollEndOffset\"\r\n [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (stickyEnabled()) {\r\n <div localeSensitive [langTextDir]=\"
|
|
9336
|
+
}, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService, NgVirtualListPublicService], template: "@let scrollStartOffset = _actualScrollStartOffset();\r\n@let scrollEndOffset = _actualScrollEndOffset();\r\n@let alignmentScrollStartOffset = _alignmentScrollStartOffset();\r\n@let alignmentScrollEndOffset = _alignmentScrollEndOffset();\r\n@let textDir = langTextDir();\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamicSize()\"\r\n [divides]=\"divides()\" [isVertical]=\"isVertical\" [itemSize]=\"actualItemSize()\" [trackBy]=\"trackBy()\"\r\n [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset\" [endOffset]=\"scrollEndOffset\"\r\n [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (stickyEnabled()) {\r\n <div localeSensitive [langTextDir]=\"textDir\" #snappedContainer class=\"ngvl__snapped-container\"\r\n [ngClass]=\"classes()\">\r\n <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n </div>\r\n </div>\r\n}\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [langTextDir]=\"textDir\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset\"\r\n [endOffset]=\"scrollEndOffset\" [alignmentStartOffset]=\"alignmentScrollStartOffset\" [alignmentEndOffset]=\"alignmentScrollEndOffset\"\r\n [direction]=\"direction()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\" [isInfinity]=\"_isInfinity()\"\r\n [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n [animationParams]=\"animationParams()\" [focusedElement]=\"focusedElement()\" [loading]=\"loading()\"\r\n [overscrollEnabled]=\"overscrollEnabled()\" [snappingDistance]=\"snappingDistance()\" [overlappingScrollbar]=\"overlappingScrollbar()\"\r\n [scrollbarEnabled]=\"_actualScrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\" [snapToItem]=\"snapToItem()\"\r\n [snapToItemAlign]=\"snapToItemAlign()\" [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\"\r\n [scrollingSettings]=\"scrollingSettings()\" [scrollingOneByOne]=\"scrollingOneByOne()\" [motionBlur]=\"motionBlur()\"\r\n [maxMotionBlur]=\"maxMotionBlur()\" [motionBlurEnabled]=\"motionBlurEnabled()\">\r\n <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
9218
9337
|
}], ctorParameters: () => [], propDecorators: { _prerender: [{ type: i0.ViewChild, args: ['prerender', { isSignal: true }] }], _listContainerRef: [{
|
|
9219
9338
|
type: ViewChild,
|
|
9220
9339
|
args: ['renderersContainer', { read: ViewContainerRef }]
|