npm - @rs-pk/asset-management - Versions diffs - 1.0.28 → 1.0.30 - Mend

@rs-pk/asset-management 1.0.28 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

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

@@ -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 as MatPaginator$1, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatMenuModule } from '@angular/material/menu';
@@ -15,20 +15,16 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSelectModule } from '@angular/material/select';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { HttpClient, HttpHandler, HttpParams, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, Subject, merge, of as of$1 } from 'rxjs';
+import { BehaviorSubject, Subject, of, merge, combineLatest } from 'rxjs';
 import { __awaiter } from 'tslib';
-import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 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, MatPaginator } from '@angular/material';
-import { of } from 'rxjs/internal/observable/of';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { combineLatest } from 'rxjs/internal/observable/combineLatest';
 import * as moment_ from 'moment';
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/asset.model.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -193,6 +189,7 @@ const ROOT_ASSET_ID = 'ROOT';
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/asset-file.model.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetFileUploadModel {
@@ -250,6 +247,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/file.model.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -341,6 +339,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/node-tree.model.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -373,16 +372,18 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/file-type.enum.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @enum {string} */
 const FileTypeEnum = {
-    IMAGE: 'Image',
-    DOCUMENT: 'Document',
+    IMAGE: "Image",
+    DOCUMENT: "Document",
 };
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/sort.enum.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @enum {number} */
@@ -404,11 +405,13 @@ TypeSort[TypeSort.ASC] = 'ASC';
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/models/index.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/env-config.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -428,6 +431,7 @@ const AM_CONFIG = new InjectionToken('asset.man.config.angular');
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/base.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class BaseHttpClient extends HttpClient {
@@ -474,6 +478,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/asset.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetService {
@@ -556,10 +561,11 @@ class AssetService {
     /**
      * @param {?} assets
      * @param {?=} pagination
+     * @param {?=} totalFile
      * @return {?}
      */
-    setAssetList(assets, pagination) {
-        this.setPagination(pagination);
+    setAssetList(assets, pagination, totalFile) {
+        this.setPagination(pagination, totalFile);
         this.assetList$.next(assets);
     }
     /**
@@ -578,11 +584,12 @@ class AssetService {
     /**
      * @private
      * @param {?} pagination
+     * @param {?} totalFile
      * @return {?}
      */
-    setPagination(pagination) {
+    setPagination(pagination, totalFile) {
         if (pagination) {
-            this.fileTotal = pagination.Total;
+            this.fileTotal = totalFile || 0;
             this.pageIndex = pagination.PageIndex;
             this.pageSize = pagination.PageSize;
         }
@@ -736,6 +743,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/asset-management.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
@@ -767,7 +775,7 @@ AssetManagementService.decorators = [
 ];
 /** @nocollapse */
 AssetManagementService.ctorParameters = () => [];
-/** @nocollapse */ AssetManagementService.ngInjectableDef = ɵɵdefineInjectable({ factory: function AssetManagementService_Factory() { return new AssetManagementService(); }, token: AssetManagementService, providedIn: "root" });
+/** @nocollapse */ AssetManagementService.ɵprov = ɵɵdefineInjectable({ factory: function AssetManagementService_Factory() { return new AssetManagementService(); }, token: AssetManagementService, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
@@ -778,6 +786,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/store/actions.action.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -793,18 +802,18 @@ if (false) {
 /** @enum {string} */
 const ActionTypes = {
     // global loading
-    SET_GLOBAL_LOADING: '[LOADING] Set global loading state',
+    SET_GLOBAL_LOADING: "[LOADING] Set global loading state",
     // asset area
-    SET_SELECTED_ASSETS: '[ASSET] Set selected assets',
-    RELOAD_CURRENT_ASSETS: '[ASSET] reload current asset list ',
-    DELETE_ASSET: '[ASSET] delete an asset ',
+    SET_SELECTED_ASSETS: "[ASSET] Set selected assets",
+    RELOAD_CURRENT_ASSETS: "[ASSET] reload current asset list ",
+    DELETE_ASSET: "[ASSET] delete an asset ",
     // folder area
-    SET_CURRENT_FOLDER_ID: '[FOLDER] get current folder id',
-    SET_CURRENT_FOLDER: '[FOLDER] set current folder ',
-    RELOAD_CURRENT_FOLDER: '[FOLDER] reload current folder ',
-    SET_CURRENT_FOLDER_HIERARCHY: '[FOLDER] set current folder hierarchy ',
+    SET_CURRENT_FOLDER_ID: "[FOLDER] get current folder id",
+    SET_CURRENT_FOLDER: "[FOLDER] set current folder ",
+    RELOAD_CURRENT_FOLDER: "[FOLDER] reload current folder ",
+    SET_CURRENT_FOLDER_HIERARCHY: "[FOLDER] set current folder hierarchy ",
     // node area
-    RELOAD_CURRENT_NODE: '[NODE] reload current node ',
+    RELOAD_CURRENT_NODE: "[NODE] reload current node ",
 };
 class SetGlobalLoading {
     constructor() {
@@ -902,6 +911,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/store/reducer.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -959,39 +969,39 @@ const initialReducer = (/**
     (action) => {
         switch (action.type) {
             case ActionTypes.SET_SELECTED_ASSETS:
-                state = Object.assign({}, state, { selectedAssets: action.payload });
+                state = Object.assign(Object.assign({}, state), { selectedAssets: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.SET_GLOBAL_LOADING:
-                state = Object.assign({}, state, { globalLoading: action.payload });
+                state = Object.assign(Object.assign({}, state), { globalLoading: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER:
-                state = Object.assign({}, state, { currentFolder: Object.assign({}, action.payload) });
+                state = Object.assign(Object.assign({}, state), { currentFolder: Object.assign({}, action.payload) });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_FOLDER:
-                state = Object.assign({}, state, { reloadCurrentFolder: !state.reloadCurrentFolder });
+                state = Object.assign(Object.assign({}, state), { reloadCurrentFolder: !state.reloadCurrentFolder });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_ASSETS:
-                state = Object.assign({}, state, { reloadCurrentAssets: !state.reloadCurrentAssets });
+                state = Object.assign(Object.assign({}, state), { reloadCurrentAssets: !state.reloadCurrentAssets });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_NODE:
-                state = Object.assign({}, state, { reloadCurrentNode: !state.reloadCurrentNode });
+                state = Object.assign(Object.assign({}, state), { reloadCurrentNode: !state.reloadCurrentNode });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER_HIERARCHY:
-                state = Object.assign({}, state, { currentFolderHierarchy: [...action.payload] });
+                state = Object.assign(Object.assign({}, state), { currentFolderHierarchy: [...action.payload] });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER_ID:
-                state = Object.assign({}, state, { currentFolderId: action.payload });
+                state = Object.assign(Object.assign({}, state), { currentFolderId: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.DELETE_ASSET:
-                state = Object.assign({}, state, { deletedAssetId: action.payload });
+                state = Object.assign(Object.assign({}, state), { deletedAssetId: action.payload });
                 store.next(state);
                 break;
             default:
@@ -1014,11 +1024,13 @@ const select = (/**
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/store/index.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/node-tree.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class NodeTreeService {
@@ -1029,9 +1041,9 @@ class NodeTreeService {
     constructor(assetService, svc) {
         this.assetService = assetService;
         this.svc = svc;
-        this.storedData$ = new BehaviorSubject$1([]);
-        this.loading$ = new BehaviorSubject$1(false);
-        this.initialData$ = new BehaviorSubject$1([]);
+        this.storedData$ = new BehaviorSubject([]);
+        this.loading$ = new BehaviorSubject(false);
+        this.initialData$ = new BehaviorSubject([]);
     }
     /**
      * @return {?}
@@ -1049,13 +1061,16 @@ class NodeTreeService {
     /**
      * @private
      * @param {?} id
+     * @param {?=} pageSize
      * @return {?}
      */
-    fetchChildrenFolder(id) {
+    fetchChildrenFolder(id, pageSize) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 /** @type {?} */
-                const result = yield this.assetService.getChildrenFolders({ assetId: id, isFilter: false }).toPromise();
+                const result = yield this.assetService
+                    .getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
+                    .toPromise();
                 if (result) {
                     return result.Data;
                 }
@@ -1069,7 +1084,7 @@ class NodeTreeService {
      * @param {?} __0
      * @return {?}
      */
-    initialData({ dispatchRootId, pageSize = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE }) {
+    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);
@@ -1113,11 +1128,12 @@ class NodeTreeService {
     }
     /**
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
-    getChildren(node) {
+    getChildren(node, pageSize) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.fetchChildrenFolder(node.AssetId);
+            return yield this.fetchChildrenFolder(node.AssetId, pageSize);
         });
     }
     /**
@@ -1143,7 +1159,7 @@ class NodeTreeService {
          */
         (node) => node.AssetId === asset.AssetId));
         if (index < 0) {
-            data = [...data, Object.assign({}, asset, { ParentId: parentId ? parentId : null })];
+            data = [...data, Object.assign(Object.assign({}, asset), { ParentId: parentId ? parentId : null })];
         }
         this.data = data;
     }
@@ -1232,6 +1248,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/upload-assets.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UploadAssetsService {
@@ -1405,6 +1422,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/file.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FileService {
@@ -1507,11 +1525,13 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/services/index.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/asset-management-dialog/asset-management-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetManagementDialogComponent {
@@ -1524,7 +1544,7 @@ class AssetManagementDialogComponent {
         this.data = data;
         this.dialogRef = dialogRef;
         this.assetService = assetService;
-        this.destroy$ = new Subject$1();
+        this.destroy$ = new Subject();
         this.selectedAssets = [];
     }
     /**
@@ -1583,7 +1603,7 @@ class AssetManagementDialogComponent {
 AssetManagementDialogComponent.decorators = [
     { type: 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}"]
             }] }
 ];
@@ -1614,6 +1634,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/asset-management.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetManagementComponent {
@@ -1775,6 +1796,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/directives/dialogTrigger.directive.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class DialogTriggerDirective {
@@ -1820,6 +1842,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/directives/dnd.directive.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class DndDirective {
@@ -1876,6 +1899,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/directives/directives.module.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
@@ -1892,6 +1916,7 @@ DirectivesModule.decorators = [
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/ui/input-file/input-file.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class InputFileComponent {
@@ -1940,6 +1965,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/ui/modal/modal.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ModalComponent {
@@ -1955,7 +1981,7 @@ ModalComponent.decorators = [
     { type: 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 */
@@ -1973,6 +1999,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/contanst/data-image.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 // tslint:disable:max-line-length
@@ -1993,11 +2020,13 @@ const fileDefault = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAA
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/contanst/index.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/ui/search-not-found/search-not-found.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SearchNotFoundComponent {
@@ -2036,6 +2065,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/file-item/file-item.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FileItemComponent {
@@ -2213,6 +2243,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/file-list/file-list.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FileListComponent {
@@ -2265,7 +2296,7 @@ FileListComponent.decorators = [
     { type: 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 */
@@ -2284,6 +2315,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/upload-file/upload-file.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UploadFileComponent {
@@ -2365,6 +2397,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/add-folder-dialog/add-folder-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -2505,6 +2538,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/edit-folder-dialog/edit-folder-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -2650,6 +2684,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/delete-dialog/delete-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -2783,6 +2818,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/upload-dialog/upload-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -2888,8 +2924,8 @@ UploadDialogComponent.decorators = [
 ];
 /** @nocollapse */
 UploadDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA$1,] }] },
-    { type: MatDialogRef$1 },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
+    { type: MatDialogRef },
     { type: ChangeDetectorRef },
     { type: UploadAssetsService }
 ];
@@ -2918,6 +2954,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/folder-item/folder-item.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FolderItemComponent {
@@ -3037,6 +3074,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/folder-list/folder-list.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FolderListComponent {
@@ -3046,7 +3084,7 @@ class FolderListComponent {
         this.hasArchivePermission = true;
         this.onPageChange = new EventEmitter();
         this.loading = false;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.bindSubscriber();
     }
     /**
@@ -3141,6 +3179,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/asset-list/asset-list.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetListComponent {
@@ -3155,7 +3194,7 @@ class AssetListComponent {
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
         this.backgroundProcessingNum = BackgroudProcessingStatus;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.selectedAssets = [];
     }
     /**
@@ -3314,9 +3353,14 @@ class AssetListComponent {
          * @return {?}
          */
         (res) => {
-            this.assetService.setAssetList(res.Data.Children, res.Meta);
-        }))
-            .add((/**
+            /** @type {?} */
+            const pagination = res && res.Meta || {};
+            /** @type {?} */
+            const assets = res && res.Data && res.Data.Children || [];
+            /** @type {?} */
+            const totalFile = res && res.Data && res.Data.TotalFile || 0;
+            this.assetService.setAssetList(assets, pagination, totalFile);
+        })).add((/**
          * @return {?}
          */
         () => {
@@ -3358,7 +3402,7 @@ class AssetListComponent {
 AssetListComponent.decorators = [
     { type: 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",
+                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: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}"]
             }] }
 ];
@@ -3368,13 +3412,16 @@ AssetListComponent.ctorParameters = () => [
     { type: AssetManagementService }
 ];
 AssetListComponent.propDecorators = {
+    isDialog: [{ type: Input }],
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }],
-    paginator: [{ type: ViewChild, args: [MatPaginator$1, { static: true },] }],
+    paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
     assets: [{ type: Input }]
 };
 if (false) {
+    /** @type {?} */
+    AssetListComponent.prototype.isDialog;
     /** @type {?} */
     AssetListComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -3416,6 +3463,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/pipes/file-size.pipe.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /*
@@ -3469,6 +3517,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/asset-dialog/asset-dialog.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -3851,6 +3900,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/asset-item/asset-item.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetItemComponent {
@@ -4081,8 +4131,8 @@ class AssetItemComponent {
 AssetItemComponent.decorators = [
     { type: 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 */
@@ -4094,6 +4144,7 @@ AssetItemComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 AssetItemComponent.propDecorators = {
+    isDialog: [{ type: Input }],
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }],
@@ -4101,6 +4152,8 @@ AssetItemComponent.propDecorators = {
     selectAsset: [{ type: Output }]
 };
 if (false) {
+    /** @type {?} */
+    AssetItemComponent.prototype.isDialog;
     /** @type {?} */
     AssetItemComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -4154,6 +4207,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/datasources/node-tree.datasource.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class NodeTreeDataSource {
@@ -4279,15 +4333,16 @@ class NodeTreeDataSource {
     /**
      * Reload the node, remove from display list
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
-    reloadNode(node) {
+    reloadNode(node, pageSize) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!node) {
                 return;
             }
             /** @type {?} */
-            const newNode = yield this._database.getChildren(node.item);
+            const newNode = yield this._database.getChildren(node.item, pageSize);
             /** @type {?} */
             const index = this.data.indexOf(node);
             if (!newNode || index < 0) {
@@ -4329,11 +4384,13 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/datasources/index.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/node-tree/node-tree.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class NodeTreeComponent {
@@ -4382,7 +4439,7 @@ class NodeTreeComponent {
         const rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
         return {
             length: rootFolder ? rootFolder.size : 0,
-            total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || '0' : 0,
+            total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || "0" : 0,
         };
     }
     /**
@@ -4425,9 +4482,7 @@ class NodeTreeComponent {
      * @return {?}
      */
     bindSubscriber() {
-        this.nodeTreeService.loading$
-            .pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
-            .subscribe((/**
+        this.nodeTreeService.loading$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
          * @param {?} loading
          * @return {?}
          */
@@ -4435,9 +4490,7 @@ class NodeTreeComponent {
             this.homeLoading = loading;
             this.changeDetectorRef.detectChanges();
         }));
-        this.nodeTreeService.initialData$
-            .pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
-            .subscribe((/**
+        this.nodeTreeService.initialData$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
          * @param {?} data
          * @return {?}
          */
@@ -4452,9 +4505,7 @@ class NodeTreeComponent {
             (node) => this.nodeTreeService.addNode(node.item, null)));
             this.changeDetectorRef.detectChanges();
         }));
-        this.dataSource.dataChange
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((/**
+        this.dataSource.dataChange.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
          * @param {?} data
          * @return {?}
          */
@@ -4492,7 +4543,7 @@ class NodeTreeComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => of$1(res))))
+        (res) => of(res))))
             .subscribe((/**
          * @return {?}
          */
@@ -4579,11 +4630,13 @@ class NodeTreeComponent {
                 /** @type {?} */
                 const itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
                 /** @type {?} */
-                const result = yield this.assetService.getChildrenFolders({
+                const result = yield this.assetService
+                    .getChildrenFolders({
                     assetId: id === ROOT_ASSET_ID ? null : id,
                     isFilter: false,
-                    pageIndex: Math.round((children ? children.size : 0) / itemsPerPage)
-                }).toPromise();
+                    pageIndex: Math.round((children ? children.size : 0) / itemsPerPage),
+                })
+                    .toPromise();
                 /** @type {?} */
                 const assetChildren = result.Data.Children || [];
                 // Handle datasource
@@ -4611,7 +4664,7 @@ class NodeTreeComponent {
                 this.changeDetectorRef.detectChanges();
             }
             catch (error) {
-                console.log('Load more folder error', error);
+                console.log("Load more folder error", error);
                 this.setLoadingMore(id, false);
             }
         });
@@ -4679,20 +4732,26 @@ class NodeTreeComponent {
                 const parent = this.getParent(node);
                 if (parent) {
                     // Reload parent folder (get children and expand it again)
-                    yield this.dataSource.reloadNode(parent);
+                    /** @type {?} */
+                    const children = this.folderChildrenMap.get(parent.item.AssetId);
+                    yield this.dataSource.reloadNode(parent, children.size);
                     /** @type {?} */
                     const updatedNode = this.getNodeById(id);
                     if (updatedNode) {
+                        // TODO
                         yield this.treeControl.expand(updatedNode);
                     }
                 }
                 else {
-                    // 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);
-                    // }
+                    /** @type {?} */
+                    const rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
+                    yield this.nodeTreeService.initialData({ dispatchRootId: false, pageSize: rootFolder.size });
+                    /** @type {?} */
+                    const updatedNode = this.getNodeById(id);
+                    if (updatedNode) {
+                        // TODO
+                        yield this.treeControl.expand(updatedNode);
+                    }
                 }
             }
             else {
@@ -4723,9 +4782,9 @@ class NodeTreeComponent {
 }
 NodeTreeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'lib-node-tree',
+                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:-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}"]
+                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 */
@@ -4791,6 +4850,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/breadcrumb/breadcrumb.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class BreadcrumbComponent {
@@ -4803,7 +4863,7 @@ class BreadcrumbComponent {
         this.nodeTreeService = nodeTreeService;
         this.svc = svc;
         this.changeDetectorRef = changeDetectorRef;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.currentFolderHierarchy = [];
         this.maximumShownLevel = 3;
         this.bindSubscriber();
@@ -4904,6 +4964,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/search-box/search-box.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SearchBoxComponent {
@@ -4914,7 +4975,7 @@ class SearchBoxComponent {
     constructor(assetService, svc) {
         this.assetService = assetService;
         this.svc = svc;
-        this.destroy$ = new Subject$1();
+        this.destroy$ = new Subject();
         this.value = '';
         this.folderId = '';
         this.bindingSubscriber();
@@ -4996,11 +5057,16 @@ class SearchBoxComponent {
          * @param {?} __0
          * @return {?}
          */
-        ([folders, assets]) => {
+        ([folders, assetsRes]) => {
+            /** @type {?} */
+            const pagination = assetsRes && assetsRes.Meta || {};
+            /** @type {?} */
+            const assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+            /** @type {?} */
+            const totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
             this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
-            this.assetService.setAssetList(assets.Data.Children, assets.Meta);
-        }))
-            .add((/**
+            this.assetService.setAssetList(assets, pagination, totalFile);
+        })).add((/**
          * @return {?}
          */
         () => {
@@ -5054,6 +5120,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/sort-items/sort-items.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SortItemsComponent {
@@ -5148,6 +5215,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/asset-wrapper/asset-wrapper.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AssetWrapperComponent {
@@ -5161,7 +5229,7 @@ class AssetWrapperComponent {
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
         this.assets = new EventEmitter();
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.nodeTreeMinWidth = 300;
         this.nodeTreeMaxWidth = 700;
     }
@@ -5209,7 +5277,7 @@ class AssetWrapperComponent {
 AssetWrapperComponent.decorators = [
     { type: 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}"]
             }] }
 ];
@@ -5219,6 +5287,7 @@ AssetWrapperComponent.ctorParameters = () => [
 ];
 AssetWrapperComponent.propDecorators = {
     header: [{ type: Input }],
+    isDialog: [{ type: Input }],
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }],
@@ -5228,6 +5297,8 @@ if (false) {
     /** @type {?} */
     AssetWrapperComponent.prototype.header;
     /** @type {?} */
+    AssetWrapperComponent.prototype.isDialog;
+    /** @type {?} */
     AssetWrapperComponent.prototype.hasModifyPermission;
     /** @type {?} */
     AssetWrapperComponent.prototype.hasAccessPermission;
@@ -5255,6 +5326,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/partial/node-details/node-details.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class NodeDetailsComponent {
@@ -5274,9 +5346,9 @@ class NodeDetailsComponent {
         this.hasModifyPermission = true;
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.selectedAssets = [];
-        this.loading$ = new BehaviorSubject$1(false);
+        this.loading$ = new BehaviorSubject(false);
         this.bindSubscriber();
     }
     /**
@@ -5320,7 +5392,7 @@ class NodeDetailsComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => of$1(res))))
+        (res) => of(res))))
             .subscribe((/**
          * @param {?} globalLoading
          * @return {?}
@@ -5352,7 +5424,7 @@ class NodeDetailsComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => of$1(res))))
+        (res) => of(res))))
             .subscribe((/**
          * @param {?} currentFolderId
          * @return {?}
@@ -5372,7 +5444,7 @@ class NodeDetailsComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => of$1(res))))
+        (res) => of(res))))
             .subscribe((/**
          * @return {?}
          */
@@ -5391,7 +5463,7 @@ class NodeDetailsComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => of$1(res))))
+        (res) => of(res))))
             .subscribe((/**
          * @return {?}
          */
@@ -5567,8 +5639,14 @@ class NodeDetailsComponent {
          * @return {?}
          */
         ([foldersRes, assetsRes]) => {
+            /** @type {?} */
+            const pagination = assetsRes && assetsRes.Meta || {};
+            /** @type {?} */
+            const assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+            /** @type {?} */
+            const totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
             this.setFolderList(foldersRes);
-            this.assetService.setAssetList(assetsRes.Data.Children, assetsRes.Meta);
+            this.assetService.setAssetList(assets, pagination, totalFile);
             if (foldersRes.Data && foldersRes.Data.Children) {
                 foldersRes.Data.Children.forEach((/**
                  * @param {?} node
@@ -5648,8 +5726,8 @@ 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        [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}"]
+                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 */
@@ -5661,11 +5739,14 @@ NodeDetailsComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 NodeDetailsComponent.propDecorators = {
+    isDialog: [{ type: Input }],
     hasModifyPermission: [{ type: Input }],
     hasAccessPermission: [{ type: Input }],
     hasArchivePermission: [{ type: Input }]
 };
 if (false) {
+    /** @type {?} */
+    NodeDetailsComponent.prototype.isDialog;
     /** @type {?} */
     NodeDetailsComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -5710,6 +5791,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/components/ui/drag-to-resize/drag-to-resize.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class DragToResizeComponent {
@@ -5805,28 +5887,88 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/configs/admin.config.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 const AdminConfig = {
-    locale: 'en-US',
-    timeZone: 'local',
+    locale: "en-US",
+    countryName: {
+        US: "United States",
+        CA: "Canada",
+    },
     format: {
-        date: 'MM/DD/YYYY',
-        dayMonth: 'MMM DD',
-        dateTime: 'MM/DD/YYYY HH:mm',
-        fullDateTime: 'MM/DD/YYYY HH:mm:ss',
-        dateTimeAM: 'MM/DD/YYYY hh:mm A',
-        apiDate: 'YYYY/MM/DD',
-        apiDateTime: 'YYYY-MM-DD[T]HH:mm:ssZ',
-        apiDateTimeNoZ: 'YYYY-MM-DD[T]HH:mm:ss',
-        apiDateMonthYear: 'MMM DD YYYY',
-        urlParam: 'YYYY-MM-DD',
+        date: "MM/DD/YYYY",
+        dayMonth: "MMM DD",
+        dateTime: "MM/DD/YYYY HH:mm",
+        fullDateTime: "MM/DD/YYYY HH:mm:ss",
+        dateTimeAM: "MM/DD/YYYY hh:mm A",
+        apiDate: "YYYY/MM/DD",
+        apiDateTime: "YYYY-MM-DD[T]HH:mm:ssZ",
+        apiDateTimeNoZ: "YYYY-MM-DD[T]HH:mm:ss",
+        apiDateMonthYear: "MMM DD YYYY",
+        urlParam: "YYYY-MM-DD",
+    },
+    mask: {
+        phone: "(000) 000-0000",
+        date: "M0/d0/0000",
+        zipCode: {
+            US: "00000",
+            CA: "AAA AAA",
+        },
+        money: "0*.00",
+        number: "0*.00",
+        integer: "0*",
+        tax: "00.0000",
+        sku: "0000000000000",
+        upca: "000000000000",
+        pin: "000000",
+        mi9ProductUpc: "00000000000000",
     },
+    regex: {
+        password: "^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}",
+        bigyPassword: "^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$",
+        url: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\.%_~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
+        shortCode: "^[A-Z0-9_]{1,20}$",
+        longCode: "^[A-Z0-9_]{1,100}$",
+        email: /^[\w-\.]+@([\w]+[\.-])+[\w-]{2,}$/,
+        textWithoutSpecialChars: /^[a-zA-Z0-9\. ]+$/,
+        textWithSpecialChars: /^[a-zA-Z0-9_-]+$/,
+        // Allow char '_ -'
+        textWithSpaceAndSpecialChars: /^[a-zA-Z0-9\. /_-]+$/,
+        // Allow space and char '_ - /'
+        address: /^[a-zA-Z0-9][a-zA-Z0-9\_\/\. ]+$/,
+        leadTimeKeyPress: /^[0-9mhdw ]+$/,
+        leadTime: [
+            /^(?:(?<minutes>\d{0,2})m\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<weeks>\d{0,2})w\s*)?$/,
+            /^(?:(?<weeks>\d{0,2})w\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<minutes>\d{0,2})m\s*)?$/,
+        ],
+        userPIN: /^[0-9]{6}$/,
+        storeCode: /^[0-9]{1,10}$/,
+        sku: /^[0-9]{1,14}$/,
+        sku13: /^[0-9]{1,13}$/,
+        keyConfigProvider: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/]*$/,
+        //not allow character '?#%='
+        textNoSpace: /^[a-zA-Z]+$/,
+        textWithSpace: /^(\s+\S+\s*)*(?!\s).*$/,
+        //not allow a string containing only white spaces
+        slug: /^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/,
+        tag: /^[a-zA-Z0-9](-?_?[a-zA-Z0-9])*$/,
+        noSpace: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/\?\=\&\%\#\@]*$/,
+    },
+    pattern: {},
+    pipe: {},
+    pageSizeOptions: [5, 10, 25, 50, 100],
+    maxOrderNumber: 99999,
+    // TinyMCE
+    tinyHeightDefault: "75vh",
+    tinyMCEPluginConfig: "print preview fullpage importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
+    tinyMCEToolbarConfig: "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | fileManagerButton | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor | pagebreak | charmap emoticons | fullscreen  preview save print | image media template link anchor codesample | ltr rtl",
 };
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/pipes/datetime.pipe.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
@@ -5903,6 +6045,7 @@ if (false) {
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/asset-management.module.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 // SERVICES
@@ -5942,16 +6085,6 @@ const COMPONENTS = [
     AssetWrapperComponent,
     AssetManagementDialogComponent,
 ];
-/** @type {?} */
-const ENTRY_COMPONENTS = [
-    ModalComponent,
-    UploadDialogComponent,
-    AddFolderDialogComponent,
-    EditFolderDialogComponent,
-    DeleteDialogComponent,
-    AssetDialogComponent,
-    AssetManagementDialogComponent,
-];
 /**
  * @param {?} config
  * @return {?}
@@ -6026,7 +6159,6 @@ AssetManagementModule.decorators = [
                         multi: true,
                     }
                 ],
-                entryComponents: [...ENTRY_COMPONENTS],
             },] }
 ];
 /** @nocollapse */
@@ -6034,13 +6166,15 @@ AssetManagementModule.ctorParameters = () => [];
 /**
  * @fileoverview added by tsickle
+ * Generated from: public-api.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
+ * Generated from: rs-pk-asset-management.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-export { AMFactory, AM_CONFIG, AddFolderDialogComponent, AssetDialogComponent, AssetItemComponent, AssetListComponent, AssetManagementComponent, AssetManagementDialogComponent, AssetManagementModule, AssetService, AssetWrapperComponent, BaseHttpClient, BreadcrumbComponent, DeleteDialogComponent, DialogTriggerDirective, EditFolderDialogComponent, FileItemComponent, FileListComponent, FileService, FolderItemComponent, FolderListComponent, InputFileComponent, ModalComponent, NodeDetailsComponent, NodeTreeComponent, NodeTreeService, SearchBoxComponent, SearchNotFoundComponent, UploadAssetsService, UploadDialogComponent, UploadFileComponent, DragToResizeComponent as ɵa, FileSizePipe as ɵb, AssetManagementService as ɵc, SortItemsComponent as ɵd, DialogConfig as ɵe, LocalDateTimePipe as ɵf, LocalDatePipe as ɵg, DIRECTIVES as ɵh, DirectivesModule as ɵi, DndDirective as ɵj };
+export { AMFactory, AM_CONFIG, AddFolderDialogComponent, AssetDialogComponent, AssetItemComponent, AssetListComponent, AssetManagementComponent, AssetManagementDialogComponent, AssetManagementModule, AssetService, AssetWrapperComponent, BaseHttpClient, BreadcrumbComponent, DIRECTIVES, DeleteDialogComponent, DialogTriggerDirective, DirectivesModule, DndDirective, DragToResizeComponent, EditFolderDialogComponent, FileItemComponent, FileListComponent, FileService, FileSizePipe, FolderItemComponent, FolderListComponent, InputFileComponent, LocalDatePipe, LocalDateTimePipe, ModalComponent, NodeDetailsComponent, NodeTreeComponent, NodeTreeService, SearchBoxComponent, SearchNotFoundComponent, SortItemsComponent, UploadAssetsService, UploadDialogComponent, UploadFileComponent, AssetManagementService as ɵa, DialogConfig as ɵb };
 //# sourceMappingURL=rs-pk-asset-management.js.map