@rs-pk/asset-management 1.0.26 → 1.0.28

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

@@ -7,7 +7,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator as MatPaginator$1, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatMenuModule } from '@angular/material/menu';
@@ -21,7 +21,7 @@ import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubj
 import { map, distinctUntilChanged, takeUntil, switchMap } from 'rxjs/operators';
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1 } from '@angular/material';
+import { MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1, MatPaginator } from '@angular/material';
 import { of } from 'rxjs/internal/observable/of';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
@@ -72,6 +72,10 @@ if (false) {
     IAssetByIdPayload.prototype.assetId;
     /** @type {?|undefined} */
     IAssetByIdPayload.prototype.isFilter;
+    /** @type {?|undefined} */
+    IAssetByIdPayload.prototype.pageIndex;
+    /** @type {?|undefined} */
+    IAssetByIdPayload.prototype.pageSize;
 }
 /**
  * @record
@@ -80,6 +84,8 @@ function IInitialFolderTreeOptions() { }
 if (false) {
     /** @type {?|undefined} */
     IInitialFolderTreeOptions.prototype.dispatchRootId;
+    /** @type {?|undefined} */
+    IInitialFolderTreeOptions.prototype.pageSize;
 }
 class AssetModel {
 }
@@ -138,6 +144,8 @@ if (false) {
     AssetModel.prototype.HaveChildren;
     /** @type {?} */
     AssetModel.prototype.ParentId;
+    /** @type {?} */
+    AssetModel.prototype.Children;
 }
 class FolderTreeModel extends AssetModel {
 }
@@ -176,6 +184,12 @@ BackgroudProcessingStatus[BackgroudProcessingStatus.None] = 'None';
 BackgroudProcessingStatus[BackgroudProcessingStatus.InProcessing] = 'InProcessing';
 BackgroudProcessingStatus[BackgroudProcessingStatus.Processed] = 'Processed';
 BackgroudProcessingStatus[BackgroudProcessingStatus.Failed] = 'Failed';
+/** @type {?} */
+const MAX_FOLDER_TREE_SIZE = 10;
+/** @type {?} */
+const DEFAULT_FOLDER_TREE_INDEX = 0;
+/** @type {?} */
+const ROOT_ASSET_ID = 'ROOT';
 
 /**
  * @fileoverview added by tsickle
@@ -406,6 +420,8 @@ if (false) {
     AMConfig.prototype.asset2Url;
     /** @type {?|undefined} */
     AMConfig.prototype.requestHeader;
+    /** @type {?|undefined} */
+    AMConfig.prototype.pageFolderSize;
 }
 /** @type {?} */
 const AM_CONFIG = new InjectionToken('asset.man.config.angular');
@@ -477,6 +493,14 @@ class AssetService {
         this.baseUrl = this._env.asset2Url;
         this.initOptionFiles();
     }
+    /**
+     * @return {?}
+     */
+    get AMConfig() {
+        return {
+            pageFolderSize: this._env.pageFolderSize
+        };
+    }
     /**
      * @private
      * @return {?}
@@ -485,6 +509,8 @@ class AssetService {
         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;
@@ -513,11 +539,12 @@ class AssetService {
     }
     /**
      * @param {?} folders
-     * @param {?=} folderTotal
+     * @param {?=} pagination
      * @return {?}
      */
