@egjs/ngx-infinitegrid 4.7.1 → 4.8.0

package/README.md

@@ -33,7 +33,9 @@
 
 ## ⚙️ Installation
 ```sh
-npm install --save @egjs/ngx-infinitegrid
+npm install @egjs/ngx-infinitegrid
+# Or if you're using yarn
+yarn add @egjs/ngx-infinitegrid
 ```
 
 ## 🏃 Quick Start
@@ -54,22 +56,25 @@ import { NgModule } from '@angular/core';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { } /* Your app */
+export class AppModule {} /* Your app */
 ```
 
 ```html
-<div NgxMasonryInfiniteGrid
+<div
+  NgxMasonryInfiniteGrid
   class="container"
   [gap]="5"
   [items]="items"
   [trackBy]="trackBy"
   [groupBy]="groupBy"
   (requestAppend)="onRequestAppend($event)"
-  *ngFor="let item of [0]; trackBy: randomTrackBy;"
+  *ngFor="let item of [0]; trackBy: randomTrackBy"
   #ig
-  >
-  <div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
-  </div>
+>
+  <div
+    class="item"
+    *ngFor="let item of ig.visibleItems; trackBy: trackBy;"
+  ></div>
 </div>
 ```
 
@@ -79,10 +84,11 @@ import { OnRequestAppend } from '@egjs/infinitegrid';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   items = this.getItems(0, 10);
+
   getItems(nextGroupKey: number, count: number) {
     const nextItems = [];
     const nextKey = nextGroupKey * count;
@@ -92,19 +98,19 @@ export class AppComponent {
     }
     return nextItems;
   }
+
   groupBy(_: any, item: any) {
     return item.groupKey;
   }
+
   trackBy(_: any, item: any) {
     return item.key;
   }
+
   onRequestAppend(e: OnRequestAppend) {
     const nextGroupKey = (+e.groupKey! || 0) + 1;
 
-    this.items = [
-      ...this.items,
-      ...this.getItems(nextGroupKey, 10),
-    ];
+    this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
   }
 }
 ```

package/bundles/egjs-ngx-infinitegrid.umd.js

@@ -1,41 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@egjs/infinitegrid')) :
-    typeof define === 'function' && define.amd ? define('@egjs/ngx-infinitegrid', ['exports', '@angular/core', '@angular/common', '@egjs/infinitegrid'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.egjs = global.egjs || {}, global.egjs["ngx-infinitegrid"] = {}), global.ng.core, global.ng.common, global.infinitegrid));
-})(this, (function (exports, i0, common, infinitegrid) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-
-    var NgxInfinitegridService = /** @class */ (function () {
-        function NgxInfinitegridService() {
-        }
-        return NgxInfinitegridService;
-    }());
-    NgxInfinitegridService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NgxInfinitegridService_Factory() { return new NgxInfinitegridService(); }, token: NgxInfinitegridService, providedIn: "root" });
-    NgxInfinitegridService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    NgxInfinitegridService.ctorParameters = function () { return []; };
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@egjs/infinitegrid')) :
+    typeof define === 'function' && define.amd ? define('@egjs/ngx-infinitegrid', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@egjs/infinitegrid'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.egjs = global.egjs || {}, global.egjs["ngx-infinitegrid"] = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.infinitegrid));
+})(this, (function (exports, core, common, rxjs, operators, infinitegrid) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -135,7 +102,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (_)
+            while (g && (g = 0, op[0] && (_ = 0)), _)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -373,22 +340,23 @@
         infinitegrid.withInfiniteGridMethods
     ], NgxInfiniteGridInterface.prototype, "vanillaGrid", void 0);
 
