@wizishop/img-manager-webelement 15.0.10 → 15.2.1

package/fesm2020/wizishop-img-manager-webelement.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, NgModule } from '@angular/core';
+import { fromEvent, Observable, forkJoin, Subject, tap, from } from 'rxjs';
 import * as i2 from '@wizishop/img-manager';
-import { ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, WzImgManagerModule } from '@wizishop/img-manager';
-import { fromEvent, Observable, forkJoin, Subject, from } from 'rxjs';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import { ImgSelectionService, WzImgManagerModule, ApiService } from '@wizishop/img-manager';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import { take } from 'rxjs/operators';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -213,13 +213,13 @@ class FicheProductService {
     }
     initProductImgSelection() {
         // Display the loader in img list selection
-        this.imgSelectionService.emitImgListLoading(true);
+        this.imgSelectionService.imgSelectedListLoading$.next(true);
         // retrieve img selection
         const retrieveImgSelectionSub = this.retrieveImgSelection().subscribe(data => {
             // No imgage selected
             if (!data || !data["photos"] || !data["photos"]["infos"] || !data["photos"]["infos"]["files"] || !data["photos"]["infos"]["files"].length) {
                 this.loadProductImgSelection = false;
-                this.imgSelectionService.emitImgListLoading(false);
+                this.imgSelectionService.imgSelectedListLoading$.next(false);
                 return;
             }
             const idImgSelectionList = data["photos"]["infos"]["files"];
@@ -233,7 +233,7 @@ class FicheProductService {
             }, error => {
                 // Hide the loader in img list selection
                 this.loadProductImgSelection = false;
-                this.imgSelectionService.emitImgListLoading(false);
+                this.imgSelectionService.imgSelectedListLoading$.next(false);
             });
             this.subscriptions.push(allImgSub);
         });
