@egjs/ngx-infinitegrid 3.2.5 → 4.1.2-beta.0

package/fesm2015/egjs-ngx-infinitegrid.js

@@ -1,572 +1,311 @@
-import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, ElementRef, Input, Output, ViewChild, NgModule } from '@angular/core';
-import NativeInfiniteGrid, { CONTAINER_CLASSNAME, withInfiniteGridMethods, GridLayout, categorize, ItemManager, INFINITEGRID_EVENTS, IGNORE_CLASSNAME, JustifiedLayout, SquareLayout, FrameLayout, PackingLayout } from '@egjs/infinitegrid';
-import ListDiffer from '@egjs/list-differ';
-import { __decorate, __metadata } from 'tslib';
-import { CommonModule } from '@angular/common';
+import { ɵɵdefineInjectable, Injectable, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Inject, PLATFORM_ID, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { withInfiniteGridMethods, Renderer, INFINITEGRID_EVENTS, mountRenderingItems, getRenderingItems, MasonryInfiniteGrid, JustifiedInfiniteGrid, FrameInfiniteGrid, PackingInfiniteGrid } from '@egjs/infinitegrid';
+import { __decorate } from 'tslib';
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxInfiniteGridService {
+class NgxInfinitegridService {
     constructor() { }
 }
-NgxInfiniteGridService.decorators = [
+NgxInfinitegridService.ɵprov = ɵɵdefineInjectable({ factory: function NgxInfinitegridService_Factory() { return new NgxInfinitegridService(); }, token: NgxInfinitegridService, providedIn: "root" });
+NgxInfinitegridService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
-/** @nocollapse */
-NgxInfiniteGridService.ctorParameters = () => [];
-/** @nocollapse */ NgxInfiniteGridService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxInfiniteGridService_Factory() { return new NgxInfiniteGridService(); }, token: NgxInfiniteGridService, providedIn: "root" });
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const TEMPLATE = `
-  <ng-template #content><ng-content></ng-content></ng-template>
-  <ng-template #viewer>
-    <ng-template [ngIf]="options.isOverflowScroll" [ngIfElse]="noContainer">
-      <div class="${CONTAINER_CLASSNAME}" #container>
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
-    </ng-template>
-    <ng-template #noContainer>
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </ng-template>
-  </ng-template>
-  <ng-template [ngIf]="elRef.nativeElement.tagName==='NGX-INFINITEGRID'" [ngIfElse]="noWrapper">
-    <div #wrapper>
-      <ng-container *ngTemplateOutlet="viewer"></ng-container>
-    </div>
-  </ng-template>
-  <ng-template #noWrapper>
-    <ng-container *ngTemplateOutlet="viewer"></ng-container>
-  </ng-template>
-  `;
+NgxInfinitegridService.ctorParameters = () => [];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
 class NgxInfiniteGridInterface {
 }
 __decorate([
-    withInfiniteGridMethods,
-    __metadata("design:type", NativeInfiniteGrid)
-], NgxInfiniteGridInterface.prototype, "ig", void 0);
-if (false) {
-    /**
-     * @type {?}
-     * @protected
-     */
-    NgxInfiniteGridInterface.prototype.ig;
-}
-// WARNING: interface has both a type and a value, skipping emit
+    withInfiniteGridMethods
+], NgxInfiniteGridInterface.prototype, "vanillaGrid", void 0);
 
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * egjs-infinitegrid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
  */
