@wizishop/img-manager 15.1.2 → 15.2.0

package/fesm2015/wizishop-img-manager.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, Pipe, Inject, NgModule } from '@angular/core';
+import { Injectable, Optional, SkipSelf, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, inject, Pipe, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, of, delay, tap, Subject, Observable, forkJoin } from 'rxjs';
-import * as i3 from '@angular/common/http';
+import * as i3$1 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
 import { take, map, takeUntil, debounceTime, distinctUntilChanged, tap as tap$1 } from 'rxjs/operators';
 import * as i1 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import * as i7 from '@ngx-translate/core';
+import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
@@ -14,11 +14,12 @@ import * as i3$2 from '@angular/router';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
-import * as i3$1 from 'ngx-scrollbar';
+import * as i4 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import * as i8 from 'ngx-scrollbar/reached-event';
 import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
-import * as i4 from 'ngx-image-cropper';
+import * as i8$1 from 'projects/wz-img-manager/src/lib/services/api.service';
+import * as i4$1 from 'ngx-image-cropper';
 import { ImageCropperModule } from 'ngx-image-cropper';
 import { v4 } from 'uuid';
 import * as i3$3 from '@angular/cdk/drag-drop';
@@ -93,17 +94,38 @@ class ImgSelectionService {
     }
 }
 ImgSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ImgSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionService, providedIn: 'root' });
+ImgSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: function () { return []; } });
+const ImgSelectionServiceProvider = {
+    provide: ImgSelectionService,
+    useFactory: (parentService) => {
+        console.log('parentService', !!parentService);
+        // Vérifie si le service existe déjà dans le provider parent
+        if (parentService) {
+            return parentService;
+        }
+        else {
+            // Si le service n'existe pas dans le provider parent, crée un nouveau service
+            return new ImgSelectionService();
+        }
+    },
+    // Utilise l'injection conditionnelle pour vérifier si le service existe déjà dans le provider parent
+    deps: [[new Optional(), new SkipSelf(), ImgSelectionService]],
+};
+
+class ApiService {
+}
+ApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable
+        }] });
 
 class ImgManagerService {
-    constructor(http) {
-        this.http = http;
+    constructor(apiService) {
+        this.apiService = apiService;
         this.params = new HttpParams().set("limit", "20").set("page", "1");
         // Display the img selection
         this.pageFicheProductConfig = {
@@ -144,37 +166,29 @@ class ImgManagerService {
             displayBtn: false
         };
     }
-    setApiConfig(img_manager_route, shop_token) {
-        this.imgManagerRoute = img_manager_route;
-        this.shopToken = shop_token;
-    }
-    getOptionsHeaders(params) {
-        const header = { headers: new HttpHeaders({
-                Authorization: 'Bearer ' + this.shopToken
-            })
-        };
-        if (params) {
-            this.resetParams(params);
-            header['params'] = this.params;
-        }
-        return header;
-    }
     getShopImgList(params) {
         if (params && this.previousParams && this.previousParams.limit === params.limit
             && this.previousParams.page === params.page && this.shopImgList
             && this.previousParams.search === params.search) {
             return of(this.shopImgList).pipe(delay(0));
         }
-        return this.http.get(`${this.imgManagerRoute}/images`, this.getOptionsHeaders(params)).pipe(tap((shopImgList) => {
+        if (params) {
+            this.resetParams(params);
+        }
+        return this.apiService.getShopImgList(params).pipe(tap((shopImgList) => {
             this.shopImgList = shopImgList;
             this.previousParams = params;
         }));
+        ;
     }
     getShopTotalImgList(params) {
-        return this.http.get(`${this.imgManagerRoute}/total/image`, this.getOptionsHeaders(params));
+        if (params) {
+            this.resetParams(params);
+        }
+        return this.apiService.getShopTotalImgList(params);
     }
     getShopImg(idFile) {
-        return this.http.get(`${this.imgManagerRoute}/images/${idFile}`, this.getOptionsHeaders());
+        return this.apiService.getShopImg(idFile);
     }
     resetParams(params) {
         this.params = new HttpParams();
@@ -186,31 +200,14 @@ class ImgManagerService {
             this.params = this.params.set('display_name:contains', params.search);
         }
     }
-    uploadFile(formData) {
-        return this.http.post(`${this.imgManagerRoute}/images/template`, formData, this.getOptionsHeaders());
-    }
-    uploadFileByUrl(url, fileName) {
-        const body = {
-            url,
-            fileName
-        };
-        return this.http.post(`${this.imgManagerRoute}/images/template`, { url, fileName }, this.getOptionsHeaders());
-    }
     replaceImg(imageBase64, id_file) {
-        const body = {
-            imageBase64,
-            type: "RAW"
-        };
-        return this.http.put(`${this.imgManagerRoute}/images/${id_file}/replace`, body, this.getOptionsHeaders());
-    }
-    changeImgName(fileName, id_file) {
-        return this.http.put(`${this.imgManagerRoute}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
+        return this.apiService.replaceImg(imageBase64, id_file);
     }
     removeImg(id_file) {
-        return this.http.delete(`${this.imgManagerRoute}/images/${id_file}`, this.getOptionsHeaders());
+        return this.apiService.removeImg(id_file);
     }
     removeMultipleImg(id_array) {
-        return this.http.post(`${this.imgManagerRoute}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
+        return this.apiService.removeMultipleImg(id_array);
     }
     getImgManagerDisplayConfig(displayName) {
         switch (displayName) {
@@ -237,83 +234,26 @@ class ImgManagerService {
         ];
     }
 }
-ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [{ token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, providedIn: 'root' });
+ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i3.HttpClient }]; } });
-
-class ImgCDNService {
-    constructor() {
-        this.imgCDNConfig = null;
-    }
-    setImgCDNConfig(imgCDNConfig) {
-        this.imgCDNConfig = imgCDNConfig;
-    }
-    getUrlImg(size) {
-        const urlProperty = Object.keys(this.imgCDNConfig)
-            .filter(url => new RegExp(size, 'i').test(url))[0];
-        return this.imgCDNConfig[urlProperty];
-    }
-    getAllSize() {
-        return Object.keys(this.imgCDNConfig)
-            .map(elem => elem.match(/_(\w+)_/)[1]);
-    }
-}
-ImgCDNService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ImgCDNService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class ImgManagerConfigService {
-    constructor(imgManagerService, imgCDNService) {
-        this.imgManagerService = imgManagerService;
-        this.imgCDNService = imgCDNService;
-    }
-    /**
-     * Set imgManagerService and imgCDNService
-     * Canva and Pexel service retrieve the externalConfig at their initialization
-     * @param externalConfig
-     */
-    setExternalConfig(externalConfig) {
-        this.externalConfig = externalConfig;
-        this.imgManagerService.setApiConfig(externalConfig.api.image_manager_route, externalConfig.api.shop_token);
-        this.imgCDNService.setImgCDNConfig(externalConfig.imgCDNConfig);
-    }
-    getCanvaApiURL() {
-        return this.externalConfig.api.canva_url;
-    }
-    getCanvaApiToken() {
-        return this.externalConfig.api.canva_token;
-    }
-    getRouteAssets() {
-        return this.externalConfig.api.assets_route;
-    }
-    getPexelsApiURL() {
-        return this.externalConfig.api.pexels_route;
-    }
-    getPexelsApiToken() {
-        return this.externalConfig.api.pexels_token;
-    }
-    getShopCategory() {
-        return this.externalConfig.api.shop_category;
-    }
-}
-ImgManagerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerConfigService, deps: [{ token: ImgManagerService }, { token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Injectable });
-ImgManagerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgCDNService }]; } });
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ApiService }]; } });
+const ImgManagerServiceProvider = {
+    provide: ImgManagerService,
+    useFactory: (parentService, apiService) => {
+        // Vérifie si le service existe déjà dans le provider parent
+        if (parentService) {
+            return parentService;
+        }
+        else {
+            // Si le service n'existe pas dans le provider parent, crée un nouveau service
+            return new ImgManagerService(apiService);
+        }
+    },
+    // Utilise l'injection conditionnelle pour vérifier si le service existe déjà dans le provider parent
+    deps: [[new Optional(), new SkipSelf(), ImgManagerService], ApiService],
+};
 
 class UserSettingsService {
     constructor() {
@@ -401,7 +341,7 @@ class AlertService {
             this.alertRefComponent.afterClosed().subscribe();
         });
     }
