@wizishop/img-manager 15.2.1 → 15.2.4

package/fesm2015/wizishop-img-manager.mjs

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, SkipSelf, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, inject, Pipe, Inject, NgModule } from '@angular/core';
-import { BehaviorSubject, of, delay, tap, Subject, Observable, forkJoin } from 'rxjs';
-import * as i3$1 from '@angular/common/http';
-import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
-import { take, map, takeUntil, debounceTime, distinctUntilChanged, tap as tap$1 } from 'rxjs/operators';
+import { Injectable, inject, Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostBinding, HostListener, ViewChild, Pipe, Inject, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, Observable, forkJoin, of, delay, tap as tap$1 } from 'rxjs';
+import { take, map, takeUntil, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import * as i1 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule } from '@wizishop/ng-wizi-bulma';
 import * as i3 from '@ngx-translate/core';
@@ -14,6 +12,8 @@ import * as i3$2 from '@angular/router';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
+import * as i3$1 from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import * as i4 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import * as i8 from 'ngx-scrollbar/reached-event';
@@ -97,162 +97,6 @@ ImgSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
-const ImgSelectionServiceProvider = {
-    provide: ImgSelectionService,
-    useFactory: (parentService) => {
-        console.log('parentService', !!parentService);
-        // Vérifie si le service existe déjà dans le provider parent
-        if (parentService) {
-            return parentService;
-        }
-        else {
-            // Si le service n'existe pas dans le provider parent, crée un nouveau service
-            return new ImgSelectionService();
-        }
-    },
-    // Utilise l'injection conditionnelle pour vérifier si le service existe déjà dans le provider parent
-    deps: [[new Optional(), new SkipSelf(), ImgSelectionService]],
-};
-
-class ApiService {
-}
-ApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, decorators: [{
-            type: Injectable
-        }] });
-
-class ImgManagerService {
-    constructor(apiService) {
-        this.apiService = apiService;
-        this.params = new HttpParams().set("limit", "20").set("page", "1");
-        // Display the img selection
-        this.pageFicheProductConfig = {
-            stateDisplayed: 'closed',
-            multipleImgMode: true,
-            showImgManagerModule: true,
-            showSelection: true,
-            displayBtn: true,
-            pageficheProduct: true
-        };
-        this.angularFicheProductConfig = {
-            stateDisplayed: 'closed',
-            multipleImgMode: true,
-            showImgManagerModule: true,
-            showSelection: true,
-            displayBtn: false,
-            pageficheProduct: true
-        };
-        this.wiziblockConfig = {
-            stateDisplayed: 'closed',
-            multipleImgMode: false,
-            showImgManagerModule: true,
-            showSelection: false,
-            displayBtn: false
-        };
-        this.simpleWithButtonOpenerConfig = {
-            stateDisplayed: 'closed',
-            multipleImgMode: false,
-            showImgManagerModule: true,
-            showSelection: false,
-            displayBtn: true
-        };
-        this.fullWindowConfig = {
-            stateDisplayed: 'window',
-            multipleImgMode: false,
-            showImgManagerModule: true,
-            showSelection: false,
-            displayBtn: false
-        };
-    }
-    getShopImgList(params) {
-        if (params && this.previousParams && this.previousParams.limit === params.limit
-            && this.previousParams.page === params.page && this.shopImgList
-            && this.previousParams.search === params.search) {
-            return of(this.shopImgList).pipe(delay(0));
-        }
-        if (params) {
-            this.resetParams(params);
-        }
-        return this.apiService.getShopImgList(params).pipe(tap((shopImgList) => {
-            this.shopImgList = shopImgList;
-            this.previousParams = params;
-        }));
-        ;
-    }
-    getShopTotalImgList(params) {
-        if (params) {
-            this.resetParams(params);
-        }
-        return this.apiService.getShopTotalImgList(params);
-    }
-    getShopImg(idFile) {
-        return this.apiService.getShopImg(idFile);
-    }
-    resetParams(params) {
-        this.params = new HttpParams();
-        this.params = this.params.set('id_file:sort', 'desc');
-        for (const param in params) {
-            this.params = this.params.set(param, params[param]);
-        }
-        if (params.search) {
-            this.params = this.params.set('display_name:contains', params.search);
-        }
-    }
-    replaceImg(imageBase64, id_file) {
-        return this.apiService.replaceImg(imageBase64, id_file);
-    }
-    removeImg(id_file) {
-        return this.apiService.removeImg(id_file);
-    }
-    removeMultipleImg(id_array) {
-        return this.apiService.removeMultipleImg(id_array);
-    }
-    getImgManagerDisplayConfig(displayName) {
-        switch (displayName) {
-            case "window":
-                return this.fullWindowConfig;
-            case "wizi-block":
-                return this.wiziblockConfig;
-            case "fiche-product":
-                return this.pageFicheProductConfig;
-            case "simple-with-button":
-                return this.simpleWithButtonOpenerConfig;
-            case 'angular-fiche-product':
-                return this.angularFicheProductConfig;
-            default:
-                return;
-        }
-    }
-    getAllImgManagerDisplayConfig() {
-        return [
-            this.fullWindowConfig,
-            this.wiziblockConfig,
-            this.pageFicheProductConfig,
-            this.simpleWithButtonOpenerConfig,
-        ];
-    }
-}
-ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: ApiService }]; } });
-const ImgManagerServiceProvider = {
-    provide: ImgManagerService,
-    useFactory: (parentService, apiService) => {
-        // Vérifie si le service existe déjà dans le provider parent
-        if (parentService) {
-            return parentService;
-        }
-        else {
-            // Si le service n'existe pas dans le provider parent, crée un nouveau service
-            return new ImgManagerService(apiService);
-        }
-    },
-    // Utilise l'injection conditionnelle pour vérifier si le service existe déjà dans le provider parent
-    deps: [[new Optional(), new SkipSelf(), ImgManagerService], ApiService],
-};
 
 class UserSettingsService {
     constructor() {
@@ -272,13 +116,10 @@ class UserSettingsService {
     }
 }
 UserSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UserSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserSettingsService, providedIn: 'root' });
+UserSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserSettingsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserSettingsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+            type: Injectable
+        }] });
 
 class ImgEventService {
     constructor() {
@@ -313,13 +154,10 @@ class ImgEventService {
     }
 }
 ImgEventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ImgEventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEventService, providedIn: 'root' });
+ImgEventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEventService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEventService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+            type: Injectable
+        }] });
 
 class AlertService {
     constructor(nwbAlertService, translateService) {
@@ -360,17 +198,22 @@ class AlertService {
     }
 }
 AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, providedIn: 'root' });
+AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.NwbAlertService }, { type: i3.TranslateService }]; } });
 
+class ApiService {
+}
+ApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable
+        }] });
+
 class UploadService {
-    constructor(apiService) {
-        this.apiService = apiService;
+    constructor() {
+        this.apiService = inject(ApiService);
     }
     uploadFile(formData) {
         return this.apiService.uploadFile(formData);
@@ -379,12 +222,11 @@ class UploadService {
         return this.apiService.uploadFileByUrl(url, fileName);
     }
 }
-UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, providedIn: 'root' });
+UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ApiService }]; } });
+            type: Injectable
+        }] });
 
 class CanvaService {
     constructor(wzImgEventService, alertService, translateService, uploadService, apiService) {
@@ -526,12 +368,9 @@ class CanvaService {
     }
 }
 CanvaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-CanvaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, providedIn: 'root' });
+CanvaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CanvaService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: ApiService }]; } });
 
 class DomService {
@@ -559,12 +398,9 @@ class DomService {
     }
 }
 DomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomService, providedIn: 'root' });
+DomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
 const easeInOut = // the fade-in/fade-out animation.
@@ -703,18 +539,21 @@ class ImgUploadComponent {
             formData.append('image', file, file.name);
             imgToUploadList.push(this.uploadService.uploadFile(formData));
         }
