ng-virtual-list 20.0.30 → 20.0.32

package/README.md

@@ -479,12 +479,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.1.38 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.38](https://www.npmjs.com/package/ng-virtual-list/v/19.1.38) |
-| 18.x | 18.0.22 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.22](https://www.npmjs.com/package/ng-virtual-list/v/18.0.22) |
-| 17.x | 17.0.20 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.20](https://www.npmjs.com/package/ng-virtual-list/v/17.0.20) |
-| 16.x | 16.0.22 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.22](https://www.npmjs.com/package/ng-virtual-list/v/16.0.22) |
-| 15.x | 15.0.21 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.21](https://www.npmjs.com/package/ng-virtual-list/v/15.0.21) |
-| 14.x | 14.0.22 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.22](https://www.npmjs.com/package/ng-virtual-list/v/14.0.22) |
+| 19.x | 19.1.40 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.40](https://www.npmjs.com/package/ng-virtual-list/v/19.1.40) |
+| 18.x | 18.0.24 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.24](https://www.npmjs.com/package/ng-virtual-list/v/18.0.24) |
+| 17.x | 17.0.22 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.22](https://www.npmjs.com/package/ng-virtual-list/v/17.0.22) |
+| 16.x | 16.0.24 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.24](https://www.npmjs.com/package/ng-virtual-list/v/16.0.24) |
+| 15.x | 15.0.23 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.23](https://www.npmjs.com/package/ng-virtual-list/v/15.0.23) |
+| 14.x | 14.0.24 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.24](https://www.npmjs.com/package/ng-virtual-list/v/14.0.24) |
 
 <br/>
 

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-virtual-list",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,41 +1,30 @@
-{
-  "name": "ng-virtual-list",
-  "version": "20.0.30",
-  "author": {
-    "name": "Evgenii Grebennikov",
-    "email": "djonnyx@gmail.com"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/djonnyx/ng-virtual-list/tree/main/projects/ng-virtual-list",
-  "keywords": [
-    "ng",
-    "angular",
-    "virtual",
-    "virtualized",
-    "list",
-    "group",
-    "grouped",
-    "scroll",
-    "scrolling",
-    "scroller"
-  ],
-  "peerDependencies": {
-    "@angular/common": "^20.0.4",
-    "@angular/core": "^20.0.4"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ng-virtual-list.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ng-virtual-list.mjs"
-    }
-  }
+{
+  "name": "ng-virtual-list",
+  "version": "20.0.32",
+  "author": {
+    "name": "Evgenii Grebennikov",
+    "email": "djonnyx@gmail.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/djonnyx/ng-virtual-list/tree/main/projects/ng-virtual-list",
+  "keywords": [
+    "ng",
+    "angular",
+    "virtual",
+    "virtualized",
+    "list",
+    "group",
+    "grouped",
+    "scroll",
+    "scrolling",
+    "scroller"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^20.0.4",
+    "@angular/core": "^20.0.4"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
 }

package/src/lib/components/ng-virtual-list-item.component.html

@@ -0,0 +1,12 @@
+@let item = data();
+@let renderer = itemRenderer();
+
+@if (item) {
+    <li #listItem part="item" class="ngvl-item__container" [ngClass]="{'snapped': item.config.snapped,
+        'snapped-out': item.config.snappedOut}">
+        @if (renderer) {
+            <ng-container [ngTemplateOutlet]="renderer"
+                [ngTemplateOutletContext]="{data: item.data || {}, config: item.config}" />
+        }
+    </li>
+}

package/src/lib/components/ng-virtual-list-item.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.ngvl-item__container {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #ffffff;
+    width: inherit;
+    height: inherit;
+}

package/src/lib/components/ng-virtual-list-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgVirtualListItemComponent } from './ng-virtual-list-item.component';
+
+describe('NgVirtualListItemComponent', () => {
+  let component: NgVirtualListItemComponent;
+  let fixture: ComponentFixture<NgVirtualListItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgVirtualListItemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NgVirtualListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/ng-virtual-list-item.component.ts

@@ -0,0 +1,108 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, signal, TemplateRef } from '@angular/core';
+import { IRenderVirtualListItem } from '../models/render-item.model';
+import { ISize } from '../types';
+import {
+  POSITION_ABSOLUTE, POSITION_STICKY, PX, SIZE_100_PERSENT, SIZE_AUTO, TRANSLATE_3D, VISIBILITY_HIDDEN,
+  VISIBILITY_VISIBLE, ZEROS_TRANSLATE_3D,
+} from '../const';
+
+/**
+ * Virtual list item component
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+@Component({
+  selector: 'ng-virtual-list-item',
+  imports: [CommonModule],
+  templateUrl: './ng-virtual-list-item.component.html',
+  styleUrl: './ng-virtual-list-item.component.scss',
+  host: {
+    'class': 'ngvl__item',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgVirtualListItemComponent {
+  private static __nextId: number = 0;
+
+  private _id!: number;
+  get id() {
+    return this._id;
+  }
+
+  data = signal<IRenderVirtualListItem | undefined>(undefined);
+  private _data: IRenderVirtualListItem | undefined = undefined;
+  set item(v: IRenderVirtualListItem | undefined) {
+    if (this._data === v) {
+      return;
+    }
+
+    const data = this._data = v;
+
+    if (data) {
+      const styles = this._elementRef.nativeElement.style;
+      styles.zIndex = String(data.config.sticky);
+      if (data.config.snapped) {
+        styles.transform = ZEROS_TRANSLATE_3D;
+        styles.position = POSITION_STICKY;
+      } else {
+        styles.position = POSITION_ABSOLUTE;
+        styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
+      }
+      styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : SIZE_100_PERSENT;
+      styles.width = data.config.isVertical ? SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
+    }
+
+    this.data.set(v);
+  }
+
+  get item() {
+    return this._data;
+  }
+
+  get itemId() {
+    return this._data?.id;
+  }
+
+  itemRenderer = signal<TemplateRef<any> | undefined>(undefined);
+
+  set renderer(v: TemplateRef<any> | undefined) {
+    this.itemRenderer.set(v);
+  }
+
+  private _elementRef: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);
+  get element() {
+    return this._elementRef.nativeElement;
+  }
+
+  constructor() {
+    this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
+      ? 0 : NgVirtualListItemComponent.__nextId + 1;
+  }
+
+  getBounds(): ISize {
+    const el: HTMLElement = this._elementRef.nativeElement,
+      { width, height } = el.getBoundingClientRect();
+    return { width, height };
+  }
+
+  show() {
+    const styles = this._elementRef.nativeElement.style;
+    if (styles.visibility === VISIBILITY_VISIBLE) {
+      return;
+    }
+
+    styles.visibility = VISIBILITY_VISIBLE;
+  }
+
+  hide() {
+    const styles = this._elementRef.nativeElement.style;
+    if (styles.visibility === VISIBILITY_HIDDEN) {
+      return;
+    }
+
+    styles.visibility = VISIBILITY_HIDDEN;
+    styles.transform = ZEROS_TRANSLATE_3D;
+  }
+}

package/src/lib/const/index.ts

@@ -0,0 +1,67 @@
+import { Directions } from "../enums/directions";
+
+export const DEFAULT_ITEM_SIZE = 24;
+
+export const DEFAULT_ITEMS_OFFSET = 2;
+
+export const DEFAULT_LIST_SIZE = 400;
+
+export const DEFAULT_SNAP = false;
+
+export const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
+
+export const DEFAULT_DYNAMIC_SIZE = false;
+
+export const TRACK_BY_PROPERTY_NAME = 'id';
+
+export const DEFAULT_DIRECTION = Directions.VERTICAL;
+
+export const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
+
+export const MAX_SCROLL_TO_ITERATIONS = 5;
+
+// presets
+
+export const BEHAVIOR_AUTO = 'auto';
+
+export const BEHAVIOR_INSTANT = 'instant';
+
+export const BEHAVIOR_SMOOTH = 'smooth';
+
+export const VISIBILITY_VISIBLE = 'visible';
+
+export const VISIBILITY_HIDDEN = 'hidden';
+
+export const SIZE_100_PERSENT = '100%';
+
+export const SIZE_AUTO = 'auto';
+
+export const POSITION_ABSOLUTE = 'absolute';
+
+export const POSITION_STICKY = 'sticky';
+
+export const TRANSLATE_3D = 'translate3d';
+
+export const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;
+
+export const TOP_PROP_NAME = 'top';
+
+export const LEFT_PROP_NAME = 'left';
+
+export const X_PROP_NAME = 'x';
+
+export const Y_PROP_NAME = 'y';
+
+export const WIDTH_PROP_NAME = 'width';
+
+export const HEIGHT_PROP_NAME = 'height';
+
+export const PX = 'px';
+
+export const SCROLL = 'scroll';
+
+export const SCROLL_END = 'scrollend';
+
+export const CLASS_LIST_VERTICAL = 'vertical';
+
+export const CLASS_LIST_HORIZONTAL = 'horizontal';

package/src/lib/enums/direction.ts

@@ -0,0 +1,9 @@
+import { Directions } from "./directions";
+
+/**
+ * Axis of the arrangement of virtual list elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/direction.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export type Direction = Directions | 'hotizontal' | 'vertical';

package/src/lib/enums/directions.ts

@@ -0,0 +1,16 @@
+/**
+ * Axis of the arrangement of virtual list elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/directions.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export enum Directions {
+    /**
+     * Horizontal axis.
+     */
+    HORIZONTAL = 'horizontal',
+    /**
+     * Vertical axis.
+     */
+    VERTICAL = 'vertical',
+}

package/src/lib/enums/index.ts

@@ -0,0 +1,7 @@
+import { Directions } from "./directions";
+import { Direction } from "./direction";
+
+export {
+    Directions
+};
+export type { Direction };

package/src/lib/models/collection.model.ts

@@ -0,0 +1,9 @@
+import { IVirtualListItem } from "./item.model";
+
+/**
+ * Virtual list elements collection interface
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/collection.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IVirtualListCollection extends Array<IVirtualListItem> { };

package/src/lib/models/index.ts

@@ -0,0 +1,13 @@
+import { ScrollDirection } from './scroll-direction.model';
+import { IScrollEvent } from './scroll-event.model';
+import { IVirtualListItem } from './item.model';
+import { IVirtualListStickyMap } from './sticky-map.model';
+import { IVirtualListCollection } from './collection.model';
+
+export type {
+    ScrollDirection,
+    IScrollEvent,
+    IVirtualListItem,
+    IVirtualListStickyMap,
+    IVirtualListCollection,
+}

package/src/lib/models/item.model.ts

@@ -0,0 +1,15 @@
+import { Id } from "../types/id";
+
+/**
+ * Virtual list element model
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/item.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IVirtualListItem {
+    /**
+     * Unique identifier of the element.
+     */
+    id: Id;
+    [x: string]: any;
+};

package/src/lib/models/render-collection.model.ts

@@ -0,0 +1,9 @@
+import { IRenderVirtualListItem } from "./render-item.model";
+
+/**
+ * Virtual list screen elements collection interface
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/render-collection.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IRenderVirtualListCollection extends Array<IRenderVirtualListItem> { };

package/src/lib/models/render-item-config.model.ts

@@ -0,0 +1,33 @@
+/**
+ * Object with configuration parameters for IRenderVirtualListItem
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/render-item-config.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ * 
+ */
+export interface IRenderVirtualListItemConfig {
+    /**
+     * If greater than 0, the element will have a sticky position with the given zIndex.
+     */
+    sticky: number;
+    /**
+     * Specifies whether the element will snap.
+     */
+    snap: boolean;
+    /**
+     * Indicates that the element is snapped.
+     */
+    snapped: boolean;
+    /**
+     * Indicates that the element is being shifted by another snap element.
+     */
+    snappedOut: boolean;
+    /**
+     * Indicates that the element is a vertical list item.
+     */
+    isVertical: boolean;
+    /**
+     * Specifies that the element adapts to the size of its content.
+     */
+    dynamic: boolean;
+}

package/src/lib/models/render-item.model.ts

@@ -0,0 +1,29 @@
+import { IRect } from "../types";
+import { Id } from "../types/id";
+import { IVirtualListItem } from "./item.model";
+import { IRenderVirtualListItemConfig } from "./render-item-config.model";
+
+/**
+ * List screen element model
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/render-item.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IRenderVirtualListItem {
+    /**
+     * Unique identifier of the element.
+     */
+    id: Id;
+    /**
+     * Element metrics.
+     */
+    measures: IRect;
+    /**
+     * Element data.
+     */
+    data: IVirtualListItem;
+    /**
+     * Object with configuration parameters for IRenderVirtualListItem.
+     */
+    config: IRenderVirtualListItemConfig;
+};

