ng-virtual-list 17.0.20 → 17.0.22

package/README.md

@@ -479,7 +479,7 @@ Methods
 
 MIT License
 
-Copyright (c) 2025 Evgenii Grebennikov
+Copyright (c) 2025 djonnyx (Evgenii Grebennikov)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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,43 +1,30 @@
-{
-  "name": "ng-virtual-list",
-  "version": "17.0.20",
-  "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": "^17.3.0",
-    "@angular/core": "^17.3.0"
-  },
-  "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",
-      "esm2022": "./esm2022/ng-virtual-list.mjs",
-      "esm": "./esm2022/ng-virtual-list.mjs",
-      "default": "./fesm2022/ng-virtual-list.mjs"
-    }
-  }
+{
+  "name": "ng-virtual-list",
+  "version": "17.0.22",
+  "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": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
 }

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

@@ -0,0 +1,9 @@
+@if (data(); as item) {
+    <li #listItem part="item" class="ngvl-item__container" [ngClass]="{'snapped': item.config.snapped,
+        'snapped-out': item.config.snappedOut}">
+        @if (itemRenderer(); as 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,111 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, 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/17.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',
+  standalone: false,
+  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;
+  }
+
+  private _cdr = inject(ChangeDetectorRef);
+
+  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);
+
+    this._cdr.markForCheck();
+  }
+
+  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/{lib/enums/direction.d.ts → src/lib/enums/direction.ts}

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

package/{lib/enums/directions.d.ts → src/lib/enums/directions.ts}

@@ -1,16 +1,16 @@
-/**
- * Axis of the arrangement of virtual list elements.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/enums/directions.ts
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-export declare enum Directions {
-    /**
-     * Horizontal axis.
-     */
-    HORIZONTAL = "horizontal",
-    /**
-     * Vertical axis.
-     */
-    VERTICAL = "vertical"
-}
+/**
+ * Axis of the arrangement of virtual list elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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/{lib/enums/index.d.ts → src/lib/enums/index.ts}

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

package/{lib/models/collection.model.d.ts → src/lib/models/collection.model.ts}

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

@@ -1,6 +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, };
+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/{lib/models/item.model.d.ts → src/lib/models/item.model.ts}

@@ -1,14 +1,15 @@
-import { Id } from "../types/id";
-/**
- * Virtual list element model
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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;
-}
+import { Id } from "../types/id";
+
+/**
+ * Virtual list element model
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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/{lib/models/render-collection.model.d.ts → src/lib/models/render-collection.model.ts}

@@ -1,9 +1,9 @@
-import { IRenderVirtualListItem } from "./render-item.model";
-/**
- * Virtual list screen elements collection interface
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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> {
-}
+import { IRenderVirtualListItem } from "./render-item.model";
+
+/**
+ * Virtual list screen elements collection interface
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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/{lib/models/render-item-config.model.d.ts → src/lib/models/render-item-config.model.ts}

@@ -1,33 +1,33 @@
-/**
- * Object with configuration parameters for IRenderVirtualListItem
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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;
-}
+/**
+ * Object with configuration parameters for IRenderVirtualListItem
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.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/{lib/models/render-item.model.d.ts → src/lib/models/render-item.model.ts}

@@ -1,28 +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/17.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;
-}
+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/17.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/{lib/models/scroll-direction.model.d.ts → src/lib/models/scroll-direction.model.ts}

@@ -1,5 +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;
+/**
+ * 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;