@rs-pk/asset-management 1.0.13 → 1.0.14

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

@@ -1164,8 +1164,7 @@ class UploadAssetsService {
         this.dialog = dialog;
         this._api = _api;
         this.files = [];
-        this.namesMap = {};
-        this.errorsMap = {};
+        this.fileNames = [];
         this.supportedSize = 10 * 1024 * 1024; // 10MB
         // 10MB
         this.documentExtension = ['.pdf'];
@@ -1182,6 +1181,7 @@ class UploadAssetsService {
             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;
@@ -1212,81 +1212,58 @@ class UploadAssetsService {
     set setFiles(files) {
         this.files = files;
     }
-    /**
-     * @return {?}
-     */
-    get nameFiles() {
-        return this.namesMap;
-    }
-    /**
-     * @param {?} newName
-     * @return {?}
-     */
-    set newName(newName) {
-        this.namesMap = Object.assign({}, this.namesMap, newName);
-    }
     /**
      * @return {?}
      */
     get errorFiles() {
-        return !this.files.length || Object.keys(this.errorsMap).length > 0;
-    }
-    /**
-     * @param {?} newError
-     * @return {?}
-     */
-    set errors(newError) {
-        this.errorsMap = Object.assign({}, this.errorsMap, newError);
-    }
-    /**
-     * @return {?}
-     */
-    get fileErrors() {
-        return this.errorsMap;
+        /** @type {?} */
+        const invalidFiles = this.fileNames.filter((/**
+         * @param {?} file
+         * @return {?}
+         */
+        file => !file.valid));
+        return this.fileNames.length && invalidFiles.length > 0;
     }
     /**
      * @return {?}
      */
     get errorLength() {
-        return Object.keys(this.errorsMap).length;
+        return this.fileNames.filter((/**
+         * @param {?} file
+         * @return {?}
+         */
+        file => !file.valid)).length;
     }
     /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
-    deleteFile(fileName, index) {
-        this.files = this.files.filter((/**
-         * @param {?} _file
-         * @param {?} i
-         * @return {?}
-         */
-        (_file, i) => i !== index));
-        delete this.namesMap[fileName];
-        delete this.errorsMap[fileName];
+    deleteFile(index) {
+        this.files.splice(index, 1);
+        this.fileNames.splice(index, 1);
     }
     /**
      * @param {?} parentAssetId
      * @return {?}
      */
     uploadMultipleAssets(parentAssetId) {
-        const { files, namesMap } = this;
+        const { files } = this;
+        /** @type {?} */
+        const fileNames = this.fileNames.map((/**
+         * @param {?} file
+         * @return {?}
+         */
+        file => file.name));
         /** @type {?} */
         const formData = new FormData();
         formData.append('parentAssetId', parentAssetId);
         formData.append('companyId', '732DA8D2-04EC-4BE0-A168-63EE0DCF50D8');
-        for (const file of files) {
+        for (let i = 0; i < files.length; i++) {
             /** @type {?} */
-            const nameSplit = file.name.split('.');
+            const nameSplit = files[i].name.split('.');
             /** @type {?} */
             const ext = `.${nameSplit.splice(nameSplit.length - 1, 1)[0]}`;
-            /** @type {?} */
-            const originName = file.name;
-            /** @type {?} */
-            const fileName = namesMap[originName]
-                ? `${namesMap[originName]}${ext}`
-                : originName;
-            formData.append('files', file, fileName);
+            formData.append('files', files[i], `${fileNames[i]}${ext}`);
         }
         return this._api.post(`${this.baseUrl}/File/Upload`, formData);
     }
@@ -1306,16 +1283,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 {?} */
@@ -1972,6 +1941,7 @@ class FileItemComponent {
             ext: '',
             data: null,
             errors: {
+                maxLength: false,
                 ext: false,
                 size: false,
             },
@@ -1981,33 +1951,54 @@ class FileItemComponent {
      * @return {?}
      */
     ngOnInit() {
-        this.setDataFile(this.file);
+        this.initDataFile();
     }
     /**
      * @private
-     * @param {?} file
      * @return {?}
      */
-    setDataFile(file) {
-        const { supportedTypes, supportedSize } = this.uploadAssetService;
+    initDataFile() {
+        this.setDetailsFile();
+        this.setErrorFile();
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    setDetailsFile() {
+        const { name, size } = this.file;
+        const { getFiles: files } = this.uploadAssetService;
+        /** @type {?} */
+        const names = files.filter((/**
+         * @param {?} file
+         * @return {?}
+         */
+        file => file.name === name));
         /** @type {?} */
-        const nameSplit = file.name.split('.');
+        const 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 {?}
+     */
+    setErrorFile() {
+        const { supportedTypes, supportedSize, fileNames } = this.uploadAssetService;
+        const { name, ext: extFile, size: sizeFile } = this.dataFile;
         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,
         };
-        const { ext, size } = this.dataFile.errors;
-        if (ext || size) {
-            this.uploadAssetService.errors = { [file.name]: true };
-            this.checkError.emit();
-        }
-        if (file.type.indexOf('image') > -1) {
+        if (this.file.type.indexOf('image') > -1) {
             /** @type {?} */
             const reader = new FileReader();
-            reader.readAsDataURL(file);
+            reader.readAsDataURL(this.file);
             reader.onload = (/**
              * @param {?} readerEvent
              * @return {?}
@@ -2024,15 +2015,32 @@ class FileItemComponent {
                 });
             });
         }
+        fileNames.push({
+            name,
+            valid: this.checkErrors()
+        });
         this.uploadAssetService.setErrorObs(this.uploadAssetService.errorFiles);
     }
+    /**
+     * @private
+     * @return {?}
+     */
+    checkErrors() {
+        const { ext, size, maxLength } = this.dataFile.errors;
+        return (ext || size || maxLength) ? false : true;
+    }
     /**
      * @param {?} event
      * @return {?}
      */
     onChange(event) {
         this.dataFile.name = ((/** @type {?} */ (event.target))).value.trim();
-        this.fileChange.emit(this.dataFile.name);
+        const { name, ext } = this.dataFile;
+        this.dataFile.errors.maxLength = name.length + ext.length > 199;
+        this.fileChange.emit({
+            name: this.dataFile.name,
+            valid: this.checkErrors()
+        });
     }
     /**
      * @return {?}
@@ -2044,7 +2052,7 @@ class FileItemComponent {
 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}"]
             }] }
 ];
@@ -2107,21 +2115,22 @@ class FileListComponent {
         ((/** @type {?} */ (document.getElementById('file-import')))).value = '';
     }
     /**
-     * @param {?} fileName
      * @param {?} index
      * @return {?}
      */
-    onDelFile(fileName, index) {
-        this.uploadAssetsService.deleteFile(fileName, index);
+    onDelFile(index) {
+        this.uploadAssetsService.deleteFile(index);
         this.revalidate.emit(this.uploadAssetsService.errorFiles);
     }
     /**
-     * @param {?} newName
-     * @param {?} originName
+     * @param {?} __0
+     * @param {?} index
      * @return {?}
      */
-    onChangeName(newName, originName) {
-        this.uploadAssetsService.newName = { [originName]: newName };
+    onChangeName({ name, valid }, index) {
+        const { fileNames } = this.uploadAssetsService;
+        fileNames[index] = { name, valid };
+        this.uploadAssetsService.setErrorObs(this.uploadAssetsService.errorFiles);
     }
     /**
      * @return {?}
@@ -2133,7 +2142,7 @@ class FileListComponent {
 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}"]
             }] }
 ];
@@ -2171,23 +2180,6 @@ class UploadFileComponent {
      * @return {?}
      */
     ngOnInit() { }
-    /**
-     * @param {?} fileName
-     * @param {?} index
-     * @return {?}
-     */
-    onDelFile(fileName, index) {
-        this.uploadAssetsService.deleteFile(fileName, index);
-        this.revalidate.emit(this.uploadAssetsService.errorFiles);
-    }
-    /**
-     * @param {?} newName
-     * @param {?} originName
-     * @return {?}
-     */
-    onChangeName(newName, originName) {
-        this.uploadAssetsService.newName = { [originName]: newName };
-    }
     /**
      * @param {?} newFiles
      * @return {?}
@@ -2279,7 +2271,10 @@ class AddFolderDialogComponent {
         this.destroy$ = new Subject();
         this.form = new FormControl();
         this.formGroup = this.fb.group({
-            name: ['', Validators.compose([Validators.required])],
+            name: ['', [
+                    Validators.maxLength(200),
+                    Validators.required
+                ]],
         });
     }
     /**
@@ -2343,7 +2338,7 @@ class AddFolderDialogComponent {
 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}"]
             }] }
 ];
@@ -2418,7 +2413,10 @@ class EditFolderDialogComponent {
         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
+                ]],
         });
     }
     /**
@@ -2485,7 +2483,7 @@ class EditFolderDialogComponent {
 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}"]
             }] }
 ];
@@ -3307,6 +3305,7 @@ class AssetDialogComponent {
      */
     get disabled() {
         return (!this.fileName.length ||
+            this.fileName.length + this.assetDetails.Extension.length > 199 || // limit 200
             !!this.errorMessage ||
             this.patternError ||
             this.isUpdating);
@@ -3522,7 +3521,7 @@ class AssetDialogComponent {
 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}"]
             }] }
@@ -3715,8 +3714,8 @@ class AssetItemComponent {
 AssetItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-asset-item',
-                template: "<div class=\"asset-wrapper\">\n  <div class=\"asset-content\">\n    <div class=\"asset-content__header\">\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 */