@rs-pk/asset-management 1.0.28 → 1.0.30

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/tree'), require('@angular/material/paginator'), require('@angular/material/table'), require('@angular/material/progress-bar'), require('@angular/material/menu'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/progress-spinner'), require('@angular/common/http'), require('rxjs'), require('rxjs/internal/BehaviorSubject'), require('rxjs/operators'), require('rxjs/internal/Subject'), require('@angular/platform-browser'), require('@angular/material'), require('rxjs/internal/observable/of'), require('@angular/cdk/tree'), require('rxjs/internal/observable/combineLatest'), require('moment')) :
-    typeof define === 'function' && define.amd ? define('@rs-pk/asset-management', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/dialog', '@angular/material/button', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/tree', '@angular/material/paginator', '@angular/material/table', '@angular/material/progress-bar', '@angular/material/menu', '@angular/material/checkbox', '@angular/material/select', '@angular/material/progress-spinner', '@angular/common/http', 'rxjs', 'rxjs/internal/BehaviorSubject', 'rxjs/operators', 'rxjs/internal/Subject', '@angular/platform-browser', '@angular/material', 'rxjs/internal/observable/of', '@angular/cdk/tree', 'rxjs/internal/observable/combineLatest', 'moment'], factory) :
-    (global = global || self, factory((global['rs-pk'] = global['rs-pk'] || {}, global['rs-pk']['asset-management'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.tree, global.ng.material.paginator, global.ng.material.table, global.ng.material['progress-bar'], global.ng.material.menu, global.ng.material.checkbox, global.ng.material.select, global.ng.material['progress-spinner'], global.ng.common.http, global.rxjs, global.rxjs['internal/BehaviorSubject'], global.rxjs.operators, global.rxjs['internal/Subject'], global.ng.platformBrowser, global.ng.material, global.rxjs['internal/observable/of'], global.ng.cdk.tree, global.rxjs['internal/observable/combineLatest'], global.moment_));
-}(this, (function (exports, core, common, forms, dialog, button, input, icon, tooltip, tree, paginator, table, progressBar, menu, checkbox, select$1, progressSpinner, http, rxjs, BehaviorSubject, operators, Subject, platformBrowser, material, of, tree$1, combineLatest, moment_) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/tree'), require('@angular/material/paginator'), require('@angular/material/table'), require('@angular/material/progress-bar'), require('@angular/material/menu'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/progress-spinner'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/platform-browser'), require('@angular/cdk/tree'), require('moment')) :
+    typeof define === 'function' && define.amd ? define('@rs-pk/asset-management', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/dialog', '@angular/material/button', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/tree', '@angular/material/paginator', '@angular/material/table', '@angular/material/progress-bar', '@angular/material/menu', '@angular/material/checkbox', '@angular/material/select', '@angular/material/progress-spinner', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/platform-browser', '@angular/cdk/tree', 'moment'], factory) :
+    (global = global || self, factory((global['rs-pk'] = global['rs-pk'] || {}, global['rs-pk']['asset-management'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.material.button, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.tree, global.ng.material.paginator, global.ng.material.table, global.ng.material.progressBar, global.ng.material.menu, global.ng.material.checkbox, global.ng.material.select, global.ng.material.progressSpinner, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.platformBrowser, global.ng.cdk.tree, global.moment_));
+}(this, (function (exports, core, common, forms, dialog, button, input, icon, tooltip, tree, paginator, table, progressBar, menu, checkbox, select$1, progressSpinner, http, rxjs, operators, platformBrowser, tree$1, moment_) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -225,6 +225,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/models/asset.model.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
@@ -403,6 +404,7 @@
 
     /**
      * @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 () {
@@ -469,6 +471,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/models/file.model.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
@@ -566,6 +569,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/models/node-tree.model.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
@@ -599,16 +603,18 @@
 
     /**
      * @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} */
@@ -630,11 +636,13 @@
 
     /**
      * @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
      */
     /**
@@ -654,6 +662,7 @@
 
     /**
      * @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) {
@@ -706,6 +715,7 @@
 
     /**
      * @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 () {
@@ -809,15 +819,17 @@
         /**
          * @param {?} assets
          * @param {?=} pagination
+         * @param {?=} totalFile
          * @return {?}
          */
         AssetService.prototype.setAssetList = /**
          * @param {?} assets
          * @param {?=} pagination
+         * @param {?=} totalFile
          * @return {?}
          */
-        function (assets, pagination) {
-            this.setPagination(pagination);
+        function (assets, pagination, totalFile) {
+            this.setPagination(pagination, totalFile);
             this.assetList$.next(assets);
         };
         /**
@@ -843,16 +855,18 @@
         /**
          * @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;
             }
@@ -1030,6 +1044,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/asset-management.service.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /** @type {?} */
@@ -1067,7 +1082,7 @@
         ];
         /** @nocollapse */
         AssetManagementService.ctorParameters = function () { return []; };
-        /** @nocollapse */ AssetManagementService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function AssetManagementService_Factory() { return new AssetManagementService(); }, token: AssetManagementService, providedIn: "root" });
+        /** @nocollapse */ AssetManagementService.ɵprov = core.ɵɵdefineInjectable({ factory: function AssetManagementService_Factory() { return new AssetManagementService(); }, token: AssetManagementService, providedIn: "root" });
         return AssetManagementService;
     }());
     if (false) {
@@ -1080,6 +1095,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/store/actions.action.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
@@ -1095,18 +1111,18 @@
     /** @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() {
@@ -1213,6 +1229,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/store/reducer.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
@@ -1270,39 +1287,39 @@
         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:
@@ -1325,20 +1342,22 @@
 
     /**
      * @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.BehaviorSubject([]);
-            this.loading$ = new BehaviorSubject.BehaviorSubject(false);
-            this.initialData$ = new BehaviorSubject.BehaviorSubject([]);
+            this.storedData$ = new rxjs.BehaviorSubject([]);
+            this.loading$ = new rxjs.BehaviorSubject(false);
+            this.initialData$ = new rxjs.BehaviorSubject([]);
         }
         Object.defineProperty(NodeTreeService.prototype, "data", {
             get: /**
@@ -1360,21 +1379,25 @@
         /**
          * @private
          * @param {?} id
+         * @param {?=} pageSize
          * @return {?}
          */
         NodeTreeService.prototype.fetchChildrenFolder = /**
          * @private
          * @param {?} id
+         * @param {?=} pageSize
          * @return {?}
          */
-        function (id) {
+        function (id, pageSize) {
             return __awaiter(this, void 0, void 0, function () {
                 var result, err_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, this.assetService.getChildrenFolders({ assetId: id, isFilter: false }).toPromise()];
+                            return [4 /*yield*/, this.assetService
+                                    .getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
+                                    .toPromise()];
                         case 1:
                             result = _a.sent();
                             if (result) {
@@ -1458,17 +1481,19 @@
         };
         /**
          * @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()];
                     }
                 });
@@ -1508,7 +1533,7 @@
              */
             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;
         };
@@ -1614,6 +1639,7 @@
 
     /**
      * @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 () {
@@ -1814,6 +1840,7 @@
 
     /**
      * @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 () {
@@ -1936,11 +1963,13 @@
 
     /**
      * @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 () {
@@ -1948,7 +1977,7 @@
             this.data = data;
             this.dialogRef = dialogRef;
             this.assetService = assetService;
-            this.destroy$ = new Subject.Subject();
+            this.destroy$ = new rxjs.Subject();
             this.selectedAssets = [];
         }
         /**
@@ -2024,7 +2053,7 @@
         AssetManagementDialogComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-management-dialog',
-                        template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n  <ng-container subtitle>\n    <lib-breadcrumb></lib-breadcrumb>\n  </ng-container>\n  <ng-container headerActions>\n    <lib-search-box></lib-search-box>\n  </ng-container>\n  <ng-container content>\n    <lib-asset-wrapper \n      [header]=\"false\"\n      [hasModifyPermission]=\"data.permission.modify\"\n      [hasAccessPermission]=\"data.permission.access\"\n      [hasArchivePermission]=\"data.permission.archive\"\n    ></lib-asset-wrapper>\n  </ng-container>\n  <ng-container actions>\n    <div class=\"asset-management-dialog__footer\">\n      <div class=\"selected-assets\">\n        <ng-container *ngIf=\"data?.limit\">\n          <span>Selected{{' '}}</span>\n          <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\n            {{selectedAssets?.length}}/{{data?.limit}}\n          </span>\n          <span>\n            {{data?.limit > 1 ? \"assets\": \"asset\"}}\n          </span>\n        </ng-container>\n\n      </div>\n      <div>\n        <button mat-raised-button mat-dialog-close>Cancel</button>\n        <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\n      </div>\n    </div>\n  </ng-container>\n</lib-modal>",
+                        template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n  <ng-container subtitle>\n    <lib-breadcrumb></lib-breadcrumb>\n  </ng-container>\n  <ng-container headerActions>\n    <lib-search-box></lib-search-box>\n  </ng-container>\n  <ng-container content>\n    <lib-asset-wrapper\n      [header]=\"false\"\n      [isDialog]=\"true\"\n      [hasModifyPermission]=\"data.permission.modify\"\n      [hasAccessPermission]=\"data.permission.access\"\n      [hasArchivePermission]=\"data.permission.archive\"\n    ></lib-asset-wrapper>\n  </ng-container>\n  <ng-container actions>\n    <div class=\"asset-management-dialog__footer\">\n      <div class=\"selected-assets\">\n        <ng-container *ngIf=\"data?.limit\">\n          <span>Selected{{' '}}</span>\n          <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\n            {{selectedAssets?.length}}/{{data?.limit}}\n          </span>\n          <span>\n            {{data?.limit > 1 ? \"assets\": \"asset\"}}\n          </span>\n        </ng-container>\n      </div>\n      <div>\n        <button mat-raised-button mat-dialog-close>Cancel</button>\n        <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\n      </div>\n    </div>\n  </ng-container>\n</lib-modal>",
                         styles: [":host::ng-deep .asset-management-dialog__footer{display:flex;width:100%;align-items:center;justify-content:space-between}:host::ng-deep .asset-management-dialog__footer .selected-assets{font-size:14px;color:#979797}:host::ng-deep .asset-management-dialog__footer .selected-assets .count{color:#000}:host::ng-deep .asset-management-dialog__footer .selected-assets .error{color:#f44336}"]
                     }] }
         ];
@@ -2057,6 +2086,7 @@
 
     /**
      * @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 () {
@@ -2232,6 +2262,7 @@
 
     /**
      * @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 () {
@@ -2282,6 +2313,7 @@
 
     /**
      * @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 () {
@@ -2360,6 +2392,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/directives/directives.module.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /** @type {?} */
@@ -2379,6 +2412,7 @@
 
     /**
      * @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 () {
@@ -2432,6 +2466,7 @@
 
     /**
      * @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 () {
@@ -2449,7 +2484,7 @@
             { type: core.Component, args: [{
                         selector: 'lib-modal',
                         template: "<h4 mat-dialog-title *ngIf=\"!customHeader; else customHeaderTemplate\">\n  <div class=\"lib-modal--title\" [title]=\"heading\">\n    {{ heading }}\n  </div>\n  <div class=\"lib-modal--close\">\n    <mat-icon mat-dialog-close>close</mat-icon>\n  </div>\n</h4>\n<ng-template #customHeaderTemplate>\n  <h4 mat-dialog-title>\n    <div class=\"lib-modal--custom-title\">\n      <span>\n        {{ heading }}\n      </span>\n      <div class=\"lib-modal--custom-subtitle\">\n        <ng-content select=\"[subtitle]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"lib-modal--header-actions\">\n      <ng-content select=\"[headerActions]\"></ng-content>\n    </div>\n    <mat-icon mat-dialog-close class=\"mat-dialog-close\">close</mat-icon>\n  </h4>\n</ng-template>\n<mat-dialog-content class=\"custom-scrollbar\">\n  <ng-content select=\"[content]\"></ng-content>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <ng-content select=\"[actions]\"></ng-content>\n</mat-dialog-actions>\n",
-                        styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-webkit-max-content!important;height:-moz-max-content!important;height:max-content!important}}::ng-deep .lib-dialog--large .mat-dialog-actions{padding:12px 0;margin-bottom:-24px!important}"]
+                        styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-moz-max-content!important;height:max-content!important}}::ng-deep .lib-dialog--large .mat-dialog-actions{padding:12px 0;margin-bottom:-24px!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -2469,6 +2504,7 @@
 
     /**
      * @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
@@ -2489,11 +2525,13 @@
 
     /**
      * @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 () {
@@ -2533,6 +2571,7 @@
 
     /**
      * @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 () {
@@ -2734,6 +2773,7 @@
 
     /**
      * @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 () {
@@ -2802,7 +2842,7 @@
             { type: core.Component, args: [{
                         selector: 'lib-file-list',
                         template: "<div class=\"file-list__heading\">\n  <div class=\"file-list__info\">\n    <h4 class=\"file-list__info--title\">\n      <span *ngIf=\"!uploadAssetsService.errorLength\">\n        {{\n          uploadAssetsService?.getFiles?.length -\n            uploadAssetsService.errorLength\n        }}\n        {{ uploadAssetsService?.getFiles?.length > 1 ? 'assets' : 'asset' }}\n        ready to upload\n      </span>\n      <span *ngIf=\"uploadAssetsService.errorLength\">\n        {{ uploadAssetsService.errorLength }}\n        {{ uploadAssetsService.errorLength > 1 ? 'assets' : 'asset' }}\n        invalid, please remove it before upload</span\n      >\n    </h4>\n    <div class=\"file-list__info--desc\">\n      Manage the assets before adding them to the Media Library\n    </div>\n  </div>\n  <lib-input-file\n    [acceptTypes]=\"uploadAssetsService?.supportedTypes?.join(', ')\"\n    (onFileChange)=\"onFileChange($event)\"\n    color=\"primary\"\n  >\n    <span>Add new assets</span>\n  </lib-input-file>\n</div>\n<div class=\"file-list\">\n  <lib-file-item\n    *ngFor=\"let file of uploadAssetsService?.getFiles; let i = index\"\n    [file]=\"file\"\n    (checkError)=\"onEmitError()\"\n    (fileRemove)=\"onDelFile(i)\"\n    (fileChange)=\"onChangeName($event, i)\"\n  ></lib-file-item>\n</div>\n",
-                        styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position:-webkit-sticky;position:sticky;top:0;background-color:#fff}:host::ng-deep .file-list__info--title{font-size:16px;margin-bottom:5px;color:#000}:host::ng-deep lib-file-item{margin-bottom:20px}"]
+                        styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position:sticky;top:0;background-color:#fff}:host::ng-deep .file-list__info--title{font-size:16px;margin-bottom:5px;color:#000}:host::ng-deep lib-file-item{margin-bottom:20px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -2823,6 +2863,7 @@
 
     /**
      * @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 () {
@@ -2919,6 +2960,7 @@
 
     /**
      * @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
      */
     /**
@@ -3076,6 +3118,7 @@
 
     /**
      * @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
      */
     /**
@@ -3238,6 +3281,7 @@
 
     /**
      * @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
      */
     /**
@@ -3385,6 +3429,7 @@
 
     /**
      * @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
      */
     /**
@@ -3501,8 +3546,8 @@
         ];
         /** @nocollapse */
         UploadDialogComponent.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: core.Inject, args: [material.MAT_DIALOG_DATA,] }] },
-            { type: material.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
+            { type: dialog.MatDialogRef },
             { type: core.ChangeDetectorRef },
             { type: UploadAssetsService }
         ]; };
@@ -3533,6 +3578,7 @@
 
     /**
      * @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 () {
@@ -3663,6 +3709,7 @@
 
     /**
      * @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 () {
@@ -3672,7 +3719,7 @@
             this.hasArchivePermission = true;
             this.onPageChange = new core.EventEmitter();
             this.loading = false;
-            this.unsubscribe$ = new Subject.Subject();
+            this.unsubscribe$ = new rxjs.Subject();
             this.bindSubscriber();
         }
         /**
@@ -3753,7 +3800,7 @@
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
-            paginator: [{ type: core.ViewChild, args: [material.MatPaginator, { static: true },] }],
+            paginator: [{ type: core.ViewChild, args: [paginator.MatPaginator, { static: true },] }],
             folders: [{ type: core.Input }],
             pagination: [{ type: core.Input }],
             onPageChange: [{ type: core.Output }]
@@ -3786,6 +3833,7 @@
 
     /**
      * @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 () {
@@ -3796,7 +3844,7 @@
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
             this.backgroundProcessingNum = BackgroudProcessingStatus;
-            this.unsubscribe$ = new Subject.Subject();
+            this.unsubscribe$ = new rxjs.Subject();
             this.selectedAssets = [];
         }
         /**
@@ -3935,7 +3983,7 @@
              * @param {?} res
              * @return {?}
              */
-            function (res) { return of.of(res); })))
+            function (res) { return rxjs.of(res); })))
                 .subscribe((/**
              * @return {?}
              */
@@ -3981,9 +4029,14 @@
              * @return {?}
              */
             function (res) {
-                _this.assetService.setAssetList(res.Data.Children, res.Meta);
-            }))
-                .add((/**
+                /** @type {?} */
+                var pagination = res && res.Meta || {};
+                /** @type {?} */
+                var assets = res && res.Data && res.Data.Children || [];
+                /** @type {?} */
+                var totalFile = res && res.Data && res.Data.TotalFile || 0;
+                _this.assetService.setAssetList(assets, pagination, totalFile);
+            })).add((/**
              * @return {?}
              */
             function () {
@@ -4032,7 +4085,7 @@
         AssetListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-list',
-                        template: "<div class=\"asset-container\">\n  <div class=\"asset-heading\">\n    <h6 class=\"asset-heading__title\">Files</h6>\n    <lib-sort-items\n      [hidden]=\"!assets?.length\"\n      class=\"asset-heading__sort\"\n    ></lib-sort-items>\n  </div>\n  <ng-container *ngIf=\"assets && !assets.length; else assetsTemplate\">\n    <div class=\"asset-empty\">\n      <span>This asset is empty.</span>\n    </div>\n  </ng-container>\n  <ng-template #assetsTemplate>\n    <div class=\"asset-list\">\n      <lib-asset-item\n        class=\"asset-list__item\"\n        *ngFor=\"let asset of assets\"\n        [asset]=\"asset\"\n        (selectAsset)=\"onSelectAsset($event)\"\n        [hasModifyPermission]=\"hasModifyPermission\"\n        [hasAccessPermission]=\"hasAccessPermission\"\n        [hasArchivePermission]=\"hasArchivePermission\"\n      >\n      </lib-asset-item>\n    </div>\n  </ng-template>\n  <div [hidden]=\"!assets?.length\">\n    <mat-paginator\n      #paginator\n      [pageSizeOptions]=\"[12, 24, 60, 120]\"\n      (page)=\"pageChange($event)\"\n      [showFirstLastButtons]=\"true\"\n    >\n    </mat-paginator>\n  </div>\n</div>\n",
+                        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}"]
                     }] }
         ];