+// @dynamic
 class NgxInfiniteGridComponent extends NgxInfiniteGridInterface {
-    /**
-     * @param {?} elRef
-     */
-    constructor(elRef) {
+    constructor(elementRef, _detectorRef, _platform) {
         super();
-        this.elRef = elRef;
-        this.trackBy = ((/**
-         * @param {?} _
-         * @param {?} item
-         * @return {?}
-         */
-        (_, item) => item.key));
-        this.groupBy = ((/**
-         * @param {?} _
-         * @param {?} item
-         * @return {?}
-         */
-        (_, item) => item.groupKey));
+        this.elementRef = elementRef;
+        this._detectorRef = _detectorRef;
+        this._platform = _platform;
         this.items = [];
-        this.useFirstRender = false;
-        this.layoutType = GridLayout;
-        this.options = {};
-        this.layoutOptions = {};
-        this.append = new EventEmitter();
-        this.prepend = new EventEmitter();
-        this.imageError = new EventEmitter();
-        this.contentError = new EventEmitter();
-        // tslint:disable-next-line: no-output-native
-        this.change = new EventEmitter();
-        this.layoutComplete = new EventEmitter();
-        this.visibleChange = new EventEmitter();
-        this.render = new EventEmitter();
+        this.trackBy = ((_, item) => item.key);
+        this.groupBy = ((_, item) => item.groupKey);
         this.visibleItems = [];
-        this.layoutState = '';
-        this.isChange = false;
-        this.visibleDiffer = new ListDiffer([], (/**
-         * @param {?} item
-         * @return {?}
-         */
-        item => item.itemKey));
-        this.nextFunction = (/**
-         * @return {?}
-         */
-        () => { });
-        this.setStatus = (/**
-         * @param {?} status
-         * @param {?=} applyScrollPos
-         * @param {?=} syncElements
-         * @return {?}
-         */
-        (status, applyScrollPos, syncElements = this.getElements()) => {
-            this.ig.setStatus(status, applyScrollPos, syncElements);
-            return this;
-        });
+        this._renderer = new Renderer();
+        this._isChange = false;
+        for (const name in INFINITEGRID_EVENTS) {
+            const eventName = INFINITEGRID_EVENTS[name];
+            this[eventName] = new EventEmitter();
+        }
     }
-    /**
-     * @return {?}
-     */
     ngOnInit() {
-        /** @type {?} */
-        const groups = categorize(this.items);
-        if (this.status) {
-            const { startCursor, endCursor } = this.status._infinite;
-            this.updateVisibleItems(ItemManager.pluck(groups.slice(startCursor, endCursor + 1), 'items').map((/**
-             * @param {?} item
-             * @return {?}
-             */
-            item => item.data)));
-        }
-        else if (this.useFirstRender) {
-            this.updateVisibleItems(this.items);
-        }
+        this._updateVisibleChildren();
+    }
+    ngOnChanges() {
+        this._isChange = true;
+        this._updateVisibleChildren();
     }
-    /**
-     * @param {?} changes
-     * @return {?}
-     */
-    ngOnChanges(changes) {
-        /** @type {?} */
-        const ig = this.ig;
-        if (!ig) {
+    ngAfterViewInit() {
+        var _a;
+        if (!isPlatformBrowser(this._platform)) {
             return;
         }
-        /** @type {?} */
-        const result = ig.beforeSync(this.toItems());
-        this.layoutState = result === 'relayout' ? result : this.layoutState || result;
-        this.updateVisibleItems(this.getVisibleItems());
-        this.isChange = true;
-        if (changes.loading) {
-            ig.setLoadingBar({
-                append: this.loading,
-                prepend: this.loading,
+        const GridClass = this.constructor.GridClass;
+        const defaultOptions = GridClass.defaultOptions;
+        const options = {};
+        const containerElement = (_a = this._containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        for (const name in defaultOptions) {
+            if (name in this && typeof this[name] !== "undefined") {
+                options[name] = this[name];
+            }
+        }
+        if (containerElement) {
+            options.container = containerElement;
+        }
+        options.renderer = this._renderer;
+        const wrapper = this._wrapperRef || this.elementRef;
+        const grid = new GridClass(wrapper.nativeElement, options);
+        for (const name in INFINITEGRID_EVENTS) {
+            const eventName = INFINITEGRID_EVENTS[name];
+            grid.on(eventName, (e) => {
+                this[eventName].emit(e);
             });
         }
+        this.vanillaGrid = grid;
+        this._renderer.on("requestUpdate", () => {
+            this._isChange = true;
+            this._updateVisibleChildren();
+        });
+        mountRenderingItems(this._getItemInfos(), {
+            grid,
+            useFirstRender: this.useFirstRender,
+            useLoading: this.useLoading,
+            usePlaceholder: this.usePlaceholder,
+            horizontal: this.horizontal,
+            status: this.status,
+        });
+        this._renderer.updated();
     }
-    /**
-     * @return {?}
-     */
     ngAfterViewChecked() {
-        if (!this.isChange) {
+        if (!this._isChange || !this.vanillaGrid) {
             return;
         }
-        this.isChange = false;
-        this.ig.sync(this.getElements());
-        /** @type {?} */
-        const layoutState = this.layoutState;
-        if (layoutState) {
-            this.layoutState = '';
-            this.ig.layout(layoutState === 'relayout');
-        }
-        this.nextFunction();
-        this.nextFunction = (/**
-         * @return {?}
-         */
-        () => { });
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterViewInit() {
-        /** @type {?} */
-        const ref = this.wrapperRef || this.elRef;
-        this.ig = new NativeInfiniteGrid(ref.nativeElement, Object.assign({}, this.options, { renderExternal: true })).on('render', (/**
-         * @param {?} __0
-         * @return {?}
-         */
-        ({ next }) => {
-            setTimeout((/**
-             * @return {?}
-             */
-            () => {
-                this.nextFunction = next;
-                this.updateVisibleItems(this.getVisibleItems());
-                this.isChange = true;
-            }));
-        }));
-        /** @type {?} */
-        const ig = this.ig;
-        INFINITEGRID_EVENTS.forEach((/**
-         * @param {?} name
-         * @return {?}
-         */
-        name => {
-            if (!this[name]) {
-                return;
+        this._isChange = false;
+        const GridClass = this.constructor.GridClass;
+        const propertyTypes = GridClass.propertyTypes;
+        const grid = this.vanillaGrid;
+        for (const name in propertyTypes) {
+            if (name in this) {
+                grid[name] = this[name];
             }
-            ig.on((/** @type {?} */ (name)), (/**
-             * @param {?} e
-             * @return {?}
-             */
-            e => {
-                ((/** @type {?} */ (this)))[name].emit(Object.assign({}, e, { currentTarget: this }));
-            }));
-        }));
-        ig.setLayout(this.layoutType, Object.assign({}, this.layoutOptions));
-        if (this.loading) {
-            ig.setLoadingBar({
-                prepend: this.loading,
-                append: this.loading,
-            });
-        }
-        if (this.status) {
-            this.setStatus(this.status, true);
-        }
-        else {
-            ig.beforeSync(this.toItems());
-            ig.layout(true);
         }
+        this._renderer.updated();
     }
-    /**
-     * @return {?}
-     */
     ngOnDestroy() {
-        this.ig.destroy();
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    getElements() {
-        /** @type {?} */
-        const ref = this.containerRef || this.wrapperRef || this.elRef;
-        /** @type {?} */
-        const elements = [].slice.call(ref.nativeElement.children);
-        if (this.loading) {
-            return elements.filter((/**
-             * @param {?} el
-             * @return {?}
-             */
-            el => {
-                return el.className.indexOf(IGNORE_CLASSNAME) < 0;
-            }));
-        }
-        return elements;
+        var _a;
+        (_a = this.vanillaGrid) === null || _a === void 0 ? void 0 : _a.destroy();
     }
-    /**
-     * @private
-     * @return {?}
-     */
-    getVisibleItems() {
-        return this.ig.getRenderingItems().map((/**
-         * @param {?} item
-         * @return {?}
-         */
-        item => item.data));
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    toItems() {
-        /** @type {?} */
-        const groupBy = this.groupBy;
-        /** @type {?} */
+    _getItemInfos() {
+        const items = this.items;
         const trackBy = this.trackBy;
-        return this.items.map((/**
-         * @param {?} item
-         * @param {?} i
-         * @return {?}
-         */
-        (item, i) => ({
-            groupKey: groupBy(i, item),
-            itemKey: trackBy(i, item),
-            data: item,
-        })));
+        const groupBy = this.groupBy;
+        return items.map((item, i) => {
+            return {
+                groupKey: groupBy(i, item),
+                key: trackBy(i, item),
+                data: item,
+            };
+        });
     }
-    /**
-     * @private
-     * @param {?} items
-     * @return {?}
-     */
-    updateVisibleItems(items) {
-        const { added, changed, removed } = this.visibleDiffer.update(items);
-        this.visibleItems = items;
-        if (added.length || changed.length || removed.length) {
-            this.visibleChange.emit(items);
-        }
+    _updateVisibleChildren() {
+        this.visibleItems = getRenderingItems(this._getItemInfos(), {
+            grid: this.vanillaGrid,
+            useFirstRender: this.useFirstRender,
+            useLoading: this.useLoading,
+            usePlaceholder: this.usePlaceholder,
+            horizontal: this.horizontal,
+            status: this.status,
+        });
+        this._detectorRef.markForCheck();
     }
 }
 NgxInfiniteGridComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-infinitegrid, [NgxInfiniteGrid]',
-                template: TEMPLATE
-            }] }
+                selector: 'ngx-infinite-grid, [NgxInfiniteGrid]',
+                template: '<slot></slot>',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [':host { display: block }']
+            },] }
 ];
-/** @nocollapse */
 NgxInfiniteGridComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
 ];
 NgxInfiniteGridComponent.propDecorators = {
-    trackBy: [{ type: Input }],
-    groupBy: [{ type: Input }],
-    items: [{ type: Input }],
+    gridConstructor: [{ type: Input }],
+    renderer: [{ type: Input }],
+    container: [{ type: Input }],
+    containerTag: [{ type: Input }],
+    threshold: [{ type: Input }],
+    useRecycle: [{ type: Input }],
+    horizontal: [{ type: Input }],
+    percentage: [{ type: Input }],
+    isEqualSize: [{ type: Input }],
+    isConstantSize: [{ type: Input }],
+    gap: [{ type: Input }],
+    attributePrefix: [{ type: Input }],
+    resizeDebounce: [{ type: Input }],
+    maxResizeDebounce: [{ type: Input }],
+    autoResize: [{ type: Input }],
+    useFit: [{ type: Input }],
+    useTransform: [{ type: Input }],
+    renderOnPropertyChange: [{ type: Input }],
+    preserveUIOnDestroy: [{ type: Input }],
+    defaultDirection: [{ type: Input }],
+    externalItemRenderer: [{ type: Input }],
+    externalContainerManager: [{ type: Input }],
+    usePlaceholder: [{ type: Input }],
+    useLoading: [{ type: Input }],
     status: [{ type: Input }],
-    loading: [{ type: Input }],
     useFirstRender: [{ type: Input }],
-    layoutType: [{ type: Input }],
-    options: [{ type: Input }],
-    layoutOptions: [{ type: Input }],
-    append: [{ type: Output }],
-    prepend: [{ type: Output }],
-    imageError: [{ type: Output }],
+    items: [{ type: Input }],
+    trackBy: [{ type: Input }],
+    groupBy: [{ type: Input }],
+    renderComplete: [{ type: Output }],
     contentError: [{ type: Output }],
-    change: [{ type: Output }],
-    layoutComplete: [{ type: Output }],
-    visibleChange: [{ type: Output }],
-    render: [{ type: Output }],
-    wrapperRef: [{ type: ViewChild, args: ['wrapper', { static: false },] }],
-    containerRef: [{ type: ViewChild, args: ['container', { static: false },] }]
+    changeScroll: [{ type: Output }],
+    requestAppend: [{ type: Output }],
+    requestPrepend: [{ type: Output }],
+    _wrapperRef: [{ type: ViewChild, args: ['wrapperRef', { static: false },] }],
+    _containerRef: [{ type: ViewChild, args: ['containerRef', { static: false },] }]
 };
-if (false) {
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.trackBy;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.groupBy;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.items;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.status;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.loading;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.useFirstRender;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.layoutType;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.options;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.layoutOptions;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.append;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.prepend;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.imageError;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.contentError;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.change;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.layoutComplete;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.visibleChange;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.render;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.wrapperRef;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.containerRef;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.visibleItems;
-    /**
-     * @type {?}
-     * @private
-     */
-    NgxInfiniteGridComponent.prototype.layoutState;
-    /**
-     * @type {?}
-     * @private
-     */
-    NgxInfiniteGridComponent.prototype.isChange;
-    /**
-     * @type {?}
-     * @private
-     */
-    NgxInfiniteGridComponent.prototype.visibleDiffer;
-    /**
-     * @type {?}
-     * @private
-     */
-    NgxInfiniteGridComponent.prototype.nextFunction;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.setStatus;
-    /** @type {?} */
-    NgxInfiniteGridComponent.prototype.elRef;
-}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxGridLayoutComponent extends NgxInfiniteGridComponent {
-    constructor() {
-        super(...arguments);
-        this.layoutType = GridLayout;
-    }
-}
-NgxGridLayoutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ngx-gridlayout, [NgxGridLayout]',
-                template: TEMPLATE
-            }] }
-];
-NgxGridLayoutComponent.propDecorators = {
-    layoutType: [{ type: Input }]
-};
-if (false) {
-    /** @type {?} */
-    NgxGridLayoutComponent.prototype.layoutType;
-}
+const TEMPLATE = `
+<ng-template #content><ng-content></ng-content></ng-template>
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxJustifiedLayoutComponent extends NgxInfiniteGridComponent {
-    constructor() {
-        super(...arguments);
-        this.layoutType = JustifiedLayout;
-    }
+<ng-template #viewer>
+  <ng-template [ngIf]="container === true" [ngIfElse]="noContainer">
+    <div #containerRef>
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </div>
+  </ng-template>
+  <ng-template #noContainer>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </ng-template>
+</ng-template>
+
+<ng-template [ngIf]="elementRef.nativeElement.tagName.indexOf('NGX-') === 0" [ngIfElse]="noWrapper">
+  <div #wrapperRef>
+    <ng-container *ngTemplateOutlet="viewer"></ng-container>
+  </div>
+</ng-template>
+
+<ng-template #noWrapper>
+  <ng-container *ngTemplateOutlet="viewer"></ng-container>
+</ng-template>
+`;
+
+class NgxMasonryInfiniteGridComponent extends NgxInfiniteGridComponent {
 }
-NgxJustifiedLayoutComponent.decorators = [
+NgxMasonryInfiniteGridComponent.GridClass = MasonryInfiniteGrid;
+NgxMasonryInfiniteGridComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-justifiedlayout, [NgxJustifiedLayout]',
+                selector: 'ngx-masonry-infinite-grid, [NgxMasonryInfiniteGrid]',
                 template: TEMPLATE
-            }] }
+            },] }
 ];