package/src/lib/models/scroll-direction.model.ts

@@ -0,0 +1,5 @@
+/**
+ * A value of -1 indicates the direction is up or left (if the list direction is horizontal).
+ * A value of 1 indicates the direction is down or right (if the list direction is horizontal).
+ */
+export type ScrollDirection = -1 | 1 | 0;

package/src/lib/models/scroll-event.model.ts

@@ -0,0 +1,51 @@
+import { ScrollDirection } from "./scroll-direction.model";
+
+/**
+ * Interface IScrollEvent.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/scroll-event.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IScrollEvent {
+    /**
+     * Scroll area offset
+     */
+    scrollSize: number;
+    /**
+     * Full size of the scroll area
+     */
+    scrollWeight: number;
+    /**
+     * Viewport size
+     */
+    size: number;
+    /**
+     * Size of the list of elements
+     */
+    listSize: number;
+    /**
+     * Specifies whether the list orientation is vertical.
+     */
+    isVertical: boolean;
+    /**
+     * A value of -1 indicates the direction is up or left (if the list direction is horizontal).
+     * A value of 1 indicates the direction is down or right (if the list direction is horizontal).
+     */
+    direction: ScrollDirection;
+    /**
+     * If true then indicates that the list has been scrolled to the end.
+     */
+    isStart: boolean;
+    /**
+     * If true then indicates that the list has been scrolled to the end.
+     */
+    isEnd: boolean;
+    /**
+     * Delta of marked and unmarked area
+     */
+    delta: number;
+    /**
+     * Scroll delta
+     */
+    scrollDelta: number;
+}

