@wizishop/img-manager 0.2.98 → 0.2.101

package/fesm2015/wizishop-img-manager.js

@@ -1,11 +1,11 @@
 import { __decorate, __metadata, __param } from 'tslib';
-import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive, Renderer2, ViewEncapsulation, Pipe, ApplicationRef, Inject, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
-import { ReplaySubject, Observable, BehaviorSubject, Subject, forkJoin } from 'rxjs';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive, ViewEncapsulation, Pipe, ApplicationRef, Renderer2, Inject, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
+import { ReplaySubject, Observable, Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { HttpParams, HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
-import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NwbAlertService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { debounceTime, map, take, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { take, debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { Router } from '@angular/router';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -374,9 +374,110 @@ UserSettingsService = __decorate([
     __metadata("design:paramtypes", [])
 ], UserSettingsService);
 
+let AlertService = class AlertService {
+    constructor(nwbAlertService, translateService) {
+        this.nwbAlertService = nwbAlertService;
+        this.translateService = translateService;
+        this.actionMsg = 'ImgManager.alert.action';
+        this.alertConfig = {
+            message: '',
+            duration: 5000
+        };
+    }
+    openAlert(msgKey) {
+        this.closePreviousAlert();
+        this.translateService.get(msgKey).subscribe(trans => {
+            this.alertConfig.message = trans;
+            this.setAlertColor(msgKey);
+            this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
+            this.alertRefComponent.afterClosed().subscribe();
+        });
+    }
+    openAlertWithBackendRespons(msgKey, msgBackend) {
+        this.translateService.get(msgKey).subscribe(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();
+        });
+    }
+    closePreviousAlert() {
+        if (this.alertRefComponent) {
+            this.alertRefComponent.dismiss();
+        }
+    }
+    setAlertColor(msgKey) {
+        const isErrorMsg = /error/i.test(msgKey);
+        this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
+    }
+};
+AlertService.ctorParameters = () => [
+    { type: NwbAlertService },
+    { type: TranslateService }
+];
+AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
+AlertService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    }),
+    __metadata("design:paramtypes", [NwbAlertService,
+        TranslateService])
+], AlertService);
+
+let ImgEventService = class ImgEventService {
+    constructor() {
+        this.imgToEditEvent = new Subject();
+        this.imgRemoved = new Subject();
+        this.imgAdded = new Subject();
+        this.listDisplayedChange = new Subject();
+    }
+    emitImgRemoved(id_file) {
+        this.imgRemoved.next(id_file);
+    }
+    getImgRemovedEventListner() {
+        return this.imgRemoved.asObservable();
+    }
+    emitImgToEdit(imgToEdit) {
+        this.imgToEditEvent.next(imgToEdit);
+    }
+    getImgToEditEventListner() {
+        return this.imgToEditEvent.asObservable();
+    }
+    emitImgAdded(id_file) {
+        this.imgAdded.next(id_file);
+    }
+    getImgAddedEventListner() {
+        return this.imgAdded.asObservable();
+    }
+    emitlistDisplayedChange(value) {
+        this.listDisplayedChange.next(value);
+    }
+    getlistDisplayedChange() {
+        return this.listDisplayedChange.asObservable();
+    }
+};
+ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
+ImgEventService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    }),
+    __metadata("design:paramtypes", [])
+], ImgEventService);
+
 let CanvaService = class CanvaService {
-    constructor(externalConfigService) {
+    constructor(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
         this.externalConfigService = externalConfigService;
+        this.imgManager = imgManager;
+        this.wzImgEventService = wzImgEventService;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        this.imgLoading = false;
+        this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
+        this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
+        this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
+        this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
+        this.forceToOpenCanva = false;
         this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
         this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
     }
@@ -392,6 +493,9 @@ let CanvaService = class CanvaService {
     }
     expectedImgSizesChange(mediaDTO) {
         this.bindExpectedImgSizeEvent.next(mediaDTO);
+        if (this.forceToOpenCanva) {
+            this.openCanva(parseInt(mediaDTO.image_width), parseInt(mediaDTO.image_height));
+        }
     }
     getCanvaApi() {
         if (!this.canvaApiURL || !this.canvaApiKey) {
@@ -443,57 +547,78 @@ let CanvaService = class CanvaService {
         };
         document.getElementsByTagName('head')[0].appendChild(node);
     }
-};
-CanvaService.ctorParameters = () => [
-    { type: ImgManagerConfigService }
-];
-CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService)); }, token: CanvaService, providedIn: "root" });
-CanvaService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    }),
-    __metadata("design:paramtypes", [ImgManagerConfigService])
-], CanvaService);
-
-let ImgEventService = class ImgEventService {
-    constructor() {
-        this.imgToEditEvent = new Subject();
-        this.imgRemoved = new Subject();
-        this.imgAdded = new Subject();
-        this.listDisplayedChange = new Subject();
-    }
-    emitImgRemoved(id_file) {
-        this.imgRemoved.next(id_file);
-    }
-    getImgRemovedEventListner() {
-        return this.imgRemoved.asObservable();
-    }
-    emitImgToEdit(imgToEdit) {
-        this.imgToEditEvent.next(imgToEdit);
-    }
-    getImgToEditEventListner() {
-        return this.imgToEditEvent.asObservable();
+    openCanva(width, height) {
+        if (this.imgLoading) {
+            return;
+        }
+        this.getCanvaApi().pipe(take(1)).subscribe((api) => {
+            this.canvaApi = api;
+            this.addOverflowBody();
+            this.createDesign(width, height);
+        });
     }
-    emitImgAdded(id_file) {
-        this.imgAdded.next(id_file);
+    addOverflowBody() {
+        document.body.classList.add('ovh-canva');
     }
-    getImgAddedEventListner() {
-        return this.imgAdded.asObservable();
+    removeOverflowBody() {
+        document.body.classList.remove('ovh-canva');
     }
-    emitlistDisplayedChange(value) {
-        this.listDisplayedChange.next(value);
+    createDesign(width, height) {
+        const 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: ({ exportUrl, designTitle }) => this.designPublished(exportUrl, designTitle),
+            onDesignClose: () => {
+                this.removeOverflowBody();
+            }
+        });
     }
-    getlistDisplayedChange() {
-        return this.listDisplayedChange.asObservable();
+    designPublished(exportUrl, designTitle) {
+        this.alertService.openAlert(this.uploadingImg);
+        this.imgLoading = true;
+        this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe((img) => {
+            this.imgLoading = false;
+            this.removeOverflowBody();
+            this.wzImgEventService.emitImgAdded(img.id_file);
+            this.alertService.openAlert(this.successUploadPhoto);
+        }, error => {
+            this.imgLoading = false;
+            this.removeOverflowBody();
+            if (error.error.code === 406 && error.error.message) {
+                this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
+            }
+            else {
+                this.alertService.openAlert(this.errorUploadCanvaImg);
+            }
+        });
     }
 };
-ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
-ImgEventService = __decorate([
+CanvaService.ctorParameters = () => [
+    { type: ImgManagerConfigService },
+    { type: ImgManagerService },
+    { type: ImgEventService },
+    { type: AlertService },
+    { type: TranslateService }
+];
+CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService), ɵɵinject(ImgManagerService), ɵɵinject(ImgEventService), ɵɵinject(AlertService), ɵɵinject(TranslateService)); }, token: CanvaService, providedIn: "root" });
+CanvaService = __decorate([
     Injectable({
         providedIn: 'root'
     }),
-    __metadata("design:paramtypes", [])
-], ImgEventService);
+    __metadata("design:paramtypes", [ImgManagerConfigService,
+        ImgManagerService,
+        ImgEventService,
+        AlertService,
+        TranslateService])
+], CanvaService);
 
 let DomService = class DomService {
     constructor() {
@@ -542,6 +667,15 @@ let WzImgManagerComponent = class WzImgManagerComponent {
         this.listDisplayed = false;
         this.hideTab = false;
     }
+    // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
+    // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
+    set forceToOpenCanva(forceToOpenCanva) {
+        this.canvaService.forceToOpenCanva = !!forceToOpenCanva;
+        if (typeof forceToOpenCanva === 'boolean') {
+            return;
+        }
+        this.canvaService.expectedImgSizesChange(forceToOpenCanva);
+    }
     set multipleImgMode(activate) {
         this._multipleImgMode = activate;
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
@@ -680,6 +814,11 @@ __decorate([
     Input(),
     __metadata("design:type", ImgManagerConfigDto)
 ], WzImgManagerComponent.prototype, "externalConfig", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], WzImgManagerComponent.prototype, "forceToOpenCanva", null);
 __decorate([
     Output(),
     __metadata("design:type", Object)
@@ -724,57 +863,6 @@ const easeInOut = // the fade-in/fade-out animation.
     ]),
 ]);
 