-NgxJustifiedLayoutComponent.propDecorators = {
-    layoutType: [{ type: Input }]
+NgxMasonryInfiniteGridComponent.propDecorators = {
+    column: [{ type: Input }],
+    columnSize: [{ type: Input }],
+    columnSizeRatio: [{ type: Input }],
+    align: [{ type: Input }]
 };
-if (false) {
-    /** @type {?} */
-    NgxJustifiedLayoutComponent.prototype.layoutType;
-}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxSquareLayoutComponent extends NgxInfiniteGridComponent {
-    constructor() {
-        super(...arguments);
-        this.layoutType = SquareLayout;
-    }
+class NgxJustifiedInfiniteGridComponent extends NgxInfiniteGridComponent {
 }
-NgxSquareLayoutComponent.decorators = [
+NgxJustifiedInfiniteGridComponent.GridClass = JustifiedInfiniteGrid;
+NgxJustifiedInfiniteGridComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-squarelayout, [NgxSquareLayout]',
+                selector: 'ngx-justified-infinite-grid, [NgxJustifiedInfiniteGrid]',
                 template: TEMPLATE
-            }] }
+            },] }
 ];
-NgxSquareLayoutComponent.propDecorators = {
-    layoutType: [{ type: Input }]
+NgxJustifiedInfiniteGridComponent.propDecorators = {
+    columnRange: [{ type: Input }],
+    rowRange: [{ type: Input }],
+    sizeRange: [{ type: Input }],
+    displayedRow: [{ type: Input }],
+    isCroppedSize: [{ type: Input }]
 };
-if (false) {
-    /** @type {?} */
-    NgxSquareLayoutComponent.prototype.layoutType;
-}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxFrameLayoutComponent extends NgxInfiniteGridComponent {
-    constructor() {
-        super(...arguments);
-        this.layoutType = FrameLayout;
-    }
+class NgxFrameInfiniteGridComponent extends NgxInfiniteGridComponent {
 }
-NgxFrameLayoutComponent.decorators = [
+NgxFrameInfiniteGridComponent.GridClass = FrameInfiniteGrid;
+NgxFrameInfiniteGridComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-framelayout, [NgxFrameLayout]',
+                selector: 'ngx-frame-infinite-grid, [NgxFrameInfiniteGrid]',
                 template: TEMPLATE
-            }] }
+            },] }
 ];
