@wizishop/img-manager 0.2.99 → 0.2.102

package/bundles/wizishop-img-manager.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@angular/animations'), require('@ngx-translate/core'), require('@wizishop/ng-wizi-bulma'), require('rxjs/operators'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event'), require('ngx-image-cropper'), require('@angular/cdk/table'), require('@angular/cdk/drag-drop'), require('uuid'), require('ngx-perfect-scrollbar')) :
-    typeof define === 'function' && define.amd ? define('@wizishop/img-manager', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@angular/animations', '@ngx-translate/core', '@wizishop/ng-wizi-bulma', 'rxjs/operators', '@angular/router', '@angular/common', '@angular/forms', 'ngx-scrollbar', 'ngx-scrollbar/reached-event', 'ngx-image-cropper', '@angular/cdk/table', '@angular/cdk/drag-drop', 'uuid', 'ngx-perfect-scrollbar'], factory) :
-    (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['~9']['0']['3'], global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk['drag-drop'], global.uuid, global['^10']['1']['1']));
-}(this, (function (exports, core, rxjs, http, animations, core$1, ngWiziBulma, operators, router, common, forms, ngxScrollbar, reachedEvent, ngxImageCropper, table, dragDrop, uuid, ngxPerfectScrollbar) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@ngx-translate/core'), require('@wizishop/ng-wizi-bulma'), require('rxjs/operators'), require('@angular/animations'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event'), require('ngx-image-cropper'), require('@angular/cdk/table'), require('@angular/cdk/drag-drop'), require('uuid'), require('ngx-perfect-scrollbar')) :
+    typeof define === 'function' && define.amd ? define('@wizishop/img-manager', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@ngx-translate/core', '@wizishop/ng-wizi-bulma', 'rxjs/operators', '@angular/animations', '@angular/router', '@angular/common', '@angular/forms', 'ngx-scrollbar', 'ngx-scrollbar/reached-event', 'ngx-image-cropper', '@angular/cdk/table', '@angular/cdk/drag-drop', 'uuid', 'ngx-perfect-scrollbar'], factory) :
+    (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global['~9']['0']['3'], global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk['drag-drop'], global.uuid, global['^10']['1']['1']));
+}(this, (function (exports, core, rxjs, http, core$1, ngWiziBulma, operators, animations, router, common, forms, ngxScrollbar, reachedEvent, ngxImageCropper, table, dragDrop, uuid, ngxPerfectScrollbar) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -603,9 +603,114 @@
         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: ngWiziBulma.NwbAlertService },
+            { type: core$1.TranslateService }
+        ]; };
+        AlertService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function AlertService_Factory() { return new AlertService(core["ɵɵinject"](ngWiziBulma.NwbAlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
+        AlertService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            }),
+            __metadata("design:paramtypes", [ngWiziBulma.NwbAlertService,
+                core$1.TranslateService])
+        ], AlertService);
+        return AlertService;
+    }());
+
+    var ImgEventService = /** @class */ (function () {
+        function ImgEventService() {
+            this.imgToEditEvent = new rxjs.Subject();
+            this.imgRemoved = new rxjs.Subject();
+            this.imgAdded = new rxjs.Subject();
+            this.listDisplayedChange = new rxjs.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 = core["ɵɵdefineInjectable"]({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
+        ImgEventService = __decorate([
+            core.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 rxjs.BehaviorSubject(null);
             this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
         }
@@ -621,6 +726,9 @@
         };
         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;
@@ -675,58 +783,84 @@
             };
             document.getElementsByTagName('head')[0].appendChild(node);
         };
-        CanvaService.ctorParameters = function () { return [
-            { type: ImgManagerConfigService }
-        ]; };
-        CanvaService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function CanvaService_Factory() { return new CanvaService(core["ɵɵinject"](ImgManagerConfigService)); }, token: CanvaService, providedIn: "root" });
-        CanvaService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            }),
-            __metadata("design:paramtypes", [ImgManagerConfigService])
-        ], CanvaService);
-        return CanvaService;
-    }());
-
-    var ImgEventService = /** @class */ (function () {
-        function ImgEventService() {
-            this.imgToEditEvent = new rxjs.Subject();
-            this.imgRemoved = new rxjs.Subject();
-            this.imgAdded = new rxjs.Subject();
-            this.listDisplayedChange = new rxjs.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(operators.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(operators.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 = core["ɵɵ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: core$1.TranslateService }
+        ]; };
+        CanvaService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function CanvaService_Factory() { return new CanvaService(core["ɵɵinject"](ImgManagerConfigService), core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](ImgEventService), core["ɵɵinject"](AlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: CanvaService, providedIn: "root" });
+        CanvaService = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
-            __metadata("design:paramtypes", [])
-        ], ImgEventService);
-        return ImgEventService;
+            __metadata("design:paramtypes", [ImgManagerConfigService,
+                ImgManagerService,
+                ImgEventService,
+                AlertService,
+                core$1.TranslateService])
+        ], CanvaService);
+        return CanvaService;
     }());
 
     var DomService = /** @class */ (function () {
@@ -779,6 +913,19 @@
             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;
@@ -927,6 +1074,11 @@
             core.Input(),
             __metadata("design:type", ImgManagerConfigDto)
         ], WzImgManagerComponent.prototype, "externalConfig", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], WzImgManagerComponent.prototype, "forceToOpenCanva", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object)