-    // @dynamic
     var NgxInfiniteGridComponent = /** @class */ (function (_super) {
         __extends(NgxInfiniteGridComponent, _super);
-        function NgxInfiniteGridComponent(elementRef, _platform) {
+        function NgxInfiniteGridComponent(elementRef, _platformId, _ngZone) {
             var _this = _super.call(this) || this;
             _this.elementRef = elementRef;
-            _this._platform = _platform;
+            _this._platformId = _platformId;
+            _this._ngZone = _ngZone;
             _this.items = [];
             _this.trackBy = (function (_, item) { return item.key; });
             _this.groupBy = (function (_, item) { return item.groupKey; });
             _this.visibleItems = [];
             _this._renderer = new infinitegrid.Renderer();
             _this._isChange = false;
+            _this._destroy$ = new rxjs.Subject();
             for (var name in infinitegrid.INFINITEGRID_EVENTS) {
                 var eventName = infinitegrid.INFINITEGRID_EVENTS[name];
-                _this[eventName] = new i0.EventEmitter();
+                _this[eventName] = new core.EventEmitter();
             }
             return _this;
         }
@@ -401,36 +369,41 @@
         };
         NgxInfiniteGridComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            var _a;
-            if (!common.isPlatformBrowser(this._platform)) {
+            if (common.isPlatformServer(this._platformId)) {
                 return;
             }
             var GridClass = this.constructor.GridClass;
             var defaultOptions = GridClass.defaultOptions;
             var options = {};
-            var containerElement = (_a = this._containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
             for (var name in defaultOptions) {
                 if (name in this && typeof this[name] !== "undefined") {
                     options[name] = this[name];
                 }
             }
-            if (containerElement) {
-                options.container = containerElement;
-            }
             options.renderer = this._renderer;
-            var wrapper = this._wrapperRef || this.elementRef;
-            var grid = new GridClass(wrapper.nativeElement, options);
+            // The `InfiniteGrid` set ups `scroll` and `resize` events through `ScrollManager`
+            // and `ResizeWatcher`. These events force Angular to run change detection whenever
+            // dispatched; this happens too often.
+            var grid = this._ngZone.runOutsideAngular(function () { return new GridClass(_this.elementRef.nativeElement, options); });
             var _loop_1 = function (name) {
                 var eventName = infinitegrid.INFINITEGRID_EVENTS[name];
-                grid.on(eventName, function (e) {
-                    _this[eventName].emit(e);
+                rxjs.fromEvent(grid, eventName)
+                    .pipe(operators.takeUntil(this_1._destroy$))
+                    .subscribe(function (event) {
+                    var emitter = _this[eventName];
+                    if (emitter && emitter.observers.length > 0) {
+                        _this._ngZone.run(function () { return emitter.emit(event); });
+                    }
                 });
             };
+            var this_1 = this;
             for (var name in infinitegrid.INFINITEGRID_EVENTS) {
                 _loop_1(name);
             }
             this.vanillaGrid = grid;
-            this._renderer.on("requestUpdate", function () {
+            rxjs.fromEvent(this._renderer, 'requestUpdate')
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
                 _this._isChange = true;
                 _this._updateVisibleChildren();
             });
@@ -465,6 +438,7 @@
         };
         NgxInfiniteGridComponent.prototype.ngOnDestroy = function () {
             var _a;
+            this._destroy$.next();
             (_a = this.vanillaGrid) === null || _a === void 0 ? void 0 : _a.destroy();
         };
         NgxInfiniteGridComponent.prototype._getItemInfos = function () {
@@ -491,60 +465,60 @@
         };
         return NgxInfiniteGridComponent;
     }(NgxInfiniteGridInterface));
+    NgxInfiniteGridComponent.GridClass = null;
     NgxInfiniteGridComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ngx-infinite-grid, [NgxInfiniteGrid]',
                     template: '<slot></slot>',
                     styles: [':host { display: block }']
                 },] }
     ];
     NgxInfiniteGridComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
