@rs-pk/asset-management 1.0.26 → 1.0.28

package/bundles/rs-pk-asset-management.umd.js

@@ -268,6 +268,10 @@
         IAssetByIdPayload.prototype.assetId;
         /** @type {?|undefined} */
         IAssetByIdPayload.prototype.isFilter;
+        /** @type {?|undefined} */
+        IAssetByIdPayload.prototype.pageIndex;
+        /** @type {?|undefined} */
+        IAssetByIdPayload.prototype.pageSize;
     }
     /**
      * @record
@@ -276,6 +280,8 @@
     if (false) {
         /** @type {?|undefined} */
         IInitialFolderTreeOptions.prototype.dispatchRootId;
+        /** @type {?|undefined} */
+        IInitialFolderTreeOptions.prototype.pageSize;
     }
     var AssetModel = /** @class */ (function () {
         function AssetModel() {
@@ -337,6 +343,8 @@
         AssetModel.prototype.HaveChildren;
         /** @type {?} */
         AssetModel.prototype.ParentId;
+        /** @type {?} */
+        AssetModel.prototype.Children;
     }
     var FolderTreeModel = /** @class */ (function (_super) {
         __extends(FolderTreeModel, _super);
@@ -386,6 +394,12 @@
     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
@@ -632,6 +646,8 @@
         AMConfig.prototype.asset2Url;
         /** @type {?|undefined} */
         AMConfig.prototype.requestHeader;
+        /** @type {?|undefined} */
+        AMConfig.prototype.pageFolderSize;
     }
     /** @type {?} */
     var AM_CONFIG = new core.InjectionToken('asset.man.config.angular');
@@ -704,6 +720,18 @@
             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 {?}
@@ -716,6 +744,8 @@
             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;
@@ -754,16 +784,17 @@
         };
         /**
          * @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);
         };
         /**
@@ -826,6 +857,36 @@
                 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 {?}
@@ -848,11 +909,15 @@
          * @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 http.HttpParams().set('getAll', 'true').set('isFolder', 'true');
+            var params = new http.HttpParams()
+                .set('getAll', 'true')
+                .set('isFolder', 'true')
+                .set('pageSize', "" + pageSize)
+                .set('pageIndex', "" + pageIndex);
             if (assetId) {
                 params = params.set('assetId', assetId);
             }
@@ -929,6 +994,10 @@
         /** @type {?} */
         AssetService.prototype.pageIndex;
         /** @type {?} */
+        AssetService.prototype.pageFolderSize;
+        /** @type {?} */
+        AssetService.prototype.pageFolderIndex;
+        /** @type {?} */
         AssetService.prototype.folderTotal;
         /** @type {?} */
         AssetService.prototype.fileTotal;
@@ -1332,19 +1401,19 @@
          * @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*/];
                             }
@@ -1363,7 +1432,7 @@
                              * @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);
@@ -1373,6 +1442,20 @@
                 });
             });
         };
+        /**
+         * @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 {?}
@@ -1400,7 +1483,7 @@
          * @return {?}
          */
         function (node) {
-            return node.HaveChildren;
+            return Boolean(node.HaveChildren);
         };
         /** Add asset to stored data */
         /**
@@ -1876,7 +1959,6 @@
          */
         function () {
             var _this = this;
-            console.log('Assest Management Dialog', this.data);
             this.initDialogConfig(this.data);
             select((/**
              * @param {?} state
@@ -3541,7 +3623,7 @@
         FolderItemComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -3588,10 +3670,24 @@
             this.hasModifyPermission = true;
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
+            this.onPageChange = new core.EventEmitter();
             this.loading = false;
             this.unsubscribe$ = new Subject.Subject();
             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 {?}
          */
@@ -3609,6 +3705,17 @@
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         };
+        /**
+         * @param {?=} event
+         * @return {?}
+         */
+        FolderListComponent.prototype.pageChange = /**
+         * @param {?=} event
+         * @return {?}
+         */
+        function (event) {
+            this.onPageChange.emit(event);
+        };
         /**
          * @private
          * @return {?}
@@ -3636,8 +3743,8 @@
         FolderListComponent.decorators = [
             { type: core.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 */
@@ -3646,7 +3753,10 @@
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
-            folders: [{ type: core.Input }]
+            paginator: [{ type: core.ViewChild, args: [material.MatPaginator, { static: true },] }],
+            folders: [{ type: core.Input }],
+            pagination: [{ type: core.Input }],
+            onPageChange: [{ type: core.Output }]
         };
         return FolderListComponent;
     }());
