ng-virtual-list/fesm2022/ng-virtual-list.mjs.map

🚀 High-performance virtual scrolling for Angular apps. Render 100,000+ items in Angular without breaking a sweat. Smooth, customizable, and developer-friendly.

{"version":3,"file":"ng-virtual-list.mjs","sources":["../../../projects/ng-virtual-list/src/lib/enums/collection-modes.ts","../../../projects/ng-virtual-list/src/lib/enums/directions.ts","../../../projects/ng-virtual-list/src/lib/enums/methods-for-selecting.ts","../../../projects/ng-virtual-list/src/lib/enums/snapping-methods.ts","../../../projects/ng-virtual-list/src/lib/enums/focus-alignments.ts","../../../projects/ng-virtual-list/src/lib/const/index.ts","../../../projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts","../../../projects/ng-virtual-list/src/lib/enums/method-for-selecting-types.ts","../../../projects/ng-virtual-list/src/lib/ng-virtual-list.service.ts","../../../projects/ng-virtual-list/src/lib/utils/validation.ts","../../../projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts","../../../projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.html","../../../projects/ng-virtual-list/src/lib/utils/debounce.ts","../../../projects/ng-virtual-list/src/lib/utils/toggleClassName.ts","../../../projects/ng-virtual-list/src/lib/utils/scrollEvent.ts","../../../projects/ng-virtual-list/src/lib/utils/eventEmitter.ts","../../../projects/ng-virtual-list/src/lib/utils/cacheMap.ts","../../../projects/ng-virtual-list/src/lib/utils/tracker.ts","../../../projects/ng-virtual-list/src/lib/utils/buffer-interpolation.ts","../../../projects/ng-virtual-list/src/lib/utils/trackBox.ts","../../../projects/ng-virtual-list/src/lib/utils/snapping-method.ts","../../../projects/ng-virtual-list/src/lib/utils/browser.ts","../../../projects/ng-virtual-list/src/lib/utils/isDirection.ts","../../../projects/ng-virtual-list/src/lib/utils/isMethodForSelecting.ts","../../../projects/ng-virtual-list/src/lib/utils/object.ts","../../../projects/ng-virtual-list/src/lib/utils/isCollectionMode.ts","../../../projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts","../../../projects/ng-virtual-list/src/lib/ng-virtual-list.component.html","../../../projects/ng-virtual-list/src/public-api.ts","../../../projects/ng-virtual-list/src/ng-virtual-list.ts"],"sourcesContent":["/**\r\n * Action modes for collection elements.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/collection-modes.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum CollectionModes {\r\n    /**\r\n     * When adding elements to the beginning of the collection, the scroll remains at the current position.\r\n     */\r\n    NORMAL = 'normal',\r\n    /**\r\n     * When adding elements to the beginning of the collection, the scroll is shifted by the sum of the sizes of the new elements.\r\n     */\r\n    LAZY = 'lazy',\r\n}","/**\r\n * Axis of the arrangement of virtual list elements.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/directions.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum Directions {\r\n    /**\r\n     * Horizontal axis.\r\n     */\r\n    HORIZONTAL = 'horizontal',\r\n    /**\r\n     * Vertical axis.\r\n     */\r\n    VERTICAL = 'vertical',\r\n}","/**\r\n * Methods for selecting list items.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/methods-for-selecting.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum MethodsForSelecting {\r\n    /**\r\n     * List items are not selectable.\r\n     */\r\n    NONE = 'none',\r\n    /**\r\n     * List items are selected one by one.\r\n     */\r\n    SELECT = 'select',\r\n    /**\r\n     * Multiple selection of list items.\r\n     */\r\n    MULTI_SELECT = 'multi-select',\r\n}","/**\r\n * Snapping method.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum SnappingMethods {\r\n    /**\r\n     * Normal group rendering.\r\n     */\r\n    NORMAL = 'normal',\r\n    /**\r\n     * The group is rendered on a transparent background. List items below the group are not rendered.\r\n     */\r\n    ADVANCED = 'advanced',\r\n}","/**\r\n * Focus Alignments.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum FocusAlignments {\r\n    NONE = 'none',\r\n    START = 'start',\r\n    CENTER = 'center',\r\n    END = 'end',\r\n}","import { CollectionModes, MethodsForSelecting, SnappingMethods } from \"../enums\";\r\nimport { Directions } from \"../enums/directions\";\r\n\r\nexport const DEFAULT_ITEM_SIZE = 24;\r\n\r\nexport const DEFAULT_BUFFER_SIZE = 2;\r\n\r\nexport const DEFAULT_MAX_BUFFER_SIZE = 10;\r\n\r\nexport const DEFAULT_LIST_SIZE = 400;\r\n\r\nexport const DEFAULT_SNAP = false;\r\n\r\nexport const DEFAULT_SELECT_BY_CLICK = true;\r\n\r\nexport const DEFAULT_COLLAPSE_BY_CLICK = true;\r\n\r\nexport const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;\r\n\r\nexport const DEFAULT_DYNAMIC_SIZE = false;\r\n\r\nexport const TRACK_BY_PROPERTY_NAME = 'id';\r\n\r\nexport const DEFAULT_DIRECTION = Directions.VERTICAL;\r\n\r\nexport const DEFAULT_COLLECTION_MODE = CollectionModes.NORMAL;\r\n\r\nexport const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;\r\n\r\nexport const MAX_SCROLL_TO_ITERATIONS = 5;\r\n\r\nexport const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;\r\n\r\nexport const DEFAULT_SELECT_METHOD = MethodsForSelecting.NONE;\r\n\r\nexport const DEFAULT_SCREEN_READER_MESSAGE = 'Showing items $1 to $2';\r\n\r\n// presets\r\n\r\nexport const BEHAVIOR_AUTO = 'auto';\r\n\r\nexport const BEHAVIOR_INSTANT = 'instant';\r\n\r\nexport const BEHAVIOR_SMOOTH = 'smooth';\r\n\r\nexport const DISPLAY_BLOCK = 'block';\r\n\r\nexport const DISPLAY_NONE = 'none';\r\n\r\nexport const OPACITY_0 = '0';\r\n\r\nexport const OPACITY_100 = '100';\r\n\r\nexport const VISIBILITY_VISIBLE = 'visible';\r\n\r\nexport const VISIBILITY_HIDDEN = 'hidden';\r\n\r\nexport const SIZE_100_PERSENT = '100%';\r\n\r\nexport const SIZE_AUTO = 'auto';\r\n\r\nexport const POSITION_ABSOLUTE = 'absolute';\r\n\r\nexport const POSITION_STICKY = 'sticky';\r\n\r\nexport const TRANSLATE_3D = 'translate3d';\r\n\r\nexport const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;\r\n\r\nexport const HIDDEN_ZINDEX = '-1';\r\n\r\nexport const DEFAULT_ZINDEX = '0';\r\n\r\nexport const TOP_PROP_NAME = 'top';\r\n\r\nexport const LEFT_PROP_NAME = 'left';\r\n\r\nexport const X_PROP_NAME = 'x';\r\n\r\nexport const Y_PROP_NAME = 'y';\r\n\r\nexport const WIDTH_PROP_NAME = 'width';\r\n\r\nexport const HEIGHT_PROP_NAME = 'height';\r\n\r\nexport const PX = 'px';\r\n\r\nexport const SCROLL = 'scroll';\r\n\r\nexport const SCROLL_END = 'scrollend';\r\n\r\nexport const CLASS_LIST_VERTICAL = 'vertical';\r\n\r\nexport const CLASS_LIST_HORIZONTAL = 'horizontal';\r\n\r\n// styles\r\n\r\nexport const PART_DEFAULT_ITEM = 'item';\r\n\r\nexport const PART_ITEM_NEW = ' item-new';\r\n\r\nexport const PART_ITEM_ODD = ' item-odd';\r\n\r\nexport const PART_ITEM_EVEN = ' item-even';\r\n\r\nexport const PART_ITEM_SNAPPED = ' item-snapped';\r\n\r\nexport const PART_ITEM_SELECTED = ' item-selected';\r\n\r\nexport const PART_ITEM_COLLAPSED = ' item-collapsed';\r\n\r\nexport const PART_ITEM_FOCUSED = ' item-focused';\r\n\r\n","import { TemplateRef, WritableSignal } from '@angular/core';\r\nimport { Id, ISize } from '../types';\r\nimport { IRenderVirtualListItem } from './render-item.model';\r\n\r\n/**\r\n * Virtual List Item Interface\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport abstract class BaseVirtualListItemComponent {\r\n    abstract get id(): number;\r\n    abstract data: WritableSignal<IRenderVirtualListItem | undefined>;\r\n    abstract regular: boolean;\r\n    abstract set regularLength(v: string)\r\n    abstract set item(v: IRenderVirtualListItem | null | undefined);\r\n    abstract get item(): IRenderVirtualListItem | null | undefined;\r\n    abstract get itemId(): Id | undefined;\r\n    abstract itemRenderer: WritableSignal<TemplateRef<any> | undefined>;\r\n    abstract set renderer(v: TemplateRef<any> | undefined);\r\n    abstract get element(): HTMLElement;\r\n    public abstract getBounds(): ISize;\r\n    public abstract show(): void;\r\n    public abstract hide(): void;\r\n}","/**\r\n * Methods for selecting list items.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/method-for-selecting-types.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport enum MethodsForSelectingTypes {\r\n    /**\r\n     * List items are not selectable.\r\n     */\r\n    NONE = 0,\r\n    /**\r\n     * List items are selected one by one.\r\n     */\r\n    SELECT = 1,\r\n    /**\r\n     * Multiple selection of list items.\r\n     */\r\n    MULTI_SELECT = 2,\r\n}","import { Injectable } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';\r\nimport { Subject, tap } from 'rxjs';\r\nimport { TrackBox } from './utils/trackBox';\r\nimport { IRenderVirtualListItem } from './models';\r\nimport { IRenderVirtualListCollection } from './models/render-collection.model';\r\nimport { FocusAlignments } from './enums';\r\nimport { MethodsForSelectingTypes } from './enums/method-for-selecting-types';\r\nimport { DEFAULT_COLLAPSE_BY_CLICK, DEFAULT_SELECT_BY_CLICK } from './const';\r\nimport { FocusAlignment, Id } from './types';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class NgVirtualListService {\r\n  private _nextComponentId: number = 0;\r\n\r\n  private _$itemClick = new Subject<IRenderVirtualListItem<any> | undefined>();\r\n  $itemClick = this._$itemClick.asObservable();\r\n\r\n  private _$selectedIds = new BehaviorSubject<Array<Id> | Id | undefined>(undefined);\r\n  $selectedIds = this._$selectedIds.asObservable();\r\n\r\n  private _$collapsedIds = new BehaviorSubject<Array<Id>>([]);\r\n  $collapsedIds = this._$collapsedIds.asObservable();\r\n\r\n  private _$methodOfSelecting = new BehaviorSubject<MethodsForSelectingTypes>(0);\r\n  $methodOfSelecting = this._$methodOfSelecting.asObservable();\r\n\r\n  set methodOfSelecting(v: MethodsForSelectingTypes) {\r\n    this._$methodOfSelecting.next(v);\r\n  }\r\n\r\n  private _$focusedId = new BehaviorSubject<Id | null>(null);\r\n  $focusedId = this._$focusedId.asObservable();\r\n  get focusedId() { return this._$focusedId.getValue(); }\r\n\r\n  selectByClick: boolean = DEFAULT_SELECT_BY_CLICK;\r\n\r\n  collapseByClick: boolean = DEFAULT_COLLAPSE_BY_CLICK;\r\n\r\n  private _trackBox: TrackBox | undefined;\r\n\r\n  listElement: HTMLDivElement | null = null;\r\n\r\n  private _$displayItems = new BehaviorSubject<IRenderVirtualListCollection>([]);\r\n  readonly $displayItems = this._$displayItems.asObservable();\r\n\r\n  private _collection: IRenderVirtualListCollection = [];\r\n  set collection(v: IRenderVirtualListCollection) {\r\n    if (this._collection === v) {\r\n      return;\r\n    }\r\n\r\n    this._collection = v;\r\n\r\n    this._$displayItems.next(v);\r\n  }\r\n  get collection() { return this._collection; }\r\n\r\n  constructor() {\r\n    this._$methodOfSelecting.pipe(\r\n      takeUntilDestroyed(),\r\n      tap(v => {\r\n        switch (v) {\r\n          case MethodsForSelectingTypes.SELECT: {\r\n            const curr = this._$selectedIds.getValue();\r\n            if (typeof curr !== 'number' && typeof curr !== 'string') {\r\n              this._$selectedIds.next(undefined);\r\n            }\r\n            break;\r\n          }\r\n          case MethodsForSelectingTypes.MULTI_SELECT: {\r\n            if (!Array.isArray(this._$selectedIds.getValue())) {\r\n              this._$selectedIds.next([]);\r\n            }\r\n            break;\r\n          }\r\n          case MethodsForSelectingTypes.NONE:\r\n          default: {\r\n            this._$selectedIds.next(undefined);\r\n            break;\r\n          }\r\n        }\r\n      }),\r\n    ).subscribe();\r\n  }\r\n\r\n  setSelectedIds(ids: Array<Id> | Id | undefined) {\r\n    if (JSON.stringify(this._$selectedIds.getValue()) !== JSON.stringify(ids)) {\r\n      this._$selectedIds.next(ids);\r\n    }\r\n  }\r\n\r\n  setCollapsedIds(ids: Array<Id>) {\r\n    if (JSON.stringify(this._$collapsedIds.getValue()) !== JSON.stringify(ids)) {\r\n      this._$collapsedIds.next(ids);\r\n    }\r\n  }\r\n\r\n  itemClick(data: IRenderVirtualListItem | undefined) {\r\n    this._$itemClick.next(data);\r\n    if (this.collapseByClick) {\r\n      this.collapse(data);\r\n    }\r\n    if (this.selectByClick) {\r\n      this.select(data);\r\n    }\r\n  }\r\n\r\n  update() {\r\n    this._trackBox?.changes();\r\n  }\r\n\r\n  /**\r\n   * Selects a list item\r\n   * @param data \r\n   * @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.\r\n   */\r\n  select(data: IRenderVirtualListItem | undefined, selected: boolean | undefined = undefined) {\r\n    if (data && data.config.selectable) {\r\n      switch (this._$methodOfSelecting.getValue()) {\r\n        case MethodsForSelectingTypes.SELECT: {\r\n          const curr = this._$selectedIds.getValue() as (Id | undefined);\r\n          if (selected === undefined) {\r\n            this._$selectedIds.next(curr !== data?.id ? data?.id : undefined);\r\n          } else {\r\n            this._$selectedIds.next(selected ? data?.id : undefined);\r\n          }\r\n          break;\r\n        }\r\n        case MethodsForSelectingTypes.MULTI_SELECT: {\r\n          const curr = [...(this._$selectedIds.getValue() || []) as Array<Id>], index = curr.indexOf(data.id);\r\n          if (selected === undefined) {\r\n            if (index > -1) {\r\n              curr.splice(index, 1);\r\n              this._$selectedIds.next(curr);\r\n            } else {\r\n              this._$selectedIds.next([...curr, data.id]);\r\n            }\r\n          } else if (selected) {\r\n            if (index > -1) {\r\n              this._$selectedIds.next(curr);\r\n            } else {\r\n              this._$selectedIds.next([...curr, data.id]);\r\n            }\r\n          } else {\r\n            if (index > -1) {\r\n              curr.splice(index, 1);\r\n              this._$selectedIds.next(curr);\r\n            } else {\r\n              this._$selectedIds.next(curr);\r\n            }\r\n          }\r\n          break;\r\n        }\r\n        case MethodsForSelectingTypes.NONE:\r\n        default: {\r\n          this._$selectedIds.next(undefined);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n    * Collapse list items\r\n    * @param data \r\n    * @param collapsed - If the value is undefined, then the toggle method is executed, if false or true, then the collapse/expand is performed.\r\n    */\r\n  collapse(data: IRenderVirtualListItem | undefined, collapsed: boolean | undefined = undefined) {\r\n    if (data && data.config.sticky > 0 && data.config.collapsable) {\r\n      const curr = [...(this._$collapsedIds.getValue() || []) as Array<Id>], index = curr.indexOf(data.id);\r\n      if (collapsed === undefined) {\r\n        if (index > -1) {\r\n          curr.splice(index, 1);\r\n          this._$collapsedIds.next(curr);\r\n        } else {\r\n          this._$collapsedIds.next([...curr, data.id]);\r\n        }\r\n      } else if (collapsed) {\r\n        if (index > -1) {\r\n          this._$collapsedIds.next(curr);\r\n        } else {\r\n          this._$collapsedIds.next([...curr, data.id]);\r\n        }\r\n      } else {\r\n        if (index > -1) {\r\n          curr.splice(index, 1);\r\n          this._$collapsedIds.next(curr);\r\n        } else {\r\n          this._$collapsedIds.next(curr);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  itemToFocus: ((element: HTMLElement, position: number, align: FocusAlignment) => void) | undefined;\r\n\r\n  focus(element: HTMLElement, align: FocusAlignment = FocusAlignments.CENTER) {\r\n    element.focus({ preventScroll: true });\r\n    if (element.parentElement) {\r\n      const pos = parseFloat(element.parentElement?.getAttribute('position') ?? '0');\r\n      this.itemToFocus?.(element, pos, align);\r\n    }\r\n  }\r\n\r\n  areaFocus(id: Id | null) {\r\n    this._$focusedId.next(id);\r\n  }\r\n\r\n  initialize(trackBox: TrackBox) {\r\n    this._trackBox = trackBox;\r\n  }\r\n\r\n  generateComponentId() {\r\n    return this._nextComponentId = this._nextComponentId === Number.MAX_SAFE_INTEGER\r\n      ? 0 : this._nextComponentId + 1;\r\n  }\r\n}\r\n","const isUndefinable = <T = any>(value: T) => {\r\n    return value === undefined;\r\n}\r\n\r\nconst isNullable = <T = any>(value: T) => {\r\n    return value === null;\r\n}\r\n\r\n/**\r\n * Int validator\r\n * @param value Int\r\n */\r\nexport const validateInt = (value: number | undefined, undefinable = false) => {\r\n    return (undefinable && isUndefinable(value)) || !Number.isNaN(Number.parseInt(`${value}`));\r\n};\r\n\r\n/**\r\n * Float validator\r\n * @param value Float\r\n */\r\nexport const validateFloat = (value: number | undefined, undefinable = false) => {\r\n    return (undefinable && isUndefinable(value)) || !Number.isNaN(Number.parseFloat(`${value}`));\r\n};\r\n\r\n/**\r\n * String validator\r\n * @param value String\r\n */\r\nexport const validateString = (value: string | undefined | null, undefinable = false, nullable = false) => {\r\n    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'string';\r\n};\r\n\r\n/**\r\n * Boolean validator\r\n * @param value Boolean\r\n */\r\nexport const validateBoolean = (value: boolean | undefined, undefinable = false) => {\r\n    return (undefinable && isUndefinable(value)) || typeof value === 'boolean';\r\n};\r\n\r\n/**\r\n * Array validator\r\n * @param value Array\r\n */\r\nexport const validateArray = <T = any>(value: Array<T> | undefined | null, undefinable = false, nullable = false) => {\r\n    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || Array.isArray(value);\r\n};\r\n\r\n/**\r\n * Object validator\r\n * @param value Object\r\n */\r\nexport const validateObject = <T = any>(value: Object & T | undefined | null, undefinable = false, nullable = false) => {\r\n    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'object';\r\n};\r\n\r\n/**\r\n * Function validator\r\n * @param value Function\r\n */\r\nexport const validateFunction = <T = any>(value: Object & T | undefined | null, undefinable = false, nullable = false) => {\r\n    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'function';\r\n};\r\n","import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, ElementRef, inject, signal, TemplateRef } from '@angular/core';\r\nimport { IRenderVirtualListItem } from '../models/render-item.model';\r\nimport { FocusAlignment, Id, ISize } from '../types';\r\nimport {\r\n  DEFAULT_ZINDEX, DISPLAY_BLOCK, DISPLAY_NONE, HIDDEN_ZINDEX, PART_DEFAULT_ITEM, PART_ITEM_COLLAPSED, PART_ITEM_EVEN, PART_ITEM_FOCUSED,\r\n  PART_ITEM_NEW, PART_ITEM_ODD, PART_ITEM_SELECTED, PART_ITEM_SNAPPED, POSITION_ABSOLUTE, POSITION_STICKY, PX, SIZE_100_PERSENT, SIZE_AUTO,\r\n  TRANSLATE_3D, VISIBILITY_HIDDEN, VISIBILITY_VISIBLE, ZEROS_TRANSLATE_3D,\r\n} from '../const';\r\nimport { BaseVirtualListItemComponent } from '../models/base-virtual-list-item-component';\r\nimport { NgVirtualListService } from '../ng-virtual-list.service';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { map, tap, combineLatest, fromEvent } from 'rxjs';\r\nimport { MethodsForSelectingTypes } from '../enums/method-for-selecting-types';\r\nimport { validateBoolean } from '../utils/validation';\r\nimport { FocusAlignments } from '../enums';\r\nimport { IDisplayObjectConfig, IDisplayObjectMeasures } from '../models';\r\n\r\nconst ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'ng-vl-index', POSITION = 'position', POSITION_ZERO = '0', ID = 'item-id',\r\n  KEY_SPACE = \" \", KEY_ARR_LEFT = \"ArrowLeft\", KEY_ARR_UP = \"ArrowUp\", KEY_ARR_RIGHT = \"ArrowRight\", KEY_ARR_DOWN = \"ArrowDown\",\r\n  EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown';\r\n\r\nconst getElementByIndex = (index: number) => {\r\n  return `[${TABINDEX}=\"${index}\"]`;\r\n}\r\n\r\n/**\r\n * Virtual list item component\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\n@Component({\r\n  selector: 'ng-virtual-list-item',\r\n  imports: [CommonModule],\r\n  templateUrl: './ng-virtual-list-item.component.html',\r\n  styleUrl: './ng-virtual-list-item.component.scss',\r\n  host: {\r\n    'class': 'ngvl__item',\r\n    'role': 'listitem',\r\n  },\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgVirtualListItemComponent extends BaseVirtualListItemComponent {\r\n  private _id!: number;\r\n  get id() {\r\n    return this._id;\r\n  }\r\n\r\n  protected _service = inject(NgVirtualListService);\r\n\r\n  private _isSelected: boolean = false;\r\n\r\n  private _isCollapsed: boolean = false;\r\n\r\n  config = signal<IDisplayObjectConfig>({} as IDisplayObjectConfig);\r\n\r\n  measures = signal<IDisplayObjectMeasures | undefined>(undefined);\r\n\r\n  focused = signal<boolean>(false);\r\n\r\n  part = signal<string>(PART_DEFAULT_ITEM);\r\n\r\n  regular: boolean = false;\r\n\r\n  data = signal<IRenderVirtualListItem | undefined>(undefined);\r\n  private _data: IRenderVirtualListItem | undefined = undefined;\r\n  set item(v: IRenderVirtualListItem | undefined) {\r\n    if (this._data === v) {\r\n      return;\r\n    }\r\n\r\n    this._data = v;\r\n\r\n    this.updatePartStr(v, this._isSelected, this._isCollapsed);\r\n\r\n    this.updateConfig(v);\r\n\r\n    this.updateMeasures(v);\r\n\r\n    this.update();\r\n\r\n    this.data.set(v);\r\n  }\r\n\r\n  private _regularLength: string = SIZE_100_PERSENT;\r\n  set regularLength(v: string) {\r\n    if (this._regularLength === v) {\r\n      return;\r\n    }\r\n\r\n    this._regularLength = v;\r\n\r\n    this.update();\r\n  }\r\n\r\n  get item() {\r\n    return this._data;\r\n  }\r\n\r\n  get itemId() {\r\n    return this._data?.id;\r\n  }\r\n\r\n  itemRenderer = signal<TemplateRef<any> | undefined>(undefined);\r\n\r\n  set renderer(v: TemplateRef<any> | undefined) {\r\n    this.itemRenderer.set(v);\r\n  }\r\n\r\n  private _elementRef: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);\r\n  get element() {\r\n    return this._elementRef.nativeElement;\r\n  }\r\n\r\n  private _selectHandler = (data: IRenderVirtualListItem<any> | undefined) =>\r\n    /**\r\n     * Selects a list item\r\n     * @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.\r\n     */\r\n    (selected: boolean | undefined = undefined) => {\r\n      const valid = validateBoolean(selected, true);\r\n      if (!valid) {\r\n        console.error('The \"selected\" parameter must be of type `boolean` or `undefined`.');\r\n        return;\r\n      }\r\n      this._service.select(data, selected);\r\n    };\r\n\r\n  private _collapseHandler = (data: IRenderVirtualListItem<any> | undefined) =>\r\n    /**\r\n    * Collapse list items\r\n    * @param collapsed - If the value is undefined, then the toggle method is executed, if false or true, then the collapse/expand is performed.\r\n    */\r\n    (collapsed: boolean | undefined = undefined) => {\r\n      const valid = validateBoolean(collapsed, true);\r\n      if (!valid) {\r\n        console.error('The \"collapsed\" parameter must be of type `boolean` or `undefined`.');\r\n        return;\r\n      }\r\n      this._service.collapse(data, collapsed);\r\n    };\r\n\r\n  private _focusHandler = () =>\r\n    /**\r\n    * Focus a list item\r\n    */\r\n    (align: FocusAlignment = FocusAlignments.CENTER) => {\r\n      this.focus(align);\r\n    };\r\n\r\n  constructor() {\r\n    super();\r\n    this._id = this._service.generateComponentId();\r\n\r\n    this._elementRef.nativeElement.setAttribute('id', String(this._id));\r\n\r\n    const $data = toObservable(this.data),\r\n      $focused = toObservable(this.focused);\r\n\r\n    $focused.pipe(\r\n      takeUntilDestroyed(),\r\n      tap(v => {\r\n        this._service.areaFocus(v ? this._id : this._service.focusedId === this._id ? null : this._service.focusedId);\r\n      }),\r\n    ).subscribe();\r\n\r\n    fromEvent(this.element, EVENT_FOCUS_IN).pipe(\r\n      takeUntilDestroyed(),\r\n      tap(e => {\r\n        this.focused.set(true);\r\n\r\n        this.updateConfig(this._data);\r\n\r\n        this.updatePartStr(this._data, this._isSelected, this._isCollapsed);\r\n      }),\r\n    ).subscribe(),\r\n\r\n      fromEvent(this.element, EVENT_FOCUS_OUT).pipe(\r\n        takeUntilDestroyed(),\r\n        tap(e => {\r\n          this.focused.set(false);\r\n\r\n          this.updateConfig(this._data);\r\n\r\n          this.updatePartStr(this._data, this._isSelected, this._isCollapsed);\r\n        }),\r\n      ).subscribe(),\r\n\r\n      fromEvent<KeyboardEvent>(this.element, EVENT_KEY_DOWN).pipe(\r\n        takeUntilDestroyed(),\r\n        tap(e => {\r\n          switch (e.key) {\r\n            case KEY_SPACE: {\r\n              e.stopImmediatePropagation();\r\n              e.preventDefault();\r\n              if (this._service.selectByClick) {\r\n                this._service.select(this._data);\r\n              }\r\n              if (this._service.collapseByClick) {\r\n                this._service.collapse(this._data);\r\n              }\r\n              break;\r\n            }\r\n            case KEY_ARR_LEFT:\r\n              if (!this.config().isVertical) {\r\n                e.stopImmediatePropagation();\r\n                e.preventDefault();\r\n                this.focusPrev();\r\n              }\r\n              break;\r\n            case KEY_ARR_UP:\r\n              if (this.config().isVertical) {\r\n                e.stopImmediatePropagation();\r\n                e.preventDefault();\r\n                this.focusPrev();\r\n              }\r\n              break;\r\n            case KEY_ARR_RIGHT:\r\n              if (!this.config().isVertical) {\r\n                e.stopImmediatePropagation();\r\n                e.preventDefault();\r\n                this.focusNext();\r\n              }\r\n              break;\r\n            case KEY_ARR_DOWN:\r\n              if (this.config().isVertical) {\r\n                e.stopImmediatePropagation();\r\n                e.preventDefault();\r\n                this.focusNext();\r\n              }\r\n              break;\r\n          }\r\n        }),\r\n      ).subscribe();\r\n\r\n    combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds, this._service.$collapsedIds]).pipe(\r\n      takeUntilDestroyed(),\r\n      map(([, m, selectedIds, collapsedIds]) => ({ method: m, selectedIds, collapsedIds })),\r\n      tap(({ method, selectedIds, collapsedIds }) => {\r\n        switch (method) {\r\n          case MethodsForSelectingTypes.SELECT: {\r\n            const id = selectedIds as Id | undefined, isSelected = id === this.itemId;\r\n            this.element.setAttribute(ATTR_AREA_SELECTED, String(isSelected));\r\n            this._isSelected = isSelected;\r\n            break;\r\n          }\r\n          case MethodsForSelectingTypes.MULTI_SELECT: {\r\n            const actualIds = selectedIds as Array<Id>, isSelected = this.itemId !== undefined && actualIds && actualIds.includes(this.itemId);\r\n            this.element.setAttribute(ATTR_AREA_SELECTED, String(isSelected));\r\n            this._isSelected = isSelected;\r\n            break;\r\n          }\r\n          case MethodsForSelectingTypes.NONE:\r\n          default: {\r\n            this.element.removeAttribute(ATTR_AREA_SELECTED);\r\n            this._isSelected = false;\r\n            break;\r\n          }\r\n        }\r\n\r\n        const actualIds = collapsedIds, isCollapsed = this.itemId !== undefined && actualIds && actualIds.includes(this.itemId);\r\n        this._isCollapsed = isCollapsed;\r\n\r\n        this.updatePartStr(this._data, this._isSelected, isCollapsed);\r\n\r\n        this.updateConfig(this._data);\r\n\r\n        this.updateMeasures(this._data);\r\n      }),\r\n    ).subscribe();\r\n  }\r\n\r\n  private focusNext() {\r\n    if (this._service.listElement) {\r\n      const tabIndex = this._data?.config?.tabIndex ?? 0, length = this._service.collection?.length ?? 0;\r\n      let index = tabIndex;\r\n      while (index <= length) {\r\n        index++;\r\n        const el = this._service.listElement.querySelector<HTMLDivElement>(getElementByIndex(index));\r\n        if (el) {\r\n          this._service.focus(el);\r\n          break;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private focusPrev() {\r\n    if (this._service.listElement) {\r\n      const tabIndex = this._data?.config?.tabIndex ?? 0;\r\n      let index = tabIndex;\r\n      while (index >= 0) {\r\n        index--;\r\n        const el = this._service.listElement.querySelector<HTMLDivElement>(getElementByIndex(index));\r\n        if (el) {\r\n          this._service.focus(el);\r\n          break;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private focus(align: FocusAlignment = FocusAlignments.CENTER) {\r\n    if (this._service.listElement) {\r\n      const tabIndex = this._data?.config?.tabIndex ?? 0;\r\n      let index = tabIndex;\r\n      const el = this._service.listElement.querySelector<HTMLDivElement>(getElementByIndex(index));\r\n      if (el) {\r\n        this._service.focus(el, align);\r\n      }\r\n    }\r\n  }\r\n\r\n  private updateMeasures(v: IRenderVirtualListItem<any> | undefined) {\r\n    this.measures.set(v?.measures ? { ...v.measures } : undefined)\r\n  }\r\n\r\n  private updateConfig(v: IRenderVirtualListItem<any> | undefined) {\r\n    this.config.set({\r\n      ...v?.config || {} as IDisplayObjectConfig, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(),\r\n      collapse: this._collapseHandler(v), select: this._selectHandler(v), focus: this._focusHandler(),\r\n    });\r\n  }\r\n\r\n  private update() {\r\n    const data = this._data, regular = this.regular, length = this._regularLength;\r\n    if (data) {\r\n      this._elementRef.nativeElement.setAttribute(ID, `${data.id}`);\r\n      const styles = this._elementRef.nativeElement.style;\r\n      styles.zIndex = data.config.zIndex;\r\n      if (data.config.snapped) {\r\n        this._elementRef.nativeElement.setAttribute(POSITION, data.config.sticky === 1 ? POSITION_ZERO : `${data.config.isVertical ? data.measures.y : data.measures.x}`);\r\n        styles.transform = data.config.sticky === 1 ? ZEROS_TRANSLATE_3D : `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX}, ${POSITION_ZERO})`;;\r\n        if (!data.config.isSnappingMethodAdvanced) {\r\n          styles.position = POSITION_STICKY;\r\n        }\r\n      } else {\r\n        styles.position = POSITION_ABSOLUTE;\r\n        if (regular) {\r\n          this._elementRef.nativeElement.setAttribute(POSITION, POSITION_ZERO);\r\n          styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.delta}${PX}, ${data.config.isVertical ? data.measures.delta : 0}${PX}, ${POSITION_ZERO})`;\r\n        } else {\r\n          this._elementRef.nativeElement.setAttribute(POSITION, `${data.config.isVertical ? data.measures.y : data.measures.x}`);\r\n          styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX}, ${POSITION_ZERO})`;\r\n        }\r\n      }\r\n      styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : regular ? length : SIZE_100_PERSENT;\r\n      styles.width = data.config.isVertical ? regular ? length : SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;\r\n    } else {\r\n      this._elementRef.nativeElement.removeAttribute(ID);\r\n    }\r\n  }\r\n\r\n  private updatePartStr(v: IRenderVirtualListItem | undefined, isSelected: boolean, isCollapsed: boolean) {\r\n    let odd = false;\r\n    if (v?.index !== undefined) {\r\n      odd = v.index % 2 === 0;\r\n    }\r\n\r\n    let part = PART_DEFAULT_ITEM;\r\n    part += odd ? PART_ITEM_ODD : PART_ITEM_EVEN;\r\n    if (v ? v.config.snapped : false) {\r\n      part += PART_ITEM_SNAPPED;\r\n    }\r\n    if (isSelected) {\r\n      part += PART_ITEM_SELECTED;\r\n    }\r\n    if (isCollapsed) {\r\n      part += PART_ITEM_COLLAPSED;\r\n    }\r\n    if (v ? v.config.new : false) {\r\n      part += PART_ITEM_NEW;\r\n    }\r\n    if (this.focused()) {\r\n      part += PART_ITEM_FOCUSED;\r\n    }\r\n    this.part.set(part);\r\n  }\r\n\r\n  getBounds(): ISize {\r\n    const el: HTMLElement = this._elementRef.nativeElement,\r\n      { width, height } = el.getBoundingClientRect();\r\n    return { width, height };\r\n  }\r\n\r\n  show() {\r\n    const styles = this._elementRef.nativeElement.style;\r\n    if (this.regular) {\r\n      if (styles.display === DISPLAY_BLOCK) {\r\n        return;\r\n      }\r\n\r\n      styles.display = DISPLAY_BLOCK;\r\n    } else {\r\n      if (styles.visibility === VISIBILITY_VISIBLE) {\r\n        return;\r\n      }\r\n\r\n      styles.visibility = VISIBILITY_VISIBLE;\r\n    }\r\n    styles.zIndex = this._data?.config?.zIndex ?? DEFAULT_ZINDEX;\r\n  }\r\n\r\n  hide() {\r\n    const styles = this._elementRef.nativeElement.style;\r\n    if (this.regular) {\r\n      if (styles.display === DISPLAY_NONE) {\r\n        return;\r\n      }\r\n\r\n      styles.display = DISPLAY_NONE;\r\n    } else {\r\n      if (styles.visibility === VISIBILITY_HIDDEN) {\r\n        return;\r\n      }\r\n\r\n      styles.visibility = VISIBILITY_HIDDEN;\r\n    }\r\n    styles.position = POSITION_ABSOLUTE;\r\n    styles.transform = ZEROS_TRANSLATE_3D;\r\n    styles.zIndex = HIDDEN_ZINDEX;\r\n  }\r\n\r\n  onClickHandler() {\r\n    this._service.itemClick(this._data);\r\n  }\r\n}\r\n","@let item = data();\r\n@let _config = config();\r\n@let _part = part();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"_part\" [attr.ng-vl-index]=\"_config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focused()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}","/**\r\n * Simple debounce function.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/debounce.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport const debounce = (cb: (...args: Array<any>) => void, debounceTime: number = 0) => {\r\n    let timeout: any;\r\n    const dispose = () => {\r\n        if (timeout !== undefined) {\r\n            clearTimeout(timeout);\r\n        }\r\n    }\r\n    const execute = (...args: Array<any>) => {\r\n        dispose();\r\n\r\n        timeout = setTimeout(() => {\r\n            cb(...args);\r\n        }, debounceTime);\r\n    };\r\n    return {\r\n        /**\r\n         *  Call handling method\r\n         */\r\n        execute,\r\n        /**\r\n         * Method of destroying handlers\r\n         */\r\n        dispose,\r\n    };\r\n};\r\n","\r\n/**\r\n * Switch css classes\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport const toggleClassName = (el: HTMLElement, className: string, removeClassName?: string) => {\r\n    if (!el.classList.contains(className)) {\r\n        el.classList.add(className);\r\n    }\r\n    if (removeClassName) {\r\n        el.classList.remove(removeClassName);\r\n    }\r\n};\r\n","import { IScrollEvent, ScrollDirection } from \"../models\";\r\n\r\ninterface IScrollEventParams {\r\n    direction: ScrollDirection;\r\n    container: HTMLElement;\r\n    list: HTMLElement;\r\n    delta: number;\r\n    scrollDelta: number;\r\n    isVertical: boolean;\r\n}\r\n\r\n/**\r\n * Scroll event.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport class ScrollEvent implements IScrollEvent {\r\n    private _direction: ScrollDirection = 1;\r\n    get direction() { return this._direction; }\r\n\r\n    private _scrollSize: number = 0;\r\n    get scrollSize() { return this._scrollSize; }\r\n\r\n    private _scrollWeight: number = 0;\r\n    get scrollWeight() { return this._scrollWeight; }\r\n\r\n    private _isVertical: boolean = true;\r\n    get isVertical() { return this._isVertical; }\r\n\r\n    private _listSize: number = 0;\r\n    get listSize() { return this._listSize; }\r\n\r\n    private _size: number = 0;\r\n    get size() { return this._size; }\r\n\r\n    private _isStart: boolean = true;\r\n    get isStart() { return this._isStart; }\r\n\r\n    private _isEnd: boolean = false;\r\n    get isEnd() { return this._isEnd; }\r\n\r\n    private _delta: number = 0;\r\n    get delta() { return this._delta; }\r\n\r\n    private _scrollDelta: number = 0;\r\n    get scrollDelta() { return this._scrollDelta; }\r\n\r\n    constructor(params: IScrollEventParams) {\r\n        const { direction, isVertical, container, list, delta, scrollDelta } = params;\r\n        this._direction = direction;\r\n        this._isVertical = isVertical;\r\n        this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;\r\n        this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;\r\n        this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;\r\n        this._size = isVertical ? container.offsetHeight : container.offsetWidth;\r\n        this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;\r\n        this._delta = delta;\r\n        this._scrollDelta = scrollDelta;\r\n        this._isStart = this._scrollSize === 0;\r\n    }\r\n}","export type TEventHandler = (...args: Array<any>) => void;\r\n\r\n/**\r\n * Simple event emitter\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport class EventEmitter<E = string, H = TEventHandler> {\r\n    private _listeners: {\r\n        [eventName: string]: Array<TEventHandler>,\r\n    } = {};\r\n\r\n    protected _disposed: boolean = false;\r\n\r\n    constructor() { }\r\n\r\n    /**\r\n     * Emits the event\r\n     */\r\n    dispatch(event: E, ...args: Array<any>): void {\r\n        const ctx = this;\r\n        const listeners = this._listeners[event as string];\r\n        if (Array.isArray(listeners)) {\r\n            for (let i = 0, l = listeners.length; i < l; i++) {\r\n                const listener = listeners[i];\r\n                if (listener) {\r\n                    listener.apply(ctx, args);\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Emits the event async\r\n     */\r\n    dispatchAsync(event: E, ...args: Array<any>): void {\r\n        queueMicrotask(() => {\r\n            if (this._disposed) {\r\n                return;\r\n            }\r\n            this.dispatch(event, ...args);\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Returns true if the event listener is already subscribed.\r\n     */\r\n    hasEventListener(eventName: E, handler: H): boolean {\r\n        const event = eventName as string;\r\n        if (this._listeners.hasOwnProperty(event)) {\r\n            const listeners = this._listeners[event];\r\n            const index = listeners.findIndex(v => v === handler);\r\n            if (index > -1) {\r\n                return true;\r\n            }\r\n        }\r\n        return false\r\n    }\r\n\r\n    /**\r\n     * Add event listener\r\n     */\r\n    addEventListener(eventName: E, handler: H): void {\r\n        const event = eventName as string;\r\n        if (!this._listeners.hasOwnProperty(event)) {\r\n            this._listeners[event] = [];\r\n        }\r\n        this._listeners[event].push(handler as TEventHandler);\r\n    }\r\n\r\n    /**\r\n     * Remove event listener\r\n     */\r\n    removeEventListener(eventName: E, handler: H): void {\r\n        const event = eventName as string;\r\n        if (!this._listeners.hasOwnProperty(event)) {\r\n            return;\r\n        }\r\n        const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);\r\n        if (index > -1) {\r\n            listeners.splice(index, 1);\r\n\r\n            if (listeners.length === 0) {\r\n                delete this._listeners[event];\r\n            }\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Remove all listeners\r\n     */\r\n    removeAllListeners() {\r\n        const events = Object.keys(this._listeners);\r\n        while (events.length > 0) {\r\n            const event = events.pop();\r\n            if (event) {\r\n                const listeners = this._listeners[event];\r\n                if (Array.isArray(listeners)) {\r\n                    while (listeners.length > 0) {\r\n                        const listener = listeners.pop();\r\n                        if (listener) {\r\n                            this.removeEventListener(event as E, listener as H);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Method of destroying handlers\r\n     */\r\n    dispose() {\r\n        this._disposed = true;\r\n\r\n        this.removeAllListeners();\r\n    }\r\n}","import { ScrollDirection } from \"../models\";\r\nimport { debounce } from \"./debounce\";\r\nimport { EventEmitter } from \"./eventEmitter\";\r\n\r\nexport class CMap<K = string, V = any> {\r\n    private _dict: { [k: string | number]: V } = {};\r\n\r\n    constructor(dict?: CMap<K, V>) {\r\n        if (dict) {\r\n            this._dict = { ...dict._dict };\r\n        }\r\n    }\r\n\r\n    get(key: K) {\r\n        const k = String(key);\r\n        return this._dict[k];\r\n    }\r\n    set(key: K, value: V) {\r\n        const k = String(key);\r\n        this._dict[k] = value;\r\n        return this;\r\n    }\r\n    has(key: K) {\r\n        return this._dict.hasOwnProperty(String(key));\r\n    }\r\n    delete(key: K) {\r\n        const k = String(key);\r\n        delete this._dict[k];\r\n    }\r\n    clear() {\r\n        this._dict = {};\r\n    }\r\n}\r\n\r\nexport interface ICacheMap<I = any, B = any> {\r\n    set: (id: I, bounds: B) => CMap<I, B>;\r\n    has: (id: I) => boolean;\r\n    get: (id: I) => B | undefined;\r\n}\r\n\r\nexport const CACHE_BOX_CHANGE_EVENT_NAME = 'change';\r\n\r\ntype CacheMapEvents = typeof CACHE_BOX_CHANGE_EVENT_NAME;\r\n\r\ntype OnChangeEventListener = (version: number) => void;\r\n\r\ntype CacheMapListeners = OnChangeEventListener;\r\n\r\nconst MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10,\r\n    DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';\r\n\r\n/**\r\n * Cache map.\r\n * Emits a change event on each mutation.\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts\r\n * @author Evgenii Grebennikov\r\n * @email djonnyx@gmail.com\r\n */\r\nexport class CacheMap<I = string | number, B = any, E = CacheMapEvents, L = CacheMapListeners> extends EventEmitter<E, L> implements ICacheMap {\r\n    protected _map = new CMap<I, B>();\r\n\r\n    protected _snapshot = new CMap<I, B>();\r\n\r\n    protected _version: number = 0;\r\n\r\n    protected _previousVersion = this._version;\r\n\r\n    protected _lifeCircleTimeout: any;\r\n\r\n    protected _delta: number = 0;\r\n\r\n    get delta() {\r\n        return this._delta;\r\n    }\r\n\r\n    protected _deltaDirection: ScrollDirection = 0;\r\n    set deltaDirection(v: ScrollDirection) {\r\n        this._deltaDirection = v;\r\n\r\n        this._scrollDirection = this.calcScrollDirection(v);\r\n    }\r\n    get deltaDirection() {\r\n        return this._deltaDirection;\r\n    }\r\n\r\n    private _scrollDirectionCache: Array<ScrollDirection> = [];\r\n    private _scrollDirection: ScrollDirection = 0;\r\n    get scrollDirection() {\r\n        return this._scrollDirection;\r\n    }\r\n\r\n    get version() {\r\n        return this._version;\r\n    }\r\n\r\n    private _clearScrollDirectionDebounce = debounce(() => {\r\n        while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {\r\n            this._scrollDirectionCache.shift();\r\n        }\r\n    }, 10);\r\n\r\n    constructor() {\r\n        super();\r\n        this.lifeCircle();\r\n    }\r\n\r\n    protected changesDetected() {\r\n        return this._version !== this._previousVersion;\r\n    }\r\n\r\n    protected stopLifeCircle() {\r\n        clearTimeout(this._lifeCircleTimeout);\r\n    }\r\n\r\n    protected nextTick(cb: () => void) {\r\n        if (this._disposed) {\r\n            return;\r\n        }\r\n\r\n        this._lifeCircleTimeout = setTimeout(() => {\r\n            cb();\r\n        });\r\n        return this._lifeCircleTimeout;\r\n    }\r\n\r\n    protected lifeCircle() {\r\n        this.fireChangeIfNeed();\r\n\r\n        this.lifeCircleDo();\r\n    }\r\n\r\n    protected lifeCircleDo() {\r\n        this._previousVersion = this._version;\r\n\r\n        this.nextTick(() => {\r\n            this.lifeCircle();\r\n        });\r\n    }\r\n\r\n    clearScrollDirectionCache() {\r\n        this._clearScrollDirectionDebounce.execute();\r\n    }\r\n\r\n    private calcScrollDirection(v: ScrollDirection): ScrollDirection {\r\n        while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {\r\n            this._scrollDirectionCache.shift();\r\n        }\r\n        this._scrollDirectionCache.push(v);\r\n        const dict: { [x: string]: number } = { [DIR_BACK]: 0, [DIR_NONE]: 0, [DIR_FORWARD]: 0 };\r\n        for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {\r\n            const dir = String(this._scrollDirectionCache[i]);\r\n            dict[dir] += 1;\r\n            if (i === li) {\r\n                for (let d in dict) {\r\n                    if (d === String(v)) {\r\n                        continue;\r\n                    }\r\n                    dict[d] -= 1;\r\n                }\r\n            }\r\n        }\r\n\r\n        if (dict[DIR_BACK] > dict[DIR_NONE] && dict[DIR_BACK] > dict[DIR_FORWARD]) {\r\n            return -1;\r\n        } else if (dict[DIR_FORWARD] > dict[DIR_BACK] && dict[DIR_FORWARD] > dict[DIR_NONE]) {\r\n            return 1;\r\n        }\r\n\r\n        return 0;\r\n    }\r\n\r\n    protected bumpVersion() {\r\n        if (this.changesDetected()) {\r\n            return;\r\n        }\r\n        const v = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;\r\n        this._version = v;\r\n    }\r\n\r\n    protected fireChangeIfNeed() {\r\n        if (this.changesDetected()) {\r\n            this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME as E, this.version);\r\n        }\r\n    }\r\n\r\n    set(id: I, bounds: B): CMap<I, B> {\r\n        if (this._map.has(id)) {\r\n            const b: any = this._map.get(id), bb: any = bounds;\r\n            if (b.width === bb.width && b.height === bb.height) {\r\n                return this._map;\r\n            }\r\n            return this._map;\r\n        }\r\n\r\n        const v = this._map.set(id, bounds);\r\n\r\n        this.bumpVersion();\r\n\r\n        return v;\r\n    }\r\n\r\n    has(id: I): boolean {\r\n        return this._map.has(id);\r\n    }\r\n\r\n    get(id: I): B | undefined {\r\n        return this._map.get(id);\r\n    }\r\n\r\n    snapshot() {\r\n        this._snapshot = new CMap(this._map);\r\n    }\r\n\r\n    override dispose() {\r\n        super.dispose();\r\n\r\n        this.stopLifeCircle();\r\n\r\n        this._snapshot.clear();\r\n\r\n        this._map.clear();\r\n    }\r\n}","import { ComponentRef } from \"@angular/core\";\r\nimport { ScrollDirection } from \"../models\";\r\nimport { Id, ISize } from \"../types\";\r\nimport { BaseVirtualListItemComponent } from \"../models/base-virtual-list-item-component\";\r\nimport { CMap } from \"./cacheMap\";\r\n\r\ntype TrackingPropertyId = string | number;\r\n\r\nexport interface IVirtualListItemComponent<I = any> {\r\n    getBounds(): ISize;\r\n    itemId: Id;\r\n    id: number;\r\n    item: I | null;\r\n    show: () => void;\r\n    hide: () => void;\r\n}\r\n\r\n/**\r\n * Tracks display items by property\r\n * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/tracker.ts\r\n * @author Evgenii