@wizishop/img-manager 0.2.97 → 0.2.100

package/assets/i18n/fr.json

@@ -1 +1 @@
-{"ImgManager.CanvaBtn.bigSquare":"Grand","ImgManager.CanvaBtn.createImg":"Créer une image avec","ImgManager.CanvaBtn.createImg.title":"Créer une image avec Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Erreur : le titre de l'image provenant de Canva n'a pas pu être récupéré.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Erreur : l'image provenant de Canva n'a pas pu être téléchargée.","ImgManager.CanvaBtn.info":"Sélectionner un format","ImgManager.CanvaBtn.mediumSquare":"Moyen","ImgManager.CanvaBtn.publish":"Importer","ImgManager.CanvaBtn.recommanded":"Recommandé","ImgManager.CanvaBtn.smallSquare":"Petit","ImgManager.CanvaBtn.successImport":"Votre image a bien été importée.","ImgManager.CanvaBtn.uploadingImg":"Chargement de l'image en cours.","ImgManager.ImgCard.confirmDeleteImg":"Êtes-vous sûr de supprimer cette image ?","ImgManager.ImgCard.del":"Supprimer","ImgManager.ImgCard.download":"Télécharger","ImgManager.ImgCard.edit":"Éditer","ImgManager.ImgCard.select":"Sélectionner","ImgManager.ImgCard.validImgSmall":"Sélectionner","ImgManager.ImgEditor.config.AntiSchedule":"Sens anti-horaire","ImgManager.ImgEditor.config.dezoom":"Zoomer moins","ImgManager.ImgEditor.config.flipHoriz":"Retournement Horizontal","ImgManager.ImgEditor.config.flipVert":"Retournement Vertical","ImgManager.ImgEditor.config.free":"Format libre","ImgManager.ImgEditor.config.landscape":"Paysage","ImgManager.ImgEditor.config.origin":"Format d'origine","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Sens horaire","ImgManager.ImgEditor.config.square":"Carré","ImgManager.ImgEditor.config.zoom":"Zoomer plus","ImgManager.ImgEditor.copytoClipBoard":"Copié !","ImgManager.ImgEditor.crop":"Recadrer","ImgManager.ImgEditor.display":"Affichage","ImgManager.ImgEditor.msgFailLoad":"Erreur : Veuillez recommencer.","ImgManager.ImgEditor.msgFailSave":"Erreur : L'image n'a pu être sauvegardée.<br/>Veuillez recommencer.","ImgManager.ImgEditor.nameEx":"Par ex: T-shirt noir","ImgManager.ImgEditor.NameInfo":"Le nom de l'image est utilisé pour définir l'attribut alt.","ImgManager.ImgEditor.restart":"Réinitialiser","ImgManager.ImgEditor.rotation":"Rotation","ImgManager.ImgEditor.saveBtn":"Enregistrer et Fermer","ImgManager.ImgEditor.Valid":"Valider","ImgManager.ImgEditor.ValidtToolTip":"Cliquez ici pour rogner l'image","ImgManager.ImgLib.cancel":"Annuler","ImgManager.ImgLib.confirm":"Confirmer","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.delMlt":"Supprimer","ImgManager.ImgLib.errorGetAllImg":"Erreur : Vos images n'ont pas pu être récupérées.","ImgManager.ImgLib.errorGetCanvaImg":"Erreur : Votre image Canva n'a pas pu être récupérée.","ImgManager.ImgLib.errorGetTotalImg":"Erreur : Le nombre total d'images n'a pas été récupéré.","ImgManager.ImgLib.imgNameSaved":"Nom de l'image sauvegardé.","ImgManager.ImgLib.lastImgs":"Vos dernières images","ImgManager.ImgLib.nbImg":"Nombre d'images","ImgManager.ImgLib.noImgFound":"Aucune image trouvée.<br/>Affichage d'images gratuites.","ImgManager.ImgLib.savingImgName":"Sauvegarde en cours...","ImgManager.ImgLib.select":"Sélectionner","ImgManager.ImgList.download":"Télécharger","ImgManager.ImgList.edit":"Éditer","ImgManager.ImgList.errorAlreadyUsed":"Cette image ne peut pas être supprimée, car elle est déjà utilisée.","ImgManager.ImgList.errorRemoveImg":"Erreur : Certaines images n'ont pas pu être supprimées.","ImgManager.ImgList.errorRenameImg":"Erreur : Certaines images n'ont pas pu être renomées.","ImgManager.ImgList.remove":"Supprimer","ImgManager.ImgList.titleImgName":"Nom de l'image","ImgManager.ImgList.titleResolution":"Résolution","ImgManager.ImgSelection.deleteImg":"Retirer","ImgManager.ImgSelection.tooltips":"Cliquez pour changer l'ordre de l'image","ImgManager.ImgSelection.unselect":"Glissez l'image ici pour la retirer de la sélection","ImgManager.ImgUpload.dropImg":"Glisser-déposer votre image ici","ImgManager.ImgUpload.errorNotImg":"Erreur : Seul les images peuvent être importées.","ImgManager.ImgUpload.errorUploadingImg":"Erreur : Une image n'a pas pu être importée.","ImgManager.ImgUpload.loading":"Chargement en cours.","ImgManager.ImgUpload.or":"ou","ImgManager.ImgUpload.selectImg":"Choisir les images à importer","ImgManager.PexelLib.errorRetrievePhotos":"Erreur : Les images Pexel n'ont pas été récupérées.","ImgManager.PexelLib.errorUploadPhoto":"Erreur : L'image n'a pas pu être importée.","ImgManager.PexelLib.import":"Importer","ImgManager.PexelLib.importation":"Importation","ImgManager.PexelLib.landscape":"Paysage","ImgManager.PexelLib.nbImgFound":"Nombre d'images gratuites trouvées","ImgManager.PexelLib.noResult":"Aucune image trouvée.","ImgManager.PexelLib.original":"Original","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Votre image a été importée avec succès !","ImgManager.PexelLib.untitled":"Sans titre","ImgManager.PexelLib.uploadingImg":"Chargement de l'image en cours.","ImgManager.SearchBar.placeholder":"Nom de l'image à rechercher","ImgManager.snackBar.action":"Voir l'image","ImgManager.Tabs.addImg":"Ajouter une image","ImgManager.Tabs.Editor":"Editeur d'image","ImgManager.Tabs.freeImgLib":"Bibliothèque d’images gratuites","ImgManager.Tabs.imgLib":"Vos images","ImgManager.UploadList.imgSuccessImport":"images importées et optimisées pour le SEO","ImgManager.UploadList.imgSuccessImportOne":"image importée et optimisée pour le SEO","ImgManager.UploadList.properties.imgName":"Nom de l'image","ImgManager.UploadList.properties.imgSize":"Taille de l'image originale","ImgManager.UploadList.properties.imgURL":"Url de l'image","ImgManager.UploadList.properties.imgWeight":"Taille du fichier original","ImgManager.UploadList.seo.cdn":"Ajout dans le CDN.","ImgManager.UploadList.seo.cdnTooltips":"Les images que vous ajoutez sur votre site marchand sont envoyées directement vers notre CDN (Content Delivery Network). Cela permet de charger les visuels depuis les serveurs les plus proches de l'utilisateur.","ImgManager.UploadList.seo.lazyloading":"Lazyloading automatique.","ImgManager.UploadList.seo.lazyloadingTooltips":"Avec le lazyloading, le contenu se charge au fur et à mesure que l’internaute descend (scroll) dans la page. Ceci permet de charger uniquement le contenu visible.","ImgManager.UploadList.seo.rezise":"Redimensionnement et compression.","ImgManager.UploadList.seo.reziseTooltips":"Lors de l’import de votre image sur WiziShop, ce sont plus de 22 formats qui sont créés pour s’adapter aux différentes tailles d’écran. Cette optimisation nous permet d’envoyer une taille de visuel différente et compressée selon le support de l’internaute.","ImgManager.UploadList.seo.title":"Optimisations SEO","ImgManager.UploadList.seo.webp":"Génération des Webp.","ImgManager.UploadList.seo.webpTooltips":"Dès lors que vous ajoutez une image sur votre site, elle va être accessible au format standard, mais aussi se convertir automatiquement au format WebP pour Google. Ce format permet de compresser, au maximum, les images présentes sur votre boutique pour les charger très rapidement.","ImgManager.webElement.infoBulle":"Le gestionnaire d'image vous permet de <strong>télécharger</strong> des images, les <strong>sélectionner </strong>et appliquer certains <strong>effets</strong>(recadrage, rotations...).\n<br/><br/>\nIl est conseillé d'avoir <strong>plusieurs photos</strong> du produit (3 ou 4) dans divers positions ou situations.","ImgManager.webElement.OpenBtn":"Ajouter des photos","ImgManager.webElement.photosTitle":"Photos","no":"non","PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","PaginationComponent.page":"Aller à la page","wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","yes":"oui"}
+{"ImgManager.CanvaBtn.bigSquare":"Grand","ImgManager.CanvaBtn.createImg":"Créer une image avec","ImgManager.CanvaBtn.createImg.title":"Créer une image avec Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Erreur : le titre de l'image provenant de Canva n'a pas pu être récupéré.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Erreur : l'image provenant de Canva n'a pas pu être téléchargée.","ImgManager.CanvaBtn.info":"Sélectionner un format","ImgManager.CanvaBtn.mediumSquare":"Moyen","ImgManager.CanvaBtn.publish":"Importer","ImgManager.CanvaBtn.recommanded":"Recommandé","ImgManager.CanvaBtn.smallSquare":"Petit","ImgManager.CanvaBtn.successImport":"Votre image a bien été importée.","ImgManager.CanvaBtn.uploadingImg":"Chargement de l'image en cours.","ImgManager.ImgCard.confirmDeleteImg":"Êtes-vous sûr de supprimer cette image ?","ImgManager.ImgCard.del":"Supprimer","ImgManager.ImgCard.download":"Télécharger","ImgManager.ImgCard.edit":"Éditer","ImgManager.ImgCard.select":"Sélectionner","ImgManager.ImgCard.validImgSmall":"Sélectionner","ImgManager.ImgEditor.config.AntiSchedule":"Sens anti-horaire","ImgManager.ImgEditor.config.dezoom":"Zoomer moins","ImgManager.ImgEditor.config.flipHoriz":"Retournement Horizontal","ImgManager.ImgEditor.config.flipVert":"Retournement Vertical","ImgManager.ImgEditor.config.free":"Format libre","ImgManager.ImgEditor.config.landscape":"Paysage","ImgManager.ImgEditor.config.origin":"Format d'origine","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Sens horaire","ImgManager.ImgEditor.config.square":"Carré","ImgManager.ImgEditor.config.zoom":"Zoomer plus","ImgManager.ImgEditor.copytoClipBoard":"Copié !","ImgManager.ImgEditor.crop":"Recadrer","ImgManager.ImgEditor.display":"Affichage","ImgManager.ImgEditor.msgFailLoad":"Erreur : Veuillez recommencer.","ImgManager.ImgEditor.msgFailSave":"Erreur : L'image n'a pu être sauvegardée.<br/>Veuillez recommencer.","ImgManager.ImgEditor.nameEx":"Par ex: T-shirt noir","ImgManager.ImgEditor.NameInfo":"Le nom de l'image est utilisé pour définir l'attribut alt.","ImgManager.ImgEditor.restart":"Réinitialiser","ImgManager.ImgEditor.rotation":"Rotation","ImgManager.ImgEditor.saveBtn":"Enregistrer et Fermer","ImgManager.ImgEditor.Valid":"Valider","ImgManager.ImgEditor.ValidtToolTip":"Cliquez ici pour rogner l'image","ImgManager.ImgLib.cancel":"Annuler","ImgManager.ImgLib.confirm":"Confirmer","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.delMlt":"Supprimer","ImgManager.ImgLib.errorGetAllImg":"Erreur : Vos images n'ont pas pu être récupérées.","ImgManager.ImgLib.errorGetCanvaImg":"Erreur : Votre image Canva n'a pas pu être récupérée.","ImgManager.ImgLib.errorGetTotalImg":"Erreur : Le nombre total d'images n'a pas été récupéré.","ImgManager.ImgLib.imgNameSaved":"Nom de l'image sauvegardé.","ImgManager.ImgLib.lastImgs":"Vos dernières images","ImgManager.ImgLib.nbImg":"Nombre d'images","ImgManager.ImgLib.noImgFound":"Aucune image trouvée.<br/>Affichage d'images gratuites.","ImgManager.ImgLib.savingImgName":"Sauvegarde en cours...","ImgManager.ImgLib.select":"Sélectionner","ImgManager.ImgList.download":"Télécharger","ImgManager.ImgList.edit":"Éditer","ImgManager.ImgList.errorAlreadyUsed":"Cette image ne peut pas être supprimée, car elle est déjà utilisée.","ImgManager.ImgList.errorRemoveImg":"Erreur : Certaines images n'ont pas pu être supprimées.","ImgManager.ImgList.errorRenameImg":"Erreur : Certaines images n'ont pas pu être renommées.","ImgManager.ImgList.remove":"Supprimer","ImgManager.ImgList.titleImgName":"Nom de l'image","ImgManager.ImgList.titleResolution":"Résolution","ImgManager.ImgSelection.deleteImg":"Retirer","ImgManager.ImgSelection.tooltips":"Cliquez pour changer l'ordre de l'image","ImgManager.ImgSelection.unselect":"Glissez l'image ici pour la retirer de la sélection","ImgManager.ImgUpload.dropImg":"Glisser-déposer votre image ici","ImgManager.ImgUpload.errorNotImg":"Erreur : Seul les images peuvent être importées.","ImgManager.ImgUpload.errorUploadingImg":"Erreur : Une image n'a pas pu être importée.","ImgManager.ImgUpload.loading":"Chargement en cours.","ImgManager.ImgUpload.or":"ou","ImgManager.ImgUpload.selectImg":"Choisir les images à importer","ImgManager.PexelLib.errorRetrievePhotos":"Erreur : Les images Pexel n'ont pas été récupérées.","ImgManager.PexelLib.errorUploadPhoto":"Erreur : L'image n'a pas pu être importée.","ImgManager.PexelLib.import":"Importer","ImgManager.PexelLib.importation":"Importation","ImgManager.PexelLib.landscape":"Paysage","ImgManager.PexelLib.nbImgFound":"Nombre d'images gratuites trouvées","ImgManager.PexelLib.noResult":"Aucune image trouvée.","ImgManager.PexelLib.original":"Original","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Votre image a été importée avec succès !","ImgManager.PexelLib.untitled":"Sans titre","ImgManager.PexelLib.uploadingImg":"Chargement de l'image en cours.","ImgManager.SearchBar.placeholder":"Nom de l'image à rechercher","ImgManager.snackBar.action":"Voir l'image","ImgManager.Tabs.addImg":"Ajouter une image","ImgManager.Tabs.Editor":"Editeur d'image","ImgManager.Tabs.freeImgLib":"Bibliothèque d’images gratuites","ImgManager.Tabs.imgLib":"Vos images","ImgManager.UploadList.imgSuccessImport":"images importées et optimisées pour le SEO","ImgManager.UploadList.imgSuccessImportOne":"image importée et optimisée pour le SEO","ImgManager.UploadList.properties.imgName":"Nom de l'image","ImgManager.UploadList.properties.imgSize":"Taille de l'image originale","ImgManager.UploadList.properties.imgURL":"Url de l'image","ImgManager.UploadList.properties.imgWeight":"Taille du fichier original","ImgManager.UploadList.seo.cdn":"Ajout dans le CDN.","ImgManager.UploadList.seo.cdnTooltips":"Les images que vous ajoutez sur votre site marchand sont envoyées directement vers notre CDN (Content Delivery Network). Cela permet de charger les visuels depuis les serveurs les plus proches de l'utilisateur.","ImgManager.UploadList.seo.lazyloading":"Lazyloading automatique.","ImgManager.UploadList.seo.lazyloadingTooltips":"Avec le lazyloading, le contenu se charge au fur et à mesure que l’internaute descend (scroll) dans la page. Ceci permet de charger uniquement le contenu visible.","ImgManager.UploadList.seo.rezise":"Redimensionnement et compression.","ImgManager.UploadList.seo.reziseTooltips":"Lors de l’import de votre image sur WiziShop, ce sont plus de 22 formats qui sont créés pour s’adapter aux différentes tailles d’écran. Cette optimisation nous permet d’envoyer une taille de visuel différente et compressée selon le support de l’internaute.","ImgManager.UploadList.seo.title":"Optimisations SEO","ImgManager.UploadList.seo.webp":"Génération des Webp.","ImgManager.UploadList.seo.webpTooltips":"Dès lors que vous ajoutez une image sur votre site, elle va être accessible au format standard, mais aussi se convertir automatiquement au format WebP pour Google. Ce format permet de compresser, au maximum, les images présentes sur votre boutique pour les charger très rapidement.","ImgManager.webElement.infoBulle":"Le gestionnaire d'image vous permet de <strong>télécharger</strong> des images, les <strong>sélectionner </strong>et appliquer certains <strong>effets</strong>(recadrage, rotations...).\n<br/><br/>\nIl est conseillé d'avoir <strong>plusieurs photos</strong> du produit (3 ou 4) dans divers positions ou situations.","ImgManager.webElement.OpenBtn":"Ajouter des photos","ImgManager.webElement.photosTitle":"Photos","no":"non","PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","PaginationComponent.page":"Aller à la page","wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","yes":"oui"}

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;
@@ -1430,7 +1528,7 @@
         ImgTabsComponent = __decorate([
             core.Component({
                 selector: 'img-tabs',
-                template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
+                template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
             }),
             __metadata("design:paramtypes", [ImgEventService,
                 AlertService,
@@ -2141,13 +2239,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 +2259,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 +2280,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(),
@@ -2275,12 +2301,7 @@
                 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"
             }),
-            __metadata("design:paramtypes", [CanvaService,
-                ImgManagerService,
-                ImgEventService,
-                core$1.TranslateService,
-                AlertService,
-                core.Renderer2])
+            __metadata("design:paramtypes", [CanvaService])
         ], CanvaBtnComponent);
         return CanvaBtnComponent;
     }());
