@rs-pk/asset-management 1.0.27 → 1.0.29

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

@@ -1,7 +1,7 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/tree'), require('@angular/material/paginator'), require('@angular/material/table'), require('@angular/material/progress-bar'), require('@angular/material/menu'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/progress-spinner'), require('@angular/common/http'), require('rxjs'), require('rxjs/internal/BehaviorSubject'), require('rxjs/operators'), require('rxjs/internal/Subject'), require('@angular/platform-browser'), require('@angular/material'), require('rxjs/internal/observable/of'), require('@angular/cdk/tree'), require('rxjs/internal/observable/combineLatest'), require('moment')) :
     typeof define === 'function' && define.amd ? define('@rs-pk/asset-management', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/dialog', '@angular/material/button', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/tree', '@angular/material/paginator', '@angular/material/table', '@angular/material/progress-bar', '@angular/material/menu', '@angular/material/checkbox', '@angular/material/select', '@angular/material/progress-spinner', '@angular/common/http', 'rxjs', 'rxjs/internal/BehaviorSubject', 'rxjs/operators', 'rxjs/internal/Subject', '@angular/platform-browser', '@angular/material', 'rxjs/internal/observable/of', '@angular/cdk/tree', 'rxjs/internal/observable/combineLatest', 'moment'], factory) :