-    setFolderList(folders, folderTotal) {
-        this.folderTotal = folderTotal || 0;
+    setFolderList(folders, pagination) {
+        this.setFolderTreePagination(pagination);
+        this.setFolderPagination(pagination);
         this.folderList$.next(folders);
     }
     /**
@@ -560,6 +587,27 @@ class AssetService {
             this.pageSize = pagination.PageSize;
         }
     }
+    /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    setFolderPagination(pagination) {
+        if (pagination) {
+            this.folderTotal = pagination.Total;
+            this.pageFolderIndex = pagination.PageIndex;
+            this.pageFolderSize = pagination.PageSize;
+        }
+    }
+    /**
+     * @param {?} pagination
+     * @return {?}
+     */
+    setFolderTreePagination(pagination) {
+        if (pagination) {
+            this.folderTotal = pagination.Total;
+        }
+    }
     /**
      * @param {?} assetId
      * @return {?}
@@ -573,11 +621,15 @@ class AssetService {
      * @param {?} __0
      * @return {?}
      */
-    getChildrenFolders({ assetId, isFilter = true }) {
+    getChildrenFolders({ assetId, isFilter = true, pageIndex = DEFAULT_FOLDER_TREE_INDEX, pageSize = this._env.pageFolderSize || MAX_FOLDER_TREE_SIZE }) {
         /** @type {?} */
         const url = `${this.baseUrl}/File/GetChildren`;
         /** @type {?} */
-        let params = new HttpParams().set('getAll', 'true').set('isFolder', 'true');
+        let params = new HttpParams()
+            .set('getAll', 'true')
+            .set('isFolder', 'true')
+            .set('pageSize', `${pageSize}`)
+            .set('pageIndex', `${pageIndex}`);
         if (assetId) {
             params = params.set('assetId', assetId);
         }
@@ -648,6 +700,10 @@ if (false) {
     /** @type {?} */
     AssetService.prototype.pageIndex;
     /** @type {?} */
+    AssetService.prototype.pageFolderSize;
+    /** @type {?} */
+    AssetService.prototype.pageFolderIndex;
+    /** @type {?} */
     AssetService.prototype.folderTotal;
     /** @type {?} */
     AssetService.prototype.fileTotal;
@@ -1013,13 +1069,13 @@ class NodeTreeService {
      * @param {?} __0
      * @return {?}
      */
-    initialData({ dispatchRootId }) {
+    initialData({ dispatchRootId, pageSize = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE }) {
         return __awaiter(this, void 0, void 0, function* () {
             if (dispatchRootId) {
                 this.loading$.next(true);
             }
             /** @type {?} */
-            const result = yield this.assetService.getChildrenFolders({ isFilter: false }).toPromise();
+            const result = yield this.assetService.getChildrenFolders({ isFilter: false, pageIndex: 0, pageSize }).toPromise();
             if (!result) {
                 return;
             }
@@ -1039,7 +1095,7 @@ class NodeTreeService {
              * @param {?} folder
              * @return {?}
              */
-            (folder) => new DynamicFlatNode(folder, 0, this.isExpandable(folder))));
+            (folder) => this.getDynamicFlatNode(folder, 0)));
             this.initialData$.next(initData);
             if (dispatchRootId) {
                 this.loading$.next(false);
@@ -1047,6 +1103,14 @@ class NodeTreeService {
             return this.initialData$.getValue();
         });
     }
+    /**
+     * @param {?} node
+     * @param {?=} level
+     * @return {?}
+     */
+    getDynamicFlatNode(node, level = 0) {
+        return new DynamicFlatNode(node, level, this.isExpandable(node));
+    }
     /**
      * @param {?} node
      * @return {?}
@@ -1061,7 +1125,7 @@ class NodeTreeService {
      * @return {?}
      */
     isExpandable(node) {
-        return node.HaveChildren;
+        return Boolean(node.HaveChildren);
     }
     /**
      * Add asset to stored data
@@ -1467,7 +1531,6 @@ class AssetManagementDialogComponent {
      * @return {?}
      */
     ngOnInit() {
-        console.log('Assest Management Dialog', this.data);
         this.initDialogConfig(this.data);
         select((/**
          * @param {?} state
@@ -2936,7 +2999,7 @@ class FolderItemComponent {
 FolderItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-folder-item',
-                template: "<div class=\"folder\" (dblclick)=\"openFolder()\">\n  <mat-icon class=\"folder__icon\">folder</mat-icon>\n  <span class=\"folder__name\" [matTooltip]=\"folder.OriginalFileName\">\n    {{ folder.OriginalFileName }}\n  </span>\n  <mat-icon class=\"folder__action\" [matMenuTriggerFor]=\"menu\"\n    >more_vert</mat-icon\n  >\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"renameFolder()\" [disabled]=\"!hasModifyPermission\">\n    <mat-icon>edit_outline</mat-icon> <span>Rename</span>\n  </button>\n  <button mat-menu-item (click)=\"deleteFolder()\" [disabled]=\"!hasArchivePermission\">\n    <mat-icon color=\"warn\">delete_outline</mat-icon> <span>Delete</span>\n  </button>\n</mat-menu>\n",
+                template: "<div class=\"folder\" (dblclick)=\"openFolder()\">\n  <mat-icon class=\"folder__icon\">folder</mat-icon>\n  <span class=\"folder__name\" [matTooltip]=\"folder.OriginalFileName\">\n    {{ folder.OriginalFileName }}\n  </span>\n  <mat-icon class=\"folder__action\" [matMenuTriggerFor]=\"menu\"\n    >more_vert</mat-icon\n  >\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"renameFolder()\" [disabled]=\"!hasModifyPermission\">\n    <mat-icon>edit_outline</mat-icon> <span>Rename</span>\n  </button>\n  <button mat-menu-item (click)=\"deleteFolder()\" [disabled]=\"!hasArchivePermission\">\n    <mat-icon color=\"warn\">delete_outline</mat-icon> <span>Delete</span>\n  </button>\n</mat-menu>",
                 styles: [":host::ng-deep .folder{width:180px;height:50px;display:flex;position:relative;align-items:center;padding:5px 20px 5px 10px;border-radius:10px;cursor:pointer;transition:.3s}:host::ng-deep .folder:hover{background-color:#f1f1f1}:host::ng-deep .folder:hover .folder__action{display:block}:host::ng-deep .folder__icon{display:flex;align-items:center;color:#6fc0ff;font-size:38px;margin-right:20px}:host::ng-deep .folder__name{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .folder__action{display:none;right:0;position:absolute;color:#979797;transition:.3s}:host::ng-deep .folder__action:hover{color:#000}"]
             }] }
 ];
@@ -2981,10 +3044,21 @@ class FolderListComponent {
         this.hasModifyPermission = true;
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
+        this.onPageChange = new EventEmitter();
         this.loading = false;
         this.unsubscribe$ = new Subject$1();
         this.bindSubscriber();
     }
+    /**
+     * @return {?}
+     */
+    ngOnChanges() {
+        if (this.paginator && this.pagination) {
+            this.paginator.pageIndex = this.pagination.pageIndex;
+            this.paginator.pageSize = this.pagination.pageSize;
+            this.paginator.length = this.pagination.length;
+        }
+    }
     /**
      * @return {?}
      */
@@ -2996,6 +3070,13 @@ class FolderListComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
+    /**
+     * @param {?=} event
+     * @return {?}
+     */
+    pageChange(event) {
+        this.onPageChange.emit(event);
+    }
     /**
      * @private
      * @return {?}
@@ -3019,8 +3100,8 @@ class FolderListComponent {
 FolderListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-folder-list',
-                template: "<div class=\"folder-container\">\n  <h6>Folders</h6>\n  <div class=\"folder-list custom-scrollbar\">\n    <lib-folder-item\n      *ngFor=\"let folder of folders\"\n      [folder]=\"folder\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-folder-item>\n  </div>\n  <div class=\"folder-empty\" *ngIf=\"folders && !folders.length\">\n    <span>This folder is empty.</span>\n  </div>\n</div>\n",
-                styles: [":host::ng-deep .folder-container h6{color:#979797}:host::ng-deep .folder-container .folder-list{display:flex;flex-wrap:nowrap;overflow:auto;padding-bottom:10px}:host::ng-deep .folder-container .folder-empty{text-align:center;color:#979797;font-size:14px}"]
+                template: "<div  class=\"folder-container\">\n  <h6>Folders</h6>\n  <div class=\"folder-list custom-scrollbar\">\n    <lib-folder-item\n      *ngFor=\"let folder of folders\"\n      [folder]=\"folder\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-folder-item>\n  </div>\n  <div class=\"folder-empty\" *ngIf=\"folders && !folders.length\">\n    <span>This folder is empty.</span>\n  </div>\n  <div [hidden]=\"!folders?.length\">\n    <mat-paginator\n      #paginator\n      [pageSizeOptions]=\"[10, 20, 50, 100]\"\n      (page)=\"pageChange($event)\"\n      [showFirstLastButtons]=\"true\"\n    >\n    </mat-paginator>\n  </div>\n</div>",
+                styles: [":host::ng-deep .folder-container h6{color:#979797}:host::ng-deep .folder-container .folder-list{display:flex;flex-wrap:wrap;overflow:auto;padding-bottom:10px;max-height:320px}:host::ng-deep .folder-container .folder-empty{text-align:center;color:#979797;font-size:14px}"]
             }] }
 ];
 /** @nocollapse */
@@ -3029,7 +3110,10 @@ FolderListComponent.propDecorators = {
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }],
-    folders: [{ type: Input }]
+    paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
+    folders: [{ type: Input }],
+    pagination: [{ type: Input }],
+    onPageChange: [{ type: Output }]
 };
 if (false) {
     /** @type {?} */
@@ -3039,8 +3123,14 @@ if (false) {
     /** @type {?} */
     FolderListComponent.prototype.hasArchivePermission;
     /** @type {?} */
+    FolderListComponent.prototype.paginator;
+    /** @type {?} */
     FolderListComponent.prototype.folders;
     /** @type {?} */
+    FolderListComponent.prototype.pagination;
+    /** @type {?} */
+    FolderListComponent.prototype.onPageChange;
+    /** @type {?} */
     FolderListComponent.prototype.loading;
     /**
      * @type {?}
@@ -3281,7 +3371,7 @@ AssetListComponent.propDecorators = {
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }],
-    paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
+    paginator: [{ type: ViewChild, args: [MatPaginator$1, { static: true },] }],
     assets: [{ type: Input }]
 };
 if (false) {
@@ -3439,7 +3529,6 @@ class AssetDialogComponent {
      * @return {?}
      */
     ngOnInit() {
-        console.log('data', this.data.permission);
         this.uploadAssetsService.supportedSize = this.assetsService.maxSize * 1024 * 1024;
         this.linkDownload = `${this._env.asset2Url}/File/Download/${this.data.assetId}`;
         this.getAssetDetail();
@@ -4249,17 +4338,22 @@ if (false) {
  */
 class NodeTreeComponent {
     /**
+     * @param {?} assetService
      * @param {?} nodeTreeService
      * @param {?} svc
      * @param {?} changeDetectorRef
      */
-    constructor(nodeTreeService, svc, changeDetectorRef) {
+    constructor(assetService, nodeTreeService, svc, changeDetectorRef) {
+        this.assetService = assetService;
         this.nodeTreeService = nodeTreeService;
         this.svc = svc;
         this.changeDetectorRef = changeDetectorRef;
+        this.ROOT_ASSET_ID = ROOT_ASSET_ID;
         this.isRoot = false;
         this.homeLoading = false;
         this.loading = false;
+        this.loadingMoreList = {};
+        this.folderChildrenMap = new Map();
         this.unsubscribe$ = new Subject();
         this.getLevel = (/**
          * @param {?} node
@@ -4280,6 +4374,17 @@ class NodeTreeComponent {
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
         this.dataSource = new NodeTreeDataSource(this.treeControl, nodeTreeService);
     }
+    /**
+     * @return {?}
+     */
+    get folderTreeMeta() {
+        /** @type {?} */
+        const rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
+        return {
+            length: rootFolder ? rootFolder.size : 0,
+            total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || '0' : 0,
+        };
+    }
     /**
      * @return {?}
      */
@@ -4297,6 +4402,24 @@ class NodeTreeComponent {
             this.changeDetectorRef.detectChanges();
         });
     }
+    /**
+     * @param {?} id
+     * @return {?}
+     */
+    getFolderChildrenSize(id) {
+        /** @type {?} */
+        const children = this.folderChildrenMap.get(id);
+        return children ? children.size : 0;
+    }
+    /**
+     * @param {?} node
+     * @return {?}
+     */
+    canLoadMore(node) {
+        /** @type {?} */
+        const size = this.getFolderChildrenSize(node.item.AssetId);
+        return size < node.item.TotalFolder;
+    }
     /**
      * @private
      * @return {?}
@@ -4337,6 +4460,7 @@ class NodeTreeComponent {
          */
         (data) => {
             if (data && data.length) {
+                this.handleDatasourceChange(data);
                 this.changeDetectorRef.detectChanges();
             }
         }));
@@ -4377,6 +4501,35 @@ class NodeTreeComponent {
             this.changeDetectorRef.detectChanges();
         })));
     }
+    /**
+     * @private
+     * @param {?=} data
+     * @return {?}
+     */
+    handleDatasourceChange(data = []) {
+        if (!data || !data.length)
+            return;
+        /** @type {?} */
+        const maps = new Map();
+        maps.set(ROOT_ASSET_ID, new Map());
+        data.forEach((/**
+         * @param {?} node
+         * @return {?}
+         */
+        (node) => {
+            /** @type {?} */
+            const nodeId = node.item.AssetId;
+            /** @type {?} */
+            const parent = this.getParent(node);
+            /** @type {?} */
+            const 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 {?}
@@ -4411,6 +4564,58 @@ class NodeTreeComponent {
             });
         }
     }
+    /**
+     * @param {?=} node
+     * @return {?}
+     */
+    loadMoreFolder(node) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const id = node ? node.item.AssetId : ROOT_ASSET_ID;
+            try {
+                this.setLoadingMore(id, true);
+                /** @type {?} */
+                const children = this.folderChildrenMap.get(id);
+                /** @type {?} */
+                const itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
+                /** @type {?} */
+                const result = yield this.assetService.getChildrenFolders({
+                    assetId: id === ROOT_ASSET_ID ? null : id,
+                    isFilter: false,
+                    pageIndex: Math.round((children ? children.size : 0) / itemsPerPage)
+                }).toPromise();
+                /** @type {?} */
+                const assetChildren = result.Data.Children || [];
+                // Handle datasource
+                /** @type {?} */
+                const index = this.dataSource.data.indexOf(node);
+                /** @type {?} */
+                const nodes = assetChildren.map((/**
+                 * @param {?} folder
+                 * @return {?}
+                 */
+                (folder) => {
+                    this.nodeTreeService.addNode(folder, id);
+                    return this.nodeTreeService.getDynamicFlatNode(folder, node ? node.level + 1 : 0);
+                }));
+                if (id !== ROOT_ASSET_ID) {
+                    /** @type {?} */
+                    const updatedData = this.dataSource.data.slice();
+                    updatedData.splice(index + 1, 0, ...nodes);
+                    this.dataSource.data = updatedData;
+                }
+                else {
+                    this.dataSource.data = [...this.dataSource.data, ...nodes];
+                }
+                this.setLoadingMore(id, false);
+                this.changeDetectorRef.detectChanges();
+            }
+            catch (error) {
+                console.log('Load more folder error', error);
+                this.setLoadingMore(id, false);
+            }
+        });
+    }
     /**
      * @param {?} node
      * @return {?}
@@ -4473,6 +4678,7 @@ class NodeTreeComponent {
                 /** @type {?} */
                 const parent = this.getParent(node);
                 if (parent) {
+                    // Reload parent folder (get children and expand it again)
                     yield this.dataSource.reloadNode(parent);
                     /** @type {?} */
                     const updatedNode = this.getNodeById(id);
@@ -4481,20 +4687,30 @@ class NodeTreeComponent {
                     }
                 }
                 else {
-                    yield this.nodeTreeService.initialData({ dispatchRootId: false });
-                    /** @type {?} */
-                    const updatedNode = this.getNodeById(id);
-                    if (updatedNode) {
-                        yield this.treeControl.expand(updatedNode);
-                    }
+                    // BUG: This will reload the root folder when the user selects a folder from the tree
+                    // await this.nodeTreeService.initialData({ dispatchRootId: false });
+                    // const updatedNode = this.getNodeById(id);
+                    // if (updatedNode) {
+                    //   await this.treeControl.expand(updatedNode);
+                    // }
                 }
             }
             else {
+                // Reload root folder
                 yield this.nodeTreeService.initialData({ dispatchRootId: false });
             }
             this.loading = false;
         });
     }
