XIOGENE

🚀 A high-performance web-based development kit for POS and IoT devices. Smooth, customizable, and developer-friendly.

⚡A powerful API for implementing components of varying functionality and complexity.

💻 Works correctly in all browsers and platforms.

💪 The software portion of the project was completed without a single line of code written using AI (artificial intelligence)!

Angular version 20.X.X.

Documentation

📦 Installation

npm i xiogene

🚀 Quick Start

<x-virtual-scroll-view #scrollView class="scroll-view" direction="both">
  <div class="scroll-view__background" [style.width.px]="3000" [style.height.px]="3000" [class.grabbing]="scrollView.$grabbing | async"></div>
</x-virtual-scroll-view>

<x-virtual-list [items]="items" [bufferSize]="5" [itemRenderer]="itemRenderer" [dynamicSize]="false" [itemSize]="64"></x-virtual-list>

<ng-template #itemRenderer let-data="data">
  @if (data) {
      <span>{{data.name}}</span>
  }
</ng-template>

items = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `Item #${i}` }));

📚 API

NgVirtualSCrollViewComponent

Inputs

| Property | Type | Description | |---|---|---| | animationParams | IAnimationParams? = { scrollToItem: 150, navigateByKeyboard: 50 } | Animation parameters. The default value is "{ scrollToItem: 150, navigateByKeyboard: 50 }". | | clickDistance | number? = 40 | The maximum scroll distance at which a click event is triggered. | | direction | Direction? = 'both' | Determines the direction in which elements are placed. Default value is "both". | | id | number | Readonly. Returns the unique identifier of the component. | | langTextDir | TextDirection? = 'ltr' | A string indicating the direction of text for the locale. Can be either "ltr" (left-to-right) or "rtl" (right-to-left). | | loading | boolean? = false | If true, the scrollBar goes into loading state. The default value is false. | | maxMotionBlur | number = 0.5 | Maximum motion blur effect. The default value is 0.5. | | motionBlur | number | 'disabled' = 0.15 | Motion blur effect. The default value is 0.25. | | motionBlurEnabled | boolean = false | Determines whether to apply motion blur or not. The default value is false. | | overscrollEnabled | boolean? = true | Determines whether the overscroll (re-scroll) feature will work. The default value is "true". | | overlappingScrollbar | boolean? = false | Determines whether the scroll bar will overlap the list. The default value is "false". | | scrollLeftOffset | FloatOrPersentageValue = 0 | Sets the scroll left offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | scrollRightOffset | FloatOrPersentageValue = 0 | Sets the scroll right offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | scrollTopOffset | FloatOrPersentageValue = 0 | Sets the scroll top offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | scrollBottomOffset | FloatOrPersentageValue = 0 | Sets the scroll bottom offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | snapScrollToLeft | boolean? = true | Determines whether the scrollbar is snapped to the left of the scroller. The default value is "true". That is, if snapScrollToLeft and snapScrollToRight are enabled, the scroller will initially snap to the left; if you move the scrollbar right, the scroller will snap to the right. If snapScrollToLeft is disabled and snapScrollToRight is enabled, the scroller will snap to the right; If you move the scrollbar left, the scroller will snap to the left. If both snapScrollToLeft and snapScrollToRight are disabled, the scroller will never snap to the left or right. | | snapScrollToRight | boolean? = true | Determines whether the scrollbar is snapped to the right of the scroller. The default value is "true". That is, if snapScrollToRight and snapScrollToRight are enabled, the scroller will initially snap to the left; if you move the scrollbar right, the scroller will snap to the right. If snapScrollToLeft is disabled and snapScrollToRight is enabled, the scroller will snap to the right; If you move the scrollbar left, the scroller will snap to the left. If both snapScrollToLeft and snapScrollToRight are disabled, the scroller will never snap to the left or right. | | snapScrollToTop | boolean? = true | Determines whether the scrollbar is snapped to the top of the scroller. The default value is "true". That is, if snapScrollToTop and snapScrollToBottom are enabled, the scroller will initially snap to the top; if you move the scrollbar down, the scroller will snap to the bottom. If snapScrollToTop is disabled and snapScrollToBottom is enabled, the scroller will snap to the bottom; If you move the scrollbar up, the scroller will snap to the top. If both snapScrollToTop and snapScrollToBottom are disabled, the scroller will never snap to the top or bottom. | | snapScrollToBottom | boolean? = true | Determines whether the scrollbar is snapped to the bottom of the scroller. The default value is "true". That is, if snapScrollToTop and snapScrollToBottom are enabled, the scroller will initially snap to the top; if you move the scrollbar down, the scroller will snap to the bottom. If snapScrollToTop is disabled and snapScrollToBottom is enabled, the scroller will snap to the bottom; If you move the scrollbar up, the scroller will snap to the top. If both snapScrollToTop and snapScrollToBottom are disabled, the scroller will never snap to the top or bottom. | | scrollable | boolean? = true | Determines whether the scrollbar is shown or not. The default value is "true". | | scrollbarEnabled | boolean? = true | Determines whether the scrollbar is shown or not. The default value is "true". | | scrollbarInteractive | boolean? = true | Determines whether scrolling using the scrollbar will be possible. The default value is "true". | | scrollbarMinSize | number? = 80 | Minimum scrollbar size. | | scrollbarThickness | number? = 6 | Scrollbar thickness. | | scrollbarThumbRenderer | TemplateRef | null = null | Scrollbar customization template. | | scrollbarThumbParams | {[propName: string]: any;} | null | Additional options for the scrollbar. | | scrollBehavior | ScrollBehavior? = 'smooth' | Defines the scrolling behavior for any element on the page. The default value is "smooth". | | scrollingSettings | IScrollingSettings = {frictionalForce: 0.035, mass: 0.005, maxDistance: 100000, maxDuration: 4000, speedScale: 10, optimization: true} | Scrolling settings. |

