@rs-pk/asset-management 1.0.13 → 1.0.14

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

@@ -1522,8 +1522,7 @@
             this.dialog = dialog;
             this._api = _api;
             this.files = [];
-            this.namesMap = {};
-            this.errorsMap = {};
+            this.fileNames = [];
             this.supportedSize = 10 * 1024 * 1024; // 10MB
             // 10MB
             this.documentExtension = ['.pdf'];
@@ -1540,6 +1539,7 @@
                 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 rxjs.BehaviorSubject(true);
             this.baseUrl = this._env.asset2Url;
@@ -1585,54 +1585,18 @@
             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
@@ -1642,30 +1606,26 @@
              * @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
@@ -1676,34 +1636,23 @@
          * @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);
         };
@@ -1724,16 +1673,8 @@
          * @private
          */
         UploadAssetsService.prototype.files;
-        /**
-         * @type {?}
-         * @private
-         */
-        UploadAssetsService.prototype.namesMap;
-        /**
-         * @type {?}
-         * @private
-         */
-        UploadAssetsService.prototype.errorsMap;
+        /** @type {?} */
+        UploadAssetsService.prototype.fileNames;
         /** @type {?} */
         UploadAssetsService.prototype.supportedSize;
         /** @type {?} */
@@ -2474,6 +2415,7 @@
                 ext: '',
                 data: null,
                 errors: {
+                    maxLength: false,
                     ext: false,
                     size: false,
                 },
@@ -2486,40 +2428,67 @@
          * @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 {?}
@@ -2536,8 +2505,24 @@
                     });
                 });
             }
+            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 {?}
@@ -2548,7 +2533,12 @@
          */
         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 {?}
@@ -2562,7 +2552,7 @@
         FileItemComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -2631,32 +2621,32 @@
             ((/** @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 {?}
@@ -2670,7 +2660,7 @@
         FileListComponent.decorators = [
             { 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(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}"]
                     }] }
         ];
@@ -2709,34 +2699,6 @@
          * @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 {?}
@@ -2838,7 +2800,10 @@
             this.destroy$ = new rxjs.Subject();
             this.form = new forms.FormControl();
             this.formGroup = this.fb.group({
-                name: ['', forms.Validators.compose([forms.Validators.required])],
+                name: ['', [
+                        forms.Validators.maxLength(200),
+                        forms.Validators.required
+                    ]],
             });
         }
         /**
@@ -2923,7 +2888,7 @@
         AddFolderDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -2994,7 +2959,10 @@
             this.destroy$ = new rxjs.Subject();
             this.form = new forms.FormControl();
             this.formGroup = this.fb.group({
-                name: [this.data.name, forms.Validators.compose([forms.Validators.required])],
+                name: [this.data.name, [
+                        forms.Validators.maxLength(200),
+                        forms.Validators.required
+                    ]],
             });
         }
         /**
@@ -3082,7 +3050,7 @@
         EditFolderDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -3982,6 +3950,7 @@
              */
             function () {
                 return (!this.fileName.length ||
+                    this.fileName.length + this.assetDetails.Extension.length > 199 || // limit 200
                     !!this.errorMessage ||
                     this.patternError ||
                     this.isUpdating);
@@ -4244,7 +4213,7 @@
         AssetDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
@@ -4455,8 +4424,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\">\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 */