@rs-pk/asset-management 1.0.28 → 1.0.30

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

@@ -8,7 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { MatPaginator 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';
@@ -16,19 +16,15 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSelectModule } from '@angular/material/select';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { HttpHandler, HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, Subject, merge, of as of$1 } from 'rxjs';
-import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
+import { BehaviorSubject, Subject, of, merge, combineLatest } from 'rxjs';
 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
  */
 /**
@@ -207,6 +203,7 @@ var 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
  */
 var AssetFileUploadModel = /** @class */ (function () {
@@ -273,6 +270,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
  */
 /**
@@ -370,6 +368,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
  */
 /**
@@ -403,16 +402,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} */
 var 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} */
@@ -434,11 +435,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
  */
 /**
@@ -458,6 +461,7 @@ var 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
  */
 var BaseHttpClient = /** @class */ (function (_super) {
@@ -510,6 +514,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
  */
 var AssetService = /** @class */ (function () {
@@ -613,15 +618,17 @@ var AssetService = /** @class */ (function () {
     /**
      * @param {?} assets
      * @param {?=} pagination
+     * @param {?=} totalFile
      * @return {?}
      */
     AssetService.prototype.setAssetList = /**
      * @param {?} assets
      * @param {?=} pagination
+     * @param {?=} totalFile
      * @return {?}
      */
-    function (assets, pagination) {
-        this.setPagination(pagination);
+    function (assets, pagination, totalFile) {
+        this.setPagination(pagination, totalFile);
         this.assetList$.next(assets);
     };
     /**
@@ -647,16 +654,18 @@ var AssetService = /** @class */ (function () {
     /**
      * @private
      * @param {?} pagination
+     * @param {?} totalFile
      * @return {?}
      */
     AssetService.prototype.setPagination = /**
      * @private
      * @param {?} pagination
+     * @param {?} totalFile
      * @return {?}
      */
-    function (pagination) {
+    function (pagination, totalFile) {
         if (pagination) {
-            this.fileTotal = pagination.Total;
+            this.fileTotal = totalFile || 0;
             this.pageIndex = pagination.PageIndex;
             this.pageSize = pagination.PageSize;
         }
@@ -834,6 +843,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 {?} */
@@ -871,7 +881,7 @@ var AssetManagementService = /** @class */ (function () {
     ];
     /** @nocollapse */
     AssetManagementService.ctorParameters = function () { return []; };
-    /** @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" });
     return AssetManagementService;
 }());
 if (false) {
@@ -884,6 +894,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
  */
 /**
@@ -899,18 +910,18 @@ if (false) {
 /** @enum {string} */
 var 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 ",
 };
 var SetGlobalLoading = /** @class */ (function () {
     function SetGlobalLoading() {
@@ -1017,6 +1028,7 @@ if (false) {
 
 /**
  * @fileoverview added by tsickle
+ * Generated from: lib/store/reducer.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
@@ -1074,39 +1086,39 @@ function (dispatcher) {
     function (action) {
         switch (action.type) {
             case ActionTypes.SET_SELECTED_ASSETS:
-                state = __assign({}, state, { selectedAssets: action.payload });
+                state = __assign(__assign({}, state), { selectedAssets: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.SET_GLOBAL_LOADING:
-                state = __assign({}, state, { globalLoading: action.payload });
+                state = __assign(__assign({}, state), { globalLoading: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER:
-                state = __assign({}, state, { currentFolder: __assign({}, action.payload) });
+                state = __assign(__assign({}, state), { currentFolder: __assign({}, action.payload) });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_FOLDER:
-                state = __assign({}, state, { reloadCurrentFolder: !state.reloadCurrentFolder });
+                state = __assign(__assign({}, state), { reloadCurrentFolder: !state.reloadCurrentFolder });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_ASSETS:
-                state = __assign({}, state, { reloadCurrentAssets: !state.reloadCurrentAssets });
+                state = __assign(__assign({}, state), { reloadCurrentAssets: !state.reloadCurrentAssets });
                 store.next(state);
                 break;
             case ActionTypes.RELOAD_CURRENT_NODE:
-                state = __assign({}, state, { reloadCurrentNode: !state.reloadCurrentNode });
+                state = __assign(__assign({}, state), { reloadCurrentNode: !state.reloadCurrentNode });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER_HIERARCHY:
-                state = __assign({}, state, { currentFolderHierarchy: __spread(action.payload) });
+                state = __assign(__assign({}, state), { currentFolderHierarchy: __spread(action.payload) });
                 store.next(state);
                 break;
             case ActionTypes.SET_CURRENT_FOLDER_ID:
-                state = __assign({}, state, { currentFolderId: action.payload });
+                state = __assign(__assign({}, state), { currentFolderId: action.payload });
                 store.next(state);
                 break;
             case ActionTypes.DELETE_ASSET:
-                state = __assign({}, state, { deletedAssetId: action.payload });
+                state = __assign(__assign({}, state), { deletedAssetId: action.payload });
                 store.next(state);
                 break;
             default:
@@ -1129,20 +1141,22 @@ function (mapFn) {
 
 /**
  * @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
  */
 var NodeTreeService = /** @class */ (function () {
     function NodeTreeService(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([]);
     }
     Object.defineProperty(NodeTreeService.prototype, "data", {
         get: /**
@@ -1164,21 +1178,25 @@ var NodeTreeService = /** @class */ (function () {
     /**
      * @private
      * @param {?} id
+     * @param {?=} pageSize
      * @return {?}
      */
     NodeTreeService.prototype.fetchChildrenFolder = /**
      * @private
      * @param {?} id
+     * @param {?=} pageSize
      * @return {?}
      */
-    function (id) {
+    function (id, pageSize) {
         return __awaiter(this, void 0, void 0, function () {
             var result, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.assetService.getChildrenFolders({ assetId: id, isFilter: false }).toPromise()];
+                        return [4 /*yield*/, this.assetService
+                                .getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
+                                .toPromise()];
                     case 1:
                         result = _a.sent();
                         if (result) {
@@ -1262,17 +1280,19 @@ var NodeTreeService = /** @class */ (function () {
     };
     /**
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
     NodeTreeService.prototype.getChildren = /**
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
-    function (node) {
+    function (node, pageSize) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId)];
+                    case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId, pageSize)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });
@@ -1312,7 +1332,7 @@ var NodeTreeService = /** @class */ (function () {
          */
         function (node) { return node.AssetId === asset.AssetId; }));
         if (index < 0) {
-            data = __spread(data, [__assign({}, asset, { ParentId: parentId ? parentId : null })]);
+            data = __spread(data, [__assign(__assign({}, asset), { ParentId: parentId ? parentId : null })]);
         }
         this.data = data;
     };
@@ -1418,6 +1438,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
  */
 var UploadAssetsService = /** @class */ (function () {
@@ -1618,6 +1639,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
  */
 var FileService = /** @class */ (function () {
@@ -1740,11 +1762,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
  */
 var AssetManagementDialogComponent = /** @class */ (function () {
@@ -1752,7 +1776,7 @@ var AssetManagementDialogComponent = /** @class */ (function () {
         this.data = data;
         this.dialogRef = dialogRef;
         this.assetService = assetService;
-        this.destroy$ = new Subject$1();
+        this.destroy$ = new Subject();
         this.selectedAssets = [];
     }
     /**
@@ -1828,7 +1852,7 @@ var AssetManagementDialogComponent = /** @class */ (function () {
     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}"]
                 }] }
     ];
@@ -1861,6 +1885,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
  */
 var AssetManagementComponent = /** @class */ (function () {
@@ -2036,6 +2061,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
  */
 var DialogTriggerDirective = /** @class */ (function () {
@@ -2086,6 +2112,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
  */
 var DndDirective = /** @class */ (function () {
@@ -2164,6 +2191,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 {?} */
@@ -2183,6 +2211,7 @@ var DirectivesModule = /** @class */ (function () {
 
 /**
  * @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
  */
 var InputFileComponent = /** @class */ (function () {
@@ -2236,6 +2265,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
  */
 var ModalComponent = /** @class */ (function () {
@@ -2253,7 +2283,7 @@ var ModalComponent = /** @class */ (function () {
         { 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 */
@@ -2273,6 +2303,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
@@ -2293,11 +2324,13 @@ var fileDefault = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAAD
 
 /**
  * @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
  */
 var SearchNotFoundComponent = /** @class */ (function () {
@@ -2337,6 +2370,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
  */
 var FileItemComponent = /** @class */ (function () {
@@ -2538,6 +2572,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
  */
 var FileListComponent = /** @class */ (function () {
@@ -2606,7 +2641,7 @@ var FileListComponent = /** @class */ (function () {
         { 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 */
@@ -2627,6 +2662,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
  */
 var UploadFileComponent = /** @class */ (function () {
@@ -2723,6 +2759,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
  */
 /**
@@ -2880,6 +2917,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
  */
 /**
@@ -3042,6 +3080,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
  */
 /**
@@ -3189,6 +3228,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
  */
 /**
@@ -3305,8 +3345,8 @@ var UploadDialogComponent = /** @class */ (function () {
     ];
     /** @nocollapse */
     UploadDialogComponent.ctorParameters = function () { return [
-        { 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 }
     ]; };
@@ -3337,6 +3377,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
  */
 var FolderItemComponent = /** @class */ (function () {
@@ -3467,6 +3508,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
  */
 var FolderListComponent = /** @class */ (function () {
@@ -3476,7 +3518,7 @@ var FolderListComponent = /** @class */ (function () {
         this.hasArchivePermission = true;
         this.onPageChange = new EventEmitter();
         this.loading = false;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.bindSubscriber();
     }
     /**
@@ -3590,6 +3632,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
  */
 var AssetListComponent = /** @class */ (function () {
@@ -3600,7 +3643,7 @@ var AssetListComponent = /** @class */ (function () {
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
         this.backgroundProcessingNum = BackgroudProcessingStatus;
-        this.unsubscribe$ = new Subject$1();
+        this.unsubscribe$ = new Subject();
         this.selectedAssets = [];
     }
     /**
@@ -3785,9 +3828,14 @@ var AssetListComponent = /** @class */ (function () {
          * @return {?}
          */
         function (res) {
-            _this.assetService.setAssetList(res.Data.Children, res.Meta);
-        }))
-            .add((/**
+            /** @type {?} */
+            var pagination = res && res.Meta || {};
+            /** @type {?} */
+            var assets = res && res.Data && res.Data.Children || [];
+            /** @type {?} */
+            var totalFile = res && res.Data && res.Data.TotalFile || 0;
+            _this.assetService.setAssetList(assets, pagination, totalFile);
+        })).add((/**
          * @return {?}
          */
         function () {
@@ -3836,7 +3884,7 @@ var AssetListComponent = /** @class */ (function () {
     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}"]
                 }] }
     ];
@@ -3846,15 +3894,18 @@ var AssetListComponent = /** @class */ (function () {
         { 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 }]
     };
     return AssetListComponent;
 }());
 if (false) {
+    /** @type {?} */
+    AssetListComponent.prototype.isDialog;
     /** @type {?} */
     AssetListComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -3896,6 +3947,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
  */
 /*
@@ -3957,6 +4009,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
  */
 /**
@@ -4380,6 +4433,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
  */
 var AssetItemComponent = /** @class */ (function () {
@@ -4641,8 +4695,8 @@ var AssetItemComponent = /** @class */ (function () {
     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 */
@@ -4654,6 +4708,7 @@ var AssetItemComponent = /** @class */ (function () {
         { type: ChangeDetectorRef }
     ]; };
     AssetItemComponent.propDecorators = {
+        isDialog: [{ type: Input }],
         hasModifyPermission: [{ type: Input }],
         hasAccessPermission: [{ type: Input }],
         hasArchivePermission: [{ type: Input }],
@@ -4663,6 +4718,8 @@ var AssetItemComponent = /** @class */ (function () {
     return AssetItemComponent;
 }());
 if (false) {
+    /** @type {?} */
+    AssetItemComponent.prototype.isDialog;
     /** @type {?} */
     AssetItemComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -4716,6 +4773,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
  */
 var NodeTreeDataSource = /** @class */ (function () {
@@ -4834,7 +4892,8 @@ var NodeTreeDataSource = /** @class */ (function () {
      */
     function (node, expand) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, index, newNode, nodes, count, i;
+            var index, newNode, nodes, count, i;
+            var _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -4886,16 +4945,19 @@ var NodeTreeDataSource = /** @class */ (function () {
     /**
      * Reload the node, remove from display list
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
     NodeTreeDataSource.prototype.reloadNode = /**
      * Reload the node, remove from display list
      * @param {?} node
+     * @param {?=} pageSize
      * @return {?}
      */
-    function (node) {
+    function (node, pageSize) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, newNode, index, count, i, nodes;
+            var newNode, index, count, i, nodes;
+            var _a;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -4903,7 +4965,7 @@ var NodeTreeDataSource = /** @class */ (function () {
                         if (!node) {
                             return [2 /*return*/];
                         }
-                        return [4 /*yield*/, this._database.getChildren(node.item)];
+                        return [4 /*yield*/, this._database.getChildren(node.item, pageSize)];
                     case 1:
                         newNode = _b.sent();
                         index = this.data.indexOf(node);
@@ -4950,11 +5012,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
  */
 var NodeTreeComponent = /** @class */ (function () {
@@ -4998,7 +5062,7 @@ var NodeTreeComponent = /** @class */ (function () {
             var 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,
             };
         },
         enumerable: true,
@@ -5071,9 +5135,7 @@ var NodeTreeComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.nodeTreeService.loading$
-            .pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
-            .subscribe((/**
+        this.nodeTreeService.loading$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
          * @param {?} loading
          * @return {?}
          */
@@ -5081,9 +5143,7 @@ var NodeTreeComponent = /** @class */ (function () {
             _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 {?}
          */
@@ -5098,9 +5158,7 @@ var NodeTreeComponent = /** @class */ (function () {
             function (node) { return _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 {?}
          */
@@ -5147,7 +5205,7 @@ var NodeTreeComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) { return of$1(res); })))
+        function (res) { return of(res); })))
             .subscribe((/**
          * @return {?}
          */
@@ -5271,11 +5329,13 @@ var NodeTreeComponent = /** @class */ (function () {
                         this.setLoadingMore(id, true);
                         children = this.folderChildrenMap.get(id);
                         itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
-                        return [4 /*yield*/, this.assetService.getChildrenFolders({
+                        return [4 /*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()];
                     case 2:
                         result = _a.sent();
                         assetChildren = result.Data.Children || [];
@@ -5302,7 +5362,7 @@ var NodeTreeComponent = /** @class */ (function () {
                         return [3 /*break*/, 4];
                     case 3:
                         error_1 = _a.sent();
-                        console.log('Load more folder error', error_1);
+                        console.log("Load more folder error", error_1);
                         this.setLoadingMore(id, false);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -5383,7 +5443,7 @@ var NodeTreeComponent = /** @class */ (function () {
      */
     function (id) {
         return __awaiter(this, void 0, void 0, function () {
-            var node, parent_1, updatedNode;
+            var node, parent_1, children, updatedNode, rootFolder, updatedNode;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -5392,30 +5452,45 @@ var NodeTreeComponent = /** @class */ (function () {
                         }
                         this.loading = true;
                         node = this.getNodeById(id);
-                        if (!node) return [3 /*break*/, 5];
+                        if (!node) return [3 /*break*/, 8];
                         parent_1 = this.getParent(node);
                         if (!parent_1) return [3 /*break*/, 4];
                         // Reload parent folder (get children and expand it again)
-                        return [4 /*yield*/, this.dataSource.reloadNode(parent_1)];
+                        children = this.folderChildrenMap.get(parent_1.item.AssetId);
+                        return [4 /*yield*/, this.dataSource.reloadNode(parent_1, children.size)];
                     case 1:
-                        // Reload parent folder (get children and expand it again)
                         _a.sent();
                         updatedNode = this.getNodeById(id);
                         if (!updatedNode) return [3 /*break*/, 3];
+                        // TODO
                         return [4 /*yield*/, this.treeControl.expand(updatedNode)];
                     case 2:
+                        // TODO
                         _a.sent();
                         _a.label = 3;
-                    case 3: return [3 /*break*/, 4];
-                    case 4: return [3 /*break*/, 7];
-                    case 5: 
+                    case 3: return [3 /*break*/, 7];
+                    case 4:
+                        rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
+                        return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false, pageSize: rootFolder.size })];
+                    case 5:
+                        _a.sent();
+                        updatedNode = this.getNodeById(id);
+                        if (!updatedNode) return [3 /*break*/, 7];
+                        // TODO
+                        return [4 /*yield*/, this.treeControl.expand(updatedNode)];
+                    case 6:
+                        // TODO
+                        _a.sent();
+                        _a.label = 7;
+                    case 7: return [3 /*break*/, 10];
+                    case 8: 
                     // Reload root folder
                     return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
-                    case 6:
+                    case 9:
                         // Reload root folder
                         _a.sent();
-                        _a.label = 7;
-                    case 7:
+                        _a.label = 10;
+                    case 10:
                         this.loading = false;
                         return [2 /*return*/];
                 }
@@ -5451,9 +5526,9 @@ var NodeTreeComponent = /** @class */ (function () {
     };
     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 */
@@ -5521,6 +5596,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
  */
 var BreadcrumbComponent = /** @class */ (function () {
@@ -5528,7 +5604,7 @@ var BreadcrumbComponent = /** @class */ (function () {
         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();
@@ -5655,13 +5731,14 @@ 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
  */
 var SearchBoxComponent = /** @class */ (function () {
     function SearchBoxComponent(assetService, svc) {
         this.assetService = assetService;
         this.svc = svc;
-        this.destroy$ = new Subject$1();
+        this.destroy$ = new Subject();
         this.value = '';
         this.folderId = '';
         this.bindingSubscriber();
@@ -5767,11 +5844,16 @@ var SearchBoxComponent = /** @class */ (function () {
          * @return {?}
          */
         function (_a) {
-            var _b = __read(_a, 2), folders = _b[0], assets = _b[1];
+            var _b = __read(_a, 2), folders = _b[0], assetsRes = _b[1];
+            /** @type {?} */
+            var pagination = assetsRes && assetsRes.Meta || {};
+            /** @type {?} */
+            var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+            /** @type {?} */
+            var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
             _this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
-            _this.assetService.setAssetList(assets.Data.Children, assets.Meta);
-        }))
-            .add((/**
+            _this.assetService.setAssetList(assets, pagination, totalFile);
+        })).add((/**
          * @return {?}
          */
         function () {
@@ -5829,6 +5911,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
  */
 var SortItemsComponent = /** @class */ (function () {
@@ -5930,6 +6013,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
  */
 var AssetWrapperComponent = /** @class */ (function () {
@@ -5940,7 +6024,7 @@ var AssetWrapperComponent = /** @class */ (function () {
         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;
     }
@@ -6003,7 +6087,7 @@ var AssetWrapperComponent = /** @class */ (function () {
     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}"]
                 }] }
     ];
@@ -6013,6 +6097,7 @@ var AssetWrapperComponent = /** @class */ (function () {
     ]; };
     AssetWrapperComponent.propDecorators = {
         header: [{ type: Input }],
+        isDialog: [{ type: Input }],
         hasModifyPermission: [{ type: Input }],
         hasAccessPermission: [{ type: Input }],
         hasArchivePermission: [{ type: Input }],
@@ -6024,6 +6109,8 @@ if (false) {
     /** @type {?} */
     AssetWrapperComponent.prototype.header;
     /** @type {?} */
+    AssetWrapperComponent.prototype.isDialog;
+    /** @type {?} */
     AssetWrapperComponent.prototype.hasModifyPermission;
     /** @type {?} */
     AssetWrapperComponent.prototype.hasAccessPermission;
@@ -6051,6 +6138,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
  */
 var NodeDetailsComponent = /** @class */ (function () {
@@ -6063,9 +6151,9 @@ var NodeDetailsComponent = /** @class */ (function () {
         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();
     }
     /**
@@ -6118,7 +6206,7 @@ var NodeDetailsComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) { return of$1(res); })))
+        function (res) { return of(res); })))
             .subscribe((/**
          * @param {?} globalLoading
          * @return {?}
@@ -6150,7 +6238,7 @@ var NodeDetailsComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) { return of$1(res); })))
+        function (res) { return of(res); })))
             .subscribe((/**
          * @param {?} currentFolderId
          * @return {?}
@@ -6170,7 +6258,7 @@ var NodeDetailsComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) { return of$1(res); })))
+        function (res) { return of(res); })))
             .subscribe((/**
          * @return {?}
          */
@@ -6189,7 +6277,7 @@ var NodeDetailsComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) { return of$1(res); })))
+        function (res) { return of(res); })))
             .subscribe((/**
          * @return {?}
          */
@@ -6395,8 +6483,14 @@ var NodeDetailsComponent = /** @class */ (function () {
          */
         function (_a) {
             var _b = __read(_a, 2), foldersRes = _b[0], assetsRes = _b[1];
+            /** @type {?} */
+            var pagination = assetsRes && assetsRes.Meta || {};
+            /** @type {?} */
+            var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
+            /** @type {?} */
+            var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
             _this.setFolderList(foldersRes);
-            _this.assetService.setAssetList(assetsRes.Data.Children, assetsRes.Meta);
+            _this.assetService.setAssetList(assets, pagination, totalFile);
             if (foldersRes.Data && foldersRes.Data.Children) {
                 foldersRes.Data.Children.forEach((/**
                  * @param {?} node
@@ -6496,8 +6590,8 @@ var NodeDetailsComponent = /** @class */ (function () {
     NodeDetailsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-node-details',
-                    template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [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 */
@@ -6509,6 +6603,7 @@ var NodeDetailsComponent = /** @class */ (function () {
         { type: ChangeDetectorRef }
     ]; };
     NodeDetailsComponent.propDecorators = {
+        isDialog: [{ type: Input }],
         hasModifyPermission: [{ type: Input }],
         hasAccessPermission: [{ type: Input }],
         hasArchivePermission: [{ type: Input }]
@@ -6516,6 +6611,8 @@ var NodeDetailsComponent = /** @class */ (function () {
     return NodeDetailsComponent;
 }());
 if (false) {
+    /** @type {?} */
+    NodeDetailsComponent.prototype.isDialog;
     /** @type {?} */
     NodeDetailsComponent.prototype.hasModifyPermission;
     /** @type {?} */
@@ -6560,6 +6657,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
  */
 var DragToResizeComponent = /** @class */ (function () {
@@ -6675,28 +6773,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 {?} */
 var 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 {?} */
@@ -6775,6 +6933,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
@@ -6814,16 +6973,6 @@ var COMPONENTS = [
     AssetWrapperComponent,
     AssetManagementDialogComponent,
 ];
-/** @type {?} */
-var ENTRY_COMPONENTS = [
-    ModalComponent,
-    UploadDialogComponent,
-    AddFolderDialogComponent,
-    EditFolderDialogComponent,
-    DeleteDialogComponent,
-    AssetDialogComponent,
-    AssetManagementDialogComponent,
-];
 /**
  * @param {?} config
  * @return {?}
@@ -6895,7 +7044,6 @@ var AssetManagementModule = /** @class */ (function () {
                             multi: true,
                         }
                     ]),
-                    entryComponents: __spread(ENTRY_COMPONENTS),
                 },] }
     ];
     /** @nocollapse */
@@ -6905,13 +7053,15 @@ var AssetManagementModule = /** @class */ (function () {
 
 /**
  * @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