Outputs

| Event | Type | Description | |---|---|---| | onScroll | (IScrollEvent) => void | Fires when the list has been scrolled. | | onScrollEnd | (IScrollEvent) => void | Fires when the list has completed scrolling. | | onViewportChange | ISize | Fires when the viewport size is changed. | | onScrollReachLeft | void | Fires when the scroll reaches the left. | | onScrollReachRight | void | Fires when the scroll reaches the right. | | onScrollReachTop | void | Fires when the scroll reaches the top. | | onScrollReachBottom | void | Fires when the scroll reaches the bottom. |

Methods

| Method | Type | Description | |--|--|--| | scrollTo | (options: IScrollOptions) => Array | null | The method scrolls the scroll view and returns the animation ids if the behavior is set to smooth or null if the behavior is set to auto, instant, or not set. |

XVirtualListComponent

Inputs

| Property | Type | Description | |---|---|---| | alignment | Alignment | Determines the alignment of the list. Two modes are available: none and center. The center mode aligns the list items to the center of the viewport, ideal for use with the itemTransform property. The none mode means no alignment. The default value is none. | | animationParams | IAnimationParams? = { scrollToItem: 150, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 } | Animation parameters. The default value is "{ scrollToItem: 150, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 }". | | bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. | | clickDistance | number? = 40 | The maximum scroll distance at which a click event is triggered. | | collapsedIds | Array<Id> | Sets the collapsed items. | | collapseByClick | boolean? = true | If false, the element is collapsed using the config.collapse method passed to the template; if true, the element is collapsed by clicking on it. The default value is true. | | collapsingMode | CollapsingMode | Mode for collapsing list items. Default value is none. none - List items are not selectable. multi-collapse - List items are collapsed one by one. 'accordion' - Accordion collapsible list items. Default value is multi-collapse. | | collectionMode | CollectionMode? = 'normal' | Determines the action modes for collection elements. Default value is normal. | | divides | number = 1 | Column or row numbers. The default value is 1. | | direction | Direction? = 'vertical' | Determines the direction in which elements are placed. Default value is "vertical". | | dynamicSize | boolean? = true | If true, items in the list may have different sizes, and the itemSize property must be specified to adjust the sizes of items in the unallocated area. If false then the items in the list have a fixed size specified by the itemSize property. The default value is true. | | enabledBufferOptimization | boolean? = false | Experimental! Enables buffer optimization. Can only be used if items in the collection are not added or updated. | | id | number | Readonly. Returns the unique identifier of the component. | | items | IVirtualListCollection | Collection of list items. The collection of elements must be immutable. | | itemSize | number | 'viewport' = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. If the dynamicSize property is true, the items in the list can have different sizes, and you must specify the itemSize property to adjust the sizes of the items in the unallocated area. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. | | itemTransform | ItemTransform | null = null | Custom transformation of element's position, rotation, scale, opacity and zIndex. The default value is null. | | itemRenderer | TemplateRef | Rendering element template. | | itemConfigMap | IVirtualListItemConfigMap? | Sets sticky position, fullSize, collapsable and selectable for the list item element. If sticky position is greater than 0, then sticky position is applied. If the sticky value is greater than 0, then the sticky position mode is enabled for the element. 1 - position start, 2 - position end. Default value is 0. selectable determines whether an element can be selected or not. Default value is true. collapsable determines whether an element with a sticky property greater than zero can collapse and collapse elements in front that do not have a sticky property. fullSize determines the size of an element when rendering lists with cell divisions. If sticky is 1 or 2, fullSize automatically becomes true. The default value is false. | | langTextDir | TextDirection? = 'ltr' | A string indicating the direction of text for the locale. Can be either "ltr" (left-to-right) or "rtl" (right-to-left). | | loading | boolean? = false | If true, the scrollBar goes into loading state. The default value is false. | | maxBufferSize | number? = 10 | Maximum number of elements outside the scope of visibility. Default value is 10. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. | | maxMotionBlur | number = 0.5 | Maximum motion blur effect. The default value is 0.5. | | selectingMode | SelectingMode | Method for selecting list items. Default value is 'none'. 'select' - List items are selected one by one. 'multi-select' - Multiple selection of list items. 'none' - List items are not selectable. | | minItemSize | number | 'viewport' = 1 | If the dynamicSize property is enabled, the minimum size of the element is set. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. | | maxItemSize | number | 'viewport' = Number.MAX_SAFE_INTEGER | If the dynamicSize property is enabled, the maximum size of the element is set. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. | | motionBlur | number | 'disabled' = 0.15 | Motion blur effect. The default value is 0.25. | | motionBlurEnabled | boolean = false | Determines whether to apply motion blur or not. The default value is false. | | overscrollEnabled | boolean? = true | Determines whether the overscroll (re-scroll) feature will work. The default value is "true". | | overlappingScrollbar | boolean? = false | Determines whether the scroll bar will overlap the list. The default value is "false". | | selectByClick | boolean? = true | If false, the element is selected using the config.select method passed to the template; if true, the element is selected by clicking on it. The default value is true. | | stickyEnabled | boolean? = false | Determines whether items with the given sticky in itemConfigMap will stick to the edges. Default value is "false". | | selectedIds | Array<Id> | Id | null | Sets the selected items. | | screenReaderMessage | string? = "Showing items $1 to $2" | Message for screen reader. The message format is: "some text $1 some text $2", where $1 is the number of the first element of the screen collection, $2 is the number of the last element of the screen collection. | | waitForPreparation | boolean? = true | If true, it will wait until the list items are fully prepared before displaying them.. The default value is true. | | scrollStartOffset | FloatOrPersentageValue = 0 | Sets the scroll start offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | scrollEndOffset | FloatOrPersentageValue = 0 | Sets the scroll end offset value. Can be specified in absolute or percentage values. Supports arithmetic expressions of addition 50% + 25 or subtraction 50% - 25. Default value is "0". | | snapToItem | boolean = false | Snap to an item. The default value is false. | | snapToItemAlign | SnapToItemAlign = SnapToItemAligns.CENTER | Alignment for snapToItem. Available values ​​are start, center, and end. The default value is center. | | snappingDistance | SnappingDistance = "25%" | Snapping activation distance. Can be specified as a percentage of the element size or in absolute values. The default value is 25%. | | snappingMethod | SnappingMethod = SnappingMethods.STANDART | Snapping method. Default value is SnappingMethods.STANDART. SnappingMethods.STANDART - Classic group visualization. SnappingMethods.ADVANCED - A mask is applied to the viewport area so that the background is displayed underneath the attached group. | | snapScrollToStart | boolean? = true | Determines whether the scroll will be anchored to the start of the list. Default value is "true". This property takes precedence over the snapScrollToEnd property. That is, if snapScrollToStart and snapScrollToEnd are enabled, the list will initially snap to the beginning; if you move the scroll bar to the end, the list will snap to the end. If snapScrollToStart is disabled and snapScrollToEnd is enabled, the list will snap to the end; if you move the scroll bar to the beginning, the list will snap to the beginning. If both snapScrollToStart and snapScrollToEnd are disabled, the list will never snap to the beginning or end. In the spreadingMode=SpreadingModes.INFINITY mode, the snapScrollToStart property is automatically disabled, since the list has no beginning or end. | | snapScrollToEnd | boolean? = true | Determines whether the scroll will be anchored to the утв of the list. Default value is "true". That is, if snapScrollToStart and snapScrollToEnd are enabled, the list will initially snap to the beginning; if you move the scroll bar to the end, the list will snap to the end. If snapScrollToStart is disabled and snapScrollToEnd is enabled, the list will snap to the end; if you move the scroll bar to the beginning, the list will snap to the beginning. If both snapScrollToStart and snapScrollToEnd are disabled, the list will never snap to the beginning or end. In the spreadingMode=SpreadingModes.INFINITY mode, the snapScrollToEnd property is automatically disabled, since the list has no beginning or end. | | snapToEndTransitionInstantOffset | number? = 0 | Sets the offset value; if the scroll area value is exceeded, the scroll animation will be disabled. Default value is "0". | | scrollbarEnabled | boolean? = true | Determines whether the scrollbar is shown or not. The default value is "true". | | scrollbarInteractive | boolean? = true | Determines whether scrolling using the scrollbar will be possible. The default value is "true". | | scrollbarMinSize | number? = 80 | Minimum scrollbar size. | | scrollbarThickness | number? = 6 | Scrollbar thickness. | | scrollbarThumbRenderer | TemplateRef | null = null | Scrollbar customization template. | | scrollbarThumbParams | {[propName: string]: any;} | null | Additional options for the scrollbar. | | scrollBehavior | ScrollBehavior? = 'smooth' | Defines the scrolling behavior for any element on the page. The default value is "smooth". | | scrollingSettings | IScrollingSettings = {frictionalForce: 0.035, mass: 0.005, maxDistance: 100000, maxDuration: 4000, speedScale: 10, optimization: true} | Scrolling settings. | | scrollingOneByOne | boolean = false | Specifies whether to scroll one item at a time if true and the scrollToItem property is set. The default value is false. | | spreadingMode | SpreadingMode ='standart' | The order of list elements. Available values ​​are standard and infinity. normal — list elements are ordered according to the collection sequence. infinity — list elements are ordered cyclically, forming an infinite list. When set to infinity, the alignment property is forced to the value Alignments.CENTER, the scrollbarEnabled property is forced to the false. The default value is standard. | | trackBy | string? = 'id' | The name of the property by which tracking is performed. | | zIndexWhenSelecting | string | null = null | Defines the zIndex when a list item is selected. The default value is null. |