-    (global = global || self, factory((global['rs-pk'] = global['rs-pk'] || {}, global['rs-pk']['asset-management'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.tree, global.ng.material.paginator, global.ng.material.table, global.ng.material['progress-bar'], global.ng.material.menu, global.ng.material.checkbox, global.ng.material.select, global.ng.material['progress-spinner'], global.ng.common.http, global.rxjs, global.rxjs['internal/BehaviorSubject'], global.rxjs.operators, global.rxjs['internal/Subject'], global.ng.platformBrowser, global.ng.material, global.rxjs['internal/observable/of'], global.ng.cdk.tree, global.rxjs['internal/observable/combineLatest'], global.moment_));
+    (global = global || self, factory((global['rs-pk'] = global['rs-pk'] || {}, global['rs-pk']['asset-management'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.tree, global.ng.material.paginator, global.ng.material.table, global.ng.material.progressBar, global.ng.material.menu, global.ng.material.checkbox, global.ng.material.select, global.ng.material.progressSpinner, global.ng.common.http, global.rxjs, global.rxjs['internal/BehaviorSubject'], global.rxjs.operators, global.rxjs['internal/Subject'], global.ng.platformBrowser, global.ng.material, global.rxjs['internal/observable/of'], global.ng.cdk.tree, global.rxjs['internal/observable/combineLatest'], global.moment_));
 }(this, (function (exports, core, common, forms, dialog, button, input, icon, tooltip, tree, paginator, table, progressBar, menu, checkbox, select$1, progressSpinner, http, rxjs, BehaviorSubject, operators, Subject, platformBrowser, material, of, tree$1, combineLatest, moment_) { 'use strict';
 
     /*! *****************************************************************************
@@ -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);
         };
         /**
@@ -778,15 +809,17 @@
         /**
          * @param {?} assets
          * @param {?=} pagination
+         * @param {?=} totalFile
          * @return {?}
          */
         AssetService.prototype.setAssetList = /**
          * @param {?} assets
          * @param {?=} pagination
+         * @param {?=} totalFile
          * @return {?}
          */
-        function (assets, pagination) {
-            this.setPagination(pagination);
+        function (assets, pagination, totalFile) {
+            this.setPagination(pagination, totalFile);
             this.assetList$.next(assets);
         };
         /**
@@ -812,20 +845,52 @@
         /**
          * @private
          * @param {?} pagination
+         * @param {?} totalFile
          * @return {?}
          */
         AssetService.prototype.setPagination = /**
          * @private
          * @param {?} pagination
+         * @param {?} totalFile
          * @return {?}
          */
-        function (pagination) {
+        function (pagination, totalFile) {
             if (pagination) {
-                this.fileTotal = pagination.Total;
+                this.fileTotal = totalFile || 0;
                 this.pageIndex = pagination.PageIndex;
                 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 +913,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 +998,10 @@
         /** @type {?} */
         AssetService.prototype.pageIndex;
         /** @type {?} */
+        AssetService.prototype.pageFolderSize;
+        /** @type {?} */
+        AssetService.prototype.pageFolderIndex;
+        /** @type {?} */
         AssetService.prototype.folderTotal;
         /** @type {?} */
         AssetService.prototype.fileTotal;
@@ -1291,21 +1364,25 @@
         /**
          * @private
          * @param {?} id
+         * @param {?=} pageSize
          * @return {?}
          */
         NodeTreeService.prototype.fetchChildrenFolder = /**
          * @private
          * @param {?} id
+         * @param {?=} pageSize
          * @return {?}
          */
-        function (id) {
+        function (id, pageSize) {
             return __awaiter(this, void 0, void 0, function () {
                 var result, err_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, this.assetService.getChildrenFolders({ assetId: id, isFilter: false }).toPromise()];
+                            return [4 /*yield*/, this.assetService
+                                    .getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
+                                    .toPromise()];
                         case 1:
                             result = _a.sent();
                             if (result) {
@@ -1332,19 +1409,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 +1440,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);
@@ -1375,17 +1452,33 @@
         };
         /**
          * @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
+         * @param {?=} pageSize
          * @return {?}
          */
         NodeTreeService.prototype.getChildren = /**
          * @param {?} node
+         * @param {?=} pageSize
          * @return {?}
          */
-        function (node) {
+        function (node, pageSize) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId)];
+                        case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId, pageSize)];
                         case 1: return [2 /*return*/, _a.sent()];
                     }
                 });
@@ -1400,7 +1493,7 @@
          * @return {?}
          */
         function (node) {
-            return node.HaveChildren;
+            return Boolean(node.HaveChildren);
         };
         /** Add asset to stored data */
         /**
@@ -1876,7 +1969,6 @@
          */
         function () {
             var _this = this;
-            console.log('Assest Management Dialog', this.data);
             this.initDialogConfig(this.data);
             select((/**
              * @param {?} state
@@ -1942,7 +2034,7 @@
         AssetManagementDialogComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-management-dialog',
-                        template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n  <ng-container subtitle>\n    <lib-breadcrumb></lib-breadcrumb>\n  </ng-container>\n  <ng-container headerActions>\n    <lib-search-box></lib-search-box>\n  </ng-container>\n  <ng-container content>\n    <lib-asset-wrapper \n      [header]=\"false\"\n      [hasModifyPermission]=\"data.permission.modify\"\n      [hasAccessPermission]=\"data.permission.access\"\n      [hasArchivePermission]=\"data.permission.archive\"\n    ></lib-asset-wrapper>\n  </ng-container>\n  <ng-container actions>\n    <div class=\"asset-management-dialog__footer\">\n      <div class=\"selected-assets\">\n        <ng-container *ngIf=\"data?.limit\">\n          <span>Selected{{' '}}</span>\n          <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\n            {{selectedAssets?.length}}/{{data?.limit}}\n          </span>\n          <span>\n            {{data?.limit > 1 ? \"assets\": \"asset\"}}\n          </span>\n        </ng-container>\n\n      </div>\n      <div>\n        <button mat-raised-button mat-dialog-close>Cancel</button>\n        <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\n      </div>\n    </div>\n  </ng-container>\n</lib-modal>",
+                        template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n  <ng-container subtitle>\n    <lib-breadcrumb></lib-breadcrumb>\n  </ng-container>\n  <ng-container headerActions>\n    <lib-search-box></lib-search-box>\n  </ng-container>\n  <ng-container content>\n    <lib-asset-wrapper\n      [header]=\"false\"\n      [isDialog]=\"true\"\n      [hasModifyPermission]=\"data.permission.modify\"\n      [hasAccessPermission]=\"data.permission.access\"\n      [hasArchivePermission]=\"data.permission.archive\"\n    ></lib-asset-wrapper>\n  </ng-container>\n  <ng-container actions>\n    <div class=\"asset-management-dialog__footer\">\n      <div class=\"selected-assets\">\n        <ng-container *ngIf=\"data?.limit\">\n          <span>Selected{{' '}}</span>\n          <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\n            {{selectedAssets?.length}}/{{data?.limit}}\n          </span>\n          <span>\n            {{data?.limit > 1 ? \"assets\": \"asset\"}}\n          </span>\n        </ng-container>\n      </div>\n      <div>\n        <button mat-raised-button mat-dialog-close>Cancel</button>\n        <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\n      </div>\n    </div>\n  </ng-container>\n</lib-modal>",
                         styles: [":host::ng-deep .asset-management-dialog__footer{display:flex;width:100%;align-items:center;justify-content:space-between}:host::ng-deep .asset-management-dialog__footer .selected-assets{font-size:14px;color:#979797}:host::ng-deep .asset-management-dialog__footer .selected-assets .count{color:#000}:host::ng-deep .asset-management-dialog__footer .selected-assets .error{color:#f44336}"]
                     }] }
         ];
@@ -2367,7 +2459,7 @@
             { type: core.Component, args: [{
                         selector: 'lib-modal',
                         template: "<h4 mat-dialog-title *ngIf=\"!customHeader; else customHeaderTemplate\">\n  <div class=\"lib-modal--title\" [title]=\"heading\">\n    {{ heading }}\n  </div>\n  <div class=\"lib-modal--close\">\n    <mat-icon mat-dialog-close>close</mat-icon>\n  </div>\n</h4>\n<ng-template #customHeaderTemplate>\n  <h4 mat-dialog-title>\n    <div class=\"lib-modal--custom-title\">\n      <span>\n        {{ heading }}\n      </span>\n      <div class=\"lib-modal--custom-subtitle\">\n        <ng-content select=\"[subtitle]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"lib-modal--header-actions\">\n      <ng-content select=\"[headerActions]\"></ng-content>\n    </div>\n    <mat-icon mat-dialog-close class=\"mat-dialog-close\">close</mat-icon>\n  </h4>\n</ng-template>\n<mat-dialog-content class=\"custom-scrollbar\">\n  <ng-content select=\"[content]\"></ng-content>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <ng-content select=\"[actions]\"></ng-content>\n</mat-dialog-actions>\n",
-                        styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-webkit-max-content!important;height:-moz-max-content!important;height:max-content!important}}::ng-deep .lib-dialog--large .mat-dialog-actions{padding:12px 0;margin-bottom:-24px!important}"]
+                        styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-moz-max-content!important;height:max-content!important}}::ng-deep .lib-dialog--large .mat-dialog-actions{padding:12px 0;margin-bottom:-24px!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -2720,7 +2812,7 @@
             { type: core.Component, args: [{
                         selector: 'lib-file-list',
                         template: "<div class=\"file-list__heading\">\n  <div class=\"file-list__info\">\n    <h4 class=\"file-list__info--title\">\n      <span *ngIf=\"!uploadAssetsService.errorLength\">\n        {{\n          uploadAssetsService?.getFiles?.length -\n            uploadAssetsService.errorLength\n        }}\n        {{ uploadAssetsService?.getFiles?.length > 1 ? 'assets' : 'asset' }}\n        ready to upload\n      </span>\n      <span *ngIf=\"uploadAssetsService.errorLength\">\n        {{ uploadAssetsService.errorLength }}\n        {{ uploadAssetsService.errorLength > 1 ? 'assets' : 'asset' }}\n        invalid, please remove it before upload</span\n      >\n    </h4>\n    <div class=\"file-list__info--desc\">\n      Manage the assets before adding them to the Media Library\n    </div>\n  </div>\n  <lib-input-file\n    [acceptTypes]=\"uploadAssetsService?.supportedTypes?.join(', ')\"\n    (onFileChange)=\"onFileChange($event)\"\n    color=\"primary\"\n  >\n    <span>Add new assets</span>\n  </lib-input-file>\n</div>\n<div class=\"file-list\">\n  <lib-file-item\n    *ngFor=\"let file of uploadAssetsService?.getFiles; let i = index\"\n    [file]=\"file\"\n    (checkError)=\"onEmitError()\"\n    (fileRemove)=\"onDelFile(i)\"\n    (fileChange)=\"onChangeName($event, i)\"\n  ></lib-file-item>\n</div>\n",
-                        styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position:-webkit-sticky;position:sticky;top:0;background-color:#fff}:host::ng-deep .file-list__info--title{font-size:16px;margin-bottom:5px;color:#000}:host::ng-deep lib-file-item{margin-bottom:20px}"]
+                        styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position:sticky;top:0;background-color:#fff}:host::ng-deep .file-list__info--title{font-size:16px;margin-bottom:5px;color:#000}:host::ng-deep lib-file-item{margin-bottom:20px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3541,7 +3633,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 +3680,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 +3715,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 +3753,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 +3763,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 +3778,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 {?}
@@ -3865,9 +3991,14 @@
              * @return {?}
              */
             function (res) {
-                _this.assetService.setAssetList(res.Data.Children, res.Meta);
-            }))
-                .add((/**
+                /** @type {?} */
+                var pagination = res && res.Meta || {};
+                /** @type {?} */
+                var assets = res && res.Data && res.Data.Children || [];
+                /** @type {?} */
+                var totalFile = res && res.Data && res.Data.TotalFile || 0;
+                _this.assetService.setAssetList(assets, pagination, totalFile);
+            })).add((/**
              * @return {?}
              */
             function () {
@@ -3916,8 +4047,8 @@
         AssetListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-list',
-                        template: "<div class=\"asset-container\">\n  <div class=\"asset-heading\">\n    <h6 class=\"asset-heading__title\">Files</h6>\n    <lib-sort-items\n      [hidden]=\"!assets?.length\"\n      class=\"asset-heading__sort\"\n    ></lib-sort-items>\n  </div>\n  <ng-container *ngIf=\"assets && !assets.length; else assetsTemplate\">\n    <div class=\"asset-empty\">\n      <span>This asset is empty.</span>\n    </div>\n  </ng-container>\n  <ng-template #assetsTemplate>\n    <div class=\"asset-list\">\n      <lib-asset-item\n        class=\"asset-list__item\"\n        *ngFor=\"let asset of assets\"\n        [asset]=\"asset\"\n        (selectAsset)=\"onSelectAsset($event)\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      >\n      </lib-asset-item>\n    </div>\n  </ng-template>\n  <div [hidden]=\"!assets?.length\">\n    <mat-paginator\n      #paginator\n      [pageSizeOptions]=\"[12, 24, 60, 120]\"\n      (page)=\"pageChange($event)\"\n      [showFirstLastButtons]=\"true\"\n    >\n    </mat-paginator>\n  </div>\n</div>\n",
-                        styles: [":host::ng-deep .asset-container .asset-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}:host::ng-deep .asset-container .asset-heading__title{margin-bottom:0;color:#979797}:host::ng-deep .asset-container .asset-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;margin:0 -5px}:host::ng-deep .asset-container .asset-list__item{width:25%}@media only screen and (max-width:1200px){:host::ng-deep .asset-container .asset-list__item{width:calc(100% / 3)}}@media only screen and (max-width:960px){:host::ng-deep .asset-container .asset-list__item{width:50%}}:host::ng-deep .asset-container .asset-empty{text-align:center;color:#979797;font-size:14px}"]
+                        template: "<div class=\"asset-container\">\n  <div class=\"asset-heading\">\n    <h6 class=\"asset-heading__title\">Files</h6>\n    <lib-sort-items\n      [hidden]=\"!assets?.length\"\n      class=\"asset-heading__sort\"\n    ></lib-sort-items>\n  </div>\n  <ng-container *ngIf=\"assets && !assets.length; else assetsTemplate\">\n    <div class=\"asset-empty\">\n      <span>This asset is empty.</span>\n    </div>\n  </ng-container>\n  <ng-template #assetsTemplate>\n    <div class=\"asset-list\">\n      <lib-asset-item\n        class=\"asset-list__item\"\n        *ngFor=\"let asset of assets\"\n        [asset]=\"asset\"\n        [isDialog]=\"isDialog\"\n        (selectAsset)=\"onSelectAsset($event)\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      >\n      </lib-asset-item>\n    </div>\n  </ng-template>\n  <div [hidden]=\"!assets?.length\">\n    <mat-paginator\n      #paginator\n      [pageSizeOptions]=\"[12, 24, 60, 120]\"\n      (page)=\"pageChange($event)\"\n      [showFirstLastButtons]=\"true\"\n    >\n    </mat-paginator>\n  </div>\n</div>\n",
+                        styles: [":host::ng-deep .asset-container .asset-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}:host::ng-deep .asset-container .asset-heading__title{margin-bottom:0;color:#979797}:host::ng-deep .asset-container .asset-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;margin:0 -5px}:host::ng-deep .asset-container .asset-list__item{width:25%}@media only screen and (max-width:1200px){:host::ng-deep .asset-container .asset-list__item{width:33.3333333333%}}@media only screen and (max-width:960px){:host::ng-deep .asset-container .asset-list__item{width:50%}}:host::ng-deep .asset-container .asset-empty{text-align:center;color:#979797;font-size:14px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3926,6 +4057,7 @@
             { type: AssetManagementService }
         ]; };
         AssetListComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -3935,6 +4067,8 @@
         return AssetListComponent;
     }());
     if (false) {
+        /** @type {?} */
+        AssetListComponent.prototype.isDialog;
         /** @type {?} */
         AssetListComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -4088,7 +4222,6 @@
          * @return {?}
          */
         function () {
-            console.log('data test', this.data.permission);
             this.uploadAssetsService.supportedSize = this.assetsService.maxSize * 1024 * 1024;
             this.linkDownload = this._env.asset2Url + "/File/Download/" + this.data.assetId;
             this.getAssetDetail();
@@ -4722,8 +4855,8 @@
         AssetItemComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-item',
-                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\">\n      <button class=\"asset-content__header--button\" mat-raised-button (click)=\"onChange()\">\n        <mat-checkbox\n          class=\"checkbox\"\n          [checked]=\"checkSelectedAsset\"\n        ></mat-checkbox>\n      </button>\n      <button\n        class=\"asset-content__header--button edit-button\"\n        mat-raised-button\n        (click)=\"editAsset()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    <div class=\"asset-content__body\">\n      <ng-container [ngSwitch]=\"asset.FileType\">\n        <ng-container *ngSwitchCase=\"fileType.IMAGE\">\n          <img\n            class=\"image\"\n            [src]=\"asset.UrlThumbnail\"\n            [alt]=\"asset.OriginalFileName\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"\n          />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <mat-icon class=\"icon\">cloud_upload</mat-icon>\n            <span class=\"processing-txt\">Uploading...</span>\n          </div>\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <mat-icon class=\"icon-img\">error_outline</mat-icon>\n            <div class=\"failed-group\">\n              <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\n            </div>\n            <div class=\"btn-failed-group\">\n              <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n              <span class=\"failed-txt mx-1\">or</span>\n              <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"/>\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <mat-icon class=\"icon\">cloud_upload</mat-icon>\n            <span class=\"processing-txt\">Uploading...</span>\n          </div>\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <mat-icon class=\"icon-doc\">error_outline</mat-icon>\n            <div class=\"failed-group\">\n              <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\n            </div>\n            <div class=\"btn-failed-group\">\n              <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n              <span class=\"failed-txt mx-1\">or</span>\n              <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"asset-content__footer\">\n      <div\n        class=\"asset-content__footer--info\"\n        [ngClass]=\"{\n          'file-type__document': asset.FileType === fileType.DOCUMENT\n        }\"\n      >\n        <p\n          class=\"name\"\n          [matTooltip]=\"asset.OriginalFileNameWithoutExtension\"\n          matTooltipClass=\"width-auto\"\n        >\n          {{ asset.OriginalFileNameWithoutExtension }}\n        </p>\n        <p class=\"info\">\n          <span class=\"extension\">{{ asset.Extension }}</span>\n          <span\n            *ngIf=\"\n              asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\n            \"\n          >\n            - {{ asset.Width }}x{{ asset.Height }}</span\n          >\n          <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\n        </p>\n      </div>\n      <div class=\"asset-content__footer--file-type\">\n        <span>{{ asset.FileType }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                        styles: [":host::ng-deep .asset-wrapper{padding:5px}:host::ng-deep .asset-wrapper .asset-content{overflow:hidden;position:relative;border-radius:10px;border:1px solid #d8d8d8;font-size:14px;transition:.3s cubic-bezier(.25,.8,.25,1)}:host::ng-deep .asset-wrapper .asset-content:hover{box-shadow:0 0 8px rgba(0,0,0,.17),0 0 0 rgba(0,0,0,.06)}:host::ng-deep .asset-wrapper .asset-content__header{position:absolute;z-index:1;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px}:host::ng-deep .asset-wrapper .asset-content__header--button{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(0,0,0,.65);background:rgba(255,255,255,.6)}:host::ng-deep .asset-wrapper .asset-content__header--button:hover{background:#fff}:host::ng-deep .asset-wrapper .asset-content__header--button.edit-button{transition:.3s cubic-bezier(.25,.8,.25,1);opacity:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-icon{font-size:22px}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox{pointer-events:none;display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{display:block;margin:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout .mat-checkbox-frame{color:#767676}:host::ng-deep .asset-wrapper .asset-content__body{padding-bottom:66.66%;background:#f1f1f1;position:relative}:host::ng-deep .asset-wrapper .asset-content__body img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .asset-wrapper .asset-content__body img.file{width:75%;height:75%}:host::ng-deep .asset-wrapper .asset-content__body .processing{background-color:#f1f1f1;width:100%;height:100%}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon{position:absolute;top:30%;left:42%;font-size:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-img{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-doc{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{position:absolute;top:55%;left:35%}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-image{width:27px;height:27px;-o-object-fit:contain;object-fit:contain}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{position:absolute;top:55%;left:20%}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{position:absolute;top:70%;left:10%;font-size:12px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .failed-txt{color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload{font-size:9px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed{font-size:9px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload:hover{opacity:.8}:host::ng-deep .asset-wrapper .asset-content__footer{display:flex;align-items:center;justify-content:space-between;padding:5px 8px}:host::ng-deep .asset-wrapper .asset-content__footer--info{max-width:calc(100% - 50px)}:host::ng-deep .asset-wrapper .asset-content__footer--info p{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .asset-wrapper .asset-content__footer--info .info{font-size:12px;color:#979797}:host::ng-deep .asset-wrapper .asset-content__footer--info .info .extension{text-transform:uppercase}:host::ng-deep .asset-wrapper .asset-content__footer--info.file-type__document{max-width:calc(100% - 70px)}:host::ng-deep .asset-wrapper .asset-content__footer--file-type{border-radius:5px;background-color:#d8d8d8;padding:2px 6px;font-size:12px}:host::ng-deep .asset-wrapper .asset-content:hover .edit-button{opacity:1!important}"]
+                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\">\n      <button class=\"asset-content__header--button\"\n        *ngIf=\"(asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed) || (asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing)\"\n        mat-raised-button (click)=\"onChange()\">\n        <mat-checkbox class=\"checkbox\" [checked]=\"checkSelectedAsset\"></mat-checkbox>\n      </button>\n      <button class=\"asset-content__header--button edit-button\"\n        *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" mat-raised-button\n        (click)=\"editAsset()\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    <div class=\"asset-content__body\">\n      <ng-container [ngSwitch]=\"asset.FileType\">\n        <ng-container *ngSwitchCase=\"fileType.IMAGE\">\n          <img class=\"image\" [src]=\"asset.UrlThumbnail\" [alt]=\"asset.OriginalFileName\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <div class=\"upload-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <div class=\"failed-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n                  file</span>\n              </div>\n              <div class=\"btn-failed-group\">\n                <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n                  (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n                <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n                  (click)=\"onDelete(asset)\">Delete</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <div class=\"upload-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <div class=\"failed-group\">\n              <mat-icon class=\"processing-icon\"\n                [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n                  file</span>\n              </div>\n              <div class=\"btn-failed-group\">\n                <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n                  (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n                <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n                  (click)=\"onDelete(asset)\">Delete</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"asset-content__footer\">\n      <div class=\"asset-content__footer--info\" [ngClass]=\"{\n          'file-type__document': asset.FileType === fileType.DOCUMENT\n        }\">\n        <p class=\"name\" [matTooltip]=\"asset.OriginalFileNameWithoutExtension\" matTooltipClass=\"width-auto\">\n          {{ asset.OriginalFileNameWithoutExtension }}\n        </p>\n        <p class=\"info\">\n          <span class=\"extension\">{{ asset.Extension }}</span>\n          <span *ngIf=\"\n              asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\n            \">\n            - {{ asset.Width }}x{{ asset.Height }}</span>\n          <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\n        </p>\n      </div>\n      <div class=\"asset-content__footer--file-type\">\n        <span>{{ asset.FileType }}</span>\n      </div>\n    </div>\n  </div>\n</div>",
+                        styles: [":host::ng-deep .asset-wrapper{padding:5px}:host::ng-deep .asset-wrapper .asset-content{overflow:hidden;position:relative;border-radius:10px;border:1px solid #d8d8d8;font-size:14px;transition:.3s cubic-bezier(.25,.8,.25,1)}:host::ng-deep .asset-wrapper .asset-content:hover{box-shadow:0 0 8px rgba(0,0,0,.17),0 0 0 rgba(0,0,0,.06)}:host::ng-deep .asset-wrapper .asset-content__header{position:absolute;z-index:1;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px}:host::ng-deep .asset-wrapper .asset-content__header--button{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(0,0,0,.65);background:rgba(255,255,255,.6)}:host::ng-deep .asset-wrapper .asset-content__header--button:hover{background:#fff}:host::ng-deep .asset-wrapper .asset-content__header--button.edit-button{transition:.3s cubic-bezier(.25,.8,.25,1);opacity:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-icon{font-size:22px}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox{pointer-events:none;display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{display:block;margin:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout .mat-checkbox-frame{color:#767676}:host::ng-deep .asset-wrapper .asset-content__body{padding-bottom:66.66%;background:#f1f1f1;position:relative}:host::ng-deep .asset-wrapper .asset-content__body img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .asset-wrapper .asset-content__body img.file{width:75%;height:75%}:host::ng-deep .asset-wrapper .asset-content__body .processing{background-color:#f1f1f1;width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-icon{font-size:35px;height:35px;width:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{font-size:17px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-icon-dialog{font-size:24px;height:24px;width:24px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt-dialog{font-size:13px}:host::ng-deep .asset-wrapper .asset-content__body .processing .upload-group{text-align:center}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{text-align:center;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{margin-top:7px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload{font-size:13px;padding:5px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed{font-size:13px;padding:5px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog{font-size:9px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed-dialog{font-size:9px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload:hover{opacity:.8}:host::ng-deep .asset-wrapper .asset-content__footer{display:flex;align-items:center;justify-content:space-between;padding:5px 8px}:host::ng-deep .asset-wrapper .asset-content__footer--info{max-width:calc(100% - 50px)}:host::ng-deep .asset-wrapper .asset-content__footer--info p{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .asset-wrapper .asset-content__footer--info .info{font-size:12px;color:#979797}:host::ng-deep .asset-wrapper .asset-content__footer--info .info .extension{text-transform:uppercase}:host::ng-deep .asset-wrapper .asset-content__footer--info.file-type__document{max-width:calc(100% - 70px)}:host::ng-deep .asset-wrapper .asset-content__footer--file-type{border-radius:5px;background-color:#d8d8d8;padding:2px 6px;font-size:12px}:host::ng-deep .asset-wrapper .asset-content:hover .edit-button{opacity:1!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -4735,6 +4868,7 @@
             { type: core.ChangeDetectorRef }
         ]; };
         AssetItemComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -4744,6 +4878,8 @@
         return AssetItemComponent;
     }());
     if (false) {
+        /** @type {?} */
+        AssetItemComponent.prototype.isDialog;
         /** @type {?} */
         AssetItemComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -4967,14 +5103,16 @@
         /**
          * Reload the node, remove from display list
          * @param {?} node
+         * @param {?=} pageSize
          * @return {?}
          */
         NodeTreeDataSource.prototype.reloadNode = /**
          * Reload the node, remove from display list
          * @param {?} node
+         * @param {?=} pageSize
          * @return {?}
          */
-        function (node) {
+        function (node, pageSize) {
             return __awaiter(this, void 0, void 0, function () {
                 var _a, newNode, index, count, i, nodes;
                 var _this = this;
@@ -4984,7 +5122,7 @@
                             if (!node) {
                                 return [2 /*return*/];
                             }
-                            return [4 /*yield*/, this._database.getChildren(node.item)];
+                            return [4 /*yield*/, this._database.getChildren(node.item, pageSize)];
                         case 1:
                             newNode = _b.sent();
                             index = this.data.indexOf(node);
@@ -5039,13 +5177,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 +5208,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 +5254,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 {?}
@@ -5107,9 +5290,7 @@
          */
         function () {
             var _this = this;
-            this.nodeTreeService.loading$
-                .pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged())
-                .subscribe((/**
+            this.nodeTreeService.loading$.pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged()).subscribe((/**
              * @param {?} loading
              * @return {?}
              */
@@ -5117,9 +5298,7 @@
                 _this.homeLoading = loading;
                 _this.changeDetectorRef.detectChanges();
             }));
-            this.nodeTreeService.initialData$
-                .pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged())
-                .subscribe((/**
+            this.nodeTreeService.initialData$.pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged()).subscribe((/**
              * @param {?} data
              * @return {?}
              */
@@ -5134,14 +5313,13 @@
                 function (node) { return _this.nodeTreeService.addNode(node.item, null); }));
                 _this.changeDetectorRef.detectChanges();
             }));
-            this.dataSource.dataChange
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe((/**
+            this.dataSource.dataChange.pipe(operators.takeUntil(this.unsubscribe$)).subscribe((/**
              * @param {?} data
              * @return {?}
              */
             function (data) {
                 if (data && data.length) {
+                    _this.handleDatasourceChange(data);
                     _this.changeDetectorRef.detectChanges();
                 }
             }));
@@ -5198,6 +5376,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 +5462,69 @@
                 });
             }
         };
+        /**
+         * @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 +5598,7 @@
          */
         function (id) {
             return __awaiter(this, void 0, void 0, function () {
-                var node, parent_1, updatedNode, updatedNode;
+                var node, parent_1, children, updatedNode, rootFolder, updatedNode;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -5333,28 +5610,39 @@
                             if (!node) return [3 /*break*/, 8];
                             parent_1 = this.getParent(node);
                             if (!parent_1) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.dataSource.reloadNode(parent_1)];
+                            // Reload parent folder (get children and expand it again)
+                            children = this.folderChildrenMap.get(parent_1.item.AssetId);
+                            return [4 /*yield*/, this.dataSource.reloadNode(parent_1, children.size)];
                         case 1:
                             _a.sent();
                             updatedNode = this.getNodeById(id);
                             if (!updatedNode) return [3 /*break*/, 3];
+                            // TODO
                             return [4 /*yield*/, this.treeControl.expand(updatedNode)];
                         case 2:
+                            // TODO
                             _a.sent();
                             _a.label = 3;
                         case 3: return [3 /*break*/, 7];
-                        case 4: return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
+                        case 4:
+                            rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
+                            return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false, pageSize: rootFolder.size })];
                         case 5:
                             _a.sent();
                             updatedNode = this.getNodeById(id);
                             if (!updatedNode) return [3 /*break*/, 7];
+                            // TODO
                             return [4 /*yield*/, this.treeControl.expand(updatedNode)];
                         case 6:
+                            // TODO
                             _a.sent();
                             _a.label = 7;
                         case 7: return [3 /*break*/, 10];
-                        case 8: return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
+                        case 8: 
+                        // Reload root folder
+                        return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
                         case 9:
+                            // Reload root folder
                             _a.sent();
                             _a.label = 10;
                         case 10:
@@ -5364,6 +5652,21 @@
                 });
             });
         };
