@wizishop/img-manager 0.2.99 → 0.2.102

package/fesm5/wizishop-img-manager.js

@@ -1,11 +1,11 @@
 import { __values, __decorate, __metadata, __extends, __assign, __read, __param, __spread } from 'tslib';
-import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive, Renderer2, ViewEncapsulation, Pipe, ApplicationRef, Inject, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
-import { ReplaySubject, Observable, BehaviorSubject, Subject, forkJoin } from 'rxjs';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive, ViewEncapsulation, Pipe, ApplicationRef, Renderer2, Inject, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
+import { ReplaySubject, Observable, Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { HttpParams, HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
-import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NwbAlertService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { debounceTime, map, take, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { take, debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { Router } from '@angular/router';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -402,9 +402,114 @@ var UserSettingsService = /** @class */ (function () {
     return UserSettingsService;
 }());
 
+var AlertService = /** @class */ (function () {
+    function AlertService(nwbAlertService, translateService) {
+        this.nwbAlertService = nwbAlertService;
+        this.translateService = translateService;
+        this.actionMsg = 'ImgManager.alert.action';
+        this.alertConfig = {
+            message: '',
+            duration: 5000
+        };
+    }
+    AlertService.prototype.openAlert = function (msgKey) {
+        var _this = this;
+        this.closePreviousAlert();
+        this.translateService.get(msgKey).subscribe(function (trans) {
+            _this.alertConfig.message = trans;
+            _this.setAlertColor(msgKey);
+            _this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
+            _this.alertRefComponent.afterClosed().subscribe();
+        });
+    };
+    AlertService.prototype.openAlertWithBackendRespons = function (msgKey, msgBackend) {
+        var _this = this;
+        this.translateService.get(msgKey).subscribe(function (trans) {
+            _this.alertConfig.message = trans;
+            _this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
+            _this.closePreviousAlert();
+            _this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
+            _this.alertRefComponent.afterClosed().subscribe();
+        });
+    };
+    AlertService.prototype.closePreviousAlert = function () {
+        if (this.alertRefComponent) {
+            this.alertRefComponent.dismiss();
+        }
+    };
+    AlertService.prototype.setAlertColor = function (msgKey) {
+        var isErrorMsg = /error/i.test(msgKey);
+        this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
+    };
+    AlertService.ctorParameters = function () { return [
+        { type: NwbAlertService },
+        { type: TranslateService }
+    ]; };
+    AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
+    AlertService = __decorate([
+        Injectable({
+            providedIn: 'root'
+        }),
+        __metadata("design:paramtypes", [NwbAlertService,
+            TranslateService])
+    ], AlertService);
+    return AlertService;
+}());
+
+var ImgEventService = /** @class */ (function () {
+    function ImgEventService() {
+        this.imgToEditEvent = new Subject();
+        this.imgRemoved = new Subject();
+        this.imgAdded = new Subject();
+        this.listDisplayedChange = new Subject();
+    }
+    ImgEventService.prototype.emitImgRemoved = function (id_file) {
+        this.imgRemoved.next(id_file);
+    };
+    ImgEventService.prototype.getImgRemovedEventListner = function () {
+        return this.imgRemoved.asObservable();
+    };
+    ImgEventService.prototype.emitImgToEdit = function (imgToEdit) {
+        this.imgToEditEvent.next(imgToEdit);
+    };
+    ImgEventService.prototype.getImgToEditEventListner = function () {
+        return this.imgToEditEvent.asObservable();
+    };
+    ImgEventService.prototype.emitImgAdded = function (id_file) {
+        this.imgAdded.next(id_file);
+    };
+    ImgEventService.prototype.getImgAddedEventListner = function () {
+        return this.imgAdded.asObservable();
+    };
+    ImgEventService.prototype.emitlistDisplayedChange = function (value) {
+        this.listDisplayedChange.next(value);
+    };
+    ImgEventService.prototype.getlistDisplayedChange = function () {
+        return this.listDisplayedChange.asObservable();
+    };
+    ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
+    ImgEventService = __decorate([
+        Injectable({
+            providedIn: 'root'
+        }),
+        __metadata("design:paramtypes", [])
+    ], ImgEventService);
+    return ImgEventService;
+}());
+
 var CanvaService = /** @class */ (function () {
-    function CanvaService(externalConfigService) {
+    function CanvaService(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
         this.externalConfigService = externalConfigService;
+        this.imgManager = imgManager;
+        this.wzImgEventService = wzImgEventService;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        this.imgLoading = false;
+        this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
+        this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
+        this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
+        this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
+        this.forceToOpenCanva = false;
         this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
         this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
     }
@@ -420,6 +525,9 @@ var CanvaService = /** @class */ (function () {
     };
     CanvaService.prototype.expectedImgSizesChange = function (mediaDTO) {
         this.bindExpectedImgSizeEvent.next(mediaDTO);
+        if (this.forceToOpenCanva) {
+            this.openCanva(parseInt(mediaDTO.image_width), parseInt(mediaDTO.image_height));
+        }
     };
     CanvaService.prototype.getCanvaApi = function () {
         var _this = this;
@@ -474,58 +582,84 @@ var CanvaService = /** @class */ (function () {
         };
         document.getElementsByTagName('head')[0].appendChild(node);
     };
-    CanvaService.ctorParameters = function () { return [
-        { type: ImgManagerConfigService }
-    ]; };
-    CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService)); }, token: CanvaService, providedIn: "root" });
-    CanvaService = __decorate([
-        Injectable({
-            providedIn: 'root'
-        }),
-        __metadata("design:paramtypes", [ImgManagerConfigService])
-    ], CanvaService);
-    return CanvaService;
-}());
-
-var ImgEventService = /** @class */ (function () {
-    function ImgEventService() {
-        this.imgToEditEvent = new Subject();
-        this.imgRemoved = new Subject();
-        this.imgAdded = new Subject();
-        this.listDisplayedChange = new Subject();
-    }
-    ImgEventService.prototype.emitImgRemoved = function (id_file) {
-        this.imgRemoved.next(id_file);
-    };
-    ImgEventService.prototype.getImgRemovedEventListner = function () {
-        return this.imgRemoved.asObservable();
-    };
-    ImgEventService.prototype.emitImgToEdit = function (imgToEdit) {
-        this.imgToEditEvent.next(imgToEdit);
-    };
-    ImgEventService.prototype.getImgToEditEventListner = function () {
-        return this.imgToEditEvent.asObservable();
+    CanvaService.prototype.openCanva = function (width, height) {
+        var _this = this;
+        if (this.imgLoading) {
+            return;
+        }
+        this.getCanvaApi().pipe(take(1)).subscribe(function (api) {
+            _this.canvaApi = api;
+            _this.addOverflowBody();
+            _this.createDesign(width, height);
+        });
     };
-    ImgEventService.prototype.emitImgAdded = function (id_file) {
-        this.imgAdded.next(id_file);
+    CanvaService.prototype.addOverflowBody = function () {
+        document.body.classList.add('ovh-canva');
     };
-    ImgEventService.prototype.getImgAddedEventListner = function () {
-        return this.imgAdded.asObservable();
+    CanvaService.prototype.removeOverflowBody = function () {
+        document.body.classList.remove('ovh-canva');
     };
-    ImgEventService.prototype.emitlistDisplayedChange = function (value) {
-        this.listDisplayedChange.next(value);
+    CanvaService.prototype.createDesign = function (width, height) {
+        var _this = this;
+        var createDesign = {
+            type: 'EtsyShopIcon',
+            dimensions: {
+                units: 'px',
+                width: width ? width : undefined,
+                height: height ? height : undefined,
+            },
+            publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
+        };
+        this.canvaApi.createDesign({
+            design: createDesign,
+            onDesignPublish: function (_a) {
+                var exportUrl = _a.exportUrl, designTitle = _a.designTitle;
+                return _this.designPublished(exportUrl, designTitle);
+            },
+            onDesignClose: function () {
+                _this.removeOverflowBody();
+            }
+        });
     };
-    ImgEventService.prototype.getlistDisplayedChange = function () {
-        return this.listDisplayedChange.asObservable();
+    CanvaService.prototype.designPublished = function (exportUrl, designTitle) {
+        var _this = this;
+        this.alertService.openAlert(this.uploadingImg);
+        this.imgLoading = true;
+        this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe(function (img) {
+            _this.imgLoading = false;
+            _this.removeOverflowBody();
+            _this.wzImgEventService.emitImgAdded(img.id_file);
+            _this.alertService.openAlert(_this.successUploadPhoto);
+        }, function (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);
+            }
+        });
     };
-    ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
-    ImgEventService = __decorate([
+    CanvaService.ctorParameters = function () { return [
+        { type: ImgManagerConfigService },
+        { type: ImgManagerService },
+        { type: ImgEventService },
+        { type: AlertService },
+        { type: TranslateService }
+    ]; };
+    CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService), ɵɵinject(ImgManagerService), ɵɵinject(ImgEventService), ɵɵinject(AlertService), ɵɵinject(TranslateService)); }, token: CanvaService, providedIn: "root" });
+    CanvaService = __decorate([
         Injectable({
             providedIn: 'root'
         }),
-        __metadata("design:paramtypes", [])
-    ], ImgEventService);
-    return ImgEventService;
+        __metadata("design:paramtypes", [ImgManagerConfigService,
+            ImgManagerService,
+            ImgEventService,
+            AlertService,
+            TranslateService])
+    ], CanvaService);
+    return CanvaService;
 }());
 
 var DomService = /** @class */ (function () {
@@ -578,6 +712,19 @@ var WzImgManagerComponent = /** @class */ (function () {
         this.listDisplayed = false;
         this.hideTab = false;
     }
+    Object.defineProperty(WzImgManagerComponent.prototype, "forceToOpenCanva", {
+        // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
+        // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
+        set: function (forceToOpenCanva) {
+            this.canvaService.forceToOpenCanva = !!forceToOpenCanva;
+            if (typeof forceToOpenCanva === 'boolean') {
+                return;
+            }
+            this.canvaService.expectedImgSizesChange(forceToOpenCanva);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(WzImgManagerComponent.prototype, "multipleImgMode", {
         get: function () {
             return this._multipleImgMode;
@@ -726,6 +873,11 @@ var WzImgManagerComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", ImgManagerConfigDto)
     ], WzImgManagerComponent.prototype, "externalConfig", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], WzImgManagerComponent.prototype, "forceToOpenCanva", null);
     __decorate([
         Output(),
         __metadata("design:type", Object)
@@ -772,60 +924,6 @@ var easeInOut = // the fade-in/fade-out animation.
     ]),
 ]);
 
-var AlertService = /** @class */ (function () {
-    function AlertService(nwbAlertService, translateService) {
-        this.nwbAlertService = nwbAlertService;
-        this.translateService = translateService;
-        this.actionMsg = 'ImgManager.alert.action';
-        this.alertConfig = {
-            message: '',
-            duration: 5000
-        };
-    }
-    AlertService.prototype.openAlert = function (msgKey) {
-        var _this = this;
-        this.closePreviousAlert();
-        this.translateService.get(msgKey).subscribe(function (trans) {
-            _this.alertConfig.message = trans;
-            _this.setAlertColor(msgKey);
-            _this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
-            _this.alertRefComponent.afterClosed().subscribe();
-        });
-    };
-    AlertService.prototype.openAlertWithBackendRespons = function (msgKey, msgBackend) {
-        var _this = this;
-        this.translateService.get(msgKey).subscribe(function (trans) {
-            _this.alertConfig.message = trans;
-            _this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
-            _this.closePreviousAlert();
-            _this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
-            _this.alertRefComponent.afterClosed().subscribe();
-        });
-    };
-    AlertService.prototype.closePreviousAlert = function () {
-        if (this.alertRefComponent) {
-            this.alertRefComponent.dismiss();
-        }
-    };
-    AlertService.prototype.setAlertColor = function (msgKey) {
-        var isErrorMsg = /error/i.test(msgKey);
-        this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
-    };
-    AlertService.ctorParameters = function () { return [
-        { type: NwbAlertService },
-        { type: TranslateService }
-    ]; };
-    AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
-    AlertService = __decorate([
-        Injectable({
-            providedIn: 'root'
-        }),
-        __metadata("design:paramtypes", [NwbAlertService,
-            TranslateService])
-    ], AlertService);
-    return AlertService;
-}());
-
 var ImgUploadComponent = /** @class */ (function () {
     function ImgUploadComponent(imgManager, alertService, externalConfigService) {
         this.imgManager = imgManager;
@@ -837,6 +935,7 @@ var ImgUploadComponent = /** @class */ (function () {
         this.loadingText = 'ImgManager.ImgUpload.loading';
         this.errorUploadingImg = 'ImgManager.ImgUpload.errorUploadingImg';
         this.errorNotImg = 'ImgManager.ImgUpload.errorNotImg';
+        this.MAX_IMAGE_SIZE = 10000000; // In bytes
     }
     ImgUploadComponent.prototype.ngOnInit = function () {
         this.assetsIcon = this.getAssets();
@@ -862,13 +961,19 @@ var ImgUploadComponent = /** @class */ (function () {
         try {
             for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
                 var file = files_1_1.value;
-                var formData = new FormData();
-                formData.append('image', file, file.name);
+                console.log('file', file.size);
                 if (!this.isFileImage(file.type)) {
                     this.alertService.openAlert(this.errorNotImg);
                     this.isLoading = false;
                     continue;
                 }
+                if (!this.isSizeValid(file.size)) {
+                    this.alertService.openAlert("L'image : " + file.name + " est trop grande (" + this.getImageSizeInKo(file.size) + "ko). Taille maximum accept\u00E9e: " + this.getImageSizeInKo(this.MAX_IMAGE_SIZE) + "ko");
+                    this.isLoading = false;
+                    continue;
+                }
+                var formData = new FormData();
+                formData.append('image', file, file.name);
                 imgToUploadList.push(this.imgManager.uploadFile(formData));
             }
         }
@@ -883,7 +988,13 @@ var ImgUploadComponent = /** @class */ (function () {
             _this.onImgUpload(img),
                 _this.isLoading = false;
         }, function (error) {
-            _this.alertService.openAlert(_this.errorUploadingImg);
+            var _a, _b;
+            if (((_b = (_a = error) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message) && error.statusText !== 'Bad Request') {
+                _this.alertService.openAlertWithBackendRespons(_this.errorUploadingImg, error.error.message);
+            }
+            else {
+                _this.alertService.openAlert(_this.errorUploadingImg);
+            }
             _this.isLoading = false;
         });
     };
@@ -898,6 +1009,12 @@ var ImgUploadComponent = /** @class */ (function () {
     ImgUploadComponent.prototype.isFileImage = function (fileType) {
         return fileType.split('/')[0] === 'image';
     };
+    ImgUploadComponent.prototype.isSizeValid = function (imageBytesSize) {
+        return imageBytesSize < this.MAX_IMAGE_SIZE;
+    };
+    ImgUploadComponent.prototype.getImageSizeInKo = function (size) {
+        return Math.round(size / 1024);
+    };
     /**
      * Remove the style of the drag and drop box
      * After an img is droped, the box is still grey
@@ -1101,7 +1218,7 @@ var UploadListComponent = /** @class */ (function () {
     UploadListComponent = __decorate([
         Component({
             selector: 'upload-list',
-            template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\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 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",
+            template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <perfect-scrollbar\n        #scrollable\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 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    </perfect-scrollbar>\n</div>\n",
             animations: [
                 easeInOut
             ]
@@ -1444,6 +1561,7 @@ var PexelLibComponent = /** @class */ (function () {
     };
     PexelLibComponent.prototype.search = function () {
         var _this = this;
+        console.log('search');
         if (this.isLoading) {
             return;
         }
@@ -1456,6 +1574,8 @@ var PexelLibComponent = /** @class */ (function () {
         }
         this.isLoading = true;
         var searchSub = this.wzImgLibService.searchOnPexels(this.searchValue, this.perPage, this.currentPage).subscribe(function (data) {
+            console.log('search ended here');
+            console.log(data);
             _this.wzImgLibDto = data;
             _this.nbResult = _this.wzImgLibDto.total_results;
             if (_this.nbResult) {
@@ -1570,7 +1690,7 @@ var PexelLibComponent = /** @class */ (function () {
     PexelLibComponent = __decorate([
         Component({
             selector: 'pexels-lib',
-            template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <ng-scrollbar\n        #scrollable\n        reachedOffset=\"50\"\n        [visibility]=\"'hover'\"\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                      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",
+            template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <perfect-scrollbar\n        scrollYMarginOffset=\"300\"\n        class=\"pexels-lib__scroll\"\n        [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n        (psYReachEnd)=\"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                      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  </perfect-scrollbar>\n</div>\n",
             animations: [
                 easeInOut,
                 listAnnimation
@@ -1929,7 +2049,7 @@ var ImgEditorComponent = /** @class */ (function () {
     ImgEditorComponent = __decorate([
         Component({
             selector: 'img-editor',
-            template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\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\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <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        </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",
+            template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <perfect-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\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <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        </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    </perfect-scrollbar>\n</div>\n",
             animations: [
                 easeInOut
             ]
@@ -1940,13 +2060,8 @@ var ImgEditorComponent = /** @class */ (function () {
 }());
 
 var CanvaBtnComponent = /** @class */ (function () {
-    function CanvaBtnComponent(canvaService, imgManager, wzImgEventService, translateService, alertService, renderer) {
+    function CanvaBtnComponent(canvaService) {
         this.canvaService = canvaService;
-        this.imgManager = imgManager;
-        this.wzImgEventService = wzImgEventService;
-        this.translateService = translateService;
-        this.alertService = alertService;
-        this.renderer = renderer;
         this.showImgUploaded = new EventEmitter();
         this.imgLoading = false;
         this.availableFormat = {
@@ -1965,10 +2080,6 @@ var CanvaBtnComponent = /** @class */ (function () {
         };
         this.openDropDownMenu = false;
         this.subs = [];
-        this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
-        this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
-        this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
-        this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
     }
     CanvaBtnComponent.prototype.ngOnInit = function () {
         this.canvaLogoRouteAssets = this.canvaService.getCanvaLogo();
@@ -1990,76 +2101,13 @@ var CanvaBtnComponent = /** @class */ (function () {
         this.subs.push(subExpectedImgSizesChange);
     };
     CanvaBtnComponent.prototype.onOpenCanva = function (width, height) {
-        var _this = this;
-        if (this.imgLoading) {
-            return;
-        }
-        var subCanvaApi = this.canvaService.getCanvaApi().subscribe(function (api) {
-            _this.canvaApi = api;
-            _this.addOverflowBody();
-            _this.createDesign(width, height);
-        });
-        this.subs.push(subCanvaApi);
-    };
-    CanvaBtnComponent.prototype.createDesign = function (width, height) {
-        var _this = this;
-        var createDesign = {
-            type: 'EtsyShopIcon',
-            dimensions: {
-                units: 'px',
-                width: width ? width : undefined,
-                height: height ? height : undefined,
-            },
-            publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
-        };
-        this.canvaApi.createDesign({
-            design: createDesign,
-            onDesignPublish: function (_a) {
-                var exportUrl = _a.exportUrl, designTitle = _a.designTitle;
-                return _this.designPublished(exportUrl, designTitle);
-            },
-            onDesignClose: function () {
-                _this.removeOverflowBody();
-            }
-        });
-    };
-    CanvaBtnComponent.prototype.designPublished = function (exportUrl, designTitle) {
-        var _this = this;
-        this.alertService.openAlert(this.uploadingImg);
-        this.imgLoading = true;
-        var subUploadImg = this.imgManager.uploadFileByUrl(exportUrl, designTitle).subscribe(function (img) {
-            _this.imgLoading = false;
-            _this.removeOverflowBody();
-            _this.wzImgEventService.emitImgAdded(img.id_file);
-            _this.alertService.openAlert(_this.successUploadPhoto);
-        }, function (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.subs.push(subUploadImg);
-    };
-    CanvaBtnComponent.prototype.addOverflowBody = function () {
-        this.renderer.addClass(document.body, 'ovh-canva');
-    };
-    CanvaBtnComponent.prototype.removeOverflowBody = function () {
-        this.renderer.removeClass(document.body, 'ovh-canva');
+        this.canvaService.openCanva(width, height);
     };
     CanvaBtnComponent.prototype.ngOnDestroy = function () {
         this.subs.forEach(function (sub) { return sub.unsubscribe(); });
     };
     CanvaBtnComponent.ctorParameters = function () { return [
-        { type: CanvaService },
-        { type: ImgManagerService },
-        { type: ImgEventService },
-        { type: TranslateService },
-        { type: AlertService },
-        { type: Renderer2 }
+        { type: CanvaService }
     ]; };
     __decorate([
         Input(),
@@ -2072,14 +2120,9 @@ var CanvaBtnComponent = /** @class */ (function () {
     CanvaBtnComponent = __decorate([
         Component({
             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            #scrollable\n            [visibility]=\"'hover'\"\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"
+            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        <perfect-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        </perfect-scrollbar>\n    </div>\n</div>\n"
         }),
-        __metadata("design:paramtypes", [CanvaService,
-            ImgManagerService,
-            ImgEventService,
-            TranslateService,
-            AlertService,
-            Renderer2])
+        __metadata("design:paramtypes", [CanvaService])
     ], CanvaBtnComponent);
     return CanvaBtnComponent;
 }());
@@ -3155,7 +3198,7 @@ var ImagesViewComponent = /** @class */ (function () {
     ImagesViewComponent = __decorate([
         Component({
             selector: 'images-view',
-            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            <!-- S\u00E9lectionner -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\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            >\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                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\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  #scrollable\n  [visibility]=\"'native'\"\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",
+            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            <!-- S\u00E9lectionner -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\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            >\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                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\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<perfect-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</perfect-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",
             animations: [
                 easeInOut,
                 insertRemove
@@ -4744,5 +4787,5 @@ var ImgCDNConfigDTO = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
+export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, AlertService as ɵe, DomService as ɵf, ImgTabsComponent as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
 //# sourceMappingURL=wizishop-img-manager.js.map