+    /**
+     * @private
+     * @param {?} id
+     * @param {?} value
+     * @return {?}
+     */
+    setLoadingMore(id, value) {
+        this.loadingMoreList[id] = value;
+    }
     /**
      * @return {?}
      */
@@ -4508,12 +4724,13 @@ class NodeTreeComponent {
 NodeTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-node-tree',
-                template: "<div class=\"node custom-scrollbar node-tree\">\n  <div class=\"node__home\" (click)=\"backToHome()\" [ngClass]=\"{ active: isRoot,\n    disabled: loading || homeLoading}\">\n    <mat-icon *ngIf=\"!homeLoading\">home</mat-icon>\n    <mat-spinner *ngIf=\"homeLoading\" [diameter]=\"20\"\n      class=\"node__home--loading\"></mat-spinner>\n    <span>Home</span>\n  </div>\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"\n    class=\"node__item\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding\n      [ngClass]=\"{ active: checked(node),disabled: loading || node.isLoading }\"\n      (click)=\"selectNode(node)\">\n      <button mat-icon-button disabled class=\"node__item--pading\"></button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\" *ngIf=\"node.item?.TotalFolder ||\n            node.item?.TotalFile\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n      (click)=\"selectNode(node)\"\n      [ngClass]=\"{ active: checked(node), disabled: loading || node.isLoading\n      }\">\n      <button mat-icon-button [attr.aria-label]=\"'Toggle ' +\n        node.item.OriginalFileName\" matTreeNodeToggle\n        [disabled]=\"node.isLoading\">\n        <mat-icon *ngIf=\"!node.isLoading\" class=\"mat-icon-rtl-mirror\">\n          {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n        </mat-icon>\n        <mat-spinner *ngIf=\"node.isLoading\" [diameter]=\"20\"\n          class=\"node__item--loading\"></mat-spinner>\n      </button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n  </mat-tree>\n</div>",
-                styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display:-ms-grid;display:grid;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content}:host::ng-deep .node__home{padding:8px 10px;display:flex;align-items:center;height:44px}:host::ng-deep .node__home .mat-icon{color:#979797;margin-right:15px;margin-bottom:10px;font-size:32px}:host::ng-deep .node__home .node__home--loading{margin-right:19px}:host::ng-deep .node__item--loading{margin-left:10px}:host::ng-deep .node__item--info{display:flex;align-items:center}:host::ng-deep .node__item--info .folder-icon{display:flex;align-items:center;color:#6fc0ff;font-size:32px;margin-right:20px}:host::ng-deep .node__item--info .node-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name .node-summary{margin-top:-5px;color:#979797}:host::ng-deep .node .mat-tree{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:100%}:host::ng-deep .node .mat-tree .mat-tree-node{padding:5px 0;min-height:44px}:host::ng-deep .node .mat-tree .mat-tree-node .node__item--pading{height:20px}:host::ng-deep .node .mat-tree-node:hover,:host::ng-deep .node .node__home{transition:.3s;cursor:pointer}:host::ng-deep .node .mat-tree-node:hover:hover,:host::ng-deep .node .node__home:hover{background-color:#e8e8e8}:host::ng-deep .node .active{background-color:#f0f0f0}:host::ng-deep .node .disabled{pointer-events:none}"]
+                template: "<div class=\"node custom-scrollbar node-tree\">\n  <div class=\"node__home\" (click)=\"backToHome()\" [ngClass]=\"{ active: isRoot,\n    disabled: loading || homeLoading}\">\n    <mat-icon *ngIf=\"!homeLoading\">home</mat-icon>\n    <mat-spinner *ngIf=\"homeLoading\" [diameter]=\"20\"\n      class=\"node__home--loading\"></mat-spinner>\n    <span>Home</span>\n  </div>\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"\n    class=\"node__item\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding\n      [ngClass]=\"{ active: checked(node),disabled: loading || node.isLoading }\"\n      (click)=\"selectNode(node)\">\n      <button mat-icon-button disabled class=\"node__item--pading\"></button>\n      <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n        <mat-icon class=\"folder-icon\">folder</mat-icon>\n        <div class=\"node-name\">\n          <span>\n            {{ node.item.OriginalFileName }}\n          </span>\n          <span class=\"node-summary\" *ngIf=\"node.item?.TotalFolder ||\n            node.item?.TotalFile\">\n            <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n              {{node.item?.TotalFolder> 1 ?\n              'folders':'folder'}}</small>\n            <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n            </small>\n            <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n              {{node.item?.TotalFile> 1 ?\n              'files':'file'}}</small>\n          </span>\n        </div>\n      </div>\n    </mat-tree-node>\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding \n      [ngClass]=\"{ active: checked(node), disabled: loading || node.isLoading\n      }\">\n      <div class=\"d-flex align-items-center\" (click)=\"selectNode(node)\">\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' +\n          node.item.OriginalFileName\" matTreeNodeToggle\n          [disabled]=\"node.isLoading\">\n          <mat-icon *ngIf=\"!node.isLoading\" class=\"mat-icon-rtl-mirror\">\n            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n          <mat-spinner *ngIf=\"node.isLoading\" [diameter]=\"20\"\n            class=\"node__item--loading\"></mat-spinner>\n        </button>\n        <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n          <mat-icon class=\"folder-icon\">folder</mat-icon>\n          <div class=\"node-name\">\n            <span>\n              {{ node.item.OriginalFileName }}\n            </span>\n            <span class=\"node-summary\">\n              <small *ngIf=\"node.item?.TotalFolder\"><ng-container *ngIf=\"treeControl.isExpanded(node)\"><b>{{getFolderChildrenSize(node.item.AssetId)}}</b>/</ng-container>{{ node.item?.TotalFolder}}\n                {{node.item?.TotalFolder> 1 ?\n                'folders':'folder'}}</small>\n              <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n              </small>\n              <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n                {{node.item?.TotalFile> 1 ?\n                'files':'file'}}</small>\n            </span>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"treeControl.isExpanded(node)\"> \n        <div *ngIf=\"!!loadingMoreList[node.item.AssetId]\" class=\"mx-2\" [style.minWidth.px]=\"40\">\n          <mat-spinner [diameter]=\"20\"\n          class=\"node__item--loading\"></mat-spinner>\n        </div>\n        <button *ngIf=\"!loadingMoreList[node.item.AssetId] && canLoadMore(node)\" matTooltip=\"Load More\" class=\"mx-2\" mat-icon-button (click)=\"loadMoreFolder(node)\" [disabled]=\"loadingMoreList[node.item.AssetId] || homeLoading || loading\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\"><path d=\"m482-200 114-113-114-113-42 42 43 43q-28 1-54.5-9T381-381q-20-20-30.5-46T340-479q0-17 4.5-34t12.5-33l-44-44q-17 25-25 53t-8 57q0 38 15 75t44 66q29 29 65 43.5t74 15.5l-38 38 42 42Zm165-170q17-25 25-53t8-57q0-38-14.5-75.5T622-622q-29-29-65.5-43T482-679l38-39-42-42-114 113 114 113 42-42-44-44q27 0 55 10.5t48 30.5q20 20 30.5 46t10.5 52q0 17-4.5 34T603-414l44 44ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n        </button>\n      </ng-container>\n    </mat-tree-node>\n  </mat-tree>\n  <div class=\"p-2 d-flex flex-column align-items-center justify-content-center\" *ngIf=\"folderTreeMeta.length\">\n    <button mat-raised-button *ngIf=\"folderTreeMeta.length !== folderTreeMeta.total\" (click)=\"loadMoreFolder()\" [disabled]=\"loadingMoreList[ROOT_ASSET_ID] || loading || homeLoading\">\n      <div class=\"d-flex align-items-center\">\n        <mat-spinner [diameter]=\"20\" *ngIf=\"loadingMoreList[ROOT_ASSET_ID]\"></mat-spinner>\n        <mat-icon *ngIf=\"!loadingMoreList[ROOT_ASSET_ID]\">expand_more</mat-icon>\n        <div class=\"ml-2\">Load More</div>\n      </div>\n    </button>\n    <div class=\"mt-2\" [style.fontSize.px]=\"13\"><b>{{ folderTreeMeta.length }}</b> of <b>{{ folderTreeMeta.total }} folders</b></div>\n  </div>\n</div>",
+                styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display:-ms-grid;display:grid;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content}:host::ng-deep .node-tree{max-height:max(800px,90vh);overflow-y:auto}:host::ng-deep .node__home{padding:8px 10px;display:flex;align-items:center;height:44px}:host::ng-deep .node__home .mat-icon{color:#979797;margin-right:15px;margin-bottom:10px;font-size:32px}:host::ng-deep .node__home .node__home--loading{margin-right:19px}:host::ng-deep .node__item--loading{margin-left:10px}:host::ng-deep .node__item--info{display:flex;align-items:center}:host::ng-deep .node__item--info .folder-icon{display:flex;align-items:center;color:#6fc0ff;font-size:32px;margin-right:20px}:host::ng-deep .node__item--info .node-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name .node-summary{margin-top:-5px;color:#979797}:host::ng-deep .node .mat-tree{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:100%}:host::ng-deep .node .mat-tree .mat-tree-node{padding:5px 0;min-height:44px}:host::ng-deep .node .mat-tree .mat-tree-node .node__item--pading{height:20px}:host::ng-deep .node .mat-tree-node:hover,:host::ng-deep .node .node__home{transition:.3s;cursor:pointer}:host::ng-deep .node .mat-tree-node:hover:hover,:host::ng-deep .node .node__home:hover{background-color:#e8e8e8}:host::ng-deep .node .active{background-color:#f0f0f0}:host::ng-deep .node .disabled{pointer-events:none}"]
             }] }
 ];
 /** @nocollapse */
 NodeTreeComponent.ctorParameters = () => [
+    { type: AssetService },
     { type: NodeTreeService },
     { type: AssetManagementService },
     { type: ChangeDetectorRef }
@@ -4525,6 +4742,8 @@ if (false) {
     /** @type {?} */
     NodeTreeComponent.prototype.width;
     /** @type {?} */
+    NodeTreeComponent.prototype.ROOT_ASSET_ID;
+    /** @type {?} */
     NodeTreeComponent.prototype.currentFolderId;
     /** @type {?} */
     NodeTreeComponent.prototype.isRoot;
@@ -4533,9 +4752,13 @@ if (false) {
     /** @type {?} */
     NodeTreeComponent.prototype.loading;
     /** @type {?} */
+    NodeTreeComponent.prototype.loadingMoreList;
+    /** @type {?} */
     NodeTreeComponent.prototype.treeControl;
     /** @type {?} */
     NodeTreeComponent.prototype.dataSource;
+    /** @type {?} */
+    NodeTreeComponent.prototype.folderChildrenMap;
     /**
      * @type {?}
      * @private
@@ -4547,6 +4770,8 @@ if (false) {
     NodeTreeComponent.prototype.isExpandable;
     /** @type {?} */
     NodeTreeComponent.prototype.hasChild;
+    /** @type {?} */
+    NodeTreeComponent.prototype.assetService;
     /**
      * @type {?}
      * @private
@@ -4772,7 +4997,7 @@ class SearchBoxComponent {
          * @return {?}
          */
         ([folders, assets]) => {
-            this.assetService.setFolderList(folders.Data, folders.Meta.Total);
+            this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
             this.assetService.setAssetList(assets.Data.Children, assets.Meta);
         }))
             .add((/**
@@ -4937,16 +5162,9 @@ class AssetWrapperComponent {
         this.hasArchivePermission = true;
         this.assets = new EventEmitter();
         this.unsubscribe$ = new Subject$1();
-        this.nodeTreeMinWidth = 250;
+        this.nodeTreeMinWidth = 300;
         this.nodeTreeMaxWidth = 700;
     }
-    /**
-     * @return {?}
-     */
-    ngOnChanges() {
-        console.log('modify', this.hasModifyPermission);
-        console.log('archive', this.hasArchivePermission);
-    }
     /**
      * @return {?}
      */
@@ -5284,17 +5502,20 @@ class NodeDetailsComponent {
             type: ActionTypes.SET_GLOBAL_LOADING,
             payload: true,
         });
+        const { pageIndex, pageSize } = this.getFolderPagePagination();
         this.assetService
-            .getChildrenFolders({ assetId: id })
+            .getChildrenFolders({ assetId: id, pageIndex, pageSize })
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((/**
          * @param {?} res
          * @return {?}
          */
         (res) => {
-            this.assetService.setFolderList(res.Data, res.Meta.Total);
-            if (res.Data && res.Data.Children) {
-                res.Data.Children.forEach((/**
+            const { Data } = res;
+            const { Children } = Data;
+            this.setFolderList(res);
+            if (Children) {
+                Children.forEach((/**
                  * @param {?} node
                  * @return {?}
                  */
@@ -5311,6 +5532,18 @@ class NodeDetailsComponent {
             });
         }));
     }
+    /**
+     * @private
+     * @param {?} res
+     * @return {?}
+     */
+    setFolderList(res) {
+        const { Data, Meta } = res;
+        const { TotalFolder } = Data;
+        const { PageIndex, PageSize } = Meta;
+        this.assetService.setFolderList(Data, { Total: TotalFolder, PageIndex, PageSize });
+        this.setFolderPagination({ length: TotalFolder, pageIndex: PageIndex, pageSize: PageSize });
+    }
     /**
      * @private
      * @param {?} id
@@ -5321,8 +5554,9 @@ class NodeDetailsComponent {
             type: ActionTypes.SET_GLOBAL_LOADING,
             payload: true,
         });
+        const { pageIndex, pageSize } = this.getFolderPagePagination();
         combineLatest([
-            this.assetService.getChildrenFolders({ assetId: id }),
+            this.assetService.getChildrenFolders({ assetId: id, pageIndex, pageSize }),
             this.assetService.getChildrenAssets({
                 assetId: id,
             }),
@@ -5332,11 +5566,11 @@ class NodeDetailsComponent {
          * @param {?} __0
          * @return {?}
          */
-        ([folders, assets]) => {
-            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((/**
+        ([foldersRes, assetsRes]) => {
+            this.setFolderList(foldersRes);
+            this.assetService.setAssetList(assetsRes.Data.Children, assetsRes.Meta);
+            if (foldersRes.Data && foldersRes.Data.Children) {
+                foldersRes.Data.Children.forEach((/**
                  * @param {?} node
                  * @return {?}
                  */
@@ -5353,6 +5587,40 @@ class NodeDetailsComponent {
             });
         }));
     }
+    /**
+     * @return {?}
+     */
+    getFolderPagePagination() {
+        return {
+            pageIndex: this.assetService.pageFolderIndex,
+            pageSize: this.assetService.pageFolderSize,
+            length: this.assetService.folderTotal,
+        };
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    onFolderPageChange(event) {
+        this.assetService.pageFolderIndex = event.pageIndex;
+        this.assetService.pageFolderSize = event.pageSize;
+        this.fetchFolder(this.currentFolder.AssetId);
+    }
+    /**
+     * @private
+     * @param {?} pagination
+     * @return {?}
+     */
+    setFolderPagination(pagination) {
+        if (!pagination)
+            return;
+        const { length, pageIndex, pageSize } = pagination;
+        this.folderPagination = {
+            pageIndex,
+            pageSize,
+            length
+        };
+    }
     /**
      * @return {?}
      */
@@ -5380,7 +5648,7 @@ class NodeDetailsComponent {
 NodeDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-node-details',
-                template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-folder-list>\n      <lib-asset-list\n        [assets]=\"assets\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-asset-list>\n    </ng-template>\n  </div>\n</div>",
+                template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [pagination]=\"folderPagination\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n        (onPageChange)=\"onFolderPageChange($event)\"\n      ></lib-folder-list>\n      <lib-asset-list\n        [assets]=\"assets\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      ></lib-asset-list>\n    </ng-template>\n  </div>\n</div>",
                 styles: [":host::ng-deep .node-details{max-height:100%;overflow-y:auto}:host::ng-deep .node-details .node-header{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:20}:host::ng-deep .node-details .node-header-content{padding:10px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}:host::ng-deep .node-details .node-header-content__left--title{margin-bottom:5px}:host::ng-deep .node-details .node-header-content__left--title span{color:#fb3458}:host::ng-deep .node-details .node-header-content__left--subtitle{margin:0;color:#979797;font-size:14px}:host::ng-deep .node-details .node-header-content__right{flex:1}:host::ng-deep .node-details .node-header-content__right .button-wrapper{display:flex;gap:15px;justify-content:flex-end}:host::ng-deep .node-details .node-header-content__right .button-wrapper .count{margin-left:3px}:host::ng-deep .node-details .node-body{padding:0 20px}:host::ng-deep .node-details .node-body__section{display:block;margin-bottom:15px}"]
             }] }
 ];
@@ -5410,6 +5678,8 @@ if (false) {
      */
     NodeDetailsComponent.prototype.unsubscribe$;
     /** @type {?} */
+    NodeDetailsComponent.prototype.folderPagination;
+    /** @type {?} */
     NodeDetailsComponent.prototype.selectedAssets;
     /** @type {?} */
     NodeDetailsComponent.prototype.loading$;