+        /**
+         * @private
+         * @param {?} id
+         * @param {?} value
+         * @return {?}
+         */
+        NodeTreeComponent.prototype.setLoadingMore = /**
+         * @private
+         * @param {?} id
+         * @param {?} value
+         * @return {?}
+         */
+        function (id, value) {
+            this.loadingMoreList[id] = value;
+        };
         /**
          * @return {?}
          */
@@ -5378,13 +5681,14 @@
         };
         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}"]
+                        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      [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:grid;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:-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 +5702,8 @@
         /** @type {?} */
         NodeTreeComponent.prototype.width;
         /** @type {?} */
+        NodeTreeComponent.prototype.ROOT_ASSET_ID;
+        /** @type {?} */
         NodeTreeComponent.prototype.currentFolderId;
         /** @type {?} */
         NodeTreeComponent.prototype.isRoot;
@@ -5406,9 +5712,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 +5730,8 @@
         NodeTreeComponent.prototype.isExpandable;
         /** @type {?} */
         NodeTreeComponent.prototype.hasChild;
+        /** @type {?} */
+        NodeTreeComponent.prototype.assetService;
         /**
          * @type {?}
          * @private
@@ -5685,11 +5997,16 @@
              * @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);
-            }))
-                .add((/**
+                var _b = __read(_a, 2), folders = _b[0], assetsRes = _b[1];
+                /** @type {?} */
+                var pagination = assetsRes && assetsRes.Meta || {};
+                /** @type {?} */
+                var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+                /** @type {?} */
+                var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
+                _this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
+                _this.assetService.setAssetList(assets, pagination, totalFile);
+            })).add((/**
              * @return {?}
              */
             function () {
@@ -5859,19 +6176,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 {?}
          */
@@ -5931,7 +6238,7 @@
         AssetWrapperComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-wrapper',
-                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-header\" *ngIf=\"header\">\n    <div class=\"asset-header__left asset-header__title\" #title>\n      <lib-breadcrumb></lib-breadcrumb>\n    </div>\n    <div class=\"asset-header__right asset-header__actions\" #actions>\n      <lib-search-box></lib-search-box>\n    </div>\n  </div>\n  <div class=\"asset-body\">\n    <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n      <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n    </lib-drag-to-resize>\n    <lib-node-details \n      class=\"asset-body__node-details\" \n      [style.maxWidth]=\"nodeDetailsWidth\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-node-details>\n  </div>\n</div>",
+                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-header\" *ngIf=\"header\">\n    <div class=\"asset-header__left asset-header__title\" #title>\n      <lib-breadcrumb></lib-breadcrumb>\n    </div>\n    <div class=\"asset-header__right asset-header__actions\" #actions>\n      <lib-search-box></lib-search-box>\n    </div>\n  </div>\n  <div class=\"asset-body\">\n    <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n      <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n    </lib-drag-to-resize>\n    <lib-node-details \n      class=\"asset-body__node-details\"\n      [isDialog]=\"isDialog\"\n      [style.maxWidth]=\"nodeDetailsWidth\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-node-details>\n  </div>\n</div>",
                         styles: [":host::ng-deep .mat-dialog-title{padding:24px}:host::ng-deep .mat-dialog-title .lib-modal--close{padding:10px;position:absolute;top:10px;right:10px;z-index:1}:host::ng-deep .mat-dialog-actions{padding-left:24px;padding-right:24px}:host::ng-deep .asset-wrapper{display:flex;flex-direction:column;height:100%;width:100%;overflow-x:hidden}:host::ng-deep .asset-wrapper .asset-header{display:flex;padding:20px 15px;border-bottom:1px solid #d8d8d8;justify-content:space-between;align-items:center}:host::ng-deep .asset-wrapper .asset-body{display:flex;align-items:stretch}:host::ng-deep .asset-wrapper .asset-body__node-tree{border-right:1px solid #d8d8d8}:host::ng-deep .asset-wrapper .asset-body__node-details{flex:1}@media screen and (max-width:768px){:host::ng-deep .asset-wrapper .asset-header{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px}:host::ng-deep .asset-wrapper .asset-body{flex-direction:column;justify-content:flex-start}:host::ng-deep .asset-wrapper .asset-body__node-tree{width:100%}:host::ng-deep .asset-wrapper .asset-body__node-details{max-width:100%!important}}::ng-deep .mat-tooltip.width-auto{max-width:100%!important}"]
                     }] }
         ];