@@ -4042,6 +4095,7 @@
             { type: AssetManagementService }
         ]; };
         AssetListComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -4051,6 +4105,8 @@
         return AssetListComponent;
     }());
     if (false) {
+        /** @type {?} */
+        AssetListComponent.prototype.isDialog;
         /** @type {?} */
         AssetListComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -4092,6 +4148,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/pipes/file-size.pipe.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /*
@@ -4153,6 +4210,7 @@
 
     /**
      * @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
      */
     /**
@@ -4576,6 +4634,7 @@
 
     /**
      * @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 () {
@@ -4837,8 +4896,8 @@
         AssetItemComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-item',
-                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\">\n      <button class=\"asset-content__header--button\" mat-raised-button (click)=\"onChange()\">\n        <mat-checkbox\n          class=\"checkbox\"\n          [checked]=\"checkSelectedAsset\"\n        ></mat-checkbox>\n      </button>\n      <button\n        class=\"asset-content__header--button edit-button\"\n        mat-raised-button\n        (click)=\"editAsset()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    <div class=\"asset-content__body\">\n      <ng-container [ngSwitch]=\"asset.FileType\">\n        <ng-container *ngSwitchCase=\"fileType.IMAGE\">\n          <img\n            class=\"image\"\n            [src]=\"asset.UrlThumbnail\"\n            [alt]=\"asset.OriginalFileName\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"\n          />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <mat-icon class=\"icon\">cloud_upload</mat-icon>\n            <span class=\"processing-txt\">Uploading...</span>\n          </div>\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <mat-icon class=\"icon-img\">error_outline</mat-icon>\n            <div class=\"failed-group\">\n              <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\n            </div>\n            <div class=\"btn-failed-group\">\n              <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n              <span class=\"failed-txt mx-1\">or</span>\n              <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"/>\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <mat-icon class=\"icon\">cloud_upload</mat-icon>\n            <span class=\"processing-txt\">Uploading...</span>\n          </div>\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <mat-icon class=\"icon-doc\">error_outline</mat-icon>\n            <div class=\"failed-group\">\n              <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\n            </div>\n            <div class=\"btn-failed-group\">\n              <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n              <span class=\"failed-txt mx-1\">or</span>\n              <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"asset-content__footer\">\n      <div\n        class=\"asset-content__footer--info\"\n        [ngClass]=\"{\n          'file-type__document': asset.FileType === fileType.DOCUMENT\n        }\"\n      >\n        <p\n          class=\"name\"\n          [matTooltip]=\"asset.OriginalFileNameWithoutExtension\"\n          matTooltipClass=\"width-auto\"\n        >\n          {{ asset.OriginalFileNameWithoutExtension }}\n        </p>\n        <p class=\"info\">\n          <span class=\"extension\">{{ asset.Extension }}</span>\n          <span\n            *ngIf=\"\n              asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\n            \"\n          >\n            - {{ asset.Width }}x{{ asset.Height }}</span\n          >\n          <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\n        </p>\n      </div>\n      <div class=\"asset-content__footer--file-type\">\n        <span>{{ asset.FileType }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                        styles: [":host::ng-deep .asset-wrapper{padding:5px}:host::ng-deep .asset-wrapper .asset-content{overflow:hidden;position:relative;border-radius:10px;border:1px solid #d8d8d8;font-size:14px;transition:.3s cubic-bezier(.25,.8,.25,1)}:host::ng-deep .asset-wrapper .asset-content:hover{box-shadow:0 0 8px rgba(0,0,0,.17),0 0 0 rgba(0,0,0,.06)}:host::ng-deep .asset-wrapper .asset-content__header{position:absolute;z-index:1;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px}:host::ng-deep .asset-wrapper .asset-content__header--button{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(0,0,0,.65);background:rgba(255,255,255,.6)}:host::ng-deep .asset-wrapper .asset-content__header--button:hover{background:#fff}:host::ng-deep .asset-wrapper .asset-content__header--button.edit-button{transition:.3s cubic-bezier(.25,.8,.25,1);opacity:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-icon{font-size:22px}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox{pointer-events:none;display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{display:block;margin:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout .mat-checkbox-frame{color:#767676}:host::ng-deep .asset-wrapper .asset-content__body{padding-bottom:66.66%;background:#f1f1f1;position:relative}:host::ng-deep .asset-wrapper .asset-content__body img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .asset-wrapper .asset-content__body img.file{width:75%;height:75%}:host::ng-deep .asset-wrapper .asset-content__body .processing{background-color:#f1f1f1;width:100%;height:100%}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon{position:absolute;top:30%;left:42%;font-size:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-img{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-doc{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{position:absolute;top:55%;left:35%}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-image{width:27px;height:27px;-o-object-fit:contain;object-fit:contain}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{position:absolute;top:55%;left:20%}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{position:absolute;top:70%;left:10%;font-size:12px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .failed-txt{color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload{font-size:9px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed{font-size:9px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload:hover{opacity:.8}:host::ng-deep .asset-wrapper .asset-content__footer{display:flex;align-items:center;justify-content:space-between;padding:5px 8px}:host::ng-deep .asset-wrapper .asset-content__footer--info{max-width:calc(100% - 50px)}:host::ng-deep .asset-wrapper .asset-content__footer--info p{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .asset-wrapper .asset-content__footer--info .info{font-size:12px;color:#979797}:host::ng-deep .asset-wrapper .asset-content__footer--info .info .extension{text-transform:uppercase}:host::ng-deep .asset-wrapper .asset-content__footer--info.file-type__document{max-width:calc(100% - 70px)}:host::ng-deep .asset-wrapper .asset-content__footer--file-type{border-radius:5px;background-color:#d8d8d8;padding:2px 6px;font-size:12px}:host::ng-deep .asset-wrapper .asset-content:hover .edit-button{opacity:1!important}"]
+                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\">\n      <button class=\"asset-content__header--button\"\n        *ngIf=\"(asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed) || (asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing)\"\n        mat-raised-button (click)=\"onChange()\">\n        <mat-checkbox class=\"checkbox\" [checked]=\"checkSelectedAsset\"></mat-checkbox>\n      </button>\n      <button class=\"asset-content__header--button edit-button\"\n        *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" mat-raised-button\n        (click)=\"editAsset()\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    <div class=\"asset-content__body\">\n      <ng-container [ngSwitch]=\"asset.FileType\">\n        <ng-container *ngSwitchCase=\"fileType.IMAGE\">\n          <img class=\"image\" [src]=\"asset.UrlThumbnail\" [alt]=\"asset.OriginalFileName\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <div class=\"upload-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <div class=\"failed-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n                  file</span>\n              </div>\n              <div class=\"btn-failed-group\">\n                <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n                  (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n                <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n                  (click)=\"onDelete(asset)\">Delete</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\"\n            *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n          <!-- In Processing -->\n          <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n            <div class=\"upload-group\">\n              <div>\n                <mat-icon class=\"processing-icon\"\n                  [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n              </div>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Failed -->\n          <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n            <div class=\"failed-group\">\n              <mat-icon class=\"processing-icon\"\n                [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n              <div>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n                  file</span>\n              </div>\n              <div class=\"btn-failed-group\">\n                <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n                  (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n                <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n                <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n                  (click)=\"onDelete(asset)\">Delete</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div class=\"asset-content__footer\">\n      <div class=\"asset-content__footer--info\" [ngClass]=\"{\n          'file-type__document': asset.FileType === fileType.DOCUMENT\n        }\">\n        <p class=\"name\" [matTooltip]=\"asset.OriginalFileNameWithoutExtension\" matTooltipClass=\"width-auto\">\n          {{ asset.OriginalFileNameWithoutExtension }}\n        </p>\n        <p class=\"info\">\n          <span class=\"extension\">{{ asset.Extension }}</span>\n          <span *ngIf=\"\n              asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\n            \">\n            - {{ asset.Width }}x{{ asset.Height }}</span>\n          <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\n        </p>\n      </div>\n      <div class=\"asset-content__footer--file-type\">\n        <span>{{ asset.FileType }}</span>\n      </div>\n    </div>\n  </div>\n</div>",
+                        styles: [":host::ng-deep .asset-wrapper{padding:5px}:host::ng-deep .asset-wrapper .asset-content{overflow:hidden;position:relative;border-radius:10px;border:1px solid #d8d8d8;font-size:14px;transition:.3s cubic-bezier(.25,.8,.25,1)}:host::ng-deep .asset-wrapper .asset-content:hover{box-shadow:0 0 8px rgba(0,0,0,.17),0 0 0 rgba(0,0,0,.06)}:host::ng-deep .asset-wrapper .asset-content__header{position:absolute;z-index:1;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px}:host::ng-deep .asset-wrapper .asset-content__header--button{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(0,0,0,.65);background:rgba(255,255,255,.6)}:host::ng-deep .asset-wrapper .asset-content__header--button:hover{background:#fff}:host::ng-deep .asset-wrapper .asset-content__header--button.edit-button{transition:.3s cubic-bezier(.25,.8,.25,1);opacity:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-icon{font-size:22px}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox{pointer-events:none;display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{display:block;margin:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout .mat-checkbox-frame{color:#767676}:host::ng-deep .asset-wrapper .asset-content__body{padding-bottom:66.66%;background:#f1f1f1;position:relative}:host::ng-deep .asset-wrapper .asset-content__body img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .asset-wrapper .asset-content__body img.file{width:75%;height:75%}:host::ng-deep .asset-wrapper .asset-content__body .processing{background-color:#f1f1f1;width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-icon{font-size:35px;height:35px;width:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{font-size:17px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-icon-dialog{font-size:24px;height:24px;width:24px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt-dialog{font-size:13px}:host::ng-deep .asset-wrapper .asset-content__body .processing .upload-group{text-align:center}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{text-align:center;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{margin-top:7px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload{font-size:13px;padding:5px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed{font-size:13px;padding:5px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog{font-size:9px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed-dialog{font-size:9px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload:hover{opacity:.8}:host::ng-deep .asset-wrapper .asset-content__footer{display:flex;align-items:center;justify-content:space-between;padding:5px 8px}:host::ng-deep .asset-wrapper .asset-content__footer--info{max-width:calc(100% - 50px)}:host::ng-deep .asset-wrapper .asset-content__footer--info p{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .asset-wrapper .asset-content__footer--info .info{font-size:12px;color:#979797}:host::ng-deep .asset-wrapper .asset-content__footer--info .info .extension{text-transform:uppercase}:host::ng-deep .asset-wrapper .asset-content__footer--info.file-type__document{max-width:calc(100% - 70px)}:host::ng-deep .asset-wrapper .asset-content__footer--file-type{border-radius:5px;background-color:#d8d8d8;padding:2px 6px;font-size:12px}:host::ng-deep .asset-wrapper .asset-content:hover .edit-button{opacity:1!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -4850,6 +4909,7 @@
             { type: core.ChangeDetectorRef }
         ]; };
         AssetItemComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -4859,6 +4919,8 @@
         return AssetItemComponent;
     }());
     if (false) {
+        /** @type {?} */
+        AssetItemComponent.prototype.isDialog;
         /** @type {?} */
         AssetItemComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -4912,6 +4974,7 @@
 
     /**
      * @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 () {
@@ -5030,7 +5093,8 @@
          */
         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) {
@@ -5082,16 +5146,19 @@
         /**
          * 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) {
@@ -5099,7 +5166,7 @@
                             if (!node) {
                                 return [2 /*return*/];
                             }
