angular-layout-virtual 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,2 +1,2 @@
-import{CommonModule as $}from"@angular/common";import{Input as tt,ContentChild as et,TemplateRef as rt,ViewChild as st,Component as it,inject as nt,ChangeDetectorRef as at}from"@angular/core";import{BaseRenderer as t,DynamicListLayout as b,LayoutVirtual as j}from"layout-virtual/core";class ot extends t{o=[];ee;vt;re=[];constructor(t){super(t),this.ee=t.itemsSetter,this.vt=t.itemsFlusher}renderRange(t,e,r){const s=this.o,i=this.re,n=[];for(let a=t;a<=e;a++){const t=s[a];t&&n.push({data:t,index:a})}this.re="down"===r?i.concat(n):"up"===r?n.concat(i):this.re}removeRange(t,e,r){const s=super.removeRange(t,e),i=s.itemsToRemove.length;return i&&(this.re="down"===r?this.re.slice(i):"up"===r?this.re.slice(0,-i):this.re),s}clear(){super.clear(),this.re=[],this.ee(this.re)}setData(t){this.o=t}setRenderItem(){}flush(){return this.ee(this.re),this.vt(),Promise.resolve()}commit(t){for(const[e,r]of t.entries())this.registerElement(e,r);t.clear()}get dataSize(){return this.o.length}}var lt=Object.defineProperty,ct=Object.getOwnPropertyDescriptor,ht=(t,e,r,s)=>{for(var i,n=s>1?void 0:s?ct(e,r):e,a=t.length-1;a>=0;a--)(i=t[a])&&(n=(s?i(e,r,n):i(n))||n);return s&&n&&lt(e,r,n),n};let mt=class{data=[];overscanHeight=200;scrollerRef;scrollerClass;viewportClass;contentLayerClass;getApi;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=nt(at);ngAfterViewInit(){this.renderer=new ot({container:this.scrollerRef?.nativeElement||this.containerRef.nativeElement,scrollHeightFiller:this.scrollHeightFillerRef.nativeElement,viewportContainer:this.viewportContainerRef.nativeElement,scrollCanvas:this.scrollCanvasRef.nativeElement,topSpacer:this.topSpacerRef.nativeElement,contentLayer:this.contentLayerRef.nativeElement,bottomSpacer:this.bottomSpacerRef.nativeElement,itemsSetter:this.setVisibleItems,itemsFlusher:this.flushVisibleItems});const t=new b({overscanHeight:this.overscanHeight,renderer:this.renderer}),e=new j({layout:t});e.setData(this.data),this.getApi?.(e)}trackByIndex(t,e){return e.index}getItemContext(t){return{$implicit:t.data,data:t.data,index:t.index}}setVisibleItems=t=>{this.visibleItems=t};flushVisibleItems=()=>{this.changeDetectorRef.detectChanges(),this.commit()};commit(){const t=/* @__PURE__ */new Map;Array.from(this.contentLayerRef.nativeElement.children).forEach((e,r)=>{const s=this.visibleItems[r];s&&t.set(s.index,e)}),this.renderer?.commit(t)}};ht([tt({required:!0})],mt.prototype,"data",2),ht([tt()],mt.prototype,"overscanHeight",2),ht([tt()],mt.prototype,"scrollerRef",2),ht([tt()],mt.prototype,"scrollerClass",2),ht([tt()],mt.prototype,"viewportClass",2),ht([tt()],mt.prototype,"contentLayerClass",2),ht([tt()],mt.prototype,"getApi",2),ht([et("renderItem",{read:rt})],mt.prototype,"renderItemTemplate",2),ht([st("container",{static:!0})],mt.prototype,"containerRef",2),ht([st("scrollHeightFiller",{static:!0})],mt.prototype,"scrollHeightFillerRef",2),ht([st("viewportContainer",{static:!0})],mt.prototype,"viewportContainerRef",2),ht([st("scrollCanvas",{static:!0})],mt.prototype,"scrollCanvasRef",2),ht([st("topSpacer",{static:!0})],mt.prototype,"topSpacerRef",2),ht([st("contentLayer",{static:!0})],mt.prototype,"contentLayerRef",2),ht([st("bottomSpacer",{static:!0})],mt.prototype,"bottomSpacerRef",2),mt=ht([it({selector:"angular-layout-virtual",standalone:!0,imports:[$],template:'\n    <div #container [class]="scrollerClass">\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer [class]="viewportClass">\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer [class]="contentLayerClass">\n            <ng-container\n              *ngFor="let item of visibleItems; trackBy: trackByIndex"\n            >\n              <ng-container\n                *ngTemplateOutlet="\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                "\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  '})],mt);export{mt as default};
+import{CommonModule as $}from"@angular/common";import{Input as tt,ContentChild as et,TemplateRef as rt,ViewChild as st,Component as it,inject as nt,ChangeDetectorRef as at}from"@angular/core";import{BaseRenderer as t,DynamicListLayout as b,LayoutVirtual as j}from"layout-virtual/core";class ot extends t{o=[];ee;vt;re=[];constructor(t){super(t),this.ee=t.itemsSetter,this.vt=t.itemsFlusher}renderRange(t,e,r){const s=this.o,i=this.re,n=[];for(let a=t;a<=e;a++){const t=s[a];t&&n.push({data:t,index:a})}this.re="down"===r?i.concat(n):"up"===r?n.concat(i):this.re}removeRange(t,e,r){const s=super.removeRange(t,e),i=s.itemsToRemove.length;return i&&(this.re="down"===r?this.re.slice(i):"up"===r?this.re.slice(0,-i):this.re),s}clear(){super.clear(),this.re=[],this.ee(this.re)}setData(t){this.o=t}setRenderItem(){}flush(){return this.ee(this.re),this.vt(),Promise.resolve()}commit(t){for(const[e,r]of t.entries())this.registerElement(e,r);t.clear()}get dataSize(){return this.o.length}}var lt=Object.defineProperty,ct=Object.getOwnPropertyDescriptor,ht=(t,e,r,s)=>{for(var i,n=s>1?void 0:s?ct(e,r):e,a=t.length-1;a>=0;a--)(i=t[a])&&(n=(s?i(e,r,n):i(n))||n);return s&&n&&lt(e,r,n),n};let mt=class{data=[];overscanHeight=200;scrollerRef;scrollerClass;viewportClass;contentLayerClass;getApi;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=nt(at);ngAfterViewInit(){this.renderer=new ot({container:this.scrollerRef?.nativeElement||this.containerRef.nativeElement,scrollHeightFiller:this.scrollHeightFillerRef.nativeElement,viewportContainer:this.viewportContainerRef.nativeElement,scrollCanvas:this.scrollCanvasRef.nativeElement,topSpacer:this.topSpacerRef.nativeElement,contentLayer:this.contentLayerRef.nativeElement,bottomSpacer:this.bottomSpacerRef.nativeElement,itemsSetter:this.setVisibleItems,itemsFlusher:this.flushVisibleItems});const t=new b({overscanHeight:this.overscanHeight,renderer:this.renderer}),e=new j({layout:t});e.setData(this.data),this.getApi?.(e)}trackByIndex(t,e){return e.index}getItemContext(t){return{$implicit:t.data,data:t.data,index:t.index}}setVisibleItems=t=>{this.visibleItems=t};flushVisibleItems=()=>{this.changeDetectorRef.detectChanges(),this.commit()};commit(){const t=/* @__PURE__ */new Map;Array.from(this.contentLayerRef.nativeElement.children).forEach((e,r)=>{const s=this.visibleItems[r];s&&t.set(s.index,e)}),this.renderer?.commit(t)}};ht([tt({required:!0})],mt.prototype,"data",2),ht([tt()],mt.prototype,"overscanHeight",2),ht([tt()],mt.prototype,"scrollerRef",2),ht([tt()],mt.prototype,"scrollerClass",2),ht([tt()],mt.prototype,"viewportClass",2),ht([tt()],mt.prototype,"contentLayerClass",2),ht([tt()],mt.prototype,"getApi",2),ht([et("renderItem",{read:rt})],mt.prototype,"renderItemTemplate",2),ht([st("container",{static:!0})],mt.prototype,"containerRef",2),ht([st("scrollHeightFiller",{static:!0})],mt.prototype,"scrollHeightFillerRef",2),ht([st("viewportContainer",{static:!0})],mt.prototype,"viewportContainerRef",2),ht([st("scrollCanvas",{static:!0})],mt.prototype,"scrollCanvasRef",2),ht([st("topSpacer",{static:!0})],mt.prototype,"topSpacerRef",2),ht([st("contentLayer",{static:!0})],mt.prototype,"contentLayerRef",2),ht([st("bottomSpacer",{static:!0})],mt.prototype,"bottomSpacerRef",2),mt=ht([it({selector:"layout-virtual",standalone:!0,imports:[$],template:'\n    <div #container [class]="scrollerClass">\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer [class]="viewportClass">\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer [class]="contentLayerClass">\n            <ng-container\n              *ngFor="let item of visibleItems; trackBy: trackByIndex"\n            >\n              <ng-container\n                *ngTemplateOutlet="\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                "\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  '})],mt);export{mt as default};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/AngularRenderer.ts","../src/AngularLayoutVirtual.ts"],"sourcesContent":["/**\n * @fileoverview AngularRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection } from 'layout-virtual/types';\nimport type { ListItemProps, AngularRendererOptions } from './types';\n\nexport default class AngularRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType> {\n  private _store: DataType[] = [];\n  private _itemsSetter: (items: ListItemProps<DataType>[]) => void;\n  private _itemsFlusher: () => void;\n  private _listItems: ListItemProps<DataType>[] = [];\n\n  constructor(opts: AngularRendererOptions<DataType>) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n    this._itemsFlusher = opts.itemsFlusher;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: ListItemProps<DataType>[] = [];\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        itemsToAdd.push({ data, index });\n      }\n    }\n\n    this._listItems =\n      direction === 'down'\n        ? listItems.concat(itemsToAdd)\n        : direction === 'up'\n          ? itemsToAdd.concat(listItems)\n          : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems =\n        direction === 'down'\n          ? this._listItems.slice(removedItemsCount)\n          : direction === 'up'\n            ? this._listItems.slice(0, -removedItemsCount)\n            : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem() {\n    /* not needed for Angular renderer */\n  }\n\n  flush() {\n    this._itemsSetter(this._listItems);\n    this._itemsFlusher();\n    return Promise.resolve();\n  }\n\n  commit(renderedRefs: Map<number, Element>) {\n    for (const [idx, element] of renderedRefs.entries()) {\n      this.registerElement(idx, element);\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList Angular component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  Input,\n  TemplateRef,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport type { AfterViewInit, ElementRef } from '@angular/core';\nimport type { ILayoutVirtual, IRangeRenderer } from 'layout-virtual/types';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport AngularRenderer from './AngularRenderer';\nimport type { AngularClassAttribute, ListItemProps } from './types';\n\nexport type VirtualizedListItemContext<T> = ListItemProps<T> & {\n  $implicit: T;\n};\n\n@Component({\n  selector: 'angular-layout-virtual',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div #container [class]=\"scrollerClass\">\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer [class]=\"viewportClass\">\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer [class]=\"contentLayerClass\">\n            <ng-container\n              *ngFor=\"let item of visibleItems; trackBy: trackByIndex\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport default class VirtualizedListAngular<T> implements AfterViewInit {\n  @Input({ required: true }) data: T[] = [];\n  @Input() overscanHeight = 200;\n  @Input() scrollerRef?: ElementRef<HTMLElement>;\n  @Input() scrollerClass?: AngularClassAttribute;\n  @Input() viewportClass?: AngularClassAttribute;\n  @Input() contentLayerClass?: AngularClassAttribute;\n  @Input() getApi?: (api: ILayoutVirtual) => void;\n\n  @ContentChild('renderItem', { read: TemplateRef })\n  renderItemTemplate!: TemplateRef<VirtualizedListItemContext<T>>;\n\n  @ViewChild('container', { static: true })\n  private containerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('scrollHeightFiller', { static: true })\n  private scrollHeightFillerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('viewportContainer', { static: true })\n  private viewportContainerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('scrollCanvas', { static: true })\n  private scrollCanvasRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('topSpacer', { static: true })\n  private topSpacerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('contentLayer', { static: true })\n  private contentLayerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('bottomSpacer', { static: true })\n  private bottomSpacerRef!: ElementRef<HTMLDivElement>;\n\n  visibleItems: ListItemProps<T>[] = [];\n  private renderer: AngularRenderer<T> | undefined;\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n  ngAfterViewInit() {\n    this.renderer = new AngularRenderer<T>({\n      container: this.scrollerRef?.nativeElement || this.containerRef.nativeElement,\n      scrollHeightFiller: this.scrollHeightFillerRef.nativeElement,\n      viewportContainer: this.viewportContainerRef.nativeElement,\n      scrollCanvas: this.scrollCanvasRef.nativeElement,\n      topSpacer: this.topSpacerRef.nativeElement,\n      contentLayer: this.contentLayerRef.nativeElement,\n      bottomSpacer: this.bottomSpacerRef.nativeElement,\n      itemsSetter: this.setVisibleItems,\n      itemsFlusher: this.flushVisibleItems,\n    });\n\n    const layout = new DynamicListLayout({\n      overscanHeight: this.overscanHeight,\n      renderer: this.renderer as unknown as IRangeRenderer,\n    });\n\n    const list = new LayoutVirtual({\n      layout,\n    } as unknown as ConstructorParameters<typeof LayoutVirtual>[0]);\n    \n    list.setData(this.data);\n\n    this.getApi?.(list);\n  }\n\n  trackByIndex(_position: number, item: ListItemProps<T>) {\n    return item.index;\n  }\n\n  getItemContext(item: ListItemProps<T>): VirtualizedListItemContext<T> {\n    return {\n      $implicit: item.data,\n      data: item.data,\n      index: item.index,\n    };\n  }\n\n  private setVisibleItems = (items: ListItemProps<T>[]) => {\n    this.visibleItems = items;\n  };\n\n  private flushVisibleItems = () => {\n    this.changeDetectorRef.detectChanges();\n    this.commit();\n  };\n\n  private commit() {\n    const renderedRefs = new Map<number, Element>();\n    const itemElements = Array.from(\n      this.contentLayerRef.nativeElement.children,\n    );\n\n    itemElements.forEach((element, position) => {\n      const item = this.visibleItems[position];\n\n      if (item) {\n        renderedRefs.set(item.index, element);\n      }\n    });\n\n    this.renderer?.commit(renderedRefs);\n  }\n}\n"],"names":["AngularRenderer","BaseRenderer","_store","_itemsSetter","_itemsFlusher","_listItems","constructor","opts","super","this","itemsSetter","itemsFlusher","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","index","data","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","flush","Promise","resolve","commit","renderedRefs","idx","element","entries","registerElement","dataSize","VirtualizedListAngular","overscanHeight","scrollerRef","scrollerClass","viewportClass","contentLayerClass","getApi","renderItemTemplate","containerRef","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","renderer","changeDetectorRef","inject","ChangeDetectorRef","ngAfterViewInit","container","nativeElement","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","setVisibleItems","flushVisibleItems","layout","DynamicListLayout","list","LayoutVirtual","trackByIndex","_position","item","getItemContext","$implicit","items","detectChanges","Map","Array","from","children","forEach","position","set","__decorateClass","Input","required","prototype","ContentChild","read","TemplateRef","ViewChild","static","Component","selector","standalone","imports","CommonModule","template"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/AngularRenderer.ts","../src/AngularLayoutVirtual.ts"],"sourcesContent":["/**\n * @fileoverview AngularRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection } from 'layout-virtual/types';\nimport type { ListItemProps, AngularRendererOptions } from './types';\n\nexport default class AngularRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType> {\n  private _store: DataType[] = [];\n  private _itemsSetter: (items: ListItemProps<DataType>[]) => void;\n  private _itemsFlusher: () => void;\n  private _listItems: ListItemProps<DataType>[] = [];\n\n  constructor(opts: AngularRendererOptions<DataType>) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n    this._itemsFlusher = opts.itemsFlusher;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: ListItemProps<DataType>[] = [];\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        itemsToAdd.push({ data, index });\n      }\n    }\n\n    this._listItems =\n      direction === 'down'\n        ? listItems.concat(itemsToAdd)\n        : direction === 'up'\n          ? itemsToAdd.concat(listItems)\n          : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems =\n        direction === 'down'\n          ? this._listItems.slice(removedItemsCount)\n          : direction === 'up'\n            ? this._listItems.slice(0, -removedItemsCount)\n            : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem() {\n    /* not needed for Angular renderer */\n  }\n\n  flush() {\n    this._itemsSetter(this._listItems);\n    this._itemsFlusher();\n    return Promise.resolve();\n  }\n\n  commit(renderedRefs: Map<number, Element>) {\n    for (const [idx, element] of renderedRefs.entries()) {\n      this.registerElement(idx, element);\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList Angular component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  Input,\n  TemplateRef,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport type { AfterViewInit, ElementRef } from '@angular/core';\nimport type { ILayoutVirtual, IRangeRenderer } from 'layout-virtual/types';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport AngularRenderer from './AngularRenderer';\nimport type { AngularClassAttribute, ListItemProps } from './types';\n\nexport type VirtualizedListItemContext<T> = ListItemProps<T> & {\n  $implicit: T;\n};\n\n@Component({\n  selector: 'layout-virtual',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div #container [class]=\"scrollerClass\">\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer [class]=\"viewportClass\">\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer [class]=\"contentLayerClass\">\n            <ng-container\n              *ngFor=\"let item of visibleItems; trackBy: trackByIndex\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport default class VirtualizedListAngular<T> implements AfterViewInit {\n  @Input({ required: true }) data: T[] = [];\n  @Input() overscanHeight = 200;\n  @Input() scrollerRef?: ElementRef<HTMLElement>;\n  @Input() scrollerClass?: AngularClassAttribute;\n  @Input() viewportClass?: AngularClassAttribute;\n  @Input() contentLayerClass?: AngularClassAttribute;\n  @Input() getApi?: (api: ILayoutVirtual) => void;\n\n  @ContentChild('renderItem', { read: TemplateRef })\n  renderItemTemplate!: TemplateRef<VirtualizedListItemContext<T>>;\n\n  @ViewChild('container', { static: true })\n  private containerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('scrollHeightFiller', { static: true })\n  private scrollHeightFillerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('viewportContainer', { static: true })\n  private viewportContainerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('scrollCanvas', { static: true })\n  private scrollCanvasRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('topSpacer', { static: true })\n  private topSpacerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('contentLayer', { static: true })\n  private contentLayerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('bottomSpacer', { static: true })\n  private bottomSpacerRef!: ElementRef<HTMLDivElement>;\n\n  visibleItems: ListItemProps<T>[] = [];\n  private renderer: AngularRenderer<T> | undefined;\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n  ngAfterViewInit() {\n    this.renderer = new AngularRenderer<T>({\n      container: this.scrollerRef?.nativeElement || this.containerRef.nativeElement,\n      scrollHeightFiller: this.scrollHeightFillerRef.nativeElement,\n      viewportContainer: this.viewportContainerRef.nativeElement,\n      scrollCanvas: this.scrollCanvasRef.nativeElement,\n      topSpacer: this.topSpacerRef.nativeElement,\n      contentLayer: this.contentLayerRef.nativeElement,\n      bottomSpacer: this.bottomSpacerRef.nativeElement,\n      itemsSetter: this.setVisibleItems,\n      itemsFlusher: this.flushVisibleItems,\n    });\n\n    const layout = new DynamicListLayout({\n      overscanHeight: this.overscanHeight,\n      renderer: this.renderer as unknown as IRangeRenderer,\n    });\n\n    const list = new LayoutVirtual({\n      layout,\n    } as unknown as ConstructorParameters<typeof LayoutVirtual>[0]);\n    \n    list.setData(this.data);\n\n    this.getApi?.(list);\n  }\n\n  trackByIndex(_position: number, item: ListItemProps<T>) {\n    return item.index;\n  }\n\n  getItemContext(item: ListItemProps<T>): VirtualizedListItemContext<T> {\n    return {\n      $implicit: item.data,\n      data: item.data,\n      index: item.index,\n    };\n  }\n\n  private setVisibleItems = (items: ListItemProps<T>[]) => {\n    this.visibleItems = items;\n  };\n\n  private flushVisibleItems = () => {\n    this.changeDetectorRef.detectChanges();\n    this.commit();\n  };\n\n  private commit() {\n    const renderedRefs = new Map<number, Element>();\n    const itemElements = Array.from(\n      this.contentLayerRef.nativeElement.children,\n    );\n\n    itemElements.forEach((element, position) => {\n      const item = this.visibleItems[position];\n\n      if (item) {\n        renderedRefs.set(item.index, element);\n      }\n    });\n\n    this.renderer?.commit(renderedRefs);\n  }\n}\n"],"names":["AngularRenderer","BaseRenderer","_store","_itemsSetter","_itemsFlusher","_listItems","constructor","opts","super","this","itemsSetter","itemsFlusher","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","index","data","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","flush","Promise","resolve","commit","renderedRefs","idx","element","entries","registerElement","dataSize","VirtualizedListAngular","overscanHeight","scrollerRef","scrollerClass","viewportClass","contentLayerClass","getApi","renderItemTemplate","containerRef","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","renderer","changeDetectorRef","inject","ChangeDetectorRef","ngAfterViewInit","container","nativeElement","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","setVisibleItems","flushVisibleItems","layout","DynamicListLayout","list","LayoutVirtual","trackByIndex","_position","item","getItemContext","$implicit","items","detectChanges","Map","Array","from","children","forEach","position","set","__decorateClass","Input","required","prototype","ContentChild","read","TemplateRef","ViewChild","static","Component","selector","standalone","imports","CommonModule","template"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-layout-virtual",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Angular virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -43,7 +43,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.4.0"
+    "layout-virtual": "^0.4.1"
   },
   "peerDependencies": {
     "@angular/common": "^21.0.0",