@@ -5941,6 +6248,7 @@
         ]; };
         AssetWrapperComponent.propDecorators = {
             header: [{ type: core.Input }],
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -5952,6 +6260,8 @@
         /** @type {?} */
         AssetWrapperComponent.prototype.header;
         /** @type {?} */
+        AssetWrapperComponent.prototype.isDialog;
+        /** @type {?} */
         AssetWrapperComponent.prototype.hasModifyPermission;
         /** @type {?} */
         AssetWrapperComponent.prototype.hasAccessPermission;
@@ -6246,23 +6556,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 +6586,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 +6619,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 +6632,17 @@
              * @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];
+                /** @type {?} */
+                var pagination = assetsRes && assetsRes.Meta || {};
+                /** @type {?} */
+                var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+                /** @type {?} */
+                var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
+                _this.setFolderList(foldersRes);
+                _this.assetService.setAssetList(assets, pagination, totalFile);
+                if (foldersRes.Data && foldersRes.Data.Children) {
+                    foldersRes.Data.Children.forEach((/**
                      * @param {?} node
                      * @return {?}
                      */
@@ -6326,6 +6661,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,8 +6740,8 @@
         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>",
-                        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}"]
+                        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        [isDialog]=\"isDialog\"\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: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}"]
                     }] }
         ];
         /** @nocollapse */
@@ -6372,6 +6753,7 @@
             { type: core.ChangeDetectorRef }
         ]; };
         NodeDetailsComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }]
@@ -6379,6 +6761,8 @@
         return NodeDetailsComponent;
     }());
     if (false) {
+        /** @type {?} */
+        NodeDetailsComponent.prototype.isDialog;
         /** @type {?} */
         NodeDetailsComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -6391,6 +6775,8 @@
          */
         NodeDetailsComponent.prototype.unsubscribe$;
         /** @type {?} */
+        NodeDetailsComponent.prototype.folderPagination;
+        /** @type {?} */
         NodeDetailsComponent.prototype.selectedAssets;
         /** @type {?} */
         NodeDetailsComponent.prototype.loading$;