-                            return [4 /*yield*/, this._database.getChildren(node.item)];
+                            return [4 /*yield*/, this._database.getChildren(node.item, pageSize)];
                         case 1:
                             newNode = _b.sent();
                             index = this.data.indexOf(node);
@@ -5146,11 +5213,13 @@
 
     /**
      * @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 () {
@@ -5194,7 +5263,7 @@
                 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,
@@ -5267,9 +5336,7 @@
          */
         function () {
             var _this = this;
-            this.nodeTreeService.loading$
-                .pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged())
-                .subscribe((/**
+            this.nodeTreeService.loading$.pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged()).subscribe((/**
              * @param {?} loading
              * @return {?}
              */
@@ -5277,9 +5344,7 @@
                 _this.homeLoading = loading;
                 _this.changeDetectorRef.detectChanges();
             }));
-            this.nodeTreeService.initialData$
-                .pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged())
-                .subscribe((/**
+            this.nodeTreeService.initialData$.pipe(operators.takeUntil(this.unsubscribe$), operators.distinctUntilChanged()).subscribe((/**
              * @param {?} data
              * @return {?}
              */
@@ -5294,9 +5359,7 @@
                 function (node) { return _this.nodeTreeService.addNode(node.item, null); }));
                 _this.changeDetectorRef.detectChanges();
             }));