package/src/lib/models/sticky-map.model.ts

@@ -0,0 +1,12 @@
+/**
+ * Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export interface IVirtualListStickyMap {
+    /**
+     * Sets zIndex for the element ID. If zIndex is greater than 0, then sticky position is applied.
+     */
+    [id: string]: number;
+}

package/src/lib/ng-virtual-list.component.html

@@ -0,0 +1,5 @@
+<div #container part="scroller" class="ngvl__container">
+  <ul #list part="list" class="ngvl__list">
+    <ng-container #renderersContainer></ng-container>
+  </ul>
+</div>

package/src/lib/ng-virtual-list.component.scss

@@ -0,0 +1,28 @@
+:host {
+    display: block;
+    width: 400px; // default
+    overflow: hidden;
+}
+
+:host(.horizontal) {
+    height: 48px; // default
+}
+
+:host(.vertical) {
+    height: 320px; // default
+}
+
+.ngvl__container {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+
+.ngvl__list {
+    position: relative;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}

package/src/lib/ng-virtual-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgVirtualListComponent } from './ng-virtual-list.component';
+
+describe('NgVirtualListComponent', () => {
+  let component: NgVirtualListComponent;
+  let fixture: ComponentFixture<NgVirtualListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgVirtualListComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(NgVirtualListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});