-let AlertService = class AlertService {
-    constructor(nwbAlertService, translateService) {
-        this.nwbAlertService = nwbAlertService;
-        this.translateService = translateService;
-        this.actionMsg = 'ImgManager.alert.action';
-        this.alertConfig = {
-            message: '',
-            duration: 5000
-        };
-    }
-    openAlert(msgKey) {
-        this.closePreviousAlert();
-        this.translateService.get(msgKey).subscribe(trans => {
-            this.alertConfig.message = trans;
-            this.setAlertColor(msgKey);
-            this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
-            this.alertRefComponent.afterClosed().subscribe();
-        });
-    }
-    openAlertWithBackendRespons(msgKey, msgBackend) {
-        this.translateService.get(msgKey).subscribe(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();
-        });
-    }
-    closePreviousAlert() {
-        if (this.alertRefComponent) {
-            this.alertRefComponent.dismiss();
-        }
-    }
-    setAlertColor(msgKey) {
-        const isErrorMsg = /error/i.test(msgKey);
-        this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
-    }
-};
-AlertService.ctorParameters = () => [
-    { type: NwbAlertService },
-    { type: TranslateService }
-];
-AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
-AlertService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    }),
-    __metadata("design:paramtypes", [NwbAlertService,
-        TranslateService])
-], AlertService);
-
 let ImgUploadComponent = class ImgUploadComponent {
     constructor(imgManager, alertService, externalConfigService) {
         this.imgManager = imgManager;
@@ -786,6 +874,7 @@ let ImgUploadComponent = class ImgUploadComponent {
         this.loadingText = 'ImgManager.ImgUpload.loading';
         this.errorUploadingImg = 'ImgManager.ImgUpload.errorUploadingImg';
         this.errorNotImg = 'ImgManager.ImgUpload.errorNotImg';
+        this.MAX_IMAGE_SIZE = 10000000; // In bytes
     }
     ngOnInit() {
         this.assetsIcon = this.getAssets();
@@ -807,20 +896,32 @@ let ImgUploadComponent = class ImgUploadComponent {
         this.isLoading = true;
         const imgToUploadList = [];
         for (const file of files) {
-            const 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ée: ${this.getImageSizeInKo(this.MAX_IMAGE_SIZE)}ko`);
+                this.isLoading = false;
+                continue;
+            }
+            const formData = new FormData();
+            formData.append('image', file, file.name);
             imgToUploadList.push(this.imgManager.uploadFile(formData));
         }
         forkJoin(imgToUploadList).subscribe((img) => {
             this.onImgUpload(img),
                 this.isLoading = false;
         }, 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;
         });
     }
@@ -835,6 +936,12 @@ let ImgUploadComponent = class ImgUploadComponent {
     isFileImage(fileType) {
         return fileType.split('/')[0] === 'image';
     }
+    isSizeValid(imageBytesSize) {
+        return imageBytesSize < this.MAX_IMAGE_SIZE;
+    }
+    getImageSizeInKo(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
@@ -1135,7 +1242,7 @@ __decorate([
 ImgTabsComponent = __decorate([
     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,
@@ -1824,13 +1931,8 @@ ImgEditorComponent = __decorate([
 ], ImgEditorComponent);
 
 let CanvaBtnComponent = class CanvaBtnComponent {
-    constructor(canvaService, imgManager, wzImgEventService, translateService, alertService, renderer) {
+    constructor(canvaService) {
         this.canvaService = canvaService;
-        this.imgManager = imgManager;
-        this.wzImgEventService = wzImgEventService;
-        this.translateService = translateService;
-        this.alertService = alertService;
-        this.renderer = renderer;
         this.showImgUploaded = new EventEmitter();
         this.imgLoading = false;
         this.availableFormat = {
@@ -1849,10 +1951,6 @@ let CanvaBtnComponent = class CanvaBtnComponent {
         };
         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';
     }
     ngOnInit() {
         this.canvaLogoRouteAssets = this.canvaService.getCanvaLogo();
@@ -1873,71 +1971,14 @@ let CanvaBtnComponent = class CanvaBtnComponent {
         this.subs.push(subExpectedImgSizesChange);
     }
     onOpenCanva(width, height) {
-        if (this.imgLoading) {
-            return;
-        }
-        const subCanvaApi = this.canvaService.getCanvaApi().subscribe((api) => {
-            this.canvaApi = api;
-            this.addOverflowBody();
-            this.createDesign(width, height);
-        });
-        this.subs.push(subCanvaApi);
-    }
-    createDesign(width, height) {
-        const 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: ({ exportUrl, designTitle }) => this.designPublished(exportUrl, designTitle),
-            onDesignClose: () => {
-                this.removeOverflowBody();
-            }
-        });
-    }
-    designPublished(exportUrl, designTitle) {
-        this.alertService.openAlert(this.uploadingImg);
-        this.imgLoading = true;
-        const subUploadImg = this.imgManager.uploadFileByUrl(exportUrl, designTitle).subscribe((img) => {
-            this.imgLoading = false;
-            this.removeOverflowBody();
-            this.wzImgEventService.emitImgAdded(img.id_file);
-            this.alertService.openAlert(this.successUploadPhoto);
-        }, error => {
-            this.imgLoading = false;
-            this.removeOverflowBody();
-            if (error.error.code === 406 && error.error.message) {
-                this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
-            }
-            else {
-                this.alertService.openAlert(this.errorUploadCanvaImg);
-            }
-        });
-        this.subs.push(subUploadImg);
-    }
-    addOverflowBody() {
-        this.renderer.addClass(document.body, 'ovh-canva');
-    }
-    removeOverflowBody() {
-        this.renderer.removeClass(document.body, 'ovh-canva');
+        this.canvaService.openCanva(width, height);
     }
     ngOnDestroy() {
         this.subs.forEach(sub => sub.unsubscribe());
     }
 };
 CanvaBtnComponent.ctorParameters = () => [
-    { type: CanvaService },
-    { type: ImgManagerService },
-    { type: ImgEventService },
-    { type: TranslateService },
-    { type: AlertService },
-    { type: Renderer2 }
+    { type: CanvaService }
 ];
 __decorate([
     Input(),
@@ -1952,12 +1993,7 @@ CanvaBtnComponent = __decorate([
         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,
-        TranslateService,
-        AlertService,
-        Renderer2])
+    __metadata("design:paramtypes", [CanvaService])
 ], CanvaBtnComponent);
 
 let ImgSelectionComponent = class ImgSelectionComponent {
@@ -2621,9 +2657,9 @@ let ImagesViewComponent = class ImagesViewComponent {
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
     }
     ngOnInit() {
-        if (this.maxLengthCardShow) {
-            this.reducePictureListMaxLength();
-        }
+        /* if (this.maxLengthCardShow) {
+          this.reducePictureListMaxLength();
+        } */
         this.setEvents();
         this.imgSelectedList = this.imgSelectionService.getImgSelection();
     }
@@ -2634,9 +2670,9 @@ let ImagesViewComponent = class ImagesViewComponent {
             this.savePictureList = this.picturesList;
         }
     }
-    reducePictureListMaxLength() {
-        this.picturesList.splice(0, this.maxLengthCardShow);
-    }
+    /* reducePictureListMaxLength() {
+      this.picturesList.splice(0, this.maxLengthCardShow);
+    } */
     getImgList() {
         this.filtersChanged.next();
     }
@@ -2662,6 +2698,7 @@ let ImagesViewComponent = class ImagesViewComponent {
         this.getImgList();
     }
     onRenamePicture(pictureRenamed) {
+        console.log('onRenamePicture pictureRenamed', pictureRenamed);
         this.renamePictureService.onRenamePicture(pictureRenamed);
     }
     removeListImg() {
@@ -2756,6 +2793,10 @@ let ImagesViewComponent = class ImagesViewComponent {
         return imgSizesConfig;
     }
     getTotalImgPerPage() {
+        if (this.nbRowToShow) {
+            const nbImgPerLine = this.stateDisplayed === 'full' ? this.nbMinImgPerLine : this.nbMaxImgPerLine;
+            return nbImgPerLine * this.nbRowToShow;
+        }
         let total = this.nbMinImgPerLine;
         while (total < 30 || total % this.nbMaxImgPerLine !== 0 || total % this.nbMinImgPerLine !== 0) {
             total += this.nbMinImgPerLine;
@@ -2763,8 +2804,9 @@ let ImagesViewComponent = class ImagesViewComponent {
         return total;
     }
     setParams() {
+        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) {
@@ -2882,9 +2924,6 @@ let ImagesViewComponent = class ImagesViewComponent {
             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();
@@ -2945,6 +2984,10 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], ImagesViewComponent.prototype, "maxLengthCardShow", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], ImagesViewComponent.prototype, "nbRowToShow", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -4467,5 +4510,5 @@ class ImgCDNConfigDTO {
  * Generated bundle index. Do not edit.
  */
 
-export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
+export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, AlertService as ɵe, DomService as ɵf, ImgTabsComponent as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
 //# sourceMappingURL=wizishop-img-manager.js.map