@@ -973,60 +1125,6 @@
         ]),
     ]);
 
-    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: ngWiziBulma.NwbAlertService },
-            { type: core$1.TranslateService }
-        ]; };
-        AlertService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function AlertService_Factory() { return new AlertService(core["ɵɵinject"](ngWiziBulma.NwbAlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
-        AlertService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            }),
-            __metadata("design:paramtypes", [ngWiziBulma.NwbAlertService,
-                core$1.TranslateService])
-        ], AlertService);
-        return AlertService;
-    }());
-
     var ImgUploadComponent = /** @class */ (function () {
         function ImgUploadComponent(imgManager, alertService, externalConfigService) {
             this.imgManager = imgManager;
@@ -1038,6 +1136,7 @@
             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();
@@ -1063,13 +1162,19 @@
             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));
                 }
             }
@@ -1084,7 +1189,13 @@
                 _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;
             });
         };
@@ -1099,6 +1210,12 @@
         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
@@ -1302,7 +1419,7 @@
         UploadListComponent = __decorate([
             core.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
                 ]
@@ -1645,6 +1762,7 @@
         };
         PexelLibComponent.prototype.search = function () {
             var _this = this;
+            console.log('search');
             if (this.isLoading) {
                 return;
             }
@@ -1657,6 +1775,8 @@
             }
             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) {
@@ -1771,7 +1891,7 @@
         PexelLibComponent = __decorate([
             core.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
@@ -2130,7 +2250,7 @@
         ImgEditorComponent = __decorate([
             core.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
                 ]
@@ -2141,13 +2261,8 @@
     }());
 
     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 core.EventEmitter();
             this.imgLoading = false;
             this.availableFormat = {
@@ -2166,10 +2281,6 @@
             };
             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();
@@ -2191,76 +2302,13 @@
             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: core$1.TranslateService },
-            { type: AlertService },
-            { type: core.Renderer2 }
+            { type: CanvaService }
         ]; };
         __decorate([
             core.Input(),
@@ -2273,14 +2321,9 @@
         CanvaBtnComponent = __decorate([
             core.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,
-                core$1.TranslateService,
-                AlertService,
-                core.Renderer2])
+            __metadata("design:paramtypes", [CanvaService])
         ], CanvaBtnComponent);
         return CanvaBtnComponent;
     }());
@@ -3356,7 +3399,7 @@
         ImagesViewComponent = __decorate([
             core.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
@@ -4977,9 +5020,9 @@
     exports.ɵbz = SelectFiltersPipe;
     exports.ɵc = UserSettingsService;
     exports.ɵd = ImgEventService;
-    exports.ɵe = DomService;
-    exports.ɵf = ImgTabsComponent;
-    exports.ɵg = AlertService;
+    exports.ɵe = AlertService;
+    exports.ɵf = DomService;
+    exports.ɵg = ImgTabsComponent;
     exports.ɵh = ImgUploadComponent;
     exports.ɵi = easeInOut;
     exports.ɵj = PexelLibComponent;