@@ -3658,8 +3768,14 @@
         /** @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 {?}
@@ -4088,7 +4204,6 @@
          * @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();
@@ -5039,13 +5154,17 @@
      * @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 rxjs.Subject();
             this.getLevel = (/**
              * @param {?} node
@@ -5066,6 +5185,21 @@
             this.treeControl = new tree$1.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 {?}
          */
@@ -5097,6 +5231,32 @@
                 });
             });
         };
+        /**
+         * @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 {?}
@@ -5142,6 +5302,7 @@
              */
             function (data) {
                 if (data && data.length) {
+                    _this.handleDatasourceChange(data);
                     _this.changeDetectorRef.detectChanges();
                 }
             }));
@@ -5198,6 +5359,42 @@
                 });
             }); }));
         };
+        /**
+         * @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 {?}
@@ -5248,6 +5445,67 @@
                 });
             }
         };
+        /**
+         * @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 {?}
@@ -5321,7 +5579,7 @@
          */
         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:
@@ -5330,11 +5588,13 @@
                             }
                             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];
@@ -5342,28 +5602,37 @@
                         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 {?}
          */
@@ -5379,12 +5648,13 @@
         NodeTreeComponent.decorators = [
             { type: core.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: core.ChangeDetectorRef }
@@ -5398,6 +5668,8 @@
         /** @type {?} */
         NodeTreeComponent.prototype.width;
         /** @type {?} */
+        NodeTreeComponent.prototype.ROOT_ASSET_ID;
+        /** @type {?} */
         NodeTreeComponent.prototype.currentFolderId;
         /** @type {?} */
         NodeTreeComponent.prototype.isRoot;
@@ -5406,9 +5678,13 @@
         /** @type {?} */
         NodeTreeComponent.prototype.loading;
         /** @type {?} */
+        NodeTreeComponent.prototype.loadingMoreList;
+        /** @type {?} */
         NodeTreeComponent.prototype.treeControl;
         /** @type {?} */
         NodeTreeComponent.prototype.dataSource;
+        /** @type {?} */
+        NodeTreeComponent.prototype.folderChildrenMap;
         /**
          * @type {?}
          * @private
@@ -5420,6 +5696,8 @@
         NodeTreeComponent.prototype.isExpandable;
         /** @type {?} */
         NodeTreeComponent.prototype.hasChild;
+        /** @type {?} */
+        NodeTreeComponent.prototype.assetService;
         /**
          * @type {?}
          * @private
@@ -5686,7 +5964,7 @@
              */
             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((/**
@@ -5859,19 +6137,9 @@
             this.hasArchivePermission = true;
             this.assets = new core.EventEmitter();
             this.unsubscribe$ = new Subject.Subject();
-            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 {?}
          */
@@ -6246,23 +6514,24 @@
                 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(operators.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((/**
@@ -6275,6 +6544,23 @@
                 });
             }));
         };
+        /**
+         * @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
@@ -6291,8 +6577,9 @@
                 type: ActionTypes.SET_GLOBAL_LOADING,
                 payload: true,
             });
+            var _a = this.getFolderPagePagination(), pageIndex = _a.pageIndex, pageSize = _a.pageSize;
             combineLatest.combineLatest([
-                this.assetService.getChildrenFolders({ assetId: id }),
+                this.assetService.getChildrenFolders({ assetId: id, pageIndex: pageIndex, pageSize: pageSize }),
                 this.assetService.getChildrenAssets({
                     assetId: id,
                 }),
@@ -6303,11 +6590,11 @@
              * @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 {?}
                      */
@@ -6326,6 +6613,52 @@
                 });
             }));
         };
+        /**
+         * @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 {?}
@@ -6359,7 +6692,7 @@
         NodeDetailsComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -6391,6 +6724,8 @@
          */
         NodeDetailsComponent.prototype.unsubscribe$;
         /** @type {?} */
+        NodeDetailsComponent.prototype.folderPagination;
+        /** @type {?} */
         NodeDetailsComponent.prototype.selectedAssets;
         /** @type {?} */
         NodeDetailsComponent.prototype.loading$;