-    openAlertWithBackendRespons(msgKey, msgBackend) {
+    openAlertWithBackendResponse(msgKey, msgBackend) {
         this.translateService.get(msgKey).subscribe(trans => {
             this.alertConfig.message = trans;
             this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
@@ -420,22 +360,40 @@ class AlertService {
         this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
     }
 }
-AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NwbAlertService }, { type: i7.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.NwbAlertService }, { type: i3.TranslateService }]; } });
+
+class UploadService {
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    uploadFile(formData) {
+        return this.apiService.uploadFile(formData);
+    }
+    uploadFileByUrl(url, fileName) {
+        return this.apiService.uploadFileByUrl(url, fileName);
+    }
+}
+UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: ApiService }]; } });
 
 class CanvaService {
-    constructor(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
-        this.externalConfigService = externalConfigService;
-        this.imgManager = imgManager;
+    constructor(wzImgEventService, alertService, translateService, uploadService, apiService) {
         this.wzImgEventService = wzImgEventService;
         this.alertService = alertService;
         this.translateService = translateService;
+        this.uploadService = uploadService;
+        this.apiService = apiService;
         this.imgLoading = false;
         this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
         this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
@@ -445,12 +403,15 @@ class CanvaService {
         this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
         this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
     }
-    setCanvaApiConfig() {
-        this.canvaApiURL = this.externalConfigService.getCanvaApiURL();
-        this.canvaApiKey = this.externalConfigService.getCanvaApiToken();
+    get canvaApiURL() {
+        return this.apiService.CONFIG.canva_url;
+    }
+    ;
+    get canvaApiKey() {
+        return this.apiService.CONFIG.canva_token;
     }
     getCanvaLogo() {
-        return this.externalConfigService.getRouteAssets() + "canva/icon_canva.svg";
+        return this.apiService.CONFIG.canva_url + "canva/icon_canva.svg";
     }
     bindEventExepectedImgSizeChange() {
         return this.bindExpectedSizeDone;
@@ -462,9 +423,6 @@ class CanvaService {
         }
     }
     getCanvaApi() {
-        if (!this.canvaApiURL || !this.canvaApiKey) {
-            this.setCanvaApiConfig();
-        }
         return new Observable(observer => {
             this.loadCanva().subscribe({
                 complete: () => {
@@ -548,31 +506,34 @@ class CanvaService {
     designPublished(exportUrl, designTitle) {
         this.alertService.openAlert(this.uploadingImg);
         this.imgLoading = true;
-        this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe((img) => {
-            this.imgLoading = false;
-            this.removeOverflowBody();
-            this.wzImgEventService.emitImgAdded(img.id_file);
-            this.alertService.openAlert(this.successUploadPhoto);
-        }, error => {
-            this.imgLoading = false;
-            this.removeOverflowBody();
-            if (error.error.code === 406 && error.error.message) {
-                this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
-            }
-            else {
-                this.alertService.openAlert(this.errorUploadCanvaImg);
+        this.uploadService.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe({
+            next: (img) => {
+                this.imgLoading = false;
+                this.removeOverflowBody();
+                this.wzImgEventService.emitImgAdded(img.id_file);
+                this.alertService.openAlert(this.successUploadPhoto);
+            },
+            error: error => {
+                this.imgLoading = false;
+                this.removeOverflowBody();
+                if (error.error.code === 406 && error.error.message) {
+                    this.alertService.openAlertWithBackendResponse(this.errorUploadCanvaImg, error.error.message);
+                }
+                else {
+                    this.alertService.openAlert(this.errorUploadCanvaImg);
+                }
             }
         });
     }
 }
-CanvaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, deps: [{ token: ImgManagerConfigService }, { token: ImgManagerService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
 CanvaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: ImgManagerConfigService }, { type: ImgManagerService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: ApiService }]; } });
 
 class DomService {
     constructor() {
@@ -692,11 +653,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class ImgUploadComponent {
-    constructor(imgManager, alertService, externalConfigService, translateService) {
-        this.imgManager = imgManager;
+    constructor(alertService, apiService, translateService, uploadService) {
         this.alertService = alertService;
-        this.externalConfigService = externalConfigService;
+        this.apiService = apiService;
         this.translateService = translateService;
+        this.uploadService = uploadService;
         this.files = [];
         this.isLoading = false;
         this.imgUploaded = new EventEmitter();
@@ -712,10 +673,9 @@ class ImgUploadComponent {
         this.uploadFile(event.target.files);
     }
     getAssets() {
-        return this.externalConfigService.getRouteAssets() + "img/icon_picture.svg";
+        return this.apiService.CONFIG.assets_route + "img/icon_picture.svg";
     }
     filesChangeByDragAndDrop(filesList) {
-        console.log('filesList', filesList);
         this.removeDragAndDropStyle();
         this.uploadFile(Array.from(filesList));
     }
@@ -742,7 +702,7 @@ class ImgUploadComponent {
             }
             const formData = new FormData();
             formData.append('image', file, file.name);
-            imgToUploadList.push(this.imgManager.uploadFile(formData));
+            imgToUploadList.push(this.uploadService.uploadFile(formData));
         }
         forkJoin(imgToUploadList).subscribe((img) => {
             this.onImgUpload(img),
@@ -750,7 +710,7 @@ class ImgUploadComponent {
         }, error => {
             var _a;
             if (((_a = error === null || error === void 0 ? void 0 : error.error) === null || _a === void 0 ? void 0 : _a.message) && error.statusText !== 'Bad Request') {
-                this.alertService.openAlertWithBackendRespons(this.errorUploadingImg, error.error.message);
+                this.alertService.openAlertWithBackendResponse(this.errorUploadingImg, error.error.message);
             }
             else {
                 this.alertService.openAlert(this.errorUploadingImg);
@@ -783,8 +743,8 @@ class ImgUploadComponent {
         this.dragAndDropBox.nativeElement.style = '';
     }
 }
-ImgUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgUploadComponent, deps: [{ token: ImgManagerService }, { token: AlertService }, { token: ImgManagerConfigService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ImgUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-upload has-text-centered\"\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n  (click)=\"fileInput.click()\"\n  appDragDrop\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n  #dragAndDropBox\n  [@easeInOut]=\"'in'\"\n>\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n    <div class=\"img-upload__container__wrapper\">\n\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isLoading\">\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n        </div>\n\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n        <div class=\"img-upload__container__text\">\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+ImgUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgUploadComponent, deps: [{ token: AlertService }, { token: ApiService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
+ImgUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-upload has-text-centered\"\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n  (click)=\"fileInput.click()\"\n  appDragDrop\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n  #dragAndDropBox\n  [@easeInOut]=\"'in'\"\n>\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n    <div class=\"img-upload__container__wrapper\">\n\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isLoading\">\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n        </div>\n\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n        <div class=\"img-upload__container__text\">\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgUploadComponent, decorators: [{
@@ -792,7 +752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'img-upload', animations: [
                         easeInOut
                     ], template: "<div\n  class=\"img-upload has-text-centered\"\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n  (click)=\"fileInput.click()\"\n  appDragDrop\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n  #dragAndDropBox\n  [@easeInOut]=\"'in'\"\n>\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n    <div class=\"img-upload__container__wrapper\">\n\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isLoading\">\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n        </div>\n\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n        <div class=\"img-upload__container__text\">\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: AlertService }, { type: ImgManagerConfigService }, { type: i7.TranslateService }]; }, propDecorators: { stateDisplayed: [{
+        }], ctorParameters: function () { return [{ type: AlertService }, { type: ApiService }, { type: i3.TranslateService }, { type: UploadService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgUploaded: [{
                 type: Output
@@ -815,9 +775,9 @@ const listAnnimation = // the fade-in/fade-out animation.
 ]);
 
 class PexelsService {
-    constructor(http, externalConfigService, translateService) {
+    constructor(http, apiService, translateService) {
         this.http = http;
-        this.externalConfigService = externalConfigService;
+        this.apiService = apiService;
         this.translateService = translateService;
         this.languages = { 'fr': 'fr-FR', 'en': 'en-US', 'it': 'it-IT', 'es': 'es-ES' };
         this.setLang(this.translateService.currentLang);
@@ -825,14 +785,17 @@ class PexelsService {
             this.setLang(langData.lang);
         });
     }
+    get apiBaseUrl() {
+        return this.apiService.CONFIG.pexels_route;
+    }
+    ;
+    get apiKey() {
+        return this.apiService.CONFIG.pexels_token;
+    }
     setLang(lang) {
         this.lang = this.languages[lang] ? this.languages[lang] : 'fr-FR';
     }
     searchOnPexels(toSearch, perPage, page) {
-        if (!this.apiBaseUrl || this.apiKey) {
-            this.apiBaseUrl = this.externalConfigService.getPexelsApiURL();
-            this.apiKey = this.externalConfigService.getPexelsApiToken();
-        }
         const httpOptions = {
             headers: new HttpHeaders({
                 Authorization: this.apiKey
@@ -844,7 +807,7 @@ class PexelsService {
             request = `/search?query=${toSearch}&per_page=${perPage}&page=${page}&locale=${this.lang}`;
         }
         else { // Search by category or display Pexels selection
-            const shopCategory = this.externalConfigService.getShopCategory();
+            const shopCategory = this.apiService.CONFIG.shop_category;
             // Search by shop category
             if (shopCategory && shopCategory !== 'other' && shopCategory !== 'btob') {
                 request = `/search?query=${shopCategory}&per_page=${perPage}&page=${page}&locale=en-US`;
@@ -858,14 +821,14 @@ class PexelsService {
         }));
     }
 }
-PexelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, deps: [{ token: i3.HttpClient }, { token: ImgManagerConfigService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+PexelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, deps: [{ token: i3$1.HttpClient }, { token: ApiService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 PexelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i3.HttpClient }, { type: ImgManagerConfigService }, { type: i7.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i3$1.HttpClient }, { type: ApiService }, { type: i3.TranslateService }]; } });
 
 class AbstractDebounceDirective {
     constructor() {
@@ -1034,11 +997,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class PexelLibComponent {
-    constructor(wzImgLibService, imgManager, alertService, translateService) {
+    constructor(wzImgLibService, alertService, translateService, uploadService) {
         this.wzImgLibService = wzImgLibService;
-        this.imgManager = imgManager;
         this.alertService = alertService;
         this.translateService = translateService;
+        this.uploadService = uploadService;
         this.searchValue = '';
         /** Pass to true to hide search input */
         this.disableSearch = false;
@@ -1168,14 +1131,14 @@ class PexelLibComponent {
     }
     uploadPhoto(photo, url) {
         photo.uploading = true;
-        const uploadSub = this.imgManager.uploadFileByUrl(url, photo.alt).subscribe(img => {
+        const uploadSub = this.uploadService.uploadFileByUrl(url, photo.alt).subscribe(img => {
             photo.uploading = false;
             photo.uploaded = true;
             this.alertService.openAlert(this.successUploadPhoto);
         }, error => {
             photo.uploading = false;
             if (error.error.code === 406 && error.error.message) {
-                this.alertService.openAlertWithBackendRespons(this.errorUploadPhoto, error.error.message);
+                this.alertService.openAlertWithBackendResponse(this.errorUploadPhoto, error.error.message);
             }
             else {
                 this.alertService.openAlert(this.errorUploadPhoto);
@@ -1189,8 +1152,8 @@ class PexelLibComponent {
         this.subs.forEach(sub => sub.unsubscribe());
     }
 }
-PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: ImgManagerService }, { token: AlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, outputs: { showImgUploaded: "showImgUploaded" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"isLoading\">\n        <wz-loader></wz-loader>\n      </ng-container>\n      <div\n        *ngIf=\"!isLoading && !nbResult\"\n        class=\"pexels-lib__alert\"\n        [@easeInOut]=\"'in'\">\n          <wz-alert [warning]=\"true\">\n            {{ 'ImgManager.PexelLib.noResult' | translate }}\n          </wz-alert>\n      </div>\n\n  </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
+PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, outputs: { showImgUploaded: "showImgUploaded" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"isLoading\">\n        <wz-loader></wz-loader>\n      </ng-container>\n      <div\n        *ngIf=\"!isLoading && !nbResult\"\n        class=\"pexels-lib__alert\"\n        [@easeInOut]=\"'in'\">\n          <wz-alert [warning]=\"true\">\n            {{ 'ImgManager.PexelLib.noResult' | translate }}\n          </wz-alert>\n      </div>\n\n  </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut,
         listAnnimation
     ] });
@@ -1200,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         easeInOut,
                         listAnnimation
                     ], template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"isLoading\">\n        <wz-loader></wz-loader>\n      </ng-container>\n      <div\n        *ngIf=\"!isLoading && !nbResult\"\n        class=\"pexels-lib__alert\"\n        [@easeInOut]=\"'in'\">\n          <wz-alert [warning]=\"true\">\n            {{ 'ImgManager.PexelLib.noResult' | translate }}\n          </wz-alert>\n      </div>\n\n  </ng-scrollbar>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: PexelsService }, { type: ImgManagerService }, { type: AlertService }, { type: i7.TranslateService }]; }, propDecorators: { stateDisplayed: [{
+        }], ctorParameters: function () { return [{ type: PexelsService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], searchValue: [{
                 type: Input
@@ -1214,29 +1177,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class RenamePictureService {
-    constructor(imgManager, alertService) {
-        this.imgManager = imgManager;
+    constructor(apiService, alertService) {
+        this.apiService = apiService;
         this.alertService = alertService;
         this.picturesList = [];
-        this.pictureNameChanged = new Subject();
         this.errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
         this.msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
         this.msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
-        this.setEvents();
     }
     setPicturesList(picturesList) {
         this.picturesList = picturesList;
     }
-    onRenamePicture(pictureRenamed) {
-        this.pictureNameChanged.next(pictureRenamed);
-    }
-    setEvents() {
-        this.pictureNameChanged
-            .pipe(debounceTime(800)) // wait 0.8 sec after the last event before emitting last event
-            .subscribe((pictureNameUpdate) => {
-            this.renamePicture(pictureNameUpdate);
-        });
-    }
     renamePicture(pictureNameUpdate) {
         const picture = this.getPictureById(pictureNameUpdate.id);
         if (!picture) {
@@ -1244,16 +1195,19 @@ class RenamePictureService {
             return;
         }
         this.alertService.openAlert(this.msgSavingImgName);
-        this.imgManager
+        this.apiService
             .changeImgName(picture.display_name, picture.id_file)
             .subscribe((data) => {
             picture.display_name = data.display_name;
             this.alertService.openAlert(this.msgImgNameSaved);
-        }, (error) => {
+        }, () => {
             picture.display_name = pictureNameUpdate.previousName;
             this.alertService.openAlert(this.errorRenameImg);
         });
     }
+    changeImageName(name, idFile) {
+        return this.apiService.changeImgName(name, idFile);
+    }
     getPictureById(id_file) {
         if (!this.picturesList) {
             return;
@@ -1266,15 +1220,38 @@ class RenamePictureService {
         return null;
     }
 }
-RenamePictureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, deps: [{ token: ImgManagerService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
+RenamePictureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, deps: [{ token: ApiService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
 RenamePictureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: AlertService }]; } });
+        }], ctorParameters: function () { return [{ type: ApiService }, { type: AlertService }]; } });
+
+class ImgCDNService {
+    constructor() {
+        this.imgCDNConfig = inject(ApiService).IMG_SIZE;
+    }
+    getUrlImg(size) {
+        const urlProperty = Object.keys(this.imgCDNConfig)
+            .filter(url => new RegExp(size, 'i').test(url))[0];
+        return this.imgCDNConfig[urlProperty];
+    }
+    getAllSize() {
+        return Object.keys(this.imgCDNConfig)
+            .map(elem => elem.match(/_(\w+)_/)[1]);
+    }
+}
+ImgCDNService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImgCDNService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
         this.imgManager = imgManager;
         this.imgSelectionService = imgSelectionService;
         this.http = http;
@@ -1282,7 +1259,7 @@ class ImagesActionHandler {
         this.imgEventCardService = imgEventCardService;
         this.alertService = alertService;
         this.translateService = translateService;
-        this.externalService = externalService;
+        this.apiService = apiService;
         this.picturesList = [];
         this.picturesListChange = new EventEmitter();
         this.tableFilters = {
@@ -1299,9 +1276,9 @@ class ImagesActionHandler {
         this.filtersChange = new EventEmitter();
         this.pictureNameChange = new EventEmitter();
         this.isLoading = false;
+        this.fakeImgRoute = this.apiService.CONFIG.assets_route + 'img/fake.png';
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
         this.errorAlreadyUsedImg = 'ImgManager.ImgList.errorAlreadyUsed';
-        this.fakeImgRoute = this.externalService.getRouteAssets() + 'img/fake.png';
     }
     /** Event emit when the header checkbox is checked */
     onToggleAllCheckBoxRow(event) {
@@ -1379,11 +1356,11 @@ class ImagesActionHandler {
         }
     }
 }
-ImagesActionHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesActionHandler, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Directive });
+ImagesActionHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesActionHandler, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Directive });
 ImagesActionHandler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ImagesActionHandler, inputs: { picturesList: "picturesList", tableFilters: "tableFilters", displayPexelsResults: "displayPexelsResults", disable: "disable", isLoading: "isLoading", stateDisplayed: "stateDisplayed" }, outputs: { picturesListChange: "picturesListChange", disableChange: "disableChange", filtersChange: "filtersChange", pictureNameChange: "pictureNameChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesActionHandler, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { picturesList: [{
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { picturesList: [{
                 type: Input
             }], picturesListChange: [{
                 type: Output
@@ -1430,8 +1407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: ImgCDNService }]; } });
 
 class ImgCardComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
         this.focusInput = false;
         this.toggleImgSelected = new EventEmitter();
         this.switchDisplayWindow = new EventEmitter();
@@ -1448,8 +1425,8 @@ class ImgCardComponent extends ImagesActionHandler {
         this.toggleImgSelected.next();
     }
 }
-ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: i8$1.ApiService }], target: i0.ɵɵFactoryTarget.Component });
+ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, decorators: [{
@@ -1457,7 +1434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'img-card', animations: [
                         easeInOut
                     ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { tabDisplayed: [{
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: i8$1.ApiService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
                 type: Input
@@ -1503,7 +1480,7 @@ class UploadListComponent {
         this.switchDisplayWindow.emit(true);
     }
     onRenamePicture(pictureRenamed) {
-        this.renamePictureService.onRenamePicture(pictureRenamed);
+        this.renamePictureService.renamePicture(pictureRenamed);
     }
     setEvents() {
         this.imgSelectionChange = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
@@ -1521,7 +1498,7 @@ class UploadListComponent {
     }
 }
 UploadListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadListComponent, deps: [{ token: ImgSelectionService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
-UploadListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadListComponent, selector: "upload-list", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, ngImport: i0, template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        class=\"upload-list__scroll\"\n        [ngClass]=\"{\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\n    >\n        <div class=\"upload-list__box\">\n            <div class=\"upload-list__box__container\">\n                <div>\n                    <p class=\"mainColor\">\n                        {{ picturesList? picturesList.length : '' }}\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n                    </p>\n                    <div class=\"dropdown is-hoverable\">\n                        <div class=\"dropdown-trigger\">\n                            <i\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n                                class=\"fas fa-info-circle\">\n                            </i>\n                        </div>\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n                          <div class=\"dropdown-content\">\n                            <div class=\"dropdown-item\">\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"upload-list__box__cards\">\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n                    <img-card\n                        [picture]=\"picture\"\n                        [stateDisplayed]=\"stateDisplayed\"\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n                        (pictureNameChange)=\"onRenamePicture($event)\"\n                    ></img-card>\n                    <div class=\"upload-list__box__cards__card__btnBox\">\n                        <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+UploadListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadListComponent, selector: "upload-list", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, ngImport: i0, template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        class=\"upload-list__scroll\"\n        [ngClass]=\"{\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\n    >\n        <div class=\"upload-list__box\">\n            <div class=\"upload-list__box__container\">\n                <div>\n                    <p class=\"mainColor\">\n                        {{ picturesList? picturesList.length : '' }}\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n                    </p>\n                    <div class=\"dropdown is-hoverable\">\n                        <div class=\"dropdown-trigger\">\n                            <i\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n                                class=\"fas fa-info-circle\">\n                            </i>\n                        </div>\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n                          <div class=\"dropdown-content\">\n                            <div class=\"dropdown-item\">\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"upload-list__box__cards\">\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n                    <img-card\n                        [picture]=\"picture\"\n                        [stateDisplayed]=\"stateDisplayed\"\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n                        (pictureNameChange)=\"onRenamePicture($event)\"\n                    ></img-card>\n                    <div class=\"upload-list__box__cards__card__btnBox\">\n                        <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadListComponent, decorators: [{
@@ -1604,7 +1581,7 @@ class EditorInfoSectionComponent {
     }
 }
 EditorInfoSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoSectionComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-EditorInfoSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></span>\n    </p>\n    <input\n      type=\"text\"\n      class=\"img-editor__infoSection__propertyEditable__input\"\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n      [(ngModel)]=\"imgToEdit.display_name\"\n      debounceKeyUp\n      [debounceTime]=\"500\"\n      (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgURL' | translate }}</p>\n    <button type=\"button\" [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span  class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "directive", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: ["copy-clipboard"], outputs: ["copied"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+EditorInfoSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></span>\n    </p>\n    <input\n      type=\"text\"\n      class=\"img-editor__infoSection__propertyEditable__input\"\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n      [(ngModel)]=\"imgToEdit.display_name\"\n      debounceKeyUp\n      [debounceTime]=\"500\"\n      (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgURL' | translate }}</p>\n    <button type=\"button\" [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span  class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "directive", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: ["copy-clipboard"], outputs: ["copied"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorInfoSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'info-section', template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></span>\n    </p>\n    <input\n      type=\"text\"\n      class=\"img-editor__infoSection__propertyEditable__input\"\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n      [(ngModel)]=\"imgToEdit.display_name\"\n      debounceKeyUp\n      [debounceTime]=\"500\"\n      (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgURL' | translate }}</p>\n    <button type=\"button\" [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span  class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n" }]
@@ -1902,7 +1879,7 @@ class CropperComponent {
     }
 }
 CropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CropperComponent, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Component });
-CropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CropperComponent, selector: "cropper", inputs: { imgToEdit: "imgToEdit", isImgModified: "isImgModified" }, outputs: { isImgModifiedChange: "isImgModifiedChange", editClosed: "editClosed", currentCroppedImageChange: "currentCroppedImageChange" }, ngImport: i0, template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL]=\"imgRoute\"\n        [imageBase64]=\"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+CropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CropperComponent, selector: "cropper", inputs: { imgToEdit: "imgToEdit", isImgModified: "isImgModified" }, outputs: { isImgModifiedChange: "isImgModifiedChange", editClosed: "editClosed", currentCroppedImageChange: "currentCroppedImageChange" }, ngImport: i0, template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL]=\"imgRoute\"\n        [imageBase64]=\"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "component", type: i4$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         insertRemove
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CropperComponent, decorators: [{
@@ -1923,8 +1900,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class ImgEditorComponent {
-    constructor(imgManagerService) {
+    constructor(imgManagerService, renamePictureService) {
         this.imgManagerService = imgManagerService;
+        this.renamePictureService = renamePictureService;
         this.editClosed = new EventEmitter();
         this.isLoading = false;
         this.isImgModified = false;
@@ -1947,31 +1925,37 @@ class ImgEditorComponent {
             this.onEditClosed();
         }
         const obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
-        const obsChangeImgName = this.imgManagerService.changeImgName(this.imgToEdit.display_name, this.imgToEdit.id_file);
+        const obsChangeImgName = this.renamePictureService.changeImageName(this.imgToEdit.display_name, this.imgToEdit.id_file);
         if (this.isImgModified && this.isNameModified) {
-            this.ranameAndReplaceImg(obsChangeImgName, obsReplaceImg);
+            this.renameAndReplaceImg(obsChangeImgName, obsReplaceImg);
             return;
         }
         if (this.isImgModified) {
-            obsReplaceImg.subscribe(data => {
-                this.isLoading = false;
-                this.onEditClosed(this.msgSuccessEdit);
-            }, error => {
-                this.isLoading = false;
-                this.currentCroppedImage = '';
-                this.onEditClosed(this.msgFailSave);
+            obsReplaceImg.subscribe({
+                next: data => {
+                    this.isLoading = false;
+                    this.onEditClosed(this.msgSuccessEdit);
+                },
+                error: error => {
+                    this.isLoading = false;
+                    this.currentCroppedImage = '';
+                    this.onEditClosed(this.msgFailSave);
+                }
             });
             return;
         }
         if (this.isNameModified) {
-            obsChangeImgName.subscribe(data => {
-                this.isLoading = false;
-                this.previousName = this.imgToEdit.display_name;
-                this.onEditClosed(this.msgSuccessEdit);
-            }, error => {
-                this.isLoading = false;
-                this.imgToEdit.display_name = this.previousName;
-                this.onEditClosed(this.msgFailSave);
+            obsChangeImgName.subscribe({
+                next: data => {
+                    this.isLoading = false;
+                    this.previousName = this.imgToEdit.display_name;
+                    this.onEditClosed(this.msgSuccessEdit);
+                },
+                error: error => {
+                    this.isLoading = false;
+                    this.imgToEdit.display_name = this.previousName;
+                    this.onEditClosed(this.msgFailSave);
+                }
             });
         }
         this.isNameModified = false;
@@ -1990,21 +1974,27 @@ class ImgEditorComponent {
     onImgCropped(imgBase64) {
         this.currentCroppedImage = imgBase64;
     }
-    ranameAndReplaceImg(obsChangeImgName, obsReplaceImg) {
-        // Avoid to use forkjoin, because it can create conflict and loos the img
-        obsChangeImgName.subscribe(res1 => {
-            obsReplaceImg.subscribe(res2 => {
-                this.onEditClosed(this.msgSuccessEdit);
-            }, error => {
+    renameAndReplaceImg(obsChangeImgName, obsReplaceImg) {
+        // Avoid to use forkjoin, because it can create conflict and loose the img
+        obsChangeImgName.subscribe({
+            next: res1 => {
+                obsReplaceImg.subscribe({
+                    next: res2 => {
+                        this.onEditClosed(this.msgSuccessEdit);
+                    },
+                    error: error => {
+                        this.onEditClosed(this.msgFailSave);
+                    }
+                });
+            },
+            error: error => {
                 this.onEditClosed(this.msgFailSave);
-            });
-        }, error => {
-            this.onEditClosed(this.msgFailSave);
+            }
         });
     }
 }
-ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }], target: i0.ɵɵFactoryTarget.Component });
-ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          type=\"button\"\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <ng-scrollbar\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
+ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          type=\"button\"\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <ng-scrollbar\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, decorators: [{
@@ -2012,7 +2002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'img-editor', animations: [
                         easeInOut
                     ], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          type=\"button\"\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <ng-scrollbar\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }]; }, propDecorators: { stateDisplayed: [{
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgToEdit: [{
                 type: Input
@@ -2112,7 +2102,7 @@ class CanvaBtnComponent {
     }
 }
 CanvaBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaBtnComponent, deps: [{ token: CanvaService }], target: i0.ɵɵFactoryTarget.Component });
-CanvaBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <div\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true;\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <ng-scrollbar\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+CanvaBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <div\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true;\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <ng-scrollbar\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'canva-btn', template: "<div class=\"canva dropdown is-right is-hoverable\"\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <div\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true;\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <ng-scrollbar\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n" }]
@@ -2287,14 +2277,14 @@ class PagniationText {
         return this.translateService.instant('PaginationComponent.on', { low: currentItemsLow, high: currentItemsHigh, total: totalItems });
     }
 }
-PagniationText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PagniationText, deps: [{ token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+PagniationText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PagniationText, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 PagniationText.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: PagniationText, name: "customPagniationText" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PagniationText, decorators: [{
             type: Pipe,
             args: [{
                     name: 'customPagniationText'
                 }]
-        }], ctorParameters: function () { return [{ type: i7.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; } });
 
 class PaginationComponent {
     constructor() {
@@ -2327,7 +2317,7 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "wz-pagination", inputs: { pagination: "pagination" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageSelectorComponent, selector: "wz-page-selector", inputs: ["pagination", "totalItems"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: PagniationIsLastPage, name: "IsLastPage" }, { kind: "pipe", type: PagniationText, name: "customPagniationText" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "wz-pagination", inputs: { pagination: "pagination" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageSelectorComponent, selector: "wz-page-selector", inputs: ["pagination", "totalItems"], outputs: ["pageChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: PagniationIsLastPage, name: "IsLastPage" }, { kind: "pipe", type: PagniationText, name: "customPagniationText" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wz-pagination', template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
@@ -2352,8 +2342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class MosaicViewComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
         this.nbFakeImg = 0;
         this.switchDisplayWindow = new EventEmitter();
     }
@@ -2373,8 +2363,8 @@ class MosaicViewComponent extends ImagesActionHandler {
         this.switchDisplayWindow.emit(true);
     }
 }
-MosaicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
+MosaicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
+MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
         listAnnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, decorators: [{
@@ -2382,7 +2372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'mosaic-view', animations: [
                         listAnnimation
                     ], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { tabDisplayed: [{
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
                 type: Input
@@ -2983,15 +2973,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     } });
 
 class TableViewComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
         this.dataTableName = 'imgagesView'; // Name of your table
     }
     ngOnInit() {
     }
 }
-TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
+TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         listAnnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
@@ -2999,7 +2989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'table-view', animations: [
                         listAnnimation
                     ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; } });
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
 
 class ImagesViewComponent {
     constructor(imgManager, imgEventService, imgSelectionService, alertService, userSettingsService, renamePictureService, changeDetectorRef) {
@@ -3156,7 +3146,7 @@ class ImagesViewComponent {
     }
     onRenamePicture(pictureRenamed) {
         console.log('onRenamePicture pictureRenamed', pictureRenamed);
-        this.renamePictureService.onRenamePicture(pictureRenamed);
+        this.renamePictureService.renamePicture(pictureRenamed);
     }
     removeListImg() {
         if (this.disable) {
@@ -3401,14 +3391,17 @@ class ImagesViewComponent {
             return;
         }
         this.isTotalRetrieved = false;
-        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe((data) => {
-            this.previousSearchValue = searchValue;
-            this.isTotalRetrieved = true;
-            this.length = data.totalRecords;
-            this.tableFilters.totalItems = data.totalRecords;
-        }, error => {
-            //this.alertService.openAlert(this.errorGetTotalImg);
-            this.initVariables(false);
+        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe({
+            next: (data) => {
+                this.previousSearchValue = searchValue;
+                this.isTotalRetrieved = true;
+                this.length = data.totalRecords;
+                this.tableFilters.totalItems = data.totalRecords;
+            },
+            error: error => {
+                //this.alertService.openAlert(this.errorGetTotalImg);
+                this.initVariables(false);
+            }
         });
     }
     switchDisplayWindowMosaic() {
@@ -3422,7 +3415,7 @@ class ImagesViewComponent {
     }
 }
 ImagesViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", maxLengthCardShow: "maxLengthCardShow", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n  <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n  <div\n  *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n  class=\"images-view__container\"\n  [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n  >\n\n    <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n    </div>\n    <div *ngIf=\"tabDisplayed === 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n    </div>\n\n    <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n        <!-- For listforma : Display btn del multiple img & Confirm action -->\n        <div class=\"images-view__container__boxAction\">\n\n\n            <!-- Select -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\n              type=\"button\"\n              >\n                <i class=\"fal fa-check\"></i>\n                {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n            </button>\n\n            <!-- Display btn del multiple img -->\n            <button\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n              (click)=\"displayConfirmImgSup()\"\n              class=\"button images-view__container__boxAction__delBtn danger\"\n              @insertRemoveAnnim\n              type=\"button\"\n            >\n                <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n            </button>\n\n            <!-- Confirm action -->\n            <div\n              class=\"images-view__container__boxAction__confirmSup\"\n              [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <div>\n                    <button\n                      class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                      (click)=\"cancelSup()\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.confirm' | translate }}\n                  </button>\n                </div>\n            </div>\n\n        </div>\n\n\n        <!-- Swith mosaic/list forma -->\n        <div class=\"field has-addons images-view__container__buttonBox\">\n            <div class=\"control\">\n                <div\n                  class=\"button is-lighted images-view__container__buttonBox__btn\"\n                  [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                  (click)=\"onSwitchFormatDisplayed(false)\"\n                >\n                    <span class=\"icon is-small\">\n                        <i class=\"far fa-th\"></i>\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"control\">\n                <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                        [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                        (click)=\"onSwitchFormatDisplayed(true)\"\n                >\n                  <span class=\"icon is-small\">\n                      <i class=\"fas fa-bars\"></i>\n                  </span>\n              </div>\n            </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n\n  <!-- Images section -->\n<ng-scrollbar\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n    'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n    'images-view__scroll--full': stateDisplayed === 'full',\n    'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n    'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n    'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n  <div #imgLibContainer class=\"images-view__wrapper\">\n    <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n      <mosaic-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n        [nbFakeImg]=\"nbFakeImg\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [isLoading]=\"isLoading\"\n        [fullSize]=\"fullSize\"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n      <table-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [isLoading]=\"isLoading\"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n  *ngIf=\"displayPexelsResults\"\n  class=\"images-view--pexels\"\n  [@easeInOut]=\"'in'\">\n  <pexels-lib\n    [searchValue]=\"tableFilters.searchValue\"\n    (showImgUploaded)=\"onShowImgUploaded()\"\n    [disableSearch]=\"true\"\n  >\n  </pexels-lib>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", maxLengthCardShow: "maxLengthCardShow", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n  <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n  <div\n  *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n  class=\"images-view__container\"\n  [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n  >\n\n    <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n    </div>\n    <div *ngIf=\"tabDisplayed === 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n    </div>\n\n    <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n        <!-- For listforma : Display btn del multiple img & Confirm action -->\n        <div class=\"images-view__container__boxAction\">\n\n\n            <!-- Select -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\n              type=\"button\"\n              >\n                <i class=\"fal fa-check\"></i>\n                {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n            </button>\n\n            <!-- Display btn del multiple img -->\n            <button\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n              (click)=\"displayConfirmImgSup()\"\n              class=\"button images-view__container__boxAction__delBtn danger\"\n              @insertRemoveAnnim\n              type=\"button\"\n            >\n                <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n            </button>\n\n            <!-- Confirm action -->\n            <div\n              class=\"images-view__container__boxAction__confirmSup\"\n              [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <div>\n                    <button\n                      class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                      (click)=\"cancelSup()\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.confirm' | translate }}\n                  </button>\n                </div>\n            </div>\n\n        </div>\n\n\n        <!-- Swith mosaic/list forma -->\n        <div class=\"field has-addons images-view__container__buttonBox\">\n            <div class=\"control\">\n                <div\n                  class=\"button is-lighted images-view__container__buttonBox__btn\"\n                  [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                  (click)=\"onSwitchFormatDisplayed(false)\"\n                >\n                    <span class=\"icon is-small\">\n                        <i class=\"far fa-th\"></i>\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"control\">\n                <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                        [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                        (click)=\"onSwitchFormatDisplayed(true)\"\n                >\n                  <span class=\"icon is-small\">\n                      <i class=\"fas fa-bars\"></i>\n                  </span>\n              </div>\n            </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n\n  <!-- Images section -->\n<ng-scrollbar\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n    'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n    'images-view__scroll--full': stateDisplayed === 'full',\n    'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n    'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n    'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n  <div #imgLibContainer class=\"images-view__wrapper\">\n    <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n      <mosaic-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n        [nbFakeImg]=\"nbFakeImg\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [isLoading]=\"isLoading\"\n        [fullSize]=\"fullSize\"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n      <table-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [isLoading]=\"isLoading\"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n  *ngIf=\"displayPexelsResults\"\n  class=\"images-view--pexels\"\n  [@easeInOut]=\"'in'\">\n  <pexels-lib\n    [searchValue]=\"tableFilters.searchValue\"\n    (showImgUploaded)=\"onShowImgUploaded()\"\n    [disableSearch]=\"true\"\n  >\n  </pexels-lib>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut,
         insertRemove
     ] });
@@ -3577,12 +3570,12 @@ class SelectComponent {
         this.onTouch = fn;
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, deps: [{ token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </ng-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </ng-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </ng-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i7.TranslateService }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { items: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -3691,7 +3684,7 @@ class ImgTabsComponent {
     }
 }
 ImgTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "maxLengthCardShow", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "maxLengthCardShow", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-tabs', template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n" }]
@@ -3749,7 +3742,7 @@ class ImgSelectionComponent {
     }
 }
 ImgSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!(isLoading$ | async); else Loading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!(isLoading$ | async); else Loading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-selection', template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!(isLoading$ | async); else Loading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n" }]
@@ -3760,9 +3753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class WzImgManagerComponent {
-    constructor(imgSelectionService, externalConfigService, userSettingsService, canvaService, imgEventService, domService) {
+    constructor(imgSelectionService, userSettingsService, canvaService, imgEventService, domService) {
         this.imgSelectionService = imgSelectionService;
-        this.externalConfigService = externalConfigService;
         this.userSettingsService = userSettingsService;
         this.canvaService = canvaService;
         this.imgEventService = imgEventService;
@@ -3807,7 +3799,6 @@ class WzImgManagerComponent {
         }
     }
     ngOnInit() {
-        this.externalConfigService.setExternalConfig(this.externalConfig);
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
         this.imgSelectionService.initImgSelectedList(null);
         this.selectImgEvent = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
@@ -3903,17 +3894,21 @@ class WzImgManagerComponent {
         this.listDisplayedEvent.unsubscribe();
     }
 }
-WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: ImgManagerConfigService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", externalConfig: "externalConfig", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [], ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
+WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component });
+WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
+        ImgManagerServiceProvider,
+        ImgSelectionServiceProvider
+    ], ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wz-img-manager', providers: [], template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: ImgManagerConfigService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }]; }, propDecorators: { stateDisplayed: [{
+            args: [{ selector: 'wz-img-manager', providers: [
+                        ImgManagerServiceProvider,
+                        ImgSelectionServiceProvider
+                    ], template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], showSelection: [{
                 type: Input
-            }], externalConfig: [{
-                type: Input
             }], forceToOpenCanva: [{
                 type: Input
             }], imgManagerClosed: [{
@@ -3978,6 +3973,14 @@ const pipes = [
     SelectFiltersPipe
 ];
 class WzImgManagerModule {
+    static withConfig(ApiService) {
+        return {
+            ngModule: WzImgManagerModule,
+            providers: [
+                ApiService
+            ]
+        };
+    }
 }
 WzImgManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 WzImgManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerModule, declarations: [WzImgManagerComponent,
@@ -4081,16 +4084,6 @@ class ImgApiDto {
 class ImgManagerConfigDto {
 }
 
-class ImgCDNConfigDTO {
-    constructor() {
-        this.url_raw_image = '';
-        this.url_100_image = '';
-        this.url_200_image = '';
-        this.url_400_image = '';
-        this.url_800_image = '';
-    }
-}
-
 /*
  * Public API Surface of wz-img-manager
  */
@@ -4099,5 +4092,6 @@ class ImgCDNConfigDTO {
  * Generated bundle index. Do not edit.
  */
 
-export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
+export { ApiService, CanvaButtonApi, CanvaService, ImgApiDto, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
+//# sourceMappingURL=wizishop-img-manager.mjs.map
 //# sourceMappingURL=wizishop-img-manager.mjs.map