-        forkJoin(imgToUploadList).subscribe((img) => {
-            this.onImgUpload(img),
+        forkJoin(imgToUploadList).subscribe({
+            next: (img) => {
+                this.onImgUpload(img),
+                    this.isLoading = false;
+            },
+            error: error => {
+                var _a;
+                if (((_a = error === null || error === void 0 ? void 0 : error.error) === null || _a === void 0 ? void 0 : _a.message) && error.statusText !== 'Bad Request') {
+                    this.alertService.openAlertWithBackendResponse(this.errorUploadingImg, error.error.message);
+                }
+                else {
+                    this.alertService.openAlert(this.errorUploadingImg);
+                }
                 this.isLoading = false;
-        }, error => {
-            var _a;
-            if (((_a = error === null || error === void 0 ? void 0 : error.error) === null || _a === void 0 ? void 0 : _a.message) && error.statusText !== 'Bad Request') {
-                this.alertService.openAlertWithBackendResponse(this.errorUploadingImg, error.error.message);
-            }
-            else {
-                this.alertService.openAlert(this.errorUploadingImg);
             }
-            this.isLoading = false;
         });
     }
     /**
@@ -806,7 +645,7 @@ class PexelsService {
             request = `/search?query=${toSearch}&per_page=${perPage}&page=${page}&locale=${this.lang}`;
         }
         else { // Search by category or display Pexels selection
-            const shopCategory = this.apiService.CONFIG.shop_category;
+            const shopCategory = this.apiService.getShopCategory();
             // Search by shop category
             if (shopCategory && shopCategory !== 'other' && shopCategory !== 'btob') {
                 request = `/search?query=${shopCategory}&per_page=${perPage}&page=${page}&locale=en-US`;
@@ -821,12 +660,9 @@ class PexelsService {
     }
 }
 PexelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, deps: [{ token: i3$1.HttpClient }, { token: ApiService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-PexelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, providedIn: 'root' });
+PexelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i3$1.HttpClient }, { type: ApiService }, { type: i3.TranslateService }]; } });
 
 class AbstractDebounceDirective {
@@ -838,7 +674,7 @@ class AbstractDebounceDirective {
     }
     ngOnInit() {
         this.emitEvent$
-            .pipe(takeUntil(this.subscription$), debounceTime(this.debounceTime), distinctUntilChanged(), tap$1(value => this.emitChange(value)))
+            .pipe(takeUntil(this.subscription$), debounceTime(this.debounceTime), distinctUntilChanged(), tap(value => this.emitChange(value)))
             .subscribe();
     }
     emitChange(value) {
@@ -1012,7 +848,7 @@ class PexelLibComponent {
         this.isLoading = true;
         this.initComponent = true;
         this.photosColumns = [];
-        this.nbColumuns = 6;
+        this.nbColumns = 6;
         this.responsiveColumns = [1250, 1050, 750, 500];
         this.outerElement = null;
         this.uploadingImg = 'ImgManager.PexelLib.uploadingImg';
@@ -1025,8 +861,6 @@ class PexelLibComponent {
     set content(control) {
         this.outerElement = control;
     }
-    ngOnInit() {
-    }
     ngAfterViewInit() {
         this.oldSearchValue = this.searchValue;
         this.isLoading = false;
@@ -1037,11 +871,11 @@ class PexelLibComponent {
     setNbColumnsToDisplayPhoto() {
         const width = this.outerElement.nativeElement.offsetWidth;
         if (this.stateDisplayed !== 'window') {
-            this.nbColumuns = 8;
+            this.nbColumns = 8;
         }
         this.responsiveColumns.forEach(value => {
             if (width < value) {
-                this.nbColumuns--;
+                this.nbColumns--;
             }
         });
     }
@@ -1066,23 +900,26 @@ class PexelLibComponent {
             return;
         }
         this.isLoading = true;
-        const searchSub = this.wzImgLibService.searchOnPexels(this.searchValue, this.perPage, this.currentPage).subscribe((data) => {
-            this.wzImgLibDto = data;
-            this.nbResult = this.wzImgLibDto.total_results;
-            if (this.nbResult) {
-                data.photos.forEach(photo => {
-                    const bestColumnIndex = this.getBestColumn();
-                    const height = (photo.height / photo.width) * 1000;
-                    this.photosColumns[bestColumnIndex].height += height;
-                    this.photosColumns[bestColumnIndex].photos.push(photo);
-                });
+        const searchSub = this.wzImgLibService.searchOnPexels(this.searchValue, this.perPage, this.currentPage).subscribe({
+            next: (data) => {
+                this.wzImgLibDto = data;
+                this.nbResult = this.wzImgLibDto.total_results;
+                if (this.nbResult) {
+                    data.photos.forEach(photo => {
+                        const bestColumnIndex = this.getBestColumn();
+                        const height = (photo.height / photo.width) * 1000;
+                        this.photosColumns[bestColumnIndex].height += height;
+                        this.photosColumns[bestColumnIndex].photos.push(photo);
+                    });
+                }
+                this.isLoading = false;
+                this.initComponent = false;
+            },
+            error: error => {
+                this.isLoading = false;
+                this.initComponent = false;
+                this.alertService.openAlert(this.errorRetrievePhotos);
             }
-            this.isLoading = false;
-            this.initComponent = false;
-        }, error => {
-            this.isLoading = false;
-            this.initComponent = false;
-            this.alertService.openAlert(this.errorRetrievePhotos);
         });
         this.subs.push(searchSub);
     }
@@ -1101,7 +938,7 @@ class PexelLibComponent {
         }
     }
     setPhotosColumns() {
-        for (let indexColumn = 0; indexColumn < this.nbColumuns; indexColumn++) {
+        for (let indexColumn = 0; indexColumn < this.nbColumns; indexColumn++) {
             const photosColumn = {
                 height: 0,
                 photos: []
@@ -1220,12 +1057,128 @@ class RenamePictureService {
     }
 }
 RenamePictureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, deps: [{ token: ApiService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
-RenamePictureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, providedIn: 'root' });
+RenamePictureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: ApiService }, { type: AlertService }]; } });
 
+class ImgManagerService {
+    constructor() {
+        this.params = new HttpParams().set("limit", "20").set("page", "1");
+        // Display the img selection
+        this.pageFicheProductConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: true,
+            showImgManagerModule: true,
+            showSelection: true,
+            displayBtn: true,
+            pageficheProduct: true
+        };
+        this.angularFicheProductConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: true,
+            showImgManagerModule: true,
+            showSelection: true,
+            displayBtn: false,
+            pageficheProduct: true
+        };
+        this.wiziblockConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: false
+        };
+        this.simpleWithButtonOpenerConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: true
+        };
+        this.fullWindowConfig = {
+            stateDisplayed: 'window',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: false
+        };
+        this.apiService = inject(ApiService);
+    }
+    getShopImgList(params) {
+        if (params && this.previousParams && this.previousParams.limit === params.limit
+            && this.previousParams.page === params.page && this.shopImgList
+            && this.previousParams.search === params.search) {
+            return of(this.shopImgList).pipe(delay(0));
+        }
+        if (params) {
+            this.resetParams(params);
+        }
+        return this.apiService.getShopImgList(params).pipe(tap$1((shopImgList) => {
+            this.shopImgList = shopImgList;
+            this.previousParams = params;
+        }));
+        ;
+    }
+    getShopTotalImgList(params) {
+        if (params) {
+            this.resetParams(params);
+        }
+        return this.apiService.getShopTotalImgList(params);
+    }
+    getShopImg(idFile) {
+        return this.apiService.getShopImg(idFile);
+    }
+    resetParams(params) {
+        this.params = new HttpParams();
+        this.params = this.params.set('id_file:sort', 'desc');
+        for (const param in params) {
+            this.params = this.params.set(param, params[param]);
+        }
+        if (params.search) {
+            this.params = this.params.set('display_name:contains', params.search);
+        }
+    }
+    replaceImg(imageBase64, id_file) {
+        return this.apiService.replaceImg(imageBase64, id_file);
+    }
+    removeImg(id_file) {
+        return this.apiService.removeImg(id_file);
+    }
+    removeMultipleImg(id_array) {
+        return this.apiService.removeMultipleImg(id_array);
+    }
+    getImgManagerDisplayConfig(displayName) {
+        switch (displayName) {
+            case "window":
+                return this.fullWindowConfig;
+            case "wizi-block":
+                return this.wiziblockConfig;
+            case "fiche-product":
+                return this.pageFicheProductConfig;
+            case "simple-with-button":
+                return this.simpleWithButtonOpenerConfig;
+            case 'angular-fiche-product':
+                return this.angularFicheProductConfig;
+            default:
+                return;
+        }
+    }
+    getAllImgManagerDisplayConfig() {
+        return [
+            this.fullWindowConfig,
+            this.wiziblockConfig,
+            this.pageFicheProductConfig,
+            this.simpleWithButtonOpenerConfig,
+        ];
+    }
+}
+ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, decorators: [{
+            type: Injectable
+        }] });
+
 class ImgCDNService {
     constructor() {
         this.imgCDNConfig = inject(ApiService).IMG_SIZE;
@@ -1241,12 +1194,9 @@ class ImgCDNService {
     }
 }
 ImgCDNService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ImgCDNService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, providedIn: 'root' });
+ImgCDNService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCDNService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
 class ImagesActionHandler {
@@ -2431,12 +2381,9 @@ class FiltersTableService {
     }
 }
 FiltersTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersTableService, deps: [{ token: i1.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-FiltersTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersTableService, providedIn: 'root' });
+FiltersTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersTableService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersTableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.NwbFilterRoutingBuilder }]; } });
 
 class CheckboxComponent {
@@ -3391,11 +3338,11 @@ class ImagesViewComponent {
         }
         this.isTotalRetrieved = false;
         this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe({
-            next: (data) => {
+            next: total => {
                 this.previousSearchValue = searchValue;
                 this.isTotalRetrieved = true;
-                this.length = data.totalRecords;
-                this.tableFilters.totalItems = data.totalRecords;
+                this.length = total;
+                this.tableFilters.totalItems = total;
             },
             error: error => {
                 //this.alertService.openAlert(this.errorGetTotalImg);
@@ -3766,6 +3713,7 @@ class WzImgManagerComponent {
         this.close = false;
         this.listDisplayed = false;
         this.hideTab = false;
+        console.log('WzImgManagerComponent');
     }
     // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
     // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
@@ -3798,6 +3746,7 @@ class WzImgManagerComponent {
         }
     }
     ngOnInit() {
+        console.log('WzImgManagerComponent');
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
         this.imgSelectionService.initImgSelectedList(null);
         this.selectImgEvent = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
@@ -3894,16 +3843,10 @@ class WzImgManagerComponent {
     }
 }
 WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
-        ImgManagerServiceProvider,
-        ImgSelectionServiceProvider
-    ], ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
+WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wz-img-manager', providers: [
-                        ImgManagerServiceProvider,
-                        ImgSelectionServiceProvider
-                    ], template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], showSelection: [{
@@ -3923,6 +3866,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }] } });
 
+class SnackBarService {
+    constructor(nwbSnackbar, translateService) {
+        this.nwbSnackbar = nwbSnackbar;
+        this.translateService = translateService;
+        this.actionMsg = 'ImgManager.snackBar.action';
+        this.snackBarConfigAction = {
+            message: '',
+            duration: 5000
+        };
+        this.snackBarConfig = {
+            message: '',
+            duration: 5000
+        };
+    }
+    openSnackBar(msgKey) {
+        this.closePreviousSnackbar();
+        this.translateService.get(msgKey).subscribe(trans => {
+            this.snackBarConfig.message = trans;
+            this.snackBarRefComponent = this.nwbSnackbar.open(this.snackBarConfig);
+            this.snackBarRefComponent.afterClosed().subscribe();
+        });
+    }
+    openSnackBarWithAction(msgKey) {
+        return new Observable(observer => {
+            this.translateService.get([msgKey, this.actionMsg]).subscribe((trans) => {
+                this.snackBarConfigAction.message = trans[msgKey];
+                this.snackBarConfigAction.action = trans[this.actionMsg];
+                this.closePreviousSnackbar();
+                this.snackBarRefComponent = this.nwbSnackbar.open(this.snackBarConfigAction);
+                this.snackBarRefComponent.afterClosed().subscribe(manualClose => {
+                    observer.next(manualClose);
+                    observer.complete();
+                });
+            });
+        });
+    }
+    openSnackBarWithBackendRespons(msgKey, msgBackend) {
+        this.translateService.get(msgKey).subscribe(trans => {
+            this.snackBarConfig.message = trans;
+            this.snackBarConfig.message += '<br/>' + JSON.parse(msgBackend).message;
+            this.closePreviousSnackbar();
+            this.snackBarRefComponent = this.nwbSnackbar.open(this.snackBarConfig);
+            this.snackBarRefComponent.afterClosed().subscribe();
+        });
+    }
+    closePreviousSnackbar() {
+        if (this.snackBarRefComponent) {
+            this.snackBarRefComponent.dismiss(false);
+        }
+    }
+}
+SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SnackBarService, deps: [{ token: i1.NwbSnackbarService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SnackBarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SnackBarService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.NwbSnackbarService }, { type: i3.TranslateService }]; } });
+
 ;
 const components = [
     WzImgManagerComponent,
@@ -3976,7 +3976,20 @@ class WzImgManagerModule {
         return {
             ngModule: WzImgManagerModule,
             providers: [
-                ApiService
+                ImgManagerService,
+                ApiService,
+                ImgCDNService,
+                FiltersTableService,
+                AlertService,
+                CanvaService,
+                DomService,
+                ImgEventService,
+                ImgSelectionService,
+                PexelsService,
+                RenamePictureService,
+                SnackBarService,
+                UploadService,
+                UserSettingsService
             ]
         };
     }