Outputs

| Event | Type | Description | |---|---|---| | onSnapItem | Id | Emit the component ID when an element crosses the alignment line specified by the snapToItemAlign property. | | onItemClick | IRenderVirtualListItem | null | Fires when an element is clicked. | | onScroll | (IScrollEvent) => void | Fires when the list has been scrolled. | | onScrollEnd | (IScrollEvent) => void | Fires when the list has completed scrolling. | | onSelect | Array<Id> | Id | null | Fires when an elements are selected. | | onCollapse | Array<Id> | Id | null | Fires when elements are collapsed. | | onViewportChange | ISize | Fires when the viewport size is changed. | | onScrollReachStart | void | Fires when the scroll reaches the start. | | onScrollReachEnd | void | Fires when the scroll reaches the end. |

Methods

| Method | Type | Description | |--|--|--| | scrollTo | (id: Id, (cb: () => void) | null = null, options: IScrollOptions | null = null) | The method scrolls the list to the element with the given id and returns the value of the scrolled area. | | scrollToStart | (cb: (() => void) | null = null, options: IScrollOptions | null = null) | Scrolls the scroll area to the first item in the collection. | | scrollToEnd | (cb: (() => void) | null = null, options: IScrollOptions | null = null) | Scrolls the list to the end of the content height. | | getItemBounds | (id: Id) => ISize | null | Returns the bounds of an element with a given id | | focus | Id, align: FocusAlignment = FocusAlignments.NONE | Focus an list item by a given id. | | preventSnapping | | Prevents the list from snapping to its start or end edge. |

Template API

<ng-template #itemRenderer let-data="data" let-config="config" let-measures="measures" let-api="api">
  <!-- content -->
</ng-template>

Properties

| Property | Type | Description | |--|--|--| | api | XVirtualListPublicService | List API Provider. | | data | {[id: Id ], [otherProps: string]: any;} | Collection item data. | | config | IDisplayObjectConfig | Display object configuration. A set of select, collapse, focus and grabbing properties are also provided. | | measures | IDisplayObjectMeasures | null | Display object metrics. |

XVirtualClickModule

Virtual click directive

To correctly handle interactive elements within a list, such as buttons, you need to use the VirtualClick directive.

import { XVirtualListModule, XVirtualClickModule } from 'xiogene';

@Component({
  selector: 'example',
  imports: [XVirtualListModule, XVirtualClickModule],
})

<ng-template #itemRenderer let-data="data" let-config="config" let-api="api">
  @if (data) {
    <div virtualClick (onVirtualClick)="api.select(data.id, true)">
      <span>{{data.name}}</span>
    </div>
  }
</ng-template>

📄 License

MIT License

Copyright (c) 2026 djonnyx (Evgenii Alexandrovich 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 in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.