@@ -2965,9 +2986,9 @@
             this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
         }
         ImagesViewComponent.prototype.ngOnInit = function () {
-            if (this.maxLengthCardShow) {
-                this.reducePictureListMaxLength();
-            }
+            /* if (this.maxLengthCardShow) {
+              this.reducePictureListMaxLength();
+            } */
             this.setEvents();
             this.imgSelectedList = this.imgSelectionService.getImgSelection();
         };
@@ -2978,9 +2999,9 @@
                 this.savePictureList = this.picturesList;
             }
         };
-        ImagesViewComponent.prototype.reducePictureListMaxLength = function () {
-            this.picturesList.splice(0, this.maxLengthCardShow);
-        };
+        /* reducePictureListMaxLength() {
+          this.picturesList.splice(0, this.maxLengthCardShow);
+        } */
         ImagesViewComponent.prototype.getImgList = function () {
             this.filtersChanged.next();
         };
@@ -3006,6 +3027,7 @@
             this.getImgList();
         };
         ImagesViewComponent.prototype.onRenamePicture = function (pictureRenamed) {
+            console.log('onRenamePicture pictureRenamed', pictureRenamed);
             this.renamePictureService.onRenamePicture(pictureRenamed);
         };
         ImagesViewComponent.prototype.removeListImg = function () {
@@ -3112,6 +3134,10 @@
             return imgSizesConfig;
         };
         ImagesViewComponent.prototype.getTotalImgPerPage = function () {
+            if (this.nbRowToShow) {
+                var nbImgPerLine = this.stateDisplayed === 'full' ? this.nbMinImgPerLine : this.nbMaxImgPerLine;
+                return nbImgPerLine * this.nbRowToShow;
+            }
             var total = this.nbMinImgPerLine;
             while (total < 30 || total % this.nbMaxImgPerLine !== 0 || total % this.nbMinImgPerLine !== 0) {
                 total += this.nbMinImgPerLine;
@@ -3119,8 +3145,9 @@
             return total;
         };
         ImagesViewComponent.prototype.setParams = function () {
+            var _a;
             this.params = {
-                limit: this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString(),
+                limit: ((_a = this.maxLengthCardShow) === null || _a === void 0 ? void 0 : _a.toString()) || (this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString()),
                 page: this.tableFilters.currentPage.toString()
             };
             if (this.tableFilters.searchValue) {
@@ -3267,9 +3294,6 @@
                 _this.length = _this.isTotalRetieved ? _this.length : data.totalRecords;
                 _this.tableFilters.totalItems = _this.isTotalRetieved ? _this.tableFilters.totalItems : data.totalRecords;
                 _this.tableFilters.itemsPerPage = _this.tableFilters.itemsPerPage ? _this.tableFilters.itemsPerPage : _this.pageSize;
-                if (_this.maxLengthCardShow) {
-                    _this.picturesList = _this.picturesList.splice(0, 8);
-                }
                 // Display Pexels if no result
                 if (data.totalRecords === 0) {
                     _this.displayPexelsLib();
@@ -3330,6 +3354,10 @@
             core.Input(),
             __metadata("design:type", Number)
         ], ImagesViewComponent.prototype, "maxLengthCardShow", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], ImagesViewComponent.prototype, "nbRowToShow", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -4970,9 +4998,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;