ngx-ui-scroll/fesm2015/ngx-ui-scroll.js

Infinite/virtual scroll for Angular

/**
 * @license ngx-ui-scroll
 * MIT license
 */

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Directive, TemplateRef, ViewContainerRef, ComponentFactoryResolver, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Workflow, makeDatasource, AdapterPropName, EMPTY_ITEM } from 'vscroll';
export { Routines, SizeStrategy } from 'vscroll';
import { Subject, BehaviorSubject } from 'rxjs';

var consumer = {
    name: 'ngx-ui-scroll',
    version: '2.4.1'
};

class UiScrollComponent {
    constructor(changeDetector, elementRef) {
        this.changeDetector = changeDetector;
        this.elementRef = elementRef;
        // the only template variable
        this.items = [];
    }
    ngOnInit() {
        this.workflow = new Workflow({
            consumer,
            element: this.elementRef.nativeElement,
            datasource: this.datasource,
            run: items => {
                if (!items.length && !this.items.length) {
                    return;
                }
                this.items = items;
                this.changeDetector.detectChanges();
            }
        });
    }
    ngOnDestroy() {
        this.workflow.dispose();
    }
}
UiScrollComponent.decorators = [
    { type: Component, args: [{
                selector: '[ui-scroll]',
                changeDetection: ChangeDetectionStrategy.OnPush,
                template: `
    <div data-padding-backward></div>
    <div
      *ngFor="let item of items"
      [attr.data-sid]="item.$index"
      [style.position]="item.invisible ? 'fixed' : null"
      [style.left]="item.invisible ? '-99999px' : null">
      <ng-template
        [ngTemplateOutlet]="template"
        [ngTemplateOutletContext]="{
          $implicit: item.data,
          index: item.$index,
          odd: item.$index % 2,
          even: !(item.$index % 2)
      }"></ng-template>
    </div>
    <div data-padding-forward></div>`
            },] }
];
UiScrollComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: ElementRef }
];

class UiScrollDirective {
    constructor(templateRef, viewContainer, resolver) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
        this.resolver = resolver;
    }
    set uiScrollOf(datasource) {
        this.datasource = datasource;
    }
    ngOnInit() {
        const compFactory = this.resolver.resolveComponentFactory(UiScrollComponent);
        const componentRef = this.viewContainer.createComponent(compFactory, void 0, this.viewContainer.injector);
        componentRef.instance.datasource = this.datasource;
        componentRef.instance.template = this.templateRef;
    }
}
UiScrollDirective.decorators = [
    { type: Directive, args: [{ selector: '[uiScroll][uiScrollOf]' },] }
];
UiScrollDirective.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef },
    { type: ComponentFactoryResolver }
];
UiScrollDirective.propDecorators = {
    uiScrollOf: [{ type: Input }]
};

class UiScrollModule {
}
UiScrollModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    UiScrollComponent,
                    UiScrollDirective
                ],
                imports: [CommonModule],
                entryComponents: [UiScrollComponent],
                exports: [UiScrollDirective],
                providers: []
            },] }
];

const getBooleanSubjectPropConfig = () => ({
    source: new Subject(),
    emit: (source, value) => source.next(value)
});
const getItemBehaviorSubjectPropConfig = () => ({
    source: new BehaviorSubject(EMPTY_ITEM),
    emit: (source, value) => source.next(value)
});
const getAdapterConfig = () => ({
    mock: false,
    reactive: {
        [AdapterPropName.init$]: getBooleanSubjectPropConfig(),
        [AdapterPropName.isLoading$]: getBooleanSubjectPropConfig(),
        [AdapterPropName.loopPending$]: getBooleanSubjectPropConfig(),
        [AdapterPropName.firstVisible$]: getItemBehaviorSubjectPropConfig(),
        [AdapterPropName.lastVisible$]: getItemBehaviorSubjectPropConfig(),
        [AdapterPropName.bof$]: getBooleanSubjectPropConfig(),
        [AdapterPropName.eof$]: getBooleanSubjectPropConfig(),
    }
});
const AngularDatasource = makeDatasource(getAdapterConfig);

export { AngularDatasource as Datasource, UiScrollDirective, UiScrollModule, UiScrollComponent as ɵa };
//# sourceMappingURL=ngx-ui-scroll.js.map