-            this.dataSource.dataChange
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe((/**
+            this.dataSource.dataChange.pipe(operators.takeUntil(this.unsubscribe$)).subscribe((/**
              * @param {?} data
              * @return {?}
              */
@@ -5467,11 +5530,13 @@
                             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 || [];
@@ -5498,7 +5563,7 @@
                             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*/];
@@ -5579,7 +5644,7 @@
          */
         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:
@@ -5588,30 +5653,45 @@
                             }
                             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*/];
                     }
@@ -5647,9 +5727,9 @@
         };
         NodeTreeComponent.decorators = [
             { type: core.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 */
@@ -5717,6 +5797,7 @@
 
     /**
      * @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 () {
@@ -5724,7 +5805,7 @@
             this.nodeTreeService = nodeTreeService;
             this.svc = svc;
             this.changeDetectorRef = changeDetectorRef;
-            this.unsubscribe$ = new Subject.Subject();
+            this.unsubscribe$ = new rxjs.Subject();
             this.currentFolderHierarchy = [];
             this.maximumShownLevel = 3;
             this.bindSubscriber();
@@ -5765,7 +5846,7 @@
              * @param {?} res
              * @return {?}
              */
-            function (res) { return of.of(res); })))
+            function (res) { return rxjs.of(res); })))
                 .subscribe((/**
              * @param {?} currentFolderHierarchy
              * @return {?}
@@ -5851,13 +5932,14 @@
 
     /**
      * @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.Subject();
+            this.destroy$ = new rxjs.Subject();
             this.value = '';
             this.folderId = '';
             this.bindingSubscriber();
@@ -5888,7 +5970,7 @@
              * @param {?} res
              * @return {?}
              */
-            function (res) { return of.of(res); })))
+            function (res) { return rxjs.of(res); })))
                 .subscribe((/**
              * @param {?} currentFolderId
              * @return {?}
@@ -5950,7 +6032,7 @@
                 type: ActionTypes.SET_GLOBAL_LOADING,
                 payload: true,
             });
-            combineLatest.combineLatest([
+            rxjs.combineLatest([
                 this.assetService.getChildrenFolders({ assetId: this.folderId }),
                 this.assetService.getChildrenAssets({
                     assetId: this.folderId,
@@ -5963,11 +6045,16 @@
              * @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 () {
@@ -6025,6 +6112,7 @@
 
     /**
      * @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 () {
@@ -6126,6 +6214,7 @@
 
     /**
      * @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 () {
@@ -6136,7 +6225,7 @@
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
             this.assets = new core.EventEmitter();
-            this.unsubscribe$ = new Subject.Subject();
+            this.unsubscribe$ = new rxjs.Subject();
             this.nodeTreeMinWidth = 300;
             this.nodeTreeMaxWidth = 700;
         }
@@ -6199,7 +6288,7 @@
         AssetWrapperComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-asset-wrapper',
-                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-header\" *ngIf=\"header\">\n    <div class=\"asset-header__left asset-header__title\" #title>\n      <lib-breadcrumb></lib-breadcrumb>\n    </div>\n    <div class=\"asset-header__right asset-header__actions\" #actions>\n      <lib-search-box></lib-search-box>\n    </div>\n  </div>\n  <div class=\"asset-body\">\n    <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n      <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n    </lib-drag-to-resize>\n    <lib-node-details \n      class=\"asset-body__node-details\" \n      [style.maxWidth]=\"nodeDetailsWidth\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-node-details>\n  </div>\n</div>",
+                        template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-header\" *ngIf=\"header\">\n    <div class=\"asset-header__left asset-header__title\" #title>\n      <lib-breadcrumb></lib-breadcrumb>\n    </div>\n    <div class=\"asset-header__right asset-header__actions\" #actions>\n      <lib-search-box></lib-search-box>\n    </div>\n  </div>\n  <div class=\"asset-body\">\n    <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n      <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n    </lib-drag-to-resize>\n    <lib-node-details \n      class=\"asset-body__node-details\"\n      [isDialog]=\"isDialog\"\n      [style.maxWidth]=\"nodeDetailsWidth\"\n      [hasModifyPermission]=\"hasModifyPermission\"\n      [hasAccessPermission]=\"hasAccessPermission\"\n      [hasArchivePermission]=\"hasArchivePermission\"\n    ></lib-node-details>\n  </div>\n</div>",
                         styles: [":host::ng-deep .mat-dialog-title{padding:24px}:host::ng-deep .mat-dialog-title .lib-modal--close{padding:10px;position:absolute;top:10px;right:10px;z-index:1}:host::ng-deep .mat-dialog-actions{padding-left:24px;padding-right:24px}:host::ng-deep .asset-wrapper{display:flex;flex-direction:column;height:100%;width:100%;overflow-x:hidden}:host::ng-deep .asset-wrapper .asset-header{display:flex;padding:20px 15px;border-bottom:1px solid #d8d8d8;justify-content:space-between;align-items:center}:host::ng-deep .asset-wrapper .asset-body{display:flex;align-items:stretch}:host::ng-deep .asset-wrapper .asset-body__node-tree{border-right:1px solid #d8d8d8}:host::ng-deep .asset-wrapper .asset-body__node-details{flex:1}@media screen and (max-width:768px){:host::ng-deep .asset-wrapper .asset-header{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px}:host::ng-deep .asset-wrapper .asset-body{flex-direction:column;justify-content:flex-start}:host::ng-deep .asset-wrapper .asset-body__node-tree{width:100%}:host::ng-deep .asset-wrapper .asset-body__node-details{max-width:100%!important}}::ng-deep .mat-tooltip.width-auto{max-width:100%!important}"]
                     }] }
         ];
@@ -6209,6 +6298,7 @@
         ]; };
         AssetWrapperComponent.propDecorators = {
             header: [{ type: core.Input }],
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }],
@@ -6220,6 +6310,8 @@
         /** @type {?} */
         AssetWrapperComponent.prototype.header;
         /** @type {?} */
+        AssetWrapperComponent.prototype.isDialog;
+        /** @type {?} */
         AssetWrapperComponent.prototype.hasModifyPermission;
         /** @type {?} */
         AssetWrapperComponent.prototype.hasAccessPermission;
@@ -6247,6 +6339,7 @@
 
     /**
      * @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 () {
@@ -6259,9 +6352,9 @@
             this.hasModifyPermission = true;
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
-            this.unsubscribe$ = new Subject.Subject();
+            this.unsubscribe$ = new rxjs.Subject();
             this.selectedAssets = [];
-            this.loading$ = new BehaviorSubject.BehaviorSubject(false);
+            this.loading$ = new rxjs.BehaviorSubject(false);
             this.bindSubscriber();
         }
         /**
@@ -6578,7 +6671,7 @@
                 payload: true,
             });
             var _a = this.getFolderPagePagination(), pageIndex = _a.pageIndex, pageSize = _a.pageSize;
-            combineLatest.combineLatest([
+            rxjs.combineLatest([
                 this.assetService.getChildrenFolders({ assetId: id, pageIndex: pageIndex, pageSize: pageSize }),
                 this.assetService.getChildrenAssets({
                     assetId: id,
@@ -6591,8 +6684,14 @@
              */
             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
@@ -6692,8 +6791,8 @@
         NodeDetailsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-node-details',
-                        template: "<div class=\"node-details custom-scrollbar\">\n  <div class=\"node-header\">\n    <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n    </mat-progress-bar>\n    <div class=\"node-header-content\">\n      <div class=\"node-header-content__left\">\n        <H5 class=\"node-header-content__left--title\">\n          <ng-container *ngIf=\"assetService?.keyword\">\n            Search results for <span>{{ assetService?.keyword }}</span> in\n          </ng-container>\n          {{ currentFolder?.OriginalFileName }}\n        </H5>\n        <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n          {{ assetService?.folderTotal }}\n          {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n          {{ assetService?.fileTotal }}\n          {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n        </p>\n      </div>\n      <div class=\"node-header-content__right\">\n        <div class=\"button-wrapper\">\n          <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n            <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n            <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Upload asset\n          </button>\n          <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n            Add folder\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"node-body\">\n    <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n    <ng-template #contentAsset>\n      <lib-folder-list\n        class=\"node-body__section\"\n        [folders]=\"currentFolder?.Children\"\n        [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 */
@@ -6705,6 +6804,7 @@
             { type: core.ChangeDetectorRef }
         ]; };
         NodeDetailsComponent.propDecorators = {
+            isDialog: [{ type: core.Input }],
             hasModifyPermission: [{ type: core.Input }],
             hasAccessPermission: [{ type: core.Input }],
             hasArchivePermission: [{ type: core.Input }]
@@ -6712,6 +6812,8 @@
         return NodeDetailsComponent;
     }());
     if (false) {
+        /** @type {?} */
+        NodeDetailsComponent.prototype.isDialog;
         /** @type {?} */
         NodeDetailsComponent.prototype.hasModifyPermission;
         /** @type {?} */
@@ -6756,6 +6858,7 @@
 
     /**
      * @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 () {
@@ -6871,28 +6974,88 @@
 
     /**
      * @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 {?} */
@@ -6971,6 +7134,7 @@
 
     /**
      * @fileoverview added by tsickle
+     * Generated from: lib/asset-management.module.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     // SERVICES
@@ -7010,16 +7174,6 @@
         AssetWrapperComponent,
         AssetManagementDialogComponent,
     ];
-    /** @type {?} */
-    var ENTRY_COMPONENTS = [
-        ModalComponent,
-        UploadDialogComponent,
-        AddFolderDialogComponent,
-        EditFolderDialogComponent,
-        DeleteDialogComponent,
-        AssetDialogComponent,
-        AssetManagementDialogComponent,
-    ];
     /**
      * @param {?} config
      * @return {?}
@@ -7091,7 +7245,6 @@
                                 multi: true,
                             }
                         ]),
-                        entryComponents: __spread(ENTRY_COMPONENTS),
                     },] }
         ];
         /** @nocollapse */
@@ -7112,34 +7265,34 @@
     exports.AssetWrapperComponent = AssetWrapperComponent;
     exports.BaseHttpClient = BaseHttpClient;
     exports.BreadcrumbComponent = BreadcrumbComponent;
+    exports.DIRECTIVES = DIRECTIVES;
     exports.DeleteDialogComponent = DeleteDialogComponent;
     exports.DialogTriggerDirective = DialogTriggerDirective;
+    exports.DirectivesModule = DirectivesModule;
+    exports.DndDirective = DndDirective;
+    exports.DragToResizeComponent = DragToResizeComponent;
     exports.EditFolderDialogComponent = EditFolderDialogComponent;
     exports.FileItemComponent = FileItemComponent;
     exports.FileListComponent = FileListComponent;
     exports.FileService = FileService;
+    exports.FileSizePipe = FileSizePipe;
     exports.FolderItemComponent = FolderItemComponent;
     exports.FolderListComponent = FolderListComponent;
     exports.InputFileComponent = InputFileComponent;
+    exports.LocalDatePipe = LocalDatePipe;
+    exports.LocalDateTimePipe = LocalDateTimePipe;
     exports.ModalComponent = ModalComponent;
     exports.NodeDetailsComponent = NodeDetailsComponent;
     exports.NodeTreeComponent = NodeTreeComponent;
     exports.NodeTreeService = NodeTreeService;
     exports.SearchBoxComponent = SearchBoxComponent;
     exports.SearchNotFoundComponent = SearchNotFoundComponent;
+    exports.SortItemsComponent = SortItemsComponent;
     exports.UploadAssetsService = UploadAssetsService;
     exports.UploadDialogComponent = UploadDialogComponent;
     exports.UploadFileComponent = UploadFileComponent;
-    exports.ɵa = DragToResizeComponent;
-    exports.ɵb = FileSizePipe;
-    exports.ɵc = AssetManagementService;
-    exports.ɵd = SortItemsComponent;
-    exports.ɵe = DialogConfig;
-    exports.ɵf = LocalDateTimePipe;
-    exports.ɵg = LocalDatePipe;
-    exports.ɵh = DIRECTIVES;
-    exports.ɵi = DirectivesModule;
-    exports.ɵj = DndDirective;
+    exports.ɵa = AssetManagementService;
+    exports.ɵb = DialogConfig;
 
     Object.defineProperty(exports, '__esModule', { value: true });