@@ -260,7 +260,7 @@ class FicheProductService {
     }
     updateImgSelectionOnChange() {
         // listen to the img manager change
-        const imgSelectionSub = this.imgSelectionService.getImgSelectionChange().subscribe(imgSelectionList => {
+        const imgSelectionSub = this.imgSelectionService.imgSelection$.subscribe(imgSelectionList => {
             if (!imgSelectionList) {
                 return;
             }
@@ -345,7 +345,7 @@ class FicheProductService {
     applyCurrentImgSelection() {
         this.imgSelectionService.setImgSelection(this.currentProductImgSelection);
         // Hide the loader in img list selection
-        this.imgSelectionService.emitImgListLoading(false);
+        this.imgSelectionService.imgSelectedListLoading$.next(false);
     }
     getOptionsHeaders() {
         const header = { headers: new HttpHeaders({
@@ -460,26 +460,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: StorageService }]; } });
 ;
 
+class WebelementImageManagerApiService {
+    constructor(http) {
+        this.http = http;
+        this.shopId = null;
+        this.CONFIG = {
+            image_manager_route: environment.wizi_api + "/image-manager/shops/" + this.shopId,
+            canva_token: 'wdByHayF5v57nj2ZSLvu055O',
+            canva_url: 'https://sdk.canva.com/designbutton/v2/api.js',
+            pexels_token: '563492ad6f91700001000001e39215727d8b42c1b08498a9ce1e6b94',
+            pexels_route: 'https://api.pexels.com/v1',
+            shop_category: 'other',
+            assets_route: environment.assets_route,
+        };
+        this.IMG_SIZE = {
+            url_raw_image: `${environment.CDN_URL}${this.shopId}/RAW-`,
+            url_100_image: `${environment.CDN_URL}${this.shopId}/m100-`,
+            url_200_image: `${environment.CDN_URL}${this.shopId}/cs200-`,
+            url_400_image: `${environment.CDN_URL}${this.shopId}/cs400-`,
+            url_800_image: `${environment.CDN_URL}${this.shopId}/cs800-`
+        };
+    }
+    getOptionsHeaders(params) {
+        const header = { headers: new HttpHeaders({
+                Authorization: 'Bearer ' + this.shopToken
+            })
+        };
+        if (params) {
+            header['params'] = params;
+        }
+        return header;
+    }
+    getShopImgList(params) {
+        return this.http.get(`${this.CONFIG.image_manager_route}/images`, this.getOptionsHeaders(params));
+    }
+    getShopTotalImgList(params) {
+        return this.http.get(`${this.CONFIG.image_manager_route}/images`, this.getOptionsHeaders(params));
+    }
+    getShopImg(idFile) {
+        return this.http.get(`${this.CONFIG.image_manager_route}/images/${idFile}`, this.getOptionsHeaders());
+    }
+    uploadFile(formData) {
+        return this.http.post(`${this.CONFIG.image_manager_route}/images/template`, formData, this.getOptionsHeaders());
+    }
+    uploadFileByUrl(url, fileName) {
+        return this.http.post(`${this.CONFIG.image_manager_route}/images/template`, { url, fileName }, this.getOptionsHeaders());
+    }
+    replaceImg(imageBase64, id_file) {
+        const body = {
+            imageBase64,
+            type: "RAW"
+        };
+        return this.http.put(`${this.CONFIG.image_manager_route}/images/${id_file}/replace`, body, this.getOptionsHeaders());
+    }
+    changeImgName(fileName, id_file) {
+        return this.http.put(`${this.CONFIG.image_manager_route}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
+    }
+    removeImg(id_file) {
+        return this.http.delete(`${this.CONFIG.image_manager_route}/images/${id_file}`, this.getOptionsHeaders());
+    }
+    removeMultipleImg(id_array) {
+        return this.http.post(`${this.CONFIG.image_manager_route}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
+    }
+    setShopCategory(shopId) {
+        return this.http.get(`${environment.wizi_api}/shops/${shopId}`, this.getOptionsHeaders()).pipe(tap((shop => {
+            if (shop && shop['category']) {
+                this.CONFIG.shop_category = shop['category'];
+            }
+        })));
+    }
+}
+WebelementImageManagerApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WebelementImageManagerApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+WebelementImageManagerApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WebelementImageManagerApiService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WebelementImageManagerApiService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
 class ImgManagerWebElementComponent {
-    constructor(translateService, imgSelectionService, canvaService, ficheProductService, authCredentialsService, http, eventService, imgManagerService) {
+    constructor(translateService, canvaService, ficheProductService, authCredentialsService, eventService, imgManagerService, imgSelectionService, webelementImageManagerApiService) {
         this.translateService = translateService;
-        this.imgSelectionService = imgSelectionService;
         this.canvaService = canvaService;
         this.ficheProductService = ficheProductService;
         this.authCredentialsService = authCredentialsService;
-        this.http = http;
         this.eventService = eventService;
         this.imgManagerService = imgManagerService;
+        this.imgSelectionService = imgSelectionService;
+        this.webelementImageManagerApiService = webelementImageManagerApiService;
         // img manger config
         this.openImgManager = false;
         this.loading = true;
-        // fiche roduct config
+        // fiche product config
         this.isPhotosTab = !!environment.isPhotosTab;
         this.subscriptions = [];
     }
     ngOnInit() {
         this.loading = true;
-        this.pageficheProductConfig = this.imgManagerService.getImgManagerDisplayConfig("fiche-product");
+        this.pageFicheProductConfig = this.imgManagerService.getImgManagerDisplayConfig("fiche-product");
         this.pageEventConfig = this.imgManagerService.getImgManagerDisplayConfig("wizi-block");
         this.setCurrentLanguage();
         // Search on which page is display the img manger
@@ -503,13 +579,11 @@ class ImgManagerWebElementComponent {
                 return;
             }
             // Run on local Server
-            this.setAppVars(null, environment.local.shopId, null, environment.local.token);
-            this.setImgManagerExtraConfig();
-            this.imgManagerDisplayConfig = this.pageficheProductConfig;
+            this.setAppVars(environment.local.shopId, environment.local.token);
+            this.imgManagerDisplayConfig = this.pageFicheProductConfig;
             return;
         }
-        this.setAppVars(authCredentials.user_id, authCredentials.shop_id, authCredentials.account_id, authCredentials.token);
-        this.setImgManagerExtraConfig();
+        this.setAppVars(authCredentials.shop_id, authCredentials.token);
     }
     setFicheProductPage() {
         this.ficheProductService.setApiConfig(this.id_shop, this.token_shop);
@@ -521,7 +595,7 @@ class ImgManagerWebElementComponent {
     setPageWithEvents() {
         this.subscribePageAskForImg();
         // Send img selected
-        const subImgSelection = this.imgSelectionService.getImgSelectionChange().subscribe(imgSelectionList => {
+        const subImgSelection = this.imgSelectionService.imgSelection$.subscribe(imgSelectionList => {
             if (imgSelectionList && imgSelectionList.length) {
                 this.eventService.sendImgSelectedToPage(imgSelectionList[0]);
             }
@@ -552,11 +626,11 @@ class ImgManagerWebElementComponent {
     }
     setDisplayedPageConfig() {
         const isFicheProductPage = /\/products\/(\d+\/edit|create)/.test(window.location.pathname);
-        this.imgManagerDisplayConfig = isFicheProductPage ? this.pageficheProductConfig : this.pageEventConfig;
+        this.imgManagerDisplayConfig = isFicheProductPage ? this.pageFicheProductConfig : this.pageEventConfig;
     }
     handleFicheProductTab() {
         const tabsSub = this.ficheProductService.handleTabs().subscribe(isPhotosTab => {
-            this.imgManagerDisplayConfig = isPhotosTab ? this.pageficheProductConfig : this.pageEventConfig;
+            this.imgManagerDisplayConfig = isPhotosTab ? this.pageFicheProductConfig : this.pageEventConfig;
             this.isPhotosTab = isPhotosTab;
         });
         this.subscriptions.push(tabsSub);
@@ -570,74 +644,48 @@ class ImgManagerWebElementComponent {
     getCredentials() {
         return from(this.authCredentialsService.get());
     }
-    setAppVars(userId, shopId, accountId, token) {
-        this.userId = userId;
-        this.id_shop = shopId;
-        this.accountId = accountId;
-        this.token_shop = token;
-    }
-    setImgManagerExtraConfig() {
-        const apiDto = new ImgApiDto();
-        apiDto.shop_token = this.token_shop;
-        apiDto.image_manager_route = environment.wizi_api + "/image-manager/shops/" + this.id_shop;
-        apiDto.canva_token = 'wdByHayF5v57nj2ZSLvu055O';
-        apiDto.canva_url = 'https://sdk.canva.com/designbutton/v2/api.js';
-        apiDto.pexels_token = '563492ad6f91700001000001e39215727d8b42c1b08498a9ce1e6b94';
-        apiDto.pexels_route = 'https://api.pexels.com/v1';
-        apiDto.shop_category = 'other'; // The shop categorie is retrieve later with the getShopCategory methode
-        apiDto.assets_route = environment.assets_route;
-        const imgCDNConfigDTO = new ImgCDNConfigDTO();
-        imgCDNConfigDTO.url_raw_image = `${environment.CDN_URL}${this.id_shop}/RAW-`;
-        imgCDNConfigDTO.url_100_image = `${environment.CDN_URL}${this.id_shop}/m100-`;
-        imgCDNConfigDTO.url_200_image = `${environment.CDN_URL}${this.id_shop}/cs200-`;
-        imgCDNConfigDTO.url_400_image = `${environment.CDN_URL}${this.id_shop}/cs400-`;
-        imgCDNConfigDTO.url_800_image = `${environment.CDN_URL}${this.id_shop}/cs800-`;
-        this.imgExternalConfig = new ImgManagerConfigDto();
-        this.imgExternalConfig.api = apiDto;
-        this.imgExternalConfig.imgCDNConfig = imgCDNConfigDTO;
-        const subShopCategory = this.getShopCategory().subscribe(shop => {
-            if (shop && shop['category']) {
-                this.imgExternalConfig.api.shop_category = shop['category'];
-            }
-        });
-        this.subscriptions.push(subShopCategory);
-    }
-    getShopCategory() {
-        return this.http.get(`${environment.wizi_api}/shops/${this.id_shop}`, this.getOptionsHeadersWithBearer());
-    }
-    getOptionsHeadersWithBearer() {
-        const header = { headers: new HttpHeaders({
-                Authorization: 'Bearer ' + this.token_shop
-            })
-        };
-        return header;
+    setAppVars(shopId, token) {
+        this.webelementImageManagerApiService.shopToken = token;
+        this.webelementImageManagerApiService.shopId = shopId;
+        if (shopId) {
+            this.webelementImageManagerApiService.setShopCategory(shopId).subscribe();
+        }
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
 }
-ImgManagerWebElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementComponent, deps: [{ token: i1$1.TranslateService }, { token: i2.ImgSelectionService }, { token: i2.CanvaService }, { token: FicheProductService }, { token: AuthCredentialsService }, { token: i1.HttpClient }, { token: EventService }, { token: i2.ImgManagerService }], target: i0.ɵɵFactoryTarget.Component });
-ImgManagerWebElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgManagerWebElementComponent, selector: "img-manager-webelement", ngImport: i0, template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        [externalConfig]=\"imgExternalConfig\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.WzImgManagerComponent, selector: "wz-img-manager", inputs: ["stateDisplayed", "showSelection", "externalConfig", "forceToOpenCanva", "multipleImgMode", "showImgManagerModule"], outputs: ["imgManagerClosed"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+ImgManagerWebElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementComponent, deps: [{ token: i1$1.TranslateService }, { token: i2.CanvaService }, { token: FicheProductService }, { token: AuthCredentialsService }, { token: EventService }, { token: i2.ImgManagerService }, { token: i2.ImgSelectionService }, { token: WebelementImageManagerApiService }], target: i0.ɵɵFactoryTarget.Component });
+ImgManagerWebElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgManagerWebElementComponent, selector: "img-manager-webelement", providers: [
+        ImgSelectionService
+    ], ngImport: i0, template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.WzImgManagerComponent, selector: "wz-img-manager", inputs: ["stateDisplayed", "showSelection", "forceToOpenCanva", "multipleImgMode", "showImgManagerModule"], outputs: ["imgManagerClosed", "imgSelectionChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-manager-webelement', template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        [externalConfig]=\"imgExternalConfig\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: i2.ImgSelectionService }, { type: i2.CanvaService }, { type: FicheProductService }, { type: AuthCredentialsService }, { type: i1.HttpClient }, { type: EventService }, { type: i2.ImgManagerService }]; } });
+            args: [{ selector: 'img-manager-webelement', providers: [
+                        ImgSelectionService
+                    ], template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: i2.CanvaService }, { type: FicheProductService }, { type: AuthCredentialsService }, { type: EventService }, { type: i2.ImgManagerService }, { type: i2.ImgSelectionService }, { type: WebelementImageManagerApiService }]; } });
 
 class ImgManagerWebElementModule {
 }
 ImgManagerWebElementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ImgManagerWebElementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementModule, declarations: [ImgManagerWebElementComponent], imports: [CommonModule,
-        HttpClientModule,
-        WzImgManagerModule,
-        TranslateModule], exports: [ImgManagerWebElementComponent] });
+        HttpClientModule, i2.WzImgManagerModule, TranslateModule], exports: [ImgManagerWebElementComponent] });
 ImgManagerWebElementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementModule, providers: [
+        {
+            provide: WebelementImageManagerApiService,
+            useClass: WebelementImageManagerApiService,
+        },
         StorageService,
         FicheProductService,
         EventService,
         AuthCredentialsService
     ], imports: [CommonModule,
         HttpClientModule,
-        WzImgManagerModule,
+        WzImgManagerModule.withConfig({
+            provide: ApiService,
+            useExisting: WebelementImageManagerApiService,
+        }),
         TranslateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerWebElementModule, decorators: [{
             type: NgModule,
@@ -646,11 +694,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     imports: [
                         CommonModule,
                         HttpClientModule,
-                        WzImgManagerModule,
+                        WzImgManagerModule.withConfig({
+                            provide: ApiService,
+                            useExisting: WebelementImageManagerApiService,
+                        }),
                         TranslateModule,
                     ],
                     exports: [ImgManagerWebElementComponent],
                     providers: [
+                        {
+                            provide: WebelementImageManagerApiService,
+                            useClass: WebelementImageManagerApiService,
+                        },
                         StorageService,
                         FicheProductService,
                         EventService,
@@ -669,4 +724,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ImgManagerWebElementComponent, ImgManagerWebElementModule };
 //# sourceMappingURL=wizishop-img-manager-webelement.mjs.map
-//# sourceMappingURL=wizishop-img-manager-webelement.mjs.map