@rs-pk/asset-management 1.0.13 → 1.0.14

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

@@ -1,4 +1,4 @@
-import { __extends, __assign, __spread, __awaiter, __generator, __values, __read } from 'tslib';
+import { __extends, __assign, __spread, __awaiter, __generator, __read } from 'tslib';
 import { InjectionToken, Injectable, Inject, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, Directive, HostListener, NgModule, ChangeDetectorRef, ViewChild, Pipe, APP_INITIALIZER } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -1326,8 +1326,7 @@ var UploadAssetsService = /** @class */ (function () {
         this.dialog = dialog;
         this._api = _api;
         this.files = [];
-        this.namesMap = {};
-        this.errorsMap = {};
+        this.fileNames = [];
         this.supportedSize = 10 * 1024 * 1024; // 10MB
         // 10MB
         this.documentExtension = ['.pdf'];
@@ -1344,6 +1343,7 @@ var UploadAssetsService = /** @class */ (function () {
             size: "File size should be upto",
             ext: "Only supported file extension:",
             replace: "The replacement file should be the same extension with old one:",
+            maxLength: "The character limit is 200 characters",
         };
         this.errorObs$ = new BehaviorSubject(true);
         this.baseUrl = this._env.asset2Url;
@@ -1389,54 +1389,18 @@ var UploadAssetsService = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(UploadAssetsService.prototype, "nameFiles", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this.namesMap;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(UploadAssetsService.prototype, "newName", {
-        set: /**
-         * @param {?} newName
-         * @return {?}
-         */
-        function (newName) {
-            this.namesMap = __assign({}, this.namesMap, newName);
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(UploadAssetsService.prototype, "errorFiles", {
         get: /**
          * @return {?}
          */
         function () {
-            return !this.files.length || Object.keys(this.errorsMap).length > 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(UploadAssetsService.prototype, "errors", {
-        set: /**
-         * @param {?} newError
-         * @return {?}
-         */
-        function (newError) {
-            this.errorsMap = __assign({}, this.errorsMap, newError);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(UploadAssetsService.prototype, "fileErrors", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this.errorsMap;
+            /** @type {?} */
+            var invalidFiles = this.fileNames.filter((/**
+             * @param {?} file
+             * @return {?}
+             */
+            function (file) { return !file.valid; }));
+            return this.fileNames.length && invalidFiles.length > 0;
         },
         enumerable: true,
         configurable: true
@@ -1446,30 +1410,26 @@ var UploadAssetsService = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return Object.keys(this.errorsMap).length;
+            return this.fileNames.filter((/**
+             * @param {?} file
+             * @return {?}
+             */
+            function (file) { return !file.valid; })).length;
         },
         enumerable: true,
         configurable: true
     });
     /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
     UploadAssetsService.prototype.deleteFile = /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
-    function (fileName, index) {
-        this.files = this.files.filter((/**
-         * @param {?} _file
-         * @param {?} i
-         * @return {?}
-         */
-        function (_file, i) { return i !== index; }));
-        delete this.namesMap[fileName];
-        delete this.errorsMap[fileName];
+    function (index) {
+        this.files.splice(index, 1);
+        this.fileNames.splice(index, 1);
     };
     /**
      * @param {?} parentAssetId
@@ -1480,34 +1440,23 @@ var UploadAssetsService = /** @class */ (function () {
      * @return {?}
      */
     function (parentAssetId) {
-        var e_1, _a;
-        var _b = this, files = _b.files, namesMap = _b.namesMap;
+        var files = this.files;
+        /** @type {?} */
+        var fileNames = this.fileNames.map((/**
+         * @param {?} file
+         * @return {?}
+         */
+        function (file) { return file.name; }));
         /** @type {?} */
         var formData = new FormData();
         formData.append('parentAssetId', parentAssetId);
         formData.append('companyId', '732DA8D2-04EC-4BE0-A168-63EE0DCF50D8');
-        try {
-            for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
-                var file = files_1_1.value;
-                /** @type {?} */
-                var nameSplit = file.name.split('.');
-                /** @type {?} */
-                var ext = "." + nameSplit.splice(nameSplit.length - 1, 1)[0];
-                /** @type {?} */
-                var originName = file.name;
-                /** @type {?} */
-                var fileName = namesMap[originName]
-                    ? "" + namesMap[originName] + ext
-                    : originName;
-                formData.append('files', file, fileName);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (files_1_1 && !files_1_1.done && (_a = files_1.return)) _a.call(files_1);
-            }
-            finally { if (e_1) throw e_1.error; }
+        for (var i = 0; i < files.length; i++) {
+            /** @type {?} */
+            var nameSplit = files[i].name.split('.');
+            /** @type {?} */
+            var ext = "." + nameSplit.splice(nameSplit.length - 1, 1)[0];
+            formData.append('files', files[i], "" + fileNames[i] + ext);
         }
         return this._api.post(this.baseUrl + "/File/Upload", formData);
     };
@@ -1528,16 +1477,8 @@ if (false) {
      * @private
      */
     UploadAssetsService.prototype.files;
-    /**
-     * @type {?}
-     * @private
-     */
-    UploadAssetsService.prototype.namesMap;
-    /**
-     * @type {?}
-     * @private
-     */
-    UploadAssetsService.prototype.errorsMap;
+    /** @type {?} */
+    UploadAssetsService.prototype.fileNames;
     /** @type {?} */
     UploadAssetsService.prototype.supportedSize;
     /** @type {?} */
@@ -2278,6 +2219,7 @@ var FileItemComponent = /** @class */ (function () {
             ext: '',
             data: null,
             errors: {
+                maxLength: false,
                 ext: false,
                 size: false,
             },
@@ -2290,40 +2232,67 @@ var FileItemComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this.setDataFile(this.file);
+        this.initDataFile();
     };
     /**
      * @private
-     * @param {?} file
      * @return {?}
      */
-    FileItemComponent.prototype.setDataFile = /**
+    FileItemComponent.prototype.initDataFile = /**
      * @private
-     * @param {?} file
      * @return {?}
      */
-    function (file) {
-        var _this = this;
-        var _a;
-        var _b = this.uploadAssetService, supportedTypes = _b.supportedTypes, supportedSize = _b.supportedSize;
+    function () {
+        this.setDetailsFile();
+        this.setErrorFile();
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FileItemComponent.prototype.setDetailsFile = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _a = this.file, name = _a.name, size = _a.size;
+        var files = this.uploadAssetService.getFiles;
         /** @type {?} */
-        var nameSplit = file.name.split('.');
+        var names = files.filter((/**
+         * @param {?} file
+         * @return {?}
+         */
+        function (file) { return file.name === name; }));
+        /** @type {?} */
+        var nameSplit = name.split('.');
+        if (names.length > 1) {
+            nameSplit[0] = nameSplit[0] + "(" + (names.length - 1) + ")";
+        }
         this.dataFile.ext = nameSplit.splice(nameSplit.length - 1, 1)[0];
         this.dataFile.name = nameSplit.join('.');
-        this.dataFile.size = file.size;
+        this.dataFile.size = size;
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FileItemComponent.prototype.setErrorFile = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        var _a = this.uploadAssetService, supportedTypes = _a.supportedTypes, supportedSize = _a.supportedSize, fileNames = _a.fileNames;
+        var _b = this.dataFile, name = _b.name, extFile = _b.ext, sizeFile = _b.size;
         this.dataFile.errors = {
-            ext: supportedTypes.indexOf("." + this.dataFile.ext) < 0,
-            size: supportedSize < this.dataFile.size,
+            maxLength: name.length + extFile.length > 199,
+            ext: supportedTypes.indexOf("." + extFile) < 0,
+            size: supportedSize < sizeFile,
         };
-        var _c = this.dataFile.errors, ext = _c.ext, size = _c.size;
-        if (ext || size) {
-            this.uploadAssetService.errors = (_a = {}, _a[file.name] = true, _a);
-            this.checkError.emit();
-        }
-        if (file.type.indexOf('image') > -1) {
+        if (this.file.type.indexOf('image') > -1) {
             /** @type {?} */
             var reader = new FileReader();
-            reader.readAsDataURL(file);
+            reader.readAsDataURL(this.file);
             reader.onload = (/**
              * @param {?} readerEvent
              * @return {?}
@@ -2340,8 +2309,24 @@ var FileItemComponent = /** @class */ (function () {
                 });
             });
         }
+        fileNames.push({
+            name: name,
+            valid: this.checkErrors()
+        });
         this.uploadAssetService.setErrorObs(this.uploadAssetService.errorFiles);
     };
+    /**
+     * @private
+     * @return {?}
+     */
+    FileItemComponent.prototype.checkErrors = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _a = this.dataFile.errors, ext = _a.ext, size = _a.size, maxLength = _a.maxLength;
+        return (ext || size || maxLength) ? false : true;
+    };
     /**
      * @param {?} event
      * @return {?}
@@ -2352,7 +2337,12 @@ var FileItemComponent = /** @class */ (function () {
      */
     function (event) {
         this.dataFile.name = ((/** @type {?} */ (event.target))).value.trim();
-        this.fileChange.emit(this.dataFile.name);
+        var _a = this.dataFile, name = _a.name, ext = _a.ext;
+        this.dataFile.errors.maxLength = name.length + ext.length > 199;
+        this.fileChange.emit({
+            name: this.dataFile.name,
+            valid: this.checkErrors()
+        });
     };
     /**
      * @return {?}
@@ -2366,7 +2356,7 @@ var FileItemComponent = /** @class */ (function () {
     FileItemComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-file-item',
-                    template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || dataFile.ext === 'pdf';\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"dataFile.ext === 'pdf' || dataFile.data\"\n      [src]=\"dataFile.ext === 'pdf' ? base64Pdf : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['ext'] }}\n    {{ uploadAssetService.supportedTypes.join(', ') }}\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['size'] }}\n    {{ uploadAssetService.supportedSize | fileSize: 0 }}\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
+                    template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || dataFile.ext === 'pdf';\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"dataFile.ext === 'pdf' || dataFile.data\"\n      [src]=\"dataFile.ext === 'pdf' ? base64Pdf : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['ext'] }}\n    {{ uploadAssetService.supportedTypes.join(', ') }}\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['size'] }}\n    {{ uploadAssetService.supportedSize | fileSize: 0 }}\n  </div>\n  <div *ngIf=\"dataFile.errors.maxLength\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['maxLength'] }}\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
                     styles: [":host::ng-deep{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;background-color:#f9f9f9;border-radius:10px}:host::ng-deep .file-item__img{display:flex;justify-content:center;align-items:center;width:250px;height:150px;border-radius:10px}:host::ng-deep .file-item__img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}:host::ng-deep .file-item__img 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 .file-item__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-item__content{flex:1;padding-left:5%;padding-right:5%}:host::ng-deep .file-item__content--name{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px}:host::ng-deep .file-item__content--info{margin-top:10px;display:flex}:host::ng-deep .file-item__content--info__item:not(:last-child){margin-right:50px}:host::ng-deep .file-item__content--info__item span{color:#000;text-transform:uppercase}:host::ng-deep .file-item__error{margin-top:10px;color:#f44336}:host::ng-deep .file-item__action{color:#f44336;cursor:pointer}"]
                 }] }
     ];
@@ -2435,32 +2425,32 @@ var FileListComponent = /** @class */ (function () {
         ((/** @type {?} */ (document.getElementById('file-import')))).value = '';
     };
     /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
     FileListComponent.prototype.onDelFile = /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
-    function (fileName, index) {
-        this.uploadAssetsService.deleteFile(fileName, index);
+    function (index) {
+        this.uploadAssetsService.deleteFile(index);
         this.revalidate.emit(this.uploadAssetsService.errorFiles);
     };
     /**
-     * @param {?} newName
-     * @param {?} originName
+     * @param {?} __0
+     * @param {?} index
      * @return {?}
      */
     FileListComponent.prototype.onChangeName = /**
-     * @param {?} newName
-     * @param {?} originName
+     * @param {?} __0
+     * @param {?} index
      * @return {?}
      */
-    function (newName, originName) {
-        var _a;
-        this.uploadAssetsService.newName = (_a = {}, _a[originName] = newName, _a);
+    function (_a, index) {
+        var name = _a.name, valid = _a.valid;
+        var fileNames = this.uploadAssetsService.fileNames;
+        fileNames[index] = { name: name, valid: valid };
+        this.uploadAssetsService.setErrorObs(this.uploadAssetsService.errorFiles);
     };
     /**
      * @return {?}
@@ -2474,7 +2464,7 @@ var FileListComponent = /** @class */ (function () {
     FileListComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-file-list',
-                    template: "<div class=\"file-list__heading\">\n  <div class=\"file-list__info\">\n    <h4 class=\"file-list__info--title\">\n      <span *ngIf=\"!uploadAssetsService.errorLength\">\n        {{\n          uploadAssetsService?.getFiles?.length -\n            uploadAssetsService.errorLength\n        }}\n        {{ uploadAssetsService?.getFiles?.length > 1 ? 'assets' : 'asset' }}\n        ready to upload\n      </span>\n      <span *ngIf=\"uploadAssetsService.errorLength\">\n        {{ uploadAssetsService.errorLength }}\n        {{ uploadAssetsService.errorLength > 1 ? 'assets' : 'asset' }}\n        invalid, please remove it before upload</span\n      >\n    </h4>\n    <div class=\"file-list__info--desc\">\n      Manage the assets before adding them to the Media Library\n    </div>\n  </div>\n  <lib-input-file\n    [acceptTypes]=\"uploadAssetsService?.supportedTypes?.join(', ')\"\n    (onFileChange)=\"onFileChange($event)\"\n    color=\"primary\"\n  >\n    <span>Add new assets</span>\n  </lib-input-file>\n</div>\n<div class=\"file-list\">\n  <lib-file-item\n    *ngFor=\"let file of uploadAssetsService?.getFiles; let i = index\"\n    [file]=\"file\"\n    (checkError)=\"onEmitError()\"\n    (fileRemove)=\"onDelFile(file.name, i)\"\n    (fileChange)=\"onChangeName($event, file.name)\"\n  ></lib-file-item>\n</div>\n",
+                    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}"]
                 }] }
     ];
@@ -2513,34 +2503,6 @@ var UploadFileComponent = /** @class */ (function () {
      * @return {?}
      */
     function () { };
-    /**
-     * @param {?} fileName
-     * @param {?} index
-     * @return {?}
-     */
-    UploadFileComponent.prototype.onDelFile = /**
-     * @param {?} fileName
-     * @param {?} index
-     * @return {?}
-     */
-    function (fileName, index) {
-        this.uploadAssetsService.deleteFile(fileName, index);
-        this.revalidate.emit(this.uploadAssetsService.errorFiles);
-    };
-    /**
-     * @param {?} newName
-     * @param {?} originName
-     * @return {?}
-     */
-    UploadFileComponent.prototype.onChangeName = /**
-     * @param {?} newName
-     * @param {?} originName
-     * @return {?}
-     */
-    function (newName, originName) {
-        var _a;
-        this.uploadAssetsService.newName = (_a = {}, _a[originName] = newName, _a);
-    };
     /**
      * @param {?} newFiles
      * @return {?}
@@ -2642,7 +2604,10 @@ var AddFolderDialogComponent = /** @class */ (function () {
         this.destroy$ = new Subject();
         this.form = new FormControl();
         this.formGroup = this.fb.group({
-            name: ['', Validators.compose([Validators.required])],
+            name: ['', [
+                    Validators.maxLength(200),
+                    Validators.required
+                ]],
         });
     }
     /**
@@ -2727,7 +2692,7 @@ var AddFolderDialogComponent = /** @class */ (function () {
     AddFolderDialogComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-add-folder-dialog',
-                    template: "<lib-modal heading=\"Add a folder\">\n  <ng-container content>\n    <form (ngSubmit)=\"addFolder()\" [formGroup]=\"formGroup\" #form=\"ngForm\">\n      <input\n        (input)=\"onChange($event)\"\n        matInput\n        placeholder=\"Enter your folder name\"\n        autocomplete=\"off\"\n        required\n        pattern=\".*\\S+.*\"\n        formControlName=\"name\"\n      />\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.pattern\">\n        This field does not allow only whitespace\n      </mat-error>\n      <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n    </form>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"addFolder()\"\n      [class.loading]=\"isLoading\"\n      [disabled]=\"disabled || formGroup?.controls?.name?.errors?.pattern\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Add</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
+                    template: "<lib-modal heading=\"Add a folder\">\n  <ng-container content>\n    <form (ngSubmit)=\"addFolder()\" [formGroup]=\"formGroup\" #form=\"ngForm\">\n      <input\n        (input)=\"onChange($event)\"\n        matInput\n        placeholder=\"Enter your folder name\"\n        autocomplete=\"off\"\n        required\n        pattern=\".*\\S+.*\"\n        formControlName=\"name\"\n      />\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.pattern\">\n        This field does not allow only whitespace\n      </mat-error>\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.maxlength\">\n        The character limit is 200 characters\n      </mat-error>\n      <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n    </form>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"addFolder()\"\n      [class.loading]=\"isLoading\"\n      [disabled]=\"disabled || !formGroup?.valid\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Add</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
                     styles: [":host::ng-deep .mat-dialog-title{padding-bottom:0!important}:host::ng-deep form{position:relative}:host::ng-deep form .mat-error{margin-top:0;position:absolute;left:0;bottom:-20px;line-height:15px;font-size:13px}:host::ng-deep .mat-dialog-content{padding-top:24px;padding-bottom:24px}:host::ng-deep .mat-dialog-actions{padding-top:5px}"]
                 }] }
     ];
@@ -2798,7 +2763,10 @@ var EditFolderDialogComponent = /** @class */ (function () {
         this.destroy$ = new Subject();
         this.form = new FormControl();
         this.formGroup = this.fb.group({
-            name: [this.data.name, Validators.compose([Validators.required])],
+            name: [this.data.name, [
+                    Validators.maxLength(200),
+                    Validators.required
+                ]],
         });
     }
     /**
@@ -2886,7 +2854,7 @@ var EditFolderDialogComponent = /** @class */ (function () {
     EditFolderDialogComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-edit-folder-dialog',
-                    template: "<lib-modal heading=\"Rename folder\">\n  <ng-container content>\n    <form (ngSubmit)=\"editFolder()\" [formGroup]=\"formGroup\" #form=\"ngForm\">\n      <input\n        matInput\n        required\n        autocomplete=\"off\"\n        formControlName=\"name\"\n        (input)=\"onChange($event)\"\n        placeholder=\"Enter your folder name\"\n        pattern=\".*\\S+.*\"\n      />\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.pattern\">\n        This field does not allow only whitespace\n      </mat-error>\n      <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n    </form>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"editFolder()\"\n      [class.loading]=\"isLoading\"\n      [disabled]=\"disabled || formGroup?.controls?.name?.errors?.pattern\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Update</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
+                    template: "<lib-modal heading=\"Rename folder\">\n  <ng-container content>\n    <form (ngSubmit)=\"editFolder()\" [formGroup]=\"formGroup\" #form=\"ngForm\">\n      <input\n        matInput\n        required\n        autocomplete=\"off\"\n        formControlName=\"name\"\n        (input)=\"onChange($event)\"\n        placeholder=\"Enter your folder name\"\n        pattern=\".*\\S+.*\"\n      />\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.pattern\">\n        This field does not allow only whitespace\n      </mat-error>\n      <mat-error *ngIf=\"formGroup?.controls?.name?.errors?.maxlength\">\n        The character limit is 200 characters\n      </mat-error>\n      <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n    </form>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"editFolder()\"\n      [class.loading]=\"isLoading\"\n      [disabled]=\"disabled || formGroup?.controls?.name?.errors?.pattern\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Update</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
                     styles: [":host::ng-deep .mat-dialog-title{padding-bottom:0!important}:host::ng-deep form{position:relative}:host::ng-deep form .mat-error{margin-top:0;position:absolute;left:0;bottom:-20px;line-height:15px;font-size:13px}:host::ng-deep .mat-dialog-content{padding-top:24px;padding-bottom:24px}:host::ng-deep .mat-dialog-actions{padding-top:5px}"]
                 }] }
     ];
@@ -3786,6 +3754,7 @@ var AssetDialogComponent = /** @class */ (function () {
          */
         function () {
             return (!this.fileName.length ||
+                this.fileName.length + this.assetDetails.Extension.length > 199 || // limit 200
                 !!this.errorMessage ||
                 this.patternError ||
                 this.isUpdating);
@@ -4048,7 +4017,7 @@ var AssetDialogComponent = /** @class */ (function () {
     AssetDialogComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-asset-dialog',
-                    template: "<lib-modal\n  [heading]=\"assetDetails?.OriginalFileNameWithoutExtension || data?.name\"\n>\n  <ng-container content>\n    <div *ngIf=\"isLoading; else contentAsset\" class=\"file-details__loading\">\n      <div>\n        <mat-spinner></mat-spinner>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      class=\"update__action\"\n      [class.loading]=\"isUpdating\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"updateAsset()\"\n      [disabled]=\"disabled\"\n    >\n      <ng-container *ngIf=\"isUpdating\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Update</span>\n    </button>\n  </ng-container>\n</lib-modal>\n<ng-template #contentAsset>\n  <div class=\"file-details__item\">\n    <div class=\"file-details__image\">\n      <div class=\"file-details__image--heading\">\n        <mat-error\n          *ngIf=\"replaceMessage\"\n          [innerHTML]=\"replaceMessage\"\n        ></mat-error>\n        <div class=\"file-details__action\">\n          <lib-input-file\n            matTooltip=\"Replace\"\n            [acceptTypes]=\"acceptTypes.join(', ')\"\n            (onFileChange)=\"replaceAsset($event)\"\n            [multiple]=\"false\"\n          >\n            <mat-icon class=\"icon-sync\">sync</mat-icon>\n          </lib-input-file>\n          <a [href]=\"linkDownload\" matTooltip=\"Download\" mat-raised-button>\n            <mat-icon class=\"icon-download\">get_app</mat-icon>\n          </a>\n          <button matTooltip=\"Delete\" mat-raised-button (click)=\"deleteAsset()\">\n            <mat-icon class=\"icon-delete\">delete_outline</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"file-details__img\">\n        <ng-container\n          *ngIf=\"\n            assetDetails?.FileType === fileType.DOCUMENT ||\n              assetDetails?.FileType === fileType.IMAGE;\n            else defaultFile\n          \"\n        >\n          <img\n            [class.image]=\"assetDetails?.FileType === fileType.IMAGE\"\n            [src]=\"\n              assetDetails?.FileType === fileType.IMAGE\n                ? assetDetails?.UrlDetail\n                : base64Pdf\n            \"\n            [alt]=\"assetDetails?.FilePath\"\n          />\n        </ng-container>\n        <ng-template #defaultFile>\n          <mat-icon>attach_file</mat-icon>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <div class=\"file-details__item\">\n    <div class=\"file-details__info\">\n      <div class=\"file-details__info--name\">\n        <div class=\"file-details__label\">File name</div>\n        <input\n          class=\"file-details__input\"\n          matInput\n          placeholder=\"Enter your folder name\"\n          [value]=\"fileName\"\n          required\n          (input)=\"onChangeName($event)\"\n        />\n        <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n        <mat-error *ngIf=\"patternError\">\n          This field does not allow only whitespace\n        </mat-error>\n      </div>\n      <div class=\"file-details__info--description\">\n        <div class=\"file-details__label\">Description</div>\n        <textarea\n          class=\"file-details__textarea custom-scrollbar\"\n          matInput\n          placeholder=\"Enter description\"\n          [value]=\"description\"\n          (input)=\"onChangeDescription($event)\"\n          maxlength=\"200\"\n          rows=\"3\"\n        >\n        </textarea>\n      </div>\n\n      <div class=\"file-details__info--details\">\n        <div class=\"file-details__info--size\">\n          <div class=\"file-details__label\">Size</div>\n          <div>{{ assetDetails?.Size }}</div>\n        </div>\n        <div class=\"file-details__info--ext\">\n          <div class=\"file-details__label\">Extension</div>\n          <div>{{ assetDetails?.Extension }}</div>\n        </div>\n        <div class=\"file-details__info--date\">\n          <div class=\"file-details__label\">Created date</div>\n          <div>{{ assetDetails?.CreatedDate | localDate }}</div>\n        </div>\n        <div class=\"file-details__info--date\">\n          <div class=\"file-details__label\">Updated date</div>\n          <div>\n            {{ assetDetails?.ModifiedDate | localDate }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            assetDetails?.FileType === fileType.IMAGE &&\n            assetDetails?.Extension !== 'svg'\n          \"\n          class=\"file-details__info--dimension\"\n        >\n          <div class=\"file-details__label\">Dimensions</div>\n          <div>{{ assetDetails?.Width }}x{{ assetDetails?.Height }}</div>\n        </div>\n      </div>\n      <div class=\"file-details__link\">\n        <div class=\"file-details__label\">Public Url</div>\n        <div class=\"break-word\">\n          <span>{{ assetDetails?.CloudUrl }}&nbsp;&nbsp;</span>\n          <mat-icon matTooltip=\"Copy\" (click)=\"copyText(assetDetails?.CloudUrl)\"\n            >content_copy</mat-icon\n          >\n        </div>\n      </div>\n      <span class=\"file-details__copy\" [class.visible]=\"isCopied\">Copied!</span>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<lib-modal\n  [heading]=\"assetDetails?.OriginalFileNameWithoutExtension || data?.name\"\n>\n  <ng-container content>\n    <div *ngIf=\"isLoading; else contentAsset\" class=\"file-details__loading\">\n      <div>\n        <mat-spinner></mat-spinner>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      class=\"update__action\"\n      [class.loading]=\"isUpdating\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"updateAsset()\"\n      [disabled]=\"disabled\"\n    >\n      <ng-container *ngIf=\"isUpdating\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Update</span>\n    </button>\n  </ng-container>\n</lib-modal>\n<ng-template #contentAsset>\n  <div class=\"file-details__item\">\n    <div class=\"file-details__image\">\n      <div class=\"file-details__image--heading\">\n        <mat-error\n          *ngIf=\"replaceMessage\"\n          [innerHTML]=\"replaceMessage\"\n        ></mat-error>\n        <div class=\"file-details__action\">\n          <lib-input-file\n            matTooltip=\"Replace\"\n            [acceptTypes]=\"acceptTypes.join(', ')\"\n            (onFileChange)=\"replaceAsset($event)\"\n            [multiple]=\"false\"\n          >\n            <mat-icon class=\"icon-sync\">sync</mat-icon>\n          </lib-input-file>\n          <a [href]=\"linkDownload\" matTooltip=\"Download\" mat-raised-button>\n            <mat-icon class=\"icon-download\">get_app</mat-icon>\n          </a>\n          <button matTooltip=\"Delete\" mat-raised-button (click)=\"deleteAsset()\">\n            <mat-icon class=\"icon-delete\">delete_outline</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"file-details__img\">\n        <ng-container\n          *ngIf=\"\n            assetDetails?.FileType === fileType.DOCUMENT ||\n              assetDetails?.FileType === fileType.IMAGE;\n            else defaultFile\n          \"\n        >\n          <img\n            [class.image]=\"assetDetails?.FileType === fileType.IMAGE\"\n            [src]=\"\n              assetDetails?.FileType === fileType.IMAGE\n                ? assetDetails?.UrlDetail\n                : base64Pdf\n            \"\n            [alt]=\"assetDetails?.FilePath\"\n          />\n        </ng-container>\n        <ng-template #defaultFile>\n          <mat-icon>attach_file</mat-icon>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <div class=\"file-details__item\">\n    <div class=\"file-details__info\">\n      <div class=\"file-details__info--name\">\n        <div class=\"file-details__label\">File name</div>\n        <input\n          class=\"file-details__input\"\n          matInput\n          placeholder=\"Enter your folder name\"\n          [value]=\"fileName\"\n          required\n          (input)=\"onChangeName($event)\"\n        />\n        <mat-error *ngIf=\"errorMessage\">{{ errorMessage }}</mat-error>\n        <mat-error *ngIf=\"patternError\">\n          This field does not allow only whitespace\n        </mat-error>\n        <mat-error *ngIf=\"fileName?.length + assetDetails.Extension.length > 199\">\n          The character limit is 200 characters\n        </mat-error>\n      </div>\n      <div class=\"file-details__info--description\">\n        <div class=\"file-details__label\">Description</div>\n        <textarea\n          class=\"file-details__textarea custom-scrollbar\"\n          matInput\n          placeholder=\"Enter description\"\n          [value]=\"description\"\n          (input)=\"onChangeDescription($event)\"\n          maxlength=\"200\"\n          rows=\"3\"\n        >\n        </textarea>\n      </div>\n\n      <div class=\"file-details__info--details\">\n        <div class=\"file-details__info--size\">\n          <div class=\"file-details__label\">Size</div>\n          <div>{{ assetDetails?.Size }}</div>\n        </div>\n        <div class=\"file-details__info--ext\">\n          <div class=\"file-details__label\">Extension</div>\n          <div>{{ assetDetails?.Extension }}</div>\n        </div>\n        <div class=\"file-details__info--date\">\n          <div class=\"file-details__label\">Created date</div>\n          <div>{{ assetDetails?.CreatedDate | localDate }}</div>\n        </div>\n        <div class=\"file-details__info--date\">\n          <div class=\"file-details__label\">Updated date</div>\n          <div>\n            {{ assetDetails?.ModifiedDate | localDate }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            assetDetails?.FileType === fileType.IMAGE &&\n            assetDetails?.Extension !== 'svg'\n          \"\n          class=\"file-details__info--dimension\"\n        >\n          <div class=\"file-details__label\">Dimensions</div>\n          <div>{{ assetDetails?.Width }}x{{ assetDetails?.Height }}</div>\n        </div>\n      </div>\n      <div class=\"file-details__link\">\n        <div class=\"file-details__label\">Public Url</div>\n        <div class=\"break-word\">\n          <span>{{ assetDetails?.CloudUrl }}&nbsp;&nbsp;</span>\n          <mat-icon matTooltip=\"Copy\" (click)=\"copyText(assetDetails?.CloudUrl)\"\n            >content_copy</mat-icon\n          >\n        </div>\n      </div>\n      <span class=\"file-details__copy\" [class.visible]=\"isCopied\">Copied!</span>\n    </div>\n  </div>\n</ng-template>\n",
                     providers: [FileSizePipe],
                     styles: [":host::ng-deep .mat-dialog-content{position:relative;display:flex;flex:1;justify-content:space-between;align-items:flex-start;font-size:14px;line-height:24px;color:#000;min-height:400px}:host::ng-deep .file-details__loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}:host::ng-deep .file-details__item{width:50%;padding:20px 10px;position:relative}:host::ng-deep .file-details__image{padding:20px;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:10px}:host::ng-deep .file-details__image--heading{display:flex;justify-content:flex-end}:host::ng-deep .file-details__image--heading .mat-error{flex:1;margin-top:0}:host::ng-deep .file-details__action{margin-bottom:20px}:host::ng-deep .file-details__action>*{margin-left:10px}:host::ng-deep .file-details__action .mat-button-base{padding:0;min-width:40px}:host::ng-deep .file-details__action .icon-download,:host::ng-deep .file-details__action .icon-sync{color:#979797}:host::ng-deep .file-details__action .icon-delete{color:#f44336}:host::ng-deep .file-details__img{position:relative;padding-bottom:66.66%;text-align:center}:host::ng-deep .file-details__img img{max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .file-details__img 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 .file-details__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-details__info{position:relative}:host::ng-deep .file-details__info--name{padding-bottom:20px;position:relative}:host::ng-deep .file-details__info--name .mat-error{margin-top:0;position:absolute;left:0;bottom:0;font-size:13px;line-height:20px}:host::ng-deep .file-details__info--description{padding-bottom:10px}:host::ng-deep .file-details__info--details{display:flex;flex-wrap:wrap;flex:1}:host::ng-deep .file-details__info--details>*{width:50%;margin-top:10px}:host::ng-deep .file-details__input,:host::ng-deep .file-details__textarea{margin-top:7px}:host::ng-deep .file-details__link{margin-top:15px}:host::ng-deep .file-details__link .mat-icon{font-size:16px;cursor:pointer}:host::ng-deep .file-details__label{color:#979797}:host::ng-deep .file-details__copy{opacity:0;position:absolute;top:50%;left:50%;background-color:rgba(0,0,0,.5);color:#fff;padding:15px;border-radius:5px;transform:translate(-50%,-50%)}:host::ng-deep .file-details__copy.visible{opacity:1}:host::ng-deep .update__action{min-width:100px}:host::ng-deep .update__action.loading{padding:0 5px}:host::ng-deep .update__action.loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}:host::ng-deep .update__action.loading .mat-spinner{margin-right:10px}:host::ng-deep .break-word{word-break:break-word}"]
                 }] }
@@ -4259,8 +4228,8 @@ var AssetItemComponent = /** @class */ (function () {
     AssetItemComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-asset-item',
-                    template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\">\n      <button class=\"asset-content__header--button\" mat-raised-button>\n        <mat-checkbox\n          class=\"checkbox\"\n          [checked]=\"checkSelectedAsset\"\n          (change)=\"onChange()\"\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          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64Pdf\" [alt]=\"asset.OriginalFileName\" class=\"pdf\" />\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 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}: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{display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{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.pdf{width:75%;height:75%}: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\" 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          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n          <img [src]=\"base64Pdf\" [alt]=\"asset.OriginalFileName\" class=\"pdf\" />\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 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}: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{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.pdf{width:75%;height:75%}: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 */