@rs-pk/asset-management 1.0.26 → 1.0.28

package/fesm5/rs-pk-asset-management.js

@@ -8,7 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator as MatPaginator$1, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatMenuModule } from '@angular/material/menu';
@@ -21,7 +21,7 @@ import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubj
 import { map, distinctUntilChanged, takeUntil, switchMap } from 'rxjs/operators';
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1 } from '@angular/material';
+import { MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1, MatPaginator } from '@angular/material';
 import { of } from 'rxjs/internal/observable/of';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
@@ -72,6 +72,10 @@ if (false) {
     IAssetByIdPayload.prototype.assetId;
     /** @type {?|undefined} */
     IAssetByIdPayload.prototype.isFilter;
+    /** @type {?|undefined} */
+    IAssetByIdPayload.prototype.pageIndex;
+    /** @type {?|undefined} */
+    IAssetByIdPayload.prototype.pageSize;
 }
 /**
  * @record
@@ -80,6 +84,8 @@ function IInitialFolderTreeOptions() { }
 if (false) {
     /** @type {?|undefined} */
     IInitialFolderTreeOptions.prototype.dispatchRootId;
+    /** @type {?|undefined} */
+    IInitialFolderTreeOptions.prototype.pageSize;
 }
 var AssetModel = /** @class */ (function () {
     function AssetModel() {
@@ -141,6 +147,8 @@ if (false) {
     AssetModel.prototype.HaveChildren;
     /** @type {?} */
     AssetModel.prototype.ParentId;
+    /** @type {?} */
+    AssetModel.prototype.Children;
 }
 var FolderTreeModel = /** @class */ (function (_super) {
     __extends(FolderTreeModel, _super);
@@ -190,6 +198,12 @@ BackgroudProcessingStatus[BackgroudProcessingStatus.None] = 'None';
 BackgroudProcessingStatus[BackgroudProcessingStatus.InProcessing] = 'InProcessing';
 BackgroudProcessingStatus[BackgroudProcessingStatus.Processed] = 'Processed';
 BackgroudProcessingStatus[BackgroudProcessingStatus.Failed] = 'Failed';
+/** @type {?} */
+var MAX_FOLDER_TREE_SIZE = 10;
+/** @type {?} */
+var DEFAULT_FOLDER_TREE_INDEX = 0;
+/** @type {?} */
+var ROOT_ASSET_ID = 'ROOT';
 
 /**
  * @fileoverview added by tsickle
@@ -436,6 +450,8 @@ if (false) {
     AMConfig.prototype.asset2Url;
     /** @type {?|undefined} */
     AMConfig.prototype.requestHeader;
+    /** @type {?|undefined} */
+    AMConfig.prototype.pageFolderSize;
 }
 /** @type {?} */
 var AM_CONFIG = new InjectionToken('asset.man.config.angular');
@@ -508,6 +524,18 @@ var AssetService = /** @class */ (function () {
         this.baseUrl = this._env.asset2Url;
         this.initOptionFiles();
     }
+    Object.defineProperty(AssetService.prototype, "AMConfig", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return {
+                pageFolderSize: this._env.pageFolderSize
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @private
      * @return {?}
@@ -520,6 +548,8 @@ var AssetService = /** @class */ (function () {
         this.keyword = '';
         this.pageSize = 12;
         this.pageIndex = 0;
+        this.pageFolderSize = this._env.pageFolderSize || MAX_FOLDER_TREE_SIZE;
+        this.pageFolderIndex = 0;
         this.folderTotal = 0;
         this.fileTotal = 0;
         this.sortBy = SortFilesBy.MODIFIED_DATE;
@@ -558,16 +588,17 @@ var AssetService = /** @class */ (function () {
     };
     /**
      * @param {?} folders
-     * @param {?=} folderTotal
+     * @param {?=} pagination
      * @return {?}
      */
     AssetService.prototype.setFolderList = /**
      * @param {?} folders
-     * @param {?=} folderTotal
+     * @param {?=} pagination
      * @return {?}
      */
-    function (folders, folderTotal) {
-        this.folderTotal = folderTotal || 0;
+    function (folders, pagination) {
+        this.setFolderTreePagination(pagination);
+        this.setFolderPagination(pagination);
         this.folderList$.next(folders);
     };
     /**
@@ -630,6 +661,36 @@ var AssetService = /** @class */ (function () {
             this.pageSize = pagination.PageSize;
         }
     };
+    /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    AssetService.prototype.setFolderPagination = /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    function (pagination) {
+        if (pagination) {
+            this.folderTotal = pagination.Total;
+            this.pageFolderIndex = pagination.PageIndex;
+            this.pageFolderSize = pagination.PageSize;
+        }
+    };
+    /**
+     * @param {?} pagination
+     * @return {?}
+     */
+    AssetService.prototype.setFolderTreePagination = /**
+     * @param {?} pagination
+     * @return {?}
+     */
+    function (pagination) {
+        if (pagination) {
+            this.folderTotal = pagination.Total;
+        }
+    };
     /**
      * @param {?} assetId
      * @return {?}
@@ -652,11 +713,15 @@ var AssetService = /** @class */ (function () {
      * @return {?}
      */
     function (_a) {
-        var assetId = _a.assetId, _b = _a.isFilter, isFilter = _b === void 0 ? true : _b;
+        var assetId = _a.assetId, _b = _a.isFilter, isFilter = _b === void 0 ? true : _b, _c = _a.pageIndex, pageIndex = _c === void 0 ? DEFAULT_FOLDER_TREE_INDEX : _c, _d = _a.pageSize, pageSize = _d === void 0 ? this._env.pageFolderSize || MAX_FOLDER_TREE_SIZE : _d;
         /** @type {?} */
         var url = this.baseUrl + "/File/GetChildren";
         /** @type {?} */
-        var params = new HttpParams().set('getAll', 'true').set('isFolder', 'true');
+        var params = new HttpParams()
+            .set('getAll', 'true')
+            .set('isFolder', 'true')
+            .set('pageSize', "" + pageSize)
+            .set('pageIndex', "" + pageIndex);
         if (assetId) {
             params = params.set('assetId', assetId);
         }
@@ -733,6 +798,10 @@ if (false) {
     /** @type {?} */
     AssetService.prototype.pageIndex;
     /** @type {?} */
+    AssetService.prototype.pageFolderSize;
+    /** @type {?} */
+    AssetService.prototype.pageFolderIndex;
+    /** @type {?} */
     AssetService.prototype.folderTotal;
     /** @type {?} */
     AssetService.prototype.fileTotal;
@@ -1136,19 +1205,19 @@ var NodeTreeService = /** @class */ (function () {
      * @return {?}
      */
     function (_a) {
-        var dispatchRootId = _a.dispatchRootId;
+        var dispatchRootId = _a.dispatchRootId, _b = _a.pageSize, pageSize = _b === void 0 ? this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE : _b;
         return __awaiter(this, void 0, void 0, function () {
             var result, initData;
             var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         if (dispatchRootId) {
                             this.loading$.next(true);
                         }
-                        return [4 /*yield*/, this.assetService.getChildrenFolders({ isFilter: false }).toPromise()];
+                        return [4 /*yield*/, this.assetService.getChildrenFolders({ isFilter: false, pageIndex: 0, pageSize: pageSize }).toPromise()];
                     case 1:
-                        result = _b.sent();
+                        result = _c.sent();
                         if (!result) {
                             return [2 /*return*/];
                         }
@@ -1167,7 +1236,7 @@ var NodeTreeService = /** @class */ (function () {
                          * @param {?} folder
                          * @return {?}
                          */
-                        function (folder) { return new DynamicFlatNode(folder, 0, _this.isExpandable(folder)); }));
+                        function (folder) { return _this.getDynamicFlatNode(folder, 0); }));
                         this.initialData$.next(initData);
                         if (dispatchRootId) {
                             this.loading$.next(false);
@@ -1177,6 +1246,20 @@ var NodeTreeService = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @param {?} node
+     * @param {?=} level
+     * @return {?}
+     */
+    NodeTreeService.prototype.getDynamicFlatNode = /**
+     * @param {?} node
+     * @param {?=} level
+     * @return {?}
+     */
+    function (node, level) {
+        if (level === void 0) { level = 0; }
+        return new DynamicFlatNode(node, level, this.isExpandable(node));
+    };
     /**
      * @param {?} node
      * @return {?}
@@ -1204,7 +1287,7 @@ var NodeTreeService = /** @class */ (function () {
      * @return {?}
      */
     function (node) {
-        return node.HaveChildren;
+        return Boolean(node.HaveChildren);
     };
     /** Add asset to stored data */
     /**
@@ -1680,7 +1763,6 @@ var AssetManagementDialogComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        console.log('Assest Management Dialog', this.data);
         this.initDialogConfig(this.data);
         select((/**
          * @param {?} state
@@ -3345,7 +3427,7 @@ var FolderItemComponent = /** @class */ (function () {
     FolderItemComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-folder-item',
-                    template: "<div class=\"folder\" (dblclick)=\"openFolder()\">\n  <mat-icon class=\"folder__icon\">folder</mat-icon>\n  <span class=\"folder__name\" [matTooltip]=\"folder.OriginalFileName\">\n    {{ folder.OriginalFileName }}\n  </span>\n  <mat-icon class=\"folder__action\" [matMenuTriggerFor]=\"menu\"\n    >more_vert</mat-icon\n  >\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"renameFolder()\" [disabled]=\"!hasModifyPermission\">\n    <mat-icon>edit_outline</mat-icon> <span>Rename</span>\n  </button>\n  <button mat-menu-item (click)=\"deleteFolder()\" [disabled]=\"!hasArchivePermission\">\n    <mat-icon color=\"warn\">delete_outline</mat-icon> <span>Delete</span>\n  </button>\n</mat-menu>\n",
+                    template: "<div class=\"folder\" (dblclick)=\"openFolder()\">\n  <mat-icon class=\"folder__icon\">folder</mat-icon>\n  <span class=\"folder__name\" [matTooltip]=\"folder.OriginalFileName\">\n    {{ folder.OriginalFileName }}\n  </span>\n  <mat-icon class=\"folder__action\" [matMenuTriggerFor]=\"menu\"\n    >more_vert</mat-icon\n  >\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"renameFolder()\" [disabled]=\"!hasModifyPermission\">\n    <mat-icon>edit_outline</mat-icon> <span>Rename</span>\n  </button>\n  <button mat-menu-item (click)=\"deleteFolder()\" [disabled]=\"!hasArchivePermission\">\n    <mat-icon color=\"warn\">delete_outline</mat-icon> <span>Delete</span>\n  </button>\n</mat-menu>",
                     styles: [":host::ng-deep .folder{width:180px;height:50px;display:flex;position:relative;align-items:center;padding:5px 20px 5px 10px;border-radius:10px;cursor:pointer;transition:.3s}:host::ng-deep .folder:hover{background-color:#f1f1f1}:host::ng-deep .folder:hover .folder__action{display:block}:host::ng-deep .folder__icon{display:flex;align-items:center;color:#6fc0ff;font-size:38px;margin-right:20px}:host::ng-deep .folder__name{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .folder__action{display:none;right:0;position:absolute;color:#979797;transition:.3s}:host::ng-deep .folder__action:hover{color:#000}"]
                 }] }
     ];
@@ -3392,10 +3474,24 @@ var FolderListComponent = /** @class */ (function () {
         this.hasModifyPermission = true;
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
+        this.onPageChange = new EventEmitter();
         this.loading = false;
         this.unsubscribe$ = new Subject$1();
         this.bindSubscriber();
     }
+    /**
+     * @return {?}
+     */
+    FolderListComponent.prototype.ngOnChanges = /**
+     * @return {?}
+     */
+    function () {
+        if (this.paginator && this.pagination) {
+            this.paginator.pageIndex = this.pagination.pageIndex;
+            this.paginator.pageSize = this.pagination.pageSize;
+            this.paginator.length = this.pagination.length;
+        }
+    };
     /**
      * @return {?}
      */
@@ -3413,6 +3509,17 @@ var FolderListComponent = /** @class */ (function () {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     };
+    /**
+     * @param {?=} event
+     * @return {?}
+     */
+    FolderListComponent.prototype.pageChange = /**
+     * @param {?=} event
+     * @return {?}
+     */
+    function (event) {
+        this.onPageChange.emit(event);
+    };
     /**
      * @private
      * @return {?}
@@ -3440,8 +3547,8 @@ var FolderListComponent = /** @class */ (function () {
     FolderListComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-folder-list',
-                    template: "<div class=\"folder-container\">\n  <h6>Folders</h6>\n  <div class=\"folder-list custom-scrollbar\">\n    <lib-folder-item\n      *ngFor=\"let folder of folders\"\n      [folder]=\"folder\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-folder-item>\n  </div>\n  <div class=\"folder-empty\" *ngIf=\"folders && !folders.length\">\n    <span>This folder is empty.</span>\n  </div>\n</div>\n",
-                    styles: [":host::ng-deep .folder-container h6{color:#979797}:host::ng-deep .folder-container .folder-list{display:flex;flex-wrap:nowrap;overflow:auto;padding-bottom:10px}:host::ng-deep .folder-container .folder-empty{text-align:center;color:#979797;font-size:14px}"]
+                    template: "<div  class=\"folder-container\">\n  <h6>Folders</h6>\n  <div class=\"folder-list custom-scrollbar\">\n    <lib-folder-item\n      *ngFor=\"let folder of folders\"\n      [folder]=\"folder\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-folder-item>\n  </div>\n  <div class=\"folder-empty\" *ngIf=\"folders && !folders.length\">\n    <span>This folder is empty.</span>\n  </div>\n  <div [hidden]=\"!folders?.length\">\n    <mat-paginator\n      #paginator\n      [pageSizeOptions]=\"[10, 20, 50, 100]\"\n      (page)=\"pageChange($event)\"\n      [showFirstLastButtons]=\"true\"\n    >\n    </mat-paginator>\n  </div>\n</div>",
+                    styles: [":host::ng-deep .folder-container h6{color:#979797}:host::ng-deep .folder-container .folder-list{display:flex;flex-wrap:wrap;overflow:auto;padding-bottom:10px;max-height:320px}:host::ng-deep .folder-container .folder-empty{text-align:center;color:#979797;font-size:14px}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3450,7 +3557,10 @@ var FolderListComponent = /** @class */ (function () {
         hasModifyPermission: [{ type: Input }],
         hasAccessPermission: [{ type: Input }],
         hasArchivePermission: [{ type: Input }],
-        folders: [{ type: Input }]
+        paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
+        folders: [{ type: Input }],
+        pagination: [{ type: Input }],
+        onPageChange: [{ type: Output }]
     };
     return FolderListComponent;
 }());
@@ -3462,8 +3572,14 @@ if (false) {
     /** @type {?} */
     FolderListComponent.prototype.hasArchivePermission;
     /** @type {?} */
+    FolderListComponent.prototype.paginator;
+    /** @type {?} */
     FolderListComponent.prototype.folders;
     /** @type {?} */
+    FolderListComponent.prototype.pagination;
+    /** @type {?} */
+    FolderListComponent.prototype.onPageChange;
+    /** @type {?} */
     FolderListComponent.prototype.loading;
     /**
      * @type {?}
@@ -3733,7 +3849,7 @@ var AssetListComponent = /** @class */ (function () {
         hasModifyPermission: [{ type: Input }],
         hasAccessPermission: [{ type: Input }],
         hasArchivePermission: [{ type: Input }],
-        paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
+        paginator: [{ type: ViewChild, args: [MatPaginator$1, { static: true },] }],
         assets: [{ type: Input }]
     };
     return AssetListComponent;
@@ -3892,7 +4008,6 @@ var AssetDialogComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        console.log('data', this.data.permission);
         this.uploadAssetsService.supportedSize = this.assetsService.maxSize * 1024 * 1024;
         this.linkDownload = this._env.asset2Url + "/File/Download/" + this.data.assetId;
         this.getAssetDetail();
@@ -4843,13 +4958,17 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var NodeTreeComponent = /** @class */ (function () {
-    function NodeTreeComponent(nodeTreeService, svc, changeDetectorRef) {
+    function NodeTreeComponent(assetService, nodeTreeService, svc, changeDetectorRef) {
+        this.assetService = assetService;
         this.nodeTreeService = nodeTreeService;
         this.svc = svc;
         this.changeDetectorRef = changeDetectorRef;
+        this.ROOT_ASSET_ID = ROOT_ASSET_ID;
         this.isRoot = false;
         this.homeLoading = false;
         this.loading = false;
+        this.loadingMoreList = {};
+        this.folderChildrenMap = new Map();
         this.unsubscribe$ = new Subject();
         this.getLevel = (/**
          * @param {?} node
@@ -4870,6 +4989,21 @@ var NodeTreeComponent = /** @class */ (function () {
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
         this.dataSource = new NodeTreeDataSource(this.treeControl, nodeTreeService);
     }
+    Object.defineProperty(NodeTreeComponent.prototype, "folderTreeMeta", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
+            return {
+                length: rootFolder ? rootFolder.size : 0,
+                total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || '0' : 0,
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -4901,6 +5035,32 @@ var NodeTreeComponent = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @param {?} id
+     * @return {?}
+     */
+    NodeTreeComponent.prototype.getFolderChildrenSize = /**
+     * @param {?} id
+     * @return {?}
+     */
+    function (id) {
+        /** @type {?} */
+        var children = this.folderChildrenMap.get(id);
+        return children ? children.size : 0;
+    };
+    /**
+     * @param {?} node
+     * @return {?}
+     */
+    NodeTreeComponent.prototype.canLoadMore = /**
+     * @param {?} node
+     * @return {?}
+     */
+    function (node) {
+        /** @type {?} */
+        var size = this.getFolderChildrenSize(node.item.AssetId);
+        return size < node.item.TotalFolder;
+    };
     /**
      * @private
      * @return {?}
@@ -4946,6 +5106,7 @@ var NodeTreeComponent = /** @class */ (function () {
          */
         function (data) {
             if (data && data.length) {
+                _this.handleDatasourceChange(data);
                 _this.changeDetectorRef.detectChanges();
             }
         }));
@@ -5002,6 +5163,42 @@ var NodeTreeComponent = /** @class */ (function () {
             });
         }); }));
     };
+    /**
+     * @private
+     * @param {?=} data
+     * @return {?}
+     */
+    NodeTreeComponent.prototype.handleDatasourceChange = /**
+     * @private
+     * @param {?=} data
+     * @return {?}
+     */
+    function (data) {
+        var _this = this;
+        if (data === void 0) { data = []; }
+        if (!data || !data.length)
+            return;
+        /** @type {?} */
+        var maps = new Map();
+        maps.set(ROOT_ASSET_ID, new Map());
+        data.forEach((/**
+         * @param {?} node
+         * @return {?}
+         */
+        function (node) {
+            /** @type {?} */
+            var nodeId = node.item.AssetId;
+            /** @type {?} */
+            var parent = _this.getParent(node);
+            /** @type {?} */
+            var parentId = parent ? parent.item.AssetId : ROOT_ASSET_ID;
+            if (!maps.has(parentId)) {
+                maps.set(parentId, new Map());
+            }
+            maps.get(parentId).set(nodeId, node);
+        }));
+        this.folderChildrenMap = maps;
+    };
     /**
      * @param {?} node
      * @return {?}
@@ -5052,6 +5249,67 @@ var NodeTreeComponent = /** @class */ (function () {
             });
         }
     };
+    /**
+     * @param {?=} node
+     * @return {?}
+     */
+    NodeTreeComponent.prototype.loadMoreFolder = /**
+     * @param {?=} node
+     * @return {?}
+     */
+    function (node) {
+        return __awaiter(this, void 0, void 0, function () {
+            var id, children, itemsPerPage, result, assetChildren, index, nodes, updatedData, error_1;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        id = node ? node.item.AssetId : ROOT_ASSET_ID;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        this.setLoadingMore(id, true);
+                        children = this.folderChildrenMap.get(id);
+                        itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
+                        return [4 /*yield*/, this.assetService.getChildrenFolders({
+                                assetId: id === ROOT_ASSET_ID ? null : id,
+                                isFilter: false,
+                                pageIndex: Math.round((children ? children.size : 0) / itemsPerPage)
+                            }).toPromise()];
+                    case 2:
+                        result = _a.sent();
+                        assetChildren = result.Data.Children || [];
+                        // Handle datasource
+                        index = this.dataSource.data.indexOf(node);
+                        nodes = assetChildren.map((/**
+                         * @param {?} folder
+                         * @return {?}
+                         */
+                        function (folder) {
+                            _this.nodeTreeService.addNode(folder, id);
+                            return _this.nodeTreeService.getDynamicFlatNode(folder, node ? node.level + 1 : 0);
+                        }));
+                        if (id !== ROOT_ASSET_ID) {
+                            updatedData = this.dataSource.data.slice();
+                            updatedData.splice.apply(updatedData, __spread([index + 1, 0], nodes));
+                            this.dataSource.data = updatedData;
+                        }
+                        else {
+                            this.dataSource.data = __spread(this.dataSource.data, nodes);
+                        }
+                        this.setLoadingMore(id, false);
+                        this.changeDetectorRef.detectChanges();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.log('Load more folder error', error_1);
+                        this.setLoadingMore(id, false);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     /**
      * @param {?} node
      * @return {?}
@@ -5125,7 +5383,7 @@ var NodeTreeComponent = /** @class */ (function () {
      */
     function (id) {
         return __awaiter(this, void 0, void 0, function () {
-            var node, parent_1, updatedNode, updatedNode;
+            var node, parent_1, updatedNode;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -5134,11 +5392,13 @@ var NodeTreeComponent = /** @class */ (function () {
                         }
                         this.loading = true;
                         node = this.getNodeById(id);
-                        if (!node) return [3 /*break*/, 8];
+                        if (!node) return [3 /*break*/, 5];
                         parent_1 = this.getParent(node);
                         if (!parent_1) return [3 /*break*/, 4];
+                        // Reload parent folder (get children and expand it again)
                         return [4 /*yield*/, this.dataSource.reloadNode(parent_1)];
                     case 1:
+                        // Reload parent folder (get children and expand it again)
                         _a.sent();
                         updatedNode = this.getNodeById(id);
                         if (!updatedNode) return [3 /*break*/, 3];
@@ -5146,28 +5406,37 @@ var NodeTreeComponent = /** @class */ (function () {
                     case 2:
                         _a.sent();
                         _a.label = 3;
-                    case 3: return [3 /*break*/, 7];
-                    case 4: return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
-                    case 5:
-                        _a.sent();
-                        updatedNode = this.getNodeById(id);
-                        if (!updatedNode) return [3 /*break*/, 7];
-                        return [4 /*yield*/, this.treeControl.expand(updatedNode)];
+                    case 3: return [3 /*break*/, 4];
+                    case 4: return [3 /*break*/, 7];
+                    case 5: 
+                    // Reload root folder
+                    return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
                     case 6:
+                        // Reload root folder
                         _a.sent();
                         _a.label = 7;
-                    case 7: return [3 /*break*/, 10];
-                    case 8: return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
-                    case 9:
-                        _a.sent();
-                        _a.label = 10;
-                    case 10:
+                    case 7:
                         this.loading = false;
                         return [2 /*return*/];
                 }
             });
         });
     };
+    /**
+     * @private
+     * @param {?} id
+     * @param {?} value
+     * @return {?}
+     */
+    NodeTreeComponent.prototype.setLoadingMore = /**
+     * @private
+     * @param {?} id
+     * @param {?} value
+     * @return {?}
+     */
+    function (id, value) {
+        this.loadingMoreList[id] = value;
+    };
     /**
      * @return {?}
      */
@@ -5183,12 +5452,13 @@ var NodeTreeComponent = /** @class */ (function () {
     NodeTreeComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-node-tree',
-                    template: "<div class=\"node custom-scrollbar node-tree\">\n  <div class=\"node__home\" (click)=\"backToHome()\" [ngClass]=\"{ active: isRoot,\n    disabled: loading || homeLoading}\">\n    <mat-icon *ngIf=\"!homeLoading\">home</mat-icon>\n    <mat-spinner *ngIf=\"homeLoading\" [diameter]=\"20\"\n      class=\"node__home--loading\"></mat-spinner>\n    <span>Home</span>\n  </div>\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"\n    class=\"node__item\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding\n      [ngClass]=\"{ active: checked(node),disabled: loading || node.isLoading }\"\n      (click)=\"selectNode(node)\">\n      <button mat-icon-button disabled class=\"node__item--pading\"></button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\" *ngIf=\"node.item?.TotalFolder ||\n            node.item?.TotalFile\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n      (click)=\"selectNode(node)\"\n      [ngClass]=\"{ active: checked(node), disabled: loading || node.isLoading\n      }\">\n      <button mat-icon-button [attr.aria-label]=\"'Toggle ' +\n        node.item.OriginalFileName\" matTreeNodeToggle\n        [disabled]=\"node.isLoading\">\n        <mat-icon *ngIf=\"!node.isLoading\" class=\"mat-icon-rtl-mirror\">\n          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n        </mat-icon>\n        <mat-spinner *ngIf=\"node.isLoading\" [diameter]=\"20\"\n          class=\"node__item--loading\"></mat-spinner>\n      </button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n  </mat-tree>\n</div>",
-                    styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display:-ms-grid;display:grid;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content}:host::ng-deep .node__home{padding:8px 10px;display:flex;align-items:center;height:44px}:host::ng-deep .node__home .mat-icon{color:#979797;margin-right:15px;margin-bottom:10px;font-size:32px}:host::ng-deep .node__home .node__home--loading{margin-right:19px}:host::ng-deep .node__item--loading{margin-left:10px}:host::ng-deep .node__item--info{display:flex;align-items:center}:host::ng-deep .node__item--info .folder-icon{display:flex;align-items:center;color:#6fc0ff;font-size:32px;margin-right:20px}:host::ng-deep .node__item--info .node-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name .node-summary{margin-top:-5px;color:#979797}:host::ng-deep .node .mat-tree{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:100%}:host::ng-deep .node .mat-tree .mat-tree-node{padding:5px 0;min-height:44px}:host::ng-deep .node .mat-tree .mat-tree-node .node__item--pading{height:20px}:host::ng-deep .node .mat-tree-node:hover,:host::ng-deep .node .node__home{transition:.3s;cursor:pointer}:host::ng-deep .node .mat-tree-node:hover:hover,:host::ng-deep .node .node__home:hover{background-color:#e8e8e8}:host::ng-deep .node .active{background-color:#f0f0f0}:host::ng-deep .node .disabled{pointer-events:none}"]
+                    template: "<div class=\"node custom-scrollbar node-tree\">\n  <div class=\"node__home\" (click)=\"backToHome()\" [ngClass]=\"{ active: isRoot,\n    disabled: loading || homeLoading}\">\n    <mat-icon *ngIf=\"!homeLoading\">home</mat-icon>\n    <mat-spinner *ngIf=\"homeLoading\" [diameter]=\"20\"\n      class=\"node__home--loading\"></mat-spinner>\n    <span>Home</span>\n  </div>\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"\n    class=\"node__item\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding\n      [ngClass]=\"{ active: checked(node),disabled: loading || node.isLoading }\"\n      (click)=\"selectNode(node)\">\n      <button mat-icon-button disabled class=\"node__item--pading\"></button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\" *ngIf=\"node.item?.TotalFolder ||\n            node.item?.TotalFile\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding \n      [ngClass]=\"{ active: checked(node), disabled: loading || node.isLoading\n      }\">\n      <div class=\"d-flex align-items-center\" (click)=\"selectNode(node)\">\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' +\n          node.item.OriginalFileName\" matTreeNodeToggle\n          [disabled]=\"node.isLoading\">\n          <mat-icon *ngIf=\"!node.isLoading\" class=\"mat-icon-rtl-mirror\">\n            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n          <mat-spinner *ngIf=\"node.isLoading\" [diameter]=\"20\"\n            class=\"node__item--loading\"></mat-spinner>\n        </button>\n        <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n          <mat-icon class=\"folder-icon\">folder</mat-icon>\n          <div class=\"node-name\">\n            <span>\n              {{ node.item.OriginalFileName }}\n            </span>\n            <span class=\"node-summary\">\n              <small *ngIf=\"node.item?.TotalFolder\"><ng-container *ngIf=\"treeControl.isExpanded(node)\"><b>{{getFolderChildrenSize(node.item.AssetId)}}</b>/</ng-container>{{ node.item?.TotalFolder}}\n                {{node.item?.TotalFolder> 1 ?\n                'folders':'folder'}}</small>\n              <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n              </small>\n              <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n                {{node.item?.TotalFile> 1 ?\n                'files':'file'}}</small>\n            </span>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"treeControl.isExpanded(node)\"> \n        <div *ngIf=\"!!loadingMoreList[node.item.AssetId]\" class=\"mx-2\" [style.minWidth.px]=\"40\">\n          <mat-spinner [diameter]=\"20\"\n          class=\"node__item--loading\"></mat-spinner>\n        </div>\n        <button *ngIf=\"!loadingMoreList[node.item.AssetId] && canLoadMore(node)\" matTooltip=\"Load More\" class=\"mx-2\" mat-icon-button (click)=\"loadMoreFolder(node)\" [disabled]=\"loadingMoreList[node.item.AssetId] || homeLoading || loading\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\"><path d=\"m482-200 114-113-114-113-42 42 43 43q-28 1-54.5-9T381-381q-20-20-30.5-46T340-479q0-17 4.5-34t12.5-33l-44-44q-17 25-25 53t-8 57q0 38 15 75t44 66q29 29 65 43.5t74 15.5l-38 38 42 42Zm165-170q17-25 25-53t8-57q0-38-14.5-75.5T622-622q-29-29-65.5-43T482-679l38-39-42-42-114 113 114 113 42-42-44-44q27 0 55 10.5t48 30.5q20 20 30.5 46t10.5 52q0 17-4.5 34T603-414l44 44ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n        </button>\n      </ng-container>\n    </mat-tree-node>\n  </mat-tree>\n  <div class=\"p-2 d-flex flex-column align-items-center justify-content-center\" *ngIf=\"folderTreeMeta.length\">\n    <button mat-raised-button *ngIf=\"folderTreeMeta.length !== folderTreeMeta.total\" (click)=\"loadMoreFolder()\" [disabled]=\"loadingMoreList[ROOT_ASSET_ID] || loading || homeLoading\">\n      <div class=\"d-flex align-items-center\">\n        <mat-spinner [diameter]=\"20\" *ngIf=\"loadingMoreList[ROOT_ASSET_ID]\"></mat-spinner>\n        <mat-icon *ngIf=\"!loadingMoreList[ROOT_ASSET_ID]\">expand_more</mat-icon>\n        <div class=\"ml-2\">Load More</div>\n      </div>\n    </button>\n    <div class=\"mt-2\" [style.fontSize.px]=\"13\"><b>{{ folderTreeMeta.length }}</b> of <b>{{ folderTreeMeta.total }} folders</b></div>\n  </div>\n</div>",
+                    styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display:-ms-grid;display:grid;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content}:host::ng-deep .node-tree{max-height:max(800px,90vh);overflow-y:auto}:host::ng-deep .node__home{padding:8px 10px;display:flex;align-items:center;height:44px}:host::ng-deep .node__home .mat-icon{color:#979797;margin-right:15px;margin-bottom:10px;font-size:32px}:host::ng-deep .node__home .node__home--loading{margin-right:19px}:host::ng-deep .node__item--loading{margin-left:10px}:host::ng-deep .node__item--info{display:flex;align-items:center}:host::ng-deep .node__item--info .folder-icon{display:flex;align-items:center;color:#6fc0ff;font-size:32px;margin-right:20px}:host::ng-deep .node__item--info .node-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name .node-summary{margin-top:-5px;color:#979797}:host::ng-deep .node .mat-tree{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:100%}:host::ng-deep .node .mat-tree .mat-tree-node{padding:5px 0;min-height:44px}:host::ng-deep .node .mat-tree .mat-tree-node .node__item--pading{height:20px}:host::ng-deep .node .mat-tree-node:hover,:host::ng-deep .node .node__home{transition:.3s;cursor:pointer}:host::ng-deep .node .mat-tree-node:hover:hover,:host::ng-deep .node .node__home:hover{background-color:#e8e8e8}:host::ng-deep .node .active{background-color:#f0f0f0}:host::ng-deep .node .disabled{pointer-events:none}"]
                 }] }
     ];
     /** @nocollapse */
     NodeTreeComponent.ctorParameters = function () { return [
+        { type: AssetService },
         { type: NodeTreeService },
         { type: AssetManagementService },
         { type: ChangeDetectorRef }
@@ -5202,6 +5472,8 @@ if (false) {
     /** @type {?} */
     NodeTreeComponent.prototype.width;
     /** @type {?} */
+    NodeTreeComponent.prototype.ROOT_ASSET_ID;
+    /** @type {?} */
     NodeTreeComponent.prototype.currentFolderId;
     /** @type {?} */
     NodeTreeComponent.prototype.isRoot;
@@ -5210,9 +5482,13 @@ if (false) {
     /** @type {?} */
     NodeTreeComponent.prototype.loading;
     /** @type {?} */
+    NodeTreeComponent.prototype.loadingMoreList;
+    /** @type {?} */
     NodeTreeComponent.prototype.treeControl;
     /** @type {?} */
     NodeTreeComponent.prototype.dataSource;
+    /** @type {?} */
+    NodeTreeComponent.prototype.folderChildrenMap;
     /**
      * @type {?}
      * @private
@@ -5224,6 +5500,8 @@ if (false) {
     NodeTreeComponent.prototype.isExpandable;
     /** @type {?} */
     NodeTreeComponent.prototype.hasChild;
+    /** @type {?} */
+    NodeTreeComponent.prototype.assetService;
     /**
      * @type {?}
      * @private
@@ -5490,7 +5768,7 @@ var SearchBoxComponent = /** @class */ (function () {
          */
         function (_a) {
             var _b = __read(_a, 2), folders = _b[0], assets = _b[1];
-            _this.assetService.setFolderList(folders.Data, folders.Meta.Total);
+            _this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
             _this.assetService.setAssetList(assets.Data.Children, assets.Meta);
         }))
             .add((/**
@@ -5663,19 +5941,9 @@ var AssetWrapperComponent = /** @class */ (function () {
         this.hasArchivePermission = true;
         this.assets = new EventEmitter();
         this.unsubscribe$ = new Subject$1();
-        this.nodeTreeMinWidth = 250;
+        this.nodeTreeMinWidth = 300;
         this.nodeTreeMaxWidth = 700;
     }
-    /**
-     * @return {?}
-     */
-    AssetWrapperComponent.prototype.ngOnChanges = /**
-     * @return {?}
-     */
-    function () {
-        console.log('modify', this.hasModifyPermission);
-        console.log('archive', this.hasArchivePermission);
-    };
     /**
      * @return {?}
      */
@@ -6050,23 +6318,24 @@ var NodeDetailsComponent = /** @class */ (function () {
             type: ActionTypes.SET_GLOBAL_LOADING,
             payload: true,
         });
+        var _a = this.getFolderPagePagination(), pageIndex = _a.pageIndex, pageSize = _a.pageSize;
         this.assetService
-            .getChildrenFolders({ assetId: id })
+            .getChildrenFolders({ assetId: id, pageIndex: pageIndex, pageSize: pageSize })
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((/**
          * @param {?} res
          * @return {?}
          */
         function (res) {
-            _this.assetService.setFolderList(res.Data, res.Meta.Total);
-            if (res.Data && res.Data.Children) {
-                res.Data.Children.forEach((/**
+            var Data = res.Data;
+            var Children = Data.Children;
+            _this.setFolderList(res);
+            if (Children) {
+                Children.forEach((/**
                  * @param {?} node
                  * @return {?}
                  */
-                function (node) {
-                    return _this.nodeTreeService.addNode(node, _this.currentFolder.AssetId);
-                }));
+                function (node) { return _this.nodeTreeService.addNode(node, _this.currentFolder.AssetId); }));
             }
         }))
             .add((/**
@@ -6079,6 +6348,23 @@ var NodeDetailsComponent = /** @class */ (function () {
             });
         }));
     };
+    /**
+     * @private
+     * @param {?} res
+     * @return {?}
+     */
+    NodeDetailsComponent.prototype.setFolderList = /**
+     * @private
+     * @param {?} res
+     * @return {?}
+     */
+    function (res) {
+        var Data = res.Data, Meta = res.Meta;
+        var TotalFolder = Data.TotalFolder;
+        var PageIndex = Meta.PageIndex, PageSize = Meta.PageSize;
+        this.assetService.setFolderList(Data, { Total: TotalFolder, PageIndex: PageIndex, PageSize: PageSize });
+        this.setFolderPagination({ length: TotalFolder, pageIndex: PageIndex, pageSize: PageSize });
+    };
     /**
      * @private
      * @param {?} id
@@ -6095,8 +6381,9 @@ var NodeDetailsComponent = /** @class */ (function () {
             type: ActionTypes.SET_GLOBAL_LOADING,
             payload: true,
         });
+        var _a = this.getFolderPagePagination(), pageIndex = _a.pageIndex, pageSize = _a.pageSize;
         combineLatest([
-            this.assetService.getChildrenFolders({ assetId: id }),
+            this.assetService.getChildrenFolders({ assetId: id, pageIndex: pageIndex, pageSize: pageSize }),
             this.assetService.getChildrenAssets({
                 assetId: id,
             }),
@@ -6107,11 +6394,11 @@ var NodeDetailsComponent = /** @class */ (function () {
          * @return {?}
          */
         function (_a) {
-            var _b = __read(_a, 2), folders = _b[0], assets = _b[1];
-            _this.assetService.setFolderList(folders.Data, folders.Meta.Total);
-            _this.assetService.setAssetList(assets.Data.Children, assets.Meta);
-            if (folders.Data && folders.Data.Children) {
-                folders.Data.Children.forEach((/**
+            var _b = __read(_a, 2), foldersRes = _b[0], assetsRes = _b[1];
+            _this.setFolderList(foldersRes);
+            _this.assetService.setAssetList(assetsRes.Data.Children, assetsRes.Meta);
+            if (foldersRes.Data && foldersRes.Data.Children) {
+                foldersRes.Data.Children.forEach((/**
                  * @param {?} node
                  * @return {?}
                  */
@@ -6130,6 +6417,52 @@ var NodeDetailsComponent = /** @class */ (function () {
             });
         }));
     };
+    /**
+     * @return {?}
+     */
+    NodeDetailsComponent.prototype.getFolderPagePagination = /**
+     * @return {?}
+     */
+    function () {
+        return {
+            pageIndex: this.assetService.pageFolderIndex,
+            pageSize: this.assetService.pageFolderSize,
+            length: this.assetService.folderTotal,
+        };
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NodeDetailsComponent.prototype.onFolderPageChange = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.assetService.pageFolderIndex = event.pageIndex;
+        this.assetService.pageFolderSize = event.pageSize;
+        this.fetchFolder(this.currentFolder.AssetId);
+    };
+    /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    NodeDetailsComponent.prototype.setFolderPagination = /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    function (pagination) {
+        if (!pagination)
+            return;
+        var length = pagination.length, pageIndex = pagination.pageIndex, pageSize = pagination.pageSize;
+        this.folderPagination = {
+            pageIndex: pageIndex,
+            pageSize: pageSize,
+            length: length
+        };
+    };
     Object.defineProperty(NodeDetailsComponent.prototype, "noResults", {
         get: /**
          * @return {?}
@@ -6163,7 +6496,7 @@ var NodeDetailsComponent = /** @class */ (function () {
     NodeDetailsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-node-details',
-                    template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-folder-list>\n      <lib-asset-list\n        [assets]=\"assets\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-asset-list>\n    </ng-template>\n  </div>\n</div>",
+                    template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [pagination]=\"folderPagination\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n        (onPageChange)=\"onFolderPageChange($event)\"\n      ></lib-folder-list>\n      <lib-asset-list\n        [assets]=\"assets\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-asset-list>\n    </ng-template>\n  </div>\n</div>",
                     styles: [":host::ng-deep .node-details{max-height:100%;overflow-y:auto}:host::ng-deep .node-details .node-header{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:20}:host::ng-deep .node-details .node-header-content{padding:10px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}:host::ng-deep .node-details .node-header-content__left--title{margin-bottom:5px}:host::ng-deep .node-details .node-header-content__left--title span{color:#fb3458}:host::ng-deep .node-details .node-header-content__left--subtitle{margin:0;color:#979797;font-size:14px}:host::ng-deep .node-details .node-header-content__right{flex:1}:host::ng-deep .node-details .node-header-content__right .button-wrapper{display:flex;gap:15px;justify-content:flex-end}:host::ng-deep .node-details .node-header-content__right .button-wrapper .count{margin-left:3px}:host::ng-deep .node-details .node-body{padding:0 20px}:host::ng-deep .node-details .node-body__section{display:block;margin-bottom:15px}"]
                 }] }
     ];
@@ -6195,6 +6528,8 @@ if (false) {
      */
     NodeDetailsComponent.prototype.unsubscribe$;
     /** @type {?} */
+    NodeDetailsComponent.prototype.folderPagination;
+    /** @type {?} */
     NodeDetailsComponent.prototype.selectedAssets;
     /** @type {?} */
     NodeDetailsComponent.prototype.loading$;