| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i2 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
|
|---|
| 6 | import * as i1 from '@angular/cdk/scrolling';
|
|---|
| 7 | import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|---|
| 8 |
|
|---|
| 9 | class VirtualScroller {
|
|---|
| 10 | constructor(el) {
|
|---|
| 11 | this.el = el;
|
|---|
| 12 | this.delay = 250;
|
|---|
| 13 | this.trackBy = (index, item) => item;
|
|---|
| 14 | this.onLazyLoad = new EventEmitter();
|
|---|
| 15 | this._totalRecords = 0;
|
|---|
| 16 | this.page = 0;
|
|---|
| 17 | this._first = 0;
|
|---|
| 18 | }
|
|---|
| 19 | get totalRecords() {
|
|---|
| 20 | return this._totalRecords;
|
|---|
| 21 | }
|
|---|
| 22 | set totalRecords(val) {
|
|---|
| 23 | this._totalRecords = val;
|
|---|
| 24 | console.log("totalRecords is deprecated, provide a value with the length of virtual items instead.");
|
|---|
| 25 | }
|
|---|
| 26 | get first() {
|
|---|
| 27 | return this._first;
|
|---|
| 28 | }
|
|---|
| 29 | set first(val) {
|
|---|
| 30 | this._first = val;
|
|---|
| 31 | console.log("first property is deprecated, use scrollToIndex function to scroll a specific item.");
|
|---|
| 32 | }
|
|---|
| 33 | get cache() {
|
|---|
| 34 | return this._cache;
|
|---|
| 35 | }
|
|---|
| 36 | set cache(val) {
|
|---|
| 37 | this._cache = val;
|
|---|
| 38 | console.log("cache is deprecated as it is always on.");
|
|---|
| 39 | }
|
|---|
| 40 | ngAfterContentInit() {
|
|---|
| 41 | this.templates.forEach((item) => {
|
|---|
| 42 | switch (item.getType()) {
|
|---|
| 43 | case 'item':
|
|---|
| 44 | this.itemTemplate = item.template;
|
|---|
| 45 | break;
|
|---|
| 46 | case 'loadingItem':
|
|---|
| 47 | this.loadingItemTemplate = item.template;
|
|---|
| 48 | break;
|
|---|
| 49 | case 'header':
|
|---|
| 50 | this.headerTemplate = item.template;
|
|---|
| 51 | break;
|
|---|
| 52 | case 'footer':
|
|---|
| 53 | this.footerTemplate = item.template;
|
|---|
| 54 | break;
|
|---|
| 55 | default:
|
|---|
| 56 | this.itemTemplate = item.template;
|
|---|
| 57 | break;
|
|---|
| 58 | }
|
|---|
| 59 | });
|
|---|
| 60 | }
|
|---|
| 61 | onScrollIndexChange(index) {
|
|---|
| 62 | if (this.lazy) {
|
|---|
| 63 | if (this.virtualScrollTimeout) {
|
|---|
| 64 | clearTimeout(this.virtualScrollTimeout);
|
|---|
| 65 | }
|
|---|
| 66 | this.virtualScrollTimeout = setTimeout(() => {
|
|---|
| 67 | let page = Math.floor(index / this.rows);
|
|---|
| 68 | let virtualScrollOffset = page === 0 ? 0 : (page - 1) * this.rows;
|
|---|
| 69 | let virtualScrollChunkSize = page === 0 ? this.rows * 2 : this.rows * 3;
|
|---|
| 70 | if (page !== this.virtualPage) {
|
|---|
| 71 | this.virtualPage = page;
|
|---|
| 72 | this.onLazyLoad.emit({ first: virtualScrollOffset, rows: virtualScrollChunkSize });
|
|---|
| 73 | }
|
|---|
| 74 | }, this.delay);
|
|---|
| 75 | }
|
|---|
| 76 | }
|
|---|
| 77 | getBlockableElement() {
|
|---|
| 78 | return this.el.nativeElement.children[0];
|
|---|
| 79 | }
|
|---|
| 80 | //@deprecated
|
|---|
| 81 | scrollTo(index, mode) {
|
|---|
| 82 | this.scrollToIndex(index, mode);
|
|---|
| 83 | }
|
|---|
| 84 | scrollToIndex(index, mode) {
|
|---|
| 85 | if (this.viewport) {
|
|---|
| 86 | this.viewport.scrollToIndex(index, mode);
|
|---|
| 87 | }
|
|---|
| 88 | }
|
|---|
| 89 | }
|
|---|
| 90 | VirtualScroller.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScroller, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 91 | VirtualScroller.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: VirtualScroller, selector: "p-virtualScroller", inputs: { value: "value", itemSize: "itemSize", style: "style", styleClass: "styleClass", scrollHeight: "scrollHeight", lazy: "lazy", rows: "rows", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", delay: "delay", trackBy: "trackBy", totalRecords: "totalRecords", first: "first", cache: "cache" }, outputs: { onLazyLoad: "onLazyLoad" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: `
|
|---|
| 92 | <div [ngClass]="'p-virtualscroller p-component'" [ngStyle]="style" [class]="styleClass">
|
|---|
| 93 | <div class="p-virtualscroller-header" *ngIf="header || headerTemplate">
|
|---|
| 94 | <ng-content select="p-header"></ng-content>
|
|---|
| 95 | <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
|---|
| 96 | </div>
|
|---|
| 97 | <div #content class="p-virtualscroller-content">
|
|---|
| 98 | <div class="p-virtualscroller-list">
|
|---|
| 99 | <cdk-virtual-scroll-viewport #viewport [ngStyle]="{'height': scrollHeight}" tabindex="0" [itemSize]="itemSize" [minBufferPx]="minBufferPx" [maxBufferPx]="maxBufferPx" (scrolledIndexChange)="onScrollIndexChange($event)">
|
|---|
| 100 | <ng-container *cdkVirtualFor="let item of value; trackBy: trackBy; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd;">
|
|---|
| 101 | <div [ngStyle]="{'height': itemSize + 'px'}" class="p-virtualscroller-item">
|
|---|
| 102 | <ng-container *ngTemplateOutlet="item ? itemTemplate : loadingItemTemplate; context: {$implicit: item, index: i, count: c, first: f, last: l, even: e, odd: o}"></ng-container>
|
|---|
| 103 | </div>
|
|---|
| 104 | </ng-container>
|
|---|
| 105 | </cdk-virtual-scroll-viewport>
|
|---|
| 106 | </div>
|
|---|
| 107 | </div>
|
|---|
| 108 | <div class="p-virtualscroller-footer" *ngIf="footer || footerTemplate">
|
|---|
| 109 | <ng-content select="p-footer"></ng-content>
|
|---|
| 110 | <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
|---|
| 111 | </div>
|
|---|
| 112 | </div>
|
|---|
| 113 | `, isInline: true, styles: ["cdk-virtual-scroll-viewport{outline:0 none}\n"], components: [{ type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 114 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScroller, decorators: [{
|
|---|
| 115 | type: Component,
|
|---|
| 116 | args: [{ selector: 'p-virtualScroller', template: `
|
|---|
| 117 | <div [ngClass]="'p-virtualscroller p-component'" [ngStyle]="style" [class]="styleClass">
|
|---|
| 118 | <div class="p-virtualscroller-header" *ngIf="header || headerTemplate">
|
|---|
| 119 | <ng-content select="p-header"></ng-content>
|
|---|
| 120 | <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
|---|
| 121 | </div>
|
|---|
| 122 | <div #content class="p-virtualscroller-content">
|
|---|
| 123 | <div class="p-virtualscroller-list">
|
|---|
| 124 | <cdk-virtual-scroll-viewport #viewport [ngStyle]="{'height': scrollHeight}" tabindex="0" [itemSize]="itemSize" [minBufferPx]="minBufferPx" [maxBufferPx]="maxBufferPx" (scrolledIndexChange)="onScrollIndexChange($event)">
|
|---|
| 125 | <ng-container *cdkVirtualFor="let item of value; trackBy: trackBy; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd;">
|
|---|
| 126 | <div [ngStyle]="{'height': itemSize + 'px'}" class="p-virtualscroller-item">
|
|---|
| 127 | <ng-container *ngTemplateOutlet="item ? itemTemplate : loadingItemTemplate; context: {$implicit: item, index: i, count: c, first: f, last: l, even: e, odd: o}"></ng-container>
|
|---|
| 128 | </div>
|
|---|
| 129 | </ng-container>
|
|---|
| 130 | </cdk-virtual-scroll-viewport>
|
|---|
| 131 | </div>
|
|---|
| 132 | </div>
|
|---|
| 133 | <div class="p-virtualscroller-footer" *ngIf="footer || footerTemplate">
|
|---|
| 134 | <ng-content select="p-footer"></ng-content>
|
|---|
| 135 | <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
|---|
| 136 | </div>
|
|---|
| 137 | </div>
|
|---|
| 138 | `, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
|
|---|
| 139 | 'class': 'p-element'
|
|---|
| 140 | }, styles: ["cdk-virtual-scroll-viewport{outline:0 none}\n"] }]
|
|---|
| 141 | }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
|
|---|
| 142 | type: Input
|
|---|
| 143 | }], itemSize: [{
|
|---|
| 144 | type: Input
|
|---|
| 145 | }], style: [{
|
|---|
| 146 | type: Input
|
|---|
| 147 | }], styleClass: [{
|
|---|
| 148 | type: Input
|
|---|
| 149 | }], scrollHeight: [{
|
|---|
| 150 | type: Input
|
|---|
| 151 | }], lazy: [{
|
|---|
| 152 | type: Input
|
|---|
| 153 | }], rows: [{
|
|---|
| 154 | type: Input
|
|---|
| 155 | }], minBufferPx: [{
|
|---|
| 156 | type: Input
|
|---|
| 157 | }], maxBufferPx: [{
|
|---|
| 158 | type: Input
|
|---|
| 159 | }], delay: [{
|
|---|
| 160 | type: Input
|
|---|
| 161 | }], trackBy: [{
|
|---|
| 162 | type: Input
|
|---|
| 163 | }], header: [{
|
|---|
| 164 | type: ContentChild,
|
|---|
| 165 | args: [Header]
|
|---|
| 166 | }], footer: [{
|
|---|
| 167 | type: ContentChild,
|
|---|
| 168 | args: [Footer]
|
|---|
| 169 | }], templates: [{
|
|---|
| 170 | type: ContentChildren,
|
|---|
| 171 | args: [PrimeTemplate]
|
|---|
| 172 | }], viewport: [{
|
|---|
| 173 | type: ViewChild,
|
|---|
| 174 | args: [CdkVirtualScrollViewport]
|
|---|
| 175 | }], onLazyLoad: [{
|
|---|
| 176 | type: Output
|
|---|
| 177 | }], totalRecords: [{
|
|---|
| 178 | type: Input
|
|---|
| 179 | }], first: [{
|
|---|
| 180 | type: Input
|
|---|
| 181 | }], cache: [{
|
|---|
| 182 | type: Input
|
|---|
| 183 | }] } });
|
|---|
| 184 | class VirtualScrollerModule {
|
|---|
| 185 | }
|
|---|
| 186 | VirtualScrollerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 187 | VirtualScrollerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScroller], imports: [CommonModule, ScrollingModule], exports: [VirtualScroller, SharedModule, ScrollingModule] });
|
|---|
| 188 | VirtualScrollerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScrollerModule, imports: [[CommonModule, ScrollingModule], SharedModule, ScrollingModule] });
|
|---|
| 189 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: VirtualScrollerModule, decorators: [{
|
|---|
| 190 | type: NgModule,
|
|---|
| 191 | args: [{
|
|---|
| 192 | imports: [CommonModule, ScrollingModule],
|
|---|
| 193 | exports: [VirtualScroller, SharedModule, ScrollingModule],
|
|---|
| 194 | declarations: [VirtualScroller]
|
|---|
| 195 | }]
|
|---|
| 196 | }] });
|
|---|
| 197 |
|
|---|
| 198 | /**
|
|---|
| 199 | * Generated bundle index. Do not edit.
|
|---|
| 200 | */
|
|---|
| 201 |
|
|---|
| 202 | export { VirtualScroller, VirtualScrollerModule };
|
|---|