-NgxFrameLayoutComponent.propDecorators = {
-    layoutType: [{ type: Input }]
+NgxFrameInfiniteGridComponent.propDecorators = {
+    frame: [{ type: Input }],
+    useFrameFill: [{ type: Input }],
+    rectSize: [{ type: Input }]
 };
-if (false) {
-    /** @type {?} */
-    NgxFrameLayoutComponent.prototype.layoutType;
-}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxPackingLayoutComponent extends NgxInfiniteGridComponent {
-    constructor() {
-        super(...arguments);
-        this.layoutType = PackingLayout;
-    }
+class NgxPackingInfiniteGridComponent extends NgxInfiniteGridComponent {
 }
-NgxPackingLayoutComponent.decorators = [
+NgxPackingInfiniteGridComponent.GridClass = PackingInfiniteGrid;
+NgxPackingInfiniteGridComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-packinglayout, [NgxPackingLayout]',
+                selector: 'ngx-packing-infinite-grid, [NgxPackingInfiniteGrid]',
                 template: TEMPLATE
-            }] }
+            },] }
 ];
-NgxPackingLayoutComponent.propDecorators = {
-    layoutType: [{ type: Input }]
+NgxPackingInfiniteGridComponent.propDecorators = {
+    aspectRatio: [{ type: Input }],
+    sizeWeight: [{ type: Input }],
+    ratioWeight: [{ type: Input }],
+    weightPriority: [{ type: Input }]
 };
-if (false) {
-    /** @type {?} */
-    NgxPackingLayoutComponent.prototype.layoutType;
-}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
 class NgxInfiniteGridModule {
 }
 NgxInfiniteGridModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
                     NgxInfiniteGridComponent,
-                    NgxGridLayoutComponent,
-                    NgxJustifiedLayoutComponent,
-                    NgxSquareLayoutComponent,
-                    NgxFrameLayoutComponent,
-                    NgxPackingLayoutComponent,
+                    NgxMasonryInfiniteGridComponent,
+                    NgxJustifiedInfiniteGridComponent,
+                    NgxFrameInfiniteGridComponent,
+                    NgxPackingInfiniteGridComponent,
                 ],
                 imports: [
                     CommonModule,
                 ],
                 exports: [
                     NgxInfiniteGridComponent,
-                    NgxGridLayoutComponent,
-                    NgxJustifiedLayoutComponent,
-                    NgxSquareLayoutComponent,
-                    NgxFrameLayoutComponent,
-                    NgxPackingLayoutComponent,
+                    NgxMasonryInfiniteGridComponent,
+                    NgxJustifiedInfiniteGridComponent,
+                    NgxFrameInfiniteGridComponent,
+                    NgxPackingInfiniteGridComponent,
                 ],
             },] }
 ];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+/*
+ * Public API Surface of ngx-infinitegrid
  */
 
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated bundle index. Do not edit.
  */
 
-export { NgxFrameLayoutComponent, NgxGridLayoutComponent, NgxInfiniteGridComponent, NgxInfiniteGridModule, NgxInfiniteGridService, NgxJustifiedLayoutComponent, NgxPackingLayoutComponent, NgxSquareLayoutComponent, TEMPLATE as ɵa };
+export { NgxInfiniteGridComponent, NgxInfiniteGridModule, NgxInfinitegridService, NgxMasonryInfiniteGridComponent, NgxInfiniteGridInterface as ɵa, TEMPLATE as ɵb, NgxJustifiedInfiniteGridComponent as ɵc, NgxFrameInfiniteGridComponent as ɵd, NgxPackingInfiniteGridComponent as ɵe };
 //# sourceMappingURL=egjs-ngx-infinitegrid.js.map