angular-layout-virtual 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{CommonModule as t}from"@angular/common";import{Input as e,ContentChild as i,TemplateRef as n,ViewChild as r,Component as s,inject as o,ChangeDetectorRef as a}from"@angular/core";import l,{ScrollableContainer as c,ArrayItemStore as h,DynamicListLayout as d}from"layout-virtual";class m{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;m;p=[];v(t){const e="first"===t?this.i.getFirstItem():"last"===t?this.i.getLastItem():null;if(e)return this.getIndex(e)}constructor(t){this.i=new c({...t}),this.h=t.itemsSetter,this.m=t.itemsFlusher}render(t,e,i){const n=this.v("first"),r=this.v("last");let s=t,o=e,a=n,l=r,c=0;return"down"===i?void 0!==a&&void 0!==r&&(l=Math.min(s-1,r),s=Math.max(r+1,s),a<=l&&(c=this.removeRange(a,l,i))):"up"===i&&void 0!==l&&void 0!==n&&(a=Math.max(o+1,n),o=Math.min(n-1,o),a<=l&&(c=this.removeRange(a,l,i))),s<o&&this.renderRange(s,o,i),c}renderRange(t,e,i){const n=this.t,r=this.p,s=[];if(n){for(let i=t;i<=e;i++){const t=n.getByIndex(i);t&&s.push({data:t.data,index:i})}this.p="down"===i?r.concat(s):"up"===i?s.concat(r):this.p}}removeRange(t,e,i){const n=this.o,r=this.l;let s=0,o=1/0,a=0;for(let l=t;l<=e;l++){const t=r.get(l);if(t){const{offsetTop:e,offsetHeight:i}=t;o=Math.min(o,e),a=Math.max(a,e+i),r.delete(l),n.delete(t),s++}}return s&&(this.p="down"===i?this.p.slice(s):"up"===i?this.p.slice(0,-s):this.p),a>o?a-o:0}clear(){this.o.clear(),this.l.clear(),this.p=[],this.h(this.p)}getIndex(t){return this.o.get(t)}getItem(t){return this.l.get(t)}get scrollableContainer(){return this.i}attach(t){this.t=t}flush(){return this.h(this.p),this.m(),Promise.resolve()}commit(t){console.log("commit",t);const e=this.o,i=this.l;for(const[n,r]of t.entries())e.set(r,n),i.set(n,r);t.clear()}}var p=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,i,n)=>{for(var r,s=n>1?void 0:n?v(e,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(s=(n?r(e,i,s):r(s))||s);return n&&s&&p(e,i,s),s};let u=class{data=[];overscanHeight=200;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=o(a);ngAfterViewInit(){this.renderer=new m({container: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 h,e=new d({overscanHeight:this.overscanHeight,renderer:this.renderer}),i=new l({store:t,layout:e});for(let n=0;n<this.data.length;n++)i.insert({data:this.data[n],render:this.renderItemTemplate},n)}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,i)=>{const n=this.visibleItems[i];n&&t.set(n.index,e)}),this.renderer?.commit(t)}};f([e({required:!0})],u.prototype,"data",2),f([e()],u.prototype,"overscanHeight",2),f([i("renderItem",{read:n})],u.prototype,"renderItemTemplate",2),f([r("container",{static:!0})],u.prototype,"containerRef",2),f([r("scrollHeightFiller",{static:!0})],u.prototype,"scrollHeightFillerRef",2),f([r("viewportContainer",{static:!0})],u.prototype,"viewportContainerRef",2),f([r("scrollCanvas",{static:!0})],u.prototype,"scrollCanvasRef",2),f([r("topSpacer",{static:!0})],u.prototype,"topSpacerRef",2),f([r("contentLayer",{static:!0})],u.prototype,"contentLayerRef",2),f([r("bottomSpacer",{static:!0})],u.prototype,"bottomSpacerRef",2),u=f([s({selector:"angular-layout-virtual",standalone:!0,imports:[t],host:{style:"display: contents;"},template:'\n <div #container>\n <div #scrollHeightFiller></div>\n <div #viewportContainer>\n <div #scrollCanvas>\n <div #topSpacer></div>\n <div #contentLayer>\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 '})],u);export{u as default};
1
+ import{CommonModule as t}from"@angular/common";import{Input as e,ContentChild as i,TemplateRef as r,ViewChild as n,Component as s,inject as o,ChangeDetectorRef as a}from"@angular/core";import l,{ScrollableContainer as c,ArrayItemStore as h,DynamicListLayout as d}from"layout-virtual";class m{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;m;p=[];v(t){const e="first"===t?this.i.getFirstItem():"last"===t?this.i.getLastItem():null;if(e)return this.getIndex(e)}constructor(t){this.i=new c({...t}),this.h=t.itemsSetter,this.m=t.itemsFlusher}render(t,e,i){const r=this.v("first"),n=this.v("last");let s=t,o=e,a=r,l=n,c=0;return"down"===i?void 0!==a&&void 0!==n&&(l=Math.min(s-1,n),s=Math.max(n+1,s),a<=l&&(c=this.removeRange(a,l,i))):"up"===i&&void 0!==l&&void 0!==r&&(a=Math.max(o+1,r),o=Math.min(r-1,o),a<=l&&(c=this.removeRange(a,l,i))),s<o&&this.renderRange(s,o,i),c}renderRange(t,e,i){const r=this.t,n=this.p,s=[];if(r){for(let i=t;i<=e;i++){const t=r.getByIndex(i);t&&s.push({data:t.data,index:i})}this.p="down"===i?n.concat(s):"up"===i?s.concat(n):this.p}}removeRange(t,e,i){const r=this.o,n=this.l;let s=0,o=1/0,a=0;for(let l=t;l<=e;l++){const t=n.get(l);if(t){const{offsetTop:e,offsetHeight:i}=t,c=getComputedStyle(t),h=parseFloat(c.marginTop),d=parseFloat(c.marginBottom);o=Math.min(o,e-h),a=Math.max(a,e+i+d),n.delete(l),r.delete(t),s++}}return s&&(this.p="down"===i?this.p.slice(s):"up"===i?this.p.slice(0,-s):this.p),a>o?a-o:0}clear(){this.o.clear(),this.l.clear(),this.p=[],this.h(this.p)}getIndex(t){return this.o.get(t)}getItem(t){return this.l.get(t)}get scrollableContainer(){return this.i}attach(t){this.t=t}flush(){return this.h(this.p),this.m(),Promise.resolve()}commit(t){console.log("commit",t);const e=this.o,i=this.l;for(const[r,n]of t.entries())e.set(n,r),i.set(r,n);t.clear()}}var p=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,i,r)=>{for(var n,s=r>1?void 0:r?v(e,i):e,o=t.length-1;o>=0;o--)(n=t[o])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&p(e,i,s),s};let u=class{data=[];overscanHeight=200;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=o(a);ngAfterViewInit(){this.renderer=new m({container: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 h,e=new d({overscanHeight:this.overscanHeight,renderer:this.renderer}),i=new l({store:t,layout:e});for(let r=0;r<this.data.length;r++)i.insert({data:this.data[r],render:this.renderItemTemplate},r)}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,i)=>{const r=this.visibleItems[i];r&&t.set(r.index,e)}),this.renderer?.commit(t)}};f([e({required:!0})],u.prototype,"data",2),f([e()],u.prototype,"overscanHeight",2),f([i("renderItem",{read:r})],u.prototype,"renderItemTemplate",2),f([n("container",{static:!0})],u.prototype,"containerRef",2),f([n("scrollHeightFiller",{static:!0})],u.prototype,"scrollHeightFillerRef",2),f([n("viewportContainer",{static:!0})],u.prototype,"viewportContainerRef",2),f([n("scrollCanvas",{static:!0})],u.prototype,"scrollCanvasRef",2),f([n("topSpacer",{static:!0})],u.prototype,"topSpacerRef",2),f([n("contentLayer",{static:!0})],u.prototype,"contentLayerRef",2),f([n("bottomSpacer",{static:!0})],u.prototype,"bottomSpacerRef",2),u=f([s({selector:"angular-layout-virtual",standalone:!0,imports:[t],host:{style:"display: contents;"},template:'\n <div #container>\n <div #scrollHeightFiller></div>\n <div #viewportContainer>\n <div #scrollCanvas>\n <div #topSpacer></div>\n <div #contentLayer>\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 '})],u);export{u as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "angular-layout-virtual",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "Angular virtual scrolling component for responsive lists and grids with dynamic item sizes.",
5
5
  "keywords": [
6
6
  "virtual",
@@ -39,16 +39,16 @@
39
39
  "test": "test",
40
40
  "build": "npm run build:bundle && npm run build:types",
41
41
  "build:bundle": "vite build",
42
- "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly"
42
+ "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
43
+ "prepublishOnly": "npm run build"
43
44
  },
44
45
  "dependencies": {
45
- "layout-virtual": "0.0.1"
46
+ "layout-virtual": "^0.0.3"
46
47
  },
47
48
  "peerDependencies": {
48
49
  "@angular/common": "^21.0.0",
49
50
  "@angular/compiler": "^21.0.0",
50
51
  "@angular/core": "^21.0.0",
51
52
  "@angular/platform-browser": "^21.0.0"
52
- },
53
- "devDependencies": {}
53
+ }
54
54
  }