ng-virtual-list 14.7.13 → 14.7.15
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 +20 -1
- package/esm2020/lib/components/ng-virtual-list-item.component.mjs +34 -12
- package/esm2020/lib/const/index.mjs +2 -1
- package/esm2020/lib/enums/focus-alignments.mjs +14 -0
- package/esm2020/lib/enums/index.mjs +3 -2
- package/esm2020/lib/models/display-object-config.model.mjs +2 -0
- package/esm2020/lib/models/display-object-measures.model.mjs +2 -0
- package/esm2020/lib/models/index.mjs +1 -1
- package/esm2020/lib/ng-virtual-list.component.mjs +107 -11
- package/esm2020/lib/ng-virtual-list.service.mjs +15 -4
- package/esm2020/lib/types/focus-alignment.mjs +2 -0
- package/esm2020/lib/types/index.mjs +1 -1
- package/fesm2015/ng-virtual-list.mjs +166 -22
- package/fesm2015/ng-virtual-list.mjs.map +1 -1
- package/fesm2020/ng-virtual-list.mjs +165 -23
- package/fesm2020/ng-virtual-list.mjs.map +1 -1
- package/lib/components/ng-virtual-list-item.component.d.ts +8 -36
- package/lib/const/index.d.ts +1 -0
- package/lib/enums/focus-alignments.d.ts +12 -0
- package/lib/enums/index.d.ts +2 -1
- package/lib/models/display-object-config.model.d.ts +35 -0
- package/lib/models/display-object-measures.model.d.ts +13 -0
- package/lib/models/index.d.ts +3 -1
- package/lib/ng-virtual-list.component.d.ts +19 -2
- package/lib/ng-virtual-list.service.d.ts +9 -5
- package/lib/types/focus-alignment.d.ts +8 -0
- package/lib/types/index.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,35 +1,11 @@
|
|
|
1
1
|
import { ChangeDetectorRef, ElementRef, TemplateRef } from '@angular/core';
|
|
2
2
|
import { IRenderVirtualListItem } from '../models/render-item.model';
|
|
3
|
-
import { Id,
|
|
3
|
+
import { Id, ISize } from '../types';
|
|
4
4
|
import { BaseVirtualListItemComponent } from '../models/base-virtual-list-item-component';
|
|
5
5
|
import { NgVirtualListService } from '../ng-virtual-list.service';
|
|
6
6
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
7
|
-
import {
|
|
7
|
+
import { IDisplayObjectConfig, IDisplayObjectMeasures } from '../models';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
|
-
interface IItemConfig extends IRenderVirtualListItemConfig {
|
|
10
|
-
/**
|
|
11
|
-
* Determines whether the element has focus or not.
|
|
12
|
-
*/
|
|
13
|
-
focus: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Determines whether the element is selected or not.
|
|
16
|
-
*/
|
|
17
|
-
selected: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Determines whether the element is collapsed or not.
|
|
20
|
-
*/
|
|
21
|
-
collapsed: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Selects a list item
|
|
24
|
-
* @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.
|
|
25
|
-
*/
|
|
26
|
-
select: (selected: boolean | undefined) => void;
|
|
27
|
-
/**
|
|
28
|
-
* Collapse list items
|
|
29
|
-
* @param collapsed - If the value is undefined, then the toggle method is executed, if false or true, then the collapse/expand is performed.
|
|
30
|
-
*/
|
|
31
|
-
collapse: (collapsed: boolean | undefined) => void;
|
|
32
|
-
}
|
|
33
9
|
/**
|
|
34
10
|
* Virtual list item component
|
|
35
11
|
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
|
|
@@ -48,15 +24,10 @@ export declare class NgVirtualListItemComponent extends BaseVirtualListItemCompo
|
|
|
48
24
|
private _isSelected;
|
|
49
25
|
private _isCollapsed;
|
|
50
26
|
private _$config;
|
|
51
|
-
$config: import("rxjs").Observable<
|
|
52
|
-
measures: BehaviorSubject<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
*/
|
|
56
|
-
delta: number;
|
|
57
|
-
}) | undefined>;
|
|
58
|
-
private _$focus;
|
|
59
|
-
$focus: import("rxjs").Observable<boolean>;
|
|
27
|
+
$config: import("rxjs").Observable<IDisplayObjectConfig>;
|
|
28
|
+
measures: BehaviorSubject<IDisplayObjectMeasures | undefined>;
|
|
29
|
+
private _$focused;
|
|
30
|
+
$focused: import("rxjs").Observable<boolean>;
|
|
60
31
|
private _$part;
|
|
61
32
|
$part: import("rxjs").Observable<string>;
|
|
62
33
|
regular: boolean;
|
|
@@ -73,9 +44,11 @@ export declare class NgVirtualListItemComponent extends BaseVirtualListItemCompo
|
|
|
73
44
|
get element(): HTMLElement;
|
|
74
45
|
private _selectHandler;
|
|
75
46
|
private _collapseHandler;
|
|
47
|
+
private _focusHandler;
|
|
76
48
|
constructor(_cdr: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _service: NgVirtualListService);
|
|
77
49
|
private focusNext;
|
|
78
50
|
private focusPrev;
|
|
51
|
+
private focus;
|
|
79
52
|
private updateMeasures;
|
|
80
53
|
private updateConfig;
|
|
81
54
|
private update;
|
|
@@ -88,4 +61,3 @@ export declare class NgVirtualListItemComponent extends BaseVirtualListItemCompo
|
|
|
88
61
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListItemComponent, never>;
|
|
89
62
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListItemComponent, "ng-virtual-list-item", never, {}, {}, never, never, false>;
|
|
90
63
|
}
|
|
91
|
-
export {};
|
package/lib/const/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export declare const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
|
|
|
16
16
|
export declare const MAX_SCROLL_TO_ITERATIONS = 5;
|
|
17
17
|
export declare const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
|
|
18
18
|
export declare const DEFAULT_SELECT_METHOD = MethodsForSelecting.NONE;
|
|
19
|
+
export declare const DEFAULT_SCREEN_READER_MESSAGE = "Showing items $1 to $2";
|
|
19
20
|
export declare const BEHAVIOR_AUTO = "auto";
|
|
20
21
|
export declare const BEHAVIOR_INSTANT = "instant";
|
|
21
22
|
export declare const BEHAVIOR_SMOOTH = "smooth";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Focus Alignments.
|
|
3
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts
|
|
4
|
+
* @author Evgenii Grebennikov
|
|
5
|
+
* @email djonnyx@gmail.com
|
|
6
|
+
*/
|
|
7
|
+
export declare enum FocusAlignments {
|
|
8
|
+
NONE = "none",
|
|
9
|
+
START = "start",
|
|
10
|
+
CENTER = "center",
|
|
11
|
+
END = "end"
|
|
12
|
+
}
|
package/lib/enums/index.d.ts
CHANGED
|
@@ -6,5 +6,6 @@ import { MethodsForSelecting } from "./methods-for-selecting";
|
|
|
6
6
|
import { MethodForSelecting } from "./method-for-selecting";
|
|
7
7
|
import { SnappingMethods } from "./snapping-methods";
|
|
8
8
|
import { SnappingMethod } from "./snapping-method";
|
|
9
|
-
|
|
9
|
+
import { FocusAlignments } from "./focus-alignments";
|
|
10
|
+
export { CollectionModes, Directions, MethodsForSelecting, SnappingMethods, FocusAlignments, };
|
|
10
11
|
export type { CollectionMode, Direction, MethodForSelecting, SnappingMethod, };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { IRenderVirtualListItemConfig } from "./render-item-config.model";
|
|
2
|
+
/**
|
|
3
|
+
* Display object configuration. A set of `select`, `collapse`, and `focus` methods are also provided.
|
|
4
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/models/display-object-config.model.ts
|
|
5
|
+
* @author Evgenii Grebennikov
|
|
6
|
+
* @email djonnyx@gmail.com
|
|
7
|
+
*/
|
|
8
|
+
export interface IDisplayObjectConfig extends IRenderVirtualListItemConfig {
|
|
9
|
+
/**
|
|
10
|
+
* Determines whether the element has focused or not.
|
|
11
|
+
*/
|
|
12
|
+
focused: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Determines whether the element is selected or not.
|
|
15
|
+
*/
|
|
16
|
+
selected: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Determines whether the element is collapsed or not.
|
|
19
|
+
*/
|
|
20
|
+
collapsed: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Focus a list item
|
|
23
|
+
*/
|
|
24
|
+
focus: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Selects a list item
|
|
27
|
+
* @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.
|
|
28
|
+
*/
|
|
29
|
+
select: (selected: boolean | undefined) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Collapse list items
|
|
32
|
+
* @param collapsed - If the value is undefined, then the toggle method is executed, if false or true, then the collapse/expand is performed.
|
|
33
|
+
*/
|
|
34
|
+
collapse: (collapsed: boolean | undefined) => void;
|
|
35
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { IRect } from "../types";
|
|
2
|
+
/**
|
|
3
|
+
* Display object metrics.
|
|
4
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/models/display-object-measures.model.ts
|
|
5
|
+
* @author Evgenii Grebennikov
|
|
6
|
+
* @email djonnyx@gmail.com
|
|
7
|
+
*/
|
|
8
|
+
export interface IDisplayObjectMeasures extends IRect {
|
|
9
|
+
/**
|
|
10
|
+
* Delta is calculated for Snapping Method.ADVANCED
|
|
11
|
+
*/
|
|
12
|
+
delta: number;
|
|
13
|
+
}
|
package/lib/models/index.d.ts
CHANGED
|
@@ -4,4 +4,6 @@ import { IVirtualListItem } from './item.model';
|
|
|
4
4
|
import { IVirtualListItemConfigMap } from './item-config-map.model';
|
|
5
5
|
import { IVirtualListCollection } from './collection.model';
|
|
6
6
|
import { IRenderVirtualListItem } from './render-item.model';
|
|
7
|
-
|
|
7
|
+
import { IDisplayObjectConfig } from './display-object-config.model';
|
|
8
|
+
import { IDisplayObjectMeasures } from './display-object-measures.model';
|
|
9
|
+
export type { IDisplayObjectConfig, IDisplayObjectMeasures, IScrollEvent, IVirtualListItem, IVirtualListItemConfigMap, IVirtualListCollection, IRenderVirtualListItem, ScrollDirection, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
|
|
2
2
|
import { IRenderVirtualListItem, IScrollEvent, IVirtualListCollection, IVirtualListItemConfigMap } from './models';
|
|
3
|
-
import { Id, ISize } from './types';
|
|
3
|
+
import { FocusAlignment, Id, ISize } from './types';
|
|
4
4
|
import { CollectionMode, Direction, Directions, MethodForSelecting, SnappingMethod } from './enums';
|
|
5
5
|
import { DisposableComponent } from './utils/disposableComponent';
|
|
6
6
|
import { NgVirtualListService } from './ng-virtual-list.service';
|
|
@@ -225,6 +225,19 @@ export declare class NgVirtualListComponent extends DisposableComponent implemen
|
|
|
225
225
|
*/
|
|
226
226
|
set trackBy(v: string);
|
|
227
227
|
get trackBy(): string;
|
|
228
|
+
private _$screenReaderMessage;
|
|
229
|
+
readonly $screenReaderMessage: import("rxjs").Observable<string>;
|
|
230
|
+
private _screenReaderMessageTransform;
|
|
231
|
+
/**
|
|
232
|
+
* Message for screen reader.
|
|
233
|
+
* The message format is: "some text $1 some text $2",
|
|
234
|
+
* where $1 is the number of the first element of the screen collection,
|
|
235
|
+
* $2 is the number of the last element of the screen collection.
|
|
236
|
+
*/
|
|
237
|
+
set screenReaderMessage(v: string);
|
|
238
|
+
get screenReaderMessage(): string;
|
|
239
|
+
private _$screenReaderFormattedMessage;
|
|
240
|
+
readonly $screenReaderFormattedMessage: import("rxjs").Observable<string>;
|
|
228
241
|
private _isVertical;
|
|
229
242
|
private _isLazy;
|
|
230
243
|
get orientation(): Directions;
|
|
@@ -296,6 +309,10 @@ export declare class NgVirtualListComponent extends DisposableComponent implemen
|
|
|
296
309
|
* Returns the bounds of an element with a given id
|
|
297
310
|
*/
|
|
298
311
|
getItemBounds(id: Id): ISize | undefined;
|
|
312
|
+
/**
|
|
313
|
+
* Focus an list item by a given id.
|
|
314
|
+
*/
|
|
315
|
+
focus(id: Id, align?: FocusAlignment): void;
|
|
299
316
|
/**
|
|
300
317
|
* The method scrolls the list to the element with the given id and returns the value of the scrolled area.
|
|
301
318
|
* Behavior accepts the values "auto", "instant" and "smooth".
|
|
@@ -315,5 +332,5 @@ export declare class NgVirtualListComponent extends DisposableComponent implemen
|
|
|
315
332
|
ngOnDestroy(): void;
|
|
316
333
|
private dispose;
|
|
317
334
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListComponent, never>;
|
|
318
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListComponent, "ng-virtual-list", never, { "items": "items"; "selectedIds": "selectedIds"; "collapsedIds": "collapsedIds"; "selectByClick": "selectByClick"; "collapseByClick": "collapseByClick"; "snap": "snap"; "enabledBufferOptimization": "enabledBufferOptimization"; "itemRenderer": "itemRenderer"; "itemConfigMap": "itemConfigMap"; "itemSize": "itemSize"; "dynamicSize": "dynamicSize"; "direction": "direction"; "collectionMode": "collectionMode"; "bufferSize": "bufferSize"; "maxBufferSize": "maxBufferSize"; "snappingMethod": "snappingMethod"; "methodForSelecting": "methodForSelecting"; "trackBy": "trackBy"; }, { "onScroll": "onScroll"; "onScrollEnd": "onScrollEnd"; "onViewportChange": "onViewportChange"; "onItemClick": "onItemClick"; "onSelect": "onSelect"; "onCollapse": "onCollapse"; "onScrollReachStart": "onScrollReachStart"; "onScrollReachEnd": "onScrollReachEnd"; }, never, never, false>;
|
|
335
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListComponent, "ng-virtual-list", never, { "items": "items"; "selectedIds": "selectedIds"; "collapsedIds": "collapsedIds"; "selectByClick": "selectByClick"; "collapseByClick": "collapseByClick"; "snap": "snap"; "enabledBufferOptimization": "enabledBufferOptimization"; "itemRenderer": "itemRenderer"; "itemConfigMap": "itemConfigMap"; "itemSize": "itemSize"; "dynamicSize": "dynamicSize"; "direction": "direction"; "collectionMode": "collectionMode"; "bufferSize": "bufferSize"; "maxBufferSize": "maxBufferSize"; "snappingMethod": "snappingMethod"; "methodForSelecting": "methodForSelecting"; "trackBy": "trackBy"; "screenReaderMessage": "screenReaderMessage"; }, { "onScroll": "onScroll"; "onScrollEnd": "onScrollEnd"; "onViewportChange": "onViewportChange"; "onItemClick": "onItemClick"; "onSelect": "onSelect"; "onCollapse": "onCollapse"; "onScrollReachStart": "onScrollReachStart"; "onScrollReachEnd": "onScrollReachEnd"; }, never, never, false>;
|
|
319
336
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Subject } from 'rxjs';
|
|
2
2
|
import { TrackBox } from './utils/trackBox';
|
|
3
3
|
import { IRenderVirtualListItem } from './models';
|
|
4
|
-
import { Id } from './types';
|
|
5
|
-
import { MethodsForSelectingTypes } from './enums/method-for-selecting-types';
|
|
6
4
|
import { IRenderVirtualListCollection } from './models/render-collection.model';
|
|
5
|
+
import { MethodsForSelectingTypes } from './enums/method-for-selecting-types';
|
|
6
|
+
import { FocusAlignment, Id } from './types';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
export declare class NgVirtualListService {
|
|
9
9
|
protected _$unsubscribe: Subject<void>;
|
|
@@ -24,7 +24,11 @@ export declare class NgVirtualListService {
|
|
|
24
24
|
selectByClick: boolean;
|
|
25
25
|
collapseByClick: boolean;
|
|
26
26
|
listElement: HTMLDivElement | null;
|
|
27
|
-
|
|
27
|
+
private _$displayItems;
|
|
28
|
+
readonly $displayItems: import("rxjs").Observable<IRenderVirtualListCollection>;
|
|
29
|
+
private _collection;
|
|
30
|
+
set collection(v: IRenderVirtualListCollection);
|
|
31
|
+
get collection(): IRenderVirtualListCollection;
|
|
28
32
|
constructor();
|
|
29
33
|
setSelectedIds(ids: Array<Id> | Id | undefined): void;
|
|
30
34
|
setCollapsedIds(ids: Array<Id>): void;
|
|
@@ -43,8 +47,8 @@ export declare class NgVirtualListService {
|
|
|
43
47
|
*/
|
|
44
48
|
collapse(data: IRenderVirtualListItem | undefined, collapsed?: boolean | undefined): void;
|
|
45
49
|
initialize(trackBox: TrackBox): void;
|
|
46
|
-
itemToFocus: ((element: HTMLElement, position: number) => void) | undefined;
|
|
47
|
-
focus(element: HTMLElement): void;
|
|
50
|
+
itemToFocus: ((element: HTMLElement, position: number, align: FocusAlignment) => void) | undefined;
|
|
51
|
+
focus(element: HTMLElement, align?: FocusAlignment): void;
|
|
48
52
|
areaFocus(id: Id | null): void;
|
|
49
53
|
generateComponentId(): number;
|
|
50
54
|
destroy(): void;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FocusAlignments } from "../enums";
|
|
2
|
+
/**
|
|
3
|
+
* Focus Alignment
|
|
4
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts
|
|
5
|
+
* @author Evgenii Grebennikov
|
|
6
|
+
* @email djonnyx@gmail.com
|
|
7
|
+
*/
|
|
8
|
+
export declare type FocusAlignment = FocusAlignments | 'none' | 'start' | 'center' | 'end';
|
package/lib/types/index.d.ts
CHANGED