@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
39 lines • 8.91 kB
JavaScript
import { Component, Input, TemplateRef } from '@angular/core';
import { of, pipe } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/cdk/scrolling";
import * as i3 from "./virtual-scroll-window.directive";
export class VirtualScrollerWrapperComponent {
constructor() {
this.filterPipe = pipe(tap());
this.trackByFn = (i, item) => {
return item.id;
};
}
apply() {
this.items$ = of(this.items).pipe(src => this.filterPipe(src), map(item => item));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VirtualScrollerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VirtualScrollerWrapperComponent, selector: "c8y-virtual-scroller-wrapper", inputs: { items: "items", itemHeight: "itemHeight", containerHeight: "containerHeight", template: "template", filterPipe: "filterPipe", strategy: "strategy", trackByFn: "trackByFn" }, ngImport: i0, template: "<ng-container *ngIf=\"items$ |async as items\" [ngSwitch]=\"strategy\">\n <ng-container *ngSwitchCase=\"'window'\">\n <cdk-virtual-scroll-viewport windowVirtualScrollStrategy [itemSizePx]=\"itemHeight\" class=\"inner-scroll\">\n <div *cdkVirtualFor=\"let item of items; index as i; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: item, index: i}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'fixed'\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.height]=\"containerHeight + 'px'\" class=\"inner-scroll\">\n <div *cdkVirtualFor=\"let item of items; index as i; trackBy: trackByFn\" >\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: item, index: i}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.VirtualScrollWindowDirective, selector: "cdk-virtual-scroll-viewport[windowVirtualScrollStrategy]", inputs: ["itemSizePx", "minBufferPx", "maxBufferPx", "offsetSizePx"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VirtualScrollerWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-virtual-scroller-wrapper', template: "<ng-container *ngIf=\"items$ |async as items\" [ngSwitch]=\"strategy\">\n <ng-container *ngSwitchCase=\"'window'\">\n <cdk-virtual-scroll-viewport windowVirtualScrollStrategy [itemSizePx]=\"itemHeight\" class=\"inner-scroll\">\n <div *cdkVirtualFor=\"let item of items; index as i; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: item, index: i}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'fixed'\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.height]=\"containerHeight + 'px'\" class=\"inner-scroll\">\n <div *cdkVirtualFor=\"let item of items; index as i; trackBy: trackByFn\" >\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: item, index: i}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n</ng-container>\n" }]
}], propDecorators: { items: [{
type: Input
}], itemHeight: [{
type: Input
}], containerHeight: [{
type: Input
}], template: [{
type: Input
}], filterPipe: [{
type: Input
}], strategy: [{
type: Input
}], trackByFn: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlydHVhbC1zY3JvbGxlci13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvcmUvY29tbW9uL3ZpcnR1YWwtc2Nyb2xsL3ZpcnR1YWwtc2Nyb2xsZXItd3JhcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9jb3JlL2NvbW1vbi92aXJ0dWFsLXNjcm9sbC92aXJ0dWFsLXNjcm9sbGVyLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBYyxFQUFFLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBTTFDLE1BQU0sT0FBTywrQkFBK0I7SUFKNUM7UUFZVyxlQUFVLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFLekIsY0FBUyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksRUFBRSxFQUFFO1lBQy9CLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQztRQUNqQixDQUFDLENBQUM7S0FRSDtJQU5DLEtBQUs7UUFDSCxJQUFJLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUMvQixHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQzNCLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUNsQixDQUFDO0lBQ0osQ0FBQzsrR0F0QlUsK0JBQStCO21HQUEvQiwrQkFBK0IsNFBDUjVDLDA4QkFpQkE7OzRGRFRhLCtCQUErQjtrQkFKM0MsU0FBUzsrQkFDRSw4QkFBOEI7OEJBSS9CLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFJRyxVQUFVO3NCQUFsQixLQUFLO2dCQUdOLFFBQVE7c0JBRFAsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mLCBwaXBlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIHRhcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LXZpcnR1YWwtc2Nyb2xsZXItd3JhcHBlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi92aXJ0dWFsLXNjcm9sbGVyLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFZpcnR1YWxTY3JvbGxlcldyYXBwZXJDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtcztcbiAgQElucHV0KCkgaXRlbUhlaWdodDtcbiAgQElucHV0KCkgY29udGFpbmVySGVpZ2h0O1xuICBASW5wdXQoKSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxuICBpdGVtcyQ6IE9ic2VydmFibGU8dW5rbm93bj47XG5cbiAgQElucHV0KCkgZmlsdGVyUGlwZSA9IHBpcGUodGFwKCkpO1xuXG4gIEBJbnB1dCgpXG4gIHN0cmF0ZWd5OiAnZml4ZWQnIHwgJ3dpbmRvdyc7XG5cbiAgQElucHV0KCkgdHJhY2tCeUZuID0gKGksIGl0ZW0pID0+IHtcbiAgICByZXR1cm4gaXRlbS5pZDtcbiAgfTtcblxuICBhcHBseSgpIHtcbiAgICB0aGlzLml0ZW1zJCA9IG9mKHRoaXMuaXRlbXMpLnBpcGUoXG4gICAgICBzcmMgPT4gdGhpcy5maWx0ZXJQaXBlKHNyYyksXG4gICAgICBtYXAoaXRlbSA9PiBpdGVtKVxuICAgICk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtcyQgfGFzeW5jIGFzIGl0ZW1zXCIgW25nU3dpdGNoXT1cInN0cmF0ZWd5XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ3dpbmRvdydcIj5cbiAgICAgIDxjZGstdmlydHVhbC1zY3JvbGwtdmlld3BvcnQgd2luZG93VmlydHVhbFNjcm9sbFN0cmF0ZWd5IFtpdGVtU2l6ZVB4XT1cIml0ZW1IZWlnaHRcIiBjbGFzcz1cImlubmVyLXNjcm9sbFwiPlxuICAgICAgICA8ZGl2ICpjZGtWaXJ0dWFsRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGluZGV4IGFzIGk7IHRyYWNrQnk6IHRyYWNrQnlGblwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZTsgY29udGV4dDogeyRpbXBsaWNpdDogaXRlbSwgaW5kZXg6IGl9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9jZGstdmlydHVhbC1zY3JvbGwtdmlld3BvcnQ+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInZml4ZWQnXCI+XG4gICAgICA8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0IFtpdGVtU2l6ZV09XCJpdGVtSGVpZ2h0XCIgW3N0eWxlLmhlaWdodF09XCJjb250YWluZXJIZWlnaHQgKyAncHgnXCIgY2xhc3M9XCJpbm5lci1zY3JvbGxcIj5cbiAgICAgICAgPGRpdiAqY2RrVmlydHVhbEZvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBpbmRleCBhcyBpOyB0cmFja0J5OiB0cmFja0J5Rm5cIiA+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlOyBjb250ZXh0OiB7JGltcGxpY2l0OiBpdGVtLCBpbmRleDogaX1cIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Nkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvbmctY29udGFpbmVyPlxuIl19