+        { type: core.ElementRef },
+        { type: String, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
+        { type: core.NgZone }
     ]; };
     NgxInfiniteGridComponent.propDecorators = {
-        gridConstructor: [{ type: i0.Input }],
-        renderer: [{ type: i0.Input }],
-        container: [{ type: i0.Input }],
-        containerTag: [{ type: i0.Input }],
-        threshold: [{ type: i0.Input }],
-        useRecycle: [{ type: i0.Input }],
-        horizontal: [{ type: i0.Input }],
-        percentage: [{ type: i0.Input }],
-        isEqualSize: [{ type: i0.Input }],
-        isConstantSize: [{ type: i0.Input }],
-        gap: [{ type: i0.Input }],
-        attributePrefix: [{ type: i0.Input }],
-        resizeDebounce: [{ type: i0.Input }],
-        maxResizeDebounce: [{ type: i0.Input }],
-        autoResize: [{ type: i0.Input }],
-        useFit: [{ type: i0.Input }],
-        useTransform: [{ type: i0.Input }],
-        renderOnPropertyChange: [{ type: i0.Input }],
-        preserveUIOnDestroy: [{ type: i0.Input }],
-        defaultDirection: [{ type: i0.Input }],
-        externalItemRenderer: [{ type: i0.Input }],
-        externalContainerManager: [{ type: i0.Input }],
-        outlineLength: [{ type: i0.Input }],
-        outlineSize: [{ type: i0.Input }],
-        useRoundedSize: [{ type: i0.Input }],
-        useResizeObserver: [{ type: i0.Input }],
-        observeChildren: [{ type: i0.Input }],
-        scrollContainer: [{ type: i0.Input }],
-        usePlaceholder: [{ type: i0.Input }],
-        useLoading: [{ type: i0.Input }],
-        status: [{ type: i0.Input }],
-        useFirstRender: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        trackBy: [{ type: i0.Input }],
-        groupBy: [{ type: i0.Input }],
-        renderComplete: [{ type: i0.Output }],
-        contentError: [{ type: i0.Output }],
-        changeScroll: [{ type: i0.Output }],
-        requestAppend: [{ type: i0.Output }],
-        requestPrepend: [{ type: i0.Output }],
-        _wrapperRef: [{ type: i0.ViewChild, args: ['wrapperRef', { static: false },] }],
-        _containerRef: [{ type: i0.ViewChild, args: ['containerRef', { static: false },] }]
+        gridConstructor: [{ type: core.Input }],
+        renderer: [{ type: core.Input }],
+        container: [{ type: core.Input }],
+        containerTag: [{ type: core.Input }],
+        threshold: [{ type: core.Input }],
+        useRecycle: [{ type: core.Input }],
+        horizontal: [{ type: core.Input }],
+        percentage: [{ type: core.Input }],
+        isEqualSize: [{ type: core.Input }],
+        isConstantSize: [{ type: core.Input }],
+        gap: [{ type: core.Input }],
+        attributePrefix: [{ type: core.Input }],
+        resizeDebounce: [{ type: core.Input }],
+        maxResizeDebounce: [{ type: core.Input }],
+        autoResize: [{ type: core.Input }],
+        useFit: [{ type: core.Input }],
+        useTransform: [{ type: core.Input }],
+        renderOnPropertyChange: [{ type: core.Input }],
+        preserveUIOnDestroy: [{ type: core.Input }],
+        defaultDirection: [{ type: core.Input }],
+        externalItemRenderer: [{ type: core.Input }],
+        externalContainerManager: [{ type: core.Input }],
+        outlineLength: [{ type: core.Input }],
+        outlineSize: [{ type: core.Input }],
+        useRoundedSize: [{ type: core.Input }],
+        useResizeObserver: [{ type: core.Input }],
+        observeChildren: [{ type: core.Input }],
+        scrollContainer: [{ type: core.Input }],
+        usePlaceholder: [{ type: core.Input }],
+        useLoading: [{ type: core.Input }],
+        status: [{ type: core.Input }],
+        useFirstRender: [{ type: core.Input }],
+        items: [{ type: core.Input }],
+        trackBy: [{ type: core.Input }],
+        groupBy: [{ type: core.Input }],
+        renderComplete: [{ type: core.Output }],
+        contentError: [{ type: core.Output }],
+        changeScroll: [{ type: core.Output }],
+        requestAppend: [{ type: core.Output }],
+        requestPrepend: [{ type: core.Output }]
     };
 
     var TEMPLATE = "\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #viewer>\n  <ng-template [ngIf]=\"container === true\" [ngIfElse]=\"noContainer\">\n    <div #containerRef>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  </ng-template>\n  <ng-template #noContainer>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-template>\n</ng-template>\n\n<ng-template [ngIf]=\"elementRef.nativeElement.tagName.indexOf('NGX-') === 0\" [ngIfElse]=\"noWrapper\">\n  <div #wrapperRef>\n    <ng-container *ngTemplateOutlet=\"viewer\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #noWrapper>\n  <ng-container *ngTemplateOutlet=\"viewer\"></ng-container>\n</ng-template>\n";
@@ -558,18 +532,18 @@
     }(NgxInfiniteGridComponent));
     NgxMasonryInfiniteGridComponent.GridClass = infinitegrid.MasonryInfiniteGrid;
     NgxMasonryInfiniteGridComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ngx-masonry-infinite-grid, [NgxMasonryInfiniteGrid]',
                     template: TEMPLATE
                 },] }
     ];
     NgxMasonryInfiniteGridComponent.propDecorators = {
-        column: [{ type: i0.Input }],
-        columnSize: [{ type: i0.Input }],
-        columnSizeRatio: [{ type: i0.Input }],
-        align: [{ type: i0.Input }],
-        columnCalculationThreshold: [{ type: i0.Input }],
-        maxStretchColumnSize: [{ type: i0.Input }]
+        column: [{ type: core.Input }],
+        columnSize: [{ type: core.Input }],
+        columnSizeRatio: [{ type: core.Input }],
+        align: [{ type: core.Input }],
+        columnCalculationThreshold: [{ type: core.Input }],
+        maxStretchColumnSize: [{ type: core.Input }]
     };
 
     var NgxJustifiedInfiniteGridComponent = /** @class */ (function (_super) {
@@ -581,17 +555,17 @@
     }(NgxInfiniteGridComponent));
     NgxJustifiedInfiniteGridComponent.GridClass = infinitegrid.JustifiedInfiniteGrid;
     NgxJustifiedInfiniteGridComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ngx-justified-infinite-grid, [NgxJustifiedInfiniteGrid]',
                     template: TEMPLATE
                 },] }
     ];
     NgxJustifiedInfiniteGridComponent.propDecorators = {
-        columnRange: [{ type: i0.Input }],
-        rowRange: [{ type: i0.Input }],
-        sizeRange: [{ type: i0.Input }],
-        displayedRow: [{ type: i0.Input }],
-        isCroppedSize: [{ type: i0.Input }]
+        columnRange: [{ type: core.Input }],
+        rowRange: [{ type: core.Input }],
+        sizeRange: [{ type: core.Input }],
+        displayedRow: [{ type: core.Input }],
+        isCroppedSize: [{ type: core.Input }]
     };
 
     var NgxFrameInfiniteGridComponent = /** @class */ (function (_super) {
@@ -603,15 +577,15 @@
     }(NgxInfiniteGridComponent));
     NgxFrameInfiniteGridComponent.GridClass = infinitegrid.FrameInfiniteGrid;
     NgxFrameInfiniteGridComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ngx-frame-infinite-grid, [NgxFrameInfiniteGrid]',
                     template: TEMPLATE
                 },] }
     ];
     NgxFrameInfiniteGridComponent.propDecorators = {
-        frame: [{ type: i0.Input }],
-        useFrameFill: [{ type: i0.Input }],
-        rectSize: [{ type: i0.Input }]
+        frame: [{ type: core.Input }],
+        useFrameFill: [{ type: core.Input }],
+        rectSize: [{ type: core.Input }]
     };
 
     var NgxPackingInfiniteGridComponent = /** @class */ (function (_super) {
@@ -623,16 +597,16 @@
     }(NgxInfiniteGridComponent));
     NgxPackingInfiniteGridComponent.GridClass = infinitegrid.PackingInfiniteGrid;
     NgxPackingInfiniteGridComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ngx-packing-infinite-grid, [NgxPackingInfiniteGrid]',
                     template: TEMPLATE
                 },] }
     ];
     NgxPackingInfiniteGridComponent.propDecorators = {
-        aspectRatio: [{ type: i0.Input }],
-        sizeWeight: [{ type: i0.Input }],
-        ratioWeight: [{ type: i0.Input }],
-        weightPriority: [{ type: i0.Input }]
+        aspectRatio: [{ type: core.Input }],
+        sizeWeight: [{ type: core.Input }],
+        ratioWeight: [{ type: core.Input }],
+        weightPriority: [{ type: core.Input }]
     };
 
     var NgxInfiniteGridModule = /** @class */ (function () {
@@ -641,7 +615,7 @@
         return NgxInfiniteGridModule;
     }());
     NgxInfiniteGridModule.decorators = [
-        { type: i0.NgModule, args: [{
+        { type: core.NgModule, args: [{
                     declarations: [
                         NgxInfiniteGridComponent,
                         NgxMasonryInfiniteGridComponent,
@@ -672,7 +646,6 @@
 
     exports.NgxInfiniteGridComponent = NgxInfiniteGridComponent;
     exports.NgxInfiniteGridModule = NgxInfiniteGridModule;
-    exports.NgxInfinitegridService = NgxInfinitegridService;
     exports.NgxMasonryInfiniteGridComponent = NgxMasonryInfiniteGridComponent;
     exports["ɵa"] = NgxInfiniteGridInterface;
     exports["